/* Tema público do cinema.
   As CORES vêm todas de includes/tema.php (tokens do painel Aparência).
   Este arquivo cuida apenas de LAYOUT e usa os tokens — nunca redefine cor,
   porque o bloco :root com !important que existia aqui anulava o painel
   e era o motivo de as cores não mudarem no site. */

/* O fundo do html é definido em includes/tema.php, que sabe montar degradê.
   Aqui ficam só as propriedades de layout. */
html {
    color: var(--texto);
    overflow-x: hidden;
    text-size-adjust: 100%;
}

body,
body.template-padrao,
body.template-colorido {
    /* Transparente, para o fundo do html aparecer.

       Aqui havia `background: var(--fundo) !important`. O !important vencia até
       o tema, então o fundo do site era SEMPRE uma cor chapada: configurar um
       degradê no painel não mudava nada, porque esta linha o apagava. E, sendo
       shorthand, ela ainda zerava o background-image junto — dois motivos para
       o degradê nunca aparecer.

       O cabeçalho deste arquivo já avisava que ele "nunca redefine cor, porque
       o bloco :root com !important anulava o painel". Era a mesma armadilha,
       uma linha abaixo. */
    background: transparent;
    color: var(--texto);
    line-height: 1.55;
    overflow-x: clip;
}

body * {
    text-decoration-thickness: auto;
}

main,
section,
article,
aside,
nav,
header,
footer,
div {
    min-width: 0;
}

/* ATENÇÃO: não incluir aqui nada que fique SOBRE IMAGEM (herói, banner).
   `.movie-info h1` estava nesta lista e, no modo claro, virava texto escuro
   sobre o herói escuro — sumia. Esses casos usam --sobre-midia. */
h1, h2, h3, h4, h5, h6,
.page-title,
.section-title,
.prog-title,
.filme-titulo,
.post-header h1,
.post-conteudo h2,
.post-conteudo h3,
.blog-card-body h2 a,
.cinema-info h2,
.project-copy h2,
.project-contact-inner h2,
.contact-form-section h2 {
    /* --titulo: o navy institucional da marca, não a cor do corpo do texto. */
    color: var(--titulo) !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere;
}

/* Devolve a cor certa aos títulos que NÃO ficam sobre a superfície da página.
 *
 * A regra acima usa `h1..h6` com !important, então alcança também o título de
 * coluna do rodapé e qualquer título dentro da faixa do menu — superfícies que
 * têm cor própria e não seguem --texto. No modo claro isso pinta "INSTITUCIONAL"
 * de tinta escura em cima do rodapé marinho.
 *
 * Restaurar aqui, depois e com a mesma força, é mais seguro do que ir podando
 * a lista de seletores acima: ela é longa, legada, e cada remoção arrisca uma
 * página antiga que eu não tenho como abrir. */
.cx-footer h1, .cx-footer h2, .cx-footer h3,
.cx-footer h4, .cx-footer h5, .cx-footer h6 {
    color: var(--rodape-texto) !important;
}
.cx-header h1, .cx-header h2, .cx-header h3,
.cx-header h4, .cx-header h5, .cx-header h6 {
    color: var(--menu-texto) !important;
}
/* Sobre imagem o texto é sempre claro, nos dois modos. */
.cx-hero h1, .cx-hero h2, .cx-hero h3,
.cx-dest h1, .cx-dest h2, .cx-dest h3 {
    color: var(--sobre-midia) !important;
}

p, li, dd, dt, label, summary, figcaption,
.intro-text,
.filme-meta,
.cinema-info p,
.blog-card-body p,
.post-sub,
.post-meta,
.post-conteudo,
.project-copy,
.project-contact-inner > p,
.contact-form-section > p,
.atendimento-content,
.texto-institucional,
.sidebar-card-body,
.faq-answer,
.pf-a,
.pl-sub {
    overflow-wrap: anywhere;
}

/* Link usa --link, não uma variante do vermelho de destaque: o vermelho é
   "chamada de ação e urgência" no brandbook, não a cor de um link de texto. */
a {
    color: var(--link);
}

a:hover {
    color: var(--link);
}

/* O indicador de foco mora em includes/tema.php, junto dos tokens.
   Estava duplicado aqui com !important; duas casas para o mesmo indicador é
   como ele acabou divergindo. */

