/* ==========================================================
   Sistema de diseño — Museo de Ropa · REVENTÓN
   La base sigue saliendo del logo: crema, verde, oro y coral
   sobre marrón tinta. La campaña le suma la voz del reventón:
   rojo fuego y amarillo grito, contraste de afiche callejero.
   ========================================================== */

:root {
  /* --- Color: identidad Museo --- */
  --tinta:      #14100e;   /* pared del museo, marrón casi negro */
  --tinta-2:    #1d1815;
  --tinta-3:    #2a221c;
  --papel:      #f3e9d7;   /* papel de catálogo */
  --papel-2:    #e8dbc4;
  --crema:      #fbe0ac;   /* crema del logotipo */
  --verde:      #2f9e7e;   /* verde del logotipo — señal positiva */
  --verde-osc:  #24775f;
  --oro:        #e29a2c;   /* acento secundario */
  --coral:      #e0553c;
  --humo:       #9a8f84;
  --wa:         #25d366;

  /* --- Color: campaña REVENTÓN ---
     Dos tintas planas, como un afiche impreso de apuro: el fuego grita
     y el rayo subraya. Todo lo urgente se dice con estas dos. */
  --fuego:      #ff3b12;   /* rojo reventón — el color de la campaña */
  --fuego-osc:  #c22503;
  --rayo:       #ffd400;   /* amarillo grito — remates y subrayados */
  --rayo-osc:   #c9a600;

  --texto:            var(--papel);
  --texto-suave:      #bdb0a0;
  --sobre-papel:      #211a15;
  --sobre-papel-suave:#6d6157;

  /* --- Tipografía --- */
  --fuente-display: 'Archivo Black', 'Arial Black', 'Helvetica Neue', sans-serif;
  --fuente-texto:   'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;

  --paso--2: clamp(0.69rem, 0.67rem + 0.1vw, 0.75rem);
  --paso--1: clamp(0.8rem, 0.77rem + 0.15vw, 0.88rem);
  --paso-0:  clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem);
  --paso-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.4rem);
  --paso-2:  clamp(1.45rem, 1.3rem + 0.75vw, 2rem);
  --paso-3:  clamp(1.9rem, 1.6rem + 1.5vw, 3rem);
  --paso-4:  clamp(2.8rem, 1.9rem + 4.5vw, 6.5rem);
  /* El titular de campaña: ocupa el ancho, es la pieza gráfica principal. */
  --paso-grito: clamp(2.4rem, 14.2vw, 9rem);

  /* --- Espaciado --- */
  --e-1: 0.35rem;
  --e-2: 0.65rem;
  --e-3: 1rem;
  --e-4: 1.5rem;
  --e-5: 2.25rem;
  --e-6: 3.5rem;
  --e-7: 5.5rem;

  /* --- Estructura --- */
  --ancho-max: 1280px;
  --borde-fino: 1px solid var(--sobre-papel);
  --radio: 2px;                 /* casi recto: cartel, no app */
  --barra-alto: 60px;
  --resumen-alto: 96px;

  /* ==========================================================
     PORTADA DEL HERO
     Dejá la imagen nueva en frontend/assets/ y apuntá acá.
     · --hero-portada      la imagen. Si el archivo no existe, se
       pinta sola la capa de respaldo (ciudad.webp): nada se rompe.
     · --hero-ajuste       cover (llena el marco, recorta) o contain
       (entra completa, sin recortar). Nunca deforma: no uses 100% 100%.
     · --hero-foco / --hero-foco-movil  qué parte de la foto queda a la
       vista en cada formato. Ej.: 'center 30%', 'left center'.
     ========================================================== */
  --hero-portada:     url('../assets/reventon-portada.webp');
  --hero-respaldo:    url('../assets/ciudad.webp');
  --hero-ajuste:      cover;
  --hero-foco:        center 32%;
  --hero-foco-movil:  center 28%;
  /* Velo sobre la foto: sin él el titular no se lee en fotos claras. */
  --hero-velo:        0.5;

  /* --- Movimiento --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rapido: 140ms var(--ease);
  --medio: 280ms var(--ease);
  --lento: 620ms var(--ease);

  /* --- Sombra dura tipo impresión --- */
  --sombra-dura: 4px 4px 0 var(--sobre-papel);
  --sombra-dura-coral: 4px 4px 0 var(--coral);
  --sombra-dura-fuego: 4px 4px 0 var(--fuego);
  --sombra-suave: 0 18px 40px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

/* Trama de puntos tipo cómic impreso, reutilizable. */
.trama-puntos {
  background-image: radial-gradient(var(--punto, rgba(243, 233, 215, 0.16)) 1px, transparent 1.2px);
  background-size: 6px 6px;
}

/* Rayado diagonal de cinta de obra: bordes de campaña, franjas de urgencia. */
.trama-cinta {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--cinta-a, var(--rayo)) 0 12px,
    var(--cinta-b, var(--tinta)) 12px 24px
  );
}