/*
 * CSS único do site. Mobile-first, sem framework, sem etapa de build.
 *
 * O visual segue o site que o público de Itanhaém já conhece — medido no
 * cinemaritanhaem.com.br em 27/07/2026, não inventado:
 *
 *   fundo        #010101 (preto)
 *   texto        #85868c (cinza)
 *   títulos      brancos, peso 300, centralizados, 42px no desktop
 *   marca        #b00002
 *   botões       pílula, raio 30px, peso 700
 *   rodapé       #1a1c20
 *   fonte        Roboto
 *
 * Um arquivo só porque o site é pequeno: é menos requisição.
 */

:root {
    /* Cores medidas no site atual. Trocar aqui muda o site inteiro. */
    --cor-marca: #b00002;
    --cor-marca-clara: #ff3a2d;
    --cor-fundo: #010101;
    --cor-fundo-secao: #0a0a0a;
    --cor-fundo-cartao: #141414;
    --cor-rodape: #1a1c20;
    --cor-texto: #85868c;
    --cor-texto-forte: #ffffff;
    --cor-borda: #2a2a2e;
    --cor-amarelo: #f5c518;

    /* As três cores que o layout novo acrescenta, lidas do Figma:
       o vermelho de ação (botão "Ver sessões", selo "Estreia") — mais claro e
       mais saturado que o --cor-marca, que continua sendo a cor da marca nas
       páginas internas;
       #92070b é o vinho das faixas grandes (Quarta Maluca e o cartão de contatos);
       #1b1b1b é o corpo do card de filme.

       O vermelho é #e51c24 e não o #ef1c24 do Figma. Motivo medido: branco sobre
       #ef1c24 dá 4,32:1, e o AA exige 4,5:1 para texto normal — o selo e os
       botões são 16px bold, que não conta como texto grande (precisaria de
       18,66px em negrito). O Lighthouse reprovou exatamente esses três
       elementos. #e51c24 dá 4,64:1; são 4% mais escuro, imperceptível ao lado do
       original, e é a diferença entre passar e reprovar.
       Se um dia o vermelho do Figma tiver de voltar exato, a saída é texto
       escuro nesses elementos, não branco. */
    --cor-acao: #e51c24;
    --cor-vinho: #92070b;
    --cor-carvao: #1b1b1b;

    /* Containers: são cinco níveis aninhados no site atual, não um.
       #main > .wf-wrap tem width 1300 com padding 0 50 → 1200 úteis, que é o do
       header e do rodapé; as seções do Elementor usam 1140; a regra base do tema
       usa 1120 (o divisor de 145,6px é 13% disso); e a seção do carrossel tem um
       max-width nominal de 1024, que rende 1004. Medido, não estimado. */
    --largura-secao: 1140px;
    --largura-base: 1120px;
    --largura-estreita: 46rem;

    /* Container do layout novo: no Figma o conteúdo da home vai de x=53 a
       x=1225 num quadro de 1280 — 1172px úteis. É esta a medida do cabeçalho, da
       vitrine, da Quarta Maluca e do bloco de contatos, e por isso ela substitui
       o --largura-cabecalho de 1200 que vinha do WordPress. */
    --largura-cabecalho: 1172px;
    --largura-home: 1172px;

    /* Card do desenho: 280,664 x 410,827 de arte. A proporção 0,6832 é a mesma
       do cartaz que o Velox entrega — não há recorte nem esticamento.
       Quatro cards mais três vãos de 16,485 fecham exatamente os 1172. */
    --card-largura: 280.664px;
    --card-gap: 16.485px;

    /* O valor de autor do divisor é 3,7px. Em telas de DPR 1,25 o navegador
       arredonda para 3,2px — o 3,2 que aparece medido é artefato, não intenção. */
    --divisor-altura: 3.7px;
    --divisor-largura: 145.6px;

    --raio: 0.375rem;
    --raio-pilula: 30px;
    --raio-cartao: 16px;

    /* Mona Sans é a fonte da interface no layout novo. Ela entra como fonte do
       site inteiro, e não só da home: as páginas internas em Roboto ao lado de
       uma home em Mona Sans leriam como dois sites.
       O Roboto continua carregado e continua sendo a fonte da sinopse do hero,
       que é Roboto no desenho — e é ele que segura o fallback enquanto a Mona
       Sans não chega. */
    --fonte: "Mona Sans", Roboto, Helvetica, Arial, Verdana, sans-serif;
    --fonte-texto: Roboto, Helvetica, Arial, Verdana, sans-serif;
}

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

/* Coluna de altura mínima igual à da janela, com o <main> crescendo: em página
   curta — /eventos-cinemar sem evento cadastrado — o rodapé parava no meio da
   tela e sobrava uma faixa do fundo do body embaixo dele, que lia como falha de
   carregamento. */
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--fonte);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--cor-texto);
    background: var(--cor-fundo);
    -webkit-text-size-adjust: 100%;
}

#conteudo {
    flex: 1 0 auto;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--cor-texto-forte);
    text-decoration: none;
}

a:hover {
    color: var(--cor-marca-clara);
}

/* Foco sempre visível: em fundo preto o contorno precisa ser claro para
   aparecer, então é branco e não vermelho. */
:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    border-radius: 2px;
}

h1,
h2,
h3,
h4 {
    margin: 0 0 0.5em;
    color: var(--cor-texto-forte);
    font-weight: 300;
    line-height: 1.2;
    text-wrap: balance;
}

p {
    margin: 0 0 1rem;
}

.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.pular-para-conteudo {
    position: absolute;
    left: -9999px;
    z-index: 100;
    padding: 0.75rem 1rem;
    color: #fff;
    background: var(--cor-marca);
}

.pular-para-conteudo:focus {
    top: 0.5rem;
    left: 0.5rem;
}

/* --------------------------------------------------------------------------
   Cabeçalho
   -------------------------------------------------------------------------- */

/* 88px de altura em repouso, que é a faixa do desenho, encolhendo para 60px
   conforme o scroll — `altura = max(60, 88 - scrollY)`. O encolhimento vem do
   site atual e o desenho não o contradiz: ele desenha um estado só, o de repouso.
   A altura acompanha o scroll pixel a pixel, sem transição, para não ter lag; o
   JS escreve --topo-altura.

   Em repouso é vidro fumê fraco: desfoque de 14px com uma película preta
   uniforme de 22%. Sem degradê.

   O Figma pede transparência total com 2,2px de desfoque. Os 2,2px quase não
   borram nada — e é o desfoque que faz a faixa ler como vidro em vez de véu, por
   isso ele sobe para 14.

   Aqui havia um degradê preto de 0,6 a 0. Ele resolvia contraste, mas desenhava
   uma barra escura visível sobre a arte, que é exatamente o que o desenho não
   quer.

   Fica o registro de que isto é uma troca, não almoço grátis: a arte do hero vem
   do Velox e muda toda semana. Sobre um cartaz claro o menu branco perde
   contraste, e o desfoque ajuda a ler porque apaga o detalhe fino atrás das
   letras, mas não escurece. Se um cartaz muito claro entrar em cartaz, o
   caminho é subir a película — não voltar o degradê.

   Rolando, ele fecha em #000. */
.topo {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: var(--topo-altura, 88px);
    background: rgb(0 0 0 / 0.22);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: background-color 0.5s;
}

/* A sombra é o que carrega a legibilidade agora que a película é fraca.
   Medido sobre o cartaz do Toy Story: só com os 22% de preto, 63% da faixa do
   menu fica abaixo de 4,5:1. A sombra não muda esse número — ela cria um halo
   escuro colado no glifo, que é o que separa a letra branca de um fundo claro.
   É a técnica de legenda sobre imagem, e é o que permite manter o vidro fraco.

   Se um cartaz muito claro entrar em cartaz e ainda assim ficar ruim, o ajuste
   é subir a película de 0,22 — não voltar o degradê. */
.topo .menu a,
.topo-social {
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.85), 0 0 10px rgb(0 0 0 / 0.5);
}

/* Rolando, o fundo é preto chapado e a sombra vira ruído. */
.topo[data-fixo] .menu a,
.topo[data-fixo] .topo-social {
    text-shadow: none;
}

/* Rolou: preto chapado, sem degradê e sem desfoque. Com o degradê ainda ativo
   sobrava um véu translúcido no rodapé da faixa e dava para ver o conteúdo
   passando por baixo dela. */
.topo[data-fixo] {
    background: #000;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Sem hero, o conteúdo começa embaixo do cabeçalho em vez de por baixo dele.
   Os 88px são a altura de repouso; quando ele encolhe, o conteúdo não se move,
   que é o comportamento do original. */
.sem-hero #conteudo {
    padding-top: 88px;
}

.topo-interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    height: 100%;
    /* Os 1172 são a largura útil, como na .secao-home: sem somar o padding o
       cabeçalho fecharia em 1140 e o logo cairia 16px à direita das seções. */
    max-width: calc(var(--largura-cabecalho) + 2rem);
    margin: 0 auto;
    padding: 0 1rem;
}

@media (max-width: 63.99rem) {
    /* Abaixo de 1024 o original vai para 116px e depois 60 no celular; aqui o
       cabeçalho é sempre compacto, porque o menu vira gaveta.

       `height: auto` e não fixa: com a gaveta aberta o cabeçalho precisa crescer
       para caber os links. O min-height do interno é que garante os 64px de
       repouso, e é dele que sai o recuo do conteúdo abaixo. */
    .topo {
        height: auto;
        background: #0a0a0a;
    }

    .topo-interno {
        height: auto;
        min-height: 64px;
        padding: 0.625rem 1rem;
    }

    /* 64px, e não zero. O cabeçalho é `position: fixed` também no celular, então
       zerar o recuo escondia o começo de toda página interna atrás dele —
       conferido em /precos a 390px: o conteúdo começava em y=0 com a faixa
       ocupando 0..64. */
    .sem-hero #conteudo {
        padding-top: 64px;
    }
}

.logo img {
    display: block;
    /* A logo do WordPress pode vir quadrada ou horizontal; contain impede
       esticamento e a altura fixa evita salto de layout. */
    /* 155x30 no original: altura fixa em 30px e largura automatica reproduzem
       o tamanho exato do site atual. */
    height: 30px;
    width: auto;
    max-width: 11rem;
    object-fit: contain;
}

.topo-acoes {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.menu-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: #fff;
    background: transparent;
    border: 0;
    cursor: pointer;
}

/* O hambúrguer virou o ícone `menu` do Lucide; a versão em box-shadow saiu. */

.menu {
    display: none;
    flex-basis: 100%;
}

.menu.aberto {
    display: block;
}

.menu ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
}

.menu a {
    display: block;
    padding: 0.75rem 0.25rem;
    font-size: 0.9375rem;
    color: #fff;
    border-bottom: 1px solid var(--cor-borda);
}

.menu a:hover,
.menu a:focus-visible {
    color: var(--cor-marca-clara);
}

/* O botão de compra, dentro da gaveta do celular — no desktop o desenho não tem
   botão de compra no cabeçalho, e quem chega pela home encontra o "Ver sessões"
   do hero. Com o menu aberto não há hero à vista, então ali ele fica. */
/* `.menu a.menu-ingresso` e não `.menu-ingresso`: a regra genérica `.menu a` tem
   dois seletores de classe e ganharia de um só, deixando o botão como `display:
   block` — e foi exatamente o que aconteceu, uma barra vermelha de 667px
   atravessando o cabeçalho. */
.menu a.menu-ingresso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.75rem 0 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    background: var(--cor-acao);
    border-radius: var(--raio-pilula);
    min-height: 2.75rem;
}

.menu a.menu-ingresso:hover,
.menu a.menu-ingresso:focus-visible {
    color: #fff;
    background: var(--cor-marca-clara);
}

/* 30x30 no desenho, sem moldura: é o glifo solto, não um botão redondo. */
.topo-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.topo-social:hover {
    color: var(--cor-marca-clara);
}

.aviso-faixa {
    margin: 0;
    padding: 0.75rem 1rem;
    color: #fff;
    text-align: center;
    background: var(--cor-marca);
}

/* --------------------------------------------------------------------------
   Seções e títulos
   -------------------------------------------------------------------------- */

.secao {
    max-width: var(--largura-secao);
    margin: 0 auto;
    padding: 2.5rem 1rem;
}

.secao-estreita {
    max-width: var(--largura-estreita);
}

/* O padrão do site atual: título fino centralizado, subtítulo vermelho e um
   traço vermelho curto embaixo. */
.secao-titulo {
    margin-bottom: 0.25rem;
    font-size: 1.75rem;
    font-weight: 300;
    text-align: center;
}

/* Medido no site atual: <b> em Roboto 15px/700, BRANCO, line-height 27px,
   centralizado, com 3px de margem embaixo. Estava vermelho e menor aqui — era
   estimativa, não medição. */
