/**
 * Estilos específicos de cada página pública.
 * La estructura común (header, footer, botones, tarjetas) vive en
 * layout.css y componentes.css; aquí solo lo particular de cada vista.
 */

/* ======================================================================
   ENCABEZADO DE SECCIÓN (compartido por todas las secciones con título)
   ====================================================================== */
.seccion-encabezado {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-sm);
    margin-bottom: var(--espacio-lg);
}

@media (min-width: 768px) {
    .seccion-encabezado {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--espacio-lg);
    }
}

.seccion-encabezado__bajada {
    margin-top: var(--espacio-sm);
    color: var(--color-texto-tenue);
    max-width: 48ch;
}

/* Heredado de vistas anteriores. */
.seccion-encabezado__enlace {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-tactil-min);
    font-weight: 600;
    font-size: var(--texto-sm);
}

/* ======================================================================
   HOME · PORTADA
   El campo rojo del afiche "¡MUY PRONTO!" con la casa en blanco y negro.
   La imagen es la pieza de campaña del cliente, recortada sin el texto.
   ====================================================================== */
.portada {
    overflow: hidden;
}

.portada__grilla {
    display: grid;
    grid-template-columns: 1fr;
    align-items: end;
    gap: var(--espacio-lg);
    padding-top: var(--espacio-xl);
}

.portada__texto {
    position: relative;
    z-index: 1;
}

.portada__titulo {
    font-size: var(--texto-cartel-xl);
    color: var(--color-crema);
    max-width: 13ch;
    margin-bottom: var(--espacio-md);
}

.portada__bajada {
    font-size: var(--texto-md);
    line-height: 1.5;
    max-width: 40ch;
    margin-bottom: var(--espacio-lg);
}

.portada__acciones {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-sm);
}

@media (min-width: 480px) {
    .portada__acciones {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Panorámica de la campaña (los dos cuadros de Instagram unidos): la casa
   entera, la losa, el sol y el suelo negro. El suelo de la imagen cae justo
   sobre la franja negra de datos, como en los afiches. El logo oficial va
   encima, en HTML, sobre el campo rojo que quedó libre a la derecha. */
.portada__imagen {
    position: relative;
    margin: 0 calc(var(--espacio-md) * -1);
}

.portada__imagen img {
    display: block;
    width: 100%;
    height: auto;
}

.portada__logo {
    position: absolute;
    right: 5%;
    top: 38%;
    width: 36%;
    max-width: 320px;
}

.portada__logo img {
    width: 100%;
    height: auto;
}

@media (min-width: 900px) {
    .portada__grilla {
        /* El texto toma algo menos de la mitad; la panorámica el resto y
           sangra hasta el borde derecho de la pantalla (su lado derecho es
           campo rojo, así que se funde con la sección). */
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: var(--espacio-lg);
        padding-top: var(--espacio-lg);
        align-items: end;
    }

    .portada__texto {
        align-self: center;
        padding-bottom: var(--espacio-lg);
    }

    /* --texto-cartel-xl llega a 7rem en pantallas anchas; aquí se usa una
       escala propia para que el bloque de texto mida parecido a la foto. */
    .portada__titulo {
        font-size: clamp(2.5rem, 1.3rem + 3.2vw, 4.5rem);
        margin-bottom: var(--espacio-sm);
    }

    .portada__bajada {
        margin-bottom: var(--espacio-md);
    }

    .portada__imagen {
        margin: 0 calc((100vw - min(100vw, var(--ancho-maximo))) / -2 - var(--espacio-md)) 0 0;
    }

    .portada__logo {
        top: 40%;
        width: 30%;
    }
}

/* El suelo negro de los afiches, con los tres datos que definen la sala. */
.portada__suelo {
    position: relative;
    z-index: 1;
    background: var(--color-negro);
    color: var(--color-crema);
}

.portada__datos {
    display: grid;
    grid-template-columns: 1fr;
    list-style: none;
}

.portada__datos li {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    padding-block: var(--espacio-sm);
    font-size: var(--texto-sm);
    color: #cfc5b8;
    border-top: 1px solid rgba(239, 231, 220, 0.12);
}

.portada__datos li:first-child { border-top: none; }

.portada__datos strong {
    font-family: var(--fuente-cartel);
    font-weight: 400;
    font-size: var(--texto-lg);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--color-crema);
    white-space: nowrap;
}

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

    /* En columnas, el dato grande arriba y la aclaración debajo: lado a
       lado, la aclaración se quebraba en dos líneas junto a la cifra. */
    .portada__datos li {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15em;
        border-top: none;
        border-left: 1px solid rgba(239, 231, 220, 0.12);
        padding: var(--espacio-md) var(--espacio-md);
    }

    .portada__datos li:first-child {
        border-left: none;
        padding-left: 0;
    }
}

