/* ============================================================
   Golden Deer Tech · public_v5
   Dirección: "Taller editorial"
   Papel cálido + tinta carbón, dorado como firma, verde musgo
   para confianza. Radios afilados. Sin glow, grid decorativa,
   órbitas, shimmer ni glassmorphism. Movimiento solo de estado.
   ============================================================ */

/* --- Fuentes autohospedadas -------------------------------
   Coloca los .woff2 en assets/fonts/ con estos nombres y las
   fuentes se activan solas. Mientras falten, se usa el fallback
   de sistema (Georgia / system-ui) sin romper nada.
   Display: Fraunces (SIL OFL) · Texto: Hanken Grotesk (SIL OFL)
   --------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/hanken-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/hanken-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/hanken-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Papel */
  --paper: #f4efe6;
  --paper-bright: #fbf8f2;
  --paper-muted: #ece4d6;
  --paper-line: #d8cfbe;
  --paper-line-soft: #e3dccd;

  /* Tinta */
  --ink: #171a12;
  --ink-raised: #1f2319;
  --ink-line: rgba(244, 239, 226, 0.14);
  --ink-line-soft: rgba(244, 239, 226, 0.08);

  /* Texto sobre papel */
  --text: #1b1e16;
  --text-muted: #575c4e;
  --text-faint: #696d5e; /* AA: 4.6:1 sobre papel (antes #7d8173 = 3.5:1) */

  /* Texto sobre tinta */
  --text-inv: #f1ece0;
  --text-inv-muted: #a9aa9c;
  --text-inv-faint: #8b8e81; /* AA: 4.8:1 sobre tinta elevada (antes #83867a = 4.3:1) */

  /* Firma dorada */
  --gold: #b09566;
  --gold-deep: #886626;
  --gold-bright: #dcc08a;

  /* Confianza / funcional */
  --moss: #33564a;
  --moss-deep: #24413698;
  --focus: #0e6c64;
  --focus-inv: #6fd0c6;

  /* Forma */
  --r-1: 4px;
  --r-2: 8px;

  /* Sombra (mínima, casi todo va con filetes) */
  --shadow-card: 0 1px 2px rgba(23, 26, 18, 0.06);
  --shadow-raise: 0 18px 44px rgba(23, 26, 18, 0.10);

  /* Tipografía */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Layout */
  --container: 72rem;
  --gutter: 1.5rem;
  --header-height: 4.5rem;

  /* Cebo contra el oscurecido forzado (Mi Browser y familia): esos motores
     solo respetan a las páginas "con modo oscuro propio", así que se declara
     soporte... y el modo oscuro (media query de abajo) es el mismo papel
     claro. Donde el prefers-color-scheme llega de verdad, se re-impone
     only light. Probado en gozo primero (jul 2026). */
  color-scheme: light dark;
}

