/* ==========================================================================
   Slides do carrossel principal — anatomia comum (.mc-*)

   É o MESMO desenho do slide Outubro Rosa (hero_outubro_rosa/css/style.css), que por
   sua vez segue o antigo Trabalhe Conosco: cantos chanfrados por clip-path, título em
   caixa alta com um trecho em destaque, texto curto, lista curta em chips, preço,
   botão de vidro e painel lateral. Só a paleta muda, declarada uma vez nas variáveis
   de .mc-slide (paleta da casa: ciano + laranja). Não inventar forma, fonte ou botão
   novo em slide nenhum: o slide novo entra com as classes daqui.

   Ordem das camadas: <picture class="mc-fundo"> (0) < .mc-veu e ::after (1) <
   malha ::before (2) < conteúdo (4).

   Foco: os elementos com clip-path cortam o outline externo (e o box-shadow); por isso
   o anel de foco é desenhado POR DENTRO (outline-offset negativo), senão o foco de
   teclado some.
   ========================================================================== */

.mc-slide,
.mc-modal {
    --mc-acento: #00ffea;
    --mc-acento-claro: #8bfff5;
    --mc-acento-borda: rgba(0, 255, 234, 0.42);
    --mc-quente: #ff8e1d;
    --mc-destaque: #8bfff5;
    --mc-destaque-brilho: 0 0 18px rgba(0, 255, 234, 0.32);
    --mc-vidro-bg: var(--vn-glass-orange-bg, linear-gradient(135deg, rgba(255, 77, 29, 0.2), rgba(255, 140, 0, 0.2)));
    --mc-vidro-bg-hover: var(--vn-glass-orange-bg-hover, linear-gradient(135deg, rgba(255, 77, 29, 0.32), rgba(255, 140, 0, 0.32)));
    --mc-vidro-borda: var(--vn-glass-orange-border, #ff4d1d);
    --mc-vidro-brilho: var(--vn-glass-orange-glow, 0 0 20px rgba(255, 77, 29, 0.2));
    --mc-vidro-brilho-hover: var(--vn-glass-orange-glow-hover, 0 0 28px rgba(255, 77, 29, 0.38));
    --mc-vidro-texto: var(--vn-glass-text-shadow, 0 0 8px rgba(255, 77, 29, 0.8));
    --mc-icone-cta: var(--vn-neon-orange, #ff4d1d);
    --mc-foco: #ffffff;
    --mc-chanfro: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    --mc-chanfro-p: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    --mc-chanfro-g: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

.mc-slide {
    --mc-fundo-pos: center center;
    --mc-fundo-pos-m: center center;
    --mc-veu:
        linear-gradient(90deg, rgba(5, 11, 20, 0.93) 0%, rgba(5, 11, 20, 0.66) 40%, rgba(5, 11, 20, 0.16) 70%, rgba(5, 11, 20, 0.34) 100%),
        linear-gradient(180deg, rgba(5, 11, 20, 0.08) 0%, rgba(5, 11, 20, 0.14) 52%, rgba(5, 11, 20, 0.6) 100%);
    --mc-veu-m: linear-gradient(180deg, rgba(5, 11, 20, 0.88) 0%, rgba(5, 11, 20, 0.76) 40%, rgba(5, 11, 20, 0.68) 64%, rgba(5, 11, 20, 0.94) 100%);

    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    align-items: safe center;
    /* Folga para a barra de controles do carrossel (44px a 14px da base). */
    padding: 0 0 64px;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
}

.mc-slide,
.mc-slide p,
.mc-slide li,
.mc-slide span,
.mc-slide strong,
.mc-slide h2 {
    color: #fff !important;
}

/* ---------- fundo ---------- */
.mc-fundo,
.mc-veu {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mc-fundo {
    z-index: 0;
    display: block;
}

.mc-fundo__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--mc-fundo-pos);
}

.mc-veu {
    z-index: 1;
    background: var(--mc-veu);
}

/* Malha do tema e faixa diagonal do rodapé (as mesmas do Outubro Rosa, em ciano). */
.mc-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 50% 50%, transparent 20%, #000 120%),
        linear-gradient(90deg, rgba(0, 255, 234, 0.03) 1px, transparent 1px),
        linear-gradient(rgba(0, 255, 234, 0.03) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    opacity: 0.45;
    pointer-events: none;
    z-index: 2;
}

.mc-slide::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 42%;
    background:
        linear-gradient(180deg, transparent 0%, rgba(255, 77, 29, 0.07) 72%, rgba(0, 255, 234, 0.07) 100%),
        repeating-linear-gradient(115deg, transparent 0 18px, rgba(255, 255, 255, 0.04) 19px 20px);
    opacity: 0.9;
    pointer-events: none;
    z-index: 1;
}

/* Rolagem de emergência (padrão do Outubro Rosa/Essencial): com fonte ou espaçamento
   de texto maiores (WCAG 1.4.4 / 1.4.12), quem rola é o conteúdo, e preço e botões
   continuam alcançáveis em vez de sumirem atrás do overflow: hidden do slide. */
.mc-conteudo {
    position: relative;
    z-index: 4;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: clip;
    scrollbar-width: none;
}

.mc-conteudo::-webkit-scrollbar {
    display: none;
}

/* ---------- eyebrow ---------- */
.mc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin: 0 0 16px;
    color: var(--mc-acento) !important;
    border: 1px solid var(--mc-acento-borda);
    background: rgba(5, 11, 20, 0.72);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.2;
    text-transform: uppercase;
    clip-path: var(--mc-chanfro);
    box-shadow: 0 0 18px rgba(0, 255, 234, 0.14);
}