/* ======================================================================
   HOME · PRÓXIMA FUNCIÓN
   Lo que está pasando ahora, con todo lo necesario para decidir y reservar
   sin abrir otra página.
   ====================================================================== */
.proxima__grilla {
    display: grid;
    gap: var(--espacio-lg);
    grid-template-columns: 1fr;
    align-items: center;
}

.proxima__afiche {
    max-width: 22rem;
    width: 100%;
    box-shadow: 18px 18px 0 var(--color-negro);
}

@media (min-width: 768px) {
    .proxima__grilla {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: var(--espacio-xl);
    }
}

.proxima__cuando {
    display: flex;
    align-items: center;
    gap: var(--espacio-sm);
    margin-bottom: var(--espacio-sm);
}

.proxima__dia {
    font-family: var(--fuente-cartel);
    font-size: clamp(3.5rem, 2.8rem + 3vw, 5.5rem);
    line-height: 0.85;
    color: var(--color-rojo-cartel);
}

.proxima__cuando-texto {
    display: flex;
    flex-direction: column;
    font-size: var(--texto-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-mayus);
    line-height: 1.35;
}

.proxima__titulo {
    font-size: var(--texto-cartel-md);
    margin-bottom: var(--espacio-sm);
}

.proxima__titulo a:hover {
    color: var(--color-rojo);
}

.proxima__datos {
    font-weight: 500;
}

.proxima__director {
    font-family: var(--fuente-detalle);
    font-size: var(--texto-sm);
    color: var(--color-texto-tenue);
}

.proxima__sinopsis {
    margin-top: var(--espacio-sm);
    color: var(--color-texto-tenue);
    max-width: 52ch;
}

.proxima__nota {
    margin-top: var(--espacio-sm);
    display: inline-block;
    font-size: var(--texto-sm);
    font-weight: 600;
    color: var(--color-rojo);
    border-left: 3px solid var(--color-rojo-cartel);
    padding-left: 0.7em;
}

.proxima__acceso {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-md);
    margin-top: var(--espacio-md);
    padding-top: var(--espacio-sm);
    border-top: var(--regla);
}

.proxima__precio {
    font-weight: 600;
    font-size: var(--texto-sm);
}

.proxima__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-sm);
    margin-top: var(--espacio-md);
}

/* ======================================================================
   HOME · CARTELERA
   ====================================================================== */
.cartelera-portada {
    padding-top: 0;
}

.cartelera-portada__nota {
    color: var(--color-texto-tenue);
}

/* ======================================================================
   HOME · TALLERES Y ACTIVIDADES (banda negra)
   ====================================================================== */
.actividades h2 {
    color: var(--color-crema);
}

.en-prensa {
    margin-top: var(--espacio-xl);
    padding-top: var(--espacio-md);
    border-top: var(--regla-invertida);
    display: grid;
    gap: var(--espacio-sm);
}

@media (min-width: 768px) {
    .en-prensa {
        grid-template-columns: 9rem 1fr;
        align-items: start;
    }
}

.en-prensa__rotulo {
    font-size: var(--texto-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-mayus);
    color: var(--color-texto-tenue);
    padding-top: 0.7em;
}

