/* Marca de Elara Academy + Merk para Elara Academy Labs.
   Mismo lenguaje que elara.li y merk.kids: Nunito (400 / 800 / 900, incluida: un aula
   puede estar sin internet), violeta #6D28D9 de identidad, naranja #F97316 solo para la
   acción con texto tinta encima, superficies planas, radio 0.875rem y la franja de Merk
   (paralelogramo a -38°) como único adorno. */

@font-face { font-family: 'Nunito'; font-weight: 400; font-display: swap; src: url('/fuentes/nunito-400.woff') format('woff'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('/fuentes/nunito-800.woff') format('woff'); }
@font-face { font-family: 'Nunito'; font-weight: 900; font-display: swap; src: url('/fuentes/nunito-900.woff') format('woff'); }

:root {
  --violeta: #6D28D9;
  --violeta-hondo: #5B21B6;
  --tinta: #1E1B4B;
  --tinta-suave: #4A4270;
  --naranja: #F97316;
  --naranja-hover: #FB8A3C;
  --naranja-texto: #C2410C;      /* naranja legible sobre blanco */
  --lavanda: #EDE9FE;
  --lavanda-suave: #F5F3FF;
  --fondo: #FFFFFF;
  --enlace: #6D28D9;
  --hero: #6D28D9;
  --hero-suave: #E4DAFF;
  --radio: 0.875rem;
  --sombra: 0 1.25rem 3rem -1.5rem rgba(30, 27, 75, 0.28);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #ECEAFF;
    --tinta-suave: #B8B2DE;
    --naranja-texto: #FDBA74;
    --lavanda: #1B2638;
    --lavanda-suave: #17202F;
    --fondo: #121C2A;
    --enlace: #C4B5FD;
    --hero: #5B21B6;
    --sombra: 0 1.25rem 3rem -1.5rem rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 1.0625rem/1.6 'Nunito', system-ui, sans-serif;
}
a { color: var(--enlace); text-underline-offset: 0.18em; }
:is(a, button, input, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
.ancho { width: min(70rem, 100% - 2rem); margin-inline: auto; }
.saltar { position: absolute; left: 0.5rem; top: -4rem; background: var(--naranja); color: var(--tinta); font-weight: 800; padding: 0.6rem 1rem; border-radius: var(--radio); z-index: 50; }
.saltar:focus { top: 0.5rem; }

/* ── Wordmark: "ElaraAcademy" en violeta + naranja y el nombre del producto en tinta,
   igual que Elara Play. */
.logo { display: inline-flex; align-items: baseline; gap: 0.4em; text-decoration: none; font-weight: 900; font-size: 1.3rem; letter-spacing: -0.02em; white-space: nowrap; }
.logo .elara { color: var(--enlace); }
.logo .elara b { color: var(--naranja); font-weight: 900; }
.logo .prod { color: var(--tinta); }
.logo.sobre-violeta .elara, .logo.sobre-violeta .prod { color: #fff; }
.logo.sobre-violeta .elara b { color: #FED7AA; }

/* ── Botones: acción en naranja con texto tinta (el blanco sobre naranja no llega a 3:1). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font: 800 1rem/1 'Nunito', system-ui, sans-serif; text-decoration: none; cursor: pointer;
  padding: 0.95rem 1.6rem; min-height: 3rem; border-radius: var(--radio); border: 2px solid transparent;
  transition: background 0.18s, border-color 0.18s;
}
.btn-naranja { background: var(--naranja); color: #1E1B4B; }
.btn-naranja:hover { background: var(--naranja-hover); }
.btn-borde { background: transparent; color: var(--enlace); border-color: var(--lavanda); }
.btn-borde:hover { border-color: var(--violeta); }
.btn-borde.claro { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.btn-borde.claro:hover { border-color: #fff; background: rgba(255, 255, 255, 0.12); }

/* ── Etiqueta con la franja de Merk delante. */
.eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; font-weight: 900; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--naranja-texto); }
.eyebrow::before { content: ''; width: 1.3rem; height: 0.45rem; background: var(--naranja); transform: skewX(-38deg); flex: none; }
.sobre-violeta-bloque .eyebrow { color: #FED7AA; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }