/* Cine Roxy: design system sobre a estrutura do layout novo da plataforma Gaia.
   Carregado por último. As cores de base saem de build/tema.py; aqui ficam os tokens,
   a tipografia e as seções próprias do Roxy (prefixo rx-). */

:root {
  /* marca */
  --rx-amarelo: #ffdf01;
  --rx-amarelo-escuro: #e9cb00;
  --rx-amarelo-claro: #ffe151;
  --rx-lima: #bee418;
  --rx-azul: #007dd7;
  /* superfícies */
  --rx-noite: #14181c;
  --rx-noite-funda: #080d12;
  --rx-painel: #1d2329;
  --rx-painel-alto: #232a31;
  --rx-linha: #2e3741;
  /* texto */
  --rx-texto: #f7f5ef;
  --rx-texto-suave: #a9b1ba;
  --rx-sobre-marca: #14181c;
  /* forma e tipografia */
  --rx-raio: 10px;
  --rx-raio-pill: 999px;
  --rx-fonte-titulo: "Baloo 2", "Open Sans", Arial, sans-serif;
  --rx-fonte-texto: "Open Sans", Arial, sans-serif;

  --mc-font: var(--rx-fonte-texto);
  --font-family: var(--rx-fonte-texto);
}

body.mc-novo {
  font-family: var(--rx-fonte-texto);
  background-color: var(--rx-noite);
}

body.mc-novo h1,
body.mc-novo h2,
body.mc-novo h3,
body.mc-novo .mc-hero-title,
body.mc-novo .mc-hero-kicker,
body.mc-novo .mc-cta-ingressos,
body.mc-novo .club-nav,
body.mc-novo .mc-hero-buy,
body.mc-novo .mc-products-kicker,
body.mc-novo .mc-soon-kicker,
body.mc-novo .rx-kicker,
body.mc-novo .rx-btn,
body.mc-novo #menu .nav-link {
  font-family: var(--rx-fonte-titulo);
}

body.mc-novo #menu .nav-link {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}

body.mc-novo #menu .nav-link:hover,
body.mc-novo #menu .nav-link:focus-visible {
  color: var(--rx-sobre-marca) !important;
}

/* logo: o do Roxy é mais alto que largo em relação ao anterior */
body.mc-novo .header-top .mc-ribbon-logo {
  height: 44px;
  width: auto;
  max-width: none;
}

body.mc-novo footer#rodape .mc-footer-brand img {
  height: 64px;
  width: auto;
}

/* botões sobre a cor de marca */
body.mc-novo .header-top .mc-cta-ingressos,
body.mc-novo .mc-header-actions .mc-cta-ingressos,
body.mc-novo .mc-hero-buy,
body.mc-novo .mobile-buy,
body.mc-novo .mc-soon-all,
body.mc-novo .rx-btn {
  color: var(--rx-sobre-marca) !important;
  font-weight: 700;
}

body.mc-novo .mc-hero-buy .mc-arrow,
body.mc-novo .mobile-buy .mc-arrow,
body.mc-novo .mc-soon-all .mc-arrow,
body.mc-novo .rx-btn .mc-arrow {
  color: var(--rx-sobre-marca);
}

body.mc-novo .header-top .club-nav,
body.mc-novo .mc-header-actions .club-nav {
  border-color: var(--rx-amarelo);
  color: var(--rx-amarelo);
}

body.mc-novo .header-top .club-nav:hover,
body.mc-novo .mc-header-actions .club-nav:hover {
  background: var(--rx-amarelo);
  color: var(--rx-sobre-marca);
}

.rx-kicker {
  display: inline-block;
  color: var(--rx-amarelo);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.rx-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: var(--rx-raio);
  background: var(--rx-amarelo);
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}

.rx-btn:hover {
  background: var(--rx-amarelo-escuro);
  transform: translateY(-1px);
}

/* ---------- Todos pagam meia ---------- */
.rx-meia {
  padding: 72px 0 36px;
}

.rx-meia > .container {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 40px;
  align-items: center;
}

.rx-meia-copy h2 {
  margin: 10px 0 14px;
  color: var(--rx-texto);
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 800;
  line-height: 0.98;
}

.rx-meia-copy p {
  max-width: 420px;
  margin: 0 0 20px;
  color: var(--rx-texto-suave);
  font-size: 16px;
  line-height: 1.55;
}

.rx-meia-copy a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--rx-amarelo);
  font-family: var(--rx-fonte-titulo);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

.rx-meia-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
}

.rx-meia-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 210px;
  padding: 22px;
  border: 1px solid var(--rx-linha);
  border-radius: 16px;
  background: linear-gradient(160deg, var(--rx-painel-alto), var(--rx-painel));
}

.rx-meia-card > span {
  color: var(--rx-texto);
  font-family: var(--rx-fonte-titulo);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}