.en-prensa__lista {
    list-style: none;
}

.en-prensa__lista a {
    display: grid;
    gap: 0.15em;
    padding-block: var(--espacio-xs);
    min-height: var(--target-tactil-min);
    border-bottom: 1px solid rgba(239, 231, 220, 0.1);
}

.en-prensa__medio {
    font-size: var(--texto-xs);
    font-weight: 600;
    color: #f0b46a;
    text-transform: uppercase;
    letter-spacing: var(--tracking-mayus);
}

.en-prensa__titulo {
    font-weight: 500;
}

.en-prensa__lista a:hover .en-prensa__titulo {
    text-decoration: underline;
    text-decoration-color: var(--color-rojo-cartel);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* ======================================================================
   HOME · LA SALA
   ====================================================================== */
.sala__grilla {
    display: grid;
    gap: var(--espacio-lg);
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 900px) {
    .sala__grilla {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: var(--espacio-2xl);
    }
}

/* Bloque negro con la cifra y la planta de butacas: el dato que define al
   proyecto, dicho en imagen. */
.sala__visual {
    display: grid;
    justify-items: center;
    gap: var(--espacio-md);
    padding: var(--espacio-lg) var(--espacio-md);
    background: var(--color-negro);
    color: var(--color-crema);
}

.sala__cifra {
    font-family: var(--fuente-cartel);
    font-size: clamp(6rem, 4rem + 10vw, 11rem);
    line-height: 0.8;
    color: var(--color-rojo-cartel);
    max-width: none;
}

.sala__pie {
    font-size: var(--texto-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-mayus);
    color: #b9aea2;
}

.sala__bajada {
    margin-top: var(--espacio-md);
    font-size: var(--texto-md);
    color: var(--color-texto-tenue);
}

.sala__hechos {
    margin-block: var(--espacio-lg) var(--espacio-md);
    border-top: var(--regla-fuerte);
}

.sala__hechos div {
    display: grid;
    gap: 0.2em;
    padding-block: var(--espacio-sm);
    border-bottom: var(--regla);
}

@media (min-width: 640px) {
    .sala__hechos div {
        grid-template-columns: 10rem 1fr;
        gap: var(--espacio-md);
    }
}

.sala__hechos dt {
    font-size: var(--texto-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-mayus);
    color: var(--color-rojo);
    padding-top: 0.2em;
}

.sala__hechos dd {
    font-weight: 500;
}

/* ---- Planta de la sala (12 butacas) ------------------------------------- */
.sala-planta {
    --planta-ancho: clamp(11rem, 30vw, 15rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-sm);
}

.sala-planta__pantalla {
    width: var(--planta-ancho);
    text-align: center;
}

.sala-planta__barra {
    height: 4px;
    background: var(--color-crema);
    box-shadow: 0 0 20px rgba(239, 231, 220, 0.35);
}

.sala-planta__etiqueta {
    display: block;
    margin-top: var(--espacio-xs);
    font-size: 0.7rem;
    letter-spacing: var(--tracking-mayus);
    text-transform: uppercase;
    color: #8f857a;
}

.sala-planta__butacas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.7rem;
    width: var(--planta-ancho);
}

.sala-planta__butaca {
    aspect-ratio: 1.15;
    border: 1.5px solid rgba(239, 231, 220, 0.45);
    border-radius: 0.55rem 0.55rem 0.16rem 0.16rem;
}

.sala-planta__butaca--tomada {
    background: var(--color-rojo-cartel);
    border-color: var(--color-rojo-cartel);
}

/* ======================================================================
   HOME · CIERRE (campo rojo con el logo)
   ====================================================================== */
.cierre {
    padding-block: var(--espacio-seccion);
}

.cierre__grilla {
    display: grid;
    gap: var(--espacio-lg);
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .cierre__grilla {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        gap: var(--espacio-2xl);
        align-items: start;
    }
}

