/* =============================================================
   KORYFI — DESIGN SYSTEM
   Warm cream paper · soft purple-black bands · one chromatic accent.
   Rhythm: light and dark full-width bands alternate down the page.
   Rules: display type is roman at 600 (never italic — italic headings
   are an AI tell); radii stay contained; shadows stay neutral;
   purple is the only chromatic voice — gold, terracotta and blue are
   reserved for stars, rare warmth and the logo mark respectively.
   ============================================================= */
:root {
  /* ---- Paper · warm cream base ---- */
  --cream:        #f6f0e4;
  --cream-2:      #f1e9da;
  --paper:        #fffcf6;

  /* ---- Ink · soft warm black, never pure ---- */
  --ink:          #1d1420;
  --ink-soft:     #4b3f52;
  --ink-mute:     #7a6f7f;
  --ink-faint:    #a89cb0;

  /* ---- Dark band · surface for the alternating rhythm ---- */
  --band:         #1a1024;
  --band-2:       #241634;
  --on-band:      #f6f0e4;
  --on-band-soft: rgba(246,240,228,0.72);
  --on-band-mute: rgba(246,240,228,0.52);
  --band-line:    rgba(246,240,228,0.12);

  /* ---- Accent · Koryfi purple is the only chromatic voice ---- */
  --purple:       #542b97;   /* on cream */
  --purple-deep:  #3d1f83;
  --purple-ink:   #2a1259;
  --purple-lift:  #a78bfa;   /* TEXT on dark — 6.7:1 over --band (AA) */
  --purple-glow:  #8b5cf6;   /* decorative glow only, no contrast duty */
  --purple-pale:  #ece2f7;
  --purple-tint:  #f4eefb;

  /* ---- Reserved · never general decoration ---- */
  --gold:         #b9903e;   /* review stars + featured ribbon only */
  --gold-soft:    #d9b979;
  --blue:         #1692c9;   /* logo mark only */

  --line:         rgba(29,20,32,0.10);
  --line-2:       rgba(29,20,32,0.18);

  /* ---- Elevation · neutral, never coloured ---- */
  --sh-sm:        0 1px 2px rgba(29,20,32,0.05);
  --sh-md:        0 10px 28px -14px rgba(29,20,32,0.20);
  --sh-lg:        0 24px 56px -28px rgba(29,20,32,0.26);

  /* ---- Geometry · contained radii (was 10/16/22/30/40) ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 24px;
  --r-pill: 999px;

  --fs-hero:  clamp(2.3rem, 1.1rem + 4.4vw, 4.7rem);
  --fs-h2:    clamp(1.9rem, 1.1rem + 2.8vw, 3.2rem);
  --fs-h3:    clamp(1.2rem, 1rem + 0.8vw, 1.55rem);
  --fs-lead:  clamp(1.05rem, 0.96rem + 0.4vw, 1.28rem);
  --fs-body:  clamp(0.96rem, 0.92rem + 0.16vw, 1.04rem);
  --fs-sm:    clamp(0.82rem, 0.78rem + 0.1vw, 0.88rem);
  --fs-label: 0.76rem;

  --shell: min(1220px, 92vw);
  --shell-narrow: min(820px, 90vw);
  --pad-section: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gap: clamp(1rem, 0.6rem + 1.6vw, 1.8rem);

  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --easeS:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --fast:    0.25s var(--ease);
  --med:     0.5s var(--ease);
  --slow:    0.85s var(--ease);

  --display: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --sans:    "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Scroll nativo, sin librería de suavizado.
   Se probó con Lenis y cualquier ajuste se sentía forzado: una rueda que
   empuja la página y luego la deja planear nunca coincide con lo que el
   dedo o la rueda acaban de hacer. El scroll del navegador ya es fluido;
   scroll-behavior solo suaviza los saltos a un ancla, que sí son
   deliberados. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body {
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  color: var(--ink); background: var(--cream);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; font-family: var(--display); font-weight: 600; }
ul { list-style: none; }
::selection { background: var(--purple); color: #fff; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 6px; }

.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--purple), var(--blue));
  z-index: 200; transition: width 0.1s linear;
}
.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--ink); color: var(--cream);
  z-index: 9999; border-radius: 8px; font-weight: 500;
}
.skip-link:focus { top: 1rem; }
.shell { width: var(--shell); margin-inline: auto; }
.shell-narrow { width: var(--shell-narrow); margin-inline: auto; }

/* =============================================================
   TYPE HELPERS
   ============================================================= */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-weight: 500; font-size: var(--fs-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple);
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; flex: none;
  background: currentColor; display: inline-block;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* Emphasis inside headings stays roman — an italicised word in an upright
   heading is one of the most reliable AI tells. Weight and colour carry it. */
h1 em, h2 em, .display em { font-style: normal; font-weight: inherit; color: var(--purple); }

/* Marked emphasis — a painted brush stroke under the words, not a block.
   The stroke is an inline SVG so it keeps its organic shape at any width;
   box-decoration-break repeats it per line when the phrase wraps.
   The fill is hard-coded because background-image can't read a CSS variable —
   the dark-band variant below carries the lifted purple. */
/* La palabra que carga el titular, teñida con un degradado de la propia
   paleta: del morado profundo al claro. Sin cursiva —una itálica en un
   titular es un tic reconocible— y sin subrayado, que competía con el texto.
   El color se hereda como respaldo: si el navegador no recorta el fondo al
   texto, la palabra se ve morada en lugar de invisible. */
.mark {
  color: var(--purple);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .mark {
    background-image: linear-gradient(100deg,
      var(--purple-deep) 0%, var(--purple) 38%, var(--purple-glow) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* =============================================================
   DARK BAND — the alternating light/dark rhythm
   ============================================================= */
.band-dark, .stat-band {
  background: var(--band); color: var(--on-band);
  width: 100%; position: relative; overflow: hidden;
  padding: clamp(3.5rem, 2rem + 4.5vw, 6rem) 0;
}
/* Horizon glow opening each dark band.
   closest-side makes the gradient reach full transparency exactly at the
   element's edges, so the ellipse never shows its bounding box as a seam. */
.band-dark::before, .stat-band::before {
  content: ""; position: absolute; left: 50%; top: 0;
  width: min(1600px, 150%); height: clamp(300px, 40vw, 520px);
  transform: translate(-50%, -52%);
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--purple-glow) 40%, transparent) 0%,
    color-mix(in srgb, var(--purple) 16%, transparent) 55%,
    transparent 100%);
  pointer-events: none;
}
/* Dos bandas oscuras seguidas se leían como dos secciones mal pegadas: cada
   una abría con su propio resplandor y el corte quedaba a la vista. Aquí se
   funden en un solo bloque —el resplandor solo lo abre la primera— y el paso
   de una a otra lo marca una línea muy tenue en vez de un salto de color. */
.dark-join { background: var(--band); }
.dark-join .stat-band { padding-bottom: clamp(2.5rem, 1.5rem + 2vw, 4rem); }
.dark-join + .cta-final.band-dark {
  padding-top: clamp(2.5rem, 1.5rem + 2vw, 4rem);
  &::before { content: none; }
  & > .shell { position: relative; }
  & > .shell::before {
    content: ""; position: absolute; left: 50%; top: calc(-1 * clamp(2.5rem, 1.5rem + 2vw, 4rem));
    transform: translateX(-50%);
    width: min(560px, 70%); height: 1px;
    background: linear-gradient(90deg, transparent, var(--band-line), transparent);
  }
}

.band-dark h2, .band-dark h3, .band-dark h4 { color: var(--on-band); }
.band-dark .sec-sub, .band-dark > .shell > p { color: var(--on-band-soft); }
.band-dark .eyebrow { color: var(--purple-lift); }
.band-dark .mark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 22' preserveAspectRatio='none'%3E%3Cpath fill='%23a78bfa' d='M2 12.8C48 6.2 112 2.8 174 3.6C226 4.3 272 6.8 318 4.6C316 10.8 286 15.4 232 17C172 18.8 106 17.6 56 18.8C33 19.3 12 18.4 2 12.8Z'/%3E%3C/svg%3E");
}
.band-dark em { color: var(--purple-lift); }
.text-center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =============================================================
   BUTTONS
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-sm);
  padding: 0.85rem 1.5rem; border-radius: var(--r-pill);
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform var(--fast), box-shadow var(--fast), background var(--fast), color var(--fast), border-color var(--fast);
  white-space: nowrap;

  & .arr { transition: transform var(--fast); display: inline-block; }
  &:hover .arr { transform: translateX(4px); }
}
.btn-lg { padding: 1.05rem 1.75rem; font-size: 0.95rem; }
.btn-sm { padding: 0.6rem 1.1rem; font-size: 0.82rem; }

