/* =============================================================
   TOKENS — Sazatek Digital S.L.
   Paleta oficial (Manual de Identidad Visual):
     Azul Sazatek  #0046A0  · Pantone 293 C · CMYK 100/68/0/12
     Gris Digital  #555555
   Tipografía oficial: Montserrat (Bold titulares / Light textos)
   ============================================================= */
:root {
  --blue-700: #00306E;
  --blue-600: #003B87;
  --blue-500: #0046A0;   /* Azul Sazatek — color corporativo primario */
  --blue-400: #1C6FCB;
  --blue-300: #4E97E6;
  --blue-200: #A6C8EC;
  --gray-brand: #555555; /* Gris Digital — color corporativo secundario */
  --white: #FFFFFF;

  /* Dark theme (default) */
  --bg-deep: #050F1C;
  --bg: #0B1B2E;
  --bg-elev: #0F2338;
  --bg-section-alt: #050F1C;
  --text: #E8EFF7;
  --text-mute: #98A6B8;
  --text-dim: #6B7A8C;
  --border: rgba(255,255,255,0.14);
  --border-strong: rgba(255,255,255,0.26);
  --card-grad: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025));
  --card-grad-hover: linear-gradient(180deg, rgba(0,70,160,0.14), rgba(255,255,255,0.02));
  --form-card-grad: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035));
  --process-card-grad: linear-gradient(180deg, rgba(0,70,160,0.12), rgba(255,255,255,0.03));
  --stats-grad: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  --stat-num-grad: linear-gradient(180deg, var(--white) 0%, var(--blue-300) 120%);
  --form-meta-grad: linear-gradient(180deg, var(--white), var(--blue-300));
  --nav-bg-scrolled: rgba(11, 27, 46, 0.72);
  --nav-bg-mobile: rgba(11, 27, 46, 0.95);
  --form-section-grad: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
  --rail-step-bg: #22334A;
  --hero-overlay-color: 255,255,255;
  --shadow-card: 0 24px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,70,160,0.14);
  --btn-ghost-hover: rgba(255,255,255,0.05);
  --logo-opacity: 0.6;
  --grain-blend: overlay;
}

[data-theme="light"] {
  /* Sobre fondo claro el acento debe ser el azul corporativo, no un tinte claro */
  --blue-300: #0046A0;
  --blue-200: #4E97E6;
  --bg-deep: #F2F5F8;
  --bg: #FFFFFF;
  --bg-elev: #E8EEF5;
  --bg-section-alt: #F2F5F8;
  --text: #0B1B2E;
  --text-mute: #555555;
  --text-dim: #6B7A8C;
  --border: rgba(11,27,46,0.08);
  --border-strong: rgba(11,27,46,0.14);
  --card-grad: linear-gradient(180deg, rgba(11,27,46,0.012), rgba(11,27,46,0.002));
  --card-grad-hover: linear-gradient(180deg, rgba(0,70,160,0.05), rgba(11,27,46,0.005));
  --form-card-grad: #FFFFFF;
  --process-card-grad: linear-gradient(180deg, rgba(0,70,160,0.04), rgba(11,27,46,0.005));
  --stats-grad: #FFFFFF;
  --stat-num-grad: linear-gradient(180deg, #0B1B2E 0%, #0046A0 120%);
  --form-meta-grad: linear-gradient(180deg, #0B1B2E, #0046A0);
  --nav-bg-scrolled: rgba(255, 255, 255, 0.78);
  --nav-bg-mobile: rgba(255, 255, 255, 0.96);
  --form-section-grad: linear-gradient(180deg, #F2F5F8 0%, #FFFFFF 100%);
  --rail-step-bg: #D8E1EB;
  --hero-overlay-color: 11,27,46;
  --shadow-card: 0 24px 60px -30px rgba(11,27,46,0.18), 0 0 0 1px rgba(0,70,160,0.04);
  --btn-ghost-hover: rgba(11,27,46,0.04);
  --logo-opacity: 0.5;
  --grain-blend: multiply;
}

:root {
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;

  --maxw: 1240px;
  --gutter: clamp(20px, 4vw, 56px);

  /* Montserrat: tipografía corporativa oficial de Sazatek Digital */
  --font-sans: "Montserrat", "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============= RESET ============= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea { font: inherit; color: inherit; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ============= TYPOGRAPHY ============= */
.section-title {
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 18px 0 18px;
  text-wrap: balance;
}
.section-sub {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--text-mute);
  max-width: 64ch;
  line-height: 1.55;
  text-wrap: pretty;
  margin: 0;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-300);
  font-feature-settings: "tnum";
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue-500);
  box-shadow: 0 0 12px var(--blue-500);
}
.section-head { max-width: 720px; margin-bottom: 56px; }

/* ============= BUTTONS ============= */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--blue-500);
  color: white;
  border: 1px solid var(--blue-500);
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease);
  box-shadow: 0 8px 32px -10px rgba(0,70,160,0.6), inset 0 1px 0 rgba(255,255,255,0.18);
  position: relative;
}
.btn-primary:hover {
  background: #1C6FCB;
  transform: translateY(-1px);
  box-shadow: 0 12px 40px -10px rgba(0,70,160,0.8), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-large { padding: 16px 28px; font-size: 16px; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: transparent;
  font-weight: 500; font-size: 14px;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.btn-ghost:hover { background: var(--btn-ghost-hover, rgba(255,255,255,0.05)); border-color: var(--border-strong); }

/* ============= NAVBAR ============= */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 16px 0;
  transition: padding 250ms var(--ease), background 250ms var(--ease), backdrop-filter 250ms var(--ease), border-color 250ms var(--ease);
  border-bottom: 1px solid transparent;
}
.navbar.scrolled {
  padding: 10px 0;
  background: var(--nav-bg-scrolled);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--border);
}
.nav-container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-brand { display: flex; align-items: center; flex: 0 0 auto; }

