/*
 * Menuxy — site de apresentação
 *
 * DIREÇÃO: cinema. O vídeo é a imagem; tudo em volta é sólido e quieto.
 * Nenhum degradê no arquivo inteiro — cor chapada, do começo ao fim.
 *
 * O gesto da página é o LETTERBOX: as faixas de vídeo entram em formato de
 * cinema (2.39:1) com tarjas pretas sólidas, e as tarjas ABREM quando a faixa
 * chega à tela, como um filme começando. O título da seção vive dentro da
 * tarja, como cartela de abertura.
 *
 * Dois temas de verdade: escuro (sala de cinema) e claro (gelo). A cor da
 * marca é a mesma nos dois — #F68B36, chapada.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
    /* --- Tema escuro (padrão) --- */
    --fundo:        #14100D;
    --superficie:   #1F1915;
    --superficie-2: #2A221C;
    --borda:        #352C25;
    --tinta:        #FBF7F3;
    --tinta-fraca:  #B6ABA1;
    --tinta-tenue:  #8A7E74;

    --marca:        #F68B36;   /* chapada, sem degradê */
    --marca-texto:  #F9A863;   /* a marca como TEXTO sobre o fundo escuro */
    --sobre-marca:  #241304;   /* texto EM CIMA do laranja */

    --tarja:        #000000;   /* as barras do letterbox */

    --largura: 1180px;
    --raio: 12px;
    --raio-g: 20px;

    --t-rapido: 160ms;
    --t-base:   320ms;
    --t-longo:  680ms;
    --curva: cubic-bezier(.22, 1, .36, 1);

    color-scheme: dark;
}

:root[data-tema="claro"] {
    --fundo:        #F7F4F0;   /* gelo */
    --superficie:   #FFFFFF;
    --superficie-2: #F1ECE6;
    --borda:        #E2D9CF;
    --tinta:        #17120E;
    --tinta-fraca:  #5F544B;
    /* No gelo o #8A7E74 do tema escuro cai para 3,60:1 e reprova no WCAG.
       Este tom, da mesma família quente, dá 4,72:1 no gelo e 5,17:1 no branco. */
    --tinta-tenue:  #776B61;

    --marca:        #F68B36;
    --marca-texto:  #A8500B;   /* escurece para virar texto legível no gelo */
    --sobre-marca:  #241304;

    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    /* O scroll suave é do Lenis; sem ele, o nativo assume. */
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--fundo);
    color: var(--tinta-fraca);
    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 17px;
    line-height: 1.66;
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--t-base) var(--curva), color var(--t-base) var(--curva);
}

img, video { max-width: 100%; display: block; }
a { color: var(--marca-texto); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; border-radius: 3px; }

[id] { scroll-margin-top: 6rem; }

