/* Estilos de las páginas de texto (landings de película y de cine) y del
   listado que ve quien entra sin JavaScript. Mismo lenguaje monocromo que la
   app, pero como documento: se leen de arriba abajo, no son un mapa. */
:root {
  --ink: #1D1D1F;
  --gris: #6E6E73;
  --superficie: #F0F0F3;
  --linea: #E5E5EA;
  --fuente-marca: "Poppins", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font: 400 15px/1.6 var(--fuente);
  -webkit-font-smoothing: antialiased;
}
main, .cabecera, footer { max-width: 720px; margin: 0 auto; padding: 0 20px; }

.cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding-top: 18px; padding-bottom: 18px;
}
.cabecera .marca { display: flex; align-items: center; gap: 8px; font: 600 16px var(--fuente-marca); color: var(--ink); text-decoration: none; letter-spacing: -.2px; }
.cabecera .marca i { color: #8E8E93; font-style: normal; }
.cabecera .mapa { font: 600 13px var(--fuente); color: #fff; background: var(--ink); padding: 9px 14px; border-radius: 20px; text-decoration: none; white-space: nowrap; }

h1 { margin: 14px 0 10px; font: 600 30px/1.15 var(--fuente-marca); letter-spacing: -.8px; text-wrap: pretty; }
h2 { margin: 34px 0 12px; font: 600 17px var(--fuente-marca); letter-spacing: -.2px; }
h2 small, h3 small { font-weight: 400; color: var(--gris); font-size: .82em; }
h3 { margin: 0 0 6px; font: 600 15px var(--fuente); }
h3 a { color: var(--ink); text-decoration: none; }
h3 a:hover { text-decoration: underline; }
.intro { color: var(--gris); margin: 0 0 8px; }
.sinopsis { color: var(--gris); margin: 0 0 14px; }

.cta {
  display: inline-block; margin: 6px 0 4px; padding: 12px 18px; border-radius: 14px;
  background: var(--ink); color: #fff; text-decoration: none; font: 600 14px var(--fuente);
}

.dia { border-top: 1px solid var(--linea); padding-top: 4px; }
.cine { padding: 14px 0; border-bottom: 1px solid var(--linea); }
.cine:last-child { border-bottom: none; }

.horas { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.hora {
  display: inline-block; padding: 7px 11px; border-radius: 10px;
  background: var(--superficie); color: var(--ink);
  font: 600 13px var(--fuente); text-decoration: none;
}
a.hora:hover { background: var(--ink); color: #fff; }

ul { padding-left: 0; list-style: none; }
ul li { margin-bottom: 18px; }
ul.cines li { margin-bottom: 6px; }
a { color: var(--ink); }

footer { border-top: 1px solid var(--linea); margin-top: 40px; padding-top: 18px; padding-bottom: 40px; }
footer p { margin: 0 0 6px; font-size: 12.5px; color: var(--gris); }

.seo-fallback { max-width: 720px; margin: 0 auto; padding: 0 20px 40px; }