/* ============= MARCA =============
   Área de respeto y variantes cromáticas según el Manual de Identidad Visual.
   El logotipo nunca se deforma: los <img> conservan su relación de aspecto. */
.sz-mark, .sz-lockup {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
}
.sz-mark img, .sz-lockup img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity 250ms var(--ease);
}
/* Versión a color sobre fondo claro; monocroma blanca sobre fondo oscuro */
.sz-art-white { opacity: 1; }
.sz-art-color { opacity: 0; }
[data-theme="light"] .sz-art-white { opacity: 0; }
[data-theme="light"] .sz-art-color { opacity: 1; }
.nav-brand:hover .sz-mark img, .nav-brand:hover .sz-lockup img { filter: brightness(1.08); }
@media (max-width: 480px) { .nav-brand .sz-lockup { height: 26px !important; width: 117px !important; } }
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-size: 14px; color: var(--text-mute);
  transition: color 180ms var(--ease);
  position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; bottom: -6px; left: 0; right: 0; height: 1px;
  background: var(--blue-500); transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-right { display: flex; align-items: center; gap: 16px; }
.lang-switch { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); font-feature-settings: "tnum"; }
.lang-switch a { padding: 4px 6px; color: var(--text-dim); transition: color 180ms; font-weight: 500; letter-spacing: 0.03em; }
.lang-switch a.active { color: var(--text); }
.lang-switch a:hover { color: var(--text); }
.lang-sep { color: var(--text-dim); }

/* Theme toggle */
.theme-toggle {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-mute);
  border: 1px solid var(--border);
  transition: color 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
}
.theme-toggle:hover { color: var(--text); background: var(--btn-ghost-hover); border-color: var(--border-strong); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun, .theme-toggle .icon-moon {
  position: absolute;
  transition: transform 400ms var(--ease), opacity 250ms var(--ease);
}
[data-theme="light"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
[data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }
:root:not([data-theme="light"]) .theme-toggle .icon-sun,
[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); }
:root:not([data-theme="light"]) .theme-toggle .icon-moon,
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }

.nav-burger { display: none; width: 36px; height: 36px; flex-direction: column; gap: 4px; align-items: center; justify-content: center; }
.nav-burger span { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform 200ms var(--ease), opacity 200ms; }
.nav-burger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--nav-bg-mobile); backdrop-filter: blur(18px);
    padding: 24px var(--gutter); gap: 18px;
    border-bottom: 1px solid var(--border);
  }
}