.mx-largura { width: min(100% - 2.5rem, var(--largura)); margin-inline: auto; }
.mx-oculto-visual {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   Tipografia
   ========================================================================== */

h1, h2, h3, h4 {
    font-family: Archivo, Inter, sans-serif;
    color: var(--tinta);
    font-weight: 800;
    letter-spacing: -.032em;
    line-height: 1.04;
    margin: 0;
}

/* Cartela: o rótulo de seção, tratado como título de filme. Caixa alta,
   entreletra larga, monoespaçada — a única "decoração" tipográfica da página,
   e ela substitui os ícones que estariam aqui. */
.mx-cartela {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: .7rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
    margin: 0 0 1.2rem;
}
.mx-cartela--clara { color: rgba(255,255,255,.72); }

.mx-dado {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Barra do topo
   ========================================================================== */

.mx-topo {
    position: fixed; inset: 0 0 auto; z-index: 90;
    transition: background-color var(--t-base) var(--curva),
                border-color var(--t-base) var(--curva);
    border-bottom: 1px solid transparent;
}
.mx-topo--fixa {
    background: color-mix(in srgb, var(--fundo) 88%, transparent);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom-color: var(--borda);
}

.mx-topo-linha {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .9rem 0;
}
.mx-marca { display: flex; align-items: center; gap: .55rem; }
.mx-marca img { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; }
.mx-marca b {
    font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.1rem;
    color: var(--tinta); letter-spacing: -.02em;
}
/* No topo da página, sobre o vídeo, a marca é sempre clara. */
.mx-topo:not(.mx-topo--fixa) .mx-marca b { color: #fff; }
.mx-topo:not(.mx-topo--fixa) .mx-nav a { color: rgba(255,255,255,.86); }
.mx-topo:not(.mx-topo--fixa) .mx-tema { color: rgba(255,255,255,.86); border-color: rgba(255,255,255,.26); }
.mx-topo:not(.mx-topo--fixa) .mx-btn--linha {
    color: #fff; border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.07);
}
.mx-topo:not(.mx-topo--fixa) .mx-btn--linha:hover { border-color: #fff; background: rgba(255,255,255,.16); color: #fff; }

.mx-nav { display: flex; align-items: center; gap: 1.6rem; }
.mx-nav a {
    color: var(--tinta-fraca); font-size: .92rem; font-weight: 500;
    text-decoration: none; position: relative; padding-block: .2rem;
}
.mx-nav a::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
    height: 1px; background: currentColor;
    transition: right var(--t-base) var(--curva);
}
.mx-nav a:hover { text-decoration: none; }
.mx-nav a:hover::after { right: 0; }

.mx-topo-acoes { display: flex; align-items: center; gap: .6rem; }

.mx-tema {
    width: 38px; height: 38px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--borda); border-radius: 50%;
    background: transparent; color: var(--tinta-fraca);
    cursor: pointer;
    transition: border-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva);
}
.mx-tema:hover { border-color: var(--marca); color: var(--marca-texto); }
.mx-tema-luz { display: none; }
:root[data-tema="claro"] .mx-tema-luz { display: block; }
:root[data-tema="claro"] .mx-tema-noite { display: none; }

/* ==========================================================================
   Botões — cor chapada, sem degradê
   ========================================================================== */

.mx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .8rem 1.5rem; border-radius: 8px;
    border: 1px solid transparent;
    font-family: Inter, sans-serif; font-weight: 600; font-size: .96rem;
    cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: transform var(--t-rapido) var(--curva),
                background-color var(--t-rapido) var(--curva),
                border-color var(--t-rapido) var(--curva),
                color var(--t-rapido) var(--curva);
}
.mx-btn:hover { text-decoration: none; }
.mx-btn:active { transform: translateY(1px); }

/* Texto ESCURO no laranja: com branco o rótulo dá 2,4:1 e some. */
.mx-btn--marca { background: var(--marca); color: var(--sobre-marca); }
.mx-btn--marca:hover { background: #FF9A4C; color: var(--sobre-marca); }

.mx-btn--linha { border-color: var(--borda); color: var(--tinta); background: transparent; }
.mx-btn--linha:hover { border-color: var(--marca); color: var(--marca-texto); }

/* Sobre o vídeo, a borda precisa ser clara para existir. */
.mx-btn--vidro { border-color: rgba(255,255,255,.4); color: #fff; background: rgba(255,255,255,.07); }
.mx-btn--vidro:hover { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; }

.mx-btn--g { padding: 1rem 1.9rem; font-size: 1.02rem; }

/* ==========================================================================
   HERÓI — vídeo em tela cheia
   ========================================================================== */

.mx-heroi {
    position: relative;
    min-height: 100svh;
    display: flex; align-items: flex-end;
    padding: 8rem 0 clamp(2.5rem, 6vw, 4.5rem);
    overflow: hidden;
    background: #0B0806;
}
.mx-heroi-filme {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    /* Sempre escuro atrás do vídeo, nos dois temas: o vídeo é a sala. */
}
/* Véu CHAPADO, não degradê: o requisito é cor sólida. Duas camadas de
   opacidade diferente dão a leitura sem precisar de gradiente. */
.mx-heroi-veu {
    position: absolute; inset: 0;
    background: rgba(8, 6, 4, .58);
}
.mx-heroi-veu--pe {
    inset: auto 0 0; height: 55%;
    background: rgba(8, 6, 4, .42);
}
.mx-heroi-conteudo { position: relative; z-index: 2; }

.mx-heroi h1 {
    color: #fff;
    font-size: clamp(2.7rem, 7vw, 5.4rem);
    max-width: 16ch;
    margin-bottom: 1.5rem;
}
.mx-heroi h1 span { color: var(--marca); }
.mx-heroi-sub {
    color: rgba(255,255,255,.9);
    font-size: clamp(1.04rem, 2vw, 1.24rem);
    max-width: 56ch; margin: 0 0 2.4rem;
}
.mx-heroi-acoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.6rem; }

/* Rodapé do herói: três dados soltos, sem cartão e sem ícone. */
.mx-heroi-pe {
    display: grid; gap: 1.4rem 2.4rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.2);
}
@media (min-width: 1080px) { .mx-heroi-pe { grid-template-columns: repeat(4, 1fr); } }
.mx-heroi-pe div { min-width: 0; }
.mx-heroi-pe dt {
    font-family: 'IBM Plex Mono', monospace; font-size: .66rem;
    letter-spacing: .2em; text-transform: uppercase;
    color: rgba(255,255,255,.55); margin-bottom: .3rem;
}
.mx-heroi-pe dd {
    margin: 0; color: #fff; font-weight: 600; font-size: .98rem;
}

