/**
 * Estilos base: tipografía, cuerpo, contenedores y utilidades pequeñas.
 * Mobile-first: todo lo de aquí es el punto de partida en 375px;
 * los ajustes hacia pantallas más grandes van en @media (min-width: ...).
 */

body {
    font-family: var(--fuente-cuerpo);
    font-size: var(--texto-base);
    color: var(--color-texto);
    background: var(--color-fondo);
}

/* ---- Jerarquía tipográfica ---------------------------------------------
   H1 y H2: grotesca de cartel, siempre en mayúsculas, como "¡MUY PRONTO!".
   H3 y H4: la geométrica (Neulis / Jost) en semi-negrita: nombres de
   películas y talleres, que se leen de cerca y en tarjetas chicas.
   El cuerpo nunca va en la de cartel: condensada y en bloque, cansa. */
h1, h2, h3, h4 {
    color: var(--color-texto);
    text-wrap: balance;
}

h1, h2 {
    font-family: var(--fuente-cartel);
    font-weight: 400; /* Anton tiene un solo peso, y ya es negro */
    line-height: var(--altura-linea-cartel);
    text-transform: uppercase;
    letter-spacing: 0.005em;
}

h1 { font-size: var(--texto-cartel-lg); }
h2 { font-size: var(--texto-cartel-md); }

h3, h4 {
    font-family: var(--fuente-titulos);
    font-weight: 600;
    line-height: var(--altura-linea-titulo);
    letter-spacing: -0.01em;
}

h3 { font-size: var(--texto-lg); }
h4 { font-size: var(--texto-md); }

body {
    line-height: var(--altura-linea-texto);
}

p {
    max-width: 65ch;
}

/* Horarios, años, precios y cupos se leen en columna: las cifras deben
   ocupar todas el mismo ancho o la lista "baila" al cambiar de número. */
time,
.tarjeta__meta,
.ficha-tecnica dd,
.funcion-fila__fecha,
.funcion-item__hora,
.datos-rapidos dd {
    font-variant-numeric: tabular-nums;
}

a {
    transition: color var(--transicion-rapida);
}

/* ---- Contenedores --------------------------------------------------- */
.contenedor {
    width: 100%;
    max-width: var(--ancho-maximo);
    margin-inline: auto;
    padding-inline: var(--espacio-md);
}

.contenedor--angosto {
    max-width: var(--ancho-maximo-angosto);
}

.seccion {
    padding-block: var(--espacio-seccion);
}

.seccion--compacta {
    padding-block: var(--espacio-lg);
}

/* ---- Utilidades ------------------------------------------------------- */
.texto-centro { text-align: center; }

/* Antetítulo de sección: rótulo corto sobre el titular, con un punto lleno
   delante — el mismo círculo del sol de los afiches y del punto del logo. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6em;
    font-family: var(--fuente-cuerpo);
    font-size: var(--texto-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-mayus);
    text-transform: uppercase;
    color: var(--color-acento);
    margin-bottom: var(--espacio-sm);
}

.eyebrow::before {
    content: '';
    width: 0.62em;
    height: 0.62em;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Centrada, la raya va a ambos lados para no descuadrar el eje. */
.texto-centro .eyebrow,
.eyebrow--centrado {
    justify-content: center;
}



/* ---- Grano de película -------------------------------------------------
   Ruido monocromo generado por SVG, sin ninguna descarga: el mismo papel
   impreso de los afiches del cliente. Va en ::after, siempre por debajo del
   contenido. En soft-light, para que ensucie el color sin lavarlo. */
.grano {
    position: relative;
    isolation: isolate;
}

.grano::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
}

.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.saltar-navegacion {
    position: absolute;
    left: var(--espacio-md);
    top: -100px;
    z-index: 999;
    background: var(--color-negro);
    color: var(--color-texto-invertido);
    padding: var(--espacio-xs) var(--espacio-md);
    border-radius: var(--radio-borde);
    transition: top var(--transicion-rapida);
}

.saltar-navegacion:focus {
    top: var(--espacio-xs);
}

.placeholder-aviso {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--texto-xs);
    color: var(--color-texto-tenue);
    border: 1px dashed var(--color-borde);
    border-radius: var(--radio-borde-md);
    padding: 0.15em 0.6em;
}

/* ---- Grillas responsivas reutilizables ------------------------------- */
.grilla {
    display: grid;
    gap: var(--espacio-md);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .grilla--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
    .grilla--3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .grilla--4 { grid-template-columns: repeat(4, 1fr); }
}