/* ============= HERO ============= */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 140px 0 100px;
  display: flex; align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
.hero-grid-overlay {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(var(--hero-overlay-color),0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--hero-overlay-color),0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events: none;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0,70,160,0.18), transparent 60%);
  z-index: 1; pointer-events: none;
}
.hero-container { position: relative; z-index: 2; max-width: 1100px; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue-300);
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(0,70,160,0.06);
  backdrop-filter: blur(8px);
  margin-bottom: 32px;
  opacity: 0; transform: translateY(8px);
  animation: fadeUp 700ms var(--ease) 100ms forwards;
}
.hero-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue-500);
  box-shadow: 0 0 12px var(--blue-500);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}

.hero-title {
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 0 0 32px;
  text-wrap: balance;
}
.reveal-line {
  display: block; overflow: hidden; padding: 0.04em 0;
}
.reveal-line > span {
  display: block;
  transform: translateY(110%);
  transition: transform 900ms var(--ease-out);
}
.hero.mounted .reveal-line:nth-child(1) > span { transform: translateY(0); transition-delay: 200ms; }
.hero.mounted .reveal-line:nth-child(2) > span { transform: translateY(0); transition-delay: 320ms; }
.hero.mounted .reveal-line:nth-child(3) > span { transform: translateY(0); transition-delay: 440ms; }

.hero-accent {
  background: linear-gradient(120deg, var(--blue-300) 0%, var(--blue-500) 50%, var(--blue-200) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }

.hero-sub {
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--text-mute);
  max-width: 60ch;
  line-height: 1.5;
  margin: 0 0 44px;
  opacity: 0;
  animation: fadeUp 800ms var(--ease) 700ms forwards;
}
.hero-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 28px;
  opacity: 0;
  animation: fadeUp 800ms var(--ease) 900ms forwards;
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 18px;
  font-size: 13px; color: var(--text-dim);
}
.hero-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.meta-dot { color: var(--blue-500); font-size: 8px; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.hero-scroll {
  position: absolute;
  bottom: 36px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
  z-index: 2;
  opacity: 0;
  animation: fadeUp 800ms var(--ease) 1300ms forwards;
}
.scroll-dot {
  animation: scrollDot 2s ease-in-out infinite;
}
@keyframes scrollDot {
  0% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* Hero variants */
.hero-aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.aurora-blob {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55;
  animation: drift 20s ease-in-out infinite;
}
.aurora-1 { width: 600px; height: 600px; background: radial-gradient(circle, #0046A0 0%, transparent 70%); top: -200px; left: -100px; }
.aurora-2 { width: 500px; height: 500px; background: radial-gradient(circle, #1C6FCB 0%, transparent 70%); bottom: -150px; right: -80px; animation-delay: -7s; }
.aurora-3 { width: 400px; height: 400px; background: radial-gradient(circle, #4E97E6 0%, transparent 70%); top: 40%; left: 50%; animation-delay: -13s; opacity: 0.35; }
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(60px, -40px) scale(1.1); }
  66% { transform: translate(-40px, 50px) scale(0.95); }
}
.aurora-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.4; mix-blend-mode: var(--grain-blend);
}

.hero-type .hero-grid-overlay {
  background-size: 96px 96px;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
}

/* ============= MARQUEE ============= */
.marquee {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-deep);
  overflow: hidden;
  padding: 18px 0;
}
.marquee-track {
  display: flex; gap: 56px;
  white-space: nowrap;
  animation: marqueeScroll 40s linear infinite;
  width: max-content;
}
.marquee-item {
  display: inline-flex; align-items: center; gap: 18px;
  font-size: 14px; color: var(--text-mute);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.marquee-dot { color: var(--blue-500); font-size: 10px; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% / 3)); }
}

/* ============= GENERIC SECTION ============= */
.section { padding: 120px 0; position: relative; }
.section.shown .section-head,
.section.shown .svc-card,
.section.shown .why-card,
.section.shown .stat,
.section.shown .form-card,
.section.shown .form-left {
  opacity: 1; transform: translateY(0);
}

/* ============= SERVICES ============= */
.services { background: var(--bg); }
.services-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 800px) { .services-grid { grid-template-columns: 1fr; } }

.svc-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-grad);
  padding: 36px 32px 32px;
  overflow: hidden;
  opacity: 0; transform: translateY(20px);
  transition: opacity 700ms var(--ease) calc(var(--i) * 90ms),
              transform 700ms var(--ease) calc(var(--i) * 90ms),
              border-color 250ms var(--ease),
              background 250ms var(--ease);
}
.svc-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(0,70,160,0.18), transparent 50%);
  opacity: 0; transition: opacity 300ms var(--ease);
  pointer-events: none;
}
.svc-card:hover {
  border-color: var(--border-strong);
  background: var(--card-grad-hover);
}
.svc-card:hover::before { opacity: 1; }
.svc-card-inner { position: relative; z-index: 1; }
.svc-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.svc-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--blue-300);
  font-feature-settings: "tnum";
  letter-spacing: 0.05em;
}
.svc-title {
  font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0;
}
.svc-desc { color: var(--text-mute); font-size: 15px; line-height: 1.55; margin: 0 0 24px; }
.svc-bullets {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
  border-top: 1px dashed var(--border);
  padding-top: 20px;
}
.svc-bullets li {
  font-size: 13px; color: var(--text-mute);
  display: flex; align-items: center; gap: 8px;
}
.svc-bullet-tick { color: var(--blue-500); font-size: 14px; }

