/* ==========================================================
   WoW Agencia Creativa · Estilos base y componentes
   Necesita css/tokens.css cargado antes que este archivo.
   Aquí viven las piezas que se repiten en toda la web:
   botones, tarjetas, etiquetas, menú, formularios y las
   entradas animadas de las secciones.
   ========================================================== */


/* ---------- 1. Limpieza inicial ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  overflow-x: clip;       /* nada debe mover la página de lado */
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Texto solo para lectores de pantalla */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}


/* ---------- 2. Estructura de página ---------- */

/* Contenedor: centra el contenido y deja margen a los lados */
.wrap {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* Sección: separación vertical entre bloques de la página */
.section { padding-block: clamp(56px, 9vw, 110px); }

/* Dos columnas que se apilan en el celular */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.split > * { min-width: 0; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

/* Cuadrícula que reparte tarjetas según el espacio disponible */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-5);
}
.grid-cards > * { min-width: 0; }


/* ---------- 3. Textos ---------- */

.eyebrow {
  font: 500 var(--text-xs) var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.title-hero  { font: 800 var(--text-4xl) / 1.02 var(--font-main); letter-spacing: -0.03em; }
.title-section {
  font: 700 var(--text-3xl) / 1.1 var(--font-main);
  letter-spacing: -0.02em;
  margin-top: var(--space-3);
  max-width: 20ch;
}
.title-card  { font: 600 var(--text-lg) / 1.3 var(--font-main); }

.lead {
  color: var(--fg-muted);
  font-size: var(--text-lg);
  margin-top: var(--space-4);
  max-width: 54ch;
}

.muted { color: var(--fg-muted); }

/* Palabra destacada en azul dentro de un título */
.hl { color: var(--accent); }


/* ---------- 4. Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--blue-action);
  color: var(--white);
  font: 600 var(--text-sm) / 1 var(--font-main);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--time-fast), transform var(--time-fast) var(--ease-out),
              box-shadow var(--time-fast), border-color var(--time-fast);
}
.btn:hover {
  background: var(--blue-action-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue);
}
.btn:active { transform: translateY(0); box-shadow: none; }

/* Botón secundario: solo borde, se adapta a fondo oscuro o claro */
.btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line);
}
.btn--ghost:hover {
  background: transparent;
  border-color: var(--accent);
  box-shadow: none;
}

.btn--sm { padding: 0.6rem 1.1rem; }
.btn--lg { padding: 1.05rem 1.9rem; font-size: var(--text-base); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }


/* ---------- 5. Tarjetas y etiquetas ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

/* Tarjeta que se levanta al pasar el cursor */
.card--lift {
  transition: transform var(--time-base) var(--ease-out),
              border-color var(--time-fast), box-shadow var(--time-base);
}
.card--lift:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
}

/* Cuadro de icono (servicios, pasos del curso) */
.icon-box {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--blue-action);
  color: var(--white);
  box-shadow: var(--shadow-blue);
}
.icon-box svg { width: 24px; height: 24px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  font: 500 var(--text-xs) var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}


/* ---------- 6. Menú superior ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  background: rgba(10, 14, 23, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(34, 48, 79, 0.7);
  color: var(--white);
}
.site-header__in {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  max-width: var(--page-width);
  height: 60px;
  margin-inline: auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.brand svg { width: 30px; height: 30px; }

/* El logo de WoW en el menú (lo dibuja js/brand.js) */
.site-header {
  --logo-letters: var(--white);
  --logo-ring: var(--blue-500);
  --logo-arrow: var(--blue-300);
}
.brand .brand__logo { width: 92px; height: auto; aspect-ratio: 936 / 250; }

.nav { display: flex; gap: var(--space-5); margin-left: auto; }
.nav a {
  position: relative;
  padding-block: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--mist-300);
  text-decoration: none;
  transition: color var(--time-fast);
}
.nav a::after {                        /* raya azul que crece al pasar el cursor */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--blue-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--time-base) var(--ease-out);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--white); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.site-header .btn { margin-left: var(--space-2); }
@media (max-width: 760px) {
  .nav { display: none; }              /* en celular el menú se abre con botón (llega más adelante) */
  .site-header .btn { margin-left: auto; }
}

/* Barra fina que se llena mientras bajas por la página */
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  pointer-events: none;
}
.scroll-progress i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-300));
  transform-origin: left; transform: scaleX(0);
}


/* ---------- 7. Formularios (registro, ingreso, panel) ---------- */

.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: 500; }
.field .hint { font-size: var(--text-xs); color: var(--fg-muted); }

.input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  color: var(--fg);
  font-size: 16px;                     /* 16 px evita que el celular haga zoom al escribir */
  transition: border-color var(--time-fast), box-shadow var(--time-fast);
}
.input::placeholder { color: var(--fg-muted); opacity: 0.75; }
.input:hover { border-color: var(--accent); }
.input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--blue-glow);
}
.input[aria-invalid="true"] { border-color: var(--bad); }
.field .error { font-size: var(--text-xs); color: var(--bad); }

/* Mensajes de la Academia */
.msg { padding: 0.7rem 1rem; border-radius: var(--radius-sm); border: 1px solid; font-weight: 600; font-size: var(--text-sm); }
.msg--ok   { background: var(--ok-soft);   border-color: var(--ok);   color: var(--ok); }
.msg--bad  { background: var(--bad-soft);  border-color: var(--bad);  color: var(--bad); }
.msg--tip  { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }


/* ---------- 8. Entradas animadas ---------- */
/* Cualquier elemento con la clase "reveal" aparece suavemente al llegar a pantalla.
   La clase "js" la pone el JavaScript en <html>; si por algo no carga,
   todo se ve normal y nada queda escondido. */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--time-slow) var(--ease-out), transform var(--time-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);   /* --i = turno de entrada: 0, 1, 2... */
}
.js .reveal.is-in { opacity: 1; transform: none; }


/* ---------- 9. Para quien prefiere menos movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* Enlace para saltar directo al contenido (teclado y lectores de pantalla) */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: #fff; color: #0a0e17; padding: .6rem 1rem; border-radius: 0 0 .6rem 0; font-weight: 600; text-decoration: none; }
.skip-link:focus { left: 0; }