/* ==========================================================================
   Fawef · estilos del sitio
   Depende de tokens.css (cargado antes en el <head>): ahí están los colores,
   las letras y los espacios de la marca. Aquí NO hay colores sueltos: todo sale
   de los tokens (a veces mezclado con transparencia mediante color-mix()).
   Orden: fuentes · base · utilidades · cabecera · hero · secciones · componentes · pie
   Mobile first: los @media solo amplían (min-width).
   ========================================================================== */

/* ---------- Fuentes de la marca, alojadas en nuestro propio servidor ----------
   Instrument Serif (titulares, normal y cursiva) y Manrope (todo lo demás).
   Licencia OFL, ver /assets/fonts/OFL.txt. Solo el subconjunto "latin" (español e
   inglés) y solo los pesos que usa la web, para que pesen poco.
   Al servirlas nosotros, el navegador del visitante no contacta con Google.
   font-display: swap → el texto se ve al momento con la fuente de respaldo. */
@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/manrope-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/manrope-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/manrope-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/manrope-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Fuentes de respaldo ajustadas ----------
   Mientras llegan las fuentes buenas se ven Arial (texto) y Times (titulares).
   Estos ajustes hacen que ocupen lo mismo que Manrope e Instrument Serif, así el
   texto no "salta" cuando llega la fuente buena (mejora el CLS). */
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  ascent-override: 104.55%;
  descent-override: 29.42%;
  line-gap-override: 0%;
  size-adjust: 101.97%;
}
@font-face {
  font-family: "Instrument Serif Fallback";
  src: local("Times New Roman"), local("Times"), local("Liberation Serif");
  ascent-override: 119.39%;
  descent-override: 37.39%;
  line-gap-override: 0%;
  size-adjust: 82.92%;
}

/* ---------- Tokens propios del sitio (derivados de la marca) ----------
   Las transparencias de Coral y Miel se calculan a partir de los tokens. */
:root {
  --gutter: 16px;
  --header-h: 64px;
  --section-pad: clamp(64px, 8vw, 112px);
  --coral-08: color-mix(in srgb, var(--color-coral) 8%, transparent);
  --coral-14: color-mix(in srgb, var(--color-coral) 14%, transparent);
  --coral-30: color-mix(in srgb, var(--color-coral) 30%, transparent);
  --coral-45: color-mix(in srgb, var(--color-coral) 45%, transparent);
  --miel-30: color-mix(in srgb, var(--color-miel) 30%, transparent);
  --perla-06: color-mix(in srgb, var(--color-perla) 6%, transparent);
  /* Línea un poco más clara (bordes al pasar el ratón, esqueletos) */
  --linea-fuerte: color-mix(in srgb, var(--color-linea) 70%, var(--color-lavanda));
  /* Elementos "apagados" (nunca texto): puntos, marcas y bordes discontinuos */
  --apagado: color-mix(in srgb, var(--color-lavanda) 40%, var(--color-bg));
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 220ms;
  color-scheme: dark;
  /* Mismas pilas que tokens.css, con la fuente de respaldo ajustada detrás */
  --font-sans: "Manrope", "Manrope Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Instrument Serif", "Instrument Serif Fallback", ui-serif, Georgia, "Times New Roman", serif;
}
@media (min-width: 768px) { :root { --gutter: 32px; --header-h: 72px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--color-miel); color: var(--color-on-accent); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Titulares: H1 y H2 en Instrument Serif (un solo peso, 400); H3 en Manrope 600 */
h1, h2, h3 { text-wrap: balance; }
h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
}
h1 {
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-h1);
  line-height: var(--leading-tight);
}
h2 {
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-h2);
  line-height: var(--leading-heading);
}
h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-h3);
  line-height: 1.3;
}
/* La palabra con chispa: una sola por titular, en cursiva y en Miel (manual, cap. 04) */
h1 em, h2 em {
  font-style: italic;
  color: var(--color-accent-2);
  padding-right: 0.04em; /* la cursiva se inclina: un respiro para que no roce el punto */
}
p { text-wrap: pretty; }

/* ---------- Utilidades ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
/* .mono: el nombre viene de la web anterior. Ahora es el estilo de "etiqueta" del
   manual (Manrope 600, con algo de aire entre letras), no una letra monoespaciada. */
