/* ============================================================
   Aparta y Vuela · Design tokens · v1.0 · 2026-10-16
   Una sola familia (Bricolage Grotesque) en dos anchos.
   Primario marino · medidor menta · acción coral · sello sol.
   ============================================================ */

@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-grotesque-latin-standard-normal.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-grotesque-latin-ext-standard-normal.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* ---- Color · marca ---- */
  --ayv-marino:#142B4F;      /* primario: marca, texto, botón principal */
  --ayv-marino-2:#3D5378;    /* texto secundario */
  --ayv-marino-3:#586C90;    /* texto terciario, etiquetas */
  --ayv-menta:#3FD6B0;       /* medidor: avance, éxito, barras (nunca con texto blanco) */
  --ayv-menta-tinta:#0B7A62; /* menta para texto sobre claro (5.3:1) */
  --ayv-coral:#FF6F61;       /* acción: CTA, aviso, foco (texto marino encima) */
  --ayv-coral-tinta:#B23A2E; /* coral para texto sobre claro / error */
  --ayv-sol:#FFC857;         /* sello: hito cumplido, destacado */
  --ayv-cielo:#8FD3FF;       /* solo tinte / "y" en inverso */

  /* ---- Color · neutros ---- */
  --ayv-blanco:#FFFFFF;
  --ayv-papel:#F2FAFF;       /* fondo de página */
  --ayv-papel-2:#E3F3FC;     /* fondo de sección / tinte */
  --ayv-linea:#D9E5F8;       /* bordes, divisores */
  --ayv-linea-2:#B9C9E0;     /* bordes activos, puntos pendientes */

  /* ---- Color · semántico (alias) ---- */
  --ayv-bg:var(--ayv-papel);
  --ayv-surface:var(--ayv-blanco);
  --ayv-fg:var(--ayv-marino);
  --ayv-fg-2:var(--ayv-marino-2);
  --ayv-fg-3:var(--ayv-marino-3);
  --ayv-border:var(--ayv-linea);
  --ayv-primary:var(--ayv-marino);
  --ayv-on-primary:var(--ayv-papel);
  --ayv-progress:var(--ayv-menta);
  --ayv-progress-track:var(--ayv-linea);
  --ayv-accent:var(--ayv-coral);
  --ayv-on-accent:var(--ayv-marino);
  --ayv-success:var(--ayv-menta-tinta);
  --ayv-warning:#B98A1E;
  --ayv-danger:var(--ayv-coral-tinta);
  --ayv-focus:var(--ayv-coral);

  /* ---- Tipografía · una familia, roles por ancho/peso ---- */
  --ayv-font:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ayv-font-display:var(--ayv-font);   /* wdth 88 · 800 · tracking -.035em */
  --ayv-font-heading:var(--ayv-font);   /* wdth 90 · 800 · tracking -.03em  */
  --ayv-font-body:var(--ayv-font);      /* wdth 100 · 400/500 */
  --ayv-font-label:var(--ayv-font);     /* wdth 75 · 600 · caps · tracking .14em */
  --ayv-font-data:var(--ayv-font);      /* wdth 100 · 800 · tabular-nums · tracking -.04em */

  --ayv-wdth-display:88; --ayv-wdth-heading:90; --ayv-wdth-body:100; --ayv-wdth-label:75;

  /* escala tipográfica (base 17px, ratio ≈1.2 en texto, saltos grandes en display) */
  --ayv-fs-xs:.75rem;   /* 12 · etiquetas */
  --ayv-fs-sm:.875rem;  /* 14 · notas */
  --ayv-fs-md:1.0625rem;/* 17 · cuerpo */
  --ayv-fs-lg:1.25rem;  /* 20 · lede */
  --ayv-fs-h3:1.5rem;   /* 24 */
  --ayv-fs-h2:clamp(2rem,4.5vw,3rem);        /* 32–48 */
  --ayv-fs-h1:clamp(2.5rem,6.5vw,4.5rem);    /* 40–72 */
  --ayv-fs-display:clamp(3.5rem,9vw,7rem);   /* 56–112 */

  --ayv-lh-tight:1.02; --ayv-lh-heading:1.1; --ayv-lh-body:1.55;
  --ayv-track-display:-.035em; --ayv-track-heading:-.03em; --ayv-track-label:.14em; --ayv-track-data:-.04em;

  /* ---- Espacio (base 4) ---- */
  --ayv-s-1:4px; --ayv-s-2:8px; --ayv-s-3:12px; --ayv-s-4:16px; --ayv-s-5:24px;
  --ayv-s-6:32px; --ayv-s-7:48px; --ayv-s-8:64px; --ayv-s-9:96px; --ayv-s-10:128px;
  --ayv-gutter:clamp(16px,4vw,48px); --ayv-maxw:1200px; --ayv-measure:62ch;

  /* ---- Radio ---- */
  --ayv-r-sm:8px; --ayv-r-md:14px; --ayv-r-lg:20px; --ayv-r-xl:28px; --ayv-r-pill:999px;

  /* ---- Sombra (solo una, para lo que flota) ---- */
  --ayv-shadow:0 22px 60px -26px rgba(20,43,79,.45);

  /* ---- Movimiento ---- */
  --ayv-ease:cubic-bezier(.2,.8,.2,1);
  --ayv-t-fast:150ms; --ayv-t-base:300ms; --ayv-t-slow:600ms;

  /* ---- Puntos de la ruta (sistema gráfico) ---- */
  --ayv-dot:10px; --ayv-dot-now:14px; --ayv-dot-gap:5px;

  /* ---- Iconos ---- */
  --ayv-icon-stroke:1.75px; --ayv-icon-size:24px;
}