.rx-meia-card strong {
  color: var(--rx-amarelo);
  font-family: var(--rx-fonte-titulo);
  font-size: 76px;
  font-weight: 800;
  line-height: 0.8;
}

.rx-meia-card strong small {
  margin-right: 4px;
  font-size: 22px;
  font-weight: 700;
  vertical-align: top;
  line-height: 1.5;
}

.rx-meia-card em {
  color: var(--rx-texto-suave);
  font-size: 14px;
  font-style: normal;
}

/* ---------- Passaporte RoxyStar ---------- */
.rx-star {
  padding: 36px 0 72px;
}

.rx-star-banner {
  display: block;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
}

.rx-star-banner img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

.rx-star-banner:hover img {
  transform: scale(1.015);
}

.rx-star-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  border: 1px solid var(--rx-linha);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: var(--rx-painel);
}

.rx-star-copy h2 {
  margin: 4px 0 4px;
  color: var(--rx-texto);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.1;
}

.rx-star-copy p {
  margin: 0;
  color: var(--rx-texto-suave);
  font-size: 15px;
}

/* ---------- Cult Comics (ocupa o bloco do clube) ---------- */
body.mc-novo .rx-cult .mc-club-logo img {
  width: 150px;
  height: auto;
}

/* ---------- Rodapé: unidades ---------- */
.rx-footer-units {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 8px 0 28px;
}

.rx-footer-unit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
  border: 1px solid var(--rx-linha);
  border-radius: 12px;
  color: var(--rx-texto-suave) !important;
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.rx-footer-unit strong {
  margin-bottom: 4px;
  color: var(--rx-amarelo);
  font-family: var(--rx-fonte-titulo);
  font-size: 18px;
  font-weight: 700;
}

.rx-footer-unit:hover {
  border-color: var(--rx-amarelo);
}

/* ---------- Páginas de conteúdo (postagens) ---------- */
.rx-page {
  color: var(--rx-texto);
  font-size: 16px;
  line-height: 1.7;
}

.rx-page h2 {
  margin: 36px 0 12px;
  color: var(--rx-amarelo);
  font-size: 28px;
  font-weight: 700;
}

.rx-page h3 {
  margin: 24px 0 8px;
  color: var(--rx-texto);
  font-size: 21px;
  font-weight: 700;
}

.rx-page p {
  margin: 0 0 14px;
  color: #d8dce0;
}

.rx-page a {
  color: var(--rx-amarelo);
}

.rx-page img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

.rx-page .rx-lead {
  color: var(--rx-texto);
  font-size: 19px;
  line-height: 1.6;
}

.rx-page .rx-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 22px 0;
}

.rx-page .rx-fotos img {
  width: 100%;
  height: 100%;
  max-height: 340px;
  object-fit: cover;
}

.rx-page .rx-capa {
  display: block;
  width: 100%;
  max-height: 420px;
  margin: 0 0 26px;
  object-fit: cover;
}

.rx-page .rx-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 18px 0 26px;
  padding: 0;
  list-style: none;
  counter-reset: rx;
}

.rx-page .rx-lista li {
  position: relative;
  padding: 44px 18px 18px;
  border: 1px solid var(--rx-linha);
  border-radius: 14px;
  background: var(--rx-painel);
  color: var(--rx-texto);
  font-weight: 600;
  line-height: 1.35;
  counter-increment: rx;
}

.rx-page .rx-lista li::before {
  content: counter(rx, decimal-leading-zero);
  position: absolute;
  top: 12px;
  left: 18px;
  color: var(--rx-amarelo);
  font-family: var(--rx-fonte-titulo);
  font-size: 22px;
  font-weight: 800;
}

.rx-page .rx-contato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 30px 0 8px;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--rx-amarelo);
  color: var(--rx-sobre-marca);
}

.rx-page .rx-contato strong {
  display: block;
  font-family: var(--rx-fonte-titulo);
  font-size: 24px;
  line-height: 1.1;
}

.rx-page .rx-contato span {
  color: var(--rx-sobre-marca);
  font-size: 15px;
}

.rx-page .rx-contato a {
  display: inline-flex;
  padding: 11px 20px;
  border-radius: var(--rx-raio);
  background: var(--rx-noite);
  color: var(--rx-amarelo);
  font-family: var(--rx-fonte-titulo);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

.rx-page .rx-precos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 22px 0;
}

.rx-page .rx-preco {
  padding: 22px;
  border: 1px solid var(--rx-linha);
  border-radius: 16px;
  background: var(--rx-painel);
}

.rx-page .rx-preco h3 {
  margin: 0 0 14px;
  color: var(--rx-amarelo);
  font-size: 24px;
}

.rx-page .rx-preco table {
  width: 100%;
  border-collapse: collapse;
}

.rx-page .rx-preco th,
.rx-page .rx-preco td {
  padding: 10px 0;
  border-top: 1px solid var(--rx-linha);
  color: var(--rx-texto);
  font-size: 15px;
  text-align: left;
  vertical-align: top;
}