.secao-apoio {
    margin: 0 0 3px;
    font-size: 15px;
    font-weight: 700;
    line-height: 27px;
    color: var(--cor-texto-forte);
    text-align: center;
}

/* O traço vermelho fecha o bloco de título: vai depois do subtítulo quando ele
   existe, e depois do próprio título quando não existe. :not(:has()) evita que
   as duas regras disparem juntas e desenhem dois traços.

   3,7px é o valor de autor do original (o 3,2px que aparece medido é
   arredondamento de device pixel em DPR 1,25), e a largura são 145,6px fixos. */
.secao-apoio::after,
.secao-titulo:not(:has(+ .secao-apoio))::after {
    content: "";
    display: block;
    width: var(--divisor-largura);
    max-width: 100%;
    height: var(--divisor-altura);
    margin: 0.75rem auto 0;
    background: var(--cor-marca);
}

.nota {
    font-size: 0.875rem;
    color: var(--cor-texto);
}

.acao-central {
    margin-top: 1.5rem;
    text-align: center;
}

.lista-simples {
    padding-left: 1.25rem;
}

.voltar {
    max-width: var(--largura-secao);
    margin: 0 auto;
    padding: 0 1rem 2.5rem;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

.botao {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    background: var(--cor-marca);
    border: 0;
    border-radius: var(--raio-pilula);
    cursor: pointer;
    min-height: 2.75rem;
}

.botao:hover,
.botao:focus-visible {
    color: #fff;
    background: var(--cor-marca-clara);
}

.botao-secundario {
    color: #fff;
    background: transparent;
    border: 1px solid rgb(255 255 255 / 0.6);
}

.botao-secundario:hover,
.botao-secundario:focus-visible {
    color: #010101;
    background: #fff;
    border-color: #fff;
}

.botao-pequeno {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Cards de filme e grade de horários
   -------------------------------------------------------------------------- */

.em-cartaz {
    display: grid;
    gap: 1.25rem;
}

.card-filme {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 1rem;
    padding: 0.875rem;
    background: var(--cor-fundo-cartao);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
}

.card-cartaz {
    width: 100%;
    aspect-ratio: 210 / 308;
    object-fit: cover;
    border-radius: var(--raio);
    background: var(--cor-fundo-secao);
}

.card-titulo {
    margin-bottom: 0.25rem;
    font-size: 1.0625rem;
    font-weight: 500;
}

.card-titulo a {
    color: #fff;
}

.card-titulo a:hover,
.card-titulo a:focus-visible {
    color: var(--cor-marca-clara);
}

.card-meta {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--cor-texto);
}

.card-extra {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--cor-marca-clara);
}

.card-sinopse {
    margin: 0 0 0.875rem;
    font-size: 0.875rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sem-sessao {
    color: var(--cor-texto);
}

.em-cartaz-vazio {
    padding: 2rem 1.25rem;
    text-align: center;
    background: var(--cor-fundo-cartao);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
}

/* A grade de "Em breve" saiu daqui. Ela estilizava o partial cache/em-breve.html,
   que nenhuma página incluía: o Em Breve da home é uma fita de cartazes, com o
   mesmo card da vitrine, e mora no bloco do carrossel.

   As classes .card-titulo, .card-cartaz e .card-extra ficaram, porque também são
   do partial de EM CARTAZ, que a 404 usa de verdade. */

/* --------------------------------------------------------------------------
   Preços e dúvidas
   -------------------------------------------------------------------------- */

.tabela-precos {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.tabela-precos th,
.tabela-precos td {
    padding: 0.75rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--cor-borda);
}

.tabela-precos thead th {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cor-marca-clara);
}

.tabela-precos tbody th {
    font-weight: 500;
    color: #fff;
}

.tabela-precos .valor {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #fff;
}

