/**
 * Micro Cine Molina — variables de diseño
 * ---------------------------------------------------------------
 * Identidad tomada de las piezas de campaña del cliente ("¡MUY PRONTO!",
 * logo MOLINA, casa en blanco y negro sobre campo rojo; originales en
 * docs/referencias/). Todo color y toda fuente vive aquí.
 */

:root {

    /* ---- Paleta -----------------------------------------------------------
       Las piezas usan DOS rojos, y los dos están medidos sobre los
       originales, no elegidos a ojo:
       - rojo cartel (#c80404): el campo de fondo de los afiches.
       - rojo institucional (#9b1617): el confirmado en el checklist. En los
         afiches es la "losa" oscura detrás de la casa (#8d191a medido).
       El cartel es para superficies grandes; el institucional, para botones,
       enlaces y acentos sobre papel, donde el cartel encandila. */
    --color-rojo-cartel:  #c80404;
    --color-rojo:         #9b1617;
    --color-rojo-oscuro:  #731011;

    --color-negro:        #0f0e0d; /* el "suelo" negro de los afiches */
    --color-negro-suave:  #1c1a18;
    --color-papel:        #f4efe7;
    --color-papel-oscuro: #e8e0d2;
    --color-crema:        #efe7dc; /* el sol y las letras sobre rojo */

    --color-texto:        #1a1715;
    --color-texto-invertido: #f4efe7;
    --color-texto-tenue:  #5f574f; /* ~6:1 sobre papel: pasa AA en cuerpo */
    --color-borde:        #d8cfc0;

    --color-fondo:        var(--color-papel);
    --color-fondo-alt:    var(--color-papel-oscuro);
    --color-acento:       var(--color-rojo);

    /* Estados de cupo. Son semánticos, no de marca: el ámbar solo aparece
       para "quedan pocos", nunca como decoración. */
    --color-exito:        #2f6b40;
    --color-alerta:       #9a5510;
    --color-error:        #b3261e;

    /* Alias heredados: vistas antiguas todavía los nombran. El naranjo ya
       no existe en la identidad, así que apunta a la crema. */
    --color-naranjo:      var(--color-rojo);
    --color-naranjo-suave:var(--color-crema);

    /* ---- Tipografía ----------------------------------------------------
       Dos familias, como en las piezas del cliente:

       1. Cartel: la grotesca condensada de "¡MUY PRONTO!". Solo titulares,
          siempre en mayúsculas. Anton desde Google Fonts.
       2. Neulis (Fenotype), confirmada en el checklist: la geométrica de
          "Micro cine Molina" bajo el logo. Todo lo demás. Se carga con el
          kit de Adobe Fonts (ver layouts/publico.php); mientras no esté,
          Jost —la geométrica gratuita más cercana— la reemplaza. */
    --fuente-cartel:  'Anton', 'Oswald', Impact, 'Arial Narrow', sans-serif;
    --fuente-titulos: 'neulis-neue', 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fuente-cuerpo:  'neulis-sans', 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Ficha técnica pequeña: director · año · duración. Neulis Cursive es un
       sans monolínea con trazos de salida caligráficos, no un script: su
       respaldo es la misma Jost. Nunca en mayúsculas ni con tracking. */
    --fuente-detalle: 'neulis-cursive', 'Jost', var(--fuente-cuerpo);

    /* Escala tipográfica fluida: clamp(mínimo, preferido, máximo) */
    --texto-xs:    clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --texto-sm:    clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
    --texto-base:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --texto-md:    clamp(1.125rem, 1.06rem + 0.35vw, 1.3125rem);
    --texto-lg:    clamp(1.375rem, 1.22rem + 0.8vw, 1.75rem);
    --texto-xl:    clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);
    --texto-2xl:   clamp(2.25rem, 1.7rem + 2.8vw, 3.75rem);
    --texto-3xl:   clamp(2.75rem, 1.9rem + 4.2vw, 5rem);

    /* Solo para la grotesca de cartel. Anton es muy condensada: a igual
       tamaño ocupa la mitad de ancho que la Jost, por eso su escala arranca
       más arriba. El máximo está pensado para que el titular del hero
       quepa en 3–4 líneas a 1440px. */
    --texto-cartel-md: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
    --texto-cartel-lg: clamp(2.75rem, 1.7rem + 5vw, 5.75rem);
    --texto-cartel-xl: clamp(3.25rem, 1.8rem + 6.2vw, 7rem);

    --altura-linea-titulo: 1.12;
    --altura-linea-cartel: 0.92;
    --altura-linea-texto:  1.6;
    --tracking-mayus:      0.08em;

    /* ---- Espaciado (escala consistente, mobile-first) ------------------- */
    --espacio-xs:  0.5rem;
    --espacio-sm:  0.875rem;
    --espacio-md:  1.5rem;
    --espacio-lg:  2.5rem;
    --espacio-xl:  4rem;
    --espacio-2xl: 6rem;

    /* Espaciado fluido para separaciones grandes entre secciones */
    --espacio-seccion: clamp(3rem, 2.2rem + 4vw, 7rem);

    /* ---- Layout ---------------------------------------------------------- */
    --ancho-maximo:         76rem;   /* 1216px aprox */
    --ancho-maximo-angosto: 42rem;
    --radio-borde:          2px;     /* casi recto: registro editorial, no "app" */
    --radio-borde-md:       4px;

    /* ---- Sombra sutil (tarjetas, menú móvil) ------------------------------ */
    --sombra-sm: 0 1px 3px rgba(20, 18, 16, 0.12);
    --sombra-md: 0 8px 24px rgba(20, 18, 16, 0.18);
    --sombra-lg: 0 16px 40px rgba(20, 18, 16, 0.28);

    /* ---- Reglas finas -------------------------------------------------------
       El sitio no tiene fotografías todavía. La estructura visual la cargan
       las líneas: por eso son un token y no un valor suelto repetido. */
    --regla:          1px solid var(--color-borde);
    --regla-fuerte:   2px solid var(--color-texto);
    --regla-invertida: 1px solid rgba(244, 239, 231, 0.18);

    /* ---- Transiciones ------------------------------------------------------ */
    --transicion-rapida: 150ms ease;
    --transicion-normal: 250ms ease;
    --curva-suave: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* ---- Targets táctiles: nunca por debajo de esto (requisito mobile) ---- */
    --target-tactil-min: 44px;

    /* ---- z-index con nombre, para no perder el orden ------------------------ */
    --z-nav-movil: 100;
    --z-whatsapp:  90;
    --z-header:    80;
    --z-modal:     200;
}