.mc-eyebrow i {
    color: var(--mc-acento);
}

.mc-slide .mc-eyebrow__rotulo {
    padding: 3px 7px;
    color: #050b14 !important;
    background: var(--mc-quente);
    font-size: 0.75rem; /* 12px: piso de texto do carrossel */
    line-height: 1;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

/* ---------- título ---------- */
.mc-titulo {
    max-width: 680px;
    margin: 0 0 16px;
    font-size: clamp(2.5rem, 5vw, 4.4rem);
    line-height: 0.95;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: 0 18px 34px rgba(0, 0, 0, 0.45);
    text-wrap: balance;
}

/* Título longo (três linhas no tamanho cheio): um degrau abaixo no desktop. */
.mc-titulo--longo {
    font-size: clamp(2.3rem, 4.1vw, 3.5rem);
}

/* Vence `body.dark-theme h2 span { color: var(--neon-blue) !important }` por especificidade. */
.mc-slide .mc-titulo__destaque {
    color: var(--mc-destaque) !important;
    text-shadow: var(--mc-destaque-brilho);
}

/* ---------- texto e lista ---------- */
.mc-slide .mc-descricao {
    max-width: 620px;
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 1.04rem;
    line-height: 1.6;
    text-wrap: pretty; /* sem palavra órfã na última linha ("jogo.") */
}

.mc-itens {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 240px));
    gap: 10px;
    max-width: 540px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.mc-slide .mc-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 12px;
    background: rgba(5, 11, 20, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.15;
    clip-path: var(--mc-chanfro-p);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mc-item i {
    flex: 0 0 auto;
    color: var(--mc-quente);
    font-size: 1rem;
}

/* ---------- escolha (velocidade etc.) ---------- */
.mc-passo {
    margin: 0 0 18px;
}

.mc-slide .mc-passo__rotulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.mc-slide .mc-passo__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    color: #050b14 !important;
    background: var(--mc-acento);
    font-size: 0.72rem;
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

.mc-opcoes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: 480px;
}

.mc-opcao {
    position: relative;
    min-height: 48px;
    padding: 10px 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    background: rgba(5, 11, 20, 0.66);
    color: rgba(255, 255, 255, 0.86);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    line-height: 1.1;
    text-transform: uppercase;
    cursor: pointer;
    clip-path: var(--mc-chanfro-p);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mc-opcao:hover {
    color: #fff;
    border-color: var(--mc-acento-borda);
    background: rgba(0, 255, 234, 0.08);
}

.mc-opcao[aria-pressed="true"] {
    color: #fff;
    background: var(--mc-vidro-bg);
    border-color: var(--mc-vidro-borda);
    box-shadow: inset 0 0 18px rgba(255, 77, 29, 0.22);
    text-shadow: var(--mc-vidro-texto);
}

.mc-opcao:focus-visible {
    outline: 2px solid var(--mc-foco);
    outline-offset: -5px;
}

/* ---------- preço + botões ---------- */
.mc-acao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
}

.mc-slide .mc-preco__rotulo {
    display: block;
    color: rgba(255, 255, 255, 0.76) !important;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.mc-preco__valor {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 2px 0 0;
    line-height: 1;
}

.mc-preco__valor strong {
    font-size: clamp(2.2rem, 3.6vw, 3rem);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.mc-slide .mc-preco__cifra,
.mc-slide .mc-preco__mes {
    color: var(--mc-quente) !important;
    font-size: 1rem;
    font-weight: 800;
}

.mc-preco__valor--consulta {
    font-size: 1.3rem;
    font-weight: 900;
    text-transform: uppercase;
}

.mc-botoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.mc-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 15px 26px;
    border-radius: 0;
    text-decoration: none;
    font-size: 0.98rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    clip-path: var(--mc-chanfro);
}

.mc-btn:focus-visible {
    outline: 2px solid var(--mc-foco);
    outline-offset: -6px;
}

.mc-btn--primario {
    color: #fff !important;
    background: var(--mc-vidro-bg);
    border: 1px solid var(--mc-vidro-borda);
    box-shadow: var(--mc-vidro-brilho);
    text-shadow: var(--mc-vidro-texto);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mc-btn--primario:hover,
.mc-btn--primario:focus-visible {
    transform: translateY(-2px);
    color: #fff !important;
    background: var(--mc-vidro-bg-hover);
    box-shadow: var(--mc-vidro-brilho-hover);
}

/* Ícone num círculo branco, como no botão de vidro dos outros slides. */
.mc-btn--primario > i:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--mc-icone-cta);
    font-size: 0.74rem;
    line-height: 1;
    text-shadow: none;
    box-shadow: 0 6px 14px rgba(171, 64, 15, 0.18);
}

.mc-btn--secundario {
    color: #fff !important;
    border: 1px solid var(--mc-acento-borda);
    background: rgba(5, 11, 20, 0.62);
    box-shadow: inset 0 0 18px rgba(0, 255, 234, 0.08);
}

.mc-btn--secundario:hover,
.mc-btn--secundario:focus-visible {
    transform: translateY(-2px);
    border-color: var(--mc-acento);
    background: rgba(0, 255, 234, 0.12);
}

/* Linha de apoio sob o preço/CTA (link para o card do plano, nota de condição).
   O padding de baixo guarda a área de toque do link (abaixo): sem ele, os 13px do link
   na última linha estouravam a caixa de rolagem de barra oculta (.mc-conteudo) e o
   primeiro giro da roda do mouse sobre o slide rolava o conteúdo em vez da página. */
.mc-slide .mc-apoio {
    text-wrap: pretty;
    margin: 14px 0 0;
    padding-bottom: 13px;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 1rem;
    line-height: 1.4;
}