::selection {
    background: var(--destaque-botao);
    color: var(--destaque-botao-txt);
}/* Header and navigation */
.header-principal,
.navbar-principal,
.nav-links,
.dropdown-menu,
.nav-actions {
    background: var(--fundo) !important;
    border-color: var(--borda) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45) !important;
}.nav-link,
.dropdown-item,
.menu-toggle,
.social-link {
    color: var(--texto) !important;
}.nav-link:hover,
.dropdown-item:hover {
    background: rgba(var(--destaque-rgb, 232,48,26),.12) !important;
    color: var(--destaque-claro) !important;
}.cl-sel-wrapper.has-selection .cl-sel {
    outline: none !important;
    border-color: var(--texto-3) !important;
    background-color: var(--superficie) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .1) !important;
}

.cl-sel-wrapper.has-selection .cl-sel-ico {
    color: var(--texto-2) !important;
}

.header-form .select-estilo,
.header-form .select-estilo option {
    color: var(--texto-2) !important;
}

.header-form .select-estilo:focus,
.header-form .select-estilo:focus-visible {
    outline: none !important;
    border-color: var(--texto-3) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .1) !important;
}.btn-horarios,
.cl-buy-btn,
.cl-btn-horarios,
.cl-btn-comprar,
.btn-submit,
.btn-aceitar,
.pwa-btn,
.contact-submit,
.project-submit,
.post-prog,
.pc-form button,
.pn-form button,
.blog-busca button {
    /* Vermelho FUNCIONAL e texto de botão. Estava em var(--destaque) com
       color:var(--texto) — a cor do corpo do texto, que no claro é chumbo e no
       escuro é quase branco. Nenhum dos dois passa com folga sobre o vermelho
       oficial (4.26 e 4.31), e é justamente o botão "Comprar ingresso". */
    background: var(--destaque-botao) !important;
    background-image: none !important;
    color: var(--destaque-botao-txt) !important;
    border-color: var(--destaque-botao) !important;
    box-shadow: none !important;
}

.footer-news button {
    background: var(--fundo) !important;
    color: var(--texto) !important;
}.btn-horarios:hover,
.cl-buy-btn:hover,
.cl-btn-horarios:hover,
.cl-btn-comprar:hover,
.btn-submit:hover,
.contact-submit:hover,
.project-submit:hover,
.post-prog:hover,
.pc-form button:hover,
.pn-form button:hover,
.blog-busca button:hover {
    background: var(--destaque-escuro) !important;
    border-color: var(--destaque-escuro) !important;
    color: var(--destaque-botao-txt) !important;
}

/* Shared surfaces */
.filme-card,
.cinema-card,
.projeto-card,
.promo-card,
.promo-featured,
.mvv-card,
.channel-card,
.contato-projetos,
.atendimento-content,
.texto-institucional,
.blog-card,
.blog-maislidos li,
.rel-card,
.faq-item,
.pf-item,
.post-toc,
.post-author,
.pc-form,
.prog-filme,
.prog-empty,
.sidebar-card,
.uni-local-inner,
.date-pill,
.sessao-encerrada,
.pp-box,
.item-beneficio,
.seo-locations,
.texto-intro,
.lista-recursos li,
.app-card,
.filme-b,
.sala-filme,
.abaSelect,
.msg-vazio,
.cmaerr-card,
.cmaerr-btn--ghost,
.autor-head,
.autor-links a,
.ag-card,
.hb-card,
.fb-card,
.evc,
.post-news .pn-body,
.post-filme-cta,
.em-breve-box,
.aviso-futuro,
.assistir-box {
    background: var(--superficie) !important;
    border-color: var(--borda) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3) !important;
}

.filme-info-bar,
.filme-titulo,
.projeto-info,
.post-main,
.project-contact-band,
.blog-main,
.chat-body,
.chat-chips {
    background: var(--fundo) !important;
}

.filme-info-bar .filme-titulo {
    color: var(--texto-2) !important;
}

.filme-info-bar .filme-meta,
.filme-info-bar .filme-meta-copy {
    color: var(--texto-2) !important;
}

.filme-img-wrapper,
.projeto-img-wrapper,
.blog-card-img,
.rel-img,
.prog-poster-col,
.sessao-poster,
.cast-photo.no-photo,
.post-author .pa-noimg {
    background: var(--superficie-2) !important;
}