.btn-primary {
  background: var(--purple); color: #fff;
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--purple) 65%, transparent);
  &:hover { background: var(--purple-deep); transform: translateY(-2px); box-shadow: 0 20px 40px -14px color-mix(in srgb, var(--purple) 75%, transparent); }
}
.btn-ghost {
  background: transparent; color: var(--ink);
  border-color: var(--line-2);
  &:hover { border-color: var(--purple); color: var(--purple); transform: translateY(-2px); }
}
.btn-dark {
  background: var(--ink); color: var(--cream);
  box-shadow: 0 14px 30px -14px rgba(29,20,32,0.5);
  &:hover { background: var(--purple-ink); transform: translateY(-2px); }
}
/* Acción principal sobre fondo oscuro o morado. Antes era blanco al 12% de
   opacidad y se leía como un velo, no como un botón: sobre la tarjeta de plan
   morada casi desaparecía. Sólido y con texto oscuro no admite dudas.
   El contorno claro para acciones secundarias es .btn-on-band. */
.btn-light {
  background: var(--cream); color: var(--purple-ink);
  border: 1.5px solid var(--cream);
  box-shadow: 0 14px 30px -16px rgba(0,0,0,0.55);
  &:hover {
    background: #fff; border-color: #fff; color: var(--purple-ink);
    transform: translateY(-2px); box-shadow: 0 20px 38px -16px rgba(0,0,0,0.6);
  }
}
.btn-block { width: 100%; justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 600; font-size: 0.9rem; color: var(--purple);
  & .arr { transition: transform var(--fast); }
  &:hover .arr { transform: translateX(4px); }
}

/* =============================================================
   NAV
   ============================================================= */
.nav {
  position: sticky; top: 0; z-index: 100;
  padding: 1rem 0;
  transition: background var(--fast), box-shadow var(--fast), padding var(--fast);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav.stuck {
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--line);
  padding: 0.7rem 0;
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 30px; width: auto; }
.nav-links {
  display: flex; gap: 1.8rem; align-items: center;
  & a {
    font-size: 0.9rem; font-weight: 500; color: var(--ink-soft);
    position: relative; padding: 0.3rem 0;
    transition: color var(--fast);
    &::after {
      content: ""; position: absolute; left: 0; bottom: -3px;
      width: 0; height: 2px; background: var(--purple);
      transition: width var(--med); border-radius: 2px;
    }
    &:hover { color: var(--ink); }
    &:hover::after, &.active::after { width: 100%; }
    &.active { color: var(--purple); }
  }
}
.nav-cta { display: flex; align-items: center; gap: 0.6rem; }

.nav-drop { position: relative; }
.nav-drop-trigger {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--sans); font-size: 0.9rem; font-weight: 500; color: var(--ink-soft);
  background: none; border: 0; cursor: pointer; padding: 0.3rem 0;
  transition: color var(--fast);
  &:hover { color: var(--ink); }
}
.nav-drop-trigger .chev { width: 14px; height: 14px; transition: transform var(--fast); }
.nav-drop.is-open .nav-drop-trigger .chev { transform: rotate(180deg); }
.nav-drop.is-open .nav-drop-trigger { color: var(--purple); }
.nav-drop-menu {
  position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 0.5rem; min-width: 210px;
  box-shadow: 0 26px 54px -22px rgba(29,20,32,0.3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--fast), transform var(--fast), visibility var(--fast);
  z-index: 120;
}
.nav-drop.is-open .nav-drop-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-drop-menu a {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 0.8rem; border-radius: 8px;
  font-size: 0.86rem; font-weight: 500; color: var(--ink-soft);
  transition: background var(--fast), color var(--fast);
  &:hover { background: var(--purple-tint); color: var(--purple); }
  & svg { width: 15px; height: 15px; flex: none; opacity: 0.7; }
}
.btn-login {
  font-size: 0.86rem; font-weight: 600; color: var(--ink-soft);
  padding: 0.5rem 0.9rem; border-radius: var(--r-pill);
  transition: background var(--fast), color var(--fast);
  &:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
}
/* Second login link, sitting at the end of the nav list. Hidden on desktop,
   where the header button does the job. See the note at the nav breakpoint. */
.nav-login-mobile { display: none; }
.nav-toggle {
  display: none; width: 40px; height: 40px; border-radius: 10px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-2);
  & span, & span::before, & span::after {
    content: ""; display: block; width: 18px; height: 2px; background: var(--ink);
    position: relative; transition: transform var(--fast), opacity var(--fast);
  }
  & span::before { position: absolute; top: -6px; }
  & span::after { position: absolute; top: 6px; }
}

/* =============================================================
   HERO
   ============================================================= */
.hero { padding: clamp(2.5rem, 1rem + 4vw, 4.5rem) 0 clamp(3rem, 1.5rem + 4vw, 5rem); }
.hero-top {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; }
.hero-title {
  font-size: var(--fs-hero); font-weight: 600;
  letter-spacing: -0.035em; line-height: 1.04;
  max-width: 14ch;
}
.hero-sub { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 46ch; line-height: 1.55; font-family: var(--sans); }
.hero-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.3rem; }
.hero-trustline {
  display: flex; align-items: center; gap: 0.7rem; margin-top: 0.6rem;
  font-size: 0.85rem; color: var(--ink-mute);
}
.hero-stars { color: var(--gold); letter-spacing: 1px; }