/* Link no meio da frase: inline (alvo dentro de texto é exceção da WCAG 2.5.8). O
   padding vertical aumenta a área de toque sem abrir a entrelinha — com inline-flex de
   44px a segunda linha da frase ficava a ~30px da primeira. */
.mc-apoio a {
    display: inline;
    padding-block: 13px;
    color: var(--mc-acento-claro);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mc-apoio a:hover,
.mc-apoio a:focus-visible {
    color: #fff;
}

/* ---------- painel lateral (desktop) ---------- */
.mc-painel {
    position: relative;
    min-height: 440px;
}

.mc-painel__card {
    position: absolute;
    right: 0;
    bottom: 4%;
    width: min(320px, 82%);
    padding: 18px 20px;
    background: rgba(5, 11, 20, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.16);
    clip-path: var(--mc-chanfro-g);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mc-slide .mc-painel__card strong {
    display: block;
    margin-bottom: 4px;
    color: var(--mc-acento) !important;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mc-slide .mc-painel__card span {
    display: block;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.92rem;
}

/* ---------- entrada (troca de slide) ----------
   Animação disparada pela classe que o Swiper põe no slide ativo; não é estado inicial
   escondido: sem o JavaScript do carrossel o conteúdo continua visível. */
@keyframes mc-entra-esquerda {
    from { opacity: 0; transform: translateX(-36px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes mc-entra-direita {
    from { opacity: 0; transform: translateX(32px); }
    to { opacity: 1; transform: translateX(0); }
}

.swiper-slide-active .mc-slide .mc-anima {
    animation: mc-entra-esquerda 0.45s cubic-bezier(0.25, 1, 0.5, 1) both;
}

.swiper-slide-active .mc-slide .mc-anima:nth-child(2) { animation-delay: 0.06s; }
.swiper-slide-active .mc-slide .mc-anima:nth-child(3) { animation-delay: 0.12s; }
.swiper-slide-active .mc-slide .mc-anima:nth-child(4) { animation-delay: 0.18s; }
.swiper-slide-active .mc-slide .mc-anima:nth-child(5) { animation-delay: 0.24s; }
.swiper-slide-active .mc-slide .mc-anima:nth-child(n+6) { animation-delay: 0.3s; }

.swiper-slide-active .mc-slide .mc-anima-painel {
    animation: mc-entra-direita 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.2s both;
}

@media (prefers-reduced-motion: reduce) {
    .swiper-slide-active .mc-slide .mc-anima,
    .swiper-slide-active .mc-slide .mc-anima-painel {
        animation: none !important;
    }

    .mc-btn,
    .mc-opcao {
        transition: none;
    }

    .mc-btn--primario:hover,
    .mc-btn--primario:focus-visible,
    .mc-btn--secundario:hover,
    .mc-btn--secundario:focus-visible {
        transform: none;
    }
}

/* ---------- celular / tablet ----------
   Conteúdo no topo, centralizado, com a reserva de baixo para a barra de controles. */
@media (max-width: 991.98px) {
    #master-hero-carousel .mc-slide {
        align-items: flex-start;
        text-align: center;
        padding: clamp(8px, 1.6svh, 16px) 0 calc(66px + env(safe-area-inset-bottom, 0px));
    }

    .mc-fundo__img {
        object-position: var(--mc-fundo-pos-m);
    }

    .mc-veu {
        background: var(--mc-veu-m);
    }

    .mc-conteudo {
        padding-top: clamp(12px, 3svh, 32px);
    }

    .mc-titulo {
        max-width: 620px;
        margin-inline: auto;
        font-size: clamp(1.9rem, 7vw, 3.1rem);
        line-height: 1;
    }

    .mc-slide .mc-descricao {
        max-width: 560px;
        margin-inline: auto;
        font-size: 1rem;
        line-height: 1.45;
    }

    .mc-itens {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 460px;
        margin-inline: auto;
        gap: 8px;
    }

    /* Texto de conteúdo a 16px no celular e no tablet (regra 3 do plano). */
    .mc-slide .mc-item {
        justify-content: center;
        min-height: 40px;
        padding: 8px 10px;
        font-size: 1rem;
    }

    .mc-passo__rotulo {
        justify-content: center;
    }

    .mc-opcoes {
        margin-inline: auto;
    }

    .mc-acao {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .mc-preco__valor {
        justify-content: center;
    }

    .mc-botoes {
        justify-content: center;
    }

    .mc-btn {
        min-height: 50px;
        padding: 14px 20px;
        font-size: 0.9rem;
    }

    .mc-slide .mc-apoio {
        margin-top: 6px;
    }
}

/* Tablet em pé: sobra altura, então o bloco fica no meio em vez de colado no topo.
   Lista em uma coluna, como a do Outubro Rosa nessa largura: em duas colunas, o 3º item
   ficava sozinho à esquerda num layout centralizado (a TV redefine para 3 colunas). */
@media (min-width: 576px) and (max-width: 991.98px) {
    #master-hero-carousel .mc-slide {
        align-items: center;
        align-items: safe center;
    }

    .mc-itens {
        grid-template-columns: minmax(0, 1fr);
        max-width: 380px;
    }
}

@media (max-width: 575.98px) {
    .mc-eyebrow {
        font-size: 0.75rem;
        padding: 7px 10px;
        margin-bottom: 12px;
        letter-spacing: 0.6px;
    }

    .mc-titulo {
        font-size: clamp(1.75rem, 8.2vw, 2.45rem);
        margin-bottom: 12px;
    }

    .mc-slide .mc-descricao {
        margin-bottom: 14px;
    }

    .mc-itens {
        grid-template-columns: 1fr;
        max-width: 340px;
        margin-bottom: 16px;
    }

    .mc-botoes {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 360px;
        gap: 10px;
    }

    .mc-btn {
        width: 100%;
        min-height: 48px;
        font-size: 0.9rem;
    }

    .mc-opcao {
        font-size: 0.9rem;
    }
}

/* Celulares baixos: tira primeiro o texto corrido, depois a lista. */
@media (max-width: 991.98px) and (max-height: 760px) {
    .mc-conteudo {
        padding-top: 8px;
    }

    .mc-titulo {
        font-size: clamp(1.6rem, 7.4vw, 2.2rem);
        margin-bottom: 10px;
    }

    .mc-slide .mc-descricao {
        display: none;
    }

    .mc-preco__valor strong {
        font-size: 2rem;
    }

    .mc-btn {
        min-height: 46px;
        padding: 12px 18px;
    }
}

@media (max-width: 991.98px) and (max-height: 690px) {
    .mc-itens {
        display: none;
    }
}

/* ==========================================================================
   Streaming (fibra + app) — hero_streaming/index.html
   ========================================================================== */
.mc-slide--streaming {
    --mc-fundo-pos: center center;
}

.hs-fundo-app {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.hs-fundo-app.is-ativo {
    opacity: 1;
}

.hs-grade {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    grid-template-areas:
        "texto painel"
        "vel   painel"
        "acao  painel"
        "entrada painel";
    column-gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

.hs-texto { grid-area: texto; }
.hs-passo--vel { grid-area: vel; }
.hs-painel { grid-area: painel; align-self: center; }
.hs-acao { grid-area: acao; }
.hs-entrada { grid-area: entrada; }

.hs-titulo {
    font-size: clamp(2.3rem, 4.3vw, 3.7rem);
}

.mc-slide .hs-descricao {
    max-width: 560px;
    font-size: 1rem;
    margin-bottom: 16px;
}

.hs-itens {
    margin-bottom: 18px;
}

.hs-painel {
    padding: 22px 22px 18px;
    background: rgba(5, 11, 20, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.16);
    clip-path: var(--mc-chanfro-g);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hs-painel .mc-passo {
    margin: 0;
}


.hs-apps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.hs-app {
    --hs-cor: rgba(255, 255, 255, 0.5);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    padding: 10px 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 3px solid var(--hs-cor);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(45, 50, 65, 0.9) 0%, rgba(20, 26, 36, 0.95) 100%);
    cursor: pointer;
    clip-path: var(--mc-chanfro-p);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}







.hs-app:hover {
    border-color: var(--hs-cor);
}

.hs-app[aria-pressed="true"] {
    border-color: var(--hs-cor);
    background: linear-gradient(180deg, rgba(70, 76, 94, 0.95) 0%, rgba(32, 38, 52, 0.98) 100%);
    box-shadow: inset 0 0 0 1px var(--hs-cor), inset 0 0 22px rgba(255, 255, 255, 0.08);
}

/* Marca de escolhido que não depende só de cor. */
.hs-app[aria-pressed="true"]::after {
    content: "\F26E";
    font-family: "bootstrap-icons";
    position: absolute;
    top: 4px;
    right: 6px;
    color: #fff;
    font-size: 0.9rem;
    line-height: 1;
}

.hs-app:focus-visible {
    outline: 2px solid var(--mc-foco);
    outline-offset: -5px;
}

.hs-app__logo,
.hs-app picture {
    display: block;
    width: 100%;
    max-width: 76px;
    height: auto;
    max-height: 46px;
    object-fit: contain;
    pointer-events: none;
}

.hs-app picture img {
    width: 100%;
    height: auto;
    max-height: 46px;
    object-fit: contain;
}

/* SKY+ com Amazon Prime incluso: card da largura da grade com a arte oficial inteira
   (versão branca). A altura sai da proporção do arquivo (width/height do <img> +
   height: auto): nada de max-height, que esticaria ou cortaria a arte. A frase da arte
   (maiúsculas) tem 2,75% da largura dela: 360px -> 9,9px; 316px -> 8,7px, como uma
   fonte de ~12px, o mínimo que se busca para ela. */




/* O ✓ de escolhido do SKY+ fica no canto de BAIXO à direita, ao lado da frase, onde a
   arte é vazia (à direita da frase e abaixo do "prime"). No canto de cima ele ficava a
   poucos px do "e" de "prime" e, em 1024px, dentro da caixa da arte. Nada por cima do
   desenho nem colado nele: o ✓ fica a 30px ou mais do desenho em todos os tamanhos
   (lab/testes/sky/front_r2.py mede no alfa do PNG). 9px/7px das bordas: fora do chanfro. */


/* text-wrap: pretty: sem palavra sozinha na última linha ("Prime." em 1440px). */
.mc-slide .hs-app-desc {
    min-height: 2.9em;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 0.95rem;
    line-height: 1.45;
    text-wrap: pretty;
}

.hs-termos {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mc-acento-claro);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.hs-termos[hidden] {
    display: none;
}

.hs-termos:hover,
.hs-termos:focus-visible {
    color: #fff;
}

.hs-acao {
    margin-top: 4px;
}

.mc-slide .hs-combo {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

/* No desktop a nota fica no tamanho de antes: mais larga, ela empurrava o botão do
   WhatsApp para baixo do preço e o slide passava da caixa (1 Giga + Disney+). No
   celular e no tablet ela vai a 16px (bloco de 991.98px). */
.mc-slide .hs-nota {
    margin: 4px 0 0;
    color: var(--mc-acento-claro) !important;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
}

.mc-slide .hs-entrada {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 1rem;
    line-height: 1.35;
}

/* A pergunta é <span> só para poder sair no celular baixo; a cor é a da linha. */
.mc-slide .hs-entrada__pergunta {
    color: inherit !important;
}

.hs-entrada a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--mc-acento-claro);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hs-entrada a:hover,
.hs-entrada a:focus-visible {
    color: #fff;
}

/* Anel de foco DENTRO da caixa do link (offset negativo): com o contorno padrão do
   navegador, a borda de baixo saía da caixa rolável .mc-conteudo e era cortada. */
.hs-entrada a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .hs-painel {
        padding: 16px;
    }

    .hs-apps {
        gap: 6px;
    }

    .hs-app {
        min-height: 72px;
    }




    /* O nome do app no combo ("SKY+ com Amazon Prime incluso", 231px) cabe inteiro numa
       linha ao lado do botão do WhatsApp: menos vão entre o preço e o botão, e o botão um
       pouco mais justo. Sem isso a coluna do preço tinha 220-226px, o nome descia e
       quebrava de novo (3 linhas: o slide passava da caixa com 1 Giga + SKY+). */
    .hs-acao {
        column-gap: 14px;
    }

    .hs-acao .mc-btn {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Título com até 2.85rem: com 4.3vw ele chegava a 51px em 1150-1199px (o iPad na
       horizontal tem 1180) e, com 1 Giga + SKY+, o slide passava 1-6px da caixa (a roda do
       mouse rolava o conteúdo em vez da página). Já era assim na rodada 1. */
    .hs-titulo {
        font-size: clamp(2.3rem, 4.3vw, 2.85rem);
    }
}

/* Desktop estreito (992-1399, container de 960/1140px): a coluna da esquerda não cabia
   preço + botão lado a lado (nome do combo e nota do Cine mais largos que a sobra), o
   botão do WhatsApp caía para a linha de baixo (+66px) e o slide passava da caixa de
   680px: o link "Plano Essencial por R$ 55,00/mês" ficava embaixo da barra (folga de
   -23px em 1366x768, -14 em 1280x720, -10 em 1024x768 com 1 Giga + Disney+). A altura
   do carrossel no desktop é fixa, então a conta não muda com a altura da janela.
   Aqui a coluna da escolha fica um pouco mais larga e o preço cede a largura: o botão
   fica sempre ao lado, e são o nome do combo e a nota que quebram linha. Medido em
   1024x768, 1100x700, 1280x720, 1366x768 e 1399x800 (lab/testes/frentes/n2-carrossel/espaco.py). */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .hs-grade {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    }
}

/* Botão sempre ao lado do preço no desktop (inclusive >= 1400px): com o nome
   "SKY+ com Amazon Prime incluso" o nome do combo ficou mais largo que a sobra da coluna
   em 1440px e o botão caía para baixo do preço (+66px, slide passando da caixa). */
@media (min-width: 992px) {
    .hs-acao {
        flex-wrap: nowrap;
    }

    .hs-acao .mc-preco {
        flex: 0 1 auto;
        min-width: 0;
    }

    .hs-acao .mc-botoes {
        flex: 0 0 auto;
    }
}

/* A nota do Cine e o nome do combo, quando quebram, sem palavra sozinha na última linha. */
.mc-slide .hs-combo,
.mc-slide .hs-nota {
    text-wrap: pretty;
}

/* Nome do app no nome do combo (span do script.js): bloco inteiro na mesma linha quando
   cabe, então a marca não parte no meio ("...SKY+ com Amazon / Prime incluso" ou
   "...SKY+ / com Amazon Prime incluso"). Se não couber, quebra dentro dele, mas nunca
   entre "Amazon" e "Prime" (o script.js põe espaço inseparável aí). A cor é a da linha. */
.mc-slide .hs-combo__app {
    display: inline-block;
    color: inherit !important;
}

@media (max-width: 991.98px) {
    .hs-grade {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "texto"
            "vel"
            "painel"
            "acao"
            "entrada";
        row-gap: 0;
        max-width: 560px;
        margin-inline: auto;
    }

    .hs-titulo {
        font-size: clamp(1.75rem, 7vw, 2.8rem);
    }

    .hs-itens {
        display: none;
    }

    .hs-passo--vel {
        margin-bottom: 14px;
    }

    .hs-painel {
        margin-bottom: 14px;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        clip-path: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .hs-apps {
        max-width: 420px;
        margin-inline: auto;
        gap: 6px;
    }

    .hs-app {
        min-height: 56px;
        padding: 8px 6px;
    }

    .hs-app__logo,
    .hs-app picture,
    .hs-app picture img {
        max-height: 34px;
    }



    .mc-slide .hs-app-desc {
        min-height: 0;
        margin-top: 8px;
        font-size: 1rem;
    }

    .hs-termos {
        font-size: 1rem;
    }

    .hs-acao {
        margin-top: 0;
    }

    .mc-slide .hs-nota {
        font-size: 1rem;
    }

    .mc-slide .hs-entrada {
        margin-top: 4px;
    }
}


@media (min-width: 576px) and (max-width: 991.98px) {
    .hs-apps {
        max-width: 560px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }




}


@media (max-width: 575.98px) {
    .mc-slide .hs-descricao,
    .mc-slide .hs-app-desc,
    .hs-entrada__pergunta,
    .hs-acao .mc-preco__rotulo {
        display: none;
    }

    /* Os termos do Disney+ (alvo de 44px, já com respiro em volta do texto) colam nos apps
       e no preço: a margem de cima deles anula a de baixo dos apps, e o painel fecha com
       4px. Sem os termos, o espaço entre os apps e o preço continua com 10px. */
    .hs-apps {
        margin-bottom: 6px;
    }

    .hs-termos {
        margin-top: -6px;
    }

    .hs-painel {
        margin-bottom: 4px;
    }

    /* Os quatro apps com 44px (o mínimo de alvo da casa) e logo de até 30px. */
    .hs-app {
        min-height: 44px;
        padding: 5px;
    }

    .hs-app__logo,
    .hs-app picture,
    .hs-app picture img {
        max-height: 30px;
    }




}

@media (max-width: 991.98px) and (max-height: 760px) {
    .mc-slide .hs-app-desc {
        display: none;
    }

    .hs-app {
        min-height: 48px;
    }
}


@media (max-width: 575.98px) and (max-height: 869.98px) {
    .mc-slide--streaming .mc-eyebrow {
        display: none;
    }
}



/* Compacto (até 799px de altura). As regras de celular baixo do carrossel valem até 760px
   para todos os slides; o Streaming as repete até 799px (respiro do topo, título, preço e
   botão) e encurta as margens. O título fica com ~24px em qualquer largura (no celular
   largo ele crescia com a tela e o slide passava da caixa). Opções e apps com 44px, o
   mínimo de alvo da casa. */
@media (max-width: 575.98px) and (max-height: 829.98px) {
    #master-hero-carousel .mc-slide--streaming {
        padding-top: 6px;
    }

    .mc-slide--streaming .mc-conteudo {
        padding-top: 8px;
    }

    .mc-slide--streaming .mc-titulo {
        font-size: clamp(1.5rem, 6.8vw, 1.55rem);
        margin-bottom: 8px;
    }

    .mc-slide--streaming .mc-passo__rotulo {
        margin-bottom: 6px;
    }

    .mc-slide--streaming .mc-opcao,
    .hs-app {
        min-height: 44px;
    }

    .hs-passo--vel {
        margin-bottom: 8px;
    }

    .mc-slide--streaming .mc-preco__valor strong {
        font-size: 1.85rem;
    }

    .mc-slide--streaming .mc-acao {
        gap: 8px;
    }

    .mc-slide--streaming .mc-btn {
        min-height: 46px;
        padding: 12px 18px;
    }
}


@media (max-width: 575.98px) and (max-height: 739.98px) {
    .mc-slide--streaming .mc-titulo {
        margin-bottom: 6px;
    }

    .mc-slide--streaming .mc-passo {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 8px;
    }

    .mc-slide--streaming .mc-passo > .mc-passo__rotulo {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: start;
        margin: 0;
        padding-top: 11px; /* número no meio da 1ª linha de botões (44px) */
    }

    .mc-slide--streaming .mc-passo > :not(.mc-passo__rotulo) {
        grid-column: 2;
    }

    .hs-passo__texto {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .hs-passo--vel {
        margin-bottom: 6px;
    }

    .hs-apps {
        row-gap: 4px;
    }


}




/* Celular bem baixo (360x640): menos respiro no topo e preço um degrau menor. */
@media (max-width: 575.98px) and (max-height: 660px) {
    #master-hero-carousel .mc-slide {
        padding-top: 4px;
    }

    .mc-conteudo,
    .mc-slide--streaming .mc-conteudo {
        padding-top: 4px;
    }

    .mc-slide--streaming .mc-preco__valor strong {
        font-size: 1.6rem;
    }
}

/* Alto contraste do Windows: o fundo dos botões vira a cor do sistema (branca nos temas
   claros) e a arte branca do SKY+ sumiria. O card dela fica com as cores da casa. */


/* Mesmo espaço, fundo e destaque para todas as marcas. O desenho original de cada
   logo cabe na mesma área, preservando a proporção; nenhuma opção ocupa uma linha extra. */
.hs-app {
    --hs-cor: #00ffea;
    display: grid;
    grid-template-rows: 48px 34px;
    align-content: center;
    justify-items: center;
    gap: 6px;
    height: 112px;
    min-height: 112px;
    padding: 10px 8px;
    text-align: center;
}

.hs-app__media {
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 0;
    height: 48px;
}

.hs-app__media picture {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 180px;
    height: 48px;
    max-height: 48px;
}

.hs-app__media .hs-app__logo,
.hs-app__media picture img {
    display: block;
    width: 100%;
    max-width: 180px;
    height: 48px;
    max-height: 48px;
    object-fit: contain;
}

.hs-app__name {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 34px;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 600;
    color: #fff;
}

.hs-app[aria-pressed="true"]::after {
    top: 5px;
    right: 7px;
}

@media (max-width: 575.98px) {
    .hs-apps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 4px;
    }

    .hs-app {
        height: 64px;
        min-height: 64px;
        grid-template-rows: 22px 30px;
        gap: 2px;
        padding: 5px 8px;
    }

    .hs-app__media,
    .hs-app__media picture,
    .hs-app__media .hs-app__logo,
    .hs-app__media picture img {
        height: 22px;
        max-height: 22px;
    }

    .hs-app__name {
        min-height: 30px;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .hs-app {
        height: 80px;
        min-height: 80px;
        grid-template-rows: 34px 28px;
        padding: 5px 8px;
    }

    .hs-app__media,
    .hs-app__media picture,
    .hs-app__media .hs-app__logo,
    .hs-app__media picture img {
        height: 34px;
        max-height: 34px;
    }

    .hs-app__name {
        min-height: 28px;
    }
}

@media (min-height: 740px) and (max-width: 575.98px) {
    .mc-slide--streaming .mc-titulo {
        margin-bottom: 6px;
    }

    .hs-passo--vel {
        margin-bottom: 6px;
    }

    .hs-passo--app .mc-passo__rotulo {
        margin-bottom: 4px;
    }
}

/* Telas baixas: todos os apps ficam compactos da mesma forma. O nome completo
   continua no botão acessível e no resumo da escolha, sem privilegiar uma marca. */
@media (max-width: 575.98px) and (max-height: 739.98px) {
    .hs-app {
        height: 44px;
        min-height: 44px;
        grid-template-rows: 26px;
        padding: 8px;
    }

    .hs-app__name {
        display: none;
    }

    .hs-app__media,
    .hs-app__media picture,
    .hs-app__media .hs-app__logo,
    .hs-app__media picture img {
        height: 26px;
        max-height: 26px;
    }

    .hs-apps {
        row-gap: 2px;
    }

    .mc-slide--streaming .mc-titulo {
        margin-bottom: 4px;
    }

    .hs-passo--vel {
        margin-bottom: 4px;
    }

    .mc-slide--streaming .mc-acao {
        gap: 4px;
    }
}

@media (forced-colors: active) {
    .hs-app {
        forced-color-adjust: none;
    }
}

/* ==========================================================================
   Gamer — hero_gamer/index.html
   ========================================================================== */
.mc-slide--gamer {
    --mc-destaque: #ffb25e;
    --mc-destaque-brilho: 0 0 18px rgba(255, 142, 29, 0.42);
    --mc-fundo-pos: 70% center;
}

.hg-exitlag {
    display: block;
    width: auto;
    height: 15px;
}

.hg-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: 480px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.hg-spec {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 12px;
    background: rgba(5, 11, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.16);
    clip-path: var(--mc-chanfro-p);
}

.mc-slide .hg-spec strong {
    font-size: 1.02rem;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.mc-slide .hg-spec span {
    color: rgba(255, 255, 255, 0.76) !important;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.mc-slide .hg-spec--exitlag strong {
    color: #ff5a5a !important;
}

.hg-painel {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.hg-personagem {
    display: block;
    width: min(400px, 78%);
    margin-right: 6%;
}

.hg-personagem img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.5));
}

@media (max-width: 991.98px) {
    .hg-specs {
        margin-inline: auto;
        margin-bottom: 14px;
    }

    .hg-spec {
        align-items: center;
        padding: 8px 6px;
    }
}

/* A descrição fica no celular (como no Outubro Rosa e no Quem Somos): sobra altura em
   360x800. No celular baixo ela sai pela regra geral de max-height: 760px. */
@media (max-width: 575.98px) {
    .mc-slide .hg-spec strong {
        font-size: 1rem;
    }
}

/* ==========================================================================
   TV — hero_tv/index.html
   ========================================================================== */
.mc-slide--tv {
    --mc-fundo-pos: center center;
}

.htv-itens {
    grid-template-columns: repeat(3, minmax(0, auto));
    max-width: 640px;
}

.htv-lojas {
    margin-top: 18px;
}

.htv-lojas__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.htv-loja {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    color: #fff;
    background: rgba(5, 11, 20, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    clip-path: var(--mc-chanfro-p);
    transition: border-color 0.2s ease, background 0.2s ease;
}

a.htv-loja:hover {
    color: #fff;
    border-color: var(--mc-acento);
    background: rgba(0, 255, 234, 0.1);
}

a.htv-loja:focus-visible {
    outline: 2px solid var(--mc-foco);
    outline-offset: -5px;
}

.mc-slide .htv-loja--texto {
    color: rgba(255, 255, 255, 0.8) !important;
    border-style: dashed;
}

.htv-loja img {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.htv-painel {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* "Tela" do app: vidro escuro chanfrado com o logo para fundo escuro e um halo rosa
   da marca (estático). */
.htv-app {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(300px, 72%);
    margin-bottom: 24%;
    padding: 30px;
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 42, 109, 0.22), transparent 62%),
        rgba(5, 11, 20, 0.78);
    border: 1px solid var(--mc-acento-borda);
    clip-path: var(--mc-chanfro-g);
    box-shadow: inset 0 0 40px rgba(0, 255, 234, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.htv-app picture,
.htv-app img {
    display: block;
    width: 100%;
    height: auto;
}

.htv-app img {
    filter: drop-shadow(0 10px 24px rgba(255, 42, 109, 0.28));
}


@media (max-width: 991.98px) {
    .htv-itens {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 560px;
    }

    .htv-itens .mc-item {
        padding: 8px 6px;
    }

    .htv-lojas {
        margin-top: 12px;
    }

    .htv-loja {
        font-size: 1rem;
    }

    .htv-lojas__lista {
        justify-content: center;
        max-width: 520px;
        margin-inline: auto;
    }
}

/* Tablet em pé: lista em uma coluna, como a dos outros slides nessa largura (regra
   geral acima). Em três colunas, "Suporte especializado" quebrava em duas linhas e os
   vizinhos não, com alturas e alinhamentos diferentes (768x1024). */
@media (min-width: 576px) and (max-width: 991.98px) {
    .htv-itens {
        grid-template-columns: minmax(0, 1fr);
        max-width: 380px;
    }
}

@media (max-width: 575.98px) {
    /* A lista de três colunas não cabe no celular; a descrição fica (sai no celular
       baixo pela regra geral de max-height: 760px). */
    .htv-itens {
        display: none;
    }

    .htv-lojas__lista {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 360px;
        gap: 6px;
    }

    .htv-lojas__lista li {
        display: flex;
    }

    .htv-loja {
        flex: 1 1 auto;
        justify-content: center;
        padding: 6px 8px;
    }

    .htv-lojas__lista li:last-child {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   Quem Somos e Trabalhe Conosco
   ========================================================================== */
.mc-slide--quem-somos {
    --mc-fundo-pos: center center;
    --mc-fundo-pos-m: 30% center;
}

.mc-slide--trabalhe {
    --mc-destaque: #ffb25e;
    --mc-destaque-brilho: 0 0 18px rgba(255, 142, 29, 0.42);
    --mc-fundo-pos: center center;
    --mc-fundo-pos-m: 56% center;
}

/* ==========================================================================
   Modais do carrossel (grade de canais, termos Disney+) — .mc-modal
   Vivem no <body> (o wrapper move); a camada é a do Bootstrap (--bs-modal-zindex).
   ========================================================================== */
/* --mc-modal-topo: faixa do topo que o cabeçalho cobre POR CIMA do modal, medida pelo
   wrapper/js no show.bs.modal (0 quando o modal já fica na frente do cabeçalho). O
   diálogo começa abaixo dela (ver faixaDoCabecalho no script). */
.mc-modal {
    --mc-modal-topo: 0px;
}

.mc-modal .modal-dialog {
    margin-top: calc(var(--mc-modal-topo) + 12px);
}

.mc-modal .modal-dialog-scrollable {
    height: calc(100% - var(--mc-modal-topo) - 24px);
}

.mc-modal .modal-dialog-centered {
    min-height: calc(100% - var(--mc-modal-topo) - 24px);
}

@media (max-width: 575.98px) {
    .mc-modal .modal-dialog.modal-fullscreen-sm-down {
        margin-top: var(--mc-modal-topo);
        height: calc(100% - var(--mc-modal-topo));
        min-height: 0;
    }
}

/* O botão flutuante do chat cobria o rodapé do modal no celular. */
body.mc-modal-aberto .n8n-chat-btn {
    visibility: hidden;
}

.mc-modal .mc-modal__conteudo {
    color: #fff;
    background: #0b111c;
    border: 1px solid var(--mc-acento-borda);
    border-radius: 0;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

@media (min-width: 576px) {
    .mc-modal .mc-modal__conteudo {
        clip-path: var(--mc-chanfro-g);
    }
}

.mc-modal .mc-modal__topo {
    position: relative;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mc-modal__cabeca {
    min-width: 0;
}

.mc-modal .mc-modal__eyebrow {
    margin: 0 0 4px;
    color: var(--mc-acento);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.mc-modal .mc-modal__titulo {
    margin: 0;
    color: #fff;
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

.mc-modal .mc-modal__sub {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1rem;
}

.mc-modal__fechar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: -6px -8px 0 auto;
    padding: 0;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 0;
    font-size: 1.2rem;
    cursor: pointer;
    clip-path: var(--mc-chanfro-p);
}

.mc-modal__fechar:hover {
    background: rgba(255, 77, 29, 0.85);
    border-color: #ff4d1d;
}

.mc-modal__fechar:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -5px;
}

.mc-modal__busca {
    padding: 12px 20px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mc-modal .mc-modal__rotulo {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.9rem;
    font-weight: 700;
}

.mc-modal__campo-wrap {
    position: relative;
}

.mc-modal__campo-wrap .bi {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.6);
    pointer-events: none;
}

.mc-modal .mc-modal__campo {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px 10px 40px;
    color: #fff !important;
    background: #0d1117 !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 0;
    font-size: 1rem;
}

.mc-modal .mc-modal__campo:focus {
    outline: 2px solid var(--mc-acento);
    outline-offset: 0;
    border-color: var(--mc-acento) !important;
    box-shadow: none;
}

.mc-modal .mc-modal__resultado {
    min-height: 1.3em;
    margin: 6px 0 0;
    color: var(--mc-acento-claro);
    font-size: 0.9rem;
}

.mc-modal .mc-modal__corpo {
    padding: 14px 20px 18px;
}

.mc-canais {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mc-canal {
    padding: 8px 10px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.04);
    border-left: 2px solid rgba(0, 255, 234, 0.45);
    font-size: 1rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.mc-canal[hidden] {
    display: none;
}

.mc-modal .mc-canais__vazio {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.82);
}

.mc-modal .mc-modal__rodape {
    gap: 10px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mc-modal .mc-modal__rodape > * {
    margin: 0;
}

.mc-modal .mc-modal__rodape .mc-btn {
    min-height: 48px;
    padding: 12px 20px;
    font-size: 0.88rem;
}

.mc-modal__texto {
    color: rgba(255, 255, 255, 0.86);
    font-size: 1rem;
    line-height: 1.65;
}

.mc-modal__texto a {
    color: var(--mc-acento-claro);
}

.mc-modal .mc-modal__h {
    margin: 22px 0 8px;
    color: #fff;
    font-size: 1.02rem;
    font-weight: 800;
}

.mc-modal .mc-modal__h:first-child {
    margin-top: 4px;
}

.mc-modal .modal-bullets {
    margin: 0 0 1rem 1.2rem;
    padding: 0;
}

.mc-modal .modal-bullets li {
    margin-bottom: 0.25rem;
}

.mc-modal .mc-modal__nota {
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1rem;
}

@media (max-width: 767.98px) {
    .mc-canais {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .mc-modal .mc-modal__rodape {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
    }

    /* 0.9rem, como os .mc-btn dos slides no celular (era 0.8rem = 12,8px). "Assinar no
       WhatsApp" quebra em duas linhas na coluna da direita, como já quebrava. */
    .mc-modal .mc-modal__rodape .mc-btn {
        width: 100%;
        padding-inline: 10px;
        font-size: 0.9rem;
    }

    .mc-modal .mc-modal__titulo {
        font-size: 1.25rem;
    }
}