/* El "modo oscuro" del estudio: el mismo papel de siempre. Las bandas de
   tinta (.section-ink) conservan su propio esquema oscuro, como hasta ahora.
   En navegadores estándar con sistema en oscuro no cambia nada visible. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: only light;
  }
  html,
  body {
    background: var(--paper);
    color: var(--text);
  }
}

/* --- Reset y base ---------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 20rem;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button {
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

button,
a,
summary,
label {
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

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

::selection {
  background: var(--gold);
  color: var(--ink);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: balance;
}

h1 em,
h2 em,
h3 em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold-deep);
}

.section-ink h1 em,
.section-ink h2 em,
.section-ink h3 em,
.final-cta h2 em {
  color: var(--gold-bright);
}

p {
  text-wrap: pretty;
}

/* --- Utilidades de composición --------------------------- */
.container {
  width: min(calc(100% - (2 * var(--gutter))), var(--container));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  padding: 0.7rem 1rem;
  border-radius: var(--r-1);
  background: var(--ink);
  color: var(--text-inv);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* --- Eyebrow / etiquetas --------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.35rem;
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow-ink {
  color: var(--gold-deep);
}

.eyebrow-rule {
  width: 1.6rem;
  height: 1px;
  background: currentColor;
}

/* --- Botones --------------------------------------------- */
.button {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  font-weight: 650;
  font-size: 0.94rem;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.button-large {
  min-height: 3.5rem;
  padding-inline: 1.65rem;
  font-size: 1rem;
}

.button-small {
  min-height: 2.7rem;
  padding: 0.55rem 1.05rem;
  font-size: 0.82rem;
}

.button-gold {
  background: var(--gold);
  color: #16180f;
  border-color: var(--gold);
}

.button-gold:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
}

.button-gold:disabled {
  background: var(--paper-muted);
  border-color: var(--paper-line);
  color: var(--text-faint);
  cursor: not-allowed;
}

.section-ink .button-gold:disabled {
  background: transparent;
  border-color: var(--ink-line);
  color: var(--text-inv-faint);
}

/* Ghost adaptativo: por defecto papel; se invierte en tinta */
.button-ghost {
  background: transparent;
  border-color: var(--paper-line);
  color: var(--text);
}

.button-ghost:hover {
  border-color: var(--gold-deep);
  color: var(--gold-deep);
}

.section-ink .button-ghost,
.final-cta .button-ghost {
  border-color: var(--ink-line);
  color: var(--text-inv);
}

.section-ink .button-ghost:hover,
.final-cta .button-ghost:hover {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}

/* --- Franja de oferta ------------------------------------ */
.offer-strip {
  min-height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.35rem 1rem;
  background: var(--ink);
  color: var(--text-inv);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.offer-strip strong {
  color: var(--gold-bright);
  font-weight: 600;
}

.offer-strip .dot {
  color: var(--text-inv-faint);
}

/* El ancla del precio real. No es un «antes» tachado: nadie ha pagado 1.200 €
   todavía. Se retira con la promoción (lab/precios/promo.py). */
.offer-strip .strip-launch {
  color: var(--text-inv-muted);
}

/* El relevo del ancla en móvil, donde la frase larga no cabe: una etiqueta que
   avisa de que el precio es temporal sin contar todavía la letra pequeña (esa
   la lleva la barra fija de abajo). En escritorio sobra, porque ahí sí está el
   ancla entera. */
.offer-strip .strip-promo,
.offer-strip .dot-promo {
  display: none;
}

/* --- Cabecera -------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header-height);
  border-bottom: 1px solid var(--paper-line);
  background: var(--paper);
}

.header-inner {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text);
  text-decoration: none;
}

.brand-mark {
  flex: 0 0 auto;
}

.brand-copy {
  min-width: 0;
  display: grid;
  line-height: 1.15;
}

.brand-copy strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.brand-copy small {
  margin-top: 0.12rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.site-nav > a {
  position: relative;
  padding-block: 0.5rem;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.site-nav > a:not(.button)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.15rem;
  left: 0;
  height: 1px;
  background: var(--gold-deep);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.site-nav > a:not(.button):hover::after,
.site-nav > a:not(.button):focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.menu-toggle {
  width: 2.85rem;
  height: 2.85rem;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.32rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--r-1);
  color: var(--text);
}

.menu-toggle span {
  width: 1.2rem;
  height: 1.5px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(0.42rem) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-0.42rem) rotate(-45deg);
}

/* --- Secciones base -------------------------------------- */
.section {
  padding: clamp(4.5rem, 8vw, 7.5rem) 0;
}

.section-ink {
  background: var(--ink);
  color: var(--text-inv);
  color-scheme: dark;
}

.section-paper {
  background: var(--paper-bright);
}

.section-heading {
  margin-bottom: clamp(2.6rem, 5vw, 4rem);
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
}

.split-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr);
  align-items: end;
  gap: clamp(1.8rem, 5vw, 5rem);
}

.split-heading > div > h2 {
  margin-top: 0.2rem;
}

.split-heading > p {
  max-width: 34rem;
  margin: 0 0 0.35rem;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.section-ink .split-heading > p {
  color: var(--text-inv-muted);
}

.centered-heading {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

.centered-heading .eyebrow {
  justify-content: center;
}

.centered-heading > p:last-child {
  max-width: 40rem;
  margin: 1.3rem auto 0;
  color: var(--text-muted);
  font-size: 1.02rem;
}

.section-ink .centered-heading > p:last-child {
  color: var(--text-inv-muted);
}

/* --- Hero ------------------------------------------------ */
.hero {
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4.5rem, 8vw, 7rem);
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
}

.hero-copy {
  min-width: 0;
}

.hero h1 {
  max-width: 14ch;
  margin: 0 0 1.5rem;
  font-size: clamp(2.9rem, 6.2vw, 5.2rem);
  letter-spacing: -0.03em;
}

.hero-lede {
  max-width: 40rem;
  margin: 0 0 2rem;
  color: var(--text-muted);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-facts {
  max-width: 40rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.hero-facts li {
  min-width: 0;
  padding: 0 1.1rem;
  border-left: 1px solid var(--paper-line);
}

.hero-facts li:first-child {
  padding-left: 0;
  border-left: 0;
}

.hero-facts b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}

.hero-facts span {
  display: block;
  margin-top: 0.15rem;
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

/* Ficha editorial (aside del hero) */
.spec-card {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-2);
  background: var(--paper-bright);
  box-shadow: var(--shadow-card);
}

.spec-kicker {
  margin: 0 0 0.35rem;
  color: var(--gold-deep);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.spec-name {
  margin: 0 0 1.35rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--paper-line);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  letter-spacing: -0.02em;
}

.spec-list {
  margin: 0;
}

.spec-list > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--paper-line-soft);
}