.hero-visual { position: relative; }
.hero-card {
  position: relative; border-radius: var(--r-2xl); overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--cream-2);
}
/* The photograph stays in its own colour — no brand tint over skin tones. */
.hero-card img { width: 100%; height: 100%; object-fit: cover; }
/* Neutral vignette at the foot of the frame, only to ground it on the cream. */
.hero-card-tint {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 64%, rgba(29,20,32,0.16) 100%);
}
.hero-badge {
  position: absolute; z-index: 3; background: var(--paper);
  border-radius: var(--r-md); padding: 0.9rem 1.1rem;
  box-shadow: 0 24px 50px -20px rgba(29,20,32,0.4);
  border: 1px solid var(--line);
  animation: floatY 5s var(--easeS) infinite;
}
.hero-badge.b1 { top: -6%; left: -7%; }
.hero-badge.b2 { bottom: 10%; right: -7%; animation-delay: 1.6s; }
.hb-num { font-family: var(--display); font-weight: 600; font-size: 1.5rem; color: var(--purple); line-height: 1;
  & span { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-mute); font-weight: 500; margin-left: 2px; }
}
.hb-lab { font-size: 0.72rem; color: var(--ink-mute); margin-top: 3px; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* =============================================================
   TRUST STRIP (client logos)
   ============================================================= */
.trust { padding: clamp(2rem, 1rem + 2vw, 3rem) 0; }
.trust-label { text-align: center; font-size: var(--fs-label); color: var(--ink-mute); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1.8rem; font-family: var(--mono); }

.trust-marquee {
  position: relative; width: min(1600px, 94vw); margin-inline: auto; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}
.trust-track {
  display: flex; align-items: center; width: max-content;
  gap: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  animation: trustScroll 26s linear infinite;
  will-change: transform;
}
.trust-marquee:hover .trust-track { animation-play-state: paused; }
@keyframes trustScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.trust-logo {
  flex: none; height: clamp(52px, 4vw + 30px, 76px); width: auto;
  max-width: 260px; object-fit: contain; display: block;
  border-radius: var(--r-lg);
  box-shadow: 0 16px 32px -20px rgba(29,20,32,0.35);
  transition: transform var(--fast), box-shadow var(--fast);
}
.trust-logo:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 22px 40px -18px rgba(29,20,32,0.4); }

/* =============================================================
   SECTION HEADERS
   ============================================================= */
.sec-head { max-width: 640px; margin-bottom: clamp(2rem, 1.2rem + 2vw, 3.5rem); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-title { font-size: var(--fs-h2); margin-top: 0.8rem; }
.sec-sub { font-size: var(--fs-lead); color: var(--ink-soft); margin-top: 0.9rem; font-family: var(--sans); }

/* =============================================================
   SECTION PADDING (shared)
   ============================================================= */
.bento { padding: var(--pad-section) 0; }

/* =============================================================
   AUDIENCES
   ============================================================= */
.audiences { padding: var(--pad-section) 0; }
.aud-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.aud-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 1.8rem; transition: transform var(--med), box-shadow var(--med);
  &:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(29,20,32,0.3); }
}
.aud-tag {
  display: inline-flex; font-family: var(--mono); font-size: var(--fs-label);
  padding: 0.3rem 0.7rem; border-radius: var(--r-pill); margin-bottom: 1.2rem;
  background: var(--purple-tint); color: var(--purple); font-weight: 500;
}
.aud-card h3 { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
.aud-card p { color: var(--ink-mute); font-size: 0.95rem; line-height: 1.6; font-family: var(--sans); margin-bottom: 1rem; }

/* =============================================================
   STEPS ("Empieza en 4 pasos")
   ============================================================= */
.steps { padding: var(--pad-section) 0; }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-bottom: 2.5rem; }
.step-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.7rem; transition: transform var(--med), box-shadow var(--med);
  &:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -28px rgba(29,20,32,0.3); }
}
.step-num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--purple); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-family: var(--display);
  margin-bottom: 1.1rem;
}
.step-card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; font-family: var(--sans); font-weight: 700; }
.step-card p { font-size: 0.88rem; color: var(--ink-mute); line-height: 1.6; font-family: var(--sans); }

/* =============================================================
   AI FULL-WIDTH BANNER (true edge-to-edge, no shell constraint)
   ============================================================= */
.ai-banner {
  width: 100%; padding: clamp(3.5rem, 2.2rem + 5vw, 6.5rem) 0;
  background: linear-gradient(120deg, #180f28, var(--purple-ink) 55%, var(--purple-deep));
  position: relative; overflow: hidden;
}
.ai-banner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(560px circle at 12% 20%, rgba(255,255,255,0.07), transparent 55%),
    radial-gradient(620px circle at 92% 85%, color-mix(in srgb, var(--purple-glow) 34%, transparent), transparent 55%);
}
.ai-text { position: relative; z-index: 1; max-width: 640px; }
.ai-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border: 1px solid rgba(255,255,255,0.25); border-radius: var(--r-pill);
  font-size: 0.78rem; font-weight: 600; color: var(--cream); width: fit-content; margin-bottom: 1.4rem;
  font-family: var(--sans);
}
.ai-text h2 { color: var(--on-band); font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem); margin-bottom: 1.1rem; max-width: 18ch; }
.ai-text p { color: var(--on-band-soft); font-size: 1.02rem; line-height: 1.65; margin-bottom: 1.8rem; max-width: 46ch; font-family: var(--sans); }

/* Two AI capabilities side by side inside the banner */
.ai-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 1rem + 2.4vw, 3.5rem);
  margin-top: clamp(2rem, 1.2rem + 2vw, 3rem);
  padding-top: clamp(2rem, 1.2rem + 2vw, 3rem);
  border-top: 1px solid var(--band-line);
}
.ai-col .ic {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: rgba(246,240,228,0.09); color: var(--purple-lift);
  display: grid; place-items: center; margin-bottom: 1.1rem;
}
.ai-col .ic svg { width: 19px; height: 19px; }
.ai-col h3 { color: var(--on-band); font-size: var(--fs-h3); margin-bottom: 0.55rem; }
.ai-col p { color: var(--on-band-soft); font-size: 0.95rem; line-height: 1.65; font-family: var(--sans); margin-bottom: 0.9rem; max-width: 46ch; }
/* Segundo párrafo de la columna: el matiz que no compite con el titular.
   Se separa con una línea fina en lugar de bajar más el contraste, que ya
   está al límite legible sobre la banda oscura. */
.ai-col .ai-note {
  font-size: 0.89rem; color: var(--on-band-mute);
  border-left: 2px solid rgba(167,139,250,0.35);
  padding-left: 0.9rem; margin-bottom: 1.1rem;
}
.ai-tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em;
  color: var(--on-band-mute); text-transform: uppercase;
}

/* =============================================================
   EDITORIAL PHOTO GRID
   ============================================================= */
.editorial { padding: var(--pad-section) 0; }
.editorial-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 2.5rem; }
.editorial-head h2 { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.6rem); max-width: 18ch; }
.editorial-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.editorial-item { display: block; }
.editorial-photo { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/5; margin-bottom: 1rem; }
.editorial-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--med); }
.editorial-item:hover .editorial-photo img { transform: scale(1.05); }
.editorial-item p { font-weight: 700; font-size: 0.96rem; font-family: var(--sans); line-height: 1.4; }

/* =============================================================
   STAT BAND
   ============================================================= */
.stat-deco { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); width: clamp(110px, 11vw, 165px); opacity: 0.22; pointer-events: none; z-index: 0; }
.stat-deco svg { width: 100%; height: auto; color: var(--on-band); }
.stat-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); text-align: center; }
.stat-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.stat-num { display: block; font-family: var(--display); font-size: clamp(2.3rem, 1.2rem + 4.2vw, 3.8rem); font-weight: 600; letter-spacing: -0.035em; }
.stat-lab { display: block; font-size: 0.85rem; color: var(--on-band-mute); margin-top: 0.55rem; font-family: var(--sans); max-width: 24ch; margin-inline: auto; line-height: 1.5; }

