/* ============================================
   LUNEXUS — Base: reset, tipografía, utilidades de layout
   ============================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-weight: 800; font-size: clamp(2.4rem, 5vw, 4.6rem); }
h2 { font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 3rem); }
/* Rol "subheading" ampliado (Design System §2.2, hallazgo H4): con el rango
   anterior (1.2rem–1.4rem) un h3 casi no escalaba entre mobile y desktop —
   se sentía plano frente a un h1/h2 que sí respiran con el viewport. */
h3 { font-weight: 600; font-size: clamp(1.25rem, 2.2vw, 1.75rem); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* Accesibilidad: salto al contenido (no existe en los mockups, se agrega por WCAG) */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  background: var(--color-brand);
  color: var(--color-text-dark);
  font-family: var(--font-heading);
  font-weight: 600;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  z-index: 100;
  transition: top var(--duration-base) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* Oculta visualmente sin ocultar del árbol de accesibilidad — para texto
   que un lector de pantalla necesita pero el diseño no muestra (ej. un
   h2 estructural que ningún mockup dibujó). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Foco visible consistente para navegación por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-8); }

/* ---------- Secciones ---------- */
/* 100px/72px sueltos → --space-24 (96px) y --space-16 (64px). El "tight"
   baja de 72 a 64 a propósito, no solo por redondeo: son secciones que
   preceden una grilla de cards o un timeline, no un bloque de lectura —
   menos aire ahí las hace sentir más compactas y intencionales, no apuradas. */
section { padding: var(--space-24) 0; position: relative; }
section.tight { padding: var(--space-16) 0; }

/* Cualquier sección con id (ej. los anclas de servicios.php) deja espacio
   para el navbar sticky (~80px de alto) al saltar con #fragmento — si no,
   el navbar tapa el principio de la sección. Regla global para que
   cualquier futura ancla del sitio funcione bien sin repetir esto. */
section[id] { scroll-margin-top: 100px; }
.section-light { background: var(--color-bg-light); color: var(--color-text-dark); }
.section-elevated { background: var(--color-bg-elevated); }

.section-head { max-width: 640px; margin-bottom: var(--space-16); }
/* eyebrow → h2: mismo valor en todo el sitio, ver rol "lead" y esta misma
   regla en .page-hero h1 / .home-hero h1 — un encabezado nunca queda a una
   distancia distinta de su eyebrow según la página en la que esté. */
.section-head h2 { margin-top: var(--space-4); }
/* Rol "lead": 18px en las 5 variantes que existían (17/18/19px sueltos) —
   ver docs/DESIGN-SYSTEM.md §2.2. */
.section-head p { margin-top: var(--space-5); color: var(--color-text-muted); font-size: 18px; line-height: 1.6; }
.section-light .section-head p { color: var(--color-text-dark-mut); }

/* ---------- Utilidades de grid ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }

@media (max-width: 860px) {
  .grid-2, .grid-3, .footer-grid { grid-template-columns: 1fr; }
  section { padding: var(--space-16) 0; }
}

/* Filosofía de Diseño #7 (docs/DESIGN-SYSTEM.md): la accesibilidad no se
   negocia. Interruptor global — neutraliza toda animación/transición
   (incluidas las decorativas del hero de Home) para quien lo pida a nivel
   de sistema operativo. Se agrega ahora, antes de sumar más movimiento
   en las próximas fases, no después. */
/* ---------- Scroll reveal (Fase 4 — Movimiento funcional) ---------- */
/* Sin JS, sin soporte de IntersectionObserver, o con prefers-reduced-motion,
   el contenido está completo desde el primer render — nada de esto aplica
   por defecto, solo bajo la clase que agrega assets/js/scroll-reveal.js
   (y esa clase nunca se agrega si el usuario pidió menos movimiento). El
   usuario nunca espera a que algo "aparezca" para poder leerlo: revisa
   docs/DESIGN-SYSTEM.md §2.6 para la lista completa y su justificación —
   son 6 puntos del sitio, no "todo lo que entra en el viewport". */
.js-reveal .producto-ancla-teaser,
.js-reveal #paginas-web,
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.js-reveal .producto-ancla-teaser.is-revealed,
.js-reveal #paginas-web.is-revealed,
.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Metodología: cascada por fila — refuerza que las 6 etapas son una
   secuencia que se lee en orden, no una lista suelta. El contenedor
   (.step-timeline) es lo que se observa; cada fila anima con su propio
   retraso una vez que el contenedor entra en pantalla. */
.js-reveal .step-row {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.js-reveal .step-row:nth-child(2) { transition-delay: 60ms; }
.js-reveal .step-row:nth-child(3) { transition-delay: 120ms; }
.js-reveal .step-row:nth-child(4) { transition-delay: 180ms; }
.js-reveal .step-row:nth-child(5) { transition-delay: 240ms; }
.js-reveal .step-row:nth-child(6) { transition-delay: 300ms; }
.js-reveal .step-timeline.is-revealed .step-row { opacity: 1; transform: translateY(0); }

/* Producto ancla: el par "Antes" / "Con Lunexus" — el segundo entra un
   instante después del primero para leerse como una secuencia (un antes y
   un después), no como dos bloques que aparecen a la vez sin relación. */
.js-reveal .comparison-card {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.js-reveal .comparison-card:nth-child(2) { transition-delay: 80ms; }
.js-reveal .grid-2:has(.comparison-card).is-revealed .comparison-card { opacity: 1; transform: translateY(0); }

/* Nosotros "Por qué Lunexus": 3 tarjetas en cascada — mismo mecanismo que
   arriba, usando [data-reveal] genérico en vez de sumar un selector nuevo
   a scroll-reveal.js. El contenedor .grid-3[data-reveal] recupera su
   propia opacidad (si no, se vería DOBLE fade: el contenedor entero
   apareciendo Y cada tarjeta apareciendo adentro) — solo animan las
   tarjetas, una por una. */
.js-reveal .grid-3[data-reveal] { opacity: 1; transform: none; }
.js-reveal .grid-3[data-reveal] .card {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.js-reveal .grid-3[data-reveal] .card:nth-child(2) { transition-delay: 80ms; }
.js-reveal .grid-3[data-reveal] .card:nth-child(3) { transition-delay: 160ms; }
.js-reveal .grid-3[data-reveal].is-revealed .card { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}