.bomboniere-grupo {
    margin-top: 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.faq {
    display: grid;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.faq-item {
    padding: 0.875rem 1rem;
    background: var(--cor-fundo-cartao);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
}

.faq-pergunta {
    padding: 0.25rem 0;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
}

.faq-resposta p {
    margin: 0.75rem 0 0;
}

/* --------------------------------------------------------------------------
   Eventos
   -------------------------------------------------------------------------- */

.lista-eventos {
    display: grid;
    gap: 1.25rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.evento {
    display: grid;
    gap: 0.75rem;
    padding: 0.875rem;
    background: var(--cor-fundo-cartao);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
}

.evento-imagem {
    width: 100%;
    border-radius: var(--raio);
}

.evento-titulo {
    margin-bottom: 0.25rem;
    font-size: 1.0625rem;
    font-weight: 500;
}

.evento-data {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--cor-marca-clara);
}

/* --------------------------------------------------------------------------
   Patrocinadores
   -------------------------------------------------------------------------- */

/* 1095px e não os 1172 do resto da home: no Figma as duas fileiras de banner vão
   de x=98 a 1193, mais estreitas que a vitrine e a faixa da promoção. */
.patrocinadores {
    max-width: 1095px;
    margin: 0 auto;
    padding: 1.5rem 1rem 2.5rem;
}

.patrocinadores-lista {
    display: grid;
    /* Tres colunas fixas por fileira, como no site atual — duas grades Elementor
       de 3, nao um auto-fill que reflui sozinho. */
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    align-items: center;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.patrocinadores-lista:last-child {
    margin-bottom: 0;
}

/* Caixa de proporcao fixa em vez de imagem solta.
   Cinco banners sao 300x106 (ratio 2,83) e o do TV Sua Praia e 267x257 (ratio
   1,04): sozinho ele ficava muito mais alto e desalinhava a fileira inteira.
   Com a caixa fixa e `contain`, o quadrado cabe centralizado, sem recorte e sem
   esticar, e a fileira fica reta. O arquivo enviado nao e alterado. */
.patrocinador {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 300 / 106;
}

.patrocinador > a,
.patrocinador > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.patrocinador img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 14px;
}

/* Radius 10px em 4 dos 6 slots no site atual e nenhum em 2 (os dois da Segura
   CD). Uniformizado: a diferenca era descuido de autoria, nao desenho — e num
   banner sobre fundo preto ninguem percebe a borda arredondada faltando. */

/* Duas colunas no celular. O desenho só define o desktop, e em 390px as três
   colunas dão 110px por banner: o telefone e o site do anunciante, que é o que
   ele está pagando para aparecer, ficam ilegíveis.

   As duas fileiras viram uma grade só. Elas são dois <ul> separados — a fileira
   vem do dado, porque no site atual são duas grades Elementor distintas — e cada
   um com três itens em duas colunas dava 2+1, 2+1: dois buracos no meio da
   seção. `display: contents` dissolve a caixa dos <ul> e promove os seis <li>
   para a grade do <section>, que aí preenche 2+2+2 sem furo. A ordem das
   fileiras é preservada, porque a ordem do documento não muda. */
@media (max-width: 47.99rem) {
    .patrocinadores {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .patrocinadores-lista {
        display: contents;
    }

    /* O título é filho do <section> e vira item da grade junto com os banners. */
    .patrocinadores .secao-titulo-centro {
        grid-column: 1 / -1;
        margin-bottom: 0.5rem;
    }
}

/* "Anuncie aqui" no site atual é cartão branco com texto vermelho. */
.patrocinador-convite a {
    display: grid;
    gap: 0.125rem;
    padding: 1.25rem 0.75rem;
    font-size: 1.0625rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    color: var(--cor-marca);
    background: #fff;
    border-radius: var(--raio);
}

.patrocinador-convite a:hover {
    color: #fff;
    background: var(--cor-marca);
}

.patrocinador-convite-sub {
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: none;
    color: #55555a;
}

.patrocinador-convite a:hover .patrocinador-convite-sub {
    color: rgb(255 255 255 / 0.85);
}

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */

.rodape {
    padding: 2.5rem 0 1.5rem;
    background: var(--cor-rodape);
}

.rodape-interno {
    display: grid;
    gap: 1.75rem;
    max-width: var(--largura-cabecalho);
    margin: 0 auto;
    padding: 0 1rem;
}

.rodape-titulo {
    margin-bottom: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
}

.rodape-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rodape-links li + li {
    margin-top: 0.375rem;
}

.rodape-links a {
    font-size: 0.875rem;
    color: var(--cor-texto);
}

.rodape-links a:hover {
    color: var(--cor-marca-clara);
}

.rodape-nota {
    max-width: var(--largura-cabecalho);
    margin: 1.75rem auto 0;
    padding: 1.25rem 1rem 0;
    font-size: 0.8125rem;
    text-align: center;
    border-top: 1px solid #2c2e33;
}

.rodape-credito {
    margin-top: 0.375rem;
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   Aviso de cookies
   -------------------------------------------------------------------------- */

/* `[hidden]` primeiro, e a regra precisa existir: o `display: flex` abaixo tem
   um seletor de classe e vence o `display: none` que o navegador dá ao atributo
   hidden. Sem isto o JS marcava `aviso.hidden = true` no "Aceitar" e a barra
   continuava na tela — o aviso não saía nunca. */
.cookies[hidden] {
    display: none;
}

.cookies {
    position: fixed;
    inset: auto 0 0;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    font-size: 0.8125rem;
    background: #0a0a0a;
    border-top: 1px solid var(--cor-borda);
}

.cookies p {
    margin: 0;
    flex: 1 1 16rem;
    max-width: 40rem;
}

.cookies-texto {
    flex: 1 1 20rem;
    max-width: 46rem;
}

.cookies-titulo {
    margin: 0 0 0.125rem;
    font-weight: 700;
    color: var(--cor-texto-forte);
}

.cookies-acoes {
    display: flex;
    flex: 0 0 auto;
    gap: 0.5rem;
}

/* A barra do site atual (87,72px, z-index 9999) cobre o rodapé de 92px por
   completo na primeira visita: quem chega não consegue ler endereço nem links
   sem antes despachar o aviso. O JS marca o body enquanto a barra está no ar, e
   o recuo devolve o rodapé. */
body.com-aviso-cookies {
    padding-bottom: 8rem;
}

@media (min-width: 40rem) {
    body.com-aviso-cookies {
        padding-bottom: 6rem;
    }
}

/* --------------------------------------------------------------------------
   Telas maiores
   -------------------------------------------------------------------------- */

@media (min-width: 40rem) {
    .secao-titulo {
        font-size: 2.25rem;
    }

    .card-filme {
        grid-template-columns: 8.5rem 1fr;
        padding: 1rem;
    }

    .filme-topo {
        grid-template-columns: 14rem 1fr;
    }

    .filme-cartaz {
        width: 100%;
    }

    .filme-titulo {
        font-size: 2.25rem;
    }

    /* A largura do item do carrossel vem do token --carrossel-item (244,25px,
       medido) e da media query de ate 1023px. Nao redefinir aqui. */

    .rodape-interno {
        grid-template-columns: repeat(3, 1fr);
    }

    .evento {
        grid-template-columns: 16rem 1fr;
        gap: 1.25rem;
        align-items: start;
    }
}

@media (min-width: 62rem) {
    /* Desktop: título de 42px, como no site atual. */
    .secao-titulo {
        font-size: 2.625rem;
    }

    .menu-botao {
        display: none;
    }

    /* margin-left: auto empurra a navegação para a direita, onde ela está no
       desenho: a fita de links termina em x=1184 e o Instagram começa em 1198.

       O `auto` precisa ser UM só na linha. Com ele também em .topo-acoes, os
       dois dividiam a folga e o menu parava em x=362, no meio do cabeçalho. */
    .menu {
        display: block;
        flex-basis: auto;
        margin-left: auto;
    }

    .topo-acoes {
        margin-left: 0;
    }

    /* 25px entre um item e o seguinte, medido no Figma ("Em Cartaz" acaba em 83,
       "Em Breve" começa em 108). O vão é o gap, não padding do link — com padding
       lateral os 25px virariam 25 mais o dobro do padding. */
    .menu ul {
        flex-direction: row;
        gap: 25px;
        padding: 0;
    }

    .menu a {
        padding: 0.5rem 0;
        font-size: 16px;
        font-weight: 600;
        border-bottom: 0;
    }

    /* No desktop o cabeçalho do desenho não tem botão de compra. */
    .menu a.menu-ingresso {
        display: none;
    }

    .em-cartaz {
        gap: 1.5rem;
    }
}

/* Respeita quem pediu menos movimento no sistema. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* --------------------------------------------------------------------------
   Resumo da semana, na página de filme

   A faixa vermelha agrupada, medida no site atual: cabeçalho do grupo em
   21px/400 numa caixa com borda e os horários em 28px/600 branco sobre vermelho.
   Ela deixou de ser o conteúdo principal — quem manda agora é a grade por dia,
   com um link de compra por sessão — e ficou como resumo: serve a quem só quer
   saber "que horas passa".
   -------------------------------------------------------------------------- */

.tabela-horarios {
    max-width: 46rem;
    margin: 0 auto;
}

.tabela-grupo {
    margin-bottom: 1.25rem;
}

.tabela-dias {
    margin: 0;
    padding: 1.25rem 1rem;
    font-size: 1.3125rem;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    color: var(--cor-texto-forte);
    border: 1px solid var(--cor-borda);
    border-bottom: 0;
}

/* O original usa line-height:10px aqui, o que quebra em zoom 200% e em reflow
   (WCAG 1.4.4 e 1.4.10). Mesma altura, com padding em vez do line-height torto. */
.tabela-horas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.375rem 1.5rem;
    margin: 0;
    padding: 0.625rem 1rem;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    background: var(--cor-marca);
}

.tabela-formato {
    font-size: 0.6em;
    font-weight: 500;
    opacity: 0.9;
}

.tabela-nota {
    margin: 1rem 0 0;
    font-size: 0.875rem;
    text-align: center;
}

@media (max-width: 47.99rem) {
    .tabela-horas {
        font-size: 1.375rem;
        gap: 0.25rem 1rem;
    }

    .tabela-dias {
        padding: 0.875rem 0.75rem;
        font-size: 1.125rem;
    }

    .filme-sessoes-titulo {
        font-size: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   Faixa "CineMAR é 3D Digital"

   Largura total, com o fundo vermelho de 1500x600 em cover. O lettering fica à
   esquerda e o espectador à direita, os dois com transparência.

   No original a arte do espectador sangra ~47px fora da seção — aqui ela é
   contida, para não arriscar scroll horizontal no celular.
   -------------------------------------------------------------------------- */

/* Largura total sem truque: a faixa é filha direta do <main>, que não tem
   max-width, então `width: 100%` já vai de borda a borda.
   Não usar `100vw` com `margin-left: calc(50% - 50vw)`: 100vw INCLUI a barra de
   rolagem, e o resultado era 8px de overflow horizontal — a faixa preta que
   aparecia à direita da página inteira. */
/* Cartão fechado, não faixa de borda a borda: a mesma caixa da Quarta Maluca —
   1172 de largura, cantos de 16px — para as duas lerem como blocos da mesma
   página, e não como uma seção institucional que atravessa a tela. */
.banner-3d {
    max-width: calc(var(--largura-home) + 2rem);
    margin: 0 auto;
    padding: 0 1rem;
}

.banner-3d-interno {
    overflow: hidden;
    background: #7d0000 url("/assets/img/3d-fundo.webp") center center / cover no-repeat;
    border-radius: var(--raio-cartao);
}

/* A altura vem da arte, não de uma proporção fixa.

   Com `aspect-ratio` a altura era independente do conteúdo, e as duas coisas
   brigavam: com a arte pequena sobrava vermelho vazio em cima dela; para
   preencher, a arte teve de ir a 72% da largura e ficou grande demais. Agora o
   espectador define a altura — ele está ancorado no rodapé, então não existe
   folga possível acima dele.

   O recuo à esquerda é só do letreiro: a arte é um recorte de foto e continua
   encostando na base e na direita do cartão, que é onde ela sangra bem. */
.banner-3d-interno {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    min-height: 14rem;
    margin: 0 auto;
    padding: 1.5rem 0 0 4rem;
}

.banner-3d-lettering {
    position: relative;
    z-index: 2;
    width: clamp(11rem, 27%, 25rem);
    height: auto;
}

/* 50% da largura. Antes eram 72%, e aqueles 72% não eram escolha de tamanho —
   eram o que a arte precisava para encher uma faixa de altura fixa. Sem a
   proporção fixa, o tamanho volta a ser decisão de composição: metade do cartão
   para o espectador, a outra metade para o letreiro respirar. */
.banner-3d-arte {
    /* Alinhada ao rodapé da faixa, como no original: o ombro do espectador
       encosta na borda de baixo. */
    align-self: flex-end;
    width: clamp(11rem, 50%, 36rem);
    height: auto;
    margin-bottom: -1px;
}

@media (max-width: 47.99rem) {
    .banner-3d-interno {
        aspect-ratio: auto;
        min-height: 11rem;
        padding: 1rem 0.75rem 0;
        border-radius: 12px;
    }

    .banner-3d-lettering { width: 42%; }
    .banner-3d-arte { width: 54%; }
}

/* --------------------------------------------------------------------------
   Preços

   Duas colunas de 50% (Ingresso | Bomboniere), cada uma com duas colunas
   internas — a estrutura do site atual. Tudo centralizado, como lá.
   -------------------------------------------------------------------------- */

.precos-colunas {
    display: grid;
    gap: 2.5rem;
    margin-top: 1.875rem;
}

.precos-titulo {
    margin: 0 0 1.25rem;
    font-size: 2rem;
    font-weight: 300;
    text-align: center;
}

.precos-tipos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.precos-tipo {
    text-align: center;
}

.precos-tipo-nome {
    margin: 0 0 0.5rem;
    /* 22px/200 no original. O peso 200 do Roboto não existe em todos os
       ambientes; 300 é o mais próximo que a fonte carregada tem. */
    font-size: 1.375rem;
    font-weight: 300;
    color: #eaeaea;
}

.precos-linha {
    margin: 0 0 0.25rem;
    color: #eaeaea;
}

.precos-linha strong {
    color: var(--cor-texto-forte);
}

.precos-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.precos-lista li {
    margin-bottom: 0.125rem;
}

.precos-lista strong {
    font-weight: 700;
    color: var(--cor-texto-forte);
}

.precos-nota {
    margin-top: 2.5rem;
    text-align: center;
}

@media (min-width: 48rem) {
    .precos-colunas {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

/* --------------------------------------------------------------------------
   Hero

   Medidas lidas do Figma num quadro de 1280x2352 (frame "MacBook Air - 1").
   A arte do hero é 1280x631 — proporção 2,028, mais alta que os 1920/805 do
   RevSlider do site atual, que era o que estava aqui antes.

   O token --hero-escala vale 1px quando o hero tem 1280px de largura, que é o
   quadro em que tudo foi medido. Assim `calc(36 * var(--hero-escala))` quer
   dizer, literalmente, "os 36px que eu li no desenho", e a camada inteira cresce
   junto com o hero em vez de ficar pequena numa tela larga.

   O teto de 1600px existe porque acima disso a proporção fixa deixa o hero muito
   alto e a tipografia acompanharia sem necessidade: em 2560 o título sairia com
   72px. Congelar a escala em 1,25 mantém a proporção sem virar cartaz.

   Sem max-height, e o motivo importa: com `aspect-ratio` definido, um max-height
   que limita a altura faz o navegador encolher a LARGURA para preservar a
   proporção — foi o que produziu a faixa preta à direita da página.
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    container-type: inline-size;
    width: 100%;
    aspect-ratio: 1280 / 631;
    overflow: hidden;
    background: #000;
}

/* Fallback para navegador sem container query: vw em vez de cqw. */
.hero {
    --hero-escala: calc(min(100vw, 1600px) / 1280);
}

@supports (container-type: inline-size) {
    .hero {
        --hero-escala: calc(min(100cqw, 1600px) / 1280);
    }
}

.hero-slide {
    position: absolute;
    inset: 0;
    display: none;
}

.hero-slide-ativo {
    display: block;
}

/* O <picture> só existe quando o slide tem arte própria de celular, e ele não pode
   participar do layout: é elemento inline, e um inline vazio dentro do slide cria
   uma caixa de linha com a altura da fonte. `display: contents` o apaga da árvore
   de caixas e deixa a <img> se posicionar contra o .hero-slide, como sempre fez. */
.hero-slide > picture {
    display: contents;
}

.hero-fundo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Centro, e não mais `center 25%`: a arte agora é a capa do trailer, que já
       vem deitada e enquadrada. O recorte alto existia para salvar o cartaz
       retrato do Velox, que era o fundo antes. */
    object-position: center center;
}

.hero-video {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    /* O player entra escurecido e só aparece quando o vídeo começa de fato. Sem
       isto o visitante via a tela de carregamento do YouTube — o botão de play
       cinza, a roda girando e a barra — por cima da arte, durante os dois ou
       três segundos até o trailer engatar. O JS troca para `hero-video-tocando`
       quando o player avisa que está rodando. */
    opacity: 0;
    transition: opacity 0.6s;
}

.hero-video-tocando {
    opacity: 1;
}

/* O iframe do YouTube é 16/9 e o hero é 2,028: para cobrir sem barra preta ele
   cresce além da caixa e é centralizado.

   66vw, e não os 56,25vw que a proporção 16/9 pediria. O excedente é para jogar
   a faixa de legenda do YouTube para fora do recorte: `cc_load_policy=0` diz ao
   player para não ligar legenda, mas quem tem "sempre exibir legendas" na conta
   ganha a legenda assim mesmo, e o parâmetro não vence a preferência. Medida:
   com 56,25vw a caixa preta da legenda ficava a 23px da base do hero, bem em
   cima do título. Com 66vw a sobra embaixo cresce 60px e ela sai da área
   visível. O vídeo é fundo desfocado por degradê — 17% de zoom não se percebe. */
.hero-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 66vw;
    min-height: 100%;
    min-width: 177.78%;
    border: 0;
    transform: translate(-50%, -50%);
}

/* O degradê do desenho é VERTICAL, não da esquerda: transparente até 43,9% da
   altura e rgba(0,0,0,.85) em 95%. É ele que segura a leitura do bloco de baixo
   sobre qualquer quadro do trailer. */
.hero-sombra {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / 0) 43.9%, rgb(0 0 0 / 0.85) 95%);
}

/* O bloco de texto é ancorado embaixo, não centralizado: no desenho ele ocupa
   y=306..573 num hero de 631, ou seja 58px de folga até a base. Ancorar embaixo
   mantém a linha de botões no mesmo lugar quando o título tem uma linha em vez
   de duas — centralizar faria os botões subirem e descerem a cada slide. */
.hero-conteudo {
    position: absolute;
    left: calc(55 * var(--hero-escala));
    bottom: calc(58 * var(--hero-escala));
    z-index: 3;
    width: calc(474 * var(--hero-escala));
}

.hero-texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 16px entre cada camada, medido: selo→título, título→sinopse e
       sinopse→ações têm todos o mesmo vão. */
    gap: calc(16 * var(--hero-escala));
}

/* Pílula vermelha "Estreia": padding 8/12, 16px bold. */
.hero-selo {
    margin: 0;
    padding: calc(8 * var(--hero-escala)) calc(12 * var(--hero-escala));
    font-size: calc(16 * var(--hero-escala));
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    background: var(--cor-acao);
    border-radius: calc(30 * var(--hero-escala));
}

/* 36px bold. A caixa de texto do Figma tem 86px para duas linhas → 43px de
   entrelinha, que é 1,19. */
.hero-titulo {
    margin: 0;
    font-size: calc(36 * var(--hero-escala));
    font-weight: 700;
    line-height: 1.19;
    color: #fff;
    text-wrap: balance;
}

/* A sinopse é a única coisa em Roboto no desenho — o resto é Mona Sans.
   54px de caixa para 15px de corpo são exatamente 3 linhas a 1,2. */
.hero-sinopse {
    margin: 0;
    font-family: var(--fonte-texto);
    font-size: calc(15 * var(--hero-escala));
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-acoes {
    display: flex;
    align-items: center;
    gap: calc(16 * var(--hero-escala));
    margin: 0;
}

/* "Ver sessões": 24/12 de padding, 16px bold, pílula vermelha. */
.botao-acao,
.botao-vidro {
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--hero-escala));
    padding: calc(12 * var(--hero-escala)) calc(24 * var(--hero-escala));
    font-family: inherit;
    font-size: calc(16 * var(--hero-escala));
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    background: var(--cor-acao);
    border: 0;
    border-radius: calc(30 * var(--hero-escala));
    cursor: pointer;
}

.botao-acao svg,
.botao-vidro svg {
    width: calc(20 * var(--hero-escala));
    height: calc(20 * var(--hero-escala));
    flex: 0 0 auto;
}

/* "Assistir Trailer": mesma pílula em preto a 28%, que sobre o trailer lê como
   vidro fumê.

   `.botao.botao-vidro` e não `.botao-vidro`: a regra genérica `.botao`, lá
   embaixo na seção das páginas internas, pinta todos os botões do vermelho de
   ação. Com uma classe só ela vencia por vir depois, e o "Assistir Trailer"
   aparecia vermelho, idêntico ao "Ver sessões" ao lado. */
.botao.botao-vidro {
    background: rgb(0 0 0 / 0.28);
}

.botao-acao:hover,
.botao-acao:focus-visible {
    color: #fff;
    background: #cf1f16;
}

.botao-vidro:hover,
.botao-vidro:focus-visible {
    color: #fff;
    background: rgb(0 0 0 / 0.55);
}

/* --------------------------------------------------------------------------
   Tarja de classificação indicativa

   O quadrado colorido com a faixa etária. As cores vêm do PHP em duas variáveis
   inline (--tarja-fundo e --tarja-texto), porque quem sabe a faixa é o dado, não
   o CSS.
   -------------------------------------------------------------------------- */

.classificacao {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--tarja-texto, #fff);
    background: var(--tarja-fundo, var(--cor-carvao));
    border-radius: 8px;
}

/* A do hero é maior e escala com ele: 42px de lado, 20px de número. */
.classificacao-grande {
    width: calc(42 * var(--hero-escala));
    height: calc(42 * var(--hero-escala));
    font-size: calc(20 * var(--hero-escala));
    border-radius: calc(12 * var(--hero-escala));
}

/* --------------------------------------------------------------------------
   Controles do hero e fita de cartazes
   -------------------------------------------------------------------------- */

/* Os dois controles ficam na linha dos botões — e são irmãos dos slides, não
   filhos, porque valem para o hero inteiro. Por isso a posição é absoluta:
   571px da esquerda e 53px do fundo, que é o que os deixa centrados na mesma
   linha das ações. Eram três e começavam em 509; a revisão do Figma tirou o
   círculo de expandir e os dois que sobraram ficam em 571 e 633. */
.hero-controles {
    position: absolute;
    left: calc(571 * var(--hero-escala));
    bottom: calc(53 * var(--hero-escala));
    z-index: 4;
    display: flex;
    align-items: center;
    gap: calc(7 * var(--hero-escala));
}

.hero-controle {
    display: grid;
    place-items: center;
    width: calc(55 * var(--hero-escala));
    height: calc(55 * var(--hero-escala));
    padding: 0;
    color: #fff;
    background: #000;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.hero-controle:hover,
.hero-controle:focus-visible {
    color: #fff;
    background: var(--cor-acao);
}

/* Os chevrons são desenhados a 30px dentro do círculo de 55, como no Figma. */
.hero-controle svg {
    width: calc(30 * var(--hero-escala));
    height: calc(30 * var(--hero-escala));
}

/* O painel de cartazes sangra para fora da tela à direita: no Figma ele vai de
   x=712 a 1333 num quadro de 1280, ou seja 53px além da borda. É de propósito —
   o quarto cartaz cortado é o que diz que a fita continua. */
.hero-painel {
    position: absolute;
    left: calc(712 * var(--hero-escala));
    right: calc(-53 * var(--hero-escala));
    /* Uma folga só, usada nos quatro lados. Com valores separados — 28 em cima,
       30 na esquerda, o de baixo saindo por diferença da altura do painel — bastava
       mexer num para a moldura sair torta. Aqui a altura do painel é derivada:
       cartaz mais duas folgas, e os quatro lados ficam iguais por construção. */
    --fita-recuo: calc(16 * var(--hero-escala));
    /* Encostado na base, e não os 2px do Figma. Aqueles 2px deixavam uma tira da
       arte do hero passando por baixo do painel, de ponta a ponta, bem na linha
       em que o hero encontra o preto da página — lia como uma borda solta. No
       desenho é sobra de arredondamento (332 + 297 = 629 num quadro de 631),
       não intenção. */
    bottom: 0;
    z-index: 2;
    /* Altura derivada do conteúdo: o cartaz mais a folga em cima e embaixo. No
       Figma o painel tem 297 fixos para um cartaz de 240,24, o que dava 28 de
       um lado e 28,7 do outro — com a folga menor, 297 deixaria uma sobra
       enorme embaixo. */
    height: calc(240.24 * var(--hero-escala) + 2 * var(--fita-recuo));
    overflow: hidden;
    /* Fundo removido para avaliar os cartazes direto sobre a arte do hero. O
       desenho tem `rgba(0,0,0,.62)` com desfoque de 17,25px; para voltar, é
       descomentar as três linhas abaixo. */
    background: transparent;
    /* background: rgb(0 0 0 / 0.62); */
    /* -webkit-backdrop-filter: blur(17.25px); */
    /* backdrop-filter: blur(17.25px); */
    /* Os dois cantos da esquerda, que são os únicos visíveis: o painel sangra
       para fora pela direita. Com só o de cima arredondado, o de baixo ficava
       em esquadro e a silhueta saía torta. */
    border-radius: calc(13 * var(--hero-escala)) 0 0 calc(13 * var(--hero-escala));
}

.hero-fita {
    display: flex;
    gap: calc(9.64 * var(--hero-escala));
    height: 100%;
    margin: 0;
    /* À direita, a folga mais o tanto que o painel sangra para fora da tela.
       Sem essa soma, no fim da rolagem o último cartaz encostava na borda
       direita do painel — que está 52px além da janela — e ficava
       permanentemente cortado. Com 8 filmes em cartaz o efeito era o mesmo em
       qualquer um que fosse o último: nunca dava para ver o fim da fita. */
    padding: var(--fita-recuo) calc(var(--fita-recuo) + 53 * var(--hero-escala))
             0 var(--fita-recuo);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* O snap alinha o item ao começo do scrollport, e o começo ignora o padding:
       ao encostar no primeiro cartaz, ele grudava na borda esquerda do painel e
       a folga sumia — enquanto a de cima continuava lá, o que deixava a moldura
       visivelmente torta. `scroll-padding` é o que faz o snap respeitá-la. */
    scroll-padding-left: var(--fita-recuo);
    scrollbar-width: none;
}

.hero-fita::-webkit-scrollbar {
    display: none;
}

/* As duas fitas — a de cartazes do hero e a vitrine — se anunciam como
   arrastáveis e desligam o snap durante o arrasto: com `scroll-snap-type`
   ativo, cada pixel arrastado é puxado de volta para o item mais próximo e o
   movimento fica travado. */
.hero-fita,
.carrossel {
    cursor: grab;
}

.hero-fita.arrastando,
.carrossel.arrastando {
    cursor: grabbing;
    scroll-snap-type: none;
    /* Sem isto o arrasto seleciona os cartazes como se fosse texto. */
    user-select: none;
}

.hero-fita > li {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.hero-cartaz {
    display: block;
    width: calc(164.125 * var(--hero-escala));
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.hero-cartaz img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 164.125 / 240.24;
    object-fit: cover;
    border-radius: calc(12.532 * var(--hero-escala));
    /* Borda reservada sempre, para o cartaz ativo não empurrar os vizinhos. */
    border: 2px solid transparent;
    transition: border-color 0.25s;
}

/* O desenho não marca qual cartaz está no ar — e sem marca, clicar num deles não
   dá retorno nenhum. O ativo ganha o anel branco. Melhoria declarada. */
.hero-cartaz[aria-current="true"] img {
    border-color: #fff;
}

.hero-cartaz:hover img {
    border-color: rgb(255 255 255 / 0.5);
}

.hero-cartaz[aria-current="true"]:hover img {
    border-color: #fff;
}

/* Abaixo de 1024 o painel de cartazes sai: ele nasce sangrando 53px para fora
   de um quadro de 1280 e, em 390, cobriria o título. A navegação continua pelas
   setas, que descem para o canto do hero. */
@media (max-width: 63.99rem) {
    /* `height` e `min-height` saíram daqui: o bloco do desenho de celular, mais
       abaixo neste arquivo, declara `height: 560px` na MESMA media query e com a
       mesma especificidade — então vencia por ordem, e o que estava escrito aqui
       nunca valeu. Ficava só para enganar quem lesse o arquivo de cima para baixo:
       `min(62vh, 30rem)` parece ser a altura do hero no celular e não é.

       O que fica é o que sobrevive de verdade: `aspect-ratio: auto` cancela o
       1280/631 do desktop, sem o que a altura fixa não teria efeito, e
       `--hero-escala: 1px` é a medida literal do Figma que a tipografia usa. */
    .hero {
        aspect-ratio: auto;
        --hero-escala: 1px;
    }

    .hero-painel {
        display: none;
    }

    /* Barras pretas em cima e embaixo do trailer, só no celular.
       A causa não era altura de hero: era o iframe deixar de ser 16/9. As regras
       do desktop dão a ele 100vw de largura e 66vw de altura; num hero de 390 de
       largura por 480 de altura, o `min-height: 100%` esticava a altura para 480
       e a largura parava em 693 pelo `min-width`. 693x480 é 1,44 — e o YouTube,
       dentro de uma caixa que não é 16/9, letterboxa o vídeo por conta própria.

       Aqui a caixa é declarada 16/9 e as duas dimensões ficam `auto`: com os
       dois mínimos em 100%, o navegador resolve para a MENOR caixa 16/9 que
       cobre o hero — que é exatamente o recorte de cover, sem barra nenhuma. */
    .hero-video iframe {
        width: auto;
        height: auto;
        min-width: 100%;
        min-height: 100%;
        aspect-ratio: 16 / 9;
    }

    .hero-conteudo {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        width: auto;
    }

    .hero-texto {
        gap: 0.5rem;
    }

    .hero-selo {
        padding: 0.25rem 0.625rem;
        font-size: 0.75rem;
    }

    .hero-titulo {
        font-size: clamp(1.5rem, 6vw, 2rem);
        line-height: 1.15;
    }

    /* A sinopse cede o espaço para os botões: em 390px de largura ela empurraria
       a linha de ações para fora do hero. */
    .hero-sinopse {
        display: none;
    }

    .hero-acoes {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .botao-acao,
    .botao-vidro {
        gap: 0.375rem;
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
        border-radius: var(--raio-pilula);
    }

    .botao-acao svg,
    .botao-vidro svg {
        width: 1rem;
        height: 1rem;
    }

    .classificacao-grande {
        width: 2rem;
        height: 2rem;
        font-size: 0.9375rem;
        border-radius: 8px;
    }

    .hero-controles {
        left: auto;
        right: 1rem;
        bottom: auto;
        top: calc(50% + 1rem);
        gap: 0.375rem;
    }

    .hero-controle {
        width: 2.5rem;
        height: 2.5rem;
        background: rgb(0 0 0 / 0.6);
    }

    .hero-controle svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* --------------------------------------------------------------------------
   Vitrine: cabeçalho da seção e cards de filme

   Container de 1172px, quatro cards de 280,664 com 16,485 de vão — as três
   medidas fecham exatamente a largura, e é por isso que elas não são
   arredondadas aqui.
   -------------------------------------------------------------------------- */

/* Os 1172 do desenho são a largura do CONTEÚDO, não da caixa: o padding lateral
   entra somado, senão a vitrine sai com 1140 e todo o resto herda o erro. */
.secao-home {
    max-width: calc(var(--largura-home) + 2rem);
    margin: 0 auto;
    padding: 2.5rem 1rem;
}

/* Título à esquerda e setas no canto oposto, na mesma linha — ao contrário do
   padrão centralizado das páginas internas, que continua valendo lá. */
.secao-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.625rem;
}

.secao-cabecalho .secao-titulo {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    text-align: left;
}

/* A frase da semana e, logo depois dela na mesma linha, o traço vermelho de
   67x2 do desenho. O traço do padrão antigo (145,6px centralizado embaixo) não
   vale aqui — daí o ::after ser redefinido em vez de herdado. */
.secao-cabecalho .secao-apoio {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
    text-align: left;
}

.secao-cabecalho .secao-apoio::after {
    content: "";
    display: block;
    width: 67px;
    height: 2px;
    margin: 0;
    background: var(--cor-acao);
}

/* O título centralizado dos Patrocinadores: mesmo corpo do outro, sem o traço
   vermelho, que o desenho não traz. */
.secao-titulo-centro {
    margin: 0 0 1.75rem;
    font-size: 32px;
    font-weight: 700;
    text-align: center;
}

/* O traço vermelho de 145,6px do padrão antigo vem de
   `.secao-titulo:not(:has(+ .secao-apoio))::after`, que tem duas classes. Um
   seletor de uma classe só perde e o traço aparecia sob "Patrocinadores", onde o
   desenho não tem nenhum. */
.secao-titulo.secao-titulo-centro::after {
    content: none;
}

.secao-setas {
    display: flex;
    gap: 5.35px;
    flex: 0 0 auto;
}

/* Círculo de 42px em branco a 4% — quase invisível sobre o preto, que é o que o
   Figma pede. Um contorno de 1px entra junto: só o preenchimento a 4% não marca
   a área clicável, e a seta some quando o cartaz atrás é claro. */
.seta-redonda {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: #fff;
    background: rgb(255 255 255 / 0.04);
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: 50%;
    cursor: pointer;
}

.seta-redonda svg {
    width: 23px;
    height: 23px;
}

.seta-redonda:hover:not([disabled]),
.seta-redonda:focus-visible {
    color: #fff;
    background: var(--cor-acao);
    border-color: var(--cor-acao);
}

.seta-redonda[disabled] {
    opacity: 0.35;
    cursor: default;
}

/* A fita rola sem JS: scroll-snap horizontal resolve dedo e roda do mouse. O JS
   só acrescenta as setas e o estado desabilitado nas pontas. */
.carrossel-secao {
    max-width: 100%;
}

.carrossel {
    display: flex;
    gap: var(--card-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.carrossel::-webkit-scrollbar {
    display: none;
}

.carrossel-item {
    flex: 0 0 auto;
    width: var(--card-largura);
    scroll-snap-align: start;
}

/* O card inteiro é um link, e é um <a> com <span> dentro: um <a> não pode conter
   <div>, e a arte e o corpo precisam ser dois blocos. */
.filme-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    transition: transform 0.25s;
}

.filme-card-arte {
    position: relative;
    display: block;
    /* 280,664 x 410,827 = 0,6832, a proporção exata do cartaz do Velox. */
    aspect-ratio: 280.664 / 410.827;
    overflow: hidden;
    background: var(--cor-fundo-cartao);
    border-radius: var(--raio-cartao) var(--raio-cartao) 0 0;
    box-shadow: inset 0 0 0 0 var(--cor-acao);
    transition: box-shadow 0.25s;
}

.filme-card-cartaz {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.filme-card:hover .filme-card-cartaz {
    transform: scale(1.03);
}

/* O retorno do hover era fraco demais — um zoom de 3% no cartaz e mais nada. O
   card inteiro reage agora: sobe 4px, o corpo clareia de #262626 para #3a3a3a e
   a arte ganha o contorno vermelho da marca por dentro. */
.filme-card:hover {
    color: inherit;
    transform: translateY(-4px);
}

.filme-card:hover .filme-card-corpo,
.filme-card:focus-visible .filme-card-corpo {
    background: #3a3a3a;
}

.filme-card:hover .filme-card-arte,
.filme-card:focus-visible .filme-card-arte {
    box-shadow: inset 0 0 0 3px var(--cor-acao);
}

/* Selo e tarja ficam sobre o pé do cartaz, um em cada canto, 12px acima da
   dobra do corpo. */
.filme-card-selo {
    position: absolute;
    left: 16px;
    bottom: 12px;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    background: var(--cor-acao);
    border-radius: var(--raio-pilula);
}

.filme-card-arte .classificacao {
    position: absolute;
    right: 8px;
    bottom: 12px;
}

.filme-card-corpo {
    display: flex;
    flex-direction: column;
    /* 6px e não os 16 do desenho. No Figma as caixas de texto vêm com
       `text-box-trim`, que corta o espaço acima e abaixo das letras: lá o título
       de duas linhas ocupa 39px, aqui 48. Mantendo o gap em 16 o corpo passaria
       de 91 para 107 e a diferença apareceria na fileira inteira, porque o
       card mais alto puxa os outros. Com 6 o corpo fecha em 97. */
    gap: 6px;
    flex: 1 1 auto;
    justify-content: center;
    /* 91px é a altura do corpo no desenho; min-height em vez de height porque
       título de duas linhas passa disso e cortar título é pior que crescer. */
    min-height: 91px;
    padding: 13px 16px;
    /* #262626 e não o #1b1b1b do desenho: o card fica sobre um fundo #010101 e a
       diferença de 10% de luminância entre eles quase não se via — a fita lia
       como um bloco só. Com este cinza o corpo de cada card se separa do fundo,
       e sobra contraste para o hover clarear mais ainda. */
    background: #262626;
    border-radius: 0 0 var(--raio-cartao) var(--raio-cartao);
    transition: background-color 0.25s;
}

.filme-card-titulo {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.filme-card:hover .filme-card-titulo {
    color: var(--cor-marca-clara);
}

.filme-card-meta {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
}

.filme-card:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    border-radius: var(--raio-cartao);
}

/* A nota de rodapé da vitrine, centralizada: 16px, as duas linhas do desenho. */
.vitrine-nota {
    margin: 1.75rem auto 0;
    max-width: 52rem;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
    text-align: center;
}

/* Em telas menores o card encolhe por porcentagem e as setas somem: quem está no
   celular arrasta. */
@media (max-width: 63.99rem) {
    .secao-setas {
        display: none;
    }

    /* Dois cards por vez, não um e um pedaço. Com 70vw cabia um só, e a fita
       parecia uma pilha vertical disfarçada — o gesto de arrastar não tinha para
       onde ir. Dividindo a largura útil ao meio, descontado o vão, entram dois
       inteiros e o terceiro assoma na borda, que é o que convida a arrastar. */
    .carrossel-item {
        width: calc((100% - var(--card-gap)) / 2);
    }

    /* O card cai para ~171px: o título em 20px quebrava em quatro linhas. */
    .filme-card-titulo {
        font-size: 1rem;
    }

    .filme-card-meta {
        font-size: 0.8125rem;
    }

    .filme-card-corpo {
        min-height: 76px;
        padding: 10px 12px;
    }

    .filme-card-selo {
        left: 8px;
        padding: 5px 9px;
        font-size: 12px;
    }

    .secao-cabecalho .secao-titulo {
        font-size: 1.75rem;
    }
}

/* --------------------------------------------------------------------------
   Quarta Maluca

   A faixa da promoção fixa da casa: 1172x185, vinho, com o letreiro à esquerda e
   o cartão do preço à direita.
   -------------------------------------------------------------------------- */

.promo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    /* Já está dentro de uma .secao-home, que é quem trava os 1172. */
    max-width: 100%;
    /* 64px de recuo interno à esquerda: no desenho a faixa começa em x=53 e o
       letreiro em 117. */
    margin: 0 auto;
    padding: 1.5rem 4rem;
    min-height: 185px;
    background: var(--cor-vinho);
    border-radius: var(--raio-cartao);
}

.promo-texto {
    min-width: 0;
}

/* Poppins ExtraBold 48px é o único lugar do site com esta fonte — e ela tem um
   brilho branco de 11,5px por trás, que é o que dá o ar de letreiro. */
.promo-titulo {
    margin: 0;
    font-family: Poppins, var(--fonte);
    font-size: 48px;
    font-weight: 800;
    line-height: 64px;
    color: #fff;
    text-shadow: 0 0 11.5px rgb(255 255 255 / 0.39);
}

.promo-chamada {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: #fff;
}

/* O cartão claro do preço: 408x124, com o preço à esquerda e as condições à
   direita, separados por uma linha tracejada vertical. */
.promo-cartao {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 23px;
    width: 408px;
    max-width: 100%;
    min-height: 124px;
    padding: 0 25px;
    background: #d9d9d9;
    border-radius: 13px;
}

.promo-preco {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin: 0;
    color: var(--cor-vinho);
}

.promo-moeda {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

/* 96px no eixo condensado da Mona Sans (wdth 75) — é o "Mona Sans Condensed
   ExtraBold" do Figma, sem baixar uma segunda família só para dois dígitos. */
/* Sem tabular-nums: os algarismos tabulares têm avanço fixo e ignoram o eixo de
   largura — o "18" saía com 92px em vez dos 81 do desenho, ou seja o condensado
   não chegava a acontecer. Aqui não há coluna de números para alinhar, é um
   preço só. */
.promo-valor {
    font-size: 96px;
    font-weight: 800;
    line-height: 1;
    font-stretch: 75%;
    font-variation-settings: "wdth" 75;
}

/* A linha tracejada que separa o preço das condições: 3px, tracejo 8/8, vinho. */
.promo-detalhe {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 23px;
    border-left: 3px dashed var(--cor-vinho);
}

.promo-quando {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cor-vinho);
}

/* A ressalva é preta e não vinho: é assim no desenho, e o preto separa a letra
   miúda da informação que vende. */
.promo-ressalva {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    color: #000;
}

@media (max-width: 63.99rem) {
    .promo {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        padding: 1.5rem 1.25rem;
    }

    .promo-titulo {
        font-size: clamp(2rem, 9vw, 3rem);
        line-height: 1.15;
    }

    .promo-chamada {
        font-size: 1rem;
    }

    .promo-cartao {
        width: 100%;
        gap: 1rem;
        padding: 1rem;
    }

    .promo-valor {
        font-size: 4rem;
    }
}

/* --------------------------------------------------------------------------
   Contatos

   Duas metades coladas: o cartão vinho com endereço e telefone à esquerda, o
   mapa à direita. 619 + 552 = 1171, praticamente os 1172 do container — não há
   vão entre elas no desenho.
   -------------------------------------------------------------------------- */

.contatos {
    display: grid;
    grid-template-columns: 619fr 552fr;
    max-width: 100%;
    margin: 0 auto;
    min-height: 371px;
    border-radius: var(--raio-cartao);
    overflow: hidden;
}

.contatos-cartao {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 2.5rem 2.875rem;
    background: var(--cor-vinho);
}

.contatos-titulo {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.contatos-chamada {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
}

.contatos-lista {
    display: grid;
    gap: 21px;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.contatos-lista li {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
}

/* O ícone vem em círculo branco com o glifo em vinho — invertido em relação ao
   cartão. É o que o Figma traz, e é o que o faz aparecer sobre o vermelho. */
.contatos-icone {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 43.5px;
    height: 43px;
    color: var(--cor-vinho);
    background: #fff;
    border-radius: 50%;
}

/* <address> vem em itálico por padrão do navegador. Vale para o rodapé também,
   por isso a regra é solta e não aninhada no bloco de contatos. */
.endereco {
    font-style: normal;
    line-height: 1.6;
}

.contatos-lista .endereco {
    line-height: 1.2;
}

/* O iframe do Google Maps traz centenas de KB e vários requests de terceiro, e
   por isso ele só entra depois do clique. A altura fica reservada desde o
   começo: sem isso, carregar o mapa empurra o conteúdo e conta como layout
   shift. */
.mapa {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.5rem;
    min-height: 13rem;
    padding: 1rem;
    background: var(--cor-fundo-secao);
}

.mapa-botao {
    padding: 0.75rem 1.5rem;
    font: inherit;
    font-weight: 700;
    color: #fff;
    background: var(--cor-marca);
    border: 0;
    border-radius: var(--raio-pilula);
    cursor: pointer;
    min-height: 2.75rem;
}

.mapa-botao:hover,
.mapa-botao:focus-visible {
    background: var(--cor-marca-clara);
}

.mapa-aviso {
    margin: 0;
    font-size: 0.75rem;
    text-align: center;
}

.mapa iframe {
    width: 100%;
    height: 18rem;
    border: 0;
}

.contatos-lista a {
    color: #fff;
}

.contatos-lista a:hover {
    color: #fff;
    text-decoration: underline;
}

.contatos-acoes {
    margin: 0.75rem 0 0;
}

/* O botão de rota, claro sobre o vinho: vermelho sobre vermelho sumiria.

   `.botao.botao-claro` e não `.botao-claro`: a regra genérica `.botao`, na seção
   das páginas internas, pinta todos os botões do vermelho de ação. Com uma
   classe só ela vencia por vir depois no arquivo, e o "Traçar rota" aparecia
   vermelho em cima do cartão vinho. Mesmo caso do "Assistir Trailer". */
.botao.botao-claro {
    color: var(--cor-vinho);
    background: #fff;
}

.botao.botao-claro:hover,
.botao.botao-claro:focus-visible {
    color: var(--cor-vinho);
    background: #f0e2e2;
}

/* A metade do mapa perde a borda tracejada e o fundo de placeholder: aqui ela é
   uma das duas metades de um bloco fechado, não uma caixa solta na página.

   Sem padding: com 1rem em volta, o mapa ficava uma ilha menor dentro da
   metade, com uma moldura escura de 16px em volta — no protótipo ele vai de
   borda a borda. O recuo só existia para o botão "Carregar mapa", que hoje é
   estado passageiro (o mapa entra sozinho ao chegar na tela) e já é centralizado
   pelo `place-items`. */
.contatos .mapa {
    height: 100%;
    min-height: 371px;
    padding: 0;
    background: var(--cor-fundo-secao);
    border: 0;
    border-radius: 0;
    /* `stretch` e não o `center` do mapa genérico: com os itens centralizados, o
       iframe ficava do tamanho mínimo dele — 371px numa metade de 418 — e sobrava
       uma faixa escura em cima e embaixo. No protótipo o mapa vai de borda a
       borda da metade.

       A linha precisa ser `1fr` explícita: em linha automática o `height: 100%`
       do iframe não tem contra o que resolver e ele cai nos 150px que o
       navegador dá a iframe sem altura. */
    grid-template-rows: 1fr;
    place-items: stretch;
}

/* O botão e o aviso continuam centralizados: eles são o estado de antes do mapa
   entrar, e esticar um botão de ponta a ponta não faria sentido. */
.contatos .mapa .mapa-botao,
.contatos .mapa .mapa-aviso {
    place-self: center;
}

.contatos .mapa iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
}

@media (max-width: 63.99rem) {
    .contatos {
        grid-template-columns: 1fr;
    }

    .contatos-cartao {
        padding: 1.75rem 1.25rem;
    }

    .contatos-titulo {
        font-size: 1.75rem;
    }

    .contatos-chamada,
    .contatos-lista li {
        font-size: 1rem;
    }

    .contatos .mapa,
    .contatos .mapa iframe {
        min-height: 16rem;
    }
}

/* --------------------------------------------------------------------------
   Modal do trailer

   <dialog> nativo: foco preso, Esc fechando e leitor de tela anunciando modal
   sem uma linha de JS para isso. O iframe é montado no clique e destruído ao
   fechar — quem nunca clica não paga nada de YouTube.
   -------------------------------------------------------------------------- */

.trailer-modal {
    width: min(90vw, 64rem);
    padding: 0;
    color: #fff;
    background: #000;
    border: 0;
    border-radius: var(--raio-cartao);
    overflow: visible;
}

.trailer-modal::backdrop {
    background: rgb(0 0 0 / 0.8);
}

.trailer-quadro {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--raio-cartao);
}

.trailer-quadro iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Fora da moldura no desktop, para não cobrir o vídeo; dentro dela quando não há
   margem de sobra. */
.trailer-fechar {
    position: absolute;
    top: -3rem;
    right: 0;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: #fff;
    background: rgb(255 255 255 / 0.12);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.trailer-fechar:hover,
.trailer-fechar:focus-visible {
    background: var(--cor-acao);
}

@media (max-width: 47.99rem) {
    .trailer-fechar {
        top: 0.5rem;
        right: 0.5rem;
        background: rgb(0 0 0 / 0.6);
    }
}

/* --------------------------------------------------------------------------
   Animações de entrada

   Uma regra só, aplicada por um atributo que o JS liga quando o elemento chega
   perto da dobra. Nada de biblioteca: são 20 linhas de CSS e um
   IntersectionObserver.

   O estado inicial só existe quando o JS está presente (`js` no <html>). Sem
   isso, quem tem JavaScript desligado ficaria com a página inteira invisível —
   o modo de falha mais caro possível para um site cuja função é informar
   horário de sessão.
   -------------------------------------------------------------------------- */

.js [data-entra] {
    opacity: 0;
    transform: translateY(18px);
}

.js [data-entra].entrou {
    opacity: 1;
    transform: none;
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}

/* Escalonamento: dentro de uma fileira, cada item entra 70ms depois do anterior.
   Mais que isso vira espera; menos, e a fileira parece entrar de uma vez só. */
.js [data-entra][style*="--atraso"] {
    transition-delay: var(--atraso);
}

/* O hero não entra por scroll — ele já está na tela quando a página abre. As
   camadas dele sobem em sequência logo depois da primeira pintura. */
.js .hero-texto > * {
    animation: sobe-hero 0.6s ease-out backwards;
}

.js .hero-texto > *:nth-child(1) { animation-delay: 0.10s; }
.js .hero-texto > *:nth-child(2) { animation-delay: 0.18s; }
.js .hero-texto > *:nth-child(3) { animation-delay: 0.26s; }
.js .hero-texto > *:nth-child(4) { animation-delay: 0.34s; }

@keyframes sobe-hero {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* O painel de cartazes desliza da direita, de onde ele sangra. */
.js .hero-painel {
    animation: entra-painel 0.7s ease-out 0.25s backwards;
}

@keyframes entra-painel {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: none; }
}

/* Quem pediu menos movimento no sistema recebe a página montada, sem transição
   nenhuma — inclusive as de entrada, que são as mais incômodas para quem tem
   sensibilidade vestibular. */
@media (prefers-reduced-motion: reduce) {
    .js [data-entra],
    .js [data-entra].entrou {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .js .hero-texto > *,
    .js .hero-painel {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   Página de filme

   Trailer no topo em largura total, ficha embaixo e a grade de horários por dia
   como conteúdo principal — o layout que o site antigo tinha, com os elementos
   do desenho novo.
   -------------------------------------------------------------------------- */

/* 16/9 e largura total. A capa é a mesma do hero (maxresdefault, 1280x720), e o
   degradê no pé costura o vídeo com o preto da página. */
/* Faixa, não bloco 16/9. Em 1920x1080 o trailer em proporção cheia dava 1080px
   de altura e tomava a tela inteira: quem abria a página do filme via só o
   vídeo, e nada do que foi ali buscar.

   40vh é o teto, e a altura é essa mesma — não `aspect-ratio` com max-height,
   que quebraria a proporção em vez de cortar. Quem corta é o `object-fit:
   cover` da capa e o transbordo do iframe: a faixa mostra a parte do meio do
   quadro, que é onde a ação está. */
.filme-trailer {
    position: relative;
    width: 100%;
    height: 40vh;
    min-height: 15rem;
    overflow: hidden;
    background: #000;
}

.filme-trailer-capa {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* O vídeo de fundo é o mesmo componente do hero, com a mesma revelação por
   estado do player e o mesmo transbordo para cobrir sem barra preta. Não há
   override de tamanho aqui de propósito: numa faixa de 40vh, um iframe de 16/9
   ajustado à caixa apareceria letterboxado: são as regras de `.hero-video
   iframe` que fazem ele crescer e ser cortado. */

.filme-trailer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgb(0 0 0 / 0.45) 0%,
        rgb(0 0 0 / 0) 32%,
        rgb(0 0 0 / 0.15) 62%,
        rgb(0 0 0 / 0.95) 100%);
}

/* O play é o único elemento clicável do bloco e ocupa o bloco inteiro: uma área
   de clique do tamanho do vídeo é o que a pessoa espera de um trailer parado. */
.filme-trailer-play {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0;
    font: inherit;
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    background: none;
    border: 0;
    cursor: pointer;
}

.filme-trailer-play-glifo {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    background: var(--cor-acao);
    border-radius: 50%;
    transition: transform 0.25s, background-color 0.25s;
}

.filme-trailer-play:hover .filme-trailer-play-glifo,
.filme-trailer-play:focus-visible .filme-trailer-play-glifo {
    transform: scale(1.08);
    background: #cf1f16;
}

/* O bloco de ficha sobe sobre o pé do trailer, para os dois lerem como um só. */
.filme {
    position: relative;
    z-index: 3;
    max-width: calc(var(--largura-home) + 2rem);
    margin: 0 auto;
    padding: 2rem 1rem 0;
}

.filme-trailer + .filme {
    margin-top: -4rem;
}

.filme-topo {
    display: grid;
    gap: 1.5rem;
}

.filme-cartaz {
    width: 11rem;
    aspect-ratio: 289 / 422;
    object-fit: cover;
    border-radius: var(--raio-cartao);
    background: var(--cor-fundo-cartao);
}

.filme-selos {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 0.75rem;
}

.filme-selo {
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    background: var(--cor-acao);
    border-radius: var(--raio-pilula);
}

.filme-selo-encerrado {
    color: var(--cor-texto);
    background: var(--cor-carvao);
}

/* Entre a tarja do card (32px) e a do hero (42px). */
.classificacao-media {
    width: 38px;
    height: 38px;
    font-size: 18px;
    border-radius: 10px;
}

.filme-titulo {
    margin: 0 0 0.75rem;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
}

.filme-sinopse {
    max-width: 46rem;
    margin: 0 0 1.5rem;
    font-family: var(--fonte-texto);
    font-size: 1rem;
    line-height: 1.6;
    color: #d6d6d9;
}

/* Ficha em colunas automáticas: com cinco linhas, uma lista vertical desperdiça
   a largura que o bloco tem. */
.filme-ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.875rem 1.5rem;
    margin: 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--cor-borda);
}

.filme-ficha-item dt {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cor-texto);
}

.filme-ficha-item dd {
    margin: 0.25rem 0 0;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
}

/* --------------------------------------------------------------------------
   Grade de horários por dia
   -------------------------------------------------------------------------- */

.filme-sessoes {
    padding: 2.5rem 0 0;
}

.filme-sessoes-titulo {
    margin: 0 0 1.5rem;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
}

/* Colunas automáticas, largura toda: sete dias em coluna única davam uma página
   de rolagem enorme para sete horários.

   20rem e não 18: com 18 cabiam quatro colunas de 287px, e dentro delas a pílula
   "20:20 · 2D · DUBLADO · ÚLTIMOS LUGARES" passava dos 247px úteis e quebrava,
   deixando aquela sessão mais alta que as vizinhas. Com 20rem são três colunas
   de ~380px e a linha fecha inteira. */
.grade-horarios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1rem;
    margin: 0;
}

.grade-dia {
    padding: 1.125rem 1.25rem;
    background: var(--cor-carvao);
    border-radius: var(--raio-cartao);
}

.grade-dia + .grade-dia {
    margin-top: 0;
}

/* O rótulo do dia em vermelho e caixa alta, como no print. */
.grade-data {
    margin: 0 0 0.125rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--cor-acao);
}

.grade-sala + .grade-sala {
    margin-top: 0.875rem;
}

.sala-nome {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
    color: var(--cor-texto);
}

/* Empilhadas e da largura do cartão, não lado a lado sob medida: pílulas de
   larguras diferentes numa coluna estreita ficavam com a borda direita
   serrilhada, e o alvo de clique de cada sessão variava de tamanho sem motivo. */
.sessoes {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin-top: 0;
}

/* A pílula do print: hora grande à esquerda, selos ao lado dela, e o aviso de
   escassez empurrado para a ponta direita. */
.sessao {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    color: #fff;
    background: #000;
    border: 1px solid #333;
    border-radius: var(--raio-pilula);
    min-height: 3rem;
    transition: background-color 0.2s, border-color 0.2s;
}

.sessao:hover,
.sessao:focus-visible {
    color: #fff;
    background: var(--cor-acao);
    border-color: var(--cor-acao);
}

.sessao-hora {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.badge {
    padding: 0.1875rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #cfcfd4;
    border: 1px solid #3a3a3e;
    border-radius: var(--raio-pilula);
}

.sessao:hover .badge,
.sessao:focus-visible .badge {
    color: #fff;
    border-color: rgb(255 255 255 / 0.7);
}

/* Cores por significado, não por decoração.

   3D é a ciano-e-magenta do óculos anaglífico — a associação mais imediata que
   existe para a palavra, e a que distingue de longe a sessão que custa mais
   caro. O 2D fica no cinza neutro de propósito: se os dois tivessem cor,
   nenhum se destacaria.

   Dublado e legendado são a escolha que mais faz alguém desistir na porta, e
   por isso ganham cor própria — verde para dublado, azul para legendado. */
/* O 3D vira o próprio óculos anaglífico: duas lentes, a vermelha e a ciano, com
   a ponte escura no meio. É a imagem que todo mundo associa a 3D sem precisar
   ler, e resolve o problema de contraste de tabela: a cor fica no glifo, e o
   texto continua branco sobre fundo escuro.

   A versão anterior era o texto em ciano com uma sombra magenta — imitava a
   franja do anaglifo, mas de perto lia como texto mal renderizado. */
.badge-3d {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    border-color: rgb(255 255 255 / 0.28);
    background: rgb(0 0 0 / 0.55);
}

.badge-3d::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 9px;
    /* Lente esquerda vermelha, ponte, lente direita ciano. */
    background: linear-gradient(90deg,
        #ff2f3a 0 44%,
        rgb(255 255 255 / 0.35) 44% 56%,
        #12c6e8 56% 100%);
    border-radius: 3px;
}

.sessao:hover .badge-3d::before,
.sessao:focus-visible .badge-3d::before {
    /* No hover a pílula fica vermelha; a lente vermelha sumiria nela. */
    background: linear-gradient(90deg,
        #ffd0d3 0 44%,
        rgb(255 255 255 / 0.6) 44% 56%,
        #9fe9f7 56% 100%);
}

.badge-dublado {
    color: #4ade80;
    border-color: rgb(74 222 128 / 0.45);
    background: rgb(74 222 128 / 0.1);
}

.badge-legendado {
    color: #93b4ff;
    border-color: rgb(147 180 255 / 0.45);
    background: rgb(147 180 255 / 0.1);
}

/* No hover a pílula inteira fica vermelha; os badges viram contorno branco para
   não brigarem com o fundo. */
.sessao:hover .badge-3d,
.sessao:hover .badge-dublado,
.sessao:hover .badge-legendado,
.sessao:focus-visible .badge-3d,
.sessao:focus-visible .badge-dublado,
.sessao:focus-visible .badge-legendado {
    color: #fff;
    background: rgb(255 255 255 / 0.16);
    border-color: rgb(255 255 255 / 0.7);
    text-shadow: none;
}

/* Aviso de escassez: âmbar cheio, que é a cor de "corre". Fundo sólido e não
   contorno — é o único elemento da pílula que precisa ser visto antes do
   horário. Texto escuro porque branco sobre âmbar dá 1,9:1. */
/* margin-left: auto encosta o aviso na ponta direita da pílula, e o nowrap
   impede que ele se parta em duas linhas dentro dela. */
.sessao-aviso {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0.1875rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-radius: var(--raio-pilula);
}

/* Os selos de formato e áudio não encolhem nem se partem: eles são curtos, e
   quem tem de ceder espaço é o vão entre eles e o aviso. */
.sessao .badge {
    flex: 0 0 auto;
    white-space: nowrap;
}

.sessao-ultimos {
    color: #241c00;
    background: var(--cor-amarelo);
}

/* Esgotada não é urgência, é porta fechada: cinza, sem convite. */
.sessao-esgotada {
    color: #d6d6d9;
    background: #3a3a3e;
}

.sessao:hover .sessao-ultimos,
.sessao:focus-visible .sessao-ultimos {
    color: #241c00;
    background: #ffd84d;
}

.filme-nota {
    margin-top: 1.5rem;
    font-size: 0.875rem;
}

@media (min-width: 48rem) {
    .filme-topo {
        grid-template-columns: 17rem 1fr;
        align-items: start;
    }

    .filme-cartaz {
        width: 100%;
    }
}

@media (max-width: 47.99rem) {
    /* Em 390px a pílula tem 318px úteis e o conteúdo pedia 332: os selos
       vazavam 14px para fora da borda arredondada. Apertar os vãos e o recuo
       interno devolve 18px e a linha volta a caber inteira, sem encurtar
       "Últimos lugares" — que é justamente o texto que precisa ser lido. */
    .sessao {
        gap: 0.375rem;
        padding: 0.625rem 0.75rem;
    }

    .sessao-aviso {
        padding: 0.1875rem 0.375rem;
        letter-spacing: 0;
    }

    .filme-trailer + .filme {
        margin-top: -2rem;
    }

    .filme-trailer-play-glifo {
        width: 3.5rem;
        height: 3.5rem;
    }

    .filme-trailer-play {
        font-size: 1rem;
    }

    .filme-sessoes-titulo {
        font-size: 1.75rem;
    }
}

/* --------------------------------------------------------------------------
   Páginas internas — preços, dúvidas, eventos e +CineMar

   O Figma cobre só a home. Estas páginas ganham a mesma linguagem: container de
   1172, título à esquerda em Mona Sans bold com o traço vermelho curto, e
   cartões no cinza #262626 com raio de 16 — os mesmos do card de filme.

   O padrão antigo (título fino 42px centralizado, com o divisor de 145,6px
   embaixo) vinha do tema WordPress. Ele sai daqui; o que fica dele é o traço
   vermelho, agora curto e ao lado do texto, como na vitrine.
   -------------------------------------------------------------------------- */

.secao {
    max-width: calc(var(--largura-home) + 2rem);
    padding: 3rem 1rem;
}

/* A página interna não tem hero: o primeiro título precisa de ar embaixo do
   cabeçalho fixo. */
.sem-hero .secao:first-of-type {
    padding-top: 2.5rem;
}

/* "Estreita" limita a MEDIDA do texto, não o container. Limitando o container, a
   seção estreita se recentralizava e a margem esquerda dela não batia com a da
   seção larga acima — em /eventos-cinemar o título ficava em x=373 e o bloco
   seguinte em x=560, na mesma página. */
.secao-estreita > * {
    max-width: 50rem;
}

.secao-titulo {
    margin-bottom: 0.25rem;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    text-align: left;
}

/* Bloco, e não flex como na vitrine: aqui o subtítulo é uma frase inteira e
   quebra em duas linhas. Em flex o traço ia parar no fim da linha, colado na
   margem direita e sem relação visível com o título. */
.secao-apoio {
    display: block;
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    color: #d6d6d9;
    text-align: left;
}

/* O traço curto do desenho, no lugar do divisor centralizado de 145,6px. Vai
   depois do subtítulo quando ele existe, e depois do próprio título quando não —
   o :not(:has()) evita que as duas regras disparem juntas e desenhem dois. */
.secao-apoio::after,
.secao-titulo:not(:has(+ .secao-apoio))::after {
    content: "";
    display: block;
    width: 67px;
    height: 2px;
    margin: 0.875rem 0 1.75rem;
    background: var(--cor-acao);
}

/* --------------------------------------------------------------------------
   Dúvidas frequentes
   -------------------------------------------------------------------------- */

.faq {
    gap: 0.75rem;
}

.faq-item {
    padding: 0;
    background: #262626;
    border: 0;
    border-radius: var(--raio-cartao);
    overflow: hidden;
    transition: background-color 0.2s;
}

.faq-item[open] {
    background: #2f2f2f;
}

.faq-pergunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #fff;
}

/* A seta é do CSS e não do HTML: um marcador que gira já diz "abre e fecha",
   e assim nenhuma página precisa repetir o ícone em cada pergunta. */
.faq-pergunta::marker,
.faq-pergunta::-webkit-details-marker {
    content: "";
    display: none;
}

.faq-pergunta::after {
    content: "";
    flex: 0 0 auto;
    width: 0.625rem;
    height: 0.625rem;
    border-right: 2px solid var(--cor-acao);
    border-bottom: 2px solid var(--cor-acao);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s;
}

.faq-item[open] .faq-pergunta::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.faq-resposta {
    padding: 0 1.25rem 1.25rem;
}

.faq-resposta p {
    margin: 0;
    font-family: var(--fonte-texto);
    line-height: 1.65;
    color: #c9c9cf;
}

/* --------------------------------------------------------------------------
   Preços
   -------------------------------------------------------------------------- */

.precos-colunas {
    gap: 1rem;
    margin-top: 2rem;
}

/* Cada coluna vira um cartão, como os da home. Antes eram duas listas soltas
   sobre o preto, sem nada que dissesse onde uma acabava e a outra começava. */
.precos-bloco {
    padding: 1.75rem 1.5rem;
    background: #262626;
    border-radius: var(--raio-cartao);
}

.precos-titulo {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: left;
}

.precos-tipos {
    gap: 1.25rem;
}

.precos-tipo {
    text-align: left;
}

.precos-tipo-nome {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cor-acao);
}

.precos-linha,
.precos-lista li {
    color: #d6d6d9;
}

.precos-linha strong,
.precos-lista strong {
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.precos-nota {
    margin-top: 2rem;
    text-align: left;
}

/* --------------------------------------------------------------------------
   Eventos
   -------------------------------------------------------------------------- */

.evento {
    padding: 1rem;
    background: #262626;
    border: 0;
    border-radius: var(--raio-cartao);
}

.evento-imagem {
    border-radius: 12px;
}

.evento-titulo {
    font-size: 1.25rem;
    font-weight: 600;
}

.evento-data {
    font-weight: 700;
    color: var(--cor-acao);
}

.evento-texto {
    font-family: var(--fonte-texto);
    line-height: 1.6;
    color: #c9c9cf;
}

/* --------------------------------------------------------------------------
   +CineMar — fita de serviços, missão/visão/valores, listas de texto corrido
   -------------------------------------------------------------------------- */

/* A fita reusa .carrossel e .carrossel-item da vitrine, e com eles o JS de
   main.js inteiro — setas, arrasto, snap e ponta desabilitada. O que muda aqui é
   só a largura do card: a arte do serviço é 385x747 (0,5154 de proporção) contra
   0,683 do cartaz de filme, quase o dobro de alto para a mesma largura.

   320px e não os 385 nativos: em 385 o card fica com 747 de altura e, numa janela
   de 900, não sobra espaço para o cabeçalho de 88px mais o título da seção — a
   fita nasceria cortada. Em 320 a altura cai para 621, e ainda é maior que os
   288x559 em que o site atual exibe a mesma arte: reduz menos, sai mais nítida. */
.carrossel-servicos {
    --servico-largura: 320px;
}

/* Dois seletores de classe, então esta regra vence a de dois-cards-por-vez do
   celular (.carrossel-item, um só) sem depender de vir depois no arquivo. */
.carrossel-servicos .carrossel-item {
    width: var(--servico-largura);
}

.servico-card {
    display: block;
    overflow: hidden;
    /* A proporção do próprio JPG: não há recorte nem esticamento. */
    aspect-ratio: 385 / 747;
    background: var(--cor-fundo-cartao);
    border-radius: var(--raio-cartao);
    box-shadow: inset 0 0 0 0 var(--cor-acao);
    transition: box-shadow 0.25s;
}

.servico-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

/* O mesmo retorno do card de filme: anel vermelho e um zoom curto. O card leva
   para o WhatsApp e precisa se anunciar como clicável — no site atual ele não dá
   retorno nenhum, e nada ali diz que a arte é um link. */
.servico-card:hover,
.servico-card:focus-visible {
    box-shadow: inset 0 0 0 2px var(--cor-acao);
}

.servico-card:hover img {
    transform: scale(1.03);
}

/* Missão, visão e valores em três colunas, como no site atual: selo redondo
   vermelho, título, traço curto e o texto. */
.secao-mvv {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    align-items: start;
}

.mvv-selo {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 0.875rem;
    color: #fff;
    background: var(--cor-acao);
    border-radius: 50%;
}

.mvv-titulo {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.15;
}

.mvv-titulo::after {
    content: "";
    display: block;
    width: 67px;
    height: 2px;
    margin: 0.75rem 0 1.25rem;
    background: var(--cor-acao);
}

.secao-mvv p {
    margin: 0;
    font-family: var(--fonte-texto);
    line-height: 1.7;
    color: #c9c9cf;
}

@media (max-width: 63.99rem) {
    /* Um card inteiro com o próximo assomando na borda. Em dois por vez — a regra
       da vitrine — o card cai para ~175px e o texto que está desenhado dentro do
       JPG fica ilegível; o site atual mostra um por vez, em largura cheia. */
    .carrossel-servicos {
        --servico-largura: min(340px, 82vw);
    }

    .secao-mvv {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.lista-simples {
    padding-left: 1.125rem;
    font-family: var(--fonte-texto);
    line-height: 1.7;
    color: #c9c9cf;
}

.lista-simples li {
    margin-bottom: 0.375rem;
}

.lista-simples strong {
    color: #fff;
}

/* O botão principal do site passa a ser o vermelho de ação do desenho. */
.botao {
    background: var(--cor-acao);
    font-weight: 700;
    border-radius: var(--raio-pilula);
}

.botao:hover,
.botao:focus-visible {
    background: #cf1f16;
}

.acao-central {
    text-align: left;
}

/* --------------------------------------------------------------------------
   Tabela de preços
   -------------------------------------------------------------------------- */

.tabela-precos th,
.tabela-precos td {
    border-bottom: 1px solid #2f2f33;
}

.tabela-precos thead th {
    color: var(--cor-acao);
}

/* --------------------------------------------------------------------------
   Tag da Quarta Maluca no card

   Fica sempre no HTML e só aparece às quartas, quando o <body> ganha a classe
   `e-quarta`. É isso que permite ao partial gerado pelo sync não congelar o dia
   da semana em que foi escrito.

   No canto superior direito do cartaz, oposto ao selo de estreia — que fica no
   pé, à esquerda. Um filme nunca tem os dois: a promoção exclui justamente
   estreia e semana de estreia.
   -------------------------------------------------------------------------- */

.filme-card-promo {
    display: none;
}

body.e-quarta .filme-card-promo {
    position: absolute;
    top: 12px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: calc(100% - 16px);
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    /* O amarelo com texto escuro é o mesmo par de "Últimos lugares": os dois
       dizem "corre que é agora". Amarelo sobre o vinho da faixa da promoção
       também é o contraste que ela usa. */
    color: #241c00;
    background: var(--cor-amarelo);
    border-radius: var(--raio-pilula);
    white-space: nowrap;
}

/* Impressão: nada de entrada por scroll.
   As animações deixam o elemento em `opacity: 0` até o IntersectionObserver
   revelá-lo. Ao imprimir, o que nunca passou pela dobra sairia em branco — uma
   folha com o cabeçalho e um vazio no lugar dos horários. */
@media print {
    .js [data-entra],
    .js [data-entra].entrou {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .js .hero-texto > *,
    .js .hero-painel {
        animation: none !important;
    }
}

/* ==========================================================================
   Celular — o desenho "CineMar Mobile"

   Segundo desenho, só para telas pequenas. O layout do Figma de desktop
   continua valendo acima de 1024px; tudo aqui está dentro da media query e não
   toca nele.

   O que veio de lá: hero de 560px com o degradê fechando em preto, a linha de
   ficha acima do título, os tracinhos de progresso, cards de 214px com o selo
   no alto à esquerda, o traço vermelho que se estica até a margem, a gaveta
   sobreposta, a Quarta Maluca em duas linhas e o bloco de contatos com o mapa
   como cartão separado.
   ========================================================================== */

@media (max-width: 63.99rem) {

    /* --- Hero -------------------------------------------------------------- */

    /* 560px fixos, e não uma fração da altura da janela. Em `min(62vh, 30rem)` o
       hero mudava de tamanho entre um celular e outro — e, no Safari do iPhone,
       mudava sozinho quando a barra de endereço encolhe ao rolar. */
    .hero {
        height: 560px;
        min-height: 0;
    }

    /* O degradê escurece as duas pontas e fecha em preto puro: em cima porque o
       cabeçalho flutua ali, embaixo porque é onde mora o texto — e o preto do
       fim costura o hero com o corpo da página, sem a linha de corte que uma
       imagem cortada deixa. */
    .hero-sombra {
        background: linear-gradient(180deg,
            rgb(0 0 0 / 0.72) 0%,
            rgb(0 0 0 / 0.15) 34%,
            rgb(0 0 0 / 0.82) 72%,
            #000 100%);
    }

    /* 43px = os 26 do desenho mais a altura dos tracinhos e o vão entre eles e
       os botões. Os tracinhos são irmãos dos slides, não filhos — eles valem
       para o hero inteiro — então não entram na coluna do texto e o espaço
       deles precisa ser reservado aqui. */
    .hero-conteudo {
        left: 20px;
        right: 20px;
        bottom: 43px;
        width: auto;
    }

    .hero-texto {
        gap: 14px;
    }

    /* A linha de ficha substitui o selo: "12 · Ação · 145min · Estreia" diz numa
       linha o que antes ocupava duas — a pílula vermelha e a tarja da linha de
       ações. */
    .hero-selo {
        display: none;
    }

    .hero-ficha {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.08em;
        line-height: 1.2;
        text-transform: uppercase;
        color: rgb(255 255 255 / 0.72);
    }

    .classificacao-ficha {
        width: 34px;
        height: 34px;
        font-size: 17px;
        border-radius: 9px;
    }

    .hero-titulo {
        font-size: 34px;
        line-height: 1.02;
        font-weight: 800;
        letter-spacing: -0.02em;
    }

    /* A sinopse volta: com 560px de hero há espaço para quatro linhas, e era a
       primeira coisa que o visitante lia sobre o filme. */
    .hero-sinopse {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 13.5px;
        line-height: 1.5;
        color: rgb(255 255 255 / 0.74);
    }

    /* "Ver sessões" ocupa a sobra e o trailer tem largura fixa: o botão que
       vende fica maior que o que entretém, e a linha não muda de proporção
       quando o título do filme muda. */
    .hero-acoes {
        gap: 10px;
        flex-wrap: nowrap;
    }

    .botao-acao {
        flex: 1 1 auto;
        justify-content: center;
        height: 50px;
        padding: 0 1rem;
        font-size: 15.5px;
        border-radius: 999px;
    }

    .botao.botao-vidro {
        flex: 0 0 auto;
        width: 132px;
        justify-content: center;
        height: 50px;
        padding: 0;
        font-size: 14.5px;
        border-radius: 999px;
        background: rgb(0 0 0 / 0.34);
        border: 1px solid rgb(255 255 255 / 0.28);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }

    /* A tarja da linha de ações sai: ela já está na linha de ficha. */
    .classificacao-grande {
        display: none;
    }

    /* Tracinhos de progresso no lugar das setas redondas: num hero de 390px as
       setas comiam espaço do título, e arrastar o dedo já troca de destaque. */
    .hero-controles {
        display: none;
    }

    .hero-pontos {
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 26px;
        z-index: 4;
        display: flex;
        justify-content: center;
        gap: 6px;
    }

    .hero-ponto {
        position: relative;
        width: 8px;
        height: 3px;
        padding: 0;
        border: 0;
        border-radius: 2px;
        background: rgb(255 255 255 / 0.3);
        cursor: pointer;
        transition: width 0.3s, background-color 0.3s;
    }

    .hero-ponto[aria-current="true"] {
        width: 22px;
        background: var(--cor-acao);
    }

    /* O alvo de toque é maior que o risco: 3px de altura seria impossível de
       acertar com o dedo. */
    .hero-ponto::after {
        content: "";
        position: absolute;
        inset: -14px -4px;
    }

    /* --- Vitrine ----------------------------------------------------------- */

    .secao-home {
        padding: 30px 0 0;
    }

    .secao-cabecalho {
        display: block;
        padding: 0 20px;
        margin-bottom: 0;
    }

    .secao-cabecalho .secao-titulo {
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    /* O traço vermelho se estica até a margem em vez de ter 67px fixos: numa
       tela estreita ele fecha a linha da data, e é o que dá a régua horizontal
       que o desenho usa para separar o cabeçalho da fita. */
    .secao-cabecalho .secao-apoio {
        gap: 12px;
        margin-top: 8px;
        font-size: 14px;
        color: rgb(255 255 255 / 0.68);
    }

    .secao-cabecalho .secao-apoio::after {
        flex: 1 1 auto;
        width: auto;
    }

    /* 214px: cabe um card e meio na tela de 390, então o segundo assoma na borda
       e convida a arrastar — sem virar dois cards espremidos, em que o cartaz
       fica menor que a arte impressa de um ingresso. */
    .carrossel {
        gap: 14px;
        padding: 18px 20px 4px;
        /* O snap alinha o item ao começo do scrollport e ignora o padding: sem
           isto o primeiro card encostava na borda da tela enquanto o título da
           seção, 20px adentro, ficava desalinhado dele. */
        scroll-padding-left: 20px;
    }

    .carrossel-item {
        width: 214px;
    }

    .filme-card-arte {
        aspect-ratio: 214 / 313;
    }

    /* O selo sobe para o alto à esquerda, onde não disputa espaço com a tarja. */
    .filme-card-selo {
        left: 12px;
        top: 12px;
        bottom: auto;
        height: 28px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        font-size: 12.5px;
    }

    .filme-card-arte .classificacao {
        right: 12px;
        bottom: 12px;
        width: 30px;
        height: 30px;
        font-size: 15px;
    }

    .filme-card-corpo {
        gap: 9px;
        min-height: 0;
        padding: 14px 14px 16px;
    }

    .filme-card-titulo {
        font-size: 17px;
        font-weight: 600;
        line-height: 1.2;
    }

    .filme-card-meta {
        font-size: 12.5px;
        color: rgb(255 255 255 / 0.6);
    }

    .vitrine-nota {
        margin: 14px 20px 0;
        font-size: 11.5px;
        line-height: 1.55;
        color: rgb(255 255 255 / 0.42);
        text-align: left;
    }

    /* --- Quarta Maluca ----------------------------------------------------- */

    .promo {
        margin: 30px 20px 0;
        padding: 24px 20px;
        gap: 18px;
        min-height: 0;
        border-radius: var(--raio-cartao);
    }

    /* Duas linhas: "QUARTA MALUCA!" em 32px não cabe em 350px de largura útil, e
       deixar o navegador quebrar sozinho punha o "!" na segunda linha. */
    .promo-titulo {
        font-size: 32px;
        line-height: 1.02;
        letter-spacing: -0.01em;
        max-width: 6ch;
    }

    .promo-chamada {
        font-size: 15px;
        line-height: 1.4;
        color: rgb(255 255 255 / 0.88);
    }

    .promo-cartao {
        gap: 16px;
        padding: 16px 18px;
        min-height: 0;
        border-radius: 13px;
    }

    .promo-preco {
        align-items: flex-start;
        gap: 3px;
    }

    .promo-moeda {
        margin-top: 9px;
        font-size: 17px;
    }

    .promo-valor {
        font-size: 66px;
        line-height: 0.86;
        letter-spacing: -0.03em;
    }

    /* Linha inteira e contínua, não tracejada: em 2px o tracejo vira poeira. */
    .promo-detalhe {
        align-self: stretch;
        padding-left: 16px;
        border-left: 2px solid var(--cor-vinho);
    }

    .promo-quando {
        font-size: 14.5px;
    }

    .promo-ressalva {
        font-size: 12px;
        line-height: 1.35;
        color: rgb(0 0 0 / 0.62);
    }

    /* --- Patrocinadores ---------------------------------------------------- */

    .patrocinadores {
        padding: 34px 20px 0;
    }

    .patrocinadores .secao-titulo-centro {
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    /* Fundo branco atrás de cada arte: metade dos banners é desenhada para fundo
       claro e sumia contra o preto da página. */
    .patrocinador {
        aspect-ratio: auto;
        height: 62px;
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
    }

    .patrocinador img {
        border-radius: 0;
    }

    /* --- Contatos ---------------------------------------------------------- */

    /* O mapa vira um cartão separado embaixo, não a segunda metade de um bloco:
       lado a lado em 390px sobrariam 175px para cada, e um mapa de 175px não
       mostra rua nenhuma. */
    /* A margem própria existe porque a .secao-home perde o recuo lateral no
       celular — é o que deixa a fita de cartazes sangrar até a borda. Quem não
       sangra precisa pedir o recuo de volta. */
    .contatos {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 4px 20px 0;
        min-height: 0;
        overflow: visible;
    }

    .contatos-cartao {
        gap: 20px;
        padding: 24px 20px;
        border-radius: var(--raio-cartao);
    }

    .contatos-titulo {
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    .contatos-chamada {
        font-size: 15.5px;
        font-weight: 600;
        line-height: 1.4;
        color: rgb(255 255 255 / 0.9);
    }

    .contatos-lista {
        gap: 14px;
        margin: 0;
    }

    .contatos-lista li {
        gap: 14px;
        font-size: 14.5px;
        line-height: 1.35;
    }

    .contatos-icone {
        width: 40px;
        height: 40px;
    }

    .contatos .mapa,
    .contatos .mapa iframe {
        height: 210px;
        min-height: 210px;
        border-radius: var(--raio-cartao);
    }

    .contatos .mapa {
        overflow: hidden;
    }

    /* O botão de rota sai: o mapa inteiro já leva ao mesmo lugar. */
    .contatos-acoes {
        display: none;
    }

    /* --- Gaveta do menu ---------------------------------------------------- */

    /* O .menu deixa de empurrar o cabeçalho para baixo e vira o escurecimento de
       tela inteira; quem recebe fundo e recuo é o .menu-painel. */
    .menu.aberto {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: block;
        background: rgb(0 0 0 / 0.6);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
    }

    .menu-painel {
        background: #101010;
        border-bottom: 1px solid rgb(255 255 255 / 0.1);
        padding: 18px 20px 26px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .menu-topo {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .menu-topo-logo {
        display: block;
        height: 25px;
        width: auto;
    }

    .menu-fechar {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        color: #fff;
        background: rgb(255 255 255 / 0.1);
        border: 0;
        border-radius: 50%;
        cursor: pointer;
    }

    .menu-fechar:hover,
    .menu-fechar:focus-visible {
        background: var(--cor-acao);
    }

    .menu ul {
        gap: 0;
        padding: 0;
    }

    /* Links grandes e separados por fio: alvo de toque de 50px de altura, contra
       os 40 que tinham antes. */
    .menu a {
        padding: 15px 0;
        font-size: 20px;
        font-weight: 700;
        color: #fff;
        border-bottom: 1px solid rgb(255 255 255 / 0.08);
    }

    .menu li:last-child a {
        border-bottom: 0;
    }

    .menu a.menu-ingresso {
        justify-content: center;
        height: 50px;
        margin: 0;
        padding: 0;
        font-size: 15.5px;
        border-radius: 999px;
        border-bottom: 0;
    }

    /* O hambúrguer do desenho é um botão redondo de vidro, não um glifo solto. */
    .menu-botao {
        width: 44px;
        height: 44px;
        background: rgb(255 255 255 / 0.1);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border-radius: 50%;
    }

    /* Com a gaveta aberta a página não rola por baixo: sem isto, fechar o menu
       devolvia o visitante a outro ponto do site. */
    body.menu-travado {
        overflow: hidden;
    }
}

/* No desktop o painel não existe como caixa: os filhos dele participam
   diretamente do flex do .menu, como participavam antes de ele existir. */
@media (min-width: 64rem) {
    .menu-painel {
        display: contents;
    }

    .menu-topo,
    .hero-ficha,
    .hero-pontos {
        display: none;
    }
}