/* =============================================================
   TESTIMONIALS
   ============================================================= */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.t-card {
  background: rgba(246,240,228,0.045); border-radius: var(--r-lg); padding: 1.7rem;
  border: 1px solid var(--band-line);
  transition: transform var(--med), background var(--med), border-color var(--med);
  display: flex; flex-direction: column;
  &:hover { transform: translateY(-4px); background: rgba(246,240,228,0.08); border-color: color-mix(in srgb, var(--purple-lift) 40%, transparent); }
}
.t-stars { color: var(--gold-soft); letter-spacing: 1px; margin-bottom: 1rem; font-size: 0.95rem; }
.t-card p { color: var(--on-band-soft); font-size: 0.96rem; line-height: 1.65; margin-bottom: 1.3rem; font-family: var(--sans); flex: 1; }
.t-who { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.t-av {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--purple-lift), var(--purple));
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; font-family: var(--sans);
}
.t-who b { display: block; font-weight: 700; font-size: 0.9rem; font-family: var(--sans); color: var(--on-band); }
.t-who small { display: block; color: var(--on-band-mute); font-size: 0.75rem; }
.t-src { margin-left: auto; font-family: var(--mono); font-size: 0.65rem; padding: 0.25rem 0.55rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--purple-lift) 20%, transparent); color: var(--purple-lift); white-space: nowrap; }

/* =============================================================
   BLOG PREVIEW
   ============================================================= */
.blog-preview { padding: var(--pad-section) 0; }
.blog-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 2.5rem; }
.blog-head h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); max-width: 20ch; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.blog-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
  transition: transform var(--med), box-shadow var(--med);
  &:hover { transform: translateY(-6px); box-shadow: 0 28px 55px -28px rgba(29,20,32,0.3); }
}
.blog-card-img { aspect-ratio: 16/10; overflow: hidden; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--med); }
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-body { padding: 1.5rem; }
.blog-meta { display: flex; gap: 0.6rem; align-items: center; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-mute); margin-bottom: 0.9rem; }
.blog-tag { padding: 0.25rem 0.65rem; border-radius: var(--r-pill); background: var(--purple-tint); color: var(--purple); font-weight: 600; }
.blog-card h3 { font-size: 1.05rem; margin-bottom: 0.6rem; font-family: var(--sans); font-weight: 700; line-height: 1.35; }
.blog-card p { font-size: 0.88rem; color: var(--ink-mute); line-height: 1.6; margin-bottom: 1.1rem; font-family: var(--sans); }

/* ---- Featured post (blog index) ---- */
.blog-featured {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  align-items: center; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.blog-featured-img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/11; }
.blog-featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--med); }
.blog-featured:hover .blog-featured-img img { transform: scale(1.03); }
.blog-featured h2 { font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.3rem); margin: 0.7rem 0 0.8rem; }
.blog-featured p { color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.7; margin-bottom: 1.3rem; max-width: 46ch; font-family: var(--sans); }

/* =============================================================
   ARTICLE — long-form reading
   ============================================================= */
.article { padding: clamp(2rem, 1rem + 3vw, 3.5rem) 0 var(--pad-section); }
.article-head { width: min(760px, 92vw); margin: 0 auto clamp(2rem, 1.2rem + 2vw, 3rem); text-align: center; }
.article-head h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.2rem);
  margin: 0.9rem 0 1.1rem; text-wrap: balance;
}
.article-lead { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.6; font-family: var(--sans); }
.article-meta {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0.5rem 1rem; margin-top: 1.6rem;
  font-family: var(--mono); font-size: 0.76rem; color: var(--ink-mute);
}
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); }
.article-cover { width: min(1000px, 92vw); margin: 0 auto clamp(2rem, 1.2rem + 2vw, 3.2rem); border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/8; }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Prose — the only place body copy runs long */
.prose { width: min(680px, 92vw); margin-inline: auto; font-family: var(--sans); }
.prose > * + * { margin-top: 1.35rem; }
.prose p { font-size: 1.06rem; line-height: 1.78; color: var(--ink-soft); }
.prose h2 { font-size: clamp(1.35rem, 1.05rem + 1vw, 1.8rem); margin-top: 2.8rem; color: var(--ink); }
.prose h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); margin-top: 2rem; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.2rem; display: grid; gap: 0.6rem; }
.prose ul li { list-style: none; position: relative; padding-left: 1rem; color: var(--ink-soft); line-height: 1.7; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); }
.prose ol { list-style: decimal; }
.prose ol li { color: var(--ink-soft); line-height: 1.7; padding-left: 0.3rem; }
.prose ol li::marker { color: var(--purple); font-weight: 700; font-family: var(--mono); font-size: 0.9em; }
.prose a { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose blockquote {
  border-left: 3px solid var(--purple); padding: 0.2rem 0 0.2rem 1.3rem;
  color: var(--ink); font-size: 1.12rem; line-height: 1.65;
}
.prose img { border-radius: var(--r-lg); margin-block: 2rem; }
.prose figure { margin-block: 2rem; }
.prose figcaption { font-size: 0.82rem; color: var(--ink-mute); margin-top: 0.6rem; text-align: center; font-family: var(--sans); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.5rem; }
.prose code {
  font-family: var(--mono); font-size: 0.88em;
  background: var(--purple-tint); color: var(--purple-deep);
  padding: 0.14em 0.4em; border-radius: var(--r-sm);
}

/* Callout inside an article */
.callout {
  background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--purple);
  border-radius: var(--r-md); padding: 1.3rem 1.5rem; margin-block: 2rem;
}
.callout p { font-size: 0.98rem; margin: 0; }
.callout b { color: var(--ink); }

/* Author + related */
.author-box {
  width: min(680px, 92vw); margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) auto 0;
  display: flex; gap: 1rem; align-items: center;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.4rem;
}
.author-av {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--purple), var(--purple-deep));
  color: #fff; display: grid; place-items: center; font-weight: 700; font-family: var(--sans);
}
.author-box b { display: block; font-size: 0.95rem; font-family: var(--sans); }
.author-box span { font-size: 0.85rem; color: var(--ink-mute); font-family: var(--sans); line-height: 1.55; }

.related { padding: 0 0 var(--pad-section); }

/* =============================================================
   LEGAL — long document with a sticky index
   ============================================================= */
.legal { padding: 0 0 var(--pad-section); }
.legal-layout {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: start;
}

.legal-toc { position: sticky; top: 88px; max-height: calc(100vh - 120px); overflow-y: auto; }
.legal-toc-title {
  font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--ink-mute); margin-bottom: 0.9rem; padding-left: 0.75rem;
}
.legal-toc a {
  display: block; font-size: 0.845rem; line-height: 1.4;
  color: var(--ink-mute); padding: 0.44rem 0.75rem;
  border-left: 2px solid var(--line); font-family: var(--sans);
  transition: color var(--fast), background var(--fast), border-color var(--fast);
}
.legal-toc a:hover { color: var(--ink); background: var(--purple-tint); }
.legal-toc a.active {
  color: var(--purple); border-left-color: var(--purple);
  background: var(--purple-tint); font-weight: 600;
}

/* Mobile: the index collapses into a disclosure above the text */
.legal-toc-mobile { display: none; margin-bottom: 2rem; }
.legal-toc-mobile > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.1rem; border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--paper); font-weight: 600; font-size: 0.92rem; font-family: var(--sans);
}
.legal-toc-mobile > summary::-webkit-details-marker { display: none; }
.legal-toc-mobile[open] > summary { border-radius: var(--r-md) var(--r-md) 0 0; }
.legal-toc-mobile .legal-toc-list {
  border: 1px solid var(--line-2); border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md); padding: 0.5rem;
  max-height: 55vh; overflow-y: auto; background: var(--paper);
}