.cierre__logo {
    width: min(100%, 26rem);
    height: auto;
}

.cierre__titulo {
    font-size: var(--texto-cartel-lg);
    color: var(--color-crema);
    margin-bottom: var(--espacio-sm);
}

.cierre__bajada {
    font-size: var(--texto-md);
    margin-bottom: var(--espacio-lg);
}

.cierre__acciones {
    list-style: none;
    display: grid;
    gap: var(--espacio-sm);
    grid-template-columns: 1fr;
}

@media (min-width: 480px) {
    .cierre__acciones {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.cierre__acciones .boton {
    width: 100%;
}

/* Club: segundo nivel del cierre, sobre el negro del suelo. */
.club {
    margin-top: var(--espacio-xl);
    padding: var(--espacio-lg) var(--espacio-md);
    background: var(--color-negro);
    color: var(--color-crema);
}

.club__titulo {
    font-family: var(--fuente-cartel);
    font-size: var(--texto-xl);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: var(--espacio-xs);
}

.club__texto {
    font-size: var(--texto-sm);
    color: #cfc5b8;
    margin-bottom: var(--espacio-md);
}

.club__formulario {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-sm);
}

@media (min-width: 480px) {
    .club__formulario { flex-direction: row; }
}

.club__formulario input {
    flex: 1;
    min-width: 0;
    min-height: var(--target-tactil-min);
    font-size: 16px; /* evita el zoom de iOS */
    padding: 0.7em 0.9em;
    border: 1px solid rgba(239, 231, 220, 0.4);
    border-radius: var(--radio-borde);
    background: transparent;
    color: var(--color-crema);
}

.club__formulario input::placeholder { color: rgba(239, 231, 220, 0.6); }

.club__formulario input:focus {
    outline: 2px solid var(--color-crema);
    outline-offset: 1px;
}

/* En el club el primario es el rojo cartel: va sobre negro. */
.club .boton--negro {
    background: var(--color-rojo-cartel);
    color: var(--color-crema);
}

.club .boton--negro:hover { background: #a80303; }

/* ---- Estado vacío ------------------------------------------------------- */
.estado-vacio {
    border: 1px dashed var(--color-borde);
    padding: var(--espacio-xl) var(--espacio-md);
    text-align: center;
    background: var(--color-fondo-alt);
}

.estado-vacio p {
    max-width: 44ch;
    margin-inline: auto;
    color: var(--color-texto-tenue);
}

.estado-vacio__titulo {
    font-family: var(--fuente-cartel);
    font-size: var(--texto-xl);
    text-transform: uppercase;
    line-height: 1;
    color: var(--color-texto) !important;
    margin-bottom: var(--espacio-xs);
}

/* ======================================================================
   PÁGINAS INTERNAS: encabezado compartido
   Una franja roja de afiche con el nombre de la sección en cartel.
   ====================================================================== */
.cabecera-pagina {
    background: var(--color-rojo-cartel);
    color: var(--color-crema);
    padding-block: var(--espacio-xl) var(--espacio-lg);
    border-bottom: 10px solid var(--color-negro);
}

.cabecera-pagina__titulo {
    font-size: var(--texto-cartel-lg);
    color: var(--color-crema);
    margin-bottom: var(--espacio-sm);
}

.cabecera-pagina__bajada {
    font-size: var(--texto-md);
    color: var(--color-crema);
    max-width: 52ch;
}

/* ======================================================================
   CARTELERA
   ====================================================================== */
.cartelera-mes + .cartelera-mes {
    margin-top: var(--espacio-xl);
}

/* El mes es un rótulo de orientación, no un titular: más chico que un h2
   de sección, pero todavía en la grotesca de cartel. */
.cartelera-mes__titulo {
    font-size: var(--texto-xl);
    margin-bottom: var(--espacio-sm);
}

.filtro-barra {
    display: flex;
    gap: var(--espacio-xs);
    overflow-x: auto;
    padding-block: var(--espacio-sm);
    margin-bottom: var(--espacio-md);
    -webkit-overflow-scrolling: touch;
}

.filtro-barra::-webkit-scrollbar {
    display: none;
}

.filtro-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 1em;
    border-radius: 999px;
    border: 1px solid var(--color-borde);
    font-size: var(--texto-sm);
    font-weight: 600;
    white-space: nowrap;
}

.filtro-chip[aria-current="true"] {
    background: var(--color-negro);
    color: #fff;
    border-color: var(--color-negro);
}

.funcion-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-sm);
    padding-block: 0.6em;
    border-top: 1px solid var(--color-borde);
    flex-wrap: wrap;
}