/* ============= PROOF ============= */
.proof { background: var(--bg-deep); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.proof-head { max-width: 720px; margin-bottom: 56px; }
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--stats-grad);
}
@media (max-width: 800px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat {
  padding: 36px 28px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  opacity: 0; transform: translateY(16px);
  transition: opacity 700ms var(--ease) calc(var(--i) * 80ms), transform 700ms var(--ease) calc(var(--i) * 80ms);
}
.stat:last-child { border-right: 0; }
@media (max-width: 800px) {
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(n+3) { border-bottom: 0; }
}
@media (min-width: 801px) {
  .stat { border-bottom: 0; }
}
.stat-num {
  font-size: clamp(40px, 4.5vw, 60px);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1;
  margin-bottom: 12px;
  background: var(--stat-num-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-feature-settings: "tnum";
}
.stat-label { color: var(--text-mute); font-size: 13px; line-height: 1.45; }

.logos-strip { margin-top: 48px; }
.logos-label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 24px;
}
.logos {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 48px 56px;
  align-items: center;
}
.logo-mark {
  font-family: var(--font-sans);
  font-weight: 700; letter-spacing: -0.01em;
  font-size: 22px;
  color: var(--text-mute);
  opacity: var(--logo-opacity);
  transition: opacity 200ms;
}
.logo-mark:hover { opacity: 1; }

/* ============= WHY (vertical manifesto, no scroll-jack) ============= */
.why { background: var(--bg); padding: 120px 0 80px; position: relative; }
.why-head { max-width: 760px; margin: 0 0 80px; }
.why-section-title { margin: 18px 0 0; }

.why-rows { position: relative; }
.why-rule {
  height: 1px;
  background: var(--border);
  transform-origin: left center;
  transform: scaleX(0.06);
  transition: transform 1100ms var(--ease-out);
}
.why-row.in .why-rule { transform: scaleX(1); }
.why-rule-end { transform: scaleX(0.06); animation: ruleEnd 1100ms var(--ease-out) 200ms forwards; }
@keyframes ruleEnd { to { transform: scaleX(1); } }

.why-row { padding: 64px 0 72px; position: relative; }
.why-row-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.4fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.why-numeral {
  position: relative;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(120px, 18vw, 240px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  user-select: none;
  height: 1em;
}
.why-numeral-outline,
.why-numeral-fill {
  position: absolute;
  inset: 0;
  display: block;
  font-feature-settings: "tnum";
}
.why-numeral-outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--border-strong);
  opacity: 1;
}
.why-numeral-fill {
  color: var(--blue-500);
  -webkit-text-stroke: 1px transparent;
  /* Wipe up: clip-path drives a vertical fill keyed off scroll progress (--p: 0..1) */
  clip-path: inset(calc((1 - var(--p, 0)) * 100%) 0 0 0);
  transition: clip-path 80ms linear;
  text-shadow: 0 0 60px rgba(0,70,160,0.25);
}