.legal-body { max-width: 68ch; font-family: var(--sans); }
.legal-body h2 {
  font-size: clamp(1.2rem, 1.02rem + 0.8vw, 1.55rem);
  margin-top: 3rem; scroll-margin-top: 96px; color: var(--ink);
}
.legal-body > h2:first-child { margin-top: 0; }
.legal-body p { font-size: 0.97rem; line-height: 1.76; color: var(--ink-soft); margin-top: 1rem; }
.legal-body ul, .legal-body ol { margin-top: 1rem; display: grid; gap: 0.5rem; padding-left: 1.15rem; }
.legal-body ul li { list-style: none; position: relative; padding-left: 0.95rem; }
.legal-body ul li::before {
  content: ""; position: absolute; left: 0; top: 0.66em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--purple);
}
.legal-body ol { list-style: decimal; }
.legal-body ol li::marker { color: var(--purple); font-weight: 700; }
.legal-body li { font-size: 0.95rem; line-height: 1.7; color: var(--ink-soft); }
.legal-body strong { color: var(--ink); font-weight: 700; }
.legal-body a { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; }
.legal-body table {
  width: 100%; border-collapse: collapse; margin-top: 1.5rem;
  font-size: 0.88rem; font-family: var(--sans);
}
.legal-body th, .legal-body td { padding: 0.68rem 0.9rem; border: 1px solid var(--line); text-align: left; }
.legal-body thead th { background: var(--purple-tint); color: var(--purple-ink); font-weight: 700; }
.legal-body td { color: var(--ink-soft); }

.legal-updated {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.75rem; color: var(--ink-mute);
  background: var(--paper); border: 1px solid var(--line);
  padding: 0.5rem 0.9rem; border-radius: var(--r-pill); margin-bottom: 2rem;
}
.legal-top {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 3rem; font-size: 0.85rem; font-weight: 600; color: var(--purple); font-family: var(--sans);
}

/* =============================================================
   PRICING
   ============================================================= */
.pricing { padding: var(--pad-section) 0; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: stretch; }
.price-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
  display: flex; flex-direction: column;
  transition: transform var(--med), box-shadow var(--med);
  &:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(29,20,32,0.32); }
}
.price-card.featured {
  background: linear-gradient(165deg, var(--purple), var(--purple-deep));
  color: #fff; border-color: transparent; position: relative;
  box-shadow: 0 30px 60px -26px rgba(84,43,151,0.5);
  transform: scale(1.03);
  & .price-desc, & .plan-feat { color: rgba(255,255,255,0.82); }
  & .price-amt sup, & .price-per { color: rgba(255,255,255,0.7); }
  &:hover { transform: scale(1.03) translateY(-6px); }
}
.price-ribbon {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--purple-ink); font-weight: 700;
  font-size: 0.72rem; padding: 0.4rem 1rem; border-radius: var(--r-pill);
  font-family: var(--mono); letter-spacing: 0.04em;
}
.price-name { font-size: var(--fs-h3); margin-bottom: 0.3rem; }
.price-desc { font-size: 0.88rem; color: var(--ink-mute); margin-bottom: 1.4rem; font-family: var(--sans); }
.price-amt { font-family: var(--display); font-size: 2.8rem; font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: flex-start; gap: 0.2rem;
  & sup { font-size: 1.2rem; margin-top: 0.35rem; }
}
.price-per { font-size: 0.85rem; color: var(--ink-mute); margin-bottom: 0.2rem; font-family: var(--sans); }
.price-permonth { font-size: 0.78rem; color: var(--ink-faint); margin-bottom: 1.5rem; font-family: var(--sans); }
.price-card.featured .price-permonth { color: rgba(255,255,255,0.65); }
.plan-feats { display: grid; gap: 0.7rem; margin: 1.4rem 0; flex: 1; }
.plan-feat { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--ink-soft); font-family: var(--sans); }
.plan-feat svg { flex: none; width: 17px; height: 17px; color: var(--purple); }
.price-card.featured .plan-feat svg { color: #fff; }

/* =============================================================
   INFRASTRUCTURE HIGHLIGHT (full-width, same pattern as AI banner)
   ============================================================= */
.infra-section {
  width: 100%; padding: clamp(3.5rem, 2.2rem + 5vw, 6.5rem) 0;
  background: linear-gradient(120deg, #180f28, var(--purple-ink) 55%, var(--purple-deep));
  position: relative; overflow: hidden;
}
.infra-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(560px circle at 90% 15%, rgba(255,255,255,0.07), transparent 55%),
    radial-gradient(620px circle at 8% 90%, color-mix(in srgb, var(--purple-glow) 30%, transparent), transparent 55%);
}
.infra-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 1rem + 3vw, 4.5rem);
}
.infra-text h2 { color: var(--cream); font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.7rem); max-width: 16ch; margin-top: 0.8rem; }
.infra-cta { display: flex; align-items: center; gap: 1rem; margin-top: 1.8rem; flex-wrap: wrap; }
.infra-rating { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.4rem; font-size: 0.85rem; color: rgba(246,240,228,0.65); font-family: var(--sans); }
.infra-rating .stars { color: var(--gold-soft); letter-spacing: 1px; }

.infra-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.6rem; align-content: start; }
.infra-item { display: flex; align-items: flex-start; gap: 0.7rem; }
.infra-item .ic {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,0.1); color: var(--cream);
  display: grid; place-items: center;
}
.infra-item .ic svg { width: 17px; height: 17px; }
.infra-item b { display: block; font-size: 0.92rem; font-weight: 700; font-family: var(--sans); color: var(--cream); }
.infra-item span { font-size: 0.83rem; color: rgba(246,240,228,0.6); line-height: 1.5; font-family: var(--sans); }

/* =============================================================
   PAYMENTS
   ============================================================= */
.payments { padding: clamp(2rem, 1rem + 3vw, 4rem) 0 var(--pad-section); }
.pay-band {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2xl);
  padding: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
}
.pay-title { font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem); margin-top: 0.6rem; }
.pay-sub { color: var(--ink-mute); font-size: 0.95rem; margin-top: 0.5rem; font-family: var(--sans); }
.pay-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
.pay-m {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 1rem 1.15rem; border-radius: var(--r-md);
  background: var(--cream); border: 1px solid var(--line);
  transition: transform var(--fast), border-color var(--fast);
  &:hover { transform: translateY(-3px); border-color: var(--purple); }
}
.pay-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--purple-pale); color: var(--purple); display: grid; place-items: center; flex: none; }
.pay-icon svg { width: 18px; height: 18px; }
.pay-m-text b { display: block; font-size: 0.9rem; font-weight: 700; font-family: var(--sans); }
.pay-m-text small { display: block; font-size: 0.74rem; color: var(--ink-mute); }

/* =============================================================
   FAQ
   ============================================================= */