/* Modo oscuro deliberado en la franja "hero": no depende de prefers-color-scheme,
   es una decisión editorial del diseño, no una preferencia de sistema. */
.tema-oscuro {
    --color-fondo:    var(--color-negro);
    --color-fondo-alt: var(--color-negro-suave);
    --color-texto:    var(--color-texto-invertido);
    --color-texto-tenue: #b9aea2;
    --color-borde:    #35302b;
    --color-acento:   var(--color-crema);
    /* Pinta su propio fondo: un tema que solo cambia variables deja el texto
       claro sobre el papel heredado y la sección se vuelve ilegible. */
    background: var(--color-negro);
    color: var(--color-texto-invertido);
}

/* Campo rojo de afiche. Sobre el rojo cartel solo funciona la crema: el
   negro queda en 3,2:1 y el rojo institucional directamente desaparece. */
.tema-rojo {
    --color-fondo:    var(--color-rojo-cartel);
    --color-texto:    var(--color-crema);
    --color-texto-tenue: rgba(239, 231, 220, 0.95); /* a 0.86 quedaba en 3,9:1 */
    --color-borde:    rgba(239, 231, 220, 0.35);
    --color-acento:   var(--color-crema);
    background: var(--color-rojo-cartel);
    color: var(--color-crema);
}