/* ==========================================================================
   Cloudy Meco — theme.css  ·  Identidad "Explorer"
   ÚNICO sitio con identidad (Regla 4). Solo custom properties en :root.
   Origen de cada valor y ratios de contraste: docs/02-design-system.md
   (§12 "Explorer" manda sobre §3 cuando chocan).
   Un color literal fuera de este fichero es un bug.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- 1. Paleta base (valores medidos en la fuente) ---------- */

  /* Personaje (images/*.jpg) */
  --cloudy-highlight: #D1EFF5;   /* brillo del cuerpo */
  --cloudy-body: #A4DBEB;        /* celeste del cuerpo — NUNCA como texto */
  --cloudy-outline: #209BE0;     /* contorno azul intenso — decorativo */
  --cloudy-iris: #42029B;        /* iris morado */
  --cloudy-cheek: #F23CD6;       /* mejillas — decorativo */
  --cloudy-mouth: #AE072E;       /* contorno de la boca — decorativo */
  --cloudy-ink: #1E295E;         /* contorno de ojos / pestañas */

  /* Deck (style/*.pptx) — coincide con el Explorer */
  --deck-purple: #645CA7;
  --deck-pink: #D77EAD;          /* NUNCA como texto sobre claro */
  --deck-lavender: #AFA8D0;      /* fondo de las diapositivas */
  --deck-teal: #00C3B1;          /* NUNCA como texto */
  --deck-gray: #434343;
  --deck-white: #FFFFFF;

  /* Explorer (text/PRESENTACIÓN EXPLORER.pdf, histograma de los renders) */
  --explorer-night: #302C5F;     /* pizarra del índice (p. 2) */
  --explorer-mauve: #9B68AA;     /* centro del degradado de las ondas (p. 5, 6, 27) */
  --explorer-mist: #E6E2EE;      /* manchas claras sobre lavanda (p. 27) */
  --explorer-sun: #F9BC53;       /* amarillo de las ilustraciones (mochila, lápiz) */

  /* Derivados: mismo tono, luminosidad ajustada para cumplir AA */
  --derived-purple-strong: #4E4884;  /* deck-purple, L=40 % */
  --derived-pink-deep: #9C3069;      /* deck-pink,   L=40 % */
  --derived-blue-deep: #166C9D;      /* cloudy-outline, L=35 % */
  --derived-teal-deep: #00756A;      /* deck-teal,   L=23 % */
  --derived-sky: #F1FAFC;            /* 30 % cloudy-highlight + 70 % blanco */
  --derived-lavender-soft: #EFEEF6;  /* 20 % deck-lavender + 80 % blanco */
  --derived-lavender-paper: #F7F6FA; /* 10 % deck-lavender + 90 % blanco */
  --derived-night-mid: #3F3A72;      /* 50 % explorer-night + 50 % purple-strong */
  --derived-teal-mist: #BFF0EC;      /* 25 % deck-teal + 75 % blanco: "Tierra viva" */

  /* ---------- 2. Tokens semánticos (lo que usa base.css) ---------- */

  /* Fondos */
  --color-bg: var(--derived-lavender-paper);    /* papel lavanda: fondo de página */
  --color-surface: var(--deck-white);           /* tarjetas, fichas */
  --color-bg-alt: var(--derived-lavender-soft); /* secciones alternas */
  --color-bg-band: var(--deck-lavender);        /* lavanda Explorer; solo --color-text */
  --color-bg-sky: var(--cloudy-highlight);      /* bloques "cielo" de Cloudy */
  --color-bg-night: var(--explorer-night);      /* noche estrellada (color sólido) */

  /* Texto sobre claro */
  --color-text: var(--cloudy-ink);              /* 12.62:1 sobre --color-bg */
  --color-text-muted: var(--deck-gray);         /* 9.12:1; no sobre lavanda */
  --color-text-on-primary: var(--deck-white);   /* 5.78:1 sobre primario */
  --color-heading: var(--explorer-night);       /* 11.72:1 */
  --color-accent-text: var(--derived-pink-deep);  /* 6.37:1; antetítulos */
  --color-science-text: var(--derived-blue-deep); /* etiquetas ciencia */
  --color-health-text: var(--derived-teal-deep);  /* retos saludables */

  /* Sobre la lavanda del Explorer el rosa profundo da 3.07: el antetítulo pasa a noche */
  --color-on-band-accent: var(--explorer-night); /* 5.65:1 sobre lavanda */

  /* Texto sobre noche (--bg-night / --color-bg-night) */
  --color-on-night: var(--deck-white);          /* 12.72 → 8.13:1 */
  --color-on-night-muted: var(--explorer-mist); /* 9.98 → 6.38:1 */
  --color-on-night-accent: var(--explorer-sun); /* 7.48 → 4.78:1 */
  --color-on-night-link: var(--cloudy-highlight); /* 10.52 → 6.72:1 */

  /* Acción */
  --color-primary: var(--deck-purple);
  --color-primary-hover: var(--derived-purple-strong);
  --color-link: var(--deck-purple);                 /* 5.33:1 */
  --color-link-hover: var(--derived-purple-strong); /* 7.49:1 */
  --color-focus: var(--derived-purple-strong);
  --color-cta-bg: var(--explorer-sun);              /* botón sobre noche */
  --color-cta-text: var(--explorer-night);          /* 7.48:1 sobre el sol */
  --color-cta-hover: var(--deck-white);

  /* Bordes */
  --color-border: var(--deck-lavender);
  --color-border-strong: var(--derived-blue-deep);

  /* Decorativos (nunca texto, nunca único portador de información) */
  --color-cloud-fill: var(--cloudy-highlight);
  --color-cloud-body: var(--cloudy-body);
  --color-cloud-outline: var(--cloudy-outline);
  --color-cheek: var(--cloudy-cheek);
  --color-sparkle: var(--deck-teal);
  --color-decor-pink: var(--deck-pink);
  --color-sun: var(--explorer-sun);
  --color-badge-bg: rgb(255 255 255 / 0.62);      /* círculo de icono del Explorer */
  --color-badge-ring: rgb(255 255 255 / 0.9);
  --color-badge-icon: var(--deck-purple);         /* 4.0:1+ sobre el círculo */

  /* Degradados */
  --gradient-deck: linear-gradient(135deg, var(--deck-purple) 0%, var(--deck-pink) 100%);
  --gradient-explorer: linear-gradient(120deg, var(--deck-purple) 0%, var(--explorer-mauve) 52%, var(--deck-pink) 100%);
  --gradient-night: linear-gradient(180deg, var(--explorer-night) 0%, var(--derived-night-mid) 55%, var(--derived-purple-strong) 100%);
  --gradient-sky: linear-gradient(180deg, var(--cloudy-highlight) 0%, var(--derived-sky) 100%);
  --gradient-cloud: radial-gradient(circle at 35% 30%, var(--deck-white) 0%, var(--cloudy-highlight) 45%, var(--cloudy-body) 100%);
  --gradient-lavender: linear-gradient(180deg, var(--deck-lavender) 0%, var(--derived-lavender-soft) 100%);

  /* Aventura: el fondo pasa de noche cósmica a cielo azul y a Tierra viva.
     Decorativo: todo el texto del viaje va en tarjetas --color-surface. */
  --gradient-viaje: linear-gradient(180deg,
    var(--explorer-night) 0%, var(--derived-night-mid) 22%,
    var(--derived-purple-strong) 34%, var(--derived-blue-deep) 46%,
    var(--cloudy-body) 60%, var(--cloudy-highlight) 70%,
    var(--derived-teal-mist) 86%, var(--derived-lavender-paper) 100%);
  /* Estela del camino: blanca en el cosmos, morada en la Tierra */
  --gradient-estela: linear-gradient(180deg, var(--deck-white) 0%, var(--deck-white) 45%, var(--deck-purple) 70%, var(--deck-purple) 100%);
  /* Pastilla "hace..." según el cielo del tramo (texto blanco, AA en todas) */
  --color-era-noche: var(--explorer-night);        /* blanco 12.72:1 */
  --color-era-aurora: var(--derived-purple-strong);/* blanco 8.13:1 */
  --color-era-dia: var(--derived-blue-deep);       /* blanco 5.73:1 */
  --color-era-tierra: var(--derived-teal-deep);    /* blanco 5.60:1 */
  --color-on-era: var(--deck-white);

  /* Cielo estrellado del Explorer: puntitos blancos (todas las diapositivas) */
  --stars:
    radial-gradient(circle, rgb(255 255 255 / 0.95) 0 1.2px, transparent 1.8px) 0 0 / 97px 83px,
    radial-gradient(circle, rgb(255 255 255 / 0.7) 0 1px, transparent 1.6px) 31px 47px / 61px 59px,
    radial-gradient(circle, rgb(255 255 255 / 0.85) 0 1.8px, transparent 2.4px) 70px 12px / 173px 151px;
  --bg-night: var(--stars), var(--gradient-night);

  /* ---------- 3. Tipografía (solo sistema, sin @font-face) ---------- */
  /* Cuerpo: redondeada, legible para niños (sin cambios) */
  /* Sin "Arial Rounded MT Bold": solo existe en negrita y en Chrome/macOS
     convertía todo el cuerpo en negrita (ui-rounded solo lo entiende Safari). */
  --font-body: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round",
    "Quicksand", system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Titulares Explorer: condensada alta en mayúsculas (sustituye a Englebert) */
  --font-display: "Avenir Next Condensed", "Bahnschrift SemiCondensed",
    "Bahnschrift", "Roboto Condensed", "sans-serif-condensed", "Arial Narrow",
    ui-rounded, system-ui, sans-serif;
  /* Citas y frases de misión: slab (sustituye a Zilla Slab Light) */
  --font-slab: "Zilla Slab", "Roboto Slab", Rockwell, "Rockwell Nova",
    "Noto Serif", Charter, Georgia, serif;

  --text-body: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);  /* 18 → 20 px */
  --text-small: 1rem;                                       /* 16 px, mínimo absoluto */
  --text-lead: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);     /* 20 → 24 px */
  --text-h3: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);      /* 24 → 30 px */
  --text-h2: clamp(2.25rem, 1.9rem + 1.6vw, 3.25rem);       /* 36 → 52 px */
  --text-h1: clamp(2.5rem, 2rem + 2.4vw, 4rem);             /* 40 → 64 px */
  --text-display: clamp(3.5rem, 2.4rem + 5.2vw, 6.5rem);    /* 56 → 104 px */
  --text-quote: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);      /* 24 → 40 px */

  --weight-body: 400;
  --weight-strong: 700;
  --weight-heading: 800;      /* titulares en la pila redondeada */
  --weight-display: 600;      /* Avenir Next Condensed Demi Bold */
  --weight-slab: 400;

  --leading-body: 1.6;
  --leading-heading: 1.15;
  --leading-display: 0.95;
  --tracking-heading: -0.01em;
  --tracking-display: 0.02em;
  --display-transform: uppercase;   /* como "OUR STORY", "GUIDING PRINCIPLES" */
  --measure: 62ch;

  /* ---------- 4. Espaciado (base 4 px) ---------- */
  --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 */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --container: 72rem;  /* 1152 px */
  --header-h: 4rem;    /* alto de la barra fija (scroll-margin de las anclas) */

  /* ---------- 5. Táctil ---------- */
  --tap-min: 44px;
  --tap-gap: var(--space-2);

  /* ---------- 6. Radios (formas blandas) ---------- */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;
  --radius-cloud: 48% 52% 44% 56% / 62% 58% 42% 38%;
  --radius-blob: 62% 38% 55% 45% / 45% 58% 42% 55%;  /* mancha fluida del Explorer */

  /* ---------- 7. Bordes y sombras ---------- */
  --border-width: 2px;
  --border-cloud: 3px solid var(--cloudy-outline);

  --shadow-sm: 0 1px 2px rgb(48 44 95 / 0.08), 0 2px 6px rgb(48 44 95 / 0.06);
  --shadow-md: 0 6px 18px rgb(100 92 167 / 0.18);
  --shadow-lg: 0 16px 40px rgb(48 44 95 / 0.28);
  --shadow-press: 0 4px 0 var(--derived-purple-strong);
  --shadow-press-sun: 0 4px 0 var(--explorer-night);
  --shadow-cloud: 0 10px 0 -4px rgb(32 155 224 / 0.18), 0 18px 30px rgb(32 155 224 / 0.14);
  --focus-ring: 0 0 0 3px var(--deck-white), 0 0 0 6px var(--derived-purple-strong);
  --focus-ring-night: 0 0 0 3px var(--explorer-night), 0 0 0 6px var(--explorer-sun);

  /* ---------- 8. Movimiento ---------- */
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --ease-soft: cubic-bezier(0.34, 1.3, 0.64, 1);
  --float-distance: 8px;

  /* ---------- 9. Motivo de nube (SVG inline, < 1 KB) ---------- */
  --cloud-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 0 112 76'%3E%3Cdefs%3E%3CradialGradient id='g' gradientUnits='userSpaceOnUse' cx='46' cy='22' r='72'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.5' stop-color='%23D1EFF5'/%3E%3Cstop offset='1' stop-color='%23A4DBEB'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='%23209BE0' stroke='%23209BE0' stroke-width='6' stroke-linejoin='round'%3E%3Ccircle cx='30' cy='48' r='20'/%3E%3Ccircle cx='56' cy='32' r='26'/%3E%3Ccircle cx='86' cy='42' r='22'/%3E%3Crect x='24' y='44' width='76' height='26' rx='13'/%3E%3C/g%3E%3Cg fill='url(%23g)'%3E%3Ccircle cx='30' cy='48' r='20'/%3E%3Ccircle cx='56' cy='32' r='26'/%3E%3Ccircle cx='86' cy='42' r='22'/%3E%3Crect x='24' y='44' width='76' height='26' rx='13'/%3E%3C/g%3E%3C/svg%3E");
  --cloud-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 0 112 76'%3E%3Cg fill='%23000'%3E%3Ccircle cx='30' cy='48' r='23'/%3E%3Ccircle cx='56' cy='32' r='29'/%3E%3Ccircle cx='86' cy='42' r='25'/%3E%3Crect x='21' y='41' width='82' height='32' rx='16'/%3E%3C/g%3E%3C/svg%3E");
  --cloud-ratio: 112 / 76;
  --cloud-edge-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 20'%3E%3Cpath d='M0 20V10a10 10 0 0 1 20 0a10 10 0 0 1 20 0a10 10 0 0 1 20 0a10 10 0 0 1 20 0v10z'/%3E%3C/svg%3E");
  --cloud-edge-size: 80px 20px;

  /* ---------- 10. Ondas del Explorer (máscara; el color lo pone base.css) ---------- */
  /* Borde superior ondulado, como las manchas fluidas de las diapositivas */
  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 58C180 98 330 6 560 24s380 70 600 40 230-52 280-46V90H0z'/%3E%3C/svg%3E");
  --wave-height: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
  /* Desvanecido de bordes rectos de las ilustraciones (máscaras, no color) */
  --fade-top: linear-gradient(to bottom, transparent 0%, #000 26%);
  --fade-right: linear-gradient(to left, transparent 0%, #000 20%);
  --estela-mask: radial-gradient(circle, #000 2.6px, transparent 3px) center top / 6px 14px repeat-y;
  --fade-bottom: linear-gradient(to top, transparent 0%, #000 45%);
  /* Destello de 4 puntas (estrellitas de las ilustraciones) */
  --sparkle-shape: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}