/* ========================================================================
   DigiFULL — Clínica nas Nuvens — 01 Hero
   v1.0.6: desktop preservado + mobile aprovado com transição compacta de nuvens
======================================================================== */
.dgf-cnn-hero {
    --dgf-header-offset: 92px;

    position: relative;
    min-height: clamp(620px, calc(100svh - var(--dgf-header-offset)), 820px);
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 84% 38%, rgba(67, 213, 223, .24), transparent 36%),
        linear-gradient(135deg, #F5FFFC 0%, #DDFBF3 48%, #D2F7F6 100%);
}

.dgf-cnn-hero__media,
.dgf-cnn-hero__media-fallback,
.dgf-cnn-hero__veil {
    position: absolute;
    inset: 0;
}

.dgf-cnn-hero__media {
    z-index: 0;
    overflow: hidden;
}

.dgf-cnn-hero__media::after {
    content: "";
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.dgf-cnn-hero__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    object-position: 60% center;
    opacity: 0;
    transition: opacity .35s ease;
}

.dgf-cnn-hero.is-video-ready .dgf-cnn-hero__video {
    opacity: 1;
}

.dgf-cnn-hero__media-fallback {
    z-index: -1;
    background:
        radial-gradient(circle at 72% 42%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.12) 25%, transparent 46%),
        radial-gradient(circle at 88% 76%, rgba(67,213,223,.30), transparent 34%),
        linear-gradient(135deg, #F5FFFC 0%, #DDFBF3 48%, #D2F7F6 100%);
}

.dgf-cnn-hero__veil {
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(248,255,253,.99) 0%,
            rgba(248,255,253,.95) 26%,
            rgba(248,255,253,.78) 40%,
            rgba(248,255,253,.28) 56%,
            rgba(248,255,253,.03) 72%
        );
}

.dgf-cnn-hero__shell {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    width: min(var(--dgf-container-wide), 100%);
    min-height: inherit;
    margin: 0 auto;
    padding: 82px 48px 88px;
}

.dgf-cnn-hero__copy {
    width: min(55%, 680px);
}

.dgf-cnn-hero__title {
    max-width: 680px;
    margin: 0 0 22px;
    color: var(--dgf-color-heading);
    font-size: clamp(44px, 4.05vw, 62px);
    line-height: 1;
    font-weight: 850;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.dgf-cnn-hero__title span,
.dgf-cnn-hero__title strong {
    display: block;
}

.dgf-cnn-hero__title strong {
    margin-top: 7px;
    color: var(--dgf-color-primary);
    font: inherit;
}

.dgf-cnn-hero__description {
    max-width: 590px;
    margin: 0 0 29px;
    color: var(--dgf-color-body);
    font-size: 17px;
    line-height: 1.62;
    text-wrap: pretty;
}

.dgf-cnn-hero__description strong {
    color: var(--dgf-color-ink);
    font-weight: 750;
}

.dgf-cnn-hero__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dgf-cnn-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 15px 25px;
    border: 1px solid var(--dgf-color-primary);
    border-radius: 999px;
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #F5821F 0%, #FF9D4D 100%);
    box-shadow: 0 20px 38px -24px rgba(245,130,31,.78);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
    text-decoration: none !important;
    transition: transform .24s ease, box-shadow .24s ease, background .24s ease;
}

.dgf-cnn-hero__cta:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #E6730D 0%, #F5821F 100%);
    box-shadow: 0 24px 42px -24px rgba(245,130,31,.88);
}

.dgf-cnn-hero__cta:focus-visible,
.dgf-cnn-hero__play-fallback:focus-visible {
    outline: 3px solid rgba(245,130,31,.34);
    outline-offset: 4px;
}