.mono {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
}
/* Etiquetas cortas: 12 px en mayúsculas, como pide el manual */
.offer-bar__tag, .sample__tag, .sample__soon, .plan__badge, .step__num {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.muted { color: var(--color-text-muted); }

/* Marcador de contenido pendiente: visible pero discreto */
.pendiente {
  font-family: var(--font-sans);
  font-size: 0.78em;
  font-weight: var(--weight-regular);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  border: 1px dashed var(--apagado);
  border-radius: var(--radius-sm);
  padding: 0 6px;
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  background: var(--gradient-chispa);
  color: var(--color-on-accent);
  font-weight: var(--weight-semibold);
  padding: 10px 16px;
  border-radius: var(--radius-md);
}
.skip-link:focus { top: 12px; }

/* ---------- Botones ----------
   Principal: el degradado "chispa" (Coral → Miel) con el texto en Ciruela (7,3:1 como mínimo).
   Secundario: solo borde. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--gradient-chispa);
  color: var(--color-on-accent);
  box-shadow: 0 0 0 0 var(--coral-30);
}
.btn--primary:hover {
  box-shadow: 0 0 0 6px var(--coral-14), 0 10px 32px -8px var(--coral-45);
}
.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--ghost:hover { border-color: var(--linea-fuerte); background: var(--perla-06); }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }

.link {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--coral-45);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur);
}
.link:hover { text-decoration-color: currentColor; }

/* La chispa: el recurso de marca para "activo / aquí". Un trazo corto,
   inclinado 10° como la ƒ del logo, con el degradado Coral → Miel. */
.dot {
  display: inline-block;
  width: 4px; height: 11px;
  border-radius: var(--radius-full);
  background: var(--gradient-chispa);
  transform: rotate(10deg);
  box-shadow: 0 0 10px 1px var(--coral-30);
  flex: none;
}

/* ---------- Barra de oferta ---------- */
.offer-bar {
  position: relative;
  z-index: 51;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}
.offer-bar .container {
  padding-block: 9px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
}
.offer-bar .container > * + * { margin-left: 6px; }
@media (min-width: 768px) { .offer-bar .container { font-size: var(--text-small); } }
.offer-bar__tag { color: var(--color-accent-2); display: inline-flex; align-items: center; gap: 8px; }
.offer-bar .link { font-size: inherit; white-space: nowrap; }

/* ---------- Cabecera ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur);
}
.site-header.is-scrolled { border-bottom-color: var(--color-border); }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-h);
}
/* Logo: el manual pide al menos 120 px de ancho en pantalla. Con 42 px de alto
   mide unos 123 px de ancho (el archivo ya incluye un poco de aire alrededor) */
.brand { display: inline-flex; align-items: center; padding: 4px 4px 4px 0; margin-right: auto; }
.brand img { height: 42px; width: auto; }

.nav { display: none; }
.nav__list { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  transition: color var(--dur);
}
/* Chispa de "estás aquí" delante del enlace de la sección visible */
.nav__link::before {
  content: "";
  width: 3px; height: 10px;
  border-radius: var(--radius-full);
  background: var(--gradient-chispa);
  box-shadow: 0 0 8px 1px var(--coral-30);
  opacity: 0;
  transform: rotate(10deg) scale(0.4);
  transition: opacity var(--dur), transform var(--dur) var(--ease-out);
}
.nav__link:hover { color: var(--color-text); }
.nav__link[aria-current="true"] { color: var(--color-text); }
.nav__link[aria-current="true"]::before { opacity: 1; transform: rotate(10deg) scale(1); }

.lang {
  display: none;
  align-items: center;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}
.lang a, .lang span[aria-current] {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 44px;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  transition: color var(--dur);
}
.lang a:hover { color: var(--color-text); }
.lang [aria-current="page"] { color: var(--color-text); }

.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-right: -8px;
  background: none; border: 0; border-radius: var(--radius-md);
  cursor: pointer;
}
.menu-toggle__bars { position: relative; width: 18px; height: 10px; }
.menu-toggle__bars::before, .menu-toggle__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
  background: var(--color-text); border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), top var(--dur) var(--ease-out);
}
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars::after { top: 8.5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { top: 4.25px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { top: 4.25px; transform: rotate(-45deg); }

/* Panel del menú en móvil */
.mobile-nav {
  position: fixed;
  inset: var(--menu-top, var(--header-h)) 0 0 0;
  z-index: 49;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 8px var(--gutter) 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li + li { border-top: 1px solid var(--color-border); }
.mobile-nav a.mobile-nav__link {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; font-size: 1.25rem; font-weight: var(--weight-medium); letter-spacing: -0.01em;
}
.mobile-nav__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border);
}
.mobile-nav__foot .lang { display: inline-flex; }

@media (min-width: 960px) {
  .nav { display: block; }
  .lang { display: inline-flex; }
  .menu-toggle, .mobile-nav { display: none !important; }
  .site-header__inner { gap: 20px; }
  .brand img { height: 46px; }
}
@media (max-width: 380px) {
  .site-header__inner { gap: 8px; }
  .site-header .btn--sm { padding: 0 12px; font-size: 0.875rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(48px, 9vw, 112px) clamp(64px, 10vw, 128px);
  overflow: hidden;
}
/* El brillo de la chispa (token --glow-chispa) detrás de la ilustración */
.hero::after {
  content: "";
  position: absolute; z-index: -1;
  width: min(1100px, 170vw); aspect-ratio: 1;
  right: -60%; top: 18%;
  background: var(--glow-chispa);
  pointer-events: none;
}
.hero__grid { display: grid; gap: clamp(48px, 7vw, 72px); align-items: center; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}
.hero h1 { max-width: 14ch; }
.hero__lead {
  margin-top: 24px;
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  color: var(--color-text-muted);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.hero__alt { font-size: var(--text-small); color: var(--color-text-muted); }
.hero__meta { margin-top: 20px; color: var(--color-text-muted); }

@media (max-width: 479px) {
  .hero__actions .btn { width: 100%; }
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; }
  .hero::after { right: -22%; top: 50%; transform: translateY(-50%); }
  .lamp { max-width: 460px; margin-right: 0; }
}

/* Ilustración del hero: una landing en gris donde solo el botón tiene chispa.
   (Las clases "lamp" vienen de la web anterior; la idea es la misma: el wow
   está en el siguiente paso.) */
.lamp {
  position: relative;
  max-width: 400px;
  margin-inline: auto;
  width: 100%;
}
.lamp__frame {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--color-surface), color-mix(in srgb, var(--color-surface) 55%, transparent));
  padding: 14px;
}
.lamp__bar { display: flex; align-items: center; gap: 6px; padding: 2px 4px 12px; }
.lamp__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border); }
.lamp__bar span {
  margin-left: 10px; flex: 1; height: 18px; border-radius: var(--radius-full);
  background: var(--color-bg); border: 1px solid var(--color-border);
  font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.02em;
  color: var(--color-text-muted); display: flex; align-items: center; padding-left: 10px;
}
.lamp__page {
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 22px 20px 26px;
  display: grid; gap: 10px;
}
.sk { height: 8px; border-radius: 4px; background: var(--color-border); }
.sk--h { height: 14px; width: 82%; background: var(--linea-fuerte); }
.sk--h2 { height: 14px; width: 58%; background: var(--linea-fuerte); }
.sk--60 { width: 60%; } .sk--40 { width: 40%; } .sk--90 { width: 90%; }
.lamp__cta-row { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; }
/* El botón "encendido": la chispa y su brillo */
.lamp__cta {
  position: relative;
  height: 30px; width: 46%;
  border-radius: var(--radius-full);
  background: var(--gradient-chispa);
  box-shadow: 0 0 0 6px var(--coral-08), 0 0 40px 6px var(--coral-30);
}
/* Dos destellos pequeños junto al botón: el "wow" */
.lamp__cta::before, .lamp__cta::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: var(--radius-full);
  background: var(--gradient-chispa);
  box-shadow: 0 0 8px 1px var(--miel-30);
}
.lamp__cta::before { height: 12px; right: -16px; top: -12px; transform: rotate(40deg); }
.lamp__cta::after { height: 8px; right: -24px; top: 6px; transform: rotate(80deg); }
.lamp__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.lamp__cols div { height: 52px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); }
/* Brillo suave que sale del botón */
.lamp__beam {
  position: absolute; inset: 0;
  border-radius: var(--radius-xl);
  background: radial-gradient(ellipse 60% 45% at 30% 50%, var(--coral-08), transparent 70%);
  pointer-events: none;
}