.rx-page .rx-preco th {
  border-top: 0;
  color: var(--rx-texto-suave);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rx-page .rx-preco td:nth-child(n + 2),
.rx-page .rx-preco th:nth-child(n + 2) {
  width: 76px;
  text-align: right;
  white-space: nowrap;
}

.rx-page .rx-preco td:last-child {
  color: var(--rx-amarelo);
  font-weight: 700;
}

.rx-page .rx-aviso {
  padding: 14px 18px;
  border-left: 4px solid var(--rx-amarelo);
  border-radius: 0 12px 12px 0;
  background: var(--rx-painel);
  color: var(--rx-texto);
}

.rx-page .rx-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 18px 0 26px;
}

.rx-page .rx-numeros div {
  padding: 20px;
  border: 1px solid var(--rx-linha);
  border-radius: 14px;
  background: var(--rx-painel);
}

.rx-page .rx-numeros strong {
  display: block;
  color: var(--rx-amarelo);
  font-family: var(--rx-fonte-titulo);
  font-size: 22px;
}

.rx-page .rx-numeros span {
  display: block;
  color: #d8dce0;
  font-size: 14.5px;
  line-height: 1.45;
}

@media (max-width: 991px) {
  .rx-meia {
    padding: 48px 0 24px;
  }

  .rx-meia > .container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .rx-meia-card {
    min-height: 0;
  }

  .rx-meia-card strong {
    font-size: 60px;
  }

  .rx-star {
    padding: 24px 0 48px;
  }

  .rx-star-copy {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }

  body.mc-novo .header-top .mc-ribbon-logo {
    height: 36px;
  }
}

/* o logo do Roxy é colorido: sem o filtro que deixava o logo anterior branco */
body.mc-novo .header-top .mc-ribbon-logo,
body.mc-novo footer#rodape .mc-footer-brand img,
body.mc-novo .footer-logo img {
  filter: none !important;
}

/* ---------- Página de cinemas ---------- */
.rx-unidades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 18px;
}

.rx-unidade {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rx-linha);
  border-radius: 18px;
  background: var(--rx-painel);
}

.rx-unidade-foto {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.rx-unidade-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.rx-unidade:hover .rx-unidade-foto img {
  transform: scale(1.04);
}

.rx-unidade-corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px;
}

.rx-unidade-corpo h3 {
  margin: 4px 0 6px;
  color: var(--rx-texto);
  font-size: 26px;
  font-weight: 700;
}

.rx-unidade-corpo p {
  margin: 0 0 12px;
  color: #d8dce0;
  font-size: 15px;
  line-height: 1.55;
}

.rx-unidade-corpo .rx-unidade-salas {
  color: var(--rx-amarelo);
  font-weight: 600;
}

.rx-unidade-corpo ul {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  color: var(--rx-texto-suave);
  font-size: 14.5px;
  line-height: 1.9;
}

.rx-unidade-corpo ul i {
  width: 18px;
  color: var(--rx-amarelo);
}

.rx-unidade-corpo ul a {
  color: var(--rx-texto);
}

.rx-unidade-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.rx-btn.rx-btn-linha,
body.mc-novo .rx-btn.rx-btn-linha {
  border: 1px solid var(--rx-amarelo);
  background: transparent;
  color: var(--rx-amarelo) !important;
}

.rx-btn.rx-btn-linha:hover,
body.mc-novo .rx-btn.rx-btn-linha:hover {
  background: var(--rx-amarelo);
  color: var(--rx-sobre-marca) !important;
}

.rx-page .rx-fotos img {
  height: auto;
  aspect-ratio: 16 / 10;
}

/* lista de serviços/promoções: título sobre a arte */
body.mc-novo .promos-produtos .prom a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
}

body.mc-novo .promos-produtos .prom .rx-prom-titulo {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 44px 20px 16px;
  background: linear-gradient(to top, rgba(8, 13, 18, 0.92), rgba(8, 13, 18, 0));
  color: var(--rx-texto);
  font-family: var(--rx-fonte-titulo);
  font-size: 22px;
  font-weight: 700;
}

body.mc-novo .promos-produtos .prom a:hover .rx-prom-titulo {
  color: var(--rx-amarelo);
}

/* cartões de preço no celular: uma linha por faixa, rótulo à esquerda e valor à direita */
@media (max-width: 991px) {
  .rx-meia-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .rx-meia-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "dias valor" "inteira valor";
    align-items: center;
    gap: 4px 16px;
    width: 100%;
    padding: 16px 18px;
  }

  .rx-meia-card > span {
    grid-area: dias;
    font-size: 16px;
  }

  .rx-meia-card em {
    grid-area: inteira;
  }

  .rx-meia-card strong {
    grid-area: valor;
    font-size: 48px;
    line-height: 1;
    white-space: nowrap;
  }

  .rx-meia-card strong small {
    font-size: 16px;
  }
}