/* ═══════════════════════════════════════════════════════════════════════════
   Sup91 — landing pública.

   Idea que ordena todo el diseño: lo OSCURO es Sup91 (la máquina) y lo CLARO
   es lo que te entrega (tu página, tu negocio). Por eso las secciones alternan
   fondo, y el cambio de fondo significa algo — no es decoración.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* La página ya es oscura. Sin esto, el "modo oscuro forzado" que traen algunos
   * navegadores de celular la vuelve a invertir por su cuenta y deja las rayas
   * blancas del menú en negro sobre el recuadro negro: invisibles. */
  color-scheme: dark;

  /* ── El gris no se hereda, se elige ──
   *
   * Los fondos tenían una desviación morada (#0B0A0F, #12101A, líneas #2B2639). En
   * pantalla se lee como "plantilla de startup": el morado sobre negro es lo que sale
   * por defecto cuando nadie decidió el neutro. Ahora son grises neutros con una pizca
   * de calidez, del lado del oro de la marca, que es lo que hace que se vean escogidos.
   *
   * El amarillo NO cambia de identidad —es la marca, el 91 del logo, el botón de la
   * app— pero deja de ser exactamente #EAB308, que es el amarillo que trae Tailwind de
   * fábrica. Un poco más hondo y más oro: se reconoce igual y ya no delata la paleta. */
  --fondo:      #0E0D0C;
  --fondo-2:    #141311;
  --sup:        #1A1917;
  --sup-2:      #211F1D;
  --linea:      #2A2825;
  --ink:        #F4F1EA;
  --ink-suave:  #A8A39A;
  --ink-tenue:  #837E74;
  --acc:        #E0A210;
  --acc-txt:    #E8AE1E;
  --acc-hondo:  #8F6708;
  --acc-vidrio: rgba(224, 162, 16, .12);

  /* El claro era #F3EEE3, la crema tibia que sale en casi toda página generada con IA.
   * Este es un papel frío, de imprenta: sigue haciendo el contraste con lo oscuro
   * —que es lo que significa algo aquí— sin la cara de plantilla. */
  --papel:      #EFEEEA;
  --papel-2:    #E2E0DA;
  --papel-ink:  #14130F;
  --papel-suave:#57544D;

  /* Bricolage Grotesque es, ahora mismo, la tipografía de los titulares generados.
   * Archivo dice lo mismo con menos moda: es una grotesca de oficio, más recta y más
   * seria, y aguanta mejor los pesos gruesos sin verse blanda. El texto se queda en
   * Instrument Sans para no separar la landing de la aplicación. */
  --display: 'Archivo', 'Instrument Sans', system-ui, sans-serif;
  --texto:   'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Se acabaron las pastillas ──
   *
   * Todo lo interactivo era un óvalo perfecto: los botones, las fichas, los
   * selectores. El redondeo total es la firma de la plantilla amable; una esquina
   * corta y constante se lee como algo construido a propósito.
   *
   * `--r-pastilla` existe para lo que SÍ debe ser redondo: los puntitos de estado y
   * los avatares, donde el círculo es la forma correcta, no un adorno. */
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 12px;
  --r-boton: 6px;
  --r-pastilla: 999px;
  --caja: 1180px;
  --borde-suave: 1px solid var(--linea);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--ink);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--acc); color: #17130A; }

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

/* Existe para lectores de pantalla y buscadores, no se ve. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--acc); color: #17130A; padding: 12px 18px;
  font-weight: 600; border-radius: 0 0 var(--r-sm) 0;
}
.saltar:focus { left: 0; }

.caja {
  width: 100%;
  max-width: var(--caja);
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Tipografía compartida ────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0;
  text-wrap: balance;
}

.tit {
  font-size: clamp(2.1rem, 8.2vw, 3.6rem);
  margin-bottom: 14px;
}

.sub {
  color: var(--ink-suave);
  font-size: 1.0625rem;
  max-width: 46ch;
  margin: 0 0 34px;
}

em { font-style: normal; color: var(--acc-txt); }

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-tenue);
  margin: 0 0 18px;
}
/* El punto era un círculo que parpadeaba sin parar. Un punto que late no dice nada —
 * no hay nada en vivo que anunciar— y el parpadeo constante es de los detalles que
 * hacen que una página se lea como plantilla. Ahora es una marca fija y corta que
 * ancla la etiqueta a la línea del texto, sin pedir atención. */
.etiqueta .punto {
  width: 14px; height: 2px; border-radius: 0;
  background: var(--acc);
  box-shadow: none;
}

/* El latido se queda SOLO donde significa algo: el punto del paso que se está
 * ejecutando en la demo interactiva. Ahí el parpadeo dice "esto está pasando ahora".
 * En la etiqueta no decía nada y por eso se quitó. */
@keyframes latido { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ── Botones ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--texto);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-boton);
  padding: 13px 24px;
  cursor: pointer;
  transition: transform .14s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:active { transform: translateY(1px); }