/* Secuencia de carga: la página se dibuja en gris y después salta la chispa */
@media (prefers-reduced-motion: no-preference) {
  .js .lamp__page > *, .js .lamp__cols div { animation: sk-in 600ms var(--ease-out) both; }
  .js .lamp__page > :nth-child(2) { animation-delay: 60ms; }
  .js .lamp__page > :nth-child(3) { animation-delay: 120ms; }
  .js .lamp__page > :nth-child(4) { animation-delay: 180ms; }
  .js .lamp__page > :nth-child(5) { animation-delay: 240ms; }
  .js .lamp__page > :nth-child(6) { animation-delay: 300ms; }
  .js .lamp__page > :nth-child(7) { animation-delay: 360ms; }
  .js .lamp__cta { animation: chispa-on 1100ms 700ms var(--ease-out) both; }
  .js .lamp__cta::before, .js .lamp__cta::after { animation: destello 700ms 1300ms var(--ease-out) both; }
  .js .lamp__beam { animation: fade-in 1400ms 800ms ease-out both; }
}
@keyframes sk-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* El botón empieza gris (sin color) y se enciende con un pequeño "pop" */
@keyframes chispa-on {
  0% { filter: grayscale(1) brightness(0.45); box-shadow: none; transform: scale(1); }
  45% { filter: grayscale(0) brightness(1.15); transform: scale(1.04); }
  100% { filter: none; box-shadow: 0 0 0 6px var(--coral-08), 0 0 40px 6px var(--coral-30); transform: scale(1); }
}
@keyframes destello { from { opacity: 0; scale: 0.2; } to { opacity: 1; scale: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Secciones ---------- */
.section {
  position: relative;
  padding-block: var(--section-pad);
  border-top: 1px solid var(--color-border);
}
/* Una chispa sobre la línea donde empieza cada sección: apagada hasta que llegas */
.section::before {
  content: "";
  position: absolute;
  top: -1.5px;
  left: max(var(--gutter), calc((100% - var(--container)) / 2));
  width: 32px; height: 2px; border-radius: var(--radius-full);
  background: var(--gradient-chispa);
  filter: grayscale(1);
  opacity: 0.35;
  transition: filter 600ms, box-shadow 600ms, opacity 600ms;
}
.section.is-lit::before {
  filter: none;
  opacity: 1;
  box-shadow: 0 0 14px 2px var(--coral-30);
}
.section__head { max-width: 40rem; margin-bottom: clamp(40px, 6vw, 64px); }
.section__intro { margin-top: 16px; color: var(--color-text-muted); font-size: 1.0625rem; }

/* ---------- Problema / Promesa ---------- */
.problems { display: grid; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.problem { background: var(--color-bg); padding: 28px 24px 32px; }
.problem__mark {
  display: block; width: 28px; height: 1px; margin-bottom: 24px;
  background: var(--apagado);
}
.problem h3 { font-size: 1.1875rem; margin-bottom: 10px; }
.problem p { color: var(--color-text-muted); font-size: 1rem; }
@media (min-width: 768px) { .problems { grid-template-columns: repeat(3, 1fr); } .problem { padding: 32px 28px 40px; } }

.promise {
  position: relative;
  margin-top: clamp(40px, 6vw, 72px);
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.promise::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 0% 0%, var(--coral-08), transparent 60%);
  pointer-events: none;
}
.promise::after {
  content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 2px;
  background: linear-gradient(to top, var(--color-coral), var(--color-miel));
  border-radius: 2px;
}
.promise p {
  position: relative;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  letter-spacing: -0.015em;
  max-width: 44rem;
}

/* ---------- Qué incluye ---------- */
.features { display: grid; gap: 0; }
.feature {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-content: start;
  gap: 4px 16px;
  padding: 24px 0;
  border-top: 1px solid var(--color-border);
}
.feature__icon {
  grid-row: span 2;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
}
.feature__icon svg { width: 18px; height: 18px; }
.feature h3 { font-size: 1.125rem; letter-spacing: -0.01em; }
.feature p { color: var(--color-text-muted); font-size: 1rem; }
/* Celda de cierre: completa la rejilla con la acción principal */
.feature--cta { display: none; }
@media (min-width: 768px) {
  .features { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
  .feature { grid-template-columns: 1fr; padding: 28px 0 36px; gap: 12px; }
  .feature__icon { grid-row: auto; margin-bottom: 8px; }
  .feature--cta {
    display: flex; align-items: flex-end;
    border-top-color: var(--coral-30);
    background: radial-gradient(80% 70% at 0% 100%, var(--coral-08), transparent 70%);
  }
}
@media (min-width: 1200px) {
  .features { grid-template-columns: repeat(4, 1fr); column-gap: 32px; }
}

/* ---------- Proceso ---------- */
.steps { position: relative; display: grid; gap: 0; counter-reset: step; }
.step { position: relative; padding: 0 0 40px 44px; }
.step:last-child { padding-bottom: 0; }
/* Raíl vertical en móvil */
.step::before {
  content: ""; position: absolute; left: 6px; top: 22px; bottom: -2px; width: 1px;
  background: var(--color-border);
}
.step:last-child::before { display: none; }
.step__node {
  position: absolute; left: 0; top: 4px;
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--apagado);
  background: var(--color-bg);
  transition: border-color 500ms, background-color 500ms, box-shadow 500ms;
}
.step.is-lit .step__node {
  border-color: transparent;
  background: var(--gradient-chispa);
  box-shadow: 0 0 0 4px var(--coral-14), 0 0 16px 2px var(--coral-30);
}
.step__num { display: block; color: var(--color-text-muted); margin-bottom: 8px; transition: color 500ms; }
.step.is-lit .step__num { color: var(--color-accent-2); }
.step h3 { font-size: 1.25rem; margin-bottom: 10px; }
.step p { color: var(--color-text-muted); font-size: 1rem; max-width: 34rem; }
@media (min-width: 960px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .step { padding: 44px 0 0; }
  .step::before { left: 13px; right: -32px; top: 10px; bottom: auto; width: auto; height: 1px; }
  .step__node { top: 4px; }
}
/* Sin JS o sin animación: todo encendido */
.no-js .step .step__node, .reduce-motion .step .step__node { border-color: transparent; background: var(--gradient-chispa); }

/* ---------- Por qué Fawef ---------- */
.why { display: grid; gap: 40px; }
.why__list { display: grid; gap: 0; border-top: 1px solid var(--color-border); }
.why__item { padding: 24px 0; border-bottom: 1px solid var(--color-border); }
.why__item h3 { font-size: 1.1875rem; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
.why__item h3::before {
  content: ""; width: 4px; height: 11px; border-radius: var(--radius-full);
  background: var(--apagado); flex: none;
  transform: rotate(10deg);
  transition: background-color var(--dur), box-shadow var(--dur);
}
.why__item:hover h3::before { background: var(--gradient-chispa); box-shadow: 0 0 10px 1px var(--coral-30); }
.why__item p { color: var(--color-text-muted); font-size: 1rem; padding-left: 16px; max-width: 36rem; }
.why__note {
  margin-top: 32px;
  padding: 16px 18px;
  border: 1px dashed var(--apagado);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-small);
  max-width: 40rem;
}
@media (min-width: 960px) {
  .why { grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
  .why .section__head { position: sticky; top: calc(var(--header-h) + 40px); margin-bottom: 0; }
}

/* ---------- Proyectos de muestra ---------- */
.samples { display: grid; gap: 20px; }
@media (min-width: 768px) { .samples { grid-template-columns: repeat(3, 1fr); } .sample__thumb { aspect-ratio: 4 / 3; } }
.sample {
  display: flex; flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color var(--dur), transform var(--dur) var(--ease-out);
}
.sample:hover { border-color: var(--linea-fuerte); }
.sample__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
.sample__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 22px; flex: 1; }
.sample__tag { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-muted); }
.sample h3 { font-size: 1.125rem; letter-spacing: -0.01em; line-height: 1.35; }
.sample p { color: var(--color-text-muted); font-size: 0.9375rem; }
.sample__soon {
  margin-top: auto; padding-top: 8px;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--color-text-muted);
}
.sample__soon::before {
  content: ""; width: 4px; height: 11px; border-radius: var(--radius-full);
  border: 1px solid var(--color-text-muted);
  transform: rotate(10deg);
}
.samples__after { margin-top: 32px; color: var(--color-text-muted); }