.funcion-fila__fecha {
    font-weight: 700;
    font-size: var(--texto-sm);
}

.funcion-fila__nota {
    font-size: var(--texto-xs);
    color: var(--color-texto-tenue);
    width: 100%;
}

.pelicula-detalle {
    display: grid;
    gap: var(--espacio-lg);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .pelicula-detalle {
        grid-template-columns: minmax(220px, 320px) 1fr;
        align-items: start;
    }
}

.pelicula-detalle__afiche {
    aspect-ratio: 2/3;
    background: var(--color-negro-suave);
    border-radius: var(--radio-borde-md);
    overflow: hidden;
}

.ficha-tecnica {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5em 1.5em;
    font-size: var(--texto-sm);
    margin-block: var(--espacio-md);
}

@media (min-width: 480px) {
    .ficha-tecnica {
        grid-template-columns: 1fr 1fr;
    }
}

.ficha-tecnica dt {
    color: var(--color-texto-tenue);
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mayus);
}

.ficha-tecnica dd {
    font-weight: 600;
}

/* ======================================================================
   TALLERES
   ====================================================================== */
.talleres__intro {
    font-size: var(--texto-md);
    color: var(--color-texto-tenue);
    max-width: 58ch;
    margin-bottom: var(--espacio-xl);
}

.taller-tarjeta__facilitador {
    font-size: var(--texto-xs);
    color: var(--color-texto-tenue);
}

/* ======================================================================
   SERVICIOS
   ====================================================================== */
.servicio-incluye {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    font-size: var(--texto-sm);
}

.servicio-incluye li {
    display: flex;
    gap: 0.5em;
}

.servicio-incluye li::before {
    content: '—';
    color: var(--color-acento);
    flex-shrink: 0;
}

/* ======================================================================
   CONTACTO
   ====================================================================== */
.contacto-grilla {
    display: grid;
    gap: var(--espacio-xl);
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .contacto-grilla {
        grid-template-columns: 1fr 1fr;
    }
}

.contacto-info__item {
    display: flex;
    gap: var(--espacio-sm);
    padding-block: var(--espacio-sm);
    border-top: 1px solid var(--color-borde);
}

.contacto-info__item:first-child {
    border-top: none;
}

.contacto-info__etiqueta {
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mayus);
    color: var(--color-texto-tenue);
}

/* Correo y teléfono son enlaces de acción (abren cliente de correo o
   marcador), no texto corrido: necesitan área táctil completa. */
.contacto-info__item a {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-tactil-min);
    font-weight: 600;
}

.mapa-envoltorio {
    aspect-ratio: 16/10;
    border-radius: var(--radio-borde-md);
    overflow: hidden;
    background: var(--color-fondo-alt);
    margin-top: var(--espacio-md);
}

.mapa-envoltorio iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ======================================================================
   PRENSA
   ====================================================================== */
.clipping-item {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-xs);
    padding-block: var(--espacio-md);
    border-top: 1px solid var(--color-borde);
}

.clipping-item:first-child {
    border-top: none;
}

.clipping-item__medio {
    font-size: var(--texto-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-mayus);
    color: var(--color-acento);
}

.clipping-item h2 a {
    display: inline-block;
    padding-block: 0.35em;
}

.clipping-item__fecha {
    font-size: var(--texto-xs);
    color: var(--color-texto-tenue);
}