/* Rouge · tokens del sistema visual.
   ─────────────────────────────────────────────────────────────────────────────
   FUENTE: concepto de web para Glossier de Natalie Demidova (Behance, jun. 2024),
   publicado como pieza de inspiración no comercial.
   Del proyecto se toma el LENGUAJE DE DISEÑO —retícula, esquinas, píldoras,
   chips y el movimiento tipográfico cruzado— y también su paleta, por decisión
   expresa de Ana. Se deja constancia de que el rosa y el rojo son la identidad
   cromática de una marca existente.

   MEDIDO (no estimado): la paleta sale de muestrear 1.602.650 píxeles de las 16
   láminas del proyecto con canvas, más muestreo por coordenada sobre la lámina
   de la home. Los porcentajes son la presencia real de cada tono.

   INFERIDO (no medido): la tipografía. De una imagen no se obtiene el nombre de
   la fuente ni su interletrado. Se proponen dos equivalentes con licencia OFL,
   elegidas por parecido estructural — no son las del original.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ---- Color ---- Dos superficies planas que se alternan. Sin degradados,
     sin sombras duras: casi la mitad de la referencia es color plano. */
  --rosa:   #F8E4E4;   /* fondo del sitio · 25,6 % de la referencia */
  --rojo:   #DE3B3B;   /* superficie y tinta de voz alta · 19,9 % */
  --blanco: #FFFAFB;   /* respiro · 8,5 % */
  --gris:   #EFF0F0;   /* tarjetas de producto · 4,8 % */
  --rojo-hondo: #BC3134;  /* rojo del footer, un punto más apagado */

  /* ---- Tipografía ----
     Display: grotesca geométrica de peso alto CON itálica real. El original
     parece una Aeonik/Söhne; Plus Jakarta Sans es la equivalente OFL más cercana
     en estructura y sí tiene itálica de verdad, no oblicua sintética.
     Acento: serif de contraste alto en itálica (didona). El original es una
     didona condensada; Bodoni Moda es didona real y OFL.
     Se cargan solo los cortes que el CSS usa: Jakarta 400-800 + 800 itálica,
     Bodoni 600 itálica. */
  --f-display: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
  --f-acento:  'Bodoni Moda', 'Didot', Georgia, serif;
  --fs-body:   1rem;
  --lh-body:   1.55;

  /* ---- Escala de espacio ---- */
  --p-2: 1rem;
  --p-3: 1.5rem;
  --p-4: 2rem;
  --p-5: 3rem;
  --p-6: 4rem;
  --p-7: 6rem;

  /* ---- Layout ----
     El sistema no usa retícula estrecha: los bloques respiran casi a sangre
     dentro de un marco redondeado que envuelve la página entera. */
  --pad-x:  var(--p-4);
  --marco:  var(--p-2);      /* aire entre el borde de la ventana y el marco */

  /* ---- Radios ---- Generosos y en tres pasos. Es lo que más define la piel. */
  --r-marco:  28px;   /* el marco de página */
  --r-panel:  22px;   /* paneles y tarjetas grandes */
  --r-card:   16px;   /* tarjetas pequeñas y fotos */
  --r-pill:   999px;  /* píldoras, chips y botones */

  /* ---- Motion ---- */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --dur-hover:  0.28s;
  --dur-appear: 0.7s;
  --appear-y:   26px;
}

/* Entrada al viewport: fundido con subida corta */
@keyframes appear-in { from { opacity: 0; transform: translateY(var(--appear-y)); } to { opacity: 1; transform: none; } }
.has-js .appear { opacity: 0; transform: translateY(var(--appear-y)); }
.appear.in { animation: appear-in var(--dur-appear) var(--ease) forwards; }

@media (prefers-reduced-motion: reduce) {
  .has-js .appear, .appear { opacity: 1 !important; transform: none !important; animation: none !important; }
}