/* Miniatura 1: tazas vistas desde arriba (local, cálido) */
.thumb-cafe .cup {
  position: absolute; border-radius: 50%;
  border: 1px solid var(--linea-fuerte);
  background: radial-gradient(circle, var(--color-surface) 0 52%, transparent 53%);
}
.thumb-cafe .cup::after {
  content: ""; position: absolute; inset: 30%; border-radius: 50%;
  border: 1px solid var(--color-border);
}
.thumb-cafe .cup--a { width: 46%; aspect-ratio: 1; left: 10%; top: 18%; }
.thumb-cafe .cup--b { width: 26%; aspect-ratio: 1; right: 14%; top: 14%; }
.thumb-cafe .cup--c { width: 18%; aspect-ratio: 1; right: 22%; bottom: 12%; }
.thumb-cafe .cup--lit {
  background:
    radial-gradient(circle, transparent 0 22%, var(--coral-14) 23% 52%, transparent 53%),
    radial-gradient(circle, var(--color-miel), var(--color-coral) 22%, transparent 22.5%);
  border-color: var(--coral-30);
}
.thumb-cafe .cup--lit::after { display: none; }

/* Miniatura 2: arcos de movimiento (pilates, ritmo) */
.thumb-pilates .arc {
  position: absolute; left: 50%; bottom: -60%;
  aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--color-border);
  transform: translateX(-50%);
}
.thumb-pilates .arc:nth-child(1) { width: 40%; }
.thumb-pilates .arc:nth-child(2) { width: 62%; }
.thumb-pilates .arc:nth-child(3) { width: 84%; border-color: var(--linea-fuerte); }
.thumb-pilates .arc:nth-child(4) { width: 106%; }
.thumb-pilates .arc:nth-child(5) { width: 128%; }
.thumb-pilates .sun {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  left: 68%; top: 26%;
  background: var(--gradient-chispa);
  box-shadow: 0 0 0 5px var(--coral-08), 0 0 30px 6px var(--coral-30);
}