.section-title,
.page-title,
.post-meta,
.post-share,
.pc-item,
.sessao-dados,
.sessao-dados > div,
.sessao-sinopse,
.sidebar-card-title {
    border-color: var(--borda) !important;
}

.breadcrumb,
.breadcrumb .active,
.prog-breadcrumb,
.sessao-bc,
.post-bc,
.blog-meta,
.post-meta,
.filme-meta,
.prog-film-orig,
.prog-film-meta,
.prog-film-meta strong,
.prog-sala-label,
.sidebar-card-body,
.cinema-info p,
.cinema-info p.endereco-completo,
.projeto-info p,
.atendimento-content,
.texto-institucional,
.post-sub,
.post-conteudo,
.post-conteudo blockquote,
.pc-body p,
.pc-top strong,
.faq-answer,
.pf-a,
.sessao-dados dt,
.sessao-dados dd,
.sessao-sinopse p,
.project-copy,
.project-contact-inner > p,
.contact-form-section > p {
    color: var(--texto-2) !important;
}

.breadcrumb a,
.prog-breadcrumb a,
.sessao-bc a,
.post-bc a,
.blog-leia,
.home-blog-all,
.sessao-links a,
.footer-coluna a,
.desenvolvedor a {
    color: var(--destaque-claro) !important;
}

.uni-local-titulo,
.uni-local-lista li,
.uni-local-lista a,
.cmaerr-hero h1,
.cmaerr-titulo-sec,
.cmaerr-card-body h3,
.cast-name,
.titulo-filme-desktop h5,
.sala-filme div:first-child,
.em-breve-box .eb-txt strong,
.autor-info h1,
.autor-sec,
.ag-b h3 a,
.ev-head h1,
.evc-body h3,
.hb-body h3 a,
.fb-tit,
.fb-nota b {
    color: var(--texto) !important;
}

.uni-local-desc,
.cmaerr-hero p,
.cast-char,
.em-breve-box .eb-txt p,
.autor-bio,
.ag-b p,
.ev-head p,
.evc-desc,
.hb-body p,
.hb-meta {
    color: var(--texto-2) !important;
}

.breadcrumb li::after,
.breadcrumb-custom span {
    color: var(--texto-3) !important;
}

.page-title i,
.section-title i,
.filme-cidade,
.filme-cidade i,
.cinema-info p i,
.cinema-card:hover .cinema-info h2,
.tab-btn:hover,
.tab-btn.active,
.texto-institucional h3,
.texto-institucional a,
.sobre-texto h3,
.promo-info h2,
.uni-local-titulo i,
.uni-local-lista li i,
.autor-cargo,
.post-meta a,
.pa-cargo,
.filme-blog h2 i,
.evc-uni,
.app-icon,
.lista-recursos li i,
.atendimento-content h3,
.channel-icon.phone,
.blog-maislidos li::before,
.programacao-do-dia h3,
.sala-filme div b,
.cmaerr-cod,
.cmaerr-tag,
.sessao-label,
.social-icon,
.selo-icon,
.vp-unidade h3,
.chat-msg.bot a {
    color: var(--destaque-claro) !important;
}

.ft-lista {
    background: var(--superficie) !important;
    color: var(--destaque-claro) !important;
    border-color: var(--destaque) !important;
    border-radius: 8px !important;
}

.ft-lista:hover {
    background: var(--destaque) !important;
    color: var(--texto) !important;
}

/* Forms */
input,
select,
textarea,
.form-control,
.contact-field input,
.contact-field select,
.contact-field textarea,
.project-field input,
.project-field select,
.project-field textarea,
.pc-form input,
.pc-form textarea,
.pn-form input,
.filmes-toolbar input,
.filmes-toolbar select,
.select-estilo {
    background-color: var(--superficie) !important;
    color: var(--texto) !important;
    border-color: var(--borda-forte) !important;
    caret-color: var(--destaque-claro);
}

