/* ============================================================
   SISTEMAS LEAL — BASE STYLES
   Reset, accesibilidad, tipografía base, animaciones reutilizables.
   Debe cargarse DESPUÉS de tokens.css.
   ============================================================ */

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: 'DM Sans', system-ui, sans-serif; color: var(--carbon); background: var(--white); overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; }
button { font-family: inherit; }

/* ---------- Accesibilidad ---------- */
.skip-link {
  position: absolute;
  top: -100%; left: 16px;
  background: var(--ocean); color: var(--white);
  padding: 8px 16px;
  border-radius: 0 0 8px 8px;
  z-index: var(--z-skiplink);
  font-size: 14px;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

:focus-visible { outline: 2px solid var(--sol); outline-offset: 2px; }
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

@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;
  }
}

/* ---------- Tipografía signature ---------- */
.serif {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.5px;
}
.serif-accent {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--sol);
  letter-spacing: -1px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--sol);
  display: inline-block;
}

/* ---------- Animaciones base ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.fade-up { opacity: 0; animation: fadeUp 0.8s var(--ease-out) forwards; }
.fade-up-d1 { animation-delay: 0.1s; }
.fade-up-d2 { animation-delay: 0.2s; }
.fade-up-d3 { animation-delay: 0.3s; }
.fade-up-d4 { animation-delay: 0.4s; }
.fade-up-d5 { animation-delay: 0.5s; }

/* IntersectionObserver reveal pattern */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1.visible { transition-delay: 0.1s; }
.reveal-d2.visible { transition-delay: 0.2s; }
.reveal-d3.visible { transition-delay: 0.3s; }
.reveal-d4.visible { transition-delay: 0.4s; }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* ---------- Brand helpers ---------- */
.brand-accent {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--sol);
}

/* ============================================================
   PAGE TRANSITIONS (2026-05-22 v3 — anti-flash)
   Fix para el "flash de fotografía" reportado por usuario.
   Causa: old terminaba antes que new empezara → hueco con fondo blanco.
   Solución: crossfade SIMULTÁNEO + background de marca en html.
   ============================================================ */

/* View Transitions API — OVERLAY FADE (no crossfade)
   La página nueva ya está visible debajo en opacity 1 desde el inicio.
   Solo el snapshot de la página vieja hace fade-out encima.
   Resultado: nunca se ve "blanco" en medio, solo veias la nueva apareciendo. */
@view-transition { navigation: auto; }

@keyframes vt-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* La nueva NO hace fade — ya está visible desde el frame inicial.
   Solo la vieja se disuelve encima. */
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  animation: vt-fade-out 150ms ease-out forwards;
  mix-blend-mode: normal;
  z-index: 1;
}

/* Background del html en color de marca (no blanco) — si el navegador
   muestra un frame de fondo entre páginas, que sea crema, no blanco puro.
   El body sigue con var(--white) en cada página, pero html lo respalda. */
html {
  background-color: var(--arena, #F5F2EC);
}

/* Fallback fade-in SOLO para navegadores SIN View Transitions API */
@supports not (view-transition-name: none) {
  @keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  body {
    animation: pageFadeIn 220ms var(--ease-out) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* ============================================================
   ANTI-FLASH FIX (2026-05-22)
   Cuando View Transitions está activa, deshabilitamos el estado
   inicial invisible de los .reveal — sino el crossfade muestra
   contenido en blanco (los reveals están en opacity:0 hasta que
   IntersectionObserver los detecta ~50ms después).
   El crossfade nativo ya da la sensación de "aparición suave".
   ============================================================ */
@supports (view-transition-name: none) {
  .reveal:not(.visible),
  .reveal-left:not(.visible),
  .reveal-right:not(.visible) {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   DARK MODE COLOR TRANSITIONS (2026-05-22 — refactor)
   Aplicar SOLO a elementos que cambian color con dark mode,
   NO a html/body (evita flash al navegar entre páginas).
   ============================================================ */
section,
nav.scrolled,
.footer-pro,
.card,
.svc-card, .why-card, .case-card, .testi-card, .m-card,
.problem-card, .how-step, .cap-card, .ind-card, .build-card,
.diff-card, .resultado-card, .metric-card, .size-card, .value-card,
.faq-item, .svc-visual-card, .card-num {
  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}