/* =====================================================================
   cn_filmes.css  -  Teste de pagina de filme responsiva - Cinema MDA
   out/2026  -  prefixo das classes: "cn-"
   Regra: nenhum endereco (URL) neste arquivo. Imagens de fundo e links
   ficam na propria pagina HTML.
   ===================================================================== */

:root {
  --cn-laranja: #D64A00;
  --cn-cinza: #999999;
  --cn-cinza-link: #808080;
  --cn-largura: 1282px;
  --cn-escala: 1;              /* alterada pelos botoes A- A A+ */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body.cn-pagina {
  margin: 0;
  background: #000000;
  color: #FFFFFF;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
body.cn-pagina a { color: var(--cn-cinza-link); }
body.cn-pagina a:hover { color: #C0C0C0; }
body.cn-pagina img { border: 0; }

.cn-centro { max-width: var(--cn-largura); margin: 0 auto; }

/* ---------- Cabecalho ---------- */
.cn-topo { background-repeat: repeat-x; background-position: left top; }
.cn-cabecalho {
  display: flex;
  height: 119px;
  background-repeat: repeat-x;
}
.cn-logo {
  flex: 0 0 177px;
  display: flex; align-items: center; justify-content: center;
  background-repeat: repeat-x;
}
.cn-logo img { width: 176px; height: auto; display: block; }
.cn-diagonal { flex: 0 0 39px; background-repeat: no-repeat; background-position: left top; }
.cn-cab-direita {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-right: 7px;
}
.cn-redes {
  height: 78px;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px;
}
.cn-redes img { width: 36px; height: 36px; display: block; }
.cn-cab-linha2 {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.cn-exibicao { width: 205px; height: auto; display: block; }

/* Botoes A- A A+ (alinhados a direita do icone do YouTube) */
.cn-fonte { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.cn-fonte button {
  font-family: Verdana, Arial, sans-serif;
  font-weight: bold;
  color: #FFFFFF;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 4px;
  padding: 1px 7px;
  line-height: 1.25;
  cursor: pointer;
}
.cn-fonte button:hover { background: rgba(0,0,0,.6); }
.cn-fonte button:disabled { opacity: .4; cursor: default; }
.cn-fonte button[aria-pressed="true"] { background: rgba(0,0,0,.7); }
.cn-fonte .cn-a-menor { font-size: 11px; }
.cn-fonte .cn-a-normal { font-size: 13px; }
.cn-fonte .cn-a-maior { font-size: 16px; }

/* ---------- Ficha do filme ---------- */
.cn-filme-fundo { background-repeat: repeat; }
.cn-filme {
  display: flex;
  gap: 10px;
  padding: 23px 5px;
}
.cn-foto { flex: 0 0 410px; text-align: center; }
.cn-foto img { max-width: 100%; height: auto; }
.cn-info { flex: 1 1 auto; min-width: 0; padding: 4px; display: flex; flex-direction: column; justify-content: center; }

.cn-linha-dados {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  color: var(--cn-cinza); font-weight: bold;
  font-size: calc(18px * var(--cn-escala));
}
.cn-titulo-filme {
  color: var(--cn-laranja); font-weight: bold;
  font-size: calc(24px * var(--cn-escala));
  margin: 2px 0 14px;
}
.cn-sinopse {
  text-align: justify;
  font-size: calc(18px * var(--cn-escala));
  line-height: 1.4;
  margin: 0 0 22px;
}
.cn-ficha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  padding: 0 0 0 80px;
  font-size: calc(18px * var(--cn-escala));
  margin-bottom: 40px;
}
.cn-ficha dt { color: var(--cn-cinza); }
.cn-ficha dd { margin: 0; }

.cn-botoes {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around;
  gap: 10px;
}
.cn-botoes img { max-width: 100%; height: auto; display: block; }

/* ---------- Datas (sempre em uma linha) ---------- */
.cn-div-laranja, .cn-div-preto { height: 21px; background-repeat: repeat-x; }
.cn-datas {
  display: grid;
  grid-template-columns: 1.15fr repeat(7, 1fr);
  align-items: center;
  font-weight: bold;
}
.cn-escolha {
  grid-row: 1 / span 2;
  color: var(--cn-cinza);
  text-align: center;
  font-size: 12.5pt;          /* 1 pt menor que o original (13,5 pt) */
  line-height: 1.3;
}
.cn-dia { text-align: center; line-height: 1.05; }
.cn-dia a { text-decoration: none; }          /* datas e dias sem sublinhado */
.cn-dia.cn-sem-sessao a, .cn-dia.cn-sem-sessao a:hover { color: #000000; }   /* dia sem nenhuma sessao */
.cn-dia .cn-num { display: block; font-size: 48px; }
.cn-dia .cn-sem { display: block; font-size: 16px; }
.cn-dia .cn-sem-curta { display: none; }
.cn-tarja { text-align: center; line-height: 0; }
.cn-tarja img { width: 105px; max-width: 92%; height: auto; }

/* ---------- Cinemas ---------- */
.cn-espaco { height: 18px; }
.cn-cinema { background-repeat: repeat; padding: 10px; }
.cn-cinema-cab {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 4px 20px; font-weight: bold;
}
.cn-cinema-nome { color: var(--cn-laranja); font-size: calc(18px * var(--cn-escala)); }
.cn-cinema-nome .cn-rede { font-size: calc(24px * var(--cn-escala)); }
.cn-cinema-nome .cn-site { color: var(--cn-cinza-link); margin-left: 22px; white-space: nowrap; }
.cn-endereco { font-family: Arial, Helvetica, sans-serif; font-size: calc(11pt * var(--cn-escala));   /* 1 pt menor que o original (12 pt) */ color: #FFFFFF; text-align: right; }
.cn-cinema .cn-div-preto { margin: 10px 0; }
.cn-caract { white-space: nowrap; line-height: 0; margin: 10px 0 6px; }   /* caracteristicas sempre na mesma linha */
.cn-caract img { height: 35px; width: auto; display: inline-block; }
.cn-horarios { font-size: calc(18px * var(--cn-escala)); line-height: 1.6; margin: 0 0 14px; }

.cn-rodape-botoes {
  margin: 28px 10px 28px;
  background-repeat: repeat;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around;
  gap: 10px; padding: 6px 10px;
}
.cn-rodape-botoes img { max-width: 100%; height: auto; display: block; }

/* ---------- Rodape ---------- */
.cn-rodape { background-repeat: repeat; color: #808080; text-align: center; padding: 18px 10px 20px; }
.cn-aviso { font-size: 16px; margin: 6px 0 22px; }
.cn-canais { font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.5; }
.cn-canais em { font-size: 16px; }
.cn-rodape .cn-div-preto { margin: 40px 20px 30px; }
.cn-copy {
  display: flex; flex-wrap: wrap; justify-content: space-around; gap: 8px 30px;
  font-family: Arial, Helvetica, sans-serif; font-size: 13px;
}
.cn-copy a { font-family: Verdana, sans-serif; font-weight: bold; }

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .cn-foto { flex-basis: 320px; }
  .cn-ficha { padding-left: 20px; }
  .cn-dia .cn-num { font-size: 36px; }
  .cn-dia .cn-sem { font-size: 13px; }
}

/* ---------- Celular ---------- */
@media (max-width: 700px) {
  .cn-cabecalho { height: 96px; }
  .cn-logo { flex-basis: 118px; }
  .cn-logo img { width: 112px; }
  .cn-diagonal { flex-basis: 26px; background-size: auto 100%; }
  .cn-redes { height: 56px; gap: 5px; }
  .cn-redes img { width: 28px; height: 28px; }
  .cn-exibicao { width: 120px; }
  .cn-cab-linha2 { flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; padding-bottom: 4px; }   /* Em Exibicao e A-/A/A+ na parte inferior */
  .cn-cab-linha2 .cn-exibicao { margin-right: auto; }
  .cn-fonte button { padding: 0 5px; }

  .cn-filme { flex-direction: column; align-items: center; padding: 12px 6px; }
  .cn-foto { flex-basis: auto; }
  .cn-info { padding: 4px 2px; }
  .cn-sinopse { text-align: left; font-size: calc(16px * var(--cn-escala)); }
  .cn-ficha { grid-template-columns: 1fr; padding-left: 0; font-size: calc(16px * var(--cn-escala)); margin-bottom: 20px; }
  .cn-botoes { justify-content: center; }
  .cn-botoes img, .cn-rodape-botoes img { width: calc(var(--cn-w) * 0.8); }   /* botoes 20% menores no celular */

  .cn-datas { grid-template-columns: 1.25fr repeat(7, 1fr); }
  .cn-escolha { font-size: 9px; line-height: 1.25; }
  .cn-dia .cn-num { font-size: 21px; }
  .cn-dia .cn-sem { display: none; }
  .cn-dia .cn-sem-curta { display: block; font-size: 10px; }

  .cn-cinema { padding: 8px; }
  .cn-cinema-nome { font-size: calc(15px * var(--cn-escala)); }
  .cn-cinema-nome .cn-rede { font-size: calc(19px * var(--cn-escala)); }
  .cn-cinema-nome .cn-site { margin-left: 8px; }
  .cn-endereco { text-align: left; font-size: calc(9pt * var(--cn-escala)); }
  .cn-caract img { height: 30px; }
  .cn-horarios { font-size: calc(16px * var(--cn-escala)); }

  .cn-rodape-botoes { justify-content: center; }
  .cn-canais { font-size: 15px; }
  .cn-copy { font-size: 12px; }
}

/* =====================================================================
   Paginas de TRAILER (filmes_<PASTA>\trailer\) - acrescentado em 20/10/2026
   ===================================================================== */
body.cn-trailer { background-color: #25242A; background-repeat: repeat; }
.cn-fechar-topo { height: 78px; display: flex; align-items: flex-start; justify-content: flex-end; }
.cn-fechar-topo img { width: 97px; height: auto; display: block; }
.cn-trailer-titulo {
  text-align: center; font-weight: bold; font-size: 24px;
  margin: 26px 10px 34px; line-height: 1.3;
}
.cn-trailer-titulo .cn-filme-nome { color: var(--cn-laranja); }
.cn-trailer-titulo .cn-trailer-palavra { color: #808080; }
.cn-video { max-width: 980px; margin: 0 auto; padding: 0 10px; }
.cn-video-caixa { position: relative; width: 100%; aspect-ratio: 980 / 550; }
.cn-video-caixa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cn-trailers-botoes {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
  margin: 30px 10px 40px; line-height: 0;
}
.cn-trailers-botoes img { display: block; height: auto; max-width: 100%; }

@media (max-width: 700px) {
  .cn-fechar-topo { height: 56px; }
  .cn-fechar-topo img { width: 70px; }
  .cn-trailer-titulo { font-size: 19px; margin: 18px 8px 22px; }
  .cn-video { padding: 0 6px; }
  .cn-trailers-botoes img { width: calc(var(--cn-w) * 0.8); }   /* botoes de trailer 20% menores no celular */
}

/* =====================================================================
   PAGINA INICIAL DE CINEMA (cn_01) - acrescentado em 20/10/2026
   ===================================================================== */
.cn-cab-linha2 .cn-prog { flex: 0 1 415px; min-width: 0; width: 415px; height: auto; display: block; }
.cn-periodo { color: #FFFFFF; font-size: 18px; white-space: nowrap; padding-right: 30px; }
.cn-periodo b { font-size: 24px; }
.cn-redes .cn-selo-cab { display: none; }
.cn-inicial .cn-cabecalho { min-width: 0; }

.cn-faixa-cinza { background-repeat: repeat; }
.cn-ini-topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 212px;
  align-items: center;
  padding-top: 18px;
}
.cn-banners-topo { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 12px; }
.cn-banner { display: block; width: 468px; max-width: 100%; height: auto; }
.cn-selo { text-align: center; line-height: 0; }
.cn-selo img { width: 90px; height: auto; }
.cn-ini-div { grid-column: 1 / -1; margin: 28px 32px 0; }

.cn-ini {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px 182px;
}
.cn-principal { min-width: 0; padding-bottom: 40px; }
.cn-linha-vert { background-repeat: repeat-y; background-position: center top; }
.cn-lateral { background-repeat: repeat; padding: 4px 0 20px; }
.cn-lat-item { text-align: center; line-height: 0; padding: 4px 0 14px; margin: 0 10px 10px; border-bottom: 2px solid #000000; }
.cn-lat-item img { width: 120px; height: auto; }

.cn-secao {
  color: var(--cn-laranja); font-family: Verdana, Arial, sans-serif; font-weight: bold;
  font-size: calc(24px * var(--cn-escala)); margin: 0; line-height: 1.2;
}
.cn-secao-lista { margin: 40px 0 6px 0; }
.cn-secao-festival { margin: 44px 0 14px 0; }
.cn-principal > .cn-div-laranja { margin-bottom: 14px; }

.cn-destaque-area { background-repeat: repeat; padding: 10px 0 18px; }
.cn-destaque { max-width: 1070px; margin: 0 auto; }
.cn-destaque-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
.cn-destaque-foto { display: block; width: 100%; max-width: 1070px; height: auto; }

.cn-ancora { display: block; height: 0; width: 0; }
.cn-cards { display: grid; gap: 14px 4px; margin-bottom: 14px; }
.cn-cards-cartaz { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cn-cards-breve  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cn-card { display: flex; flex-direction: column; min-width: 0; }
.cn-card > a { display: block; text-align: center; line-height: 0; }
.cn-card-foto { width: 100%; height: auto; }
.cn-cards-cartaz .cn-card-foto { max-width: 250px; }
.cn-cards-breve  .cn-card-foto { max-width: 200px; }
.cn-card-dados {
  color: var(--cn-cinza-link); font-weight: bold;
  font-size: calc(16px * var(--cn-escala)); line-height: 1.25; margin-top: 6px;
}
.cn-card-classif { width: 30px; height: auto; vertical-align: -5px; margin-right: 6px; }
.cn-card-titulo {
  color: #C0C0C0; font-weight: bold;
  font-size: calc(18px * var(--cn-escala)); line-height: 1.2; margin-top: 2px;
}
.cn-card-prev { color: var(--cn-cinza-link); font-size: calc(16px * var(--cn-escala)); margin-top: auto; padding-top: 10px; }

/* Tablet */
@media (max-width: 1000px) {
  .cn-ini-topo { grid-template-columns: minmax(0, 1fr) 140px; }
  .cn-principal { padding-left: 10px; padding-right: 10px; }
  .cn-destaque-area { margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
  .cn-periodo { font-size: 15px; padding-right: 10px; }
  .cn-periodo b { font-size: 19px; }
  .cn-cards-cartaz { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cn-cards-breve  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Celular */
@media (max-width: 700px) {
  .cn-redes .cn-selo-cab { display: block; width: 40px; height: 40px; margin-right: auto; margin-left: 4px; }
  .cn-cab-linha2 .cn-prog { flex-basis: 190px; width: 190px; }
  .cn-periodo { font-size: 11px; padding-right: 2px; }
  .cn-periodo b { font-size: 13px; }

  .cn-ini-topo { grid-template-columns: 1fr; padding: 12px 8px 0; }
  .cn-banners-topo { flex-direction: column; align-items: center; gap: 10px; }   /* banners um abaixo do outro */
  .cn-selo { display: none; }
  .cn-ini-div { margin: 16px 0 0; }

  .cn-ini { display: block; }
  .cn-linha-vert { display: none; }
  .cn-principal { padding: 0 8px 10px; }
  .cn-destaque-area { margin: 0 -8px; padding: 10px 8px 14px; }
  .cn-fonte button { padding: 0 5px; }
  .cn-secao { font-size: calc(19px * var(--cn-escala)); }
  .cn-secao-lista { margin-top: 26px; }
  .cn-secao-festival { margin: 30px 0 10px; }

  .cn-cards { gap: 14px 8px; }
  .cn-cards-cartaz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cn-cards-breve  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cn-card-dados { font-size: calc(12px * var(--cn-escala)); }
  .cn-card-classif { width: 24px; vertical-align: -4px; margin-right: 4px; }
  .cn-card-titulo { font-size: calc(14px * var(--cn-escala)); }
  .cn-card-prev { font-size: calc(12px * var(--cn-escala)); padding-top: 6px; }
  .cn-cards-breve .cn-card-dados { font-size: calc(11px * var(--cn-escala)); }
  .cn-cards-breve .cn-card-titulo { font-size: calc(12px * var(--cn-escala)); }

  .cn-lateral {                                       /* banners da coluna direita depois do EM BREVE */
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 12px; padding: 18px 8px; margin-top: 20px;
  }
  .cn-lat-item { border: 0; margin: 0; padding: 0; }
}

/* cn_01: barra de ferramentas (busca de filmes + tamanho da fonte) - 20/10/2026 */
.cn-ferramentas {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  border: 2px solid #000000; border-radius: 4px; background: transparent;   /* cantos como os botoes A- A A+ */
  width: 90%; padding: 6px 8px; margin: 4px auto 16px;                       /* 90% da area, centralizado */
}
.cn-busca { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 0; }
.cn-busca-rotulo { color: #C0C0C0; font-weight: bold; font-size: 14px; }
.cn-busca input[type="search"] {
  width: 260px; max-width: 100%; font: 14px Verdana, Arial, sans-serif;
  padding: 4px 8px; border: 1px solid #000000; border-radius: 3px; background: #FFFFFF; color: #000000;
}
.cn-busca button {
  font: bold 13px Verdana, Arial, sans-serif; color: #FFFFFF; cursor: pointer;
  background: var(--cn-laranja); border: 1px solid #000000; border-radius: 3px; padding: 4px 10px;
}
.cn-busca button:hover { background: #F06010; }
.cn-busca-msg { color: #C0C0C0; font-size: 12px; white-space: nowrap; }
.cn-busca-msg:empty { display: none; }
.cn-ferramentas .cn-fonte { grid-column: 3; justify-self: end; }   /* 8px da borda direita = ~1/3 do botao A */
.cn-card.cn-achado { outline: 2px solid #808080; outline-offset: 3px; }
.cn-card.cn-atual  { outline: 3px solid var(--cn-laranja); outline-offset: 3px; }
.cn-lat-div { display: none; }

@media (max-width: 700px) {
  .cn-ferramentas { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding: 6px 7px 6px 6px; margin-bottom: 12px; }
  .cn-busca { flex: 1 1 100%; justify-content: center; }
  .cn-busca-rotulo { display: none; }
  .cn-busca input[type="search"] { flex: 1 1 120px; width: auto; min-width: 0; }
  .cn-busca-msg { flex-basis: 100%; text-align: center; }
  /* linha laranja antes dos banners levados para baixo: mesmas distancias do EM BREVE */
  .cn-lat-div { display: block; margin: 26px 0 14px; }
  .cn-principal { padding-bottom: 0; }
  .cn-lateral { margin-top: 0; }   /* fundo cinza; a linha laranja fica no fundo preto, acima */
}

/* cn_01: titulo de festival em imagem (max. 1000 px, reduz no celular) */
.cn-secao img { max-width: 100%; height: auto; vertical-align: bottom; }

/* Link de compra em cada horario (desde 21/10/2026; normas, regra 2.13)
   Horario com link: <a class="cn-compra"> com o icone de ingresso (cn-ic) e o icone invertido (cn-ic2).
   Ao passar o mouse: cores invertidas (fundo laranja, icone branco) e leve aumento.
   Horario sem link ou que ja passou: texto simples (cn-passou). */
.cn-horarios a.cn-compra {
  color: #FFFFFF; text-decoration: none; white-space: nowrap;
  display: inline-block; padding: 1px 6px 1px 4px; border-radius: 6px; line-height: 1.3;
  transition: background-color .25s, transform .2s;
}
.cn-horarios a.cn-compra:hover { background-color: var(--cn-laranja); color: #FFFFFF; transform: scale(1.08); }
.cn-compra img { width: 1.1em; height: 1.1em; vertical-align: -0.17em; margin-right: 4px; border: 0; }
.cn-compra .cn-ic2 { display: none; }
.cn-compra:hover .cn-ic { display: none; }
.cn-compra:hover .cn-ic2 { display: inline; }
.cn-horarios .cn-passou { color: #FFFFFF; padding: 1px 6px 1px 4px; }

/* ---------- Efeito nas fotos dos cards (teste de 22/10/2026) ----------
   EM CARTAZ, FESTIVAL e EM BREVE da cn_01: ao passar o mouse a foto reduz 5%.
   So fotos com link (as imagens vazias de preenchimento nao mexem).
   Para desfazer: apagar este bloco (copia anterior: cn_filmes_antes_zoom.css). */
.cn-card > a .cn-card-foto { transition: transform .3s ease; transform-origin: center center; }
.cn-card > a:hover .cn-card-foto,
.cn-card > a:focus-visible .cn-card-foto { transform: scale(.95); }
@media (prefers-reduced-motion: reduce) {
  .cn-card > a .cn-card-foto { transition: none; }
}

/* =====================================================================
   30/10/2026 - VERSAO CLARA E ESCURA, BOTOES MENORES, CANTOS ARREDONDADOS,
   ANIMACAO DE ENTRADA (normas, versao 21)
   Escolha clara/escura guardada na chave mda-tema (js\cn_filmes.js).
   Paginas de TRAILER nao usam a versao clara (nao carregam o js).
   Para desfazer: apagar este bloco (copia anterior: cn_filmes_antes_tema.css)
   ===================================================================== */

/* Grupo de botoes: fonte (A- A A+) + espaco do tamanho do A+ + tema (sol lua) */
.cn-controles { display: flex; align-items: center; gap: 16px; white-space: nowrap; grid-column: 3; justify-self: end; }
.cn-tema { display: flex; align-items: center; gap: 4px; }
.cn-tema button {
  font-family: Verdana, Arial, sans-serif; font-weight: bold; color: #FFFFFF;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.55); border-radius: 4px;
  padding: 1px 7px; line-height: 1.25; font-size: 16px; cursor: pointer;
}
.cn-tema button:hover { background: rgba(0,0,0,.6); }
.cn-tema button[aria-pressed="true"] { background: rgba(0,0,0,.7); }
.cn-tema svg { width: 1em; height: 1em; display: block; fill: #FFFFFF; stroke: #FFFFFF; }
@media (max-width: 700px) { .cn-tema button { padding: 0 5px; } .cn-controles { gap: 10px; } }

/* Botoes TRAILER | COMPRAR | TODOS OS FILMES | TOPO: computador e tablet 18% menores; celular 70% do original */
@media (min-width: 701px) { .cn-botoes img, .cn-rodape-botoes img { width: calc(var(--cn-w) * 0.82); } }
@media (max-width: 700px) { .cn-botoes img, .cn-rodape-botoes img { width: calc(var(--cn-w) * 0.70); } }

/* Areas cinza dos cinemas, dos botoes inferiores e do rodape: cantos arredondados e mais afastamento lateral
   (o rodape da cn_01 e das paginas de trailer nao arredonda) */
.cn-cinema { border-radius: 12px; padding: 12px 24px; }
.cn-rodape-botoes { border-radius: 12px; }
body:not(.cn-inicial):not(.cn-trailer) .cn-rodape { border-radius: 12px; }
@media (max-width: 700px) {
  .cn-cinema { border-radius: 10px; padding: 10px 16px; }
  .cn-rodape-botoes, body:not(.cn-inicial):not(.cn-trailer) .cn-rodape { border-radius: 10px; }
}

/* ---------- VERSAO CLARA (sol): laranja mantido ---------- */
html[data-tema="claro"] body.cn-pagina { background: #FFFFFF; color: #1A1A1A; }
html[data-tema="claro"] body.cn-pagina a { color: #555555; }
html[data-tema="claro"] body.cn-pagina a:hover { color: #000000; }
html[data-tema="claro"] .cn-filme-fundo,
html[data-tema="claro"] .cn-cinema,
html[data-tema="claro"] .cn-rodape-botoes,
html[data-tema="claro"] .cn-faixa-cinza,
html[data-tema="claro"] .cn-destaque-area,
html[data-tema="claro"] .cn-lateral,
html[data-tema="claro"] .cn-rodape { background-image: none !important; background-color: #ECECEC; }
html[data-tema="claro"] .cn-rodape { color: #555555; }
html[data-tema="claro"] .cn-linha-dados,
html[data-tema="claro"] .cn-ficha dt,
html[data-tema="claro"] .cn-escolha { color: #818181; }
html[data-tema="claro"] .cn-endereco { color: #1A1A1A; }
html[data-tema="claro"] .cn-cinema-nome .cn-site { color: #555555; }
html[data-tema="claro"] .cn-dia.cn-sem-sessao a,
html[data-tema="claro"] .cn-dia.cn-sem-sessao a:hover { color: #D0D0D0; }
html[data-tema="claro"] .cn-horarios a.cn-compra,
html[data-tema="claro"] .cn-horarios .cn-passou { color: #1A1A1A; }
html[data-tema="claro"] .cn-horarios a.cn-compra:hover { color: #FFFFFF; }
/* botoes com 30% de transparencia; com o mouse, sem transparencia */
html[data-tema="claro"] .cn-botoes img,
html[data-tema="claro"] .cn-rodape-botoes img { opacity: .7; transition: opacity .2s; }
html[data-tema="claro"] .cn-botoes a:hover img,
html[data-tema="claro"] .cn-rodape-botoes a:hover img { opacity: 1; }
html[data-tema="claro"] .cn-dia a { color: #818181; }
html[data-tema="claro"] .cn-dia a:hover { color: #555555; }
/* linhas pretas viram cinza #818181 (a imagem original nao e alterada) */
html[data-tema="claro"] .cn-div-preto {
  background-image: linear-gradient(to bottom, transparent 9px, #818181 9px, #818181 12px, transparent 12px) !important;
}
/* cn_01 */
html[data-tema="claro"] .cn-lat-item { border-bottom-color: #818181; }
html[data-tema="claro"] .cn-card-dados,
html[data-tema="claro"] .cn-card-prev { color: #818181; }
html[data-tema="claro"] .cn-card-titulo { color: #333333; }
html[data-tema="claro"] .cn-ferramentas { border-color: #818181; }
html[data-tema="claro"] .cn-busca-rotulo,
html[data-tema="claro"] .cn-busca-msg { color: #555555; }
html[data-tema="claro"] .cn-busca input[type="search"] { border-color: #818181; }
html[data-tema="claro"] .cn-ferramentas .cn-fonte button,
html[data-tema="claro"] .cn-ferramentas .cn-tema button { background: rgba(0,0,0,.65); border-color: rgba(0,0,0,.65); }
html[data-tema="claro"] .cn-ferramentas .cn-fonte button:hover,
html[data-tema="claro"] .cn-ferramentas .cn-tema button:hover { background: rgba(0,0,0,.85); }
html[data-tema="claro"] .cn-ferramentas .cn-fonte button[aria-pressed="true"],
html[data-tema="claro"] .cn-ferramentas .cn-tema button[aria-pressed="true"] { background: #000000; }

/* ---------- Animacao de entrada ----------
   Paginas dos filmes: foto, dados, titulo, sinopse, ficha, botoes, datas e cinemas (repete a cada entrada na tela).
   cn_01: somente o DESTAQUE. A classe cn-anima e posta pelo js (so se o navegador suporta e o visitante
   nao pediu "reduzir movimento"); sem ela, tudo aparece normalmente. */
html.cn-anima .cn-foto, html.cn-anima .cn-linha-dados, html.cn-anima .cn-titulo-filme,
html.cn-anima .cn-sinopse, html.cn-anima .cn-ficha, html.cn-anima .cn-botoes,
html.cn-anima .cn-datas, html.cn-anima .cn-cinema, html.cn-anima .cn-rodape-botoes,
html.cn-anima .cn-destaque-foto {
  opacity: 0; transform: translateY(15px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
html.cn-anima .cn-visto { opacity: 1 !important; transform: none !important; }