.faq { padding: var(--pad-section) 0; }
.faq-list { max-width: 780px; margin: 0 auto; display: grid; gap: 0.2rem; }
.acc {
  background: transparent; border: none;
  border-bottom: 1px solid var(--line-2);
  &[open] { border-color: var(--purple); }
  & > summary {
    list-style: none; cursor: pointer;
    padding: 1.4rem 0.4rem;
    display: grid; grid-template-columns: 38px 1fr 28px; gap: 1rem; align-items: center;
    font-weight: 600; font-size: 1.02rem; font-family: var(--sans);
    transition: color var(--fast);
    &::-webkit-details-marker { display: none; }
  }
  &:hover > summary { color: var(--purple); }
  & .num { font-family: var(--mono); font-size: 0.85rem; color: var(--ink-faint); transition: color var(--fast); }
  &:hover .num, &[open] .num { color: var(--purple); }
  & .plus {
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--purple-pale); color: var(--purple);
    font-size: 1.15rem; font-weight: 300;
    transition: transform var(--fast), background var(--fast), color var(--fast);
  }
  &[open] .plus { transform: rotate(45deg); background: var(--purple); color: #fff; }
  & .body {
    padding: 0 0.4rem 1.4rem 3.4rem;
    color: var(--ink-soft); font-size: 0.95rem; line-height: 1.7; font-family: var(--sans);
    animation: slideDown 0.35s var(--ease);
  }
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* =============================================================
   FINAL CTA
   ============================================================= */
.cta-final { padding-block: clamp(4rem, 2.4rem + 5vw, 7rem); }
.cta-final-card { text-align: center; position: relative; z-index: 1; }
.cta-final-card h2 { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.4rem); color: var(--on-band); margin-bottom: 1.1rem; }
.cta-final-card p { color: var(--on-band-soft); font-size: var(--fs-lead); max-width: 46ch; margin: 0 auto 2.4rem; font-family: var(--sans); }
.cta-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
/* El botón que cierra la página necesita más aire vertical del que le daba
   .btn-lg: es el último punto de contacto y se veía apretado contra su texto. */
.cta-actions .btn-lg { padding: 1.2rem 2.2rem; }

/* =============================================================
   AFFILIATE CALLOUT (compact strip atop the footer)
   ============================================================= */
.aff-banner { background: linear-gradient(90deg, var(--purple-deep), var(--purple)); padding: 1.5rem 0; }
.aff-banner-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem;
}
.aff-banner p { color: #fff; font-size: 0.98rem; font-weight: 600; font-family: var(--sans); }
.aff-banner p span { font-weight: 400; color: rgba(255,255,255,0.8); }

/* =============================================================
   FOOTER
   ============================================================= */
.foot { background: var(--ink); color: rgba(246,240,228,0.75); padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0 2rem; }
.foot-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 2rem; margin-bottom: 2.5rem; }
.foot-brand img { height: 26px; filter: brightness(0) invert(1); margin-bottom: 1rem; }
.foot-desc { font-size: 0.86rem; line-height: 1.7; max-width: 32ch; color: rgba(246,240,228,0.55); }
/* Permanent client-area access, on every page and every screen size.
   On phones this is the reliable one: it needs no menu and no JavaScript. */
.foot-login {
  display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.4rem;
  padding: 0.62rem 1.1rem; border-radius: var(--r-pill);
  border: 1px solid rgba(246,240,228,0.22);
  font-family: var(--sans); font-size: 0.84rem; font-weight: 600; color: var(--cream);
  transition: background var(--fast), border-color var(--fast);
  & svg { width: 15px; height: 15px; opacity: 0.65; }
  &:hover { background: rgba(246,240,228,0.08); border-color: rgba(246,240,228,0.45); }
}
.foot-col-title { color: var(--cream); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.1rem; font-family: var(--sans); }
.foot-col a { display: block; font-size: 0.86rem; margin-bottom: 0.6rem; transition: color var(--fast);
  &:hover { color: var(--cream); }
}
.foot-bottom { border-top: 1px solid rgba(246,240,228,0.1); padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.78rem; }
/* Seis redes: en iconos ocupan lo que antes tres nombres escritos */
.foot-bottom .socials { display: flex; gap: 0.55rem; align-items: center; }
.foot-bottom .socials a {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; color: rgba(246,240,228,0.6);
  border: 1px solid rgba(246,240,228,0.14);
  transition: background var(--fast), color var(--fast), border-color var(--fast);
  & svg { width: 16px; height: 16px; }
  &:hover {
    background: rgba(246,240,228,0.1); color: var(--cream);
    border-color: rgba(246,240,228,0.4);
  }
}

/* =============================================================
   PAGE HERO (interior pages)
   ============================================================= */
.page-hero { padding: clamp(3rem, 1.5rem + 4vw, 5.5rem) 0 clamp(2.5rem, 1.2rem + 3vw, 4rem); text-align: center; }
.page-hero h1 { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.2rem); max-width: 16ch; margin: 0.8rem auto 0; }
.page-hero p { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 52ch; margin: 1rem auto 0; font-family: var(--sans); }
.breadcrumb { display: flex; justify-content: center; gap: 0.5rem; font-size: 0.82rem; color: var(--ink-mute); }
.breadcrumb a:hover { color: var(--purple); }

/* =============================================================
   PRICING PAGE: comparison table
   ============================================================= */
.compare { padding: 0 0 var(--pad-section); overflow-x: auto; }
.compare table {
  width: 100%; border-collapse: collapse; min-width: 640px;
  background: var(--paper); border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 20px 50px -30px rgba(29,20,32,0.25);
}
.compare th, .compare td {
  padding: 1rem 1.3rem; text-align: left; font-size: 0.92rem;
  border-bottom: 1px solid var(--line); font-family: var(--sans);
}
.compare thead th { font-family: var(--display); font-weight: 600; font-size: 1.05rem; background: var(--purple-tint); color: var(--purple-ink); }
.compare tbody tr:last-child td { border-bottom: none; }
.compare td:first-child, .compare th:first-child { color: var(--ink-mute); font-weight: 500; }
.compare td:not(:first-child) { font-weight: 600; text-align: center; }
.compare th:not(:first-child) { text-align: center; }

/* =============================================================
   NOSOTROS PAGE
   ============================================================= */
.story { padding: var(--pad-section) 0; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
.story-photo { border-radius: var(--r-2xl); overflow: hidden; aspect-ratio: 4/3; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.08) saturate(0.92); }
.story-text p { color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.75; margin-bottom: 1.1rem; font-family: var(--sans); }

.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.value-card { text-align: center; padding: 1.5rem; }
.value-icon {
  width: 56px; height: 56px; border-radius: var(--r-md); margin: 0 auto 1rem;
  background: var(--purple-pale); color: var(--purple); display: grid; place-items: center;
}
.value-icon svg { width: 26px; height: 26px; }
.value-card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; font-family: var(--display); }
.value-card p { color: var(--ink-mute); font-size: 0.88rem; line-height: 1.6; font-family: var(--sans); }

/* =============================================================
   CONTACTO PAGE
   ============================================================= */
.contact-wrap { padding: var(--pad-section) 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.contact-channels { display: grid; gap: 1rem; margin-top: 1.6rem; }
.chan-card {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.3rem; border-radius: var(--r-lg); background: var(--paper);
  border: 1px solid var(--line); transition: transform var(--fast), box-shadow var(--fast);
  &:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(29,20,32,0.3); }
}
.chan-icon { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--purple-pale); color: var(--purple); display: grid; place-items: center; flex: none; }
.chan-icon svg { width: 20px; height: 20px; }
.chan-card h3 { font-size: 1rem; margin-bottom: 0.25rem; font-family: var(--sans); font-weight: 700; }
.chan-card p { font-size: 0.88rem; color: var(--ink-mute); font-family: var(--sans); }
.chan-card a.chan-link { color: var(--purple); font-weight: 600; font-size: 0.88rem; font-family: var(--sans); }

.form-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2xl);
  padding: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
  box-shadow: 0 30px 60px -34px rgba(29,20,32,0.28);
}
.form-row { display: grid; gap: 0.5rem; margin-bottom: 1.3rem; }
.form-row.two { grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-row label { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); font-family: var(--sans); }
.form-row input, .form-row select, .form-row textarea {
  font-family: var(--sans); font-size: 0.95rem; padding: 0.85rem 1rem;
  border-radius: var(--r-sm); border: 1.5px solid var(--line-2);
  background: var(--cream); color: var(--ink); transition: border-color var(--fast), background var(--fast);
  width: 100%;
  &:focus { outline: none; border-color: var(--purple); background: var(--paper); }
}
.form-row textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 0.78rem; color: var(--ink-faint); margin-top: 0.8rem; text-align: center; font-family: var(--sans); }