.btn-acc { background: var(--acc); color: #17130A; }
.btn-acc:hover { background: #f6c422; }

.btn-linea { background: transparent; color: var(--ink); border-color: var(--linea); }
.btn-linea:hover { border-color: var(--ink-tenue); background: rgba(255,255,255,.03); }

.btn-lg { padding: 16px 30px; font-size: 1.02rem; }
.btn-sm { padding: 9px 17px; font-size: .87rem; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */

.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: rgba(14, 13, 12, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
/* Al bajar se vuelve opaca: sobre las secciones de fondo claro, una cabecera
 * translúcida se aclaraba y el logo y las rayas del menú se perdían. */
.cabecera.pegada {
  border-bottom-color: var(--linea);
  background: rgba(14, 13, 12, .96);
}

.cabecera-fila {
  display: flex; align-items: center; gap: 14px;
  height: 62px;
}

.marca {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -.045em;
  text-decoration: none;
  margin-right: auto;
}
.marca span { color: var(--acc); }

/* El menú de celular siempre está en el DOM y solo cambia de opacidad y posición:
 * así puede animarse de verdad. Con display:none no hay transición posible. */
.nav {
  display: flex; flex-direction: column; gap: 2px;
  position: absolute; inset: 62px 0 auto;
  /* Opaco de verdad: con transparencia el titular del hero se leía por detrás
   * de los enlaces del menú y no se entendía ninguno de los dos. */
  background: #141311;
  border-bottom: var(--borde-suave);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  padding: 8px 20px 18px;
  opacity: 0;
  transform: translateY(-12px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, transform .3s cubic-bezier(.22,.68,.34,1), visibility 0s linear .3s;
}
.nav.abierto {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .22s ease, transform .3s cubic-bezier(.22,.68,.34,1), visibility 0s;
}

.nav a {
  text-decoration: none;
  color: var(--ink-suave);
  font-weight: 500;
  padding: 13px 0; font-size: 1.05rem;
  border-bottom: 1px solid var(--linea);
  /* Cada renglón entra un pelín después que el anterior: se siente que se despliega. */
  opacity: 0; transform: translateY(-6px);
  transition: color .16s ease, opacity .26s ease, transform .26s cubic-bezier(.22,.68,.34,1);
}
.nav a:last-child { border-bottom: 0; }
.nav a:hover { color: var(--ink); }
.nav.abierto a { opacity: 1; transform: none; }
.nav.abierto a:nth-child(1) { transition-delay: .04s; }
.nav.abierto a:nth-child(2) { transition-delay: .08s; }
.nav.abierto a:nth-child(3) { transition-delay: .12s; }
.nav.abierto a:nth-child(4) { transition-delay: .16s; }

.nav-cta { display: none; }

/* Recuadro negro sólido con las tres rayas blancas al centro. El borde claro está
 * para que el recuadro se distinga cuando la cabecera también es casi negra. */
.menu-btn {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 46px; height: 42px; padding: 0 10px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-sm);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .55);
  transition: border-color .18s ease;
}
.menu-btn:hover { border-color: rgba(255, 255, 255, .5); }
/* Blanco literal, no un token: los tokens se reescriben en las secciones claras
 * y las rayas se volvían invisibles al pasar por ellas. Y 3px, no 2: a 2px sobre
 * un fondo casi negro se leían como una sombra, no como un botón.
 *
 * flex: none y min-height son a propósito: como el botón es un contenedor flex
 * en columna, algunos navegadores de celular encogen los hijos hasta dejarlos en
 * cero de alto — y entonces solo se ve el recuadro negro, sin rayas. */
.menu-btn span {
  display: block;
  flex: 0 0 auto;
  width: 24px;
  height: 3px;
  min-height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: transform .26s cubic-bezier(.22,.68,.34,1), opacity .18s ease;
}
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ── Secciones ────────────────────────────────────────────────────────── */

/* La cabecera está fija: sin esto, al saltar a una sección el título queda tapado. */
section, [id] { scroll-margin-top: 78px; }

section { padding: 76px 0; position: relative; }

.papel {
  --ink: var(--papel-ink);
  --ink-suave: var(--papel-suave);
  --ink-tenue: #7A756C;
  --linea: rgba(20, 19, 15, .13);
  --acc-txt: #96700A;
  background: var(--papel);
  color: var(--ink);
}
.etiqueta.oscura { color: #7A756C; }

/* ── Marco de teléfono ────────────────────────────────────────────────── */

.tel {
  width: min(272px, 74vw);
  margin: 0 auto;
  position: relative;
}
.tel::after {                       /* sombra difusa, para que no flote plano */
  content: ""; position: absolute; inset: auto 8% -18px; height: 36px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 72%);
  filter: blur(6px); z-index: -1;
}
/* Misma proporción que la grabación (430x932): si el marco fuera 9:16, recortaría
 * la parte de abajo de la pantalla, que es justo donde están los botones. */
.tel-marco {
  aspect-ratio: 430 / 932;
  border-radius: 32px;
  padding: 7px;
  background: linear-gradient(160deg, #35322D, #171613 60%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 26px 60px rgba(0,0,0,.55);
  overflow: hidden;
}
.tel-marco > * {
  width: 100%; height: 100%;
  border-radius: 26px;
  object-fit: cover;
  object-position: top center;
  background: #0F0E0C;
}

/* ── 01 · Hero ────────────────────────────────────────────────────────── */

.hero { padding: 30px 0 62px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; z-index: -1;
  top: -180px; left: 50%; transform: translateX(-50%);
  width: 780px; height: 620px;
  background: radial-gradient(ellipse at center, rgba(224,162,16,.07), transparent 62%);
  pointer-events: none;
}
.hero-caja { display: grid; gap: 40px; }

.hero h1 {
  font-size: clamp(2.5rem, 11.6vw, 4.6rem);
  margin-bottom: 15px;
}
.hero h1 .num {
  color: var(--acc);
  font-variant-numeric: tabular-nums;
}

.hero-linea {
  color: var(--ink-suave);
  font-size: 1.09rem;
  max-width: 40ch;
  margin: 0 0 28px;
}
.hero-linea strong { color: var(--ink); font-weight: 600; }

.hero-btns { display: flex; flex-wrap: wrap; gap: 11px; }
.hero-btns .btn { flex: 1 1 auto; min-width: 165px; }

.hero-pie {
  margin: 16px auto 0;
  max-width: 30ch;
  text-align: center;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ink-tenue);
}

/* El medidor de 91 segundos: se mueve con el video, no es un adorno estático. */
.medidor { margin: 22px auto 0; max-width: 272px; }
.medidor-fila {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: .8rem;
  color: var(--ink-tenue);
}
.medidor-num {
  color: var(--acc); font-size: 1.15rem; font-weight: 700;
  font-variant-numeric: tabular-nums; min-width: 2.2ch;
}
.medidor-uni { margin-right: 2px; }
.medidor-barra {
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--linea); overflow: hidden;
}
.medidor-barra i { display: block; height: 100%; width: 0; background: var(--acc); border-radius: 2px; }

/* ── 02 · Problema ────────────────────────────────────────────────────── */

.prob { background: var(--fondo-2); }
.prob .tit, .prob .sub { text-align: center; margin-left: auto; margin-right: auto; }

.prob-mapa {
  display: grid; gap: 20px; justify-items: center;
  margin-top: 10px;
}

.prob-rotulo {
  display: block;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-tenue);
  margin-bottom: 14px; text-align: center;
}
.prob-rotulo.acc { color: var(--acc); }

.prob-antes { width: 100%; max-width: 420px; }
.prob-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prob-lista li {
  border: var(--borde-suave); border-radius: var(--r);
  padding: 13px 16px;
  color: var(--ink-suave); font-size: .95rem;
  background: rgba(255,255,255,.015);
  position: relative;
}
/* Cada renglón un poco corrido: son cinco cosas sueltas, no una lista ordenada. */
.prob-lista li:nth-child(2) { margin-left: 16px; }
.prob-lista li:nth-child(3) { margin-left: 32px; }
.prob-lista li:nth-child(4) { margin-left: 16px; }
.prob-lista li:nth-child(5) { margin-left: 40px; border-style: dashed; }

.prob-flecha { color: var(--ink-tenue); }

.prob-despues { width: 100%; max-width: 420px; text-align: center; }
/* Es un enlace, no un adorno: aquí es donde se entiende la idea, así que aquí
 * mismo se puede uno apuntar. */
.prob-uno {
  display: block; text-decoration: none; color: var(--ink);
  border: 1px solid var(--acc); border-radius: var(--r);
  background: var(--acc-vidrio);
  padding: 22px 18px 18px;
  transition: transform .2s cubic-bezier(.22,.68,.34,1), background .2s ease, box-shadow .2s ease;
}
.prob-uno:hover {
  transform: translateY(-3px);
  background: rgba(234, 179, 8, .2);
  box-shadow: none;
}
.prob-uno:active { transform: translateY(0); }
.prob-uno-marca {
  display: block;
  font-family: var(--display); font-weight: 800; font-size: 2.4rem;
  letter-spacing: -.045em;
}
.prob-uno-marca span { color: var(--acc); }
.prob-uno-pie {
  display: block; margin-top: 8px;
  font-size: .86rem; font-weight: 600; color: var(--acc);
}
.prob-uno-pie span { display: inline-block; transition: transform .2s ease; }
.prob-uno:hover .prob-uno-pie span { transform: translateX(4px); }
.prob-despues p { margin: 12px 0 0; color: var(--ink-suave); }

/* ── 03 · La idea ─────────────────────────────────────────────────────── */

.idea { padding: 90px 0; }
.idea-caja { max-width: 780px; }
.idea-frase {
  font-size: clamp(2.1rem, 8.6vw, 3.9rem);
  margin-bottom: 26px;
}
.idea-texto {
  color: var(--ink-suave);
  font-size: 1.06rem;
  max-width: 52ch;
  margin: 0;
}
.idea-texto strong {
  display: block; margin-top: 6px;
  color: var(--ink); font-weight: 600;
}
.word-nowrap { white-space: nowrap; }

/* ── 04 · Resultado ───────────────────────────────────────────────────── */

.res-vista { position: relative; margin-top: 8px; }

.navegador {
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(20, 19, 15,.12);
  box-shadow: 0 22px 60px rgba(20, 19, 15, .18);
}
.navegador-barra {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  background: var(--papel-2);
  border-bottom: 1px solid rgba(20, 19, 15,.09);
}
.navegador-barra > span { width: 9px; height: 9px; border-radius: 50%; background: rgba(20, 19, 15,.18); }
.navegador-barra em {
  font-family: var(--mono); font-style: normal;
  font-size: .68rem; color: #7A756C;
  margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.navegador img { width: 100%; height: auto; }

.res-cel {
  width: 148px;
  margin: -54px 0 0 auto;
  border-radius: 20px; padding: 5px;
  background: linear-gradient(160deg, #3A3730, #1C1A17);
  box-shadow: 0 16px 38px rgba(20, 19, 15,.34);
  position: relative;
}
.res-cel img { border-radius: 16px; width: 100%; height: auto; }

.res-pie {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  margin-top: 26px;
  font-size: .92rem; color: var(--ink-suave);
}
.enlace-vivo {
  font-weight: 600; color: var(--papel-ink);
  text-decoration: underline; text-decoration-color: var(--acc);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
  transition: color .16s ease, text-underline-offset .16s ease;
}
.enlace-vivo:hover { color: var(--acc-txt); text-underline-offset: 6px; }

.res-aviso {
  margin: 14px 0 0; font-size: .8rem; line-height: 1.5;
  color: var(--ink-tenue); max-width: 62ch;
}

/* ── 05 · Capacidades ─────────────────────────────────────────────────── */

.caps-tabs {
  display: flex; gap: 8px;
  margin: 6px 0 30px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  /* En celular las cuatro pestañas no caben: el desvanecido del borde derecho
   * avisa que hay más, en vez de dejar la última cortada sin explicación. */
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
  mask-image: linear-gradient(to right, #000 88%, transparent);
}
.caps-tabs::-webkit-scrollbar { display: none; }
.caps-tabs button {
  flex: 0 0 auto;
  font-family: var(--texto); font-size: .92rem; font-weight: 600;
  color: var(--ink-suave);
  background: transparent;
  border: var(--borde-suave); border-radius: var(--r-boton);
  padding: 10px 19px; cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.caps-tabs button:hover { color: var(--ink); }
.caps-tabs button.activo {
  color: #17130A; background: var(--acc); border-color: var(--acc);
}

.caps-panel { display: grid; gap: 34px; }
.caps-panel[hidden] { display: none; }
/* Al cambiar de pestaña el panel entra, no aparece de golpe. */
.caps-panel:not([hidden]) { animation: panelEntra .34s cubic-bezier(.22,.68,.34,1) both; }
@keyframes panelEntra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.caps-cuerpo h3 { font-size: clamp(1.5rem, 6vw, 2.05rem); margin-bottom: 12px; }
.caps-cuerpo > p { color: var(--ink-suave); margin: 0 0 20px; max-width: 44ch; }

.caps-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.caps-lista li {
  position: relative; padding-left: 26px;
  color: var(--ink-suave); font-size: .95rem;
}
.caps-lista li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 12px; height: 2px; border-radius: 2px; background: var(--acc);
}

.caps-nota {
  margin: 18px 0 0; font-size: .8rem; color: var(--ink-tenue);
  border-left: 2px solid var(--linea); padding-left: 12px;
}

/* ── 06 · Microdemos ──────────────────────────────────────────────────────
   Cada una es una ventanita de Sup91: mismos bordes, mismos radios, mismo
   ámbar. Nada aquí llama a la app ni gasta nada — son datos preparados. */

.demos { background: var(--fondo-2); }

.demo {
  border: var(--borde-suave); border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .015);
  padding: 24px 20px;
  margin-bottom: 18px;
}

.demo-head { display: flex; gap: 14px; margin-bottom: 20px; }
.demo-num {
  font-family: var(--mono); font-size: .78rem; font-weight: 700;
  color: var(--acc); padding-top: 5px; flex: none;
}
.demo-head h3 { font-size: clamp(1.25rem, 4.6vw, 1.55rem); margin-bottom: 6px; }
.demo-head p { margin: 0; font-size: .92rem; color: var(--ink-suave); max-width: 52ch; }

.demo-cuerpo { display: grid; gap: 14px; }

.demo-panel {
  border: var(--borde-suave); border-radius: var(--r);
  background: var(--sup);
  padding: 16px;
}

.demo-etiqueta,
.demo-etiqueta-min {
  display: block;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-tenue);
  margin-bottom: 12px;
}
.demo-etiqueta-min { margin-bottom: 6px; }

.demo-campos { display: grid; gap: 8px; margin-bottom: 16px; }
.demo-campo {
  display: grid; gap: 2px;
  border: 1px solid var(--linea); border-radius: var(--r-sm);
  padding: 9px 12px;
}
.demo-campo span { font-size: .72rem; color: var(--ink-tenue); }
.demo-campo b { font-size: .9rem; font-weight: 500; color: var(--ink); }

.demo-btn { width: 100%; }

/* Los pasos se encienden uno por uno: es el proceso, no una lista. */
/* Los display: grid/flex de aquí abajo le ganan a [hidden] si no se dice lo
 * contrario: por eso la lista de pasos se veía en gris antes de tocar el botón. */
.demo-pasos[hidden],
.demo-espera[hidden],
.demo-salida[hidden],
.demo-editor-vacio[hidden] { display: none; }

.demo-pasos { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.demo-pasos li {
  display: flex; align-items: center; gap: 10px;
  font-size: .89rem; color: var(--ink-tenue);
  opacity: .35;
  transition: opacity .3s ease, color .3s ease;
}
.demo-pasos li.activo { opacity: 1; color: var(--ink); }
.demo-pasos li.hecho { opacity: 1; color: var(--ink-suave); }
.demo-punto {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  border: 2px solid var(--linea);
  transition: background .3s ease, border-color .3s ease;
}
.demo-pasos li.activo .demo-punto { border-color: var(--acc); background: var(--acc); animation: latido 1.1s ease-in-out infinite; }
.demo-pasos li.hecho .demo-punto { border-color: var(--acc); background: var(--acc); animation: none; }

.demo-resultado {
  border-radius: var(--r); overflow: hidden;
  border: var(--borde-suave); background: #fff;
  animation: entra .5s cubic-bezier(.22,.68,.34,1) both;
}
.demo-navegador {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 11px; background: var(--papel-2);
}
.demo-navegador > span { width: 8px; height: 8px; border-radius: 50%; background: rgba(20, 19, 15,.18); }
.demo-navegador em {
  font-family: var(--mono); font-style: normal; font-size: .66rem; color: #7A756C; margin-left: 6px;
}
.demo-resultado img { width: 100%; height: auto; display: block; }

.demo-cierre {
  margin: 16px 0 0; font-size: .88rem; line-height: 1.6; color: var(--ink-suave);
  border-left: 2px solid var(--acc); padding-left: 12px;
}
.demo-cierre[hidden] { display: none; }

/* ── Estudio ── */
.demo-opciones { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.demo-opcion {
  flex: 1 1 auto;
  font-family: var(--texto); font-size: .9rem; font-weight: 600;
  color: var(--ink-suave); background: transparent;
  border: var(--borde-suave); border-radius: var(--r-boton);
  padding: 10px 18px; cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.demo-opcion:hover { color: var(--ink); }
.demo-opcion.activo { color: #17130A; background: var(--acc); border-color: var(--acc); }

.demo-entrada { border-radius: var(--r-sm); overflow: hidden; margin-bottom: 14px; }
.demo-entrada img { width: 100%; height: auto; display: block; }
.demo-texto-entrada {
  border: 1px dashed var(--linea); padding: 13px;
}
.demo-texto-entrada p { margin: 0; font-size: .9rem; color: var(--ink); line-height: 1.55; }

.demo-espera {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: 190px; border: 1px dashed var(--linea);
  font-size: .88rem; color: var(--ink-tenue);
}
.demo-cargando {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--linea); border-top-color: var(--acc);
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ── Publicaciones automáticas ── */
.demo-control {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px; font-size: .93rem; color: var(--ink-suave);
}
.demo-stepper {
  display: inline-flex; align-items: center; gap: 2px;
  border: var(--borde-suave); border-radius: var(--r-boton); overflow: hidden;
}
.demo-stepper button {
  width: 32px; height: 32px; border: 0; background: transparent;
  color: var(--ink); font-size: 1.05rem; cursor: pointer;
  transition: background .16s ease;
}
.demo-stepper button:hover { background: rgba(255,255,255,.06); }
.demo-stepper b {
  min-width: 26px; text-align: center;
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink);
}

.demo-select {
  font-family: var(--texto); font-size: .92rem; color: var(--ink);
  background: var(--sup-2); border: var(--borde-suave); border-radius: var(--r-sm);
  padding: 8px 12px; cursor: pointer;
}

.demo-seg {
  display: inline-flex; gap: 3px; flex-wrap: wrap;
  border: var(--borde-suave); border-radius: var(--r-boton); padding: 3px;
}
.demo-seg button {
  font-family: var(--texto); font-size: .82rem; font-weight: 600;
  color: var(--ink-suave); background: transparent; border: 0; border-radius: var(--r-boton);
  padding: 7px 14px; cursor: pointer;
  transition: color .16s ease, background .16s ease;
}
.demo-seg button.activo { color: #17130A; background: var(--acc); }

.demo-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.demo-agenda li {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--linea); border-radius: var(--r-sm);
  padding: 11px 13px;
  animation: entra .35s cubic-bezier(.22,.68,.34,1) both;
}
.demo-agenda-cuando { flex: 1 1 auto; font-size: .9rem; color: var(--ink); }
.demo-agenda-cuando small { display: block; font-size: .75rem; color: var(--ink-tenue); margin-top: 2px; }
.demo-agenda-cuantas {
  font-family: var(--mono); font-size: .74rem; color: var(--ink-tenue);
  border: 1px solid var(--linea); border-radius: var(--r-boton); padding: 3px 9px; white-space: nowrap;
}

/* ── Una publicación ── */
.demo-ig { border: var(--borde-suave); border-radius: var(--r); overflow: hidden; background: var(--fondo-2); }
.demo-ig-top { display: flex; align-items: center; gap: 9px; padding: 11px 13px; }
.demo-ig-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--acc), var(--acc-hondo));
  color: #17130A; font-weight: 800; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
}
.demo-ig-user { flex: 1 1 auto; font-size: .88rem; font-weight: 600; }
.demo-ig img { width: 100%; height: auto; display: block; }
.demo-ig-acciones { display: flex; gap: 14px; padding: 11px 13px 5px; color: var(--ink-suave); }
.demo-ig-acciones svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.demo-ig-caption { margin: 0 13px 8px; font-size: .89rem; line-height: 1.55; }
.demo-ig-hashtags { margin: 0 13px 8px; font-size: .85rem; color: var(--acc); word-break: break-word; }
.demo-ig-fecha { margin: 0 13px 14px; font-size: .74rem; color: var(--ink-tenue); }

.demo-editor-campo { display: grid; gap: 6px; margin-bottom: 14px; }
.demo-editor-campo span { font-size: .78rem; font-weight: 600; color: var(--ink-suave); }
.demo-editor-campo textarea {
  font-family: var(--texto); font-size: .9rem; line-height: 1.5; color: var(--ink);
  background: var(--sup-2); border: var(--borde-suave); border-radius: var(--r-sm);
  padding: 11px 13px; resize: vertical;
}
.demo-editor-campo textarea:focus { outline: none; border-color: var(--acc); }
.demo-editor-vacio { display: grid; gap: 12px; align-content: center; }
.demo-nota { margin: 0; font-size: .78rem; color: var(--ink-tenue); }

/* ── Estadísticas ── */
.demo-stats-controles { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.demo-stats-cifra { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.demo-stats-cifra b {
  font-family: var(--display); font-weight: 800; font-size: 2.5rem;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.demo-stats-cifra > span { font-size: .9rem; color: var(--ink-suave); }
.demo-stats-cambio {
  font-size: .82rem !important; font-weight: 600;
  border-radius: var(--r-boton); padding: 3px 10px;
}
.demo-stats-cambio.sube { color: #7CD992; background: rgba(124, 217, 146, .12); }
.demo-stats-cambio.baja { color: #F19393; background: rgba(241, 147, 147, .12); }

/* gap y min-width en 1px: con 90 barras y 2px de cada cosa, la gráfica no cabía
 * en una pantalla de celular y empujaba la página de lado. */
.demo-stats-grafica {
  display: flex; align-items: flex-end; gap: 1px;
  height: 120px; margin-bottom: 6px; overflow: hidden;
}
.demo-stats-barra {
  flex: 1 1 0; min-width: 1px;
  background: var(--acc); border-radius: 2px 2px 0 0;
  transition: height .4s cubic-bezier(.22,.68,.34,1);
}
.demo-stats-pies {
  display: flex; justify-content: space-between;
  font-size: .72rem; color: var(--ink-tenue); margin-bottom: 12px;
}

/* ── El flujo ── */
.demo-flujo { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.demo-etapa {
  flex: 1 1 130px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-family: var(--texto); font-size: .84rem; font-weight: 600; color: var(--ink-suave);
  background: var(--sup); border: var(--borde-suave); border-radius: var(--r);
  padding: 15px 10px; cursor: pointer; text-align: center;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.demo-etapa:hover { color: var(--ink); border-color: var(--ink-tenue); }
.demo-etapa.activo {
  color: var(--ink); border-color: var(--acc); background: var(--acc-vidrio);
  transform: translateY(-2px);
}
.demo-etapa-ico {
  width: 23px; height: 23px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--ink-tenue);
  transition: color .2s ease;
}
.demo-etapa:hover .demo-etapa-ico { color: var(--ink-suave); }
.demo-etapa.activo .demo-etapa-ico { color: var(--acc); }
.demo-flecha { display: none; align-self: center; color: var(--ink-tenue); }
.demo-flujo-texto {
  margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ink-suave);
  border-left: 2px solid var(--acc); padding-left: 12px; min-height: 3em;
}

.demos-cta { text-align: center; margin-top: 30px; }
.demos-cta p {
  margin: 0 0 16px;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.2rem, 5vw, 1.6rem); letter-spacing: -.03em;
}

/* ── 07 · Pasos ───────────────────────────────────────────────────────── */

.pasos { background: var(--fondo-2); }
.pasos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

.paso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  align-items: start;
  border: var(--borde-suave); border-radius: var(--r-lg);
  background: rgba(255,255,255,.016);
  padding: 22px 20px;
}
.paso-n {
  font-family: var(--mono); font-size: .8rem; font-weight: 700;
  color: var(--acc);
  padding-top: 3px;
}
.paso-txt h3 { font-size: 1.22rem; margin-bottom: 6px; letter-spacing: -.02em; }
.paso-txt p { margin: 0; color: var(--ink-suave); font-size: .95rem; }
.paso img {
  grid-column: 1 / -1;
  width: 100%; height: auto;
  margin-top: 16px;
  border-radius: var(--r);
  border: var(--borde-suave);
}

/* ── 07 · Para quién ──────────────────────────────────────────────────── */

.quien-caja { display: grid; gap: 34px; }
.quien-grid {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.quien-grid li {
  border: 1px solid rgba(20, 19, 15,.16); border-radius: var(--r-boton);
  padding: 8px 15px;
  font-size: .89rem; font-weight: 500;
  background: rgba(255,255,255,.5);
}
.quien-grid li:last-child { border-style: dashed; color: var(--papel-suave); }

/* ── 08 · Precios ─────────────────────────────────────────────────────── */

.precios { background: var(--fondo-2); }

.planes-intro {
  margin: 0 0 22px;
  font-size: .9rem; color: var(--ink-tenue);
}

.planes { display: grid; gap: 16px; }

.plan {
  position: relative;
  border: 1px solid var(--linea); border-radius: var(--r-lg);
  padding: 28px 24px;
  background: rgba(255, 255, 255, .015);
  display: flex; flex-direction: column;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22,.68,.34,1);
}

/* El ámbar no está encendido de entrada ni vive en un plan fijo: aparece cuando
 * la persona se mueve. En computadora sigue al cursor; en celular, al plan que
 * queda al centro de la pantalla mientras baja. */
.plan.en-foco,
.planes:hover .plan:hover {
  border-color: var(--acc);
  background: linear-gradient(180deg, var(--acc-vidrio), rgba(255, 255, 255, .015) 46%);
  box-shadow: none;
  transform: translateY(-4px);
}
/* Mientras el cursor está sobre el grupo, manda el cursor, no el que venía marcado. */
.planes:hover .plan.en-foco:not(:hover) {
  border-color: var(--linea);
  background: rgba(255, 255, 255, .015);
  box-shadow: none;
  transform: none;
}
.plan h3 { font-size: 1.5rem; margin-bottom: 4px; }
.plan-para { margin: 0 0 16px; font-size: .9rem; color: var(--ink-tenue); }
.plan-precio {
  margin: 0 0 20px;
  font-family: var(--display); font-weight: 800;
  font-size: 2.6rem; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.plan-precio span { font-size: .34em; font-weight: 600; color: var(--ink-suave); letter-spacing: -.01em; margin-left: 4px; }

/* La opción anual es donde va incluido el dominio: se paga solo con lo que ahorra. */
.plan-anual {
  margin: -12px 0 20px;
  font-size: .84rem; line-height: 1.5; color: var(--ink-tenue);
  border-left: 2px solid var(--acc); padding-left: 11px;
}
.plan-anual b { color: var(--ink); font-weight: 600; }

.plan-lista { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 11px; flex: 1; }
.plan-lista li {
  position: relative; padding-left: 26px;
  font-size: .93rem; color: var(--ink-suave);
}
/* El número de negocios es lo primero que la gente compara entre planes. */
.plan-lista li b { color: var(--ink); font-weight: 700; }
.plan-lista li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 13px; height: 7px;
  border-left: 2px solid var(--acc); border-bottom: 2px solid var(--acc);
  transform: rotate(-45deg);
}

.btn-bloque { width: 100%; }

.precios-nota {
  margin: 26px 0 0; font-size: .84rem; color: var(--ink-tenue);
  max-width: 64ch;
}

/* ── 09 · FAQ ─────────────────────────────────────────────────────────── */

.faq-caja { max-width: 760px; }
.faq-lista { display: grid; gap: 2px; }

.faq-item { border-bottom: var(--borde-suave); }
.faq-item:first-child { border-top: var(--borde-suave); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  list-style: none; cursor: pointer;
  padding: 20px 0;
  font-family: var(--display); font-weight: 700; font-size: 1.06rem;
  letter-spacing: -.02em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: 0 0 auto;
  width: 11px; height: 11px;
  border-right: 2px solid var(--ink-tenue); border-bottom: 2px solid var(--ink-tenue);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq-item p { margin: 0 0 22px; color: var(--ink-suave); font-size: .97rem; max-width: 62ch; }

/* ── 09 · Lista de espera ─────────────────────────────────────────────── */

.espera { overflow: hidden; padding: 90px 0 96px; }
.espera-luz {
  position: absolute; inset: auto 50% -320px auto;
  transform: translateX(50%);
  width: 900px; height: 620px;
  background: radial-gradient(ellipse at center, rgba(224,162,16,.08), transparent 60%);
  pointer-events: none;
}
.espera-caja { position: relative; max-width: 640px; }
.espera .tit, .espera .sub, .espera .etiqueta { text-align: left; }

.waitlist-form { margin-top: 6px; }
.waitlist-campos { display: grid; gap: 14px; margin-bottom: 20px; }
.waitlist-campo { display: grid; gap: 7px; }
.waitlist-campo > span {
  font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  color: var(--ink-suave);
}
.waitlist-campo em { font-style: normal; color: var(--ink-tenue); font-weight: 400; }
.waitlist-campo input {
  font-family: var(--texto); font-size: 1rem;
  color: var(--ink);
  background: var(--sup);
  border: var(--borde-suave); border-radius: var(--r);
  padding: 14px 16px;
  transition: border-color .16s ease, background .16s ease;
}
.waitlist-campo input::placeholder { color: var(--ink-tenue); }
.waitlist-campo input:focus {
  outline: none; border-color: var(--acc); background: var(--sup-2);
}

/* El aviso vive junto al campo que le falta, no en un mensaje suelto al final. */
.campo-aviso {
  display: flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 500; color: #F19393;
}
/* Sin esto, display:flex le gana al atributo hidden y en el campo opcional
 * quedaba flotando el icono de aviso sin texto. */
.campo-aviso[hidden] { display: none; }
.campo-aviso::before {
  content: "!";
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; flex: none;
  border-radius: 50%; background: #F19393; color: #2A1414;
  font-size: .68rem; font-weight: 700;
}
.campo-mal input { border-color: rgba(241, 147, 147, .6); background: rgba(241, 147, 147, .06); }
.campo-mal input:focus { border-color: #F19393; }
.campo-mal > span { color: #F19393; }

.waitlist-enviar { width: 100%; }
.waitlist-nota { margin: 13px 0 0; font-size: .82rem; color: var(--ink-tenue); }
.waitlist-error {
  margin: 12px 0 0; font-size: .9rem; color: #F19393;
  background: rgba(241,147,147,.09); border: 1px solid rgba(241,147,147,.24);
  border-radius: var(--r-sm); padding: 10px 13px;
}

.waitlist-listo {
  border: 1px solid var(--acc); border-radius: var(--r-lg);
  background: var(--acc-vidrio);
  padding: 32px 26px; text-align: center;
}
.waitlist-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--acc); color: #17130A; margin-bottom: 14px;
}
.waitlist-listo h3 { font-size: 1.5rem; margin-bottom: 8px; }
.waitlist-listo p { margin: 0; color: var(--ink-suave); }

/* ── Pie ──────────────────────────────────────────────────────────────── */

.pie { border-top: var(--borde-suave); padding: 44px 0 30px; }
.pie-fila { display: grid; gap: 26px; }
.pie-frase { margin: 10px 0 0; color: var(--ink-tenue); font-size: .92rem; max-width: 34ch; }

.pie-redes { display: flex; gap: 10px; margin-top: 18px; }
.pie-redes a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  color: var(--ink-suave);
  border: var(--borde-suave);
  background: rgba(255, 255, 255, .03);
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.pie-redes a:hover {
  color: #17130A; background: var(--acc); border-color: var(--acc);
  transform: translateY(-2px);
}

.pie-links { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.pie-links a { color: var(--ink-suave); text-decoration: none; font-size: .92rem; transition: color .16s ease; }
.pie-links a:hover { color: var(--ink); }

.pie-abajo {
  margin-top: 30px; padding-top: 22px; border-top: var(--borde-suave);
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between;
}
.pie-abajo p { margin: 0; color: var(--ink-tenue); font-size: .84rem; }
.pie-soporte a { color: var(--ink-suave); text-decoration: underline; text-underline-offset: 3px; }
.pie-soporte a:hover { color: var(--acc-txt); }

/* ── Páginas legales (privacidad, términos) ───────────────────────────── */

.legal { padding: 56px 0 84px; }
.legal-caja { max-width: 760px; }
.legal .tit { font-size: clamp(2rem, 6.5vw, 3rem); margin-bottom: 10px; }
.legal-updated {
  font-family: var(--mono); font-size: .78rem;
  color: var(--ink-tenue); margin: 0 0 34px;
}
.legal h2 {
  font-size: 1.32rem; letter-spacing: -.025em;
  margin: 42px 0 12px; padding-top: 26px;
  border-top: var(--borde-suave);
}
.legal h3 { font-size: 1.06rem; margin: 26px 0 8px; }
.legal p, .legal li { color: var(--ink-suave); font-size: .99rem; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 8px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--acc-txt); text-decoration: underline; text-underline-offset: 3px; }

/* Los textos legales llevan el nombre partido en dos <span>; aquí se vuelve a unir. */
.brand-sup { font-weight: 600; }
.brand { color: var(--acc-txt); font-weight: 600; }

/* ── Animación de entrada ─────────────────────────────────────────────── */

.ent { opacity: 0; transform: translateY(14px); animation: entra .62s cubic-bezier(.22,.68,.34,1) forwards; }
.ent.d1 { animation-delay: .06s; }
.ent.d2 { animation-delay: .14s; }
.ent.d3 { animation-delay: .22s; }
@keyframes entra { to { opacity: 1; transform: none; } }

.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.68,.34,1); }
.rv.visible { opacity: 1; transform: none; }

/* ── Pantallas medianas ───────────────────────────────────────────────── */

@media (min-width: 700px) {
  section { padding: 96px 0; }
  .caja { padding: 0 32px; }
  .tit { font-size: clamp(2.6rem, 5.4vw, 3.6rem); }

  .prob-mapa { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 26px; }
  .prob-flecha svg { transform: rotate(-90deg); }
  .prob-antes, .prob-despues { max-width: none; }

  .pasos-lista { grid-template-columns: repeat(2, 1fr); gap: 18px; }

  .quien-caja { grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }

  .planes { grid-template-columns: repeat(3, 1fr); align-items: stretch; }

  .demo { padding: 28px 26px; }
  .demo-cuerpo { grid-template-columns: 1fr 1fr; align-items: start; }
  .demo-post-cuerpo { grid-template-columns: 1fr 1fr; }
  .demo-flecha { display: block; }
  .demo-etapa { flex: 1 1 0; }

  .res-cel { position: absolute; right: -6px; bottom: -46px; width: 176px; margin: 0; }

  .waitlist-campos { grid-template-columns: 1fr 1fr; }
  .waitlist-campo:last-child { grid-column: 1 / -1; }
  .waitlist-enviar { width: auto; min-width: 260px; }

  .pie-fila { grid-template-columns: 1fr auto; align-items: start; }
}

/* ── Escritorio ───────────────────────────────────────────────────────── */

@media (min-width: 960px) {
  /* En escritorio el menú vuelve a ser una fila normal: se deshacen todas las
   * reglas del panel desplegable de celular. */
  .nav {
    flex-direction: row; gap: 28px; margin-right: 26px;
    position: static; inset: auto; padding: 0;
    background: none; box-shadow: none;
    border: 0; opacity: 1; transform: none; visibility: visible; pointer-events: auto;
    transition: none;
  }
  .nav a {
    padding: 0; font-size: .92rem; border: 0;
    opacity: 1; transform: none; transition: color .16s ease;
  }
  .nav-cta { display: inline-flex; }
  .menu-btn { display: none; }

  .hero { padding: 66px 0 96px; }
  .hero-caja { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 56px; }
  .hero::before { left: 26%; }
  .hero h1 { font-size: clamp(3.4rem, 4.9vw, 4.6rem); }
  .hero-btns .btn { flex: 0 0 auto; }
  .tel { width: 330px; margin: 0 auto; }
  .medidor { max-width: 330px; }

  .caps-panel { grid-template-columns: 1fr auto; gap: 64px; align-items: center; }
  .caps-panel .tel { margin: 0; }

  .idea-frase { font-size: clamp(3rem, 4.6vw, 4.2rem); }

  .pasos-lista { grid-template-columns: repeat(4, 1fr); }
  .paso { padding: 24px 22px 26px; }
  .paso-txt h3 { font-size: 1.12rem; }

  .res-cel { width: 210px; right: 24px; bottom: -56px; }
}

/* ── Menos movimiento ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ent, .rv { opacity: 1; transform: none; }
}