.why-body {
  position: relative;
  padding-top: 18px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 800ms var(--ease-out) 120ms, transform 800ms var(--ease-out) 120ms;
}
.why-row.in .why-body { opacity: 1; transform: none; }

.why-meta {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  margin-bottom: 28px;
}
.why-meta-num { color: var(--blue-300); }
.why-meta-sep { color: var(--text-dim); }

.why-title {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 22px;
  overflow: hidden;
}
.why-title-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 900ms var(--ease-out) 220ms;
}
.why-row.in .why-title-inner { transform: translateY(0); }

.why-desc {
  color: var(--text-mute);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  margin: 0;
  max-width: 56ch;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 800ms var(--ease-out) 360ms, transform 800ms var(--ease-out) 360ms;
}
.why-row.in .why-desc { opacity: 1; transform: none; }

@media (max-width: 800px) {
  .why { padding: 80px 0 60px; }
  .why-head { margin-bottom: 48px; }
  .why-row { padding: 40px 0 48px; }
  .why-row-grid { grid-template-columns: 1fr; gap: 18px; }
  .why-numeral { font-size: clamp(96px, 28vw, 160px); }
  .why-body { padding-top: 8px; }
  .why-meta { margin-bottom: 18px; }
}

/* ============= PROCESS ============= */
.process { padding: 0; background: var(--bg-deep); position: relative; height: 300vh; }
.process-spacer { display: none; }
.process-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex; align-items: center;
  padding: 100px 0;
}
.process-container {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
  width: 100%;
}
@media (max-width: 900px) {
  .process-container { grid-template-columns: 1fr; gap: 32px; }
  .process-sticky { padding: 80px 0; }
}

.process-rail {
  margin-top: 40px;
  display: flex; flex-direction: column; gap: 4px;
  border-left: 1px solid var(--border);
  padding-left: 20px;
}
.rail-step {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 8px;
  text-align: left;
  position: relative;
  color: var(--text-dim);
  transition: color 250ms;
}
.rail-step::before {
  content: ""; position: absolute; left: -24px; top: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rail-step-bg);
  border: 1px solid var(--border-strong);
  transform: translateY(-50%);
  transition: background 250ms, box-shadow 250ms, transform 250ms;
}
.rail-step.done::before { background: var(--blue-500); }
.rail-step.active::before {
  background: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(0,70,160,0.18), 0 0 20px var(--blue-500);
  transform: translateY(-50%) scale(1.3);
}
.rail-step.active { color: var(--text); }
.rail-step.done { color: var(--text-mute); }
.rail-num { font-family: var(--font-mono); font-size: 12px; }
.rail-label { font-size: 14px; font-weight: 500; }

.process-right { position: relative; }
.process-card {
  position: absolute; inset: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px;
  background: var(--process-card-grad);
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: opacity 500ms var(--ease), transform 600ms var(--ease);
  overflow: hidden;
  pointer-events: none;
}
.process-card.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  position: relative;
  pointer-events: auto;
}
.process-card-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(0,70,160,0.18), transparent 60%),
    radial-gradient(circle at 0% 100%, rgba(0,70,160,0.08), transparent 60%);
  pointer-events: none;
}
.process-card > * { position: relative; }
.process-card-num {
  font-family: var(--font-mono);
  font-size: 13px; color: var(--blue-300);
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}
.process-card-title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700; letter-spacing: -0.03em;
  margin: 0 0 20px; line-height: 1;
}
.process-card-desc {
  font-size: 17px; color: var(--text-mute); line-height: 1.55;
  margin: 0 0 32px;
  max-width: 50ch;
}
.deliverables-label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue-300); margin-bottom: 14px;
}
.deliverables {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
}
.deliverable {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--text);
}
.deliverable-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,70,160,0.15);
  color: var(--blue-300); font-size: 11px;
}

