/* EducaQuix · Sitio v2 · Base: variables, reinicio, tipografía y retícula
   Paleta de marca: #0EC9B4 #0A9E8E #C9F4EE #7FE3D6 #E2F6F3 #05233B blanco #FF8FA3 #FFC23D (#F2505F solo "problema").
   Los tonos de papel y superficies son mezclas de esos colores. Tema oscuro en themes.css. */

:root {
  color-scheme: light;
  /* Marca */
  --turquesa: #0EC9B4;
  --teal: #0A9E8E;
  --menta: #E2F6F3;
  --menta-2: #C9F4EE;
  --menta-3: #7FE3D6;
  --navy: #05233B;
  --amarillo: #FFC23D;
  --coral: #FF8FA3;
  --rojo: #F2505F;

  /* Roles (tema claro) */
  --bg: #FFFDF8;            /* papel: blanco con un toque de #FFC23D */
  --bg-alt: #F1F8F6;        /* blanco + #E2F6F3 */
  --surface: #FFFFFF;
  --surface-2: #F6FBFA;
  --ink: #05233B;
  --ink-2: #3D5466;         /* navy ~75 % */
  --ink-3: #5B6F7F;         /* navy ~60 % (letra pequeña, AA sobre --bg) */
  --line: rgba(5, 35, 59, .12);
  --line-2: rgba(5, 35, 59, .24);
  --accent: #0A9E8E;        /* acentos en texto grande */
  --accent-ink: #067A6E;    /* acento para texto pequeño (AA) */
  --accent-fill: #0EC9B4;
  --on-accent: #05233B;
  --btn-bg: #05233B;
  --btn-ink: #FFFFFF;
  --btn-bg-hover: #0B3A5C;
  --mark: #05233B;          /* E del logo */
  --wordmark: #0EC9B4;      /* "educa quix" */
  --shadow-frame: 0 1px 0 rgba(5,35,59,.04), 0 30px 60px -32px rgba(5,35,59,.35);
  --shadow-soft: 0 18px 40px -28px rgba(5,35,59,.30);
  --shot-filter: none;
  --focus: #0A9E8E;
  --gold: #FFC23D;
  --err: #C23846;
  --rule-strong: #05233B;
  --control-edge: #7D8E9C;
  --track-off: #8C9CA8;
  --frame-edge: rgba(5, 35, 59, .12);
  --note-bg: #FFC23D;
  --note-ink: #05233B;
  --receipt-bg: #FFFFFF;
  --receipt-ink: #05233B;
  --receipt-mute: #5B6F7F;
  --receipt-accent: #067A6E;
  --logo-tile: transparent;
  --band-bg: #05233B;
  --band-edge: transparent;
  --menu-bg: #05233B;
  --sticker-edge: #FFFFFF;
  --bezel: #0B1F31;
  --bezel-edge: transparent;
  --shot-light-bg: var(--surface);
  --shot-light-bar: var(--surface-2);
  --shot-light-ink: var(--ink-3);
  --ico-filter: none;

  /* Tipografía */
  --f-sans: "Quixa Sans", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: "Quixa Serif", Georgia, "Times New Roman", serif;
  --f-mono: "Quixa Mono", ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --f-round: "Quixa Rounded", var(--f-sans);

  --t-xs: .78rem;
  --t-sm: .9rem;
  --t-md: 1.0625rem;
  --t-lg: clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  --t-h3: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  --t-h2: clamp(2rem, 1.35rem + 2.6vw, 3.4rem);
  --t-h1: clamp(2.6rem, 1.4rem + 4.6vw, 5.4rem);

  /* Medidas */
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --header-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Reinicio */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: var(--t-h1); letter-spacing: -.04em; line-height: .98; }
h2 { font-size: var(--t-h2); letter-spacing: -.035em; line-height: 1.02; }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-lg); letter-spacing: -.01em; }
strong, b { font-weight: 700; }
::selection { background: var(--menta-3); color: var(--navy); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

/* Palabra acento: Quixa Serif Italic */
.acento {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--accent);
}
.acento--onda {
  text-decoration: underline wavy var(--accent-fill);
  text-decoration-thickness: .055em;
  text-underline-offset: .16em;
  text-decoration-skip-ink: none;
}
/* Cifras y precios: Quixa Mono */
.num, .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* Retícula */
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 9vw, 136px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.section--alt { background: var(--bg-alt); }
.section + .section:not(.section--alt):not(.section--ink) { border-top: 1px solid var(--line); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }

.lead { font-size: var(--t-lg); color: var(--ink-2); line-height: 1.55; max-width: 38ch; }
.muted { color: var(--ink-2); }
.small { font-size: var(--t-sm); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--btn-bg); color: var(--btn-ink); padding: 10px 16px; border-radius: var(--r-sm); text-decoration: none; }
.skip:focus { top: 12px; }

/* Imágenes por tema: <img class="solo-claro"> / <img class="solo-oscuro"> */
.solo-oscuro { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}