/* Modo oscuro: el marino es el fondo, el papel el texto; la menta gana protagonismo */
:root[data-theme="dark"],
.ayv-dark{
  --ayv-bg:#0E2040;
  --ayv-surface:var(--ayv-marino);
  --ayv-fg:var(--ayv-papel);
  --ayv-fg-2:#C9D8EB;
  --ayv-fg-3:#8FA3C4;
  --ayv-border:#26416B;
  --ayv-primary:var(--ayv-menta);
  --ayv-on-primary:var(--ayv-marino);
  --ayv-progress:var(--ayv-menta);
  --ayv-progress-track:#26416B;
  --ayv-accent:var(--ayv-coral);
  --ayv-on-accent:var(--ayv-marino);
  --ayv-success:var(--ayv-menta);
  --ayv-danger:var(--ayv-coral);
  color-scheme:dark;
}

/* ---- Roles tipográficos listos para usar ---- */
.ayv-display{font-family:var(--ayv-font-display);font-variation-settings:"wdth" var(--ayv-wdth-display);font-weight:800;letter-spacing:var(--ayv-track-display);line-height:var(--ayv-lh-tight);text-wrap:balance}
.ayv-h1,.ayv-h2,.ayv-h3{font-family:var(--ayv-font-heading);font-variation-settings:"wdth" var(--ayv-wdth-heading);font-weight:800;letter-spacing:var(--ayv-track-heading);line-height:var(--ayv-lh-heading);text-wrap:balance}
.ayv-h1{font-size:var(--ayv-fs-h1)} .ayv-h2{font-size:var(--ayv-fs-h2)} .ayv-h3{font-size:var(--ayv-fs-h3)}
.ayv-body{font-family:var(--ayv-font-body);font-size:var(--ayv-fs-md);line-height:var(--ayv-lh-body);font-weight:400}
.ayv-label{font-family:var(--ayv-font-label);font-variation-settings:"wdth" var(--ayv-wdth-label);font-weight:600;font-size:var(--ayv-fs-xs);letter-spacing:var(--ayv-track-label);text-transform:uppercase}
.ayv-data{font-family:var(--ayv-font-data);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:var(--ayv-track-data);line-height:1}

/* ---- Componentes base ---- */
.ayv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:12px 22px;border-radius:var(--ayv-r-pill);border:0;background:var(--ayv-primary);color:var(--ayv-on-primary);font:inherit;font-weight:700;text-decoration:none;cursor:pointer;transition:transform var(--ayv-t-fast) var(--ayv-ease)}
.ayv-btn:hover{transform:translateY(-1px)}
.ayv-btn--accent{background:var(--ayv-accent);color:var(--ayv-on-accent)}
.ayv-btn--ghost{background:transparent;color:var(--ayv-fg);box-shadow:inset 0 0 0 2px currentColor}
:focus-visible{outline:3px solid var(--ayv-focus);outline-offset:3px;border-radius:6px}
.ayv-progress{height:10px;border-radius:var(--ayv-r-pill);background:var(--ayv-progress-track);overflow:hidden}
.ayv-progress>i{display:block;height:100%;background:var(--ayv-progress);border-radius:inherit;transition:width var(--ayv-t-slow) var(--ayv-ease)}
.ayv-tag{display:inline-flex;align-items:center;border-radius:6px;padding:4px 8px;background:var(--ayv-sol);color:var(--ayv-marino)}
.ayv-card{background:var(--ayv-surface);border:1px solid var(--ayv-border);border-radius:var(--ayv-r-lg)}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}