/* ============= FORM ============= */
.form-section {
  background: var(--form-section-grad);
  position: relative;
  overflow: hidden;
}
.form-section::before {
  content: "";
  position: absolute; top: -200px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,70,160,0.15), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.form-container { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; position: relative; }
@media (max-width: 900px) { .form-container { grid-template-columns: 1fr; gap: 40px; } }

.form-left { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.form-meta {
  display: flex; gap: 32px;
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.form-meta-item { display: flex; flex-direction: column; gap: 4px; }
.form-meta-num {
  font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
  background: var(--form-meta-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-feature-settings: "tnum";
}
.form-meta-label { font-size: 12px; color: var(--text-dim); letter-spacing: 0.04em; }

.form-card {
  background: var(--form-card-grad);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  opacity: 0; transform: translateY(20px);
  transition: opacity 700ms var(--ease) 150ms, transform 700ms var(--ease) 150ms;
}
.form-progress {
  height: 2px;
  background: var(--border);
  position: relative;
}
.form-progress-bar {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-300));
  transition: width 500ms var(--ease);
}
.form-body { padding: 40px 36px 32px; }
.form-step-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.form-step-num {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--blue-300); letter-spacing: 0.08em;
  text-transform: uppercase;
}
.form-label {
  display: block;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 20px;
  text-wrap: balance;
}
.form-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--border-strong);
  padding: 14px 0;
  font-size: 18px;
  color: var(--text);
  outline: none;
  transition: border-color 200ms;
  border-radius: 0;
}
.form-input::placeholder { color: var(--text-dim); }
.form-input:focus { border-bottom-color: var(--blue-500); }
.form-textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.form-error { color: #FF6B7A; font-size: 13px; margin-top: 10px; }

.form-actions {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 28px;
}
.form-hint { font-size: 12px; color: var(--text-dim); margin-left: auto; }

.form-success {
  padding: 56px 36px;
  text-align: center;
}
.success-icon { display: flex; justify-content: center; margin-bottom: 20px; }
.success-circle { stroke-dasharray: 138; stroke-dashoffset: 138; animation: drawCircle 600ms var(--ease) forwards; }
.success-check { stroke-dasharray: 40; stroke-dashoffset: 40; animation: drawCheck 400ms var(--ease) 500ms forwards; }
@keyframes drawCircle { to { stroke-dashoffset: 0; } }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
.success-title {
  font-size: 32px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.success-body { color: var(--text-mute); font-size: 16px; line-height: 1.5; max-width: 36ch; margin: 0 auto 28px; }

/* ============= FOOTER ============= */
.site-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
  padding: 80px 0 32px;
}
.footer-top {
  display: grid; grid-template-columns: 1.3fr 2fr;
  gap: 64px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 800px) { .footer-top { grid-template-columns: 1fr; gap: 40px; } }

.brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-tagline { color: var(--text-mute); font-size: 14px; line-height: 1.55; max-width: 36ch; margin: 0 0 20px; }
.lang-switch-footer { font-size: 13px; }
.lang-switch-footer a { padding: 4px; }

.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 28px; }
@media (max-width: 900px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .footer-cols { grid-template-columns: 1fr; } }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col h4 {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 4px;
  font-weight: 500;
}
.footer-col a, .footer-col span, .footer-col address {
  color: var(--text-mute);
  font-size: 14px;
  font-style: normal;
  transition: color 180ms;
  line-height: 1.5;
}
.footer-col a:hover { color: var(--text); }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 32px;
  font-size: 12px; color: var(--text-dim);
  flex-wrap: wrap; gap: 12px;
}

/* ============= RESPONSIVE ============= */
@media (max-width: 700px) {
  .section { padding: 80px 0; }
  .form-body { padding: 32px 24px 24px; }
  .svc-card { padding: 28px 24px 24px; }
  .svc-bullets { grid-template-columns: 1fr; }
  .deliverables { grid-template-columns: 1fr; }
}

/* ============= ENLACE DE SERVICIO ============= */
.svc-link {
  display: inline-flex; align-items: center;
  margin-top: 20px;
  font-size: 14px; font-weight: 500;
  color: var(--blue-300);
  transition: gap 200ms var(--ease), color 200ms var(--ease);
}
.svc-link:hover { color: var(--blue-500); }
[data-theme="light"] .svc-link:hover { color: var(--blue-400); }