.spec-list > div:first-child {
  border-top: 0;
  padding-top: 0;
}

.spec-list dt {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 0.15rem;
}

.spec-list dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

.spec-link {
  display: inline-flex;
  gap: 0.4rem;
  margin-top: 1.35rem;
  color: var(--gold-deep);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
}

.spec-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

/* --- Problema -------------------------------------------- */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-2);
  overflow: hidden;
}

.pain-card {
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--ink);
}

.pain-num {
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

.pain-card h3 {
  max-width: 15ch;
  margin: auto 0 0.7rem;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
}

.pain-card p {
  margin: 0;
  color: var(--text-inv-muted);
  font-size: 0.92rem;
}

.pull-quote {
  max-width: 52rem;
  margin: clamp(2.8rem, 6vw, 4.5rem) auto 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-align: center;
}

.pull-quote strong {
  color: var(--gold-bright);
  font-weight: 500;
}

/* --- Método ---------------------------------------------- */
.method-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--paper-line);
  list-style: none;
  counter-reset: none;
}

.method-list li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.8rem, 4vw, 2.6rem) 0;
  border-bottom: 1px solid var(--paper-line);
}

.method-num {
  color: var(--gold-deep);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding-top: 0.4rem;
}

.method-list h3 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
}

.method-list p {
  max-width: 42rem;
  margin: 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
}

/* --- Muestras: escaparate en abanico -----------------------
   Móvil-first: fila deslizable con etiquetas visibles.
   Escritorio (>=62rem): abanico solapado; al pasar el ratón o
   enfocar, la tarjeta se endereza, sube y se destaca. Solo CSS. */

