/* ==========================================================================
   Tokens — paleta muestreada directamente de nuevaweb.ai
   ========================================================================== */

:root {
  /* --- Color de marca (valores exactos del Illustrator) --- */
  --c-cielo:        #a2ebfc;
  --c-cielo-hondo:  #7fdcf4;
  --c-arena:        #fed8a7;
  --c-arena-honda:  #f7c68b;
  --c-mar:          #00d9d7;
  --c-mar-claro:    #a4eded;
  --c-menta:        #35e89d;
  --c-menta-honda:  #38be99;
  --c-coral:        #f6a583;
  --c-coral-hondo:  #f67e5a;
  --c-rojo:         #ff3d5b;
  --c-rosa:         #ff6fb2;
  --c-morado:       #504fc8;
  --c-lila:         #9f64d5;
  --c-amarillo:     #ffd94e;
  --c-naranja:      #ff7538;
  --c-verde:        #a7c24a;
  --c-tinta:        #222221;

  /* --- Roles semánticos --- */
  --color-fondo:        #fffdf7;
  --color-superficie:   #ffffff;
  --color-texto:        var(--c-tinta);
  --color-texto-suave:  #5c5c58;
  --color-borde:        var(--c-tinta);

  /* Acento por sección: cada saco lleva el suyo.
     Cada acento tiene tres piezas para cumplir contraste sin apagar la marca:
       -relleno  color vivo, para fondos y pastillas
       -sobre    color de texto que va ENCIMA del relleno (>= 4.5:1)
       -texto    versión oscura, para tipografía sobre fondos claros (>= 4.5:1) */
  --acento-ukes-relleno:      var(--c-rojo);
  --acento-ukes-sobre:        var(--c-tinta);
  --acento-ukes-texto:        #c7001f;

  --acento-kalimbas-relleno:  var(--c-morado);
  --acento-kalimbas-sobre:    #ffffff;
  --acento-kalimbas-texto:    var(--c-morado);

  --acento-ymas-relleno:      var(--c-naranja);
  --acento-ymas-sobre:        var(--c-tinta);
  --acento-ymas-texto:        #b43700;

  /* --- Tipografía --- */
  --fuente-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --fuente-texto:   "Nunito", system-ui, -apple-system, sans-serif;

  --texto-xs:     clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  --texto-sm:     clamp(0.875rem, 0.84rem + 0.2vw, 1rem);
  --texto-base:   clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  --texto-lg:     clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --texto-titulo: clamp(2rem, 1.2rem + 3.4vw, 4.2rem);
  --texto-mega:   clamp(3.5rem, 1rem + 11vw, 11rem);

  /* --- Ritmo --- */
  --espacio-seccion: clamp(5rem, 3.5rem + 7vw, 11rem);
  --ancho-max:       78rem;
  --ancho-texto:     40rem;

  /* --- Forma --- */
  --radio-sm:  0.6rem;
  --radio-md:  1.25rem;
  --radio-lg:  2rem;
  --radio-xl:  3rem;
  --trazo:     3px;

  /* --- Movimiento --- */
  --dur-rapida:  160ms;
  --dur-normal:  340ms;
  --dur-lenta:   700ms;
  --ease-salida: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-rebote: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Geometría de la ilustración (1190 x 1684 px) --- */
  --arte-ratio: 1190 / 1684;
  --arte-prop:  0.706651;

  /* Encuadre del póster dentro del hero */
  --zoom-escena: 1.45;  /* cuánto sobresale el arte por encima del viewport */
  --desborde-x:  1.10;  /* recorte lateral máximo permitido en móvil */
}