/* ============= COMPROMISOS ============= */
.commitments { background: var(--bg-deep); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.commit-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.commit-card {
  background: var(--bg-deep);
  padding: 32px 28px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 700ms var(--ease-out) calc(var(--i) * 90ms),
              transform 700ms var(--ease-out) calc(var(--i) * 90ms);
}
.section.shown .commit-card { opacity: 1; transform: none; }
.commit-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue-500); color: #fff;
  font-size: 13px; margin-bottom: 18px;
}
.commit-title { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 10px; }
.commit-desc { color: var(--text-mute); font-size: 14px; line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .commit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .commit-grid { grid-template-columns: 1fr; } }

/* ============= FAQ =============
   <details> nativo: el texto vive en el DOM aunque esté plegado, que es lo
   que necesitan tanto los lectores de pantalla como los rastreadores. */
.faq-list { max-width: 860px; }
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 4px;
  cursor: pointer;
  list-style: none;
  transition: color 200ms var(--ease);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--blue-300); }
.faq-q h3 {
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 700; letter-spacing: -0.015em;
  margin: 0; line-height: 1.35;
}
.faq-chevron {
  flex: 0 0 auto;
  width: 11px; height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px);
  opacity: 0.5;
  transition: transform 250ms var(--ease), opacity 250ms var(--ease);
}
.faq-item[open] .faq-chevron { transform: rotate(225deg) translate(-3px, -3px); opacity: 1; }
.faq-a {
  padding: 0 4px 30px;
  max-width: 72ch;
}
.faq-a p {
  margin: 0;
  color: var(--text-mute);
  font-size: 16px; line-height: 1.65;
  text-wrap: pretty;
}
.faq-item[open] .faq-a { animation: faqIn 400ms var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ============= PÁGINAS DE SERVICIO (HTML estático) =============
   Estas páginas no montan React: el contenido está en el documento para
   que cualquier rastreador lo lea sin ejecutar JavaScript. */
.page-main { padding-top: 132px; }
.page-hero { padding-bottom: 56px; }
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-dim);
  margin-bottom: 28px;
}
.breadcrumb a { color: var(--text-dim); transition: color 180ms; }
.breadcrumb a:hover { color: var(--blue-300); }
.breadcrumb-sep { opacity: 0.5; }
.page-title {
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.05; letter-spacing: -0.03em; font-weight: 700;
  margin: 16px 0 24px; max-width: 20ch; text-wrap: balance;
}
.page-lede {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.6; color: var(--text-mute);
  max-width: 62ch; margin: 0 0 36px; text-wrap: pretty;
}
.page-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 72px; align-items: start;
  padding-bottom: 40px;
}
.page-article { max-width: 72ch; }
.page-article h2 {
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
  margin: 56px 0 18px; text-wrap: balance;
}
.page-article h2:first-child { margin-top: 0; }
.page-article h3 {
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 700; letter-spacing: -0.015em;
  margin: 34px 0 12px;
}
.page-article p {
  color: var(--text-mute);
  font-size: 16px; line-height: 1.7; margin: 0 0 18px;
  text-wrap: pretty;
}
.page-article strong { color: var(--text); font-weight: 600; }
.page-article a:not(.btn-primary):not(.btn-ghost) {
  color: var(--blue-300);
  border-bottom: 1px solid transparent;
  transition: border-color 180ms;
}
.page-article a:not(.btn-primary):not(.btn-ghost):hover { border-bottom-color: currentColor; }
.page-article ul { padding-left: 0; margin: 0 0 22px; list-style: none; }
.page-article ul li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  color: var(--text-mute); font-size: 16px; line-height: 1.6;
}
.page-article ul li::before {
  content: "→"; position: absolute; left: 0; top: 0;
  color: var(--blue-500); font-size: 14px;
}
.page-callout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue-500);
  background: var(--card-grad);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 22px 26px; margin: 32px 0;
}
.page-callout p:last-child { margin-bottom: 0; }