input::placeholder,
textarea::placeholder {
    color: var(--texto-3) !important;
    opacity: 1;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.select-estilo:focus {
    background-color: var(--superficie-2) !important;
    border-color: var(--destaque) !important;
    box-shadow: 0 0 0 3px rgba(var(--destaque-rgb, 232,48,26), .24) !important;
}select option,
select optgroup {
    background: var(--superficie) !important;
    color: var(--texto) !important;
}

.form-group label,
.contact-field label,
.project-field label,
.form-consent,
.contact-consent,
.project-consent {
    color: var(--texto-2) !important;
}

/* Programming */
.date-pill.active,
.prog-horario-btn,
.btn-precos,
.btn-valores,
.btn-programacao,
.sessao-comprar,
.btn-trailer,
.em-breve-box .eb-btn,
.blog-cats a.on,
.blog-pag a:hover,
.post-cat,
.pc-av,
.abaSelect.select,
.pt-btn.on {
    background: var(--destaque) !important;
    background-image: none !important;
    border-color: var(--destaque) !important;
    color: var(--texto) !important;
}

.date-pill .pill-month,
.date-pill .pill-label {
    color: var(--texto-2) !important;
}

.date-pill.active .pill-month,
.date-pill.active .pill-label {
    color: var(--texto) !important;
}

.prog-sala-lang {
    background: rgba(var(--destaque-rgb, 232,48,26),.18) !important;
    color: var(--destaque-claro) !important;
}

.prog-sala-tipo,
.sessao-chips span {
    background: var(--superficie-2) !important;
    border-color: var(--borda-forte) !important;
    color: var(--texto-2) !important;
}

.prog-horario-btn.no-link,
.prog-horario-btn.encerrado,
.hor.encerrado,
.hor.encerrado:hover {
    background: var(--superficie-2) !important;
    color: var(--texto-3) !important;
    border: 1px solid var(--borda) !important;
}

.abaSelect {
    color: var(--texto-2) !important;
}

.hor {
    color: var(--destaque-claro) !important;
    border-color: var(--destaque) !important;
}

.hor:hover {
    background: var(--destaque) !important;
    color: var(--texto) !important;
}

.aviso-futuro {
    color:var(--aviso-texto) !important;
    border-left-color: var(--aviso) !important;
}

.prog-cidade-header {
    background: var(--fundo) !important;
    border-color: var(--destaque) !important;
}

.prog-cidade-header .pcr-info i {
    color: var(--destaque-claro) !important;
}

.prog-cidade-header .pcr-btn {
    background: var(--destaque) !important;
    color: var(--texto) !important;
}/* Blog and editorial content */
.post-filme-cta,
.post-filme-cta .pfc-txt {
    color: var(--texto) !important;
}

.blog-busca,
.blog-cats a,
.blog-pag a,
.pt-btn,
.post-tags a {
    background: var(--superficie) !important;
    border-color: var(--borda) !important;
    color: var(--texto-2) !important;
}

.post-filme-cta,
.footer-news,
.chat-head,
.chat-launch,
#chatFab,
.pwa-ico {
    background: var(--destaque-escuro) !important;
    background-image: none !important;
}

.post-filme-cta .pfc-btn {
    background: var(--texto) !important;
    color: var(--destaque-escuro) !important;
}

.badge-estreia,
.filme-tag.prevenda,
.filme-tag.embreve,
.evc-tipo {
    background: var(--destaque-escuro) !important;
    color: var(--texto) !important;
}

.filme-tag.estreia,
.post-tipo-critica {
    background: var(--aviso) !important;
    color: var(--texto) !important;
}

.filme-tag.cartaz {
    background: var(--sucesso) !important;
    color: var(--texto) !important;
}

.post-conteudo a {
    color: var(--destaque-claro) !important;
    text-decoration: underline;
}

.post-conteudo code,
.post-conteudo pre {
    background: var(--superficie) !important;
    color: var(--texto) !important;
    border-color: var(--borda) !important;
}

.cmaerr-btn--ghost {
    color: var(--destaque-claro) !important;
    border: 2px solid var(--destaque) !important;
}

.cmaerr-poster,
.autor-noimg,
.ag-img,
.hb-img,
.fb-img,
.evc-img {
    background: var(--superficie-2) !important;
    background-image: none !important;
}

.cast-photo {
    background: var(--superficie-2) !important;
    border-color: var(--borda-forte) !important;
}

.footer-news {
    border-radius: 8px !important;
}

.uni-btn-wpp,
.share-fixed .sf.wa,
.sh.wa {
    background: var(--sucesso) !important;
    color: var(--texto) !important;
}

.share-fixed {
    background: var(--fundo) !important;
    border-color: var(--borda) !important;
}

/* Footer, dialogs and floating tools
 *
 * `footer:not(.cx-footer)`, e não `footer`. O seletor de elemento nu com
 * !important vencia o `.cx-footer` do design system e trocava o fundo próprio
 * do rodapé (--rodape-fundo, marinho) pelo fundo da página. Os links do rodapé
 * continuavam em --rodape-texto (branco) e passavam a cair sobre um fundo
 * quase branco: 1.01:1, invisíveis.
 *
 * O :not() fica em vez da remoção porque ainda existe <footer> sem classe em
 * páginas antigas, e essas dependem desta regra. */
.site-footer,
footer:not(.cx-footer) {
    background: var(--fundo) !important;
    color: var(--texto) !important;
    border-color: var(--borda) !important;
}

.footer-coluna h3,
.selo-titulo,
.copyright,
.desenvolvedor {
    color: var(--texto) !important;
}

.footer-coluna ul li a,
.selo-desc {
    color: var(--texto-2) !important;
}.cookie-box,
.cookie-message,
.vp-box,
.pwa-install,
.ml-item {
    background: var(--superficie) !important;
    color: var(--texto) !important;
    border-color: var(--borda) !important;
    border-radius: 8px !important;
}

.cookie-message h4,
.vp-box h2,
.pwa-txt strong,
.ml-item .ml-nome,
.chat-msg.bot {
    color: var(--texto) !important;
}

.cookie-message p,
.vp-texto,
.vp-empty,
.pwa-txt span,
.pwa-ios,
.ml-empty {
    color: var(--texto-2) !important;
}

.push-prompt {
    background: var(--superficie) !important;
    color: var(--texto) !important;
    border: 1px solid var(--borda) !important;
    border-radius: 8px !important;
}

.push-prompt .pp-ico,
.push-prompt .pp-btn {
    background: var(--destaque) !important;
    color: var(--texto) !important;
    border-radius: 8px !important;
}

.push-prompt .pp-txt span,
.push-prompt .pp-close {
    color: var(--texto-2) !important;
}

.pwa-ico,
.pwa-btn {
    border-radius: 8px !important;
}

.filme-tag,
.badge-estreia,
.filme-class-badge,
.filme-meta,
.filme-cidade,
.blog-cat-tag,
.hb-cat,
.cmaerr-tag,
.cast-char,
.date-pill .pill-label,
.chat-head small {
    font-size: 12px !important;
}

.chat-body,
.chat-chips,
.chat-foot {
    background: var(--fundo) !important;
    border-color: var(--borda) !important;
}.chat-msg.bot {
    background: var(--superficie-2) !important;
    border-color: var(--borda-forte) !important;
    color: var(--texto) !important;
}

.chat-msg.user {
    background: var(--destaque) !important;
    color: var(--texto) !important;
}.btn-configurar,
.btn-rota {
    background: transparent !important;
    border-color: var(--destaque) !important;
    color: var(--destaque-claro) !important;
}

/* Status messages retain meaning without losing contrast. */
.alert-success,
.contact-success,
.project-ok,
.pn-msg.ok,
.pc-msg.ok {
    background: rgba(16,185,129,.14) !important;
    border-color: var(--sucesso) !important;
    color:var(--sucesso-texto) !important;
}

.alert-error,
.contact-error,
.project-error,
.pn-msg.err,
.pc-msg.err {
    background: rgba(var(--destaque-rgb, 232,48,26),.14) !important;
    border-color: var(--destaque-escuro) !important;
    color: var(--destaque-claro) !important;
}

.pp-box,
.item-beneficio,
.seo-locations {
    border-left-color: var(--destaque) !important;
}

/* Texto sobre herói fotográfico ou vermelho: SEMPRE claro.
 *
 * A regra dizia isso no comentário e fazia o contrário: aplicava var(--texto),
 * que é a cor de texto do TEMA — escura no modo claro. O título do filme saía
 * em azul-marinho por cima do still escuro do filme, ilegível. O branco literal
 * virou token de tema em alguma migração e o sentido da regra se perdeu junto.
 *
 * --sobre-midia existe exatamente para este caso e vale #FFFFFF nos dois modos:
 * o fundo aqui é sempre escuro por causa do overlay, independente do tema. */
.movie-hero,
.movie-hero h1,
.movie-hero p,
.movie-info,
.movie-info h1,
.movie-meta,
.movie-synopsis,
.movie-synopsis p,
.credit-row,
.credit-label,
.credit-value,
.project-hero,
.project-hero h1,
.project-hero p,
.project-breadcrumb,
.project-breadcrumb a {
    color: var(--sobre-midia) !important;
}

/* Layout resilience */
img,
video,
iframe,
canvas {
    max-width: 100%;
}

table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive,
.pl-table-wrap,
.doc-body,
.orc-itens {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.btn-action,
.btn-precos,
.btn-submit,
.btn-cookie,
.pwa-btn,
.push-prompt .pp-btn,
.footer-news button,
.ft-lista,
.sessao-comprar,
.btn-trailer,
.em-breve-box .eb-btn,
.btn-saiba-mais,
.evc-btn,
.uni-btn,
.contact-submit,
.project-submit,
.prog-horario-btn,
.date-pill,
.tab-btn {
    min-height: 44px;
}

@media (max-width: 991px) {.nav-links {
        max-height: calc(100vh - 72px) !important;
    max-height: calc(100dvh - 72px) !important;
        overflow-y: auto !important;
    }

    .container-movie,
    .sobre-grid,
    .prog-layout,
    .uni-local-inner {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 16px !important;
    }

    h1,
    .movie-info h1,
    .post-header h1,
    .project-hero h1 {
        font-size: 32px !important;
        line-height: 1.15 !important;
    }

    h2,
    .page-title,
    .section-title,
    .prog-title {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }

    h3 {
        font-size: 20px !important;
    }

    .container-filmes,
    .container-cinemas,
    .container-projetos,
    .container-promocoes,
    .container-sobre,
    .container-atendimento,
    .container-institucional,
    .container-acessibilidade,
    .prog-wrapper,
    .sessao-main,
    .blog-wrap,
    .post-article,
    .project-body {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .texto-institucional,
    .atendimento-content,
    .contato-projetos,
    .pc-form,
    .post-author,
    .project-contact-band {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .filmes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .blog-grid,
    .home-blog-grid,
    .post-rel-grid,
    .fb-grid,
    .ev-list,
    .autor-grid,
    .contact-channels,
    .apps-grid,
    .mvv-grid,
    .projetos-grid,
    .cinemas-grid,
    .contact-form,
    .project-form {
        grid-template-columns: 1fr !important;
    }

    .card-actions,
    .prog-header-actions,
    .post-cta {
        width: 100%;
    }

    .card-actions .btn-action,
    .prog-header-actions > *,
    .post-cta > * {
        flex: 1 1 100%;
        justify-content: center;
        text-align: center;
    }

    input,
    select,
    textarea,
    button {
        font-size: 16px;
    }.cookie-box,
.cookie-message,
.pwa-install,
.push-prompt {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        left: 12px !important;
        right: 12px !important;
    }

    .vp-overlay {
        padding: 12px !important;
    }

    .vp-box {
        width: 100% !important;
        max-width: none !important;
        left: auto !important;
        right: auto !important;
    }

    .footer-news {
        border-radius: 8px !important;
    }
}

@media (max-width: 480px) {
    h1,
    .movie-info h1,
    .post-header h1,
    .project-hero h1 {
        font-size: 28px !important;
    }

    h2,
    .page-title,
    .section-title,
    .prog-title {
        font-size: 22px !important;
    }

    .logo-nome {
        font-size: 24px !important;
    }

    .filme-titulo {
        min-height: 52px;
        white-space: normal !important;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1.3;
    }

    .prog-filme-inner {
        align-items: stretch;
    }

    .prog-poster-col,
    .prog-poster-col img {
        width: 104px !important;
    }

    .prog-poster-col img {
        height: 156px !important;
    }

    .prog-details-col {
        padding: 14px !important;
    }

    .prog-horario-btn {
        flex: 1 1 82px;
        padding: 10px 12px !important;
        justify-content: center;
    }

    .project-hero {
        min-height: 390px !important;
    }

    .footer-news input,
    .footer-news button,
    .btn-submit,
    .contact-submit,
    .project-submit {
        width: 100% !important;
        justify-content: center;
    }

    .footer-news {
        padding: 22px 16px !important;
    }

    .footer-news form {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .cookie-buttons .btn-cookie {
        flex: 1 1 130px;
        min-height: 44px;
    }

    .push-prompt {
        flex-wrap: wrap;
    }

    .push-prompt .pp-btn {
        order: 3;
        flex: 1 1 100%;
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}