/* Revisão responsiva e estabilidade do slider, agosto de 2026. */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

main,
section,
footer,
.container,
.section-grid,
.two-columns,
.support-grid,
.apps-tools-row,
.apps-viewport,
.plans-grid,
.services-bento,
.mission-grid,
.footer-grid,
.shark-form,
.field,
.glass-card,
.plan-card,
.service-card,
.app-card {
    min-width: 0;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

input,
select,
textarea {
    width: 100%;
}

.hero,
.hero-slider,
.hero-slide {
    min-height: 100svh;
    min-height: 100dvh;
}

.hero-slide {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.hero-slide .container.slide-content {
    width: min(calc(100% - 40px), var(--max));
    max-width: var(--max);
    margin-inline: auto;
    padding-left: 0;
    padding-right: 0;
}

.slide-content > * {
    max-width: min(585px, 100%);
}

.slide-title {
    font-size: clamp(2.25rem, 5.2vw, 5.3rem);
    line-height: 0.98;
    overflow-wrap: anywhere;
}

.slide-description {
    font-size: clamp(0.88rem, 1.3vw, 1rem);
}

.channel-marquee {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.marquee-track {
    max-width: none;
    will-change: transform;
}

.footer-grid p,
.footer-grid a,
.contact-buttons a,
.legal-notice,
.plan-card,
.service-card {
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    .site-header .nav-wrap {
        gap: 16px;
    }
}

@media (max-width: 900px) {
    .site-header {
        height: var(--header-h);
    }

    .nav-wrap {
        width: min(calc(100% - 28px), var(--max));
    }

    .main-nav {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - var(--header-h));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 30px 24px max(30px, env(safe-area-inset-bottom));
    }

    .main-nav a {
        width: min(100%, 420px);
        text-align: center;
    }

    .hero-slide::before {
        background: linear-gradient(90deg, rgba(4, 11, 18, 0.96) 0%, rgba(4, 11, 18, 0.82) 54%, rgba(4, 11, 18, 0.48) 100%);
    }

    .hero-slide .container.slide-content {
        width: min(calc(100% - 32px), var(--max));
        padding-top: calc(var(--header-h) + 52px);
        padding-bottom: 150px;
        justify-content: center;
    }

    .slide-title {
        font-size: clamp(2.15rem, 7vw, 4.3rem);
    }

    .support-grid,
    .trial-grid,
    .about-grid {
        gap: 34px;
    }

    .support-form-shell,
    .support-info,
    .trial-copy,
    .form-shell {
        width: 100%;
        max-width: 100%;
        transform: none !important;
    }
}

@media (max-width: 640px) {
    :root {
        --header-h: 68px;
    }

    .container,
    .nav-wrap {
        width: calc(100% - 28px);
    }

    .site-header .brand img,
    .brand img {
        width: 110px;
        height: auto;
    }

    .menu-toggle {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    .hero,
    .hero-slider,
    .hero-slide {
        min-height: max(720px, 100svh);
        min-height: max(720px, 100dvh);
    }

    .hero-slide {
        background-position: 58% center;
    }

    .hero-slide::before {
        background: linear-gradient(180deg, rgba(4, 11, 18, 0.74) 0%, rgba(4, 11, 18, 0.82) 34%, rgba(4, 11, 18, 0.97) 74%, #040b12 100%);
    }

    .hero-slide::after {
        background: linear-gradient(0deg, rgba(7, 16, 25, 0.98) 0%, transparent 48%),
            linear-gradient(90deg, rgba(33, 133, 213, 0.08), transparent 55%);
    }

    .hero-slide .container.slide-content,
    .hero .slide-content {
        width: calc(100% - 28px);
        max-width: 430px;
        margin-inline: auto;
        min-height: max(720px, 100svh);
        min-height: max(720px, 100dvh);
        padding: calc(var(--header-h) + 40px) 0 138px;
        justify-content: center;
        align-items: center;
        text-align: center;
        transform: none;
    }

    .slide-content > * {
        max-width: 100%;
    }

    .hero .slide-kicker {
        display: flex !important;
        justify-content: center;
        width: 100%;
        margin-bottom: 14px;
        font-size: 0.62rem;
        line-height: 1.3;
    }

    .hero .slide-kicker::before {
        width: 28px;
    }

    .hero .slide-title,
    .slide-title {
        width: 100%;
        max-width: 360px;
        margin: 0 auto 16px;
        font-size: clamp(2rem, 10vw, 3.15rem);
        line-height: 1.02;
        letter-spacing: -0.045em;
        text-wrap: balance;
    }

    .hero .slide-meta {
        justify-content: center;
        margin: 0 auto 14px;
    }

    .hero .slide-meta > .slide-rating {
        display: inline-flex !important;
        min-height: 30px;
        padding: 4px 11px;
        font-size: 0.67rem;
        color: #dff3ff;
    }

    .hero .slide-description,
    .slide-description {
        width: 100%;
        max-width: 350px;
        margin-inline: auto;
        font-size: 0.88rem;
        line-height: 1.55;
        -webkit-line-clamp: 4 !important;
        line-clamp: 4;
    }

    .hero .slide-actions {
        width: min(100%, 330px);
        max-width: 330px;
        margin: 20px auto 0;
        gap: 9px;
    }

    .hero .slide-actions a {
        min-height: 46px;
        padding-inline: 10px;
    }

    .hero-controls {
        left: 14px;
        right: 14px;
        bottom: max(54px, calc(38px + env(safe-area-inset-bottom)));
        width: auto;
        transform: none;
    }

    .slider-navigation {
        width: min(100%, 280px);
        min-width: 0;
        margin-inline: auto;
    }

    .channel-marquee {
        grid-template-columns: 106px minmax(0, 1fr) !important;
    }

    .marquee-title,
    .marquee-label {
        width: 106px;
        min-width: 106px;
        padding-inline: 8px !important;
        font-size: 0.55rem !important;
        line-height: 1.2;
        overflow-wrap: normal;
    }

    .section-header h2,
    .section-copy h2 {
        overflow-wrap: anywhere;
    }

    .apps-tools-row,
    .smart-tv-highlight,
    .contact-buttons,
    .exit-offer-dialog__actions {
        grid-template-columns: 1fr !important;
    }

    .apps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-card,
    .app-chip,
    .plan-card,
    .service-card,
    .glass-card {
        max-width: 100%;
    }

    .contact-buttons a {
        grid-template-columns: 54px minmax(0, 1fr) auto;
        gap: 10px;
        padding-inline: 12px;
    }

    .contact-buttons a strong,
    .contact-buttons a span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .shark-form {
        width: 100%;
        padding-inline: 16px;
    }

    .choice-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .choice {
        min-width: 0;
    }

    .footer-grid,
    .footer-bottom {
        width: calc(100% - 28px);
    }
}

@media (max-width: 380px) {
    .container,
    .nav-wrap,
    .footer-grid,
    .footer-bottom {
        width: calc(100% - 22px);
    }

    .hero-slide .container.slide-content,
    .hero .slide-content {
        width: calc(100% - 22px);
        padding-bottom: 132px;
    }

    .hero .slide-title,
    .slide-title {
        font-size: clamp(1.82rem, 9.5vw, 2.55rem);
    }

    .hero .slide-actions {
        max-width: 300px;
    }

    .hero .slide-actions a {
        min-height: 44px;
        padding-inline: 8px;
    }

    .apps-grid {
        grid-template-columns: 1fr;
    }

    .choice-row {
        grid-template-columns: 1fr;
    }

    .channel-marquee {
        grid-template-columns: 92px minmax(0, 1fr) !important;
    }

    .marquee-title,
    .marquee-label {
        width: 92px;
        min-width: 92px;
        font-size: 0.49rem !important;
    }
}

@media (max-width: 640px) { .hero .slide-actions .ghost::after { content: "PLANOS" !important; } }

/* V3, filete, CTAs, consentimento e compatibilidade */
.channel-marquee {
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: stretch;
}
.marquee-title {
    position: relative;
    z-index: 3;
    width: 190px;
    min-width: 190px;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0 22px 0 18px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #2d9ff4, #2185d5 52%, #155f9d);
    clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
    box-shadow: 18px 0 36px rgba(0, 0, 0, 0.22);
    font-size: .67rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: .08em;
    text-align: center;
}
.marquee-track {
    position: relative;
    z-index: 1;
}

.compatibility-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 30px;
}
.compatibility-card {
    min-height: 230px;
}
.compatibility-card p {
    margin: 12px 0 0;
    color: #8fa3b4;
    font-size: .78rem;
    line-height: 1.65;
}

.lead-cta {
    margin-top: 28px;
    padding: 18px 20px;
    border: 1px solid rgba(123, 199, 255, .22);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(33, 133, 213, .14), rgba(7, 19, 30, .78));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 18px 45px rgba(0,0,0,.16);
}
.lead-cta > div {
    display: grid;
    gap: 5px;
}
.lead-cta strong {
    color: #e7f6ff;
    font-size: .82rem;
    letter-spacing: .06em;
}
.lead-cta span {
    color: #8198aa;
    font-size: .72rem;
    line-height: 1.5;
}
.lead-whatsapp-button {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 13px;
    background: linear-gradient(135deg, #23a96d, #168c58);
    color: #fff;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .055em;
    box-shadow: 0 12px 30px rgba(22, 140, 88, .22);
}
.lead-whatsapp-button i {
    font-style: normal;
    font-size: 1rem;
}

.privacy-consent.field.full {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid rgba(123, 199, 255, .14);
    border-radius: 12px;
    background: rgba(33, 133, 213, .045);
}
.privacy-consent.field.full input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: checkbox;
    width: 19px;
    height: 19px;
    min-height: 19px;
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    box-shadow: none;
    accent-color: var(--blue);
    cursor: pointer;
}
.privacy-consent-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
}
.privacy-consent-copy label {
    margin: 0;
    color: #98aab8;
    font-size: .7rem;
    line-height: 1.5;
    cursor: pointer;
}
.privacy-consent-copy a {
    width: fit-content;
    color: #83cbff;
    font-size: .68rem;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 1000px) {
    .compatibility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .channel-marquee { grid-template-columns: 112px minmax(0, 1fr) !important; }
    .marquee-title {
        width: 112px;
        min-width: 112px;
        padding-inline: 8px 15px;
        font-size: .51rem !important;
        letter-spacing: .045em;
    }
    .lead-cta {
        align-items: stretch;
        flex-direction: column;
        padding: 16px;
    }
    .lead-whatsapp-button { width: 100%; }
}
@media (max-width: 520px) {
    .compatibility-grid { grid-template-columns: 1fr; }
    .channel-marquee { grid-template-columns: 96px minmax(0, 1fr) !important; }
    .marquee-title { width: 96px; min-width: 96px; font-size: .46rem !important; }
}