/* Miniatura 3: barras y retícula (B2B, datos) */
.thumb-b2b {
  background-image:
    linear-gradient(to right, var(--color-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-border) 1px, transparent 1px);
  background-size: 25% 25%;
  background-position: -1px -1px;
}
.thumb-b2b .bars {
  position: absolute; left: 12%; right: 12%; bottom: 16%; top: 22%;
  display: flex; align-items: flex-end; gap: 8%;
}
.thumb-b2b .bars i {
  flex: 1; border-radius: 4px 4px 0 0;
  background: var(--linea-fuerte);
}
.thumb-b2b .bars i:nth-child(1) { height: 34%; }
.thumb-b2b .bars i:nth-child(2) { height: 52%; }
.thumb-b2b .bars i:nth-child(3) { height: 44%; }
.thumb-b2b .bars i:nth-child(4) { height: 88%; background: linear-gradient(to top, var(--color-coral), var(--color-miel)); box-shadow: 0 0 30px -4px var(--coral-30); }
.thumb-b2b .langs {
  position: absolute; left: 12%; top: 10%;
  display: flex; gap: 6px;
}
.thumb-b2b .langs span {
  font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 1px 6px; background: var(--color-bg);
}

/* ---------- Precios ---------- */
.plans { display: grid; gap: 20px; align-items: stretch; }
@media (min-width: 1000px) { .plans { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-bg);
}
.plan__name { font-size: 1.25rem; }
.plan__for { margin-top: 6px; color: var(--color-text-muted); font-size: 0.9375rem; min-height: 3em; }
.plan__price { margin-top: 24px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
/* Cifras destacadas: Manrope 700 (manual, cap. 04) */
.plan__amount {
  font-size: clamp(1.875rem, 1.6rem + 1vw, 2.25rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.plan__once { color: var(--color-text-muted); }
.plan__list { margin: 24px 0 28px; padding: 24px 0 0; list-style: none; border-top: 1px solid var(--color-border); display: grid; gap: 12px; }
.plan__list li { position: relative; padding-left: 26px; font-size: 0.9375rem; line-height: 1.5; }
.plan__list li::before {
  content: ""; position: absolute; left: 2px; top: 0.4em;
  width: 10px; height: 6px;
  border-left: 1.5px solid var(--color-text-muted);
  border-bottom: 1.5px solid var(--color-text-muted);
  transform: rotate(-45deg);
}
.plan .btn { margin-top: auto; }

.plan--featured {
  background: var(--color-surface);
  border-color: var(--coral-45);
  box-shadow: 0 0 0 1px var(--coral-14), 0 30px 80px -30px var(--coral-30);
}
.plan--featured::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--glow-chispa);
  background-size: 100% 60%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.plan--featured .plan__list li::before { border-color: var(--color-accent-2); }
.plan__badge {
  position: absolute; top: 26px; right: 24px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--coral-08);
  border: 1px solid var(--coral-30);
  color: var(--color-accent-2);
}
.plan__badge .dot { height: 9px; width: 3px; }
@media (min-width: 1000px) {
  .plan--featured { transform: translateY(-12px); }
}

.pricing-extra { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 900px) { .pricing-extra { grid-template-columns: 1fr 1fr; } }
.box {
  position: relative;
  padding: 28px 24px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}
.box h3 { font-size: 1.1875rem; margin-bottom: 10px; }
.box p { color: var(--color-text-muted); font-size: 0.9375rem; }
.hosting__prices { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 20px 0 16px; }
.hosting__prices li { display: flex; align-items: baseline; gap: 8px; }
.hosting__prices strong { font-weight: var(--weight-bold); font-size: 1rem; color: var(--color-text); letter-spacing: 0; font-variant-numeric: tabular-nums; }

.launch {
  background: var(--color-surface);
  overflow: hidden;
}
.launch::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 90% at 100% 0%, var(--coral-14), transparent 60%);
  pointer-events: none;
}
.launch > * { position: relative; }
.seats { display: flex; align-items: center; gap: 14px; margin: 22px 0 22px; flex-wrap: wrap; }
.seats__dots { display: flex; gap: 8px; }
/* Cada lugar libre es una chispa encendida; los ocupados quedan apagados */
.seats__dots i {
  width: 6px; height: 16px; border-radius: var(--radius-full);
  background: var(--gradient-chispa);
  transform: rotate(10deg);
  box-shadow: 0 0 12px 1px var(--coral-30);
}
.seats__dots i.is-taken { background: transparent; border: 1px solid var(--apagado); box-shadow: none; }
.seats__label { color: var(--color-text); }