/* Trampa para bots: fuera de pantalla en vez de display:none, para que
   siga siendo "visible" a ojos de un rastreador simple y lo llene. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-alert {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 1rem 1.2rem; border-radius: var(--r-sm); margin-bottom: 1.3rem;
  font-family: var(--sans); font-size: 0.9rem; font-weight: 500; line-height: 1.5;
}
.form-alert.is-ok {
  background: color-mix(in srgb, #1e8e5a 12%, var(--paper));
  border: 1.5px solid color-mix(in srgb, #1e8e5a 35%, transparent);
  color: #146341;
}
.form-alert.is-error {
  background: color-mix(in srgb, #c0392b 10%, var(--paper));
  border: 1.5px solid color-mix(in srgb, #c0392b 32%, transparent);
  color: #8a2c20;
}

/* =============================================================
   LANDINGS DE CAMPAÑA
   Una sola salida posible: el botón de compra. Sin menú, sin
   enlaces laterales, sin nada que invite a irse a otra parte.
   ============================================================= */
.nav-landing .nav-cta { display: flex; align-items: center; gap: 1rem; }
.nav-landing-note {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-mute);
}
@media (max-width: 640px) { .nav-landing-note { display: none; } }

.lp-hero .hero-title { max-width: 17ch; }

/* Entrada del hero en CSS puro.
   El sitio principal usa GSAP para esto, pero en la landing esa librería son
   70 KB —el archivo más pesado del paquete— para animar seis elementos una
   sola vez. En una página cuyo argumento es la velocidad, no se sostiene.
   Sin JavaScript de por medio: si el CSS carga, la animación ocurre. */
@keyframes lp-entrada {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.lp-hero .eyebrow,
.lp-hero .hero-title,
.lp-hero .hero-sub,
.lp-hero .hero-cta,
.lp-hero .hero-trustline,
.lp-hero .hero-visual {
  animation: lp-entrada 0.75s var(--ease) both;
}
.lp-hero .hero-title    { animation-delay: 0.09s; }
.lp-hero .hero-sub      { animation-delay: 0.18s; }
.lp-hero .hero-cta      { animation-delay: 0.27s; }
.lp-hero .hero-trustline{ animation-delay: 0.36s; }
.lp-hero .hero-visual   { animation-delay: 0.24s; animation-duration: 0.9s; }

@media (prefers-reduced-motion: reduce) {
  .lp-hero .eyebrow, .lp-hero .hero-title, .lp-hero .hero-sub,
  .lp-hero .hero-cta, .lp-hero .hero-trustline, .lp-hero .hero-visual {
    animation: none;
  }
}

.lp-plan {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start;
  width: min(980px, 92vw); margin-inline: auto;
}
.lp-incluye {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: clamp(1.5rem, 1rem + 1.5vw, 2.4rem);
  & h3 { font-size: var(--fs-h3); margin-bottom: 1.3rem; }
}
.lp-list {
  list-style: none; display: grid; gap: 1.1rem;
  & li {
    font-family: var(--sans); font-size: 0.95rem; line-height: 1.65;
    color: var(--ink-soft); padding-left: 1.7rem; position: relative;
    &::before {
      content: ""; position: absolute; left: 0; top: 0.5em;
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--purple);
    }
    & b { color: var(--ink); font-weight: 600; }
  }
}
.lp-nota {
  margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: 0.86rem; color: var(--ink-mute); line-height: 1.6;
}
/* El precio no se compara con otro hosting, se compara con el costo del
   tráfico. Esta nota deja la cuenta planteada sin ponerle cifras a nadie. */
.lp-cuenta {
  margin-top: 1.2rem; padding: 1rem 1.2rem;
  background: var(--purple-tint); border-radius: var(--r-md);
  & p { font-family: var(--sans); font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); }
  & b { color: var(--purple-ink); }
}

/* -------------------------------------------------------------
   Carrusel de testimonios
   Desplazamiento nativo con scroll-snap: funciona con el dedo, con
   trackpad y con teclado sin código extra. Los botones solo empujan
   ese mismo scroll, así que si el JS falla sigue siendo usable.
   ------------------------------------------------------------- */
.testi-carousel { position: relative; }
.testi-track {
  display: flex; gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
  padding-bottom: 0.5rem;
  &::-webkit-scrollbar { display: none; }
  & > .t-card {
    flex: 0 0 min(380px, 82vw); scroll-snap-align: start;
  }
}
.testi-nav {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  margin-top: 2rem;
}
.testi-btn {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--on-band);
  border: 1px solid rgba(246,240,228,0.28);
  transition: background var(--fast), border-color var(--fast), opacity var(--fast);
  & svg { width: 18px; height: 18px; }
  &:hover { background: rgba(246,240,228,0.1); border-color: rgba(246,240,228,0.5); }
  &[disabled] { opacity: 0.3; cursor: default; }
}
.testi-dots { display: flex; gap: 0.5rem; }
.testi-dot {
  width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(246,240,228,0.28); cursor: pointer;
  transition: background var(--fast), width var(--fast);
  &.is-active { background: var(--purple-lift); width: 20px; border-radius: 4px; }
}
.testi-links {
  display: flex; justify-content: center; gap: 0.8rem;
  flex-wrap: wrap; margin-top: 2.2rem;
}
/* Botón de contorno sobre banda oscura: el borde y el texto claros, sin
   repetir el estilo en línea en cada página. */
.btn-on-band {
  border-color: rgba(246,240,228,0.3); color: var(--on-band);
  &:hover { background: rgba(246,240,228,0.1); border-color: rgba(246,240,228,0.55); color: #fff; }
}

/* Tres pasos en una rejilla de cuatro columnas dejaban un hueco al final y
   todo se veía descentrado. Con esta variante ocupan el ancho que les toca. */
.steps-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* El botón que cierra la tarjeta de plan: el paso que queremos que se dé.
   Se le da aire vertical propio y un halo que lo separa del resto. */
.btn-destacado {
  margin-top: 1.6rem; padding-top: 1.15rem; padding-bottom: 1.15rem;
  font-size: 1rem;
  box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--purple) 75%, transparent);
  &:hover { transform: translateY(-2px); }
}
/* Se escribe con el padre delante a proposito: '.cta-final-card p' tiene mas
   especificidad que '.cta-fine' a secas y le estaba anulando el margen y el
   tamano de letra, dejando la linea fina pegada al boton y del mismo cuerpo
   que el parrafo de arriba. */
.cta-final-card .cta-fine {
  margin: 1.8rem auto 0; max-width: 52ch;
  font-family: var(--mono); font-size: 0.76rem; line-height: 1.6;
  letter-spacing: 0.04em; color: var(--on-band-mute);
}
/* Aviso legal del pie de la landing: mas discreto todavia que la linea fina */
.cta-final-card .cta-aviso {
  margin: 1rem auto 0; max-width: 60ch;
  font-family: var(--sans); font-size: 0.74rem; line-height: 1.6;
  color: rgba(246, 240, 228, 0.4);
}

/* Todo el pie de la landing centrado en una sola columna. El logo se salía
   porque .foot-brand img lo deja como bloque y el text-align del padre no
   alcanza a un bloque: aquí se centra con márgenes propios. */