.dgf-cnn-hero__play-fallback {
    position: absolute;
    z-index: 8;
    right: 28px;
    bottom: 28px;
    min-height: 44px;
    padding: 10px 15px;
    border: 1px solid rgba(16,33,63,.14);
    border-radius: 999px;
    color: var(--dgf-color-ink);
    background: rgba(255,255,255,.88);
    box-shadow: 0 16px 34px -24px rgba(13,29,58,.46);
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

@media (min-width: 768px) and (max-width: 1100px) {
    .dgf-cnn-hero__shell {
        padding-right: 34px;
        padding-left: 34px;
    }

    .dgf-cnn-hero__copy {
        width: min(60%, 610px);
    }

    .dgf-cnn-hero__title {
        font-size: clamp(39px, 5vw, 50px);
    }

    .dgf-cnn-hero__description {
        max-width: 540px;
        font-size: 15.5px;
    }

    .dgf-cnn-hero__video {
        object-position: 63% center;
    }
}

@media (min-width: 768px) and (max-height: 800px) {
    .dgf-cnn-hero {
        min-height: 560px;
        max-height: 690px;
    }

    .dgf-cnn-hero__shell {
        padding-top: 50px;
        padding-bottom: 60px;
    }

    .dgf-cnn-hero__title {
        margin-bottom: 17px;
        font-size: clamp(39px, 3.8vw, 50px);
    }

    .dgf-cnn-hero__description {
        margin-bottom: 22px;
        font-size: 15.5px;
        line-height: 1.52;
    }

    .dgf-cnn-hero__cta {
        min-height: 50px;
        padding: 13px 22px;
    }
}

@media (max-width: 767px) and (orientation: portrait) {
    .dgf-cnn-hero {
        min-height: 0;
        overflow: hidden;
        background: #FFFFFF;
    }

    .dgf-cnn-hero__media {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 11;
        background: linear-gradient(135deg, #E3FCF6, #CFF7F6);
    }

    .dgf-cnn-hero__media::after {
        inset: 42% 0 -1px;
        background: linear-gradient(
            180deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.30) 32%,
            rgba(255,255,255,.82) 72%,
            #FFFFFF 100%
        );
    }

    .dgf-cnn-hero__video {
        inset: 0;
        width: 100%;
        height: 100%;
        object-position: center center;
    }

    .dgf-cnn-hero__veil {
        display: none;
    }

    .dgf-cnn-hero__shell {
        display: block;
        min-height: 0;
        margin: -92px auto 0;
        padding: 0 20px 58px;
    }

    .dgf-cnn-hero__copy {
        width: 100%;
        padding: 72px 0 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .dgf-cnn-hero__title {
        max-width: 520px;
        margin-bottom: 15px;
        font-size: clamp(31px, 8.5vw, 39px);
        line-height: 1.02;
    }

    .dgf-cnn-hero__title strong {
        margin-top: 5px;
    }

    .dgf-cnn-hero__description {
        max-width: 520px;
        margin-bottom: 22px;
        font-size: 14.5px;
        line-height: 1.55;
    }

    .dgf-cnn-hero__cta {
        width: 100%;
        min-height: 50px;
        padding: 13px 18px;
        font-size: 14px;
    }

    .dgf-cnn-hero__play-fallback {
        top: 18px;
        right: 18px;
        bottom: auto;
    }
}

@media (max-width: 390px) {
    .dgf-cnn-hero__shell {
        margin-top: -82px;
        padding-right: 16px;
        padding-left: 16px;
    }

    .dgf-cnn-hero__copy {
        padding-top: 66px;
    }

    .dgf-cnn-hero__title {
        font-size: clamp(29px, 8.2vw, 35px);
    }

    .dgf-cnn-hero__description {
        font-size: 13.7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dgf-cnn-hero__video {
        display: none;
    }

    .dgf-cnn-hero__cta {
        transition: none;
    }

    .dgf-cnn-hero__cta:hover {
        transform: none;
    }
}


/* ========================================================================
   v1.3.2 — Hero responsivo para 2K / 4K
   Remove o teto de 820px em telas grandes para reduzir o crop do vídeo 16:9.
======================================================================== */
@media (min-width: 1800px) and (min-height: 900px) {
    .dgf-cnn-hero {
        min-height: calc(100svh - var(--dgf-header-offset));
        max-height: none;
    }

    .dgf-cnn-hero__shell {
        min-height: inherit;
        padding-top: clamp(96px, 8svh, 146px);
        padding-bottom: clamp(104px, 9svh, 158px);
    }

    .dgf-cnn-hero__copy {
        width: min(52%, 720px);
    }

    .dgf-cnn-hero__title {
        max-width: 720px;
        font-size: clamp(58px, 3.35vw, 76px);
    }

    .dgf-cnn-hero__description {
        max-width: 620px;
        font-size: clamp(17px, .92vw, 19px);
    }

    .dgf-cnn-hero__video {
        object-position: 60% 50%;
    }
}

/* Em monitores muito largos, protege o personagem e o centro clínico. */
@media (min-width: 2400px) and (max-aspect-ratio: 2/1) {
    .dgf-cnn-hero__video {
        object-position: 61% 48%;
    }
}


/* ========================================================================
   v1.3.3 — Safe area do Hero em monitores largos
   Mantém CTA e copy fora da faixa de nuvens em 2K/4K, inclusive quando
   a viewport do navegador é relativamente baixa para a largura da tela.
======================================================================== */

/* 2K / ultrawide com viewport baixa ou média: reduz a altura editorial da
   copy e reserva fisicamente a região inferior para a transição de nuvens. */
@media (min-width: 1600px) and (max-height: 899px) {
    .dgf-cnn-hero {
        min-height: max(800px, calc(100svh - 18px));
        max-height: none;
    }

    .dgf-cnn-hero__shell {
        align-items: flex-start;
        min-height: inherit;
        padding-top: clamp(54px, 6.8svh, 68px);
        padding-bottom: 270px;
    }

    .dgf-cnn-hero__copy {
        width: min(58%, 760px);
    }

    .dgf-cnn-hero__title {
        max-width: 760px;
        margin-bottom: 17px;
        font-size: clamp(46px, 2.7vw, 53px);
        line-height: .98;
    }

    .dgf-cnn-hero__title strong {
        margin-top: 5px;
    }

    .dgf-cnn-hero__description {
        max-width: 620px;
        margin-bottom: 21px;
        font-size: 15.5px;
        line-height: 1.5;
    }

    .dgf-cnn-hero__cta {
        min-height: 50px;
        padding: 13px 22px;
        font-size: 14px;
    }

    .dgf-cnn-hero__video {
        object-position: 61% 46%;
    }
}

/* Telas 2K/4K altas: o Hero pode continuar amplo, mas o centro da copy é
   deslocado para cima por meio de uma safe area inferior equivalente à
   faixa ocupada pelas nuvens da seção seguinte. */
@media (min-width: 1800px) and (min-height: 900px) {
    .dgf-cnn-hero__shell {
        padding-top: clamp(82px, 7svh, 118px);
        padding-bottom: clamp(250px, 20svh, 318px);
    }

    .dgf-cnn-hero__copy {
        width: min(54%, 760px);
    }

    .dgf-cnn-hero__title {
        max-width: 760px;
        font-size: clamp(56px, 3.05vw, 72px);
    }
}

/* Monitores realmente ultrawide: protege a composição sem aumentar a copy. */
@media (min-width: 2200px) and (min-aspect-ratio: 21/10) {
    .dgf-cnn-hero__copy {
        width: min(50%, 760px);
    }

    .dgf-cnn-hero__video {
        object-position: 63% 46%;
    }
}