.terms { margin-top: 32px; max-width: 48rem; font-size: var(--text-small); color: var(--color-text-muted); }
.terms p + p { margin-top: 12px; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; gap: 40px; }
@media (min-width: 960px) {
  .faq-wrap { grid-template-columns: 0.7fr 1.3fr; gap: 64px; align-items: start; }
  .faq-wrap .section__head { position: sticky; top: calc(var(--header-h) + 40px); }
}
.faq { border-top: 1px solid var(--color-border); }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 64px; padding: 18px 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 1.0625rem; font-weight: var(--weight-semibold); letter-spacing: -0.01em; line-height: 1.4; transition: color var(--dur); }
.faq summary:hover h3 { color: var(--color-accent); }
.faq__icon {
  position: relative; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--color-border);
  transition: border-color var(--dur), background-color var(--dur);
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 10px; height: 1.5px; background: var(--color-text-muted);
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease-out), background-color var(--dur);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .faq__icon { border-color: var(--coral-30); background: var(--coral-08); }
.faq details[open] .faq__icon::before, .faq details[open] .faq__icon::after { background: var(--color-accent); }
.faq details[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__answer { padding: 0 48px 24px 0; color: var(--color-text-muted); max-width: 42rem; }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] .faq__answer { animation: answer-in 280ms var(--ease-out); }
}
@keyframes answer-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Contacto ---------- */
.contact { position: relative; overflow: hidden; isolation: isolate; }
.contact::after {
  content: ""; position: absolute; z-index: -1;
  width: 900px; aspect-ratio: 1; left: -320px; top: -260px;
  background: var(--glow-chispa);
  pointer-events: none;
}
.contact__grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .contact__grid { grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; } }
.contact__reply { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; color: var(--color-text); }
.contact__alt { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); }
.contact__alt p + p { margin-top: 8px; }
.contact__alt .btn { margin-top: 16px; }