/* Todo el pie de la landing centrado en una sola columna. El logo se salía
   porque .foot-brand img lo deja como bloque y el text-align del padre no
   alcanza a un bloque: aquí se centra con márgenes propios.
   Los textos ocupan casi todo el ancho útil: encajonados en 52ch quedaban
   como una columna estrecha en medio de mucho vacío. */
.foot-landing {
  text-align: center;
  & > .shell { display: flex; flex-direction: column; align-items: center; }
  & img {
    display: block; height: 26px; width: auto;
    filter: brightness(0) invert(1); margin: 0 auto 1.4rem;
  }
  & .foot-desc {
    max-width: min(90ch, 100%); margin-inline: auto;
    font-size: 0.92rem; line-height: 1.7;
  }
}
.foot-legal {
  font-size: 0.76rem; line-height: 1.75; color: rgba(246,240,228,0.42);
  max-width: min(128ch, 100%); margin: 1.4rem auto 0; font-family: var(--sans);
}

@media (max-width: 860px) {
  .lp-plan { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================
   PÁGINA DE ENLACES (/go)
   La que va en la biografía de Instagram: se llega desde el móvil,
   con una intención concreta y poca paciencia. Una columna, botones
   grandes y nada que distraiga.
   ============================================================= */
.bio { padding: clamp(2rem, 1rem + 3vw, 4rem) 0 clamp(3rem, 2rem + 4vw, 5rem); }
.bio-head {
  text-align: center; margin-bottom: clamp(2rem, 1.2rem + 2.5vw, 3rem);
  & h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.8rem); max-width: 18ch; margin: 1.2rem auto 0; }
  & p {
    font-family: var(--sans); color: var(--ink-soft); font-size: 1rem;
    line-height: 1.65; max-width: 46ch; margin: 0.9rem auto 0;
  }
}
.bio-av {
  display: grid; place-items: center; margin-inline: auto;
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  & img { width: 58px; height: auto; }
}
.bio-stars {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.1rem;
  font-family: var(--sans); font-size: 0.84rem; color: var(--ink-mute);
  & .stars { color: var(--gold); letter-spacing: 0.06em; }
}

.bio-links { display: grid; gap: 0.85rem; }
.bio-link {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.05rem 1.3rem;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--fast), box-shadow var(--fast), border-color var(--fast);
  &:hover {
    transform: translateY(-3px); border-color: var(--purple);
    box-shadow: 0 22px 44px -26px rgba(29,20,32,0.35);
  }
  &:hover .arr { transform: translateX(4px); }
  & .ic {
    flex: none; display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: var(--r-sm);
    background: var(--purple-tint); color: var(--purple);
    & svg { width: 20px; height: 20px; }
  }
  & .arr { margin-left: auto; color: var(--purple); transition: transform var(--fast); }
}
.bio-txt {
  display: flex; flex-direction: column; gap: 0.15rem; min-width: 0;
  & b { font-family: var(--sans); font-size: 0.98rem; color: var(--ink); }
  & small { font-family: var(--sans); font-size: 0.83rem; color: var(--ink-mute); line-height: 1.45; }
}

.bio-social { text-align: center; margin-top: clamp(2rem, 1.2rem + 2vw, 3rem); }
.bio-social-label {
  font-family: var(--mono); font-size: var(--fs-label); color: var(--ink-mute);
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1rem;
}
.bio-social-links {
  display: flex; justify-content: center; gap: 0.8rem;
  & a {
    display: grid; place-items: center; width: 46px; height: 46px;
    border-radius: 50%; border: 1px solid var(--line-2); color: var(--ink-soft);
    transition: background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast);
    &:hover { background: var(--purple); border-color: var(--purple); color: #fff; transform: translateY(-3px); }
    & svg { width: 19px; height: 19px; }
  }
}

/* Video incrustado en articulos migrados: relacion 16:9 sin salto de diseño */
.video-embed {
  position: relative; aspect-ratio: 16 / 9; margin: 2rem 0;
  border-radius: var(--r-lg); overflow: hidden; background: var(--ink);
  & iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
}

/* =============================================================
   REVEAL
   ============================================================= */
/* Kept short on purpose. A long fade plus a long scroll glide means a section
   can still be mid-animation when it has already left the screen — you arrive
   at content that never finished appearing. 0.6s lands before that happens. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--ease) var(--rd, 0s), transform 0.6s var(--ease) var(--rd, 0s); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 980px) {
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gap, 1.5rem) 1rem;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { width: 100%; padding: 0.8rem 0; }
  .nav-drop { width: 100%; }
  .nav-drop-trigger { width: 100%; justify-content: space-between; padding: 0.8rem 0; }
  .nav-drop-menu {
    position: static; transform: none; box-shadow: none; border: none;
    padding: 0 0 0.5rem 0.8rem; min-width: 0; width: 100%;
    display: none; opacity: 1; visibility: visible; pointer-events: auto;
  }
  .nav-drop.is-open .nav-drop-menu { display: block; }
  .nav-toggle { display: flex; }

  /* At 375px the header ran brand + login + CTA + menu button into 345px:
     9px of clearance, and the menu button squeezed from 40px down to 27px.
     Below this breakpoint the header login disappears and its twin inside the
     dropdown takes over. Two links in the markup rather than one moved by JS,
     so a failed script can never leave the page with no way in. The footer
     link covers anyone who never opens the menu. */
  .nav-cta > .btn-login { display: none; }
  .nav-login-mobile {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; margin-top: 0.7rem; padding: 0.85rem 1rem;
    border: 1px solid var(--line-2); border-radius: var(--r-pill);
    background: var(--cream); color: var(--ink); font-size: 0.9rem; font-weight: 600;
    &::after { content: none; }
    &:hover { background: var(--cream-2); }
    & svg { width: 16px; height: 16px; opacity: 0.6; }
  }
  .hero-top { grid-template-columns: 1fr; }
  .hero-visual { max-width: 420px; margin-inline: auto; }
  .aud-grid, .testi-grid, .price-grid, .values-grid { grid-template-columns: 1fr; }
  .price-card.featured { transform: none; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .stat-grid.cols-3 { grid-template-columns: 1fr; }
  .stat-deco { display: none; }
  .pay-band, .story-grid, .contact-grid, .infra-inner { grid-template-columns: 1fr; }
  .infra-list { grid-template-columns: 1fr; }
  .steps-grid, .editorial-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-grid, .blog-featured { grid-template-columns: 1fr; }
  /* minmax(0,1fr), not 1fr — a bare fr track takes its content's min-content
     width (the legal tables) and overflows the shell instead of shrinking. */
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { display: none; }
  .legal-toc-mobile { display: block; }
  .legal-body { max-width: none; }
  /* Wide legal tables scroll inside their own box rather than the page. */
  .legal-body table { display: block; overflow-x: auto; white-space: nowrap; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .compare { -webkit-overflow-scrolling: touch; }
}
@media (max-width: 640px) {
  .form-row.two { grid-template-columns: 1fr; }
  .pay-methods { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .steps-grid, .editorial-grid, .blog-grid { grid-template-columns: 1fr; }
  /* Keep the floating hero badges inside the viewport — they overflowed at 375px */
  .hero-badge.b1 { top: -3%; left: 0; }
  .hero-badge.b2 { bottom: 6%; right: 0; }
  .hero-badge { padding: 0.7rem 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-badge, .stat-band::before { animation: none; }
  .reveal { transition: none; }
}