/* ==========================================================================
   Seções
   ========================================================================== */

.mx-secao { padding: clamp(4rem, 9vw, 7rem) 0; }
.mx-secao--gelo { background: var(--superficie-2); }

.mx-secao-topo { max-width: 660px; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.mx-secao-topo h2 { font-size: clamp(2rem, 4.6vw, 3rem); margin-bottom: 1rem; }
.mx-secao-topo p { margin: 0; font-size: 1.05rem; }

/* ==========================================================================
   O SERVIÇO — a linha do tempo
   ========================================================================== */

.mx-momento {
    display: grid; gap: clamp(1.4rem, 4vw, 3.4rem);
    grid-template-columns: minmax(0, 1fr);
    padding-block: clamp(2.2rem, 5vw, 3.4rem);
    border-top: 1px solid var(--borda);
    align-items: center;
}
.mx-momento:first-of-type { border-top: 0; padding-top: 0; }

@media (min-width: 940px) {
    .mx-momento { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
    .mx-momento:nth-of-type(even) .mx-momento-txt { order: 2; }
}

.mx-hora {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .92rem; font-weight: 600; color: var(--marca-texto);
    letter-spacing: .06em; margin-bottom: .7rem;
}
.mx-momento h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: .8rem; }
.mx-momento p { margin: 0 0 .9rem; }
.mx-momento p:last-child { margin-bottom: 0; }
.mx-momento strong { color: var(--tinta); font-weight: 600; }

.mx-tela { margin: 0; }
.mx-tela img {
    /* height:auto e OBRIGATORIO: o <img> traz height="727" como atributo, que
       vira um estilo de apresentacao. Sem esta linha a largura vira 100% e a
       altura fica presa em 727px — a captura sai esmagada (medido: proporcao
       0,38 no lugar de 1,93). */
    width: 100%; height: auto; display: block;
    border-radius: var(--raio-g);
    border: 1px solid var(--borda);
    box-shadow: 0 24px 56px -22px rgba(0,0,0,.62);
}

/* Toque para ampliar: no celular a captura de uma tela de desktop fica com
   ~350px de largura e ninguem le nada. O botao leva ao visor em tela cheia. */
.mx-tela { position: relative; }
.mx-lupa {
    position: absolute; inset: 0;
    width: 100%; padding: 0; margin: 0;
    background: transparent; border: 0; cursor: zoom-in;
    border-radius: var(--raio-g);
}
.mx-lupa:focus-visible { outline: 3px solid var(--marca); outline-offset: 4px; }
.mx-lupa span {
    position: absolute; right: .7rem; bottom: .7rem;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .4rem .7rem; border-radius: 999px;
    background: rgba(10,7,5,.78); color: #fff;
    font-family: 'IBM Plex Mono', monospace; font-size: .66rem;
    letter-spacing: .1em; text-transform: uppercase;
    opacity: 0; transition: opacity var(--t-rapido) var(--curva);
}
.mx-tela:hover .mx-lupa span, .mx-lupa:focus-visible span { opacity: 1; }
@media (hover: none) { .mx-lupa span { opacity: 1; } }
@media (min-width: 1120px) {
    /* A tela avança até a borda da janela: o produto é o assunto. */
    .mx-momento .mx-tela { margin-right: calc(50% - 50vw + 1.6rem); }
    .mx-momento:nth-of-type(even) .mx-tela { margin-right: 0; margin-left: calc(50% - 50vw + 1.6rem); }
}

/* ==========================================================================
   ASSINATURA — a faixa de cinema que abre
   ========================================================================== */

.mx-corte { position: relative; background: var(--tarja); }

.mx-corte-quadro {
    position: relative;
    aspect-ratio: 2.39 / 1;          /* cinemascope de verdade */
    overflow: hidden;
}
@media (max-width: 760px) { .mx-corte-quadro { aspect-ratio: 4 / 3; } }

.mx-corte-quadro video {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}
.mx-corte-veu { position: absolute; inset: 0; background: rgba(8,6,4,.46); }

/* As tarjas: começam fechadas e ABREM quando a faixa entra na tela. */
.mx-tarja {
    position: absolute; left: 0; right: 0; z-index: 3;
    height: 50%; background: var(--tarja);
    transition: transform 1100ms var(--curva);
}
.mx-tarja--cima { top: 0; transform: translateY(0); }
.mx-tarja--baixo { bottom: 0; transform: translateY(0); }
.mx-corte.mx-aberto .mx-tarja--cima  { transform: translateY(-100%); }
.mx-corte.mx-aberto .mx-tarja--baixo { transform: translateY(100%); }

/* A cartela vive dentro da tarja de cima, como abertura de filme, e sai
   junto com ela. */
.mx-corte-cartela {
    position: absolute; left: 0; right: 0; bottom: 1.1rem; z-index: 4;
    text-align: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
    color: rgba(255,255,255,.62);
}

.mx-corte-fala {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1.5rem; text-align: center;
    opacity: 0; transition: opacity 900ms var(--curva) 500ms;
}
.mx-corte.mx-aberto .mx-corte-fala { opacity: 1; }
.mx-corte-fala p {
    margin: 0; max-width: 24ch;
    font-family: Archivo, sans-serif; font-weight: 800;
    font-size: clamp(1.6rem, 4.6vw, 3.2rem);
    line-height: 1.08; letter-spacing: -.03em; color: #fff;
}
.mx-corte-fala em { font-style: normal; color: var(--marca); }

/* ==========================================================================
   Cardápio digital
   ========================================================================== */

.mx-cardapio-grade { display: grid; gap: clamp(2rem, 5vw, 3rem); }
.mx-cardapio-txt { max-width: 62ch; }
/* Duas capturas de CELULAR, em retrato: e assim que o cliente do restaurante
   abre o cardapio, entao e assim que ele aparece aqui. Largura limitada para
   os telefones nao virarem cartazes. */
.mx-cardapio-telas {
    display: grid; gap: clamp(1rem, 3vw, 2.2rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 620px; margin-inline: auto;
    justify-items: center;
}
.mx-fone { width: 100%; max-width: 280px; }
.mx-fone img {
    border-radius: 22px;
    box-shadow: 0 26px 60px -24px rgba(0,0,0,.7);
}
.mx-fone .mx-lupa { border-radius: 22px; }
.mx-fone-legenda {
    grid-column: 1 / -1; text-align: center; margin-top: .4rem;
    font-family: 'IBM Plex Mono', monospace; font-size: .68rem;
    letter-spacing: .1em; color: var(--tinta-tenue);
}
@media (max-width: 520px) {
    .mx-cardapio-telas { gap: 1rem; }
    .mx-fone { max-width: 100%; }
}

.mx-endereco {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace; font-size: .86rem;
    padding: .55rem .9rem; border-radius: 8px;
    background: var(--superficie); border: 1px solid var(--borda);
    color: var(--marca-texto); margin: .4rem 0 1.4rem;
}

/* Lista sem ícone: o marcador é uma régua curta, não um símbolo. */
.mx-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.mx-lista li { padding-left: 2.4rem; position: relative; font-size: .98rem; }
.mx-lista li::before {
    content: ''; position: absolute; left: 0; top: .78em;
    width: 1.5rem; height: 2px; background: var(--marca);
}

/* ==========================================================================
   Planos
   ========================================================================== */

.mx-planos {
    display: grid; gap: clamp(1.2rem, 3vw, 2rem);
    grid-template-columns: minmax(0, 1fr);
    max-width: 900px; margin-inline: auto;
}
@media (min-width: 820px) { .mx-planos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mx-plano {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-g);
    padding: clamp(1.6rem, 3.5vw, 2.4rem);
    display: flex; flex-direction: column;
    transition: border-color var(--t-base) var(--curva), transform var(--t-base) var(--curva);
}
.mx-plano:hover { border-color: var(--marca); transform: translateY(-3px); }
.mx-plano--destaque { border-color: var(--marca); border-width: 2px; }

.mx-plano-selo {
    align-self: flex-start;
    font-family: 'IBM Plex Mono', monospace; font-size: .64rem;
    letter-spacing: .18em; text-transform: uppercase;
    background: var(--marca); color: var(--sobre-marca);
    padding: .28rem .6rem; border-radius: 5px; margin-bottom: 1rem;
}
.mx-plano-nome { font-size: 1.3rem; margin-bottom: .3rem; }
.mx-plano-periodo { font-size: .88rem; color: var(--tinta-tenue); margin: 0 0 1.4rem; }

.mx-plano-valor { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .3rem; }
.mx-plano-antes {
    font-family: 'IBM Plex Mono', monospace; font-size: .9rem;
    color: var(--tinta-tenue); text-decoration: line-through;
}
.mx-plano-preco {
    font-family: Archivo, sans-serif; font-weight: 800;
    font-size: clamp(2.1rem, 5vw, 2.7rem); color: var(--tinta);
    letter-spacing: -.04em; line-height: 1;
}
.mx-plano-mes { font-size: .95rem; color: var(--tinta-fraca); }
.mx-plano-economia { font-size: .86rem; color: var(--marca-texto); font-weight: 600; margin: 0 0 1.6rem; }
.mx-plano-nota { font-size: .86rem; color: var(--tinta-tenue); margin: 0 0 1.6rem; }

.mx-plano-itens { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .8rem; }
.mx-plano-itens li { padding-left: 1.5rem; position: relative; font-size: .94rem; }
.mx-plano-itens li::before {
    content: ''; position: absolute; left: 0; top: .72em;
    width: .8rem; height: 2px; background: var(--marca);
}
.mx-plano .mx-btn { margin-top: auto; width: 100%; }

.mx-planos-rodape {
    max-width: 900px; margin: 1.8rem auto 0;
    font-size: .9rem; color: var(--tinta-tenue); text-align: center;
}

/* ==========================================================================
   Quem somos
   ========================================================================== */

.mx-quem-grade { display: grid; gap: clamp(2rem, 5vw, 3.4rem); }
@media (min-width: 940px) { .mx-quem-grade { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }

.mx-quem-txt p { margin: 0 0 1.1rem; }
.mx-quem-txt p:last-child { margin-bottom: 0; }
.mx-quem-txt strong { color: var(--tinta); font-weight: 600; }

.mx-produtos { display: grid; gap: 1rem; }
.mx-produto {
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio); padding: 1.3rem 1.4rem;
    border-left: 3px solid var(--marca);
}
.mx-produto h4 { font-size: 1.05rem; margin-bottom: .3rem; }
.mx-produto p { margin: 0; font-size: .92rem; }
.mx-produto-aqui {
    font-family: 'IBM Plex Mono', monospace; font-size: .62rem;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--marca-texto); margin-left: .5rem;
}

/* ==========================================================================
   Fecho e rodapé
   ========================================================================== */

.mx-fecho { padding: clamp(4rem, 9vw, 7rem) 0; text-align: center; background: var(--superficie-2); }
.mx-fecho h2 { font-size: clamp(2.1rem, 5vw, 3.2rem); margin-bottom: 1rem; }
.mx-fecho p { max-width: 50ch; margin: 0 auto 2.2rem; }
.mx-fecho-acoes { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

.mx-rodape { border-top: 1px solid var(--borda); padding: 2.6rem 0 3.2rem; }
.mx-rodape-linha {
    display: flex; flex-wrap: wrap; gap: 1.6rem;
    align-items: center; justify-content: space-between;
}
@media (max-width: 700px) {
    /* No estreito os dois blocos empilhavam desalinhados: um a esquerda e os
       links espalhados. Centralizados, o rodape fecha a pagina limpo. */
    .mx-rodape-linha { flex-direction: column; text-align: center; gap: 1.6rem; }
    .mx-ap { align-items: center; }
    .mx-rodape-links { justify-content: center; gap: 1rem 1.4rem; }
}
.mx-ap { display: inline-flex; flex-direction: column; gap: .55rem; }
.mx-ap span {
    font-family: 'IBM Plex Mono', monospace; font-size: .64rem;
    letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-tenue);
}
.mx-ap img { height: 28px; width: auto; }
.mx-ap-claro { display: none; }
:root[data-tema="claro"] .mx-ap-claro { display: block; }
:root[data-tema="claro"] .mx-ap-escuro { display: none; }
.mx-rodape-links { display: flex; flex-wrap: wrap; gap: 1.3rem; font-size: .89rem; }
.mx-rodape-links a { color: var(--tinta-tenue); }
/* O segundo telefone existe, mas nao disputa com o principal. */
.mx-rodape-links .mx-tel-2 { opacity: .68; font-size: .82rem; }
.mx-rodape-links .mx-tel-2::before { content: 'ou '; }

/* ==========================================================================
   Entrada ao rolar — corte por cortina, não fade genérico
   ========================================================================== */

.js .mx-entra {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
}
.js .mx-entra.mx-visivel {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transition: clip-path var(--t-longo) var(--curva),
                opacity calc(var(--t-longo) * .6) var(--curva);
}
.js .mx-entra--2 { transition-delay: 90ms; }
.js .mx-entra--3 { transition-delay: 180ms; }

/* ==========================================================================
   Responsivo
   ========================================================================== */

/* A barra nao pode encolher a marca nem estourar: medido em 393px, as acoes
   iam ate 431px e o botao do WhatsApp saia da tela. */
.mx-marca { flex: 0 0 auto; }
.mx-topo-acoes { flex: 0 1 auto; min-width: 0; }
.mx-menu-btn { display: none; }

@media (max-width: 1040px) {
    .mx-nav { display: none; }
    .mx-menu-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; padding: 0;
        border: 1px solid var(--borda); border-radius: 10px;
        background: transparent; color: var(--tinta); cursor: pointer;
    }
    .mx-topo:not(.mx-topo--fixa) .mx-menu-btn { color: #fff; border-color: rgba(255,255,255,.32); }
    /* No estreito o topo carrega so a marca, o tema e o menu; as rotas todas
       moram no painel, sem nada cortado. */
    .mx-topo-acoes .mx-btn { display: none; }
}
@media (max-width: 560px) {
    body { font-size: 16px; }
    .mx-heroi { padding-top: 6rem; }
    .mx-heroi-pe { gap: 1.1rem 1.6rem; }
}

/* ---------- Painel de rotas (celular) ---------- */
.mx-painel-fundo {
    position: fixed; inset: 0; z-index: 95;
    background: rgba(6,4,3,.6);
    opacity: 0; transition: opacity var(--t-base) var(--curva);
}
.mx-painel-fundo.mx-on { opacity: 1; }

.mx-painel {
    position: fixed; inset: 0 0 auto; z-index: 96;
    background: var(--fundo);
    border-bottom: 1px solid var(--borda);
    padding: 1rem 0 1.4rem;
    transform: translateY(-100%);
    transition: transform var(--t-base) var(--curva);
}
.mx-painel.mx-on { transform: translateY(0); }

.mx-painel-topo {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: .9rem; margin-bottom: .9rem;
    border-bottom: 1px solid var(--borda);
}
.mx-painel-fechar {
    width: 40px; height: 40px; padding: 0;
    border: 1px solid var(--borda); border-radius: 10px;
    background: transparent; color: var(--tinta); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.mx-painel-rotas { display: grid; gap: .1rem; margin-bottom: 1.2rem; }
.mx-painel-rotas a {
    display: block; padding: .85rem .2rem;
    color: var(--tinta); font-size: 1.05rem; font-weight: 600;
    text-decoration: none; border-bottom: 1px solid var(--borda);
}
.mx-painel-rotas a:last-child { border-bottom: 0; }
.mx-painel-acoes { display: grid; gap: .6rem; }
.mx-painel-acoes .mx-btn { width: 100%; }

/* O vídeo e as telas passam da margem: clipa aqui, não no body — overflow no
   body mata o position:sticky/fixed da barra. */
.mx-secao, .mx-heroi, .mx-fecho, .mx-corte { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .mx-entra, .js .mx-entra.mx-visivel {
        opacity: 1; clip-path: none; transition: none;
    }
    .mx-tarja { transition: none; }
    .mx-corte-fala { opacity: 1; transition: none; }
    * { animation: none !important; }
}

/* ==========================================================================
   VISOR — a imagem em tela cheia
   No celular a captura de uma tela de desktop fica com ~350px de largura e
   ninguem consegue ler o fluxo. Tocando nela, ela abre aqui: no estreito em
   tamanho natural, com rolagem lateral, para dar para acompanhar de verdade.
   ========================================================================== */

.mx-visor {
    position: fixed; inset: 0; z-index: 120;
    display: flex; flex-direction: column;
    background: #0A0705;
    opacity: 0; visibility: hidden;
    transition: opacity var(--t-base) var(--curva), visibility 0s linear var(--t-base);
}
.mx-visor.mx-on { opacity: 1; visibility: visible; transition-delay: 0s; }

.mx-visor-barra {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .9rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,.14);
    flex: 0 0 auto;
}
.mx-visor-titulo {
    color: rgba(255,255,255,.9); font-size: .9rem; font-weight: 500;
    margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mx-visor-fechar {
    flex: 0 0 auto;
    width: 42px; height: 42px; padding: 0;
    border: 1px solid rgba(255,255,255,.3); border-radius: 10px;
    background: transparent; color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.mx-visor-fechar:hover { background: rgba(255,255,255,.12); }

.mx-visor-palco {
    flex: 1 1 auto; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: auto; padding: 1rem;
    -webkit-overflow-scrolling: touch;
}
.mx-visor-palco img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    border-radius: 10px;
    transform: scale(.97); opacity: 0;
    transition: transform var(--t-base) var(--curva), opacity var(--t-base) var(--curva);
}
.mx-visor.mx-on .mx-visor-palco img { transform: scale(1); opacity: 1; }

@media (max-width: 860px) {
    /* No estreito vale mais ver a tela em tamanho de leitura e arrastar para
       o lado do que caber inteira e ficar ilegivel. justify-content:flex-start
       e obrigatorio: centralizado num container com rolagem, a imagem abria
       pelo meio e o comeco da tela ficava cortado. */
    .mx-visor-palco { align-items: center; justify-content: flex-start; padding: .8rem; }
    .mx-visor-palco img { max-width: none; width: 900px; max-height: none; flex: 0 0 auto; }
    /* Captura de celular ja e estreita: ampliar para 900px so a deixa borrada.
       Ela cabe na tela inteira do jeito que e. */
    .mx-visor-palco img[data-retrato] {
        width: auto; max-width: 100%; max-height: 100%; margin-inline: auto;
    }
}

.mx-visor-dica {
    flex: 0 0 auto; padding: .7rem 1.1rem 1.1rem; text-align: center;
    font-family: 'IBM Plex Mono', monospace; font-size: .66rem;
    letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
@media (min-width: 861px) { .mx-visor-dica { display: none; } }

body.mx-travado { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .mx-visor, .mx-visor-palco img, .mx-painel, .mx-painel-fundo { transition: none; }
}