.page-aside { position: sticky; top: 108px; display: grid; gap: 24px; }
.aside-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-grad);
  padding: 26px 24px;
}
.aside-card h2, .aside-card h3 {
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--blue-300);
  margin: 0 0 16px;
}
.aside-card p { font-size: 14px; line-height: 1.6; color: var(--text-mute); margin: 0 0 18px; }
.aside-links { display: grid; gap: 2px; }
.aside-links a {
  display: block; padding: 9px 0;
  font-size: 14px; color: var(--text-mute);
  border-bottom: 1px solid var(--border);
  transition: color 180ms, padding-left 180ms var(--ease);
}
.aside-links a:last-child { border-bottom: 0; }
.aside-links a:hover { color: var(--blue-300); padding-left: 5px; }
.aside-links a[aria-current="page"] { color: var(--text); font-weight: 600; }

.page-cta {
  border-top: 1px solid var(--border);
  background: var(--bg-deep);
  padding: 88px 0;
  text-align: center;
}
.page-cta h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
  margin: 0 0 16px; text-wrap: balance;
}
.page-cta p {
  color: var(--text-mute); font-size: 17px; line-height: 1.6;
  max-width: 52ch; margin: 0 auto 32px; text-wrap: pretty;
}

@media (max-width: 1000px) {
  .page-body { grid-template-columns: 1fr; gap: 48px; }
  .page-aside { position: static; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .page-main { padding-top: 104px; }
  .page-aside { grid-template-columns: 1fr; }
  .page-cta { padding: 64px 0; }
}

/* ============= CONTENIDO PREVIO AL MONTAJE =============
   El HTML que viaja dentro de #root y que React sustituye al montar. No se
   oculta: es el mismo texto que acaba viendo el visitante, y así los
   rastreadores que no ejecutan JavaScript leen la página completa. Se le da
   un estilo sobrio para que el instante que está en pantalla —o la visita
   con JavaScript desactivado— siga siendo una página presentable. */
.prerender {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px var(--gutter) 96px;
}
.prerender header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px;
  padding-bottom: 28px; margin-bottom: 48px;
  border-bottom: 1px solid var(--border);
}
.prerender header img { width: 180px; height: auto; }
.prerender nav { display: flex; flex-wrap: wrap; gap: 18px; }
.prerender nav a { font-size: 14px; color: var(--text-mute); }
.prerender nav a:hover { color: var(--blue-300); }
.prerender h1 {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.06;
  margin: 8px 0 20px; text-wrap: balance;
}
.prerender h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
  margin: 56px 0 14px; text-wrap: balance;
}
.prerender h3 {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  margin: 28px 0 8px;
}
.prerender p, .prerender li, .prerender address {
  color: var(--text-mute);
  font-size: 16px; line-height: 1.65; font-style: normal;
  margin: 0 0 14px; text-wrap: pretty;
}
.prerender ul { list-style: none; padding: 0; margin: 0 0 16px; }
.prerender li { position: relative; padding-left: 22px; margin-bottom: 6px; font-size: 15px; }
.prerender li::before { content: "→"; position: absolute; left: 0; color: var(--blue-500); font-size: 13px; }
.prerender a { color: var(--blue-300); }
.prerender a:hover { text-decoration: underline; }
.prerender section { border-top: 1px solid var(--border); padding-top: 8px; }
.prerender section:first-of-type { border-top: 0; }
.prerender footer {
  border-top: 1px solid var(--border);
  margin-top: 64px; padding-top: 28px;
  font-size: 13px;
}

/* ============= PÁGINAS LEGALES =============
   Columna de texto más ancha que en las landings y aside estrecho: son
   documentos para leer de arriba abajo, no para escanear. */
.page-body-wide { grid-template-columns: minmax(0, 1fr) 260px; gap: 64px; }
.page-body-wide .page-article { max-width: 78ch; }
.page-body-wide .page-article h2 { margin-top: 48px; }
.page-body-wide .page-article ul li { margin-bottom: 12px; }
.page-article code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--btn-ghost-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}
.page-updated {
  margin-top: 48px; padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-dim);
}
@media (max-width: 1000px) { .page-body-wide { grid-template-columns: 1fr; } }