/* =========================================================
   Parques Ecuador · Tokens de diseño
   Fuente: proyectos/parques-ecuador/marca/marca.json v1.0 y paleta.md
   Regla: ningún componente usa valores sueltos; todo sale de aquí.
   (Los media queries no admiten variables: los cortes están
   documentados abajo y se repiten literalmente en estilos.css.)
   Cortes: --bp-tablet 768px · --bp-desktop 1024px
   ========================================================= */
:root {
  /* ---------- Color base (60 / 30 / 10) ---------- */
  --color-crema: #FFF8E7;    /* 60 % fondo */
  --color-morado: #4A148C;   /* 30 % estructura, titulares */
  --color-naranja: #FF6D00;  /* 7 % acción, siempre con texto Tinta */
  --color-amarillo: #FFD600; /* 3 % destacados */
  --color-tinta: #2A0A4F;    /* texto de lectura */
  --color-blanco: #FFFFFF;

  /* Tintes y sombras (paleta.md) */
  --color-morado-80: #6E43A3;
  --color-morado-20: #DBD0E8;
  --color-morado-sombra: #3B1070;
  --color-naranja-20: #FFE2CC;
  --color-naranja-40: #FFC599;
  --color-naranja-sombra: #CC5700;
  --color-amarillo-20: #FFF7CC;
  --color-amarillo-40: #FFEF99;
  --color-amarillo-sombra: #CCAB00;
  --color-tinta-60: #7F6C95;

  /* ---------- Roles semánticos ---------- */
  --fondo: var(--color-crema);
  --fondo-tarjeta: var(--color-blanco);
  --fondo-oscuro: var(--color-morado);
  --texto: var(--color-tinta);
  --texto-titular: var(--color-morado);
  --texto-sobre-oscuro: var(--color-crema);
  --texto-destacado-sobre-oscuro: var(--color-amarillo);
  --accion: var(--color-naranja);
  --accion-texto: var(--color-tinta);
  --accion-sombra: var(--color-naranja-sombra);
  --secundario: var(--color-amarillo);
  --secundario-texto: var(--color-tinta);
  --secundario-sombra: var(--color-amarillo-sombra);
  --borde-suave: var(--color-morado-20);
  --foco: var(--color-morado);          /* 11,2:1 sobre Crema */
  --foco-sobre-oscuro: var(--color-amarillo); /* 8,4:1 sobre Morado */

  /* ---------- Tipografía (máx. 2 familias) ---------- */
  --font-titulos: "Baloo 2", "Arial Rounded MT Bold", Arial, sans-serif;
  --font-texto: "Nunito", Arial, sans-serif;

  --peso-regular: 400;
  --peso-semibold: 600;
  --peso-bold: 700;
  --peso-extrabold: 800;

  /* Escala: marca.json (H1 48 · H2 34 · H3 24 · cuerpo 17 · nota 14), fluida en móvil */
  --fs-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3rem);       /* 36 → 48 */
  --fs-h2: clamp(1.75rem, 1.45rem + 1.3vw, 2.125rem);  /* 28 → 34 */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);     /* 20 → 24 */
  --fs-lead: 1.25rem;                                  /* 20 */
  --fs-cuerpo: 1.0625rem;                              /* 17 */
  --fs-boton: 1.0625rem;                               /* 17 */
  --fs-nota: 0.875rem;                                 /* 14 */
  --fs-eyebrow: 0.9375rem;                             /* 15 */
  --fs-numero: 3rem;                                   /* 48, numeración decorativa */

  --lh-h1: 1.1;
  --lh-h2: 1.15;
  --lh-h3: 1.25;
  --lh-cuerpo: 1.6;
  --lh-boton: 1.2;
  --lh-nota: 1.5;
  --lh-ajustado: 1;
  --tracking-eyebrow: 0.04em;

  /* ---------- Espaciado (base 4 / ritmo 8) ---------- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */

  /* ---------- Layout ---------- */
  --ancho-max: 75rem;          /* 1200 */
  --ancho-texto: 38rem;        /* ~60 caracteres */
  --margen-lateral: 1.25rem;   /* 20 móvil */
  --margen-lateral-desk: 2rem; /* 32 escritorio */
  --alto-header: 5.5rem;       /* 88 */
  --logo-header: 3.75rem;      /* 60 alto → 163 px de ancho (mínimo de marca 160 px) */
  --logo-footer: 12.5rem;      /* 200 ancho del logo en el pie */
  --icono: 1.5rem;             /* 24 */
  --icono-grande: 2.5rem;      /* 40 */
  --objetivo-tactil: 3rem;     /* 48 mínimo táctil */
  --barra-ancho: 5rem;         /* 80 barra de acento del hero */
  --hero-panel-min: 20rem;     /* 320 */
  --tarjeta-min: 13rem;        /* 208 */
  --diagonal: 10%;             /* corte diagonal del panel del hero (escritorio) */

  /* ---------- Ilustración (SVG del hero) ---------- */
  --il-trazo-grueso: 8;
  --il-trazo-medio: 6;
  --il-trazo-fino: 4;

  /* ---------- Bordes y radios ---------- */
  --borde-fino: 1px;
  --borde: 2px;
  --borde-grueso: 3px;
  --radio-sm: 0.5rem;     /* 8 */
  --radio-md: 1rem;       /* 16 tarjetas (manual) */
  --radio-lg: 1.5rem;     /* 24 bloques grandes */
  --radio-xl: 2.5rem;     /* 40 paneles de sección */
  --radio-pill: 999px;    /* botones (manual) */

  /* ---------- Sombras (tinte morado, sobrias) ---------- */
  --sombra-1: 0 1px 2px rgba(42, 10, 79, 0.08), 0 2px 8px rgba(42, 10, 79, 0.06);
  --sombra-2: 0 4px 12px rgba(42, 10, 79, 0.10), 0 12px 32px rgba(42, 10, 79, 0.08);
  --sombra-3: 0 16px 48px rgba(42, 10, 79, 0.18);
  /* Sombra "de juguete" de los botones: eco del volumen 3D del logo */
  --sombra-boton-alto: 0.25rem; /* 4 */
  --sombra-boton-bajo: 0.125rem; /* 2 */

  /* ---------- Movimiento (150-300 ms, ease-out) ---------- */
  --dur-rapida: 150ms;
  --dur-media: 200ms;
  --dur-lenta: 300ms;
  --dur-entrada: 300ms;   /* revelado inicial (máx. 300 ms, manual §4); se anula con reduced-motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-rebote: cubic-bezier(0.34, 1.56, 0.64, 1); /* rebote pequeño */
  --desplazamiento-hover: -0.25rem; /* -4 */
  --desplazamiento-entrada: 1rem;   /* 16 */
  --escala-hover: 1.03;
  --giro-hover: -6deg;
  --opacidad-decorativa: 0.25;
  --opacidad-forma: 0.4;

  /* ---------- Capas ---------- */
  --z-header: 50;
  --z-flotante: 60;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-rapida: 0ms;
    --dur-media: 0ms;
    --dur-lenta: 0ms;
    --dur-entrada: 0ms;
    --desplazamiento-hover: 0;
    --desplazamiento-entrada: 0;
    --escala-hover: 1;
    --giro-hover: 0deg;
  }
}