.form {
  padding: clamp(20px, 4vw, 36px);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.form__grid { display: grid; gap: 20px; }
@media (min-width: 640px) {
  .form__grid { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}
.field { display: grid; gap: 8px; align-content: start; }
.field label, .field .label { font-size: var(--text-small); font-weight: var(--weight-semibold); }
.field .opt { color: var(--color-text-muted); font-weight: var(--weight-regular); }
.input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--linea-fuerte);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1rem;
  transition: border-color var(--dur), box-shadow var(--dur);
}
/* Lavanda un poco atenuada: se distingue del texto escrito y sigue por encima de 4,5:1 */
.input::placeholder { color: color-mix(in srgb, var(--color-lavanda) 82%, var(--color-bg)); }
.input:hover { border-color: var(--color-text-muted); }
.input:focus { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 3px var(--miel-30); }
textarea.input { min-height: 128px; resize: vertical; line-height: 1.5; }
/* Flecha del desplegable en Lavanda (#BBAAC2): dentro de una imagen SVG no se pueden usar variables CSS */
select.input {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23BBAAC2' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.field__help { font-size: 13px; color: var(--color-text-muted); }
/* Errores en Coral: 6,5:1 sobre Ciruela clara */
.field__error {
  display: none;
  align-items: flex-start; gap: 8px;
  font-size: 13px; line-height: 1.4;
  color: var(--color-accent);
}
.field__error::before {
  content: "!"; flex: none;
  display: grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-accent); color: var(--color-on-accent);
  font-size: 11px; font-weight: var(--weight-bold);
  margin-top: 1px;
}
.field.has-error .field__error { display: flex; }
.field.has-error .input { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--coral-14); }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; cursor: pointer; }
.check input {
  appearance: none; flex: none;
  width: 22px; height: 22px; margin: 1px 0 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-text-muted);
  background: var(--color-bg);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background-color var(--dur), border-color var(--dur);
}
.check input::after {
  content: ""; width: 10px; height: 6px;
  border-left: 2px solid var(--color-on-accent); border-bottom: 2px solid var(--color-on-accent);
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform 160ms var(--ease-out);
}
.check input:checked { background: var(--gradient-chispa); border-color: transparent; }
.check input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.check input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.field.has-error .check input { border-color: var(--color-accent); }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.form__req { color: var(--color-text-muted); }
.form__foot .btn { min-width: 160px; }
@media (max-width: 479px) { .form__foot .btn { width: 100%; } }
.btn.is-loading { pointer-events: none; opacity: 0.85; }
.btn .spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--color-on-accent) 30%, transparent); border-top-color: var(--color-on-accent);
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form__summary {
  display: none;
  margin-bottom: 20px; padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--coral-45);
  background: var(--coral-08);
  color: var(--color-accent); font-size: var(--text-small);
}
.form__summary.is-visible { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-success {
  text-align: left;
  padding: clamp(28px, 5vw, 48px);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--coral-30);
  box-shadow: 0 30px 80px -40px var(--coral-45);
}
.form-success[hidden] { display: none; }
.form-success__light {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--coral-08); border: 1px solid var(--coral-30);
  margin-bottom: 20px;
}
.form-success__light .dot { width: 5px; height: 16px; }
.form-success p { font-size: 1.25rem; font-weight: var(--weight-medium); letter-spacing: -0.01em; line-height: 1.4; }
.form-success button { margin-top: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .form-success:not([hidden]) { animation: sk-in 500ms var(--ease-out) both; }
}