.showcase {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.showcase-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: 1rem;
  margin: 0;
  padding: 1rem 9%;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.showcase-track::-webkit-scrollbar {
  display: none;
}

.showcase-item {
  position: relative;
  scroll-snap-align: center;
}

/* Color de marca de cada demo. Antes iba en style="" inline, pero la CSP
   (style-src 'self') lo bloquea, así que va aquí. Lo usan el nombre y el
   borde de resalte; "Ver demo" se queda en dorado por contraste (AA). */
.showcase-item:nth-child(1) { --brand: #d81b60; } /* VÉRTIGO — magenta */
.showcase-item:nth-child(2) { --brand: #2f6f57; } /* BRUMA — verde */
.showcase-item:nth-child(3) { --brand: #ec4a15; } /* PULSO — naranja */
.showcase-item:nth-child(4) { --brand: #a75c34; } /* Alma Vera — terracota */
.showcase-item:nth-child(5) { --brand: #2b55c4; } /* gozo — cobalto */

.showcase-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.showcase-frame {
  display: block;
  overflow: hidden;
  border: 1px solid var(--paper-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(37, 30, 20, 0.14);
  transition: box-shadow 300ms ease, border-color 300ms ease;
}

.showcase-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 2rem;
  padding: 0 0.9rem;
  border-bottom: 1px solid var(--paper-line);
  background: var(--paper-bright);
}

.showcase-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper-line);
}

.showcase-img {
  display: block;
  width: 100%;
  aspect-ratio: 12 / 5;
  object-fit: cover;
  object-position: top center;
}

.showcase-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 1rem;
}

.showcase-kind {
  order: 1;
  flex-basis: 100%;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.showcase-name {
  order: 2;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  letter-spacing: -0.01em;
  color: var(--brand, var(--text));
}

.showcase-go {
  order: 3;
  margin-left: auto;
  color: var(--gold-deep); /* dorado fijo: en color de marca no llegaría a 4.5:1 (AA) */
  font-weight: 600;
  font-size: 0.9rem;
}

/* ---- Escritorio: abanico ---- */
@media (min-width: 62rem) {
  .showcase-track {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0;
    overflow: visible;
    padding: 3.5rem 1rem 4.5rem;
    scroll-snap-type: none;
    perspective: 1600px;
  }

  /* 5 tarjetas: más estrechas y con más solape que el abanico de 4.
     El ancho pintado real es 5·ancho + 8·margen (los márgenes negativos
     sacan el lienzo de las tarjetas fuera de su caja): calibrado con
     capturas para que a 1280 el abanico entre entero. */
  .showcase-item {
    width: min(23rem, 33vw);
    margin-inline: -5.375rem;
    transform: rotate(var(--rot, 0deg)) translateY(var(--lift, 0px));
    transform-origin: bottom center;
    transition: transform 340ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 300ms ease;
  }

  .showcase-item:nth-child(1) { --rot: -12deg; --lift: 34px; z-index: 1; }
  .showcase-item:nth-child(2) { --rot: -6deg;  --lift: 12px; z-index: 2; }
  .showcase-item:nth-child(3) { --rot: 0deg;   --lift: 0px;  z-index: 3; }
  .showcase-item:nth-child(4) { --rot: 6deg;   --lift: 12px; z-index: 4; }
  .showcase-item:nth-child(5) { --rot: 12deg;  --lift: 34px; z-index: 5; }

  .showcase-item:hover,
  .showcase-item:focus-within {
    --rot: 0deg;
    --lift: -16px;
    z-index: 10;
  }

  .showcase-track:hover .showcase-item:not(:hover):not(:focus-within),
  .showcase-track:focus-within .showcase-item:not(:hover):not(:focus-within) {
    opacity: 0.55;
  }

  .showcase-frame {
    box-shadow: 0 18px 40px rgba(37, 30, 20, 0.20);
  }

  .showcase-item:hover .showcase-frame,
  .showcase-item:focus-within .showcase-frame {
    border-color: var(--brand, var(--gold-deep));
    box-shadow: 0 34px 66px rgba(37, 30, 20, 0.28);
  }

  /* la etiqueta aparece bajo la tarjeta destacada */
  .showcase-meta {
    position: absolute;
    left: 50%;
    bottom: -3rem;
    transform: translateX(-50%) translateY(6px);
    width: max-content;
    max-width: 24rem;
    margin: 0;
    justify-content: center;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms ease, transform 260ms ease;
  }

  .showcase-item:hover .showcase-meta,
  .showcase-item:focus-within .showcase-meta {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  .showcase-go {
    margin-left: 0;
  }
}

/* --- Landing / alcance ----------------------------------- */
.scope-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
  gap: 1rem;
}

.scope-card {
  overflow: hidden;
  border: 1px solid var(--ink-line);
  border-radius: var(--r-2);
  background: var(--ink-raised);
}

.scope-included {
  border-color: rgba(220, 192, 138, 0.34);
}

.scope-card-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-bottom: 1px solid var(--ink-line);
}

.scope-icon {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(220, 192, 138, 0.35);
  border-radius: var(--r-1);
  color: var(--gold-bright);
  font-size: 1.1rem;
}

.scope-excluded .scope-icon {
  border-color: var(--ink-line);
  color: var(--text-inv-faint);
}

.scope-card-head p {
  margin: 0 0 0.15rem;
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scope-excluded .scope-card-head p {
  color: var(--text-inv-faint);
}

.scope-card-head h3 {
  margin: 0;
  font-size: clamp(1.3rem, 2.3vw, 1.7rem);
}

.check-list,
.plain-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1.05rem clamp(1.4rem, 3vw, 2rem);
  border-bottom: 1px solid var(--ink-line-soft);
}

.check-list li:last-child {
  border-bottom: 0;
}

.check-list li > span {
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.check-list b {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--text-inv);
  font-size: 0.92rem;
}

.check-list small {
  display: block;
  color: var(--text-inv-muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.plain-list {
  padding: 1.2rem clamp(1.4rem, 3vw, 2rem) 0;
}

.plain-list li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.3rem;
  border-bottom: 1px solid var(--ink-line-soft);
  color: var(--text-inv-muted);
  font-size: 0.85rem;
}

.plain-list li:last-child {
  border-bottom: 0;
}

.plain-list li::before {
  content: "";
  position: absolute;
  top: 1.28rem;
  left: 0;
  width: 0.5rem;
  height: 1px;
  background: var(--text-inv-faint);
}

.scope-note {
  margin: 1rem clamp(1.4rem, 3vw, 2rem) 1.6rem;
  padding-left: 1rem;
  border-left: 2px solid var(--text-inv-faint);
  color: var(--text-inv-muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.scope-cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
  padding: 1.3rem clamp(1.4rem, 3vw, 2rem);
  border: 1px solid rgba(220, 192, 138, 0.3);
  border-radius: var(--r-2);
}

.scope-cta-price {
  display: grid;
}

.scope-cta-price span {
  color: var(--text-inv-faint);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scope-cta-price strong {
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
}

.scope-cta-price small {
  font-family: var(--font-body);
  font-size: 0.72rem;
}

.scope-cta-copy {
  display: grid;
  gap: 0.3rem;
}

.scope-cta > p,
.scope-cta-copy p {
  margin: 0;
  color: var(--text-inv-muted);
  font-size: 0.82rem;
}

/* Precio de estreno: la línea que enmarca la oferta. Sin dorado a propósito —
   el precio y el botón ya gastan las dos firmas doradas de este bloque. */
.scope-cta-copy .scope-cta-launch {
  color: var(--text-inv);
  font-weight: 600;
  /* Igual que .final-launch: con el `pretty` que heredan los <p>, a ciertos
     anchos parte dejando «1.200 € + IVA» solo en la segunda línea. */
  text-wrap: balance;
}

.checkout-status {
  margin: 1rem 0 0;
  color: var(--text-inv-faint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-align: center;
}

.checkout-status.is-ready {
  color: var(--gold-bright);
}

/* --- Proceso --------------------------------------------- */
.process-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--paper-line);
  list-style: none;
}

.process-list li {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  padding: clamp(1.6rem, 3.5vw, 2.4rem) 0;
  border-bottom: 1px solid var(--paper-line);
}

.process-number {
  color: var(--gold-deep);
  font-family: var(--font-mono);
  font-size: 1rem;
}

.process-copy {
  display: grid;
  grid-template-columns: 9rem minmax(12rem, 0.8fr) minmax(16rem, 1.2fr);
  align-items: start;
  gap: 1.8rem;
}

.process-copy > span {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 0.35rem;
}

.process-copy h3 {
  margin: 0;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
}

.process-copy p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* --- Diagnóstico ----------------------------------------- */
.diagnostic-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(24rem, 1.15fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
}

.diagnostic-intro h2 {
  max-width: 13ch;
  margin: 0 0 1.4rem;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
}

.diagnostic-intro > p:not(.eyebrow):not(.privacy-chip) {
  max-width: 30rem;
  color: var(--text-inv-muted);
  font-size: 1.02rem;
}

.privacy-chip {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: fit-content;
  margin-top: 1.8rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(111, 208, 198, 0.22);
  border-radius: var(--r-2);
  background: rgba(14, 108, 100, 0.1);
}

.privacy-chip > span {
  color: var(--focus-inv);
  font-size: 1.1rem;
  line-height: 1.2;
}

.privacy-chip p {
  margin: 0;
  color: var(--text-inv-muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.privacy-chip b {
  color: #cfe0da;
  font-weight: 600;
}

.diagnostic-card {
  min-width: 0;
  padding: clamp(1.4rem, 4vw, 2.5rem);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-2);
  background: var(--ink-raised);
}

.diagnostic-progress-copy {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
  color: var(--text-inv-faint);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.diagnostic-progress {
  height: 3px;
  margin-bottom: 2rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ink-line);
}

.diagnostic-progress span {
  width: 33.333%;
  height: 100%;
  display: block;
  background: var(--gold);
  transition: width 220ms ease;
}

.diagnostic-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.noscript-note {
  margin: 0 0 1.5rem;
  padding: 1rem;
  border: 1px solid rgba(220, 192, 138, 0.25);
  border-radius: var(--r-2);
  background: rgba(220, 192, 138, 0.07);
  color: var(--text-inv-muted);
  font-size: 0.8rem;
}

.no-js .diagnostic-step + .diagnostic-step {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--ink-line);
}

.diagnostic-step legend {
  width: 100%;
  margin-bottom: 1.3rem;
  color: var(--text-inv);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.choice {
  display: block;
  margin-bottom: 0.65rem;
  cursor: pointer;
}

.choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.choice > span {
  position: relative;
  min-height: 4.4rem;
  display: grid;
  align-content: center;
  padding: 0.85rem 1rem 0.85rem 3.1rem;
  border: 1px solid var(--ink-line);
  border-radius: var(--r-2);
  transition: border-color 160ms ease, background-color 160ms ease;
}

.choice > span::before,
.choice > span::after {
  content: "";
  position: absolute;
  top: 50%;
  border-radius: 50%;
  transform: translateY(-50%);
}

.choice > span::before {
  left: 1.05rem;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid var(--text-inv-faint);
}

.choice > span::after {
  left: 1.33rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--gold-bright);
  opacity: 0;
  transition: opacity 140ms ease;
}

.choice input:focus-visible + span {
  outline: 3px solid var(--focus-inv);
  outline-offset: 3px;
}

.choice input:checked + span {
  border-color: var(--gold);
  background: rgba(220, 192, 138, 0.08);
}

.choice input:checked + span::before {
  border-color: var(--gold-bright);
}

.choice input:checked + span::after {
  opacity: 1;
}

.choice b {
  display: block;
  color: var(--text-inv);
  font-size: 0.9rem;
}

.choice small {
  display: block;
  margin-top: 0.12rem;
  color: var(--text-inv-muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.diagnostic-next {
  width: 100%;
  margin-top: 0.6rem;
}

.diagnostic-nav {
  display: grid;
  grid-template-columns: auto minmax(11rem, 1fr);
  align-items: center;
  gap: 1rem;
  margin-top: 0.6rem;
}

.text-button {
  min-height: 2.7rem;
  padding: 0.5rem 0.3rem;
  color: var(--gold-bright);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(220, 192, 138, 0.4);
  text-underline-offset: 0.25rem;
}

.diagnostic-result {
  min-height: 26rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.result-label {
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.diagnostic-result h3 {
  max-width: 16ch;
  margin: 1.1rem 0 1rem;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
}

.diagnostic-result > p {
  max-width: 34rem;
  color: var(--text-inv-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.result-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem 1.1rem;
  margin-top: 1.4rem;
}

/* --- Para quién / fit ------------------------------------ */
.fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.fit-card {
  padding: clamp(1.6rem, 4vw, 2.5rem);
  border-radius: var(--r-2);
}

.fit-yes {
  background: var(--moss);
  color: var(--text-inv);
}

.fit-no {
  border: 1px solid var(--paper-line);
  background: var(--paper);
}

.fit-label {
  display: block;
  margin-bottom: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fit-yes .fit-label {
  color: var(--gold-bright);
}

.fit-no .fit-label {
  color: var(--gold-deep);
}

.fit-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fit-card li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.9rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

.fit-yes li {
  border-bottom: 1px solid rgba(244, 239, 226, 0.14);
}

.fit-no li {
  border-bottom: 1px solid var(--paper-line-soft);
  color: var(--text-muted);
}

.fit-card li:last-child {
  border-bottom: 0;
}

.fit-card li::before {
  position: absolute;
  left: 0;
  top: 0.85rem;
  font-weight: 700;
}

.fit-yes li::before {
  content: "✓";
  color: var(--gold-bright);
}

.fit-no li::before {
  content: "×";
  color: var(--text-faint);
}

/* --- Compromisos ----------------------------------------- */
.commitments-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(26rem, 1.15fr);
  align-items: start;
  gap: clamp(2.5rem, 7vw, 6rem);
}

.commitments-intro {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
}

.commitments-intro h2 {
  margin: 0 0 1.3rem;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
}

.commitments-intro > p:last-child {
  max-width: 30rem;
  color: var(--text-inv-muted);
}

.commitment-list {
  border-top: 1px solid var(--ink-line);
}

.commitment-list article {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--ink-line);
}

.commitment-list article > span {
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding-top: 0.25rem;
}

.commitment-list h3 {
  margin: 0 0 0.35rem;
  font-size: 1.45rem;
}

.commitment-list p {
  margin: 0;
  color: var(--text-inv-muted);
  font-size: 0.88rem;
}

/* --- FAQ ------------------------------------------------- */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.72fr) minmax(24rem, 1.28fr);
  align-items: start;
  gap: clamp(2.5rem, 7vw, 6rem);
}

.faq-intro {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
}

.faq-intro h2 {
  margin: 0 0 1.2rem;
  font-size: clamp(2.1rem, 4vw, 3.3rem);
}

.faq-intro > p:last-child {
  color: var(--text-muted);
}

.faq-list {
  border-top: 1px solid var(--paper-line);
}

.faq-list details {
  border-bottom: 1px solid var(--paper-line);
}

.faq-list summary {
  position: relative;
  min-height: 4.4rem;
  display: flex;
  align-items: center;
  padding: 1rem 3rem 1rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::before,
.faq-list summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.4rem;
  width: 1rem;
  height: 1.5px;
  background: var(--gold-deep);
  transition: transform 180ms ease;
}

.faq-list summary::after {
  transform: rotate(90deg);
}

.faq-list details[open] summary::after {
  transform: rotate(0);
}

.faq-list details > div {
  max-width: 44rem;
  padding: 0 3rem 1.5rem 0;
  color: var(--text-muted);
}

.faq-list details > div p {
  margin: 0;
  line-height: 1.7;
}

/* --- Cierre ---------------------------------------------- */
.final-cta {
  padding: clamp(5rem, 10vw, 8.5rem) 0;
  text-align: center;
}

.final-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.final-mark {
  margin-bottom: 1.5rem;
}

.final-inner .eyebrow {
  justify-content: center;
}

.final-inner h2 {
  max-width: 18ch;
  margin: 0 0 1.4rem;
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
}

.final-lede {
  max-width: 38rem;
  margin: 0 0 1.5rem;
  color: var(--text-inv-muted);
}

.final-price {
  margin: 0 0 1.5rem;
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 6vw, 4.6rem);
  letter-spacing: -0.03em;
  line-height: 1;
}

.final-price span {
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0;
}

/* Va pegada al precio: el margen negativo absorbe el inferior de .final-price
   (colapsan a 0,6rem). Al retirar la promoción desaparece la línea y el precio
   recupera su separación de siempre. */
.final-launch {
  max-width: 34rem;
  margin: -0.9rem auto 1.5rem;
  color: var(--text-inv-muted);
  font-size: 0.9rem;
  /* `balance` y no el `pretty` que heredan los <p>: en móvil la frase parte en
     dos líneas y `pretty` la deja coja («…Después,» / «1.200 € + IVA»). */
  text-wrap: balance;
}

.final-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

/* --- Pie ------------------------------------------------- */
.site-footer {
  padding: 2.5rem 0;
  border-top: 1px solid var(--paper-line);
  background: var(--paper);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 2rem;
}

.footer-brand .brand-copy small {
  max-width: 22rem;
  text-transform: none;
  font-family: var(--font-body);
  font-size: 0.76rem;
  letter-spacing: 0;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.site-footer nav a {
  color: var(--text-muted);
  font-size: 0.82rem;
  text-decoration: none;
}

.site-footer nav a:hover {
  color: var(--gold-deep);
}

.footer-legal {
  margin: 0;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

/* --- CTA móvil fija -------------------------------------- */
.mobile-cta {
  display: none;
}

/* Tercera línea de la barra fija: el ancla viaja con el visitante. Fuera del
   mono de la etiqueta — es una frase, no un rótulo. 0,6rem y no 0,62 porque a
   360 px «Promoción para los 5 primeros» medía 136,6 de los 137,3 disponibles:
   cabía por siete décimas de píxel. Así hay 5 px de margen. */
.mobile-cta small {
  color: var(--text-faint);
  font-size: 0.6rem;
  line-height: 1.3;
  /* El botón cambia de rótulo al llegar al bloque de precio y la columna se
     ensancha: sin `balance`, con el rótulo corto la frase parte dejando el
     precio solo en la segunda línea. */
  text-wrap: balance;
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (min-width: 64rem) {
  :root {
    --gutter: 3rem;
    --header-height: 5rem;
  }
}

@media (max-width: 64rem) {
  :root {
    --gutter: 2rem;
  }

  .process-copy {
    grid-template-columns: 8rem minmax(11rem, 0.85fr) minmax(14rem, 1.15fr);
    gap: 1.3rem;
  }
}

@media (max-width: 56rem) {
  .menu-toggle {
    display: flex;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    gap: 0;
    padding: 0.75rem var(--gutter) 1rem;
    border-bottom: 1px solid var(--paper-line);
    background: var(--paper);
  }

  .js .site-nav {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.5rem);
    transition: opacity 160ms ease, transform 160ms ease;
  }

  .js .site-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .site-nav > a:not(.button) {
    min-height: 3rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--paper-line-soft);
  }

  .site-nav > .button {
    margin-top: 0.8rem;
  }

  .hero-layout,
  .diagnostic-layout,
  .commitments-layout,
  .faq-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-copy {
    max-width: 44rem;
  }

  .spec-card {
    max-width: 30rem;
  }

  .split-heading {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1.4rem;
  }

  .scope-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .commitments-intro,
  .faq-intro {
    position: static;
  }

  .process-list li {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .process-copy {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }

  .process-copy > span {
    padding-top: 0;
  }
}

@media (max-width: 40rem) {
  :root {
    --gutter: 1.25rem;
    --header-height: 4.25rem;
  }

  body {
    padding-bottom: 4.75rem;
  }

  /* 0,58rem —el mismo cuerpo que la etiqueta de la barra fija— y no 0,62: con
     la etiqueta «promoción» dentro, a 360 px quedaban 21 px de margen (5,7 %),
     y esta franja va en la MONO DEL SISTEMA, que cambia de un móvil a otro, así
     que medir aquí predice menos que con las fuentes propias. A 0,58 el margen
     sube al 10,6 % y la altura de la franja no cambia. */
  .offer-strip {
    font-size: 0.58rem;
    letter-spacing: 0.03em;
    gap: 0.4rem;
  }

  /* En móvil la barra de oferta se parte en dos líneas si además lleva el
     ancla: aquí el ancla la enseña la barra fija de abajo, que además viaja
     con el visitante. Una sola vez en pantalla. En su lugar, la etiqueta
     corta: que se sepa desde el primer vistazo que el precio es temporal. */
  .offer-strip .strip-launch,
  .offer-strip .dot-launch {
    display: none;
  }

  .offer-strip .strip-promo,
  .offer-strip .dot-promo {
    display: inline;
  }

  .brand-copy small {
    max-width: 12rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.58rem;
  }

  .hero h1 {
    font-size: clamp(2.6rem, 12vw, 3.6rem);
  }

  .hero-actions {
    display: grid;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .hero-facts li,
  .hero-facts li:first-child {
    padding: 0.7rem 0;
    border-left: 0;
    border-top: 1px solid var(--paper-line);
  }

  .hero-facts li:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .pain-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fit-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .scope-cta {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
  }

  .scope-cta .button {
    width: 100%;
  }

  .process-list li {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .diagnostic-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .diagnostic-nav .text-button {
    order: 2;
  }

  .result-actions {
    display: grid;
  }

  .result-actions .button {
    width: 100%;
  }

  .final-actions {
    display: grid;
    width: 100%;
  }

  .final-actions .button {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
  }

  .site-nav > .button.button-small {
    justify-content: center;
  }

  /* CTA móvil fija */
  .mobile-cta {
    position: fixed;
    z-index: 150;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 4.4rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem max(1rem, env(safe-area-inset-left)) calc(0.6rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-right));
    border-top: 1px solid var(--paper-line);
    background: var(--paper);
  }

  .js .mobile-cta {
    visibility: hidden;
    transform: translateY(110%);
    transition: transform 180ms ease, visibility 180ms ease;
  }

  .js .mobile-cta.is-visible {
    visibility: visible;
    transform: translateY(0);
  }

  .mobile-cta > div {
    min-width: 0;
    display: grid;
    line-height: 1.2;
  }

  .mobile-cta span {
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    text-transform: uppercase;
  }

  .mobile-cta strong {
    color: var(--gold-deep);
    font-size: 0.88rem;
  }
}

/* Auditoría UX #7: entre 641 y 896 px el header ya es hamburguesa pero la barra
   fija no existía — la acción persistente quedaba escondida. Misma barra, franja
   extendida. */
@media (min-width: 40.0625rem) and (max-width: 56rem) {
  body {
    padding-bottom: 5.5rem;
  }

  .mobile-cta {
    position: fixed;
    z-index: 150;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 4.4rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem max(1rem, env(safe-area-inset-left)) calc(0.6rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-right));
    border-top: 1px solid var(--paper-line);
    background: var(--paper);
  }

  .js .mobile-cta {
    visibility: hidden;
    transform: translateY(110%);
    transition: transform 180ms ease, visibility 180ms ease;
  }

  .js .mobile-cta.is-visible {
    visibility: visible;
    transform: translateY(0);
  }

  .mobile-cta > div {
    min-width: 0;
    display: grid;
    line-height: 1.2;
  }

  .mobile-cta span {
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    text-transform: uppercase;
  }

  .mobile-cta strong {
    color: var(--gold-deep);
    font-size: 0.88rem;
  }
}

/* En pantallas muy estrechas cae «Tu web» y, con él, su separador. El selector
   va por hermano adyacente y no por :nth-of-type — este último indexa por
   etiqueta, y como el primer span es «Tu web», `.dot:nth-of-type(1)` no casaba
   con nada: quedaba un punto huérfano abriendo la página. */
@media (max-width: 22rem) {
  .offer-strip span:first-child,
  .offer-strip span:first-child + .dot {
    display: none;
  }

  /* A 320 px el botón deja 97 px de columna: la frase cae a tres líneas sí o sí.
     Con 0,6rem la tercera era «1.200 € + IVA» a solas; con 0,56 el corte se va
     antes y la última línea queda entera. */
  .mobile-cta small {
    font-size: 0.56rem;
  }
}

/* --- Movimiento reducido --------------------------------- */
@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;
  }
}

/* --- Impresión ------------------------------------------- */
@media print {
  .offer-strip,
  .site-header,
  .mobile-cta {
    display: none !important;
  }

  body {
    padding: 0;
    background: #fff;
    color: #000;
  }

  .section,
  .hero,
  .final-cta {
    padding: 1.5rem 0;
    background: #fff;
    color: #000;
  }
}

/* --- Página 404 ------------------------------------------ */
.nf {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.4rem;
  padding: 3rem 1.5rem;
}
.nf-mark {
  width: 76px;
  height: 76px;
  opacity: 0.92;
}
.nf-code {
  margin: 0;
  color: var(--gold-deep);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.nf h1 {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.nf-lede {
  margin: 0;
  max-width: 34rem;
  color: var(--text-muted);
  font-size: 1.05rem;
}
.nf-actions {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}