/* ---------- Pie ---------- */
.site-footer { border-top: 1px solid var(--color-border); padding-block: 64px 40px; position: relative; overflow: hidden; }
.footer__top { display: grid; gap: 40px; }
@media (min-width: 900px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } }
.footer__brand img { height: 44px; width: auto; }
.footer__tagline { margin-top: 20px; font-size: 1.25rem; font-weight: var(--weight-medium); letter-spacing: -0.015em; }
.footer__line { margin-top: 6px; color: var(--color-text-muted); font-size: var(--text-small); }
.footer__col h2 { font-family: var(--font-sans); font-size: var(--text-small); font-weight: var(--weight-medium); letter-spacing: 0; color: var(--color-text-muted); margin-bottom: 12px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer__col a { display: inline-flex; align-items: center; min-height: 36px; font-size: 0.9375rem; color: var(--color-text); transition: color var(--dur); }
.footer__col a:hover { color: var(--color-accent); }
.footer__col a[aria-current="page"] { display: inline-flex; gap: 10px; }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--color-border);
  color: var(--color-text-muted); font-size: 13px;
}

/* ---------- WhatsApp flotante (solo móvil) ---------- */
.wa-float {
  position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 40;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gradient-chispa);
  color: var(--color-on-accent);
  box-shadow: 0 0 0 6px var(--coral-08), 0 12px 32px -8px var(--color-bg), 0 0 30px -4px var(--coral-45);
  transition: transform 300ms var(--ease-out), opacity 300ms;
}
.wa-float svg { width: 26px; height: 26px; }
.wa-float.is-hidden { opacity: 0; transform: translateY(16px) scale(0.9); pointer-events: none; visibility: hidden; }
@media (min-width: 768px) { .wa-float { display: none; } }

/* ---------- Revelado discreto al hacer scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

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

/* Ajustes finos del formulario de contacto */
.contact__alt .btn + p { margin-top: 16px; }
.form__hint { margin-top: -8px; }

/* ---------- Páginas interiores: legales, gracias y 404 ----------
   Usan la misma cabecera y pie que la home. Sin animaciones de entrada:
   el contenido se ve desde el primer momento. */
.page { padding-block: clamp(48px, 8vw, 96px) var(--section-pad); }
.page__head { max-width: 46rem; margin-bottom: clamp(32px, 5vw, 56px); padding-bottom: clamp(24px, 4vw, 40px); border-bottom: 1px solid var(--color-border); }
.page__updated { margin-top: 20px; color: var(--color-text-muted); }

/* Texto legal: columna estrecha para leer cómodo */
.legal { max-width: 46rem; color: var(--color-text-muted); }
/* Apartados legales: Instrument Serif a 24-28 px (por debajo de 24 px sus trazos finos se pierden) */
.legal h2 {
  font-size: clamp(1.5rem, 1.4rem + 0.5vw, 1.75rem);
  letter-spacing: var(--tracking-h2);
  line-height: var(--leading-heading);
  color: var(--color-text);
  margin: 48px 0 14px;
  display: flex; align-items: center; gap: 12px;
}
.legal h2:first-child { margin-top: 0; }
/* La chispa de la marca, apagada, delante de cada apartado */
.legal h2::before {
  content: ""; flex: none;
  width: 4px; height: 11px; border-radius: var(--radius-full);
  background: var(--apagado);
  transform: rotate(10deg);
}
.legal p + p, .legal p + ul, .legal p + ol, .legal ul + p, .legal ol + p { margin-top: 14px; }
.legal ul, .legal ol { margin: 14px 0 0; padding-left: 1.4em; display: grid; gap: 8px; }
.legal li::marker { color: var(--color-text-muted); }
.legal strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.legal .pendiente { white-space: normal; } /* los pendientes largos no deben desbordar en móvil */
.page__updated .pendiente,
.sample h3 .pendiente,
.terms .pendiente { white-space: normal; } /* en 360 px no caben en una línea */

/* Gracias, 404 y error del formulario: un mensaje centrado en la pantalla */
.page--message {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(72svh, 720px);
  display: grid; align-items: center;
}
.page--message::after {
  content: "";
  position: absolute; z-index: -1;
  width: min(820px, 150vw); aspect-ratio: 1;
  left: -24%; top: 50%; transform: translateY(-50%);
  background: var(--glow-chispa);
  pointer-events: none;
}
.message { max-width: 40rem; }
.message h1 { max-width: 14ch; }
.message__text { margin-top: 24px; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); color: var(--color-text-muted); }
.message__note {
  margin-top: 28px; padding: 16px 18px;
  border: 1px dashed var(--apagado); border-radius: var(--radius-md);
  color: var(--color-text-muted); font-size: var(--text-small);
}
.message__note .mono { color: var(--color-text); margin-bottom: 6px; }
.message__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 479px) { .message__actions .btn { width: 100%; } }
/* En la 404 la chispa está apagada: aquí no hay nada que celebrar */
.message__light--off { background: transparent; border-color: var(--color-border); }
.message__light--off .dot { background: var(--apagado); box-shadow: none; }