/* ═══════════════════════════════════════════════════════════════════
   TIPOGRAFÍAS ALOJADAS EN NUESTRO PROPIO DOMINIO

   Antes venían de fonts.googleapis.com, y eso tenía dos problemas:

   · Rendimiento: una hoja de estilos externa bloquea el pintado hasta que
     responde otro servidor. Con las fuentes aquí, el navegador ya las tiene
     en la misma conexión que el resto del sitio.
   · Privacidad: cargar Google Fonts desde su CDN envía la IP del visitante
     a Google en cada visita. Un tribunal alemán ya declaró que eso vulnera
     el RGPD, y hay más países mirando en esa dirección.

   El unicode-range hace que cada archivo se descargue solo si hace falta:
   en una web en español baja el subconjunto latino y nunca el extendido.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/sora-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/sora-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/sora-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/sora-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/sora-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/sora-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════
   PROPULFY — Sistema de diseño
   Un solo archivo, tres capas: (1) tokens, (2) base, (3) componentes.
   Todo el sitio consume tokens: no hay valores sueltos en el HTML.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   1. TOKENS
   ───────────────────────────────────────────────────────────────── */
:root {
  /* Color · base oscura premium, un único acento */
  --bg:            #0A0D14;   /* fondo de página */
  --bg-elev:       #0F131C;   /* secciones alternas */
  --surface:       #121722;   /* tarjetas */
  --surface-2:     #171D2A;   /* tarjetas sobre tarjetas / hover */
  --border:        #1E2635;
  --border-strong: #2A3547;

  --text:          #F2F5FA;
  --text-muted:    #97A1B4;
  --text-faint:    #8492A6;   /* subido: el anterior se quedaba en 3,95 sobre el fondo */

  --accent:        #2E7BFF;   /* azul eléctrico — el único acento */
  --accent-hover:  #1B66E8;
  --accent-fill:   #206BEF;   /* relleno bajo texto blanco: 4,76:1 */
  --accent-text:   #5B96FF;   /* acento COMO texto sobre azul translúcido */
  --accent-soft:   rgba(46, 123, 255, 0.12);
  --accent-line:   rgba(46, 123, 255, 0.32);
  --cyan:          #5AC8FA;   /* solo halos y degradados, nunca texto plano */

  --success:       #2ED47A;
  --warning:       #F5B544;
  --danger:        #FF8787;

  /* Tipografía */
  --font-display: "Sora", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Escala tipográfica fluida (ratio ~1.25, se adapta al viewport) */
  --fs-xs:   0.8125rem;                          /* 13px  · etiquetas */
  --fs-sm:   0.9375rem;                          /* 15px  · texto auxiliar */
  --fs-base: 1.0625rem;                          /* 17px  · cuerpo */
  --fs-lg:   clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
  --fs-xl:   clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
  --fs-2xl:  clamp(1.75rem, 2vw + 1.2rem, 2.5rem);
  --fs-3xl:  clamp(2.25rem, 3.6vw + 1.1rem, 3.75rem);
  --fs-4xl:  clamp(2.75rem, 5vw + 1rem, 4.75rem);

  --lh-tight: 1.08;
  --lh-snug:  1.28;
  --lh-body:  1.65;

  /* Espaciado · escala de 4px */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;
  --sp-11: 7rem;

  /* Ritmo vertical de las secciones */
  --section-y: clamp(3.5rem, 7vw, 6.5rem);

  /* Radios */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   26px;
  --r-full: 999px;

  /* Sombras · discretas, la profundidad la da el color no la sombra */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --sh-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
  --sh-accent: 0 10px 30px rgba(46, 123, 255, 0.28);
  /* Anillo de estado correcto. Estaba escrito dos veces con dos
     opacidades distintas (0,15 y 0,18): se veían diferentes sin
     que hubiera ninguna razón. */
  --anillo-ok: 0 0 0 3px rgba(46, 212, 122, 0.18);
  /* Relieve de los controles que se arrastran. Más marcada que
     --sh-sm porque el tirador tiene que despegarse de la pista. */
  --sh-control: 0 2px 8px rgba(0, 0, 0, 0.4);

  /* Layout */
  --wrap:       1180px;
  --wrap-nar:   820px;   /* texto largo: artículos, FAQ */
  --nav-h:      72px;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.28s;

  /* Tokens que antes iban escritos a mano dentro de los componentes.
     Sacarlos aquí es lo que permite que exista un modo claro: mientras un
     color viva dentro de una regla, el tema no puede cambiarlo. */
  --bg-glass:  rgba(10, 13, 20, 0.72);   /* barra superior translúcida */
  --bg-glass-2: rgba(10, 13, 20, 0.92);  /* barra al hacer scroll y menú móvil */
  --bg-deep:   #0E121C;                  /* fondo de los degradados profundos */
  --text-read: #D6DDE9;                  /* cuerpo de artículo, más suave que --text */
  --on-accent: #fff;                     /* texto sobre el azul, en los dos temas */
}

/* ─────────────────────────────────────────────────────────────────
   MODO CLARO
   Propulfy es una marca oscura: el oscuro es el modo por defecto y el
   claro solo aparece si la persona lo elige. Por eso no se engancha a
   prefers-color-scheme — se activa con el atributo que pone el botón.

   Solo se redefinen tokens, nunca componentes. Si algún día algo se ve
   mal en claro, el fallo estará en una regla que use un color a mano en
   vez del token, no aquí.
   ───────────────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  --bg:            #F7F9FC;
  --bg-elev:       #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F1F5FB;
  --border:        #E2E8F2;
  --border-strong: #C6D0E0;

  --text:          #0C111C;
  --text-muted:    #4C5768;
  --text-faint:    #596374;   /* bajado: el anterior se quedaba en 4,29 sobre blanco */
  --text-read:     #2B3444;

  /* Azul algo más profundo: el de la marca sobre blanco se queda en 3,5:1
     de contraste y no llega a lo exigible para texto. Este pasa de 5:1 y
     sigue leyéndose como el mismo azul. */
  --accent:        #1657CE;
  --accent-fill:   #1657CE;
  --accent-text:   #1657CE;
  --accent-hover:  #1147AC;
  --accent-soft:   rgba(22, 87, 206, 0.09);
  --accent-line:   rgba(22, 87, 206, 0.28);

  /* Verde y ámbar bajados: los del modo oscuro están pensados para brillar
     sobre negro y sobre blanco se quedan en 3,4 de contraste. */
  --success:       #0B7A44;
  --warning:       #8A5600;
  --danger:        #B42318;

  /* El cian solo aparece dentro de degradados sobre texto (.cifrote). El
     tono claro funciona sobre negro y desaparece sobre blanco, así que en
     este tema el degradado va de azul a azul profundo. */
  --cyan:          #0E7FC4;

  --bg-glass:      rgba(255, 255, 255, 0.78);
  --bg-glass-2:    rgba(255, 255, 255, 0.94);
  --bg-deep:       #EDF2F9;

  /* Sobre fondo claro, las sombras negras del modo oscuro ensucian.
     Se bajan y se tiñen del azul del fondo para que no se vean grises. */
  --sh-sm: 0 1px 2px rgba(12, 17, 28, 0.06);
  --sh-md: 0 8px 24px rgba(12, 17, 28, 0.08);
  --sh-lg: 0 24px 60px rgba(12, 17, 28, 0.12);
  --sh-accent: 0 10px 30px rgba(27, 102, 232, 0.22);
  --sh-control: 0 2px 6px rgba(12, 17, 28, 0.18);

  color-scheme: light;
}

/* ─────────────────────────────────────────────────────────────────
   2. BASE
   ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--sp-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); font-weight: 800; }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-lg); line-height: var(--lh-snug); }

p  { margin: 0 0 var(--sp-4); }
a  { color: var(--accent); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--cyan); }
img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
li { margin-bottom: var(--sp-2); }
strong { color: var(--text); font-weight: 600; }

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

::selection { background: var(--accent); color: var(--on-accent); }

/* Enlace de salto para lectores de pantalla y teclado */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent-fill); color: var(--on-accent); padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--r-md) 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* ── Utilidades de layout ── */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-nar)); margin-inline: auto; }
.section { padding-block: var(--section-y); }

/* ── Página densa ─────────────────────────────────────────────────────
   Para páginas largas de venta, donde el aire entre secciones deja de
   ayudar a leer y solo obliga a hacer scroll. No quita contenido: reduce
   el espacio muerto y el tamaño de los párrafos de entradilla, que son los
   dos sitios donde se acumula el alto sin aportar información.
   En lanzamientos son doce secciones: cada rem que se recorta arriba y
   abajo se multiplica por veinticuatro. */
.pagina--densa {
  --section-y: clamp(2.25rem, 4.2vw, 3.75rem);
}
.pagina--densa .section-head { margin-bottom: var(--sp-6); }
.pagina--densa .section-head p { font-size: var(--fs-base); }
.pagina--densa .hero { padding-block: clamp(2.5rem, 6vw, 5rem) var(--section-y); }

/* En móvil el aviso de plazas caía 38 px por debajo del pliegue: se veía
   cortado justo en la frase que da el motivo para seguir. Se recupera ese
   espacio repartiéndolo entre los huecos del hero —ninguno pierde aire
   suficiente para notarse— en vez de encoger la tipografía. */
@media (max-width: 640px) {
  .pagina--densa .hero { padding-top: 2rem; }
  .pagina--densa .hero .badge { margin-bottom: var(--sp-2); }
  .pagina--densa .hero__sub { margin-bottom: var(--sp-5); }
  .pagina--densa .hero .btn-row { margin-bottom: var(--sp-5); }
  .pagina--densa .hero__aviso { margin-top: var(--sp-4); padding: var(--sp-3); }
  /* El límite de plazas mantiene su tamaño; el motivo baja un punto, que en
     móvil es la diferencia entre entrar entero en pantalla o quedar cortado. */
  .pagina--densa .hero__aviso__txt > span { font-size: var(--fs-xs); line-height: 1.45; }
}
.section--elev { background: var(--bg-elev); border-block: 1px solid var(--border); }
.center { text-align: center; }
.muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }
.mb-0 { margin-bottom: 0; }

/* Cabecera de sección: etiqueta + título + entradilla, siempre igual */
.section-head { max-width: 46rem; margin-bottom: var(--sp-8); }
.section-head.center { margin-inline: auto; }
.section-head p { color: var(--text-muted); font-size: var(--fs-lg); margin-bottom: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--accent-line);
}
.section-head.center .eyebrow::before { display: none; }

/* ─────────────────────────────────────────────────────────────────
   3. COMPONENTES
   ───────────────────────────────────────────────────────────────── */

/* ── 3.1 Botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  padding: 0.95rem 1.6rem;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--accent-fill); color: var(--on-accent); box-shadow: var(--sh-accent); }
.btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--surface); border-color: var(--accent); color: var(--text); }

.btn--lg { padding: 1.1rem 2rem; font-size: var(--fs-base); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-row.center { justify-content: center; }

/* ── 3.2 Navegación ── */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: var(--bg-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--border); background: var(--bg-glass-2); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
/* El área pulsable es de 44 px aunque el logo mida 26: en móvil era el
   objetivo más pequeño de la barra y es el que devuelve al inicio. */
.nav__logo { display: inline-flex; align-items: center; min-height: 44px; }
.nav__logo img { height: 26px; width: auto; }
.nav__links { display: flex; align-items: center; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.nav__links a {
  display: block; padding: var(--sp-2) var(--sp-4);
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500;
  border-radius: var(--r-full);
  white-space: nowrap;          /* un enlace de menú nunca parte en dos */
}
.nav__links a:hover { color: var(--text); background: var(--surface); }
.nav__links a.is-active { color: var(--text); }
.nav__cta { margin-left: var(--sp-3); white-space: nowrap; }

/* Desplegable "Soluciones IA" */
.nav__drop { position: relative; }
/* El <summary> ES el disparador: dentro de un <details> cerrado, cualquier
   otro elemento quedaría oculto. */
.nav__drop > summary {
  display: flex; align-items: center; gap: var(--sp-2);
  list-style: none; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500;
  color: var(--text-muted); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-full);
  white-space: nowrap;
}
.nav__drop > summary::-webkit-details-marker { display: none; }
.nav__drop > summary::marker { content: ""; }
.nav__drop > summary:hover { color: var(--text); background: var(--surface); }
.nav__drop > summary svg { transition: transform var(--dur) var(--ease); }
.nav__drop[open] > summary svg { transform: rotate(180deg); }
.nav__drop[open] > summary { color: var(--text); }
.nav__menu {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 300px; padding: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  list-style: none; margin: 0;
}
.nav__menu a { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); }
.nav__menu strong { display: block; color: var(--text); font-size: var(--fs-sm); font-weight: 600; }
.nav__menu span { display: block; color: var(--text-faint); font-size: var(--fs-xs); line-height: 1.45; }

/* Hamburguesa + menú móvil a pantalla completa */
.nav__burger {
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--border); border-radius: var(--r-md);
  cursor: pointer; color: var(--text);
}
/* Hamburguesa: los dos iconos viven en el DOM y el estado del botón decide
   cuál se ve. Cambiarlos por CSS y no reescribiendo el HTML evita destruir
   el nodo que el navegador está usando para propagar el clic. */
.nav__burger .burger-cerrar { display: none; }
.nav__burger[aria-expanded="true"] .burger-abrir  { display: none; }
.nav__burger[aria-expanded="true"] .burger-cerrar { display: block; }

/* El menú va en absolute colgando de la barra, NO en fixed.
   Iba en `position: fixed; inset: 0` esperando ocupar la pantalla, pero
   .nav lleva backdrop-filter, y un ancestro con filtro crea contenedor de
   posicionamiento para sus descendientes fijos. El resultado: el menú se
   posicionaba dentro de una barra de 72 px, quedaba una franja recortada
   sobre el contenido y los enlaces no se veían.

   Colgado de la barra ocupa el resto de la pantalla y además deja la barra
   visible, con su botón de cerrar siempre a mano.
   100dvh y no 100vh: en móvil la barra del navegador aparece y desaparece,
   y con vh el menú se corta por abajo justo cuando está desplegada. */
.nav__mobile {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 99;
  height: 100vh;
  height: calc(100dvh - var(--nav-h));
  background: var(--bg);
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
  display: flex; flex-direction: column; gap: var(--sp-2);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav__mobile.is-open { opacity: 1; transform: none; pointer-events: auto; }
/* Los enlaces iban a 22 px con 69 px de alto: el contenido sumaba 846 px en
   un panel de 780 y el botón de agendar quedaba fuera, obligando a hacer
   scroll dentro del menú para encontrarlo. A 18 px caben los diez y el CTA
   sin scroll, y cada fila sigue por encima de los 44 px de zona táctil. */
.nav__mobile a {
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600;
  color: var(--text); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border);
}
/* El CTA del menú es un botón, no un enlace de lista: la regla de arriba
   gana en especificidad a .btn--primary y le imponía el color del texto
   normal. En oscuro pasaba desapercibido porque --text es casi blanco; en
   claro es casi negro y quedaba texto oscuro sobre azul (2,96 de contraste).
   También se le quita el filete inferior, que ahí no pinta nada. */
.nav__mobile .btn { margin-top: var(--sp-5); font-size: var(--fs-base); border-bottom: 0; }
.nav__mobile .btn--primary { color: var(--on-accent); }
.nav__mobile .btn--ghost { color: var(--text); }
body.no-scroll { overflow: hidden; }

/* ── 3.3 Hero ── */
.hero { position: relative; padding-block: clamp(3.5rem, 8vw, 7rem) var(--section-y); overflow: hidden; }
.hero::before {
  /* halo del acento: la única licencia decorativa, muy contenida */
  content: ""; position: absolute; z-index: -1;
  top: -30%; left: 50%; transform: translateX(-50%);
  width: min(1100px, 130%); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(46, 123, 255, 0.18) 0%, rgba(90, 200, 250, 0.06) 38%, transparent 66%);
}
.hero__inner { max-width: 52rem; }
.hero h1 { margin-bottom: var(--sp-5); }
.hero__sub { font-size: var(--fs-lg); color: var(--text-muted); max-width: 40rem; margin-bottom: var(--sp-7); }
.hero__sub strong { color: var(--text); }
.hero .btn-row { margin-bottom: var(--sp-6); }
.hero__note { font-size: var(--fs-sm); color: var(--text-faint); display: flex; align-items: flex-start; gap: var(--sp-2); }
.hero__note svg { flex: 0 0 16px; margin-top: 0.3em; }

/* Aviso de plazas del hero. Es lo último que se lee antes de decidir, así
   que se sostiene solo: filete de acento a la izquierda, el límite en el
   color del texto principal y el porqué en tono secundario. */
.hero__aviso {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  max-width: 34rem;
  background: linear-gradient(100deg, rgba(46,123,255,0.10), rgba(46,123,255,0.02));
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
}
.hero__aviso__ico {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 2rem; height: 2rem; margin-top: -0.1rem;
  color: var(--accent);
  background: var(--accent-soft); border-radius: var(--r-full);
}
.hero__aviso__txt { display: grid; gap: 0.2rem; }
.hero__aviso__txt strong {
  color: var(--text); font-size: var(--fs-base);
  font-weight: 700; letter-spacing: -0.01em; line-height: 1.35;
}
.hero__aviso__txt > span { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5; }

@media (max-width: 640px) {
  .hero__aviso { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
  .hero__aviso__ico { width: 1.75rem; height: 1.75rem; }
}

.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600; color: var(--text);
  margin-bottom: var(--sp-5);
}
.badge__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--success);
  box-shadow: var(--anillo-ok);
}

/* ── 3.4 Cifras de prueba social ── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.stat__num {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800;
  line-height: 1; letter-spacing: -0.03em; color: var(--text); display: block;
}
.stat__num em { font-style: normal; color: var(--accent); }
.stat__label { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-2); display: block; }

/* Banda de logos de clientes */
.logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-6) var(--sp-9);
}
.logos img { height: 30px; width: auto; opacity: 0.55; filter: grayscale(1) brightness(2.4); transition: opacity var(--dur) var(--ease); }
.logos img:hover { opacity: 0.9; }
.logos__label {
  text-align: center; font-size: var(--fs-xs); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--sp-6);
}

/* ── 3.5 Tarjetas ── */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.card h3 { margin-bottom: var(--sp-3); }
.card p:last-child { margin-bottom: 0; }
.card__icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--r-md); color: var(--accent); margin-bottom: var(--sp-5);
}
.card__list { list-style: none; padding: 0; margin: var(--sp-4) 0 0; }
.card__list li {
  position: relative; padding-left: 1.55rem; font-size: var(--fs-sm); color: var(--text-muted);
}
.card__list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

/* Contraste problema/solución */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: stretch; }
.panel { border-radius: var(--r-lg); padding: var(--sp-7); border: 1px solid var(--border); }
.panel--problem { background: var(--bg-elev); }
.panel--solution { background: linear-gradient(160deg, rgba(46,123,255,0.10), rgba(46,123,255,0.02)); border-color: var(--accent-line); }
.panel h3 { font-size: var(--fs-lg); }
.panel ul { list-style: none; padding: 0; margin: 0; }
.panel li { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-4); }
.panel li:last-child { margin-bottom: 0; }
.panel li svg { flex: 0 0 18px; margin-top: 0.25em; }
.panel--problem li svg { color: var(--text-faint); }
.panel--solution li svg { color: var(--accent); }

/* ── 3.6 Proceso en pasos ── */
.steps { counter-reset: step; display: grid; gap: var(--sp-5); grid-template-columns: repeat(4, 1fr); }
.step { position: relative; padding-top: var(--sp-6); border-top: 1px solid var(--border); }
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700;
  color: var(--accent); letter-spacing: 0.06em;
  position: absolute; top: -0.85em; left: 0;
  background: var(--bg); padding-right: var(--sp-3);
}
.section--elev .step::before { background: var(--bg-elev); }
.step h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.step p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.step__meta { display: block; margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-faint); }

/* ── 3.7 Testimonios ── */
.quote {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.quote__result {
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700;
  color: var(--accent); letter-spacing: -0.02em;
}
.quote blockquote { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7; }
.quote__author { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; }
.quote__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px;
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted);
}
.quote__name { font-size: var(--fs-sm); font-weight: 600; }
.quote__role { font-size: var(--fs-xs); color: var(--text-faint); }

/* ── 3.8 FAQ ── */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5);
  padding: var(--sp-5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600;
  color: var(--text); letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: 0 0 auto; font-family: var(--font-body); font-weight: 400;
  font-size: 1.5rem; line-height: 1; color: var(--accent);
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: var(--sp-5); }
.faq p { color: var(--text-muted); font-size: var(--fs-sm); max-width: 58ch; margin-bottom: var(--sp-3); }
.faq p:last-child { margin-bottom: 0; }

/* ── 3.9 Formularios ── */
.field { margin-bottom: var(--sp-5); }
.field label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-2); }
.field .hint { font-size: var(--fs-xs); color: var(--text-faint); font-weight: 400; display: block; margin-top: 2px; }
.input, .select, .textarea {
  width: 100%; padding: 0.9rem 1rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  font-family: var(--font-body); font-size: var(--fs-base);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.textarea { resize: vertical; min-height: 110px; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2397A1B4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--danger); }
.field__error { display: none; color: var(--danger); font-size: var(--fs-xs); margin-top: var(--sp-2); }
.field--error .field__error { display: block; }

/* Teléfono con prefijo */
.phone-row { display: grid; grid-template-columns: 116px 1fr; gap: var(--sp-3); }

/* Opciones tipo tarjeta (radio) */
.choices { display: grid; gap: var(--sp-3); }
.choices--2 { grid-template-columns: repeat(2, 1fr); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
  display: block; padding: var(--sp-4) var(--sp-5);
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  font-size: var(--fs-sm); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.choice span:hover { border-color: var(--text-faint); }
.choice input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Honeypot: invisible para humanos, irresistible para bots */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ── 3.10 Embudo multi-paso ── */
.funnel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--sh-lg);
}
.funnel__progress { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-7); }
.funnel__bar { flex: 1; height: 4px; background: var(--border); border-radius: var(--r-full); overflow: hidden; }
.funnel__bar i { display: block; height: 100%; width: 25%; background: var(--accent); border-radius: var(--r-full); transition: width 0.4s var(--ease); }
.funnel__count { font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.funnel__step { display: none; }
.funnel__step.is-active { display: block; animation: fadeUp 0.35s var(--ease); }
.funnel__step h3 { margin-bottom: var(--sp-2); }
.funnel__step > p { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
.funnel__nav { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }
.funnel__nav .btn--primary { margin-left: auto; }
.funnel__legal { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--sp-5); margin-bottom: 0; }
.funnel__legal a { color: var(--text-muted); text-decoration: underline; }

/* El calendario pide mucho más ancho que el formulario.
   Calendly solo abre su vista de dos columnas —descripción del evento a la
   izquierda, días y horas a la derecha— cuando dispone de unos 900 px; en el
   contenedor estrecho del formulario (680 px) se queda apilado y estrecho.
   Se ensancha únicamente al llegar a este paso, que es justo cuando el
   formulario ya está oculto y el espacio no le hace falta a nadie más. */
/* El formulario se quiere estrecho: en una sola columna de 620 px las
   preguntas se leen de un vistazo. Esto vivía como style="" en el HTML, y un
   estilo en línea no hay CSS que lo gane: por eso el calendario seguía
   encajonado en 620 px hiciera lo que hiciera la hoja de estilos. */
.wrap-formulario { width: min(100%, 620px); }

/* Al llegar al calendario manda el ancho, no la estrechez. */
/* Sin restar margen: el contenedor padre ya trae su propio padding, y
   restarlo otra vez estrechaba el calendario en móvil, que es justo donde
   menos sobra. */
.section.is-calendario .wrap-formulario { width: min(100%, 1060px); }
.section.is-calendario .cta-band--compacta { padding: clamp(1rem, 2vw, 1.75rem); }

/* ── Densidad en móvil ───────────────────────────────────────────────
   En una pantalla de 390 px cada sección gastaba 112 px solo en aire, y
   la home se iba a 19 pantallas de scroll. Aquí no se quita contenido:
   se baja un punto la tipografía y se recorta el espacio muerto entre
   bloques, que es donde se acumula el alto sin aportar nada.

   Dos cosas que no se tocan y son deliberadas:
   · Los campos de formulario se quedan en 16 px. Por debajo de eso, iOS
     hace zoom automático al enfocarlos y descoloca la página entera.
   · Las áreas táctiles siguen por encima de 44 px de alto. Compactar la
     lectura no puede convertirse en botones difíciles de acertar.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --fs-xs:   0.78125rem;   /* 12,5px */
    --fs-sm:   0.875rem;     /* 14px   */
    --fs-base: 1rem;         /* 16px   */
    --section-y: clamp(2.25rem, 6vw, 3.25rem);
  }
  .section-head { margin-bottom: var(--sp-5); }
  .section-head p { font-size: var(--fs-base); }
  .grid { gap: var(--sp-4); }
  .article__body { font-size: var(--fs-base); }
  .article__body p, .article__body li { font-size: 1.0625rem; }   /* 17px: lectura larga */
  .article__body h2 { margin-top: var(--sp-7); }

  /* El zoom de iOS se dispara por debajo de 16px en cualquier control. */
  input, select, textarea { font-size: 1rem; }
}

/* ── Logo según el tema ──────────────────────────────────────────────
   El logo de Propulfy es blanco sólido: sobre fondo claro desaparecía por
   completo. Están los dos archivos en el HTML y el CSS enseña el que
   contrasta, en vez de cambiar el src desde JavaScript —así no hay un
   instante con el logo equivocado ni una petición de imagen tardía. */
/* display:block en los dos estados: como imagen en línea, el logo arrastra
   el espacio reservado para la línea base y queda descentrado por unos
   píxeles respecto a su contenedor. */
.logo--claro  { display: none; }
.logo--oscuro { display: block; }
:root[data-theme="light"] .logo--oscuro { display: none; }
:root[data-theme="light"] .logo--claro  { display: block; }

/* ── Botón de cambio de tema ─────────────────────────────────────────
   Discreto por definición: es una preferencia, no una acción del embudo,
   así que no compite con el CTA que tiene al lado. */
.nav__tema {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  margin-left: var(--sp-3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.nav__tema:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface); }
/* Con el dedo, 38 px se quedan cortos: por debajo de 44 se falla el toque. */
@media (hover: none), (pointer: coarse) {
  .nav__tema { width: 44px; height: 44px; }
}
/* En móvil el tema y la hamburguesa son un par de controles del mismo tipo:
   pegados se leen como un grupo, separados parecen dos cosas sin relación.
   La barra reparte con space-between, y al ocultarse el menú de escritorio
   los dos botones quedaban a 56 px uno del otro. Con margin-left:auto en el
   primero, el hueco se va todo delante y los dos quedan juntos a la derecha. */
@media (max-width: 1000px) {
  .nav__tema { margin-left: auto; margin-right: var(--sp-2); }
  .nav__burger { margin-left: 0; }
}
.nav__tema:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav__tema svg { grid-area: 1 / 1; }

/* En oscuro se ofrece pasar a claro (sol); en claro, volver a oscuro (luna).
   Los dos iconos están siempre en el DOM: cambiar cuál se ve es instantáneo
   y no obliga a tocar el HTML desde JavaScript. */
.nav__tema-sol  { display: block; }
.nav__tema-luna { display: none; }
:root[data-theme="light"] .nav__tema-sol  { display: none; }
:root[data-theme="light"] .nav__tema-luna { display: block; }

/* Estado final: calendario.
   La altura definitiva la fija Calendly por postMessage según su contenido
   (ver funnel.js); lo de aquí es solo el tamaño de partida mientras carga,
   para que la tarjeta no aparezca de golpe ni dé un salto grande. El fondo y
   el borde hacen que el hueco ya se lea como tarjeta antes de que el
   calendario pinte nada. */
.calendar-slot {
  min-height: 700px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: min-height var(--dur) var(--ease);
}
.calendar-slot iframe {
  display: block;
  width: 100%;
  height: 700px;
  border: 0;
  transition: height var(--dur) var(--ease);
}
/* En móvil el calendario apila la descripción sobre el selector de fecha y
   necesita bastante más alto; el valor real lo corrige Calendly al cargar. */
@media (max-width: 640px) {
  .calendar-slot { min-height: 980px; }
  .calendar-slot iframe { height: 980px; }
}

/* ── 3.11 Calculadora de ahorro ── */
.calc { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-6); align-items: start; }
.calc__panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); }
.calc__out {
  background: linear-gradient(165deg, rgba(46,123,255,0.14), var(--bg-deep));
  border: 1px solid var(--accent-line); border-radius: var(--r-lg); padding: var(--sp-7);
  position: sticky; top: calc(var(--nav-h) + var(--sp-5));
}
.calc__big {
  font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1; color: var(--text); margin: var(--sp-2) 0 var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.calc__row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.calc__row span:last-child { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.calc__row span:first-child { color: var(--text-muted); }
.range { width: 100%; accent-color: var(--accent); }
.range-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-2); }
.range-head b { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--accent); font-variant-numeric: tabular-nums; }

/* ── 3.12 Bloques CTA y garantía ── */
.cta-band {
  background: linear-gradient(150deg, rgba(46,123,255,0.16), rgba(90,200,250,0.05) 55%, transparent);
  border: 1px solid var(--accent-line); border-radius: var(--r-xl);
  padding: clamp(2rem, 5vw, 3.5rem);
}
.guarantee {
  display: flex; gap: var(--sp-5); align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md); padding: var(--sp-6);
}
.guarantee svg { flex: 0 0 32px; color: var(--accent); }
.guarantee h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.guarantee p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* ── 3.13 Blog ── */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.post-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.post-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }
/* Tarjeta compacta, con el criterio del blog de INMOADS: el listado está para
   escoger, no para leer. Antes medía 536 px de alto, la mitad ocupada por una
   portada que además llevaba el título incrustado — el mismo titular aparecía
   dos veces en la misma tarjeta. Fuera la portada: el peso lo llevan la
   etiqueta de categoría, el titular y tres líneas de entradilla.
   Las portadas siguen usándose dentro de cada artículo y como imagen social. */
.post-card__media { aspect-ratio: 2.6 / 1; background: var(--surface-2); position: relative; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; gap: var(--sp-3); }
.post-card__meta {
  font-size: var(--fs-xs); color: var(--accent);
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
}
.post-card h3 { font-size: var(--fs-base); line-height: 1.3; margin: 0; }
.post-card h3 a { color: var(--text); }
.post-card h3 a:hover { color: var(--accent); }
/* La entradilla se corta a tres líneas: con textos de largo distinto, las
   tarjetas quedaban descuadradas entre sí sin ninguna razón. */
.post-card p {
  font-size: var(--fs-sm); color: var(--text-muted); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
/* Pie separado por un filete, como en INMOADS: cierra la tarjeta y separa
   el resumen de la acción. La fecha va a la izquierda y el enlace a la
   derecha — así se sabe si el artículo es reciente sin tener que abrirlo. */
.post-card__pie {
  margin-top: auto; padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.post-card__pie time {
  font-size: var(--fs-xs); color: var(--text-faint);
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
}
.post-card__more {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--sp-2);
}

/* ── Secciones del blog ──────────────────────────────────────────────
   Dos públicos distintos —empresas que automatizan procesos y gente que
   vende formación— con problemas que no se parecen en nada. Separarlos
   hace que cada uno lea solo lo suyo, y quien lee lo suyo deja el correo
   mucho más a menudo que quien tiene que rebuscar. */
.grupos {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.grupos__btn {
  flex: 1 1 200px; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-4) var(--sp-5); text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); cursor: pointer; color: var(--text-muted);
  font-family: var(--font-body);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.grupos__btn strong { font-family: var(--font-display); font-size: var(--fs-base); color: var(--text); }
.grupos__btn .sub { font-size: var(--fs-xs); color: var(--text-faint); }
.grupos__btn:hover { border-color: var(--border-strong); }
.grupos__btn[aria-selected="true"] {
  border-color: var(--accent); background: var(--accent-soft); color: var(--text);
}
.grupos__btn[aria-selected="true"] .sub { color: var(--accent); }
.grupos__desc { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-6); max-width: 60ch; }
.grupos__vacio { text-align: center; color: var(--text-muted); padding: var(--sp-8) 0; }
.post-card[hidden] { display: none; }

/* ── Bloques de captación de email ───────────────────────────────────
   El de arriba es una barra, para no empujar los artículos hacia abajo.
   El del final es una tarjeta centrada, porque quien llega ahí ya ha
   leído y merece que se le pida con más peso. */
.captacion {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-6);
}
.captacion--arriba {
  display: grid; grid-template-columns: 1fr minmax(320px, 42%);
  gap: var(--sp-5) var(--sp-7); align-items: center;
  margin-bottom: var(--sp-8);
  background: linear-gradient(100deg, var(--accent-soft), transparent 70%);
  border-color: var(--accent-line);
}
.captacion__texto { display: grid; gap: 4px; }
.captacion__texto strong { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text); }
.captacion__texto span { font-size: var(--fs-sm); color: var(--text-muted); }
.captacion__campos { display: flex; gap: var(--sp-3); align-items: flex-start; }
.captacion__campos .field { flex: 1 1 auto; margin: 0; }
.captacion__campos .btn { flex: 0 0 auto; white-space: nowrap; }
.captacion__nota { font-size: var(--fs-xs); color: var(--text-faint); margin: var(--sp-3) 0 0; }
.captacion--cierre { text-align: center; padding: var(--sp-8) var(--sp-7); }
.captacion--cierre h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.captacion--cierre p.muted { max-width: 52ch; margin: 0 auto var(--sp-6); font-size: var(--fs-sm); }
.captacion--cierre form { max-width: 30rem; margin: 0 auto; }
.captacion--cierre .captacion__nota { text-align: center; }

@media (max-width: 860px) {
  .captacion--arriba { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .captacion__campos { flex-direction: column; }
  .captacion__campos .btn { width: 100%; }
}

/* ── Captación dentro del artículo ───────────────────────────────────
   Un artículo que solo pide el email al final desaprovecha a quien ya se ha
   convencido en el tercer apartado. El CTA intercalado recoge a esa persona
   en el momento en el que acaba de entender el problema, que es cuando más
   dispuesta está. Se coloca después de la sección que cuantifica el dolor.
   Va con el color de acento pero sin gritar: un bloque más del artículo. */
.cta-inline {
  margin: var(--sp-8) 0;
  padding: var(--sp-6) var(--sp-7);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
}
.cta-inline h3 { font-size: var(--fs-lg); margin: 0 0 var(--sp-3); line-height: 1.3; }
.cta-inline p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 var(--sp-5); }
.cta-inline .btn { font-size: var(--fs-sm); }

/* Migas de pan. Además de orientar, alimentan el BreadcrumbList del schema,
   que es lo que hace que Google muestre la ruta bajo el resultado. */
.migas {
  font-size: var(--fs-xs); color: var(--text-faint);
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
  margin-bottom: var(--sp-5);
}
.migas a { color: var(--text-muted); }
.migas a:hover { color: var(--accent); }
.migas span[aria-current] { color: var(--text-faint); }

/* Artículo */
.article { padding-block: var(--sp-9) var(--section-y); }
.article__head { margin-bottom: var(--sp-8); }
.article__meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-sm); color: var(--text-faint); margin-bottom: var(--sp-5); }
.article__body { font-size: var(--fs-lg); }
.article__body h2 { font-size: var(--fs-2xl); margin-top: var(--sp-9); }
.article__body h3 { font-size: var(--fs-xl); margin-top: var(--sp-7); }
.article__body p, .article__body li { color: var(--text-read); }
.article__body ul, .article__body ol { margin-bottom: var(--sp-5); }
.article__body img { border-radius: var(--r-lg); margin-block: var(--sp-7); border: 1px solid var(--border); }
.article__body figure { margin: var(--sp-7) 0; }
.article__body figcaption { font-size: var(--fs-sm); color: var(--text-faint); text-align: center; margin-top: var(--sp-3); }
.pull {
  border-left: 3px solid var(--accent); padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  margin: var(--sp-7) 0; font-family: var(--font-display); font-size: var(--fs-xl);
  font-weight: 600; line-height: var(--lh-snug); letter-spacing: -0.02em; color: var(--text);
}
.toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-8); }
.toc strong { display: block; font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.toc ol { margin: 0; padding-left: 1.1rem; }
.toc li { font-size: var(--fs-sm); }

/* CTA intercalado en el cuerpo del artículo */
.inline-cta {
  background: var(--surface); border: 1px solid var(--accent-line);
  border-radius: var(--r-lg); padding: var(--sp-6);
  margin-block: var(--sp-8); font-size: var(--fs-base);
}
.inline-cta h4 { margin-bottom: var(--sp-3); }
.inline-cta p { color: var(--text-muted); font-size: var(--fs-sm); }

/* Newsletter */
.newsletter { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(1.75rem, 4vw, 2.75rem); }
.newsletter form { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3); }
.newsletter .field { margin: 0; }

/* ── 3.14 Widget de diagnóstico IA ── */
.ai-widget {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden;
}
.ai-widget__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--border); }
.ai-widget__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: var(--anillo-ok); }
.ai-widget__log { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); min-height: 240px; }
.ai-msg { max-width: 82%; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); font-size: var(--fs-sm); line-height: 1.6; }
.ai-msg--bot { background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: var(--r-sm); align-self: flex-start; }
.ai-msg--user { background: var(--accent-fill); color: var(--on-accent); border-bottom-right-radius: var(--r-sm); align-self: flex-end; }
.ai-widget__form { display: flex; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); border-top: 1px solid var(--border); }

/* ── 3.15 Aviso de dato pendiente (solo visible en local) ── */
.placeholder-note {
  display: inline-block; font-size: var(--fs-xs); color: var(--warning);
  border: 1px dashed rgba(245,181,68,0.4); border-radius: var(--r-sm);
  padding: 2px 8px; margin-top: var(--sp-3);
}

/* ── 3.16 Footer ── */
.footer { border-top: 1px solid var(--border); padding-block: var(--sp-9) var(--sp-6); background: var(--bg-elev); }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-7); margin-bottom: var(--sp-8); }
.footer__brand img { height: 24px; width: auto; margin-bottom: var(--sp-4); }
.footer__brand p { font-size: var(--fs-sm); color: var(--text-muted); max-width: 30ch; }
.footer h4 { font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--sp-4); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: var(--sp-3); }
/* El enlace ocupa la línea entera y añade altura propia: en móvil medían
   17 px de alto con 4 px de separación, por debajo del mínimo táctil, y
   fallar el enlace de al lado era lo normal. El texto no se mueve de sitio
   porque el margen del <li> se compensa con este relleno. */
.footer li a { display: inline-block; padding-block: 6px; color: var(--text-muted); font-size: var(--fs-sm); }
.footer li { margin-bottom: 0; }
.footer li a:hover { color: var(--text); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
  padding-top: var(--sp-6); border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-faint);
}

/* ── 3.17 Aviso de cookies ── */
.cookie-bar {
  position: fixed; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); z-index: 120;
  max-width: 560px; margin-inline: auto;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: var(--sp-5);
  display: none;
}
.cookie-bar.is-visible { display: block; animation: fadeUp 0.4s var(--ease); }
.cookie-bar p { font-size: var(--fs-sm); color: var(--text-muted); }
.cookie-bar .btn-row { margin-top: var(--sp-4); }

/* ─────────────────────────────────────────────────────────────────
   4. MOVIMIENTO
   Animaciones cortas y solo de opacidad/transform (no provocan reflow).
   ───────────────────────────────────────────────────────────────── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* La animación de entrada solo se activa si hay JS. Sin JS (o si un script
   falla) el contenido se ve siempre: nunca se oculta contenido real detrás
   de una animación. */
/* La entrada va con animación, no con transición, y esto no es un capricho.
   Con `transition: transform 0.6s` en .reveal, cualquier elemento que además
   tuviera hover —las tarjetas del blog, por ejemplo— veía su propia
   transición pisada por la de la entrada: el resto del sitio responde al
   ratón en 0,28 s y esas tarjetas tardaban 0,6 s, más del doble.
   Con @keyframes la entrada dura lo que tiene que durar y la transición del
   elemento queda intacta para el hover.
   Sin `forwards` a propósito: al terminar, el elemento vuelve a sus estilos
   normales; si se quedara fijado por la animación, el hover no podría
   moverlo. */
html.js .reveal { opacity: 0; }
html.js .reveal.is-in { opacity: 1; animation: entra 0.6s var(--ease); }
@keyframes entra {
  from { opacity: 0; transform: translateY(18px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  /* Tiene que igualar en especificidad a `html.js .reveal`, que está más
     abajo: con solo `.reveal` la media query no ganaba y quien pide
     movimiento reducido seguía dependiendo del observador de scroll para
     ver el contenido. Si ese observador no llega a ejecutarse, la página
     se queda en blanco. Así se ve todo desde el primer momento, que es
     justo lo que pide esa preferencia. */
  html.js .reveal, html.js .reveal.is-in { opacity: 1; transform: none; animation: none; }
}

/* ─────────────────────────────────────────────────────────────────
   5. RESPONSIVE
   Maquetación mobile-first en el comportamiento real: por debajo de
   960px todo colapsa a una columna y la navegación pasa a pantalla completa.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .nav__links a, .nav__drop > summary { padding-inline: var(--sp-3); font-size: 0.875rem; }
  .nav__cta { padding-inline: 1.1rem; }
}

@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .steps   { grid-template-columns: repeat(2, 1fr); }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}

@media (max-width: 1000px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: grid; place-items: center; }
}

@media (max-width: 860px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .calc { grid-template-columns: 1fr; }
  .calc__out { position: static; }
  .stats { grid-template-columns: 1fr; gap: var(--sp-6); text-align: left; }
  .post-grid { grid-template-columns: 1fr; }
  .newsletter form { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  :root { --nav-h: 64px; }
  .grid--4, .steps { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .footer__top { grid-template-columns: 1fr; }
  .phone-row { grid-template-columns: 96px 1fr; }
  .choices--2 { grid-template-columns: 1fr; }
  .funnel__nav { flex-direction: column-reverse; }
  .funnel__nav .btn--primary { margin-left: 0; }
}

/* Impresión: sin decoración, texto legible en negro */
@media print {
  body { background: #fff; color: #000; }
  .nav, .footer, .cookie-bar, .btn, .inline-cta { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   6. HOME · PIEZAS DE ALTO IMPACTO
   Añadido tras la primera versión: el hero pasa de contar lo que
   hacemos a enseñarlo funcionando, y las secciones densas se vuelven
   interactivas para que la página gane fuerza sin ganar longitud.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 6.1 Hero a dos columnas ─────────────────────────────────────── */
.hero--demo { padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--section-y); }
.hero--demo .hero__grid {
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.hero--demo .hero__inner { max-width: none; }
/* Con la mitad del ancho, el titular necesita otra escala: si no, se
   parte en cuatro líneas y empuja los botones fuera de pantalla. */
.hero--demo h1 { font-size: clamp(2.1rem, 2.9vw + 1rem, 3.4rem); margin-bottom: var(--sp-4); }
.hero--demo .hero__sub { font-size: var(--fs-base); margin-bottom: var(--sp-6); max-width: 34rem; }
.hero--demo .badge { margin-bottom: var(--sp-4); }

/* ── 6.2 Demo: una conversación real resolviéndose sola ─────────── */
.demo {
  position: relative;
  background: linear-gradient(170deg, var(--surface) 0%, var(--bg-deep) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg), 0 0 0 1px rgba(46, 123, 255, 0.06);
  overflow: hidden;
}
.demo::after {
  /* brillo superior: da sensación de pantalla, no de tarjeta plana */
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(90, 200, 250, 0.5), transparent);
}
.demo__bar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.015);
}
.demo__avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  background: linear-gradient(140deg, var(--accent-fill), #1B4FBF);
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: var(--fs-xs);
}
.demo__who { font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; }
.demo__state { font-size: var(--fs-xs); color: var(--success); display: flex; align-items: center; gap: 6px; }
.demo__state i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.demo__clock { margin-left: auto; font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }

.demo__chat {
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  min-height: 296px;
}
.demo__msg {
  max-width: 84%;
  padding: 0.7rem 1rem;
  border-radius: var(--r-lg);
  font-size: var(--fs-sm); line-height: 1.5;
  animation: msgIn 0.42s var(--ease) both;
}
.demo__msg--in  { background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 5px; align-self: flex-start; }
.demo__msg--out { background: var(--accent-fill); color: var(--on-accent); border-bottom-right-radius: 5px; align-self: flex-end; }
.demo__msg b { display: block; font-size: var(--fs-xs); opacity: 0.65; font-weight: 600; margin-bottom: 3px; }
.demo__msg--out b { opacity: 0.8; }

/* Puntos de "escribiendo…" */
.demo__typing {
  display: inline-flex; gap: 4px; align-self: flex-start;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 0.85rem 1rem; border-radius: var(--r-lg); border-bottom-left-radius: 5px;
  animation: msgIn 0.3s var(--ease) both;
}
.demo__typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint);
  animation: typing 1.1s infinite;
}
.demo__typing i:nth-child(2) { animation-delay: 0.18s; }
.demo__typing i:nth-child(3) { animation-delay: 0.36s; }

/* Resultado: lo que ocurre en los sistemas mientras tanto */
.demo__result {
  margin: 0 var(--sp-5) var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(120deg, rgba(46, 212, 122, 0.10), transparent);
  border: 1px solid rgba(46, 212, 122, 0.28);
  border-radius: var(--r-md);
  display: flex; align-items: center; gap: var(--sp-4);
  animation: msgIn 0.5s var(--ease) both;
}
.demo__result svg { flex: 0 0 20px; color: var(--success); }
.demo__result strong { display: block; font-size: var(--fs-sm); }
.demo__result span { font-size: var(--fs-xs); color: var(--text-muted); }

/* Dato de velocidad, en la cabecera: flotando sobre el chat acababa
   tapando el resultado final. */
.demo__chip {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--r-full);
  font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap;
}
.demo__chip b { font-family: var(--font-display); font-size: var(--fs-sm); color: var(--accent); line-height: 1; }

@keyframes msgIn  { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ── 6.3 Cifras que cuentan al entrar en pantalla ───────────────── */
.stat__num[data-count] { font-variant-numeric: tabular-nums; }

/* ── 6.4 Pilares como panel interactivo ─────────────────────────── */
.pillars { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-6); align-items: start; }
.pillars__list { display: flex; flex-direction: column; gap: var(--sp-2); }
.pillars__btn {
  display: flex; align-items: flex-start; gap: var(--sp-4); width: 100%; text-align: left;
  padding: var(--sp-5); border-radius: var(--r-lg);
  background: transparent; border: 1px solid transparent;
  color: var(--text-muted); cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-sm);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pillars__btn:hover { background: var(--surface); color: var(--text); }
.pillars__btn[aria-selected="true"] {
  background: var(--surface); border-color: var(--accent-line); color: var(--text);
}
.pillars__btn strong { display: block; font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: -0.02em; margin-bottom: 2px; }
.pillars__btn .sub { display: block; font-size: var(--fs-xs); color: var(--text-faint); }
.pillars__ico {
  flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--surface-2); color: var(--text-faint);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pillars__btn[aria-selected="true"] .pillars__ico { background: var(--accent-soft); color: var(--accent); }

/* ── Pestañas con el panel a todo el ancho ──────────────────────────────
   La disposición en dos columnas funciona con paneles cortos, pero no con
   los del sistema: ahí dentro hay una tabla comparativa, tres tarjetas y
   dos listas enfrentadas, contenidos que necesitan ancho. Metidos en la
   columna estrecha crecían hasta 1.465 px de alto y dejaban un hueco vacío
   del mismo tamaño al lado de una lista de 295 px.
   Aquí los selectores van arriba en fila y el panel ocupa todo el ancho,
   que es lo que esos contenidos estaban pidiendo. */
.pillars--ancho { grid-template-columns: 1fr; gap: var(--sp-5); }
.pillars--ancho .pillars__list {
  flex-direction: row; gap: var(--sp-3);
}
.pillars--ancho .pillars__btn {
  flex: 1 1 0; min-width: 0;
  align-items: center;
  background: var(--surface-2); border-color: var(--border);
  padding: var(--sp-4) var(--sp-5);
}
.pillars--ancho .pillars__btn[aria-selected="true"] {
  border-color: var(--accent); background: var(--accent-soft);
}
/* El seleccionado apunta al panel: deja claro de dónde sale lo de abajo. */
.pillars--ancho .pillars__btn { position: relative; }
.pillars--ancho .pillars__btn[aria-selected="true"]::after {
  content: ''; position: absolute; left: 50%; bottom: calc(-1 * var(--sp-5) - 1px);
  width: 12px; height: 12px; margin-left: -6px;
  background: var(--surface); border-left: 1px solid var(--accent-line);
  border-top: 1px solid var(--accent-line); transform: rotate(45deg);
}
.pillars--ancho .pillars__panel { padding: var(--sp-7) var(--sp-8); }

@media (max-width: 860px) {
  .pillars--ancho .pillars__list { flex-direction: column; }
  .pillars--ancho .pillars__btn[aria-selected="true"]::after { display: none; }
  .pillars--ancho .pillars__panel { padding: var(--sp-5); }
}

.pillars__panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-7);
}
.pillars__panel[hidden] { display: none; }
.pillars__panel h3 { font-size: var(--fs-xl); }
.pillars__panel > p { color: var(--text-muted); font-size: var(--fs-sm); }

/* Flujo: antes → automatización → después */
.flow { display: flex; align-items: stretch; gap: var(--sp-3); margin: var(--sp-6) 0; flex-wrap: wrap; }
.flow__node {
  flex: 1 1 0; min-width: 130px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-4);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.flow__node b { display: block; color: var(--text); font-size: var(--fs-sm); margin-bottom: 4px; }
.flow__node--ia { border-color: var(--accent-line); background: linear-gradient(150deg, rgba(46,123,255,0.12), transparent); }
.flow__node--ia b { color: var(--accent); }
.flow__arrow { align-self: center; color: var(--text-faint); flex: 0 0 auto; }

.pillars__stat {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding-top: var(--sp-5); border-top: 1px solid var(--border);
}
.pillars__stat b { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--accent); line-height: 1; letter-spacing: -0.03em; }
.pillars__stat span { font-size: var(--fs-sm); color: var(--text-muted); }

/* ── 6.5 Proceso con línea de progreso ──────────────────────────── */
.steps--linea { position: relative; }
.steps--linea::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--border);
}
.steps--linea::after {
  content: ""; position: absolute; top: 0; left: 0; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  transition: width 1.5s var(--ease);
}
.steps--linea.is-in::after { width: 100%; }
.steps--linea .step { border-top: 0; }
.steps--linea .step::before { top: -0.85em; }

/* ── 6.6 CTA fija en móvil ──────────────────────────────────────── */
.cta-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: var(--bg-glass-2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  display: none;
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
}
.cta-movil.is-visible { transform: none; }
.cta-movil .btn { width: 100%; }

/* ── 6.7 Brillo que sigue al cursor en las tarjetas ─────────────── */
.glow { position: relative; overflow: hidden; }
.glow::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(46, 123, 255, 0.10), transparent 60%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.glow:hover::before { opacity: 1; }

/* ── 6.8 Responsive de las piezas nuevas ────────────────────────── */
@media (max-width: 1024px) {
  .hero--demo .hero__grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .pillars__list { flex-direction: row; overflow-x: auto; padding-bottom: var(--sp-2); scrollbar-width: none; }
  .pillars__list::-webkit-scrollbar { display: none; }
  .pillars__btn { flex: 0 0 auto; min-width: 210px; }
  .pillars__btn .sub { display: none; }
}

@media (max-width: 860px) {
  .cta-movil { display: block; }
  body { padding-bottom: 76px; }
  .cookie-bar { bottom: 84px; }
}

@media (max-width: 560px) {
  .demo__chat { min-height: 300px; padding: var(--sp-4); }
  .demo__chip { display: none; }   /* en pantallas pequeñas manda la conversación */
  .flow { flex-direction: column; }
  .flow__arrow { transform: rotate(90deg); align-self: flex-start; margin-left: var(--sp-5); }
}

@media (prefers-reduced-motion: reduce) {
  .demo__msg, .demo__typing, .demo__result { animation: none !important; }
  .steps--linea::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   7. SETTER IA · comparativa y piezas de la subpágina de lanzamientos
   ═══════════════════════════════════════════════════════════════════ */

/* ── 7.1 Comparativa a dos columnas ─────────────────────────────── */
.versus {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
}
.versus__col { background: var(--bg-elev); padding: var(--sp-6); }
.versus__col--ia { background: linear-gradient(165deg, rgba(46,123,255,0.10), var(--surface) 70%); }
.versus__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-bottom: var(--sp-5); margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.versus__head h3 { font-size: var(--fs-lg); margin: 0; }
.versus__tag {
  margin-left: auto; font-size: var(--fs-xs); font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text-faint);
}
.versus__col--ia .versus__tag { background: var(--accent-soft); color: var(--accent-text); }
.versus dl { margin: 0; display: grid; gap: var(--sp-4); }
.versus dt { font-size: var(--fs-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.1em; }
.versus dd { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.versus__col--ia dd { color: var(--text); }
.versus__col--ia dd strong { color: var(--accent-text); }

/* ── 7.2 Tarjetas de "hace / no hace" ───────────────────────────── */
.hace { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.hace__box { padding: var(--sp-6); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); }
.hace__box h4 { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.hace__box ul { list-style: none; padding: 0; margin: 0; }
.hace__box li { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-3); }
.hace__box li:last-child { margin-bottom: 0; }
.hace__box li svg { flex: 0 0 16px; margin-top: 0.3em; }
.hace__box--si li svg { color: var(--success); }
.hace__box--no li svg { color: var(--text-faint); }
.hace__box--no { background: var(--bg-elev); }

/* ── 7.3 Cinta de cifras del setter ─────────────────────────────── */
.tira {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5);
  padding: var(--sp-6); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
}
.tira div { text-align: center; }
.tira b {
  display: block; font-family: var(--font-display); font-size: var(--fs-2xl);
  font-weight: 800; letter-spacing: -0.03em; color: var(--accent); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tira span { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); }

@media (max-width: 860px) {
  .versus, .hace { grid-template-columns: 1fr; }
  .tira { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-4); }
}

/* ═══════════════════════════════════════════════════════════════════
   8. PIEZAS DE CONVERSIÓN
   Integraciones, confianza, fugas del lanzamiento y las piezas del
   equipo comercial.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 8.1 "Funciona con lo que ya usas" ──────────────────────────── */
.pills { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.pills span {
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--fs-sm); color: var(--text-muted);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pills span:hover { border-color: var(--accent-line); color: var(--text); }

/* ── 8.2 Banda de confianza / seguridad ─────────────────────────── */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.trust__item { display: flex; gap: var(--sp-4); }
.trust__item svg { flex: 0 0 22px; color: var(--accent); margin-top: 2px; }
.trust__item strong { display: block; font-size: var(--fs-sm); margin-bottom: 4px; }
.trust__item span { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.55; }

/* ── 8.3 Dónde se escapa el dinero de un lanzamiento ────────────── */
.fugas { display: grid; gap: var(--sp-3); }
.fuga {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: var(--sp-5);
  padding: var(--sp-5); border-radius: var(--r-md);
  background: var(--bg-elev); border: 1px solid var(--border);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fuga:hover { border-color: var(--border-strong); transform: translateX(3px); }
.fuga__n {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface-2);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  color: var(--text-faint);
}
.fuga strong { display: block; font-size: var(--fs-base); margin-bottom: 2px; }
.fuga span { font-size: var(--fs-sm); color: var(--text-muted); }
.fuga__tag {
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
  color: var(--danger); background: rgba(255, 107, 107, 0.10);
  border: 1px solid rgba(255, 107, 107, 0.25);
  padding: 4px 12px; border-radius: var(--r-full);
}
.fuga--tapada { background: linear-gradient(120deg, rgba(46,212,122,0.08), transparent); border-color: rgba(46,212,122,0.28); }
.fuga--tapada .fuga__n { background: rgba(46,212,122,0.14); color: var(--success); }
.fuga--tapada .fuga__tag { color: var(--success); background: rgba(46,212,122,0.10); border-color: rgba(46,212,122,0.3); }

/* ── 8.4 Las tres piezas del sistema ────────────────────────────── */
.piezas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); counter-reset: pieza; }
.pieza {
  position: relative; padding: var(--sp-7) var(--sp-6) var(--sp-6);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  display: flex; flex-direction: column;
}
.pieza--destacada { border-color: var(--accent-line); background: linear-gradient(170deg, rgba(46,123,255,0.10), var(--surface) 55%); }
/* Va en ::after a propósito: .glow usa ::before con opacity 0 y dejaba
   la etiqueta invisible en las tarjetas que llevan las dos clases. */
.pieza::after {
  counter-increment: pieza; content: "Pieza 0" counter(pieza);
  position: absolute; top: var(--sp-5); left: var(--sp-6);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint);
}
.pieza--destacada::after { color: var(--accent); }
.pieza h3 { margin-top: var(--sp-5); font-size: var(--fs-lg); }
.pieza > p { font-size: var(--fs-sm); color: var(--text-muted); }
.pieza .card__list { margin-top: auto; padding-top: var(--sp-4); }

/* ── 8.5 Cifra grande de titular ────────────────────────────────── */
.cifrote {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em;
  font-size: clamp(3rem, 7vw, 5.5rem); line-height: 0.95;
  background: linear-gradient(100deg, var(--accent), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block;
}

@media (max-width: 1024px) {
  .trust { grid-template-columns: repeat(2, 1fr); }
  .piezas { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .trust { grid-template-columns: 1fr; }
  .fuga { grid-template-columns: 34px 1fr; gap: var(--sp-4); }
  .fuga__n { width: 34px; height: 34px; }
  .fuga__tag { grid-column: 2; justify-self: start; margin-top: var(--sp-2); }
}

/* ═══════════════════════════════════════════════════════════════════
   9. CAPA DE ACABADO
   Lo que separa una web correcta de una que parece cara: textura en el
   fondo, luz que se mueve despacio, bordes con degradado en las
   superficies importantes y separadores que no son una línea plana.
   Todo con transform/opacity, sin coste de layout.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 9.1 Grano: quita el plano digital del fondo ─────────────────── */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 2; }

/* ── 9.2 Aurora del hero: luz que respira ───────────────────────── */
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -45%; left: 55%; width: min(900px, 90vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(90, 200, 250, 0.16), transparent 62%);
  filter: blur(24px);
  animation: aurora 18s ease-in-out infinite alternate;
}
@keyframes aurora {
  from { transform: translate(-50%, 0) scale(1); opacity: 0.75; }
  to   { transform: translate(-38%, 6%) scale(1.15); opacity: 1; }
}

/* ── 9.3 Separadores con degradado ──────────────────────────────── */
.section--elev { border-block: 0; position: relative; }
.section--elev::before,
.section--elev::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 20%, var(--accent-line) 50%, var(--border-strong) 80%, transparent);
}
.section--elev::before { top: 0; }
.section--elev::after  { bottom: 0; }

/* ── 9.4 Borde con degradado en las superficies clave ───────────── */
.demo, .cta-band, .pieza--destacada, .funnel, .newsletter {
  position: relative;
}
.demo::before,
.cta-band::before,
.pieza--destacada::before,
.funnel::before,
.newsletter::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(90,200,250,0.5), rgba(46,123,255,0.18) 35%, transparent 65%);
  /* La versión estándar acompaña siempre a la prefijada: sin ella, el borde
     degradado se pinta macizo en los navegadores que ya no llevan -webkit-. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* La demo ya tenía su propio brillo superior: sobra con el borde nuevo */
.demo::after { display: none; }

/* ── 9.5 Botones con brillo al pasar ────────────────────────────── */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.65s var(--ease);
}
.btn--primary:hover::after { transform: translateX(120%); }
.btn--primary { box-shadow: var(--sh-accent), inset 0 1px 0 rgba(255,255,255,0.22); }

/* ── 9.6 Barra de progreso de lectura ───────────────────────────── */
.progreso {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 130;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  transition: width 0.1s linear;
}

/* ── 9.7 Tipografía: texto largo mejor cortado ──────────────────── */
p, li, dd, blockquote { text-wrap: pretty; }
.eyebrow { position: relative; }

/* ── 9.8 Franja de cierre del pie ───────────────────────────────── */
.footer-cta {
  padding-block: var(--sp-10);
  background:
    radial-gradient(1000px 300px at 50% 0%, rgba(46,123,255,0.14), transparent 70%),
    var(--bg-elev);
  border-top: 1px solid var(--border);
  text-align: center;
}
.footer-cta h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-4); }
.footer-cta p { color: var(--text-muted); max-width: 42rem; margin: 0 auto var(--sp-6); }

/* ── 9.9 Tarjetas: elevación más creíble al pasar por encima ────── */
.card, .post-card, .quote, .pieza, .fuga { will-change: transform; }
.card:hover, .pieza:hover { box-shadow: var(--sh-md); }

/* ── 9.10 Foco visible ───────────────────────────────────────────
   Aquí había una segunda regla global de foco que pisaba a la del sistema
   (arriba, sección 2): pintaba el anillo en cian y le quitaba el redondeo.
   Dos reglas globales para lo mismo, con resultados distintos.
   Se elimina y manda la del sistema, en el azul de marca — el cian está
   reservado a halos y degradados, nunca a un elemento de interfaz. */

@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; }
  .btn--primary::after { display: none; }
  .progreso { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   10. INTEGRACIONES, CONFIANZA Y AJUSTE DE DENSIDAD
   ═══════════════════════════════════════════════════════════════════ */

/* ── 10.1 Parrilla de logos ──────────────────────────────────────── */
.logos-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3);
}
.logo-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); text-align: center;
  margin: 0; padding: var(--sp-5) var(--sp-3);
  min-height: 108px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.logo-tile svg {
  width: 26px; height: 26px; flex: 0 0 26px;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.logo-tile span {
  font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.3;
  transition: color var(--dur) var(--ease);
}
.logo-tile:hover {
  background: var(--surface-2); border-color: var(--border-strong);
  transform: translateY(-3px);
}
/* El color de marca solo aparece al pasar por encima: en reposo la
   parrilla se lee como un conjunto y no como un collage de colores. */
.logo-tile:hover svg { color: var(--marca, var(--accent)); transform: scale(1.08); }

/* Marcas que llegan como imagen y no como trazado (Holded).
   Se pintan por máscara: la silueta la pone el archivo y el color lo pone
   currentColor, exactamente el mismo valor que usan los SVG de al lado.
   Con un filtro de escala de grises y opacidad —que es como estaba— el gris
   resultante nunca coincide del todo y el logo se veía más apagado que el
   resto de la fila. */
.logo-tile__marca {
  width: 26px; height: 26px; flex: 0 0 26px;
  background-color: currentColor;
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.logo-tile:hover .logo-tile__marca { color: var(--marca, var(--accent)); transform: scale(1.08); }

/* Marcas apaisadas (WooCommerce). Su logo oficial es un logotipo con texto,
   no un símbolo: metido en la caja cuadrada de 26 px que usan los demás,
   la letra queda en dos píxeles y no se lee ni se le ve el mismo peso que
   al resto de la fila. Se le da el ancho que su forma pide. */
/* Con el lienzo ya recortado a la tinta, la marca es de 24x4,8: proporción
   de 5 a 1. Se le da el ancho que necesita para que su trazo pese lo mismo
   que el de un símbolo cuadrado de 26 px, y se centra en la altura de la
   casilla para que la fila no baile. */
.logo-tile--palabra svg { width: 56px; height: 11px; flex: 0 0 auto; margin: 7px 0; }
.logo-tile:hover span { color: var(--text); }

.logo-tile--otros {
  grid-column: 1 / -1;                 /* cierra la parrilla a lo ancho */
  flex-direction: row; gap: var(--sp-4);
  min-height: 62px; padding: var(--sp-4);
  background: linear-gradient(120deg, rgba(46,123,255,0.12), transparent 70%);
  border-color: var(--accent-line);
}
.logo-tile--otros span { font-size: var(--fs-sm); color: var(--text); }
.logo-tile--otros svg { color: var(--accent); }
.logo-tile--otros span { color: var(--text-muted); }

/* ── 10.2 Confianza: de lista suelta a tarjetas con jerarquía ────── */
.trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
}
.trust__item {
  display: block; padding: var(--sp-6);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.trust__item:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.trust__ico {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r-md); margin-bottom: var(--sp-5);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent);
}
.trust__item svg { flex: none; margin: 0; }
.trust__item strong { display: block; font-family: var(--font-display); font-size: var(--fs-base); letter-spacing: -0.02em; margin-bottom: var(--sp-3); }
.trust__item span { display: block; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }

/* ── 10.3 Densidad: FAQ y formulario piden menos peso ───────────── */
.section--compacta { --wrap-nar: 680px; }
.faq summary { font-size: var(--fs-base); padding: var(--sp-4) 0; }
.faq summary::after { font-size: 1.25rem; }
.faq p { font-size: var(--fs-sm); }
.faq details > div { padding-bottom: var(--sp-4); }

.funnel { padding: clamp(1.25rem, 2.5vw, 2rem); }
.funnel__step h3 { font-size: var(--fs-lg); }
.funnel__step > p { font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
.funnel .field { margin-bottom: var(--sp-4); }
.funnel .input, .funnel .select, .funnel .textarea { padding: 0.72rem 0.9rem; font-size: var(--fs-sm); }
.funnel .choice span { padding: var(--sp-3) var(--sp-4); }
.funnel .textarea { min-height: 86px; }
.funnel__progress { margin-bottom: var(--sp-5); }
.cta-band--compacta { padding: clamp(1.5rem, 3vw, 2.5rem); }

@media (max-width: 1024px) {
  .logos-grid { grid-template-columns: repeat(4, 1fr); }
  .trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .logos-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
  .logo-tile { min-height: 92px; padding: var(--sp-4) var(--sp-2); }
  .logo-tile svg { width: 22px; height: 22px; flex-basis: 22px; }
  .trust { grid-template-columns: 1fr; }
}

/* ── 10.4 Banda de clientes ─────────────────────────────────────── */
.clientes { margin-top: var(--sp-9); }
.clientes__titulo {
  text-align: center; font-size: var(--fs-xs); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--sp-6);
}
.clientes__banda {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-6) var(--sp-8);
}

/* La banda conserva fondo oscuro también en modo claro.
   Los logos que nos han pasado los clientes son blancos sobre transparente
   —tres de ellos, blanco puro— y sobre fondo claro desaparecerían. Las
   alternativas eran peores: invertirlos rompería los que sí llevan color de
   marca, y pedir versiones nuevas a cada cliente no está en nuestra mano.
   Una banda oscura es además un recurso habitual en secciones de "confían en
   nosotros": se lee como una decisión, no como un parche. */
:root[data-theme="light"] .clientes__banda,
:root[data-theme="light"] .clientes .marquee {
  background: #0F131C;
  border-radius: var(--r-lg);
  padding-block: var(--sp-6);
}
:root[data-theme="light"] .clientes__banda img,
:root[data-theme="light"] .clientes .marquee img { opacity: 0.82; }
:root[data-theme="light"] .clientes__banda img:hover,
:root[data-theme="light"] .clientes .marquee img:hover { opacity: 1; }
/* Igualar por altura deja los logos cuadrados pareciendo la mitad de
   grandes que los apaisados. Se igualan por peso visual: tres tamaños
   según la proporción de cada marca. */
.clientes__banda img {
  width: auto; opacity: 0.6;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.clientes__banda img.l-alto  { height: 46px; }   /* cuadrados */
.clientes__banda img.l-medio { height: 34px; }
.clientes__banda img.l-ancho { height: 24px; }   /* muy apaisados */
.clientes__banda img:hover { opacity: 1; transform: translateY(-2px); }

@media (max-width: 640px) {
  .clientes__banda { gap: var(--sp-5) var(--sp-6); }
  .clientes__banda img.l-alto  { height: 36px; }
  .clientes__banda img.l-medio { height: 27px; }
  .clientes__banda img.l-ancho { height: 19px; }
}

/* ── 10.5 Banner de clientes en movimiento ──────────────────────── */
.marquee {
  position: relative; overflow: hidden;
  padding-block: var(--sp-2);
  /* Los extremos se difuminan para que los logos no aparezcan cortados */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__pista {
  display: flex; width: max-content;
  animation: desliza 46s linear infinite;
}
.marquee:hover .marquee__pista { animation-play-state: paused; }
.marquee__grupo {
  display: flex; align-items: center; gap: var(--sp-9);
  list-style: none; margin: 0; padding: 0 var(--sp-8) 0 0;
}
.marquee__grupo li { margin: 0; display: flex; align-items: center; }
/* A color, como los originales: aquí el objetivo es que se reconozca la
   marca, no que la banda quede uniforme. */
.marquee img {
  width: auto; opacity: 0.92;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.marquee img.l-alto  { height: 46px; }
.marquee img.l-medio { height: 34px; }
.marquee img.l-ancho { height: 24px; }
.marquee img:hover { opacity: 1; transform: scale(1.06); }

/* La pista lleva el listado duplicado: al desplazar exactamente la mitad,
   el segundo grupo queda donde estaba el primero y el bucle no salta. */
@keyframes desliza {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 640px) {
  .marquee__grupo { gap: var(--sp-7); }
  .marquee img.l-alto  { height: 34px; }
  .marquee img.l-medio { height: 26px; }
  .marquee img.l-ancho { height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__pista { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee__grupo:last-child { display: none; }   /* sin bucle no hace falta el duplicado */
  .marquee__grupo { flex-wrap: wrap; justify-content: center; gap: var(--sp-6); padding: 0; }
}

/* ── 10.6 Fondo de pantalla en móvil: nada de barras apiladas ───── */
/* El aviso de cookies y la barra fija de CTA se sumaban y tapaban media
   pantalla en el móvil. Ahora la CTA espera a que se resuelva el aviso. */
body.avisando .cta-movil { display: none !important; }

@media (max-width: 640px) {
  .cookie-bar { padding: var(--sp-4); }
  .cookie-bar p { font-size: var(--fs-xs); margin-bottom: var(--sp-3); }
  .cookie-bar .btn-row { flex-direction: row; gap: var(--sp-2); margin-top: 0; }
  .cookie-bar .btn { width: auto; flex: 1; padding: 0.7rem 0.9rem; font-size: var(--fs-xs); }
}

/* ── 10.7 Fugas desplegables ────────────────────────────────────── */
/* Cada fuga se abre y enseña qué la tapa. Va con <details>, así que
   funciona sin JavaScript y el teclado la maneja sola. */
.fuga { padding: 0; display: block; }
.fuga > summary {
  display: grid; grid-template-columns: 44px 1fr auto auto;
  align-items: center; gap: var(--sp-5);
  padding: var(--sp-5); cursor: pointer; list-style: none;
}
.fuga > summary::-webkit-details-marker { display: none; }
.fuga__abrir {
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--border-strong);
  color: var(--text-faint); font-size: 1rem; line-height: 1;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.fuga[open] .fuga__abrir { transform: rotate(45deg); border-color: var(--accent); color: var(--accent); }
.fuga:hover .fuga__abrir { border-color: var(--accent-line); color: var(--accent); }
.fuga[open] { border-color: var(--accent-line); background: var(--surface); }
.fuga[open] .fuga__n { background: var(--accent-soft); color: var(--accent); }

.fuga__detalle {
  padding: 0 var(--sp-5) var(--sp-5) calc(44px + var(--sp-5) + var(--sp-5));
  animation: fadeUp 0.3s var(--ease) both;
}
.fuga__detalle p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-4); }
.fuga__arregla {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg); border: 1px solid var(--accent-line);
  border-radius: var(--r-full); font-size: var(--fs-xs);
}
.fuga__arregla b { color: var(--accent); }
.fuga__arregla svg { color: var(--success); flex: none; }

@media (max-width: 560px) {
  .fuga > summary { grid-template-columns: 34px 1fr auto; gap: var(--sp-3); }
  .fuga__tag { grid-column: 2 / -1; justify-self: start; margin-top: var(--sp-2); }
  .fuga__detalle { padding-left: var(--sp-5); }
}

/* ── 10.8 Setter IA: personalización y traspaso a persona ───────── */
.persona {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.persona__caja {
  padding: var(--sp-6); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.persona__caja:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.persona__caja h4 { font-size: var(--fs-base); margin-bottom: var(--sp-3); }
.persona__caja p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.persona__ico {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--r-md); margin-bottom: var(--sp-4);
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
}

/* Comparación de tono: mismo mensaje, escrito como lo escribiría el cliente */
.tono { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-6); }
.tono__caja {
  padding: var(--sp-5); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--bg-elev);
}
.tono__caja--bien { border-color: rgba(46,212,122,0.3); background: linear-gradient(150deg, rgba(46,212,122,0.07), transparent); }
.tono__quien { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--sp-3); display: block; }
.tono__caja p { font-size: var(--fs-sm); margin: 0; line-height: 1.6; }
.tono__caja--mal p { color: var(--text-faint); }

@media (max-width: 860px) {
  .persona, .tono { grid-template-columns: 1fr; }
}

/* ── 10.9 Cabecera de la página de confirmación ─────────────────── */
/* Sin navegación ni reclamos: solo la marca, centrada. Cada enlace de
   más en una confirmación es una vía de fuga. */
.cabecera-simple {
  /* Centrado en los dos ejes: la barra tiene altura propia y el logo se
     coloca en su centro, no solo a media anchura. */
  display: flex; align-items: center; justify-content: center;
  min-height: var(--nav-h);
  padding: var(--sp-4) var(--sp-5);
}
.cabecera-simple a { display: flex; align-items: center; }
/* Sin display aquí: esta regla es más específica que .logo--claro y forzaba
   a mostrar las dos versiones del logo a la vez, con lo que la visible
   quedaba desplazada media anchura. El display lo gobiernan las reglas de
   tema, que son las que saben cuál toca. */
.cabecera-simple img { height: 30px; width: auto; }
@media (max-width: 560px) {
  .cabecera-simple img { height: 26px; }
}

/* ── 10.10 Formulario y FAQ: menos peso visual ──────────────────── */
/* Los dos bloques ocupaban demasiado y empujaban el resto de la página.
   Se reduce el envoltorio, no la comodidad de uso: los campos siguen
   por encima de los 44 px de altura táctil que recomienda Apple. */
.section--compacta { --wrap-nar: 620px; }

.cta-band--compacta { padding: clamp(1.25rem, 2.4vw, 2rem); }
.cta-band--compacta .section-head h2 { font-size: var(--fs-2xl); }
.cta-band--compacta .section-head p { font-size: var(--fs-sm); }
.cta-band--compacta .section-head { margin-bottom: var(--sp-5) !important; }

.funnel { padding: clamp(1.1rem, 2vw, 1.6rem); border-radius: var(--r-lg); }
.funnel__progress { margin-bottom: var(--sp-4); }
.funnel__step h3 { font-size: var(--fs-base); margin-bottom: var(--sp-1); }
.funnel__step > p { font-size: var(--fs-xs); margin-bottom: var(--sp-4); }
.funnel .field { margin-bottom: var(--sp-3); }
.funnel .field label { font-size: var(--fs-xs); margin-bottom: 5px; }
.funnel .input, .funnel .select, .funnel .textarea {
  padding: 0.62rem 0.85rem; font-size: var(--fs-sm); border-radius: var(--r-sm);
}
.funnel .textarea { min-height: 72px; }
.funnel .choice span { padding: 0.62rem 0.9rem; font-size: var(--fs-xs); border-radius: var(--r-sm); }
.funnel .choices { gap: var(--sp-2); }
.funnel__nav { margin-top: var(--sp-4); }
.funnel__nav .btn { padding: 0.7rem 1.3rem; font-size: var(--fs-sm); }
.funnel__legal { font-size: 0.75rem; margin-top: var(--sp-3); }
.funnel .phone-row { grid-template-columns: 118px 1fr; gap: var(--sp-2); }

.faq summary { font-size: var(--fs-sm); padding: var(--sp-4) 0; gap: var(--sp-4); }
.faq summary::after { font-size: 1.15rem; }
.faq p { font-size: var(--fs-xs); line-height: 1.65; }
.faq details > div { padding-bottom: var(--sp-4); }
.section--compacta .section-head { margin-bottom: var(--sp-6); }
.section--compacta .section-head h2 { font-size: var(--fs-2xl); }
.section--compacta .section-head p { font-size: var(--fs-base); }

@media (max-width: 560px) {
  .funnel { padding: var(--sp-4); }
  .funnel .phone-row { grid-template-columns: 104px 1fr; }
  .funnel__nav { flex-direction: column-reverse; gap: var(--sp-2); }
  .funnel__nav .btn { width: 100%; }
}

/* ── 10.11 Comodidad al tacto ───────────────────────────────────── */
/* Al compactar el formulario, botones y campos bajaron de 40 px de alto.
   En ratón da igual; con el dedo, no. En dispositivos sin puntero fino se
   recupera el mínimo cómodo (44 px, la referencia de Apple) sin tocar el
   aspecto compacto en escritorio. */
@media (hover: none), (pointer: coarse) {
  .btn { min-height: 46px; padding-block: 0.8rem; }
  .funnel .input, .funnel .select, .funnel .textarea { min-height: 46px; font-size: 16px; }
  .funnel .choice span { min-height: 46px; display: flex; align-items: center; }
  .funnel__nav .btn { min-height: 48px; }
  .input, .select, .textarea { min-height: 46px; font-size: 16px; }
  .faq summary { min-height: 48px; align-items: center; }
  .fuga > summary { min-height: 56px; }
  .newsletter .btn { min-height: 48px; }
  /* 16px en los campos evita que iOS haga zoom al enfocarlos */
}

/* Deslizadores: la barra nativa es de 4 px y el pulsador diminuto. Se
   agrandan para poder arrastrarlos con el dedo sin fallar. */
.range {
  -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: var(--r-full);
  background: var(--border-strong);
  outline-offset: 6px;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg);
  box-shadow: var(--sh-control);
  cursor: grab;
}
.range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.08); }
.range::-moz-range-thumb {
  width: 24px; height: 24px; border: 3px solid var(--bg); border-radius: 50%;
  background: var(--accent); box-shadow: var(--sh-control);
}
.range::-moz-range-track { height: 6px; border-radius: var(--r-full); background: var(--border-strong); }

@media (hover: none), (pointer: coarse) {
  .range { height: 10px; padding-block: 12px; }      /* zona de agarre mayor */
  .range::-webkit-slider-thumb { width: 30px; height: 30px; }
  .range::-moz-range-thumb { width: 30px; height: 30px; }
}

/* ── 10.12 Diagnóstico en tres preguntas ────────────────────────── */
/* La calculadora responde "cuánto cuesta"; esto responde "por dónde
   empiezo", que es la otra pregunta que trae a la gente a la llamada. */
.diag {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden; position: relative;
}
.diag__paso { display: none; padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.diag__paso.is-activo { display: block; animation: fadeUp .35s var(--ease); }
.diag__pregunta { font-family: var(--font-display); font-size: var(--fs-xl); letter-spacing: -.02em; margin-bottom: var(--sp-2); }
.diag__ayuda { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }

.diag__ops { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.diag__op {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); min-height: 58px;
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); color: var(--text);
  font-family: var(--font-body); font-size: var(--fs-sm); text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.diag__op:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.diag__op b { display: block; font-weight: 600; }
.diag__op span { display: block; font-size: var(--fs-xs); color: var(--text-faint); }

.diag__barra { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) clamp(1.5rem, 3.5vw, 2.5rem) 0; }
.diag__barra i { flex: 1; height: 3px; background: var(--border); border-radius: var(--r-full); overflow: hidden; }
.diag__barra i b { display: block; height: 100%; width: 33%; background: var(--accent); transition: width .4s var(--ease); }
.diag__barra span { font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* Resultado: el plan por fases */
.diag__plan { display: grid; gap: var(--sp-3); margin: var(--sp-6) 0; }
.plan-fase {
  display: grid; grid-template-columns: 84px 1fr; gap: var(--sp-5); align-items: start;
  padding: var(--sp-5); border-radius: var(--r-md);
  background: var(--bg); border: 1px solid var(--border);
}
.plan-fase:first-child { border-color: var(--accent-line); background: linear-gradient(120deg, rgba(46,123,255,.10), transparent 70%); }
.plan-fase__c {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700;
  color: var(--text-faint); letter-spacing: .04em;
}
.plan-fase:first-child .plan-fase__c { color: var(--accent); }
.plan-fase strong { display: block; margin-bottom: 3px; }
.plan-fase span { font-size: var(--fs-sm); color: var(--text-muted); }
.diag__reinicia {
  background: none; border: 0; color: var(--text-faint); cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-xs); text-decoration: underline;
  padding: 0; margin-top: var(--sp-4);
}
.diag__reinicia:hover { color: var(--text); }

@media (max-width: 640px) {
  .diag__ops { grid-template-columns: 1fr; }
  .plan-fase { grid-template-columns: 1fr; gap: var(--sp-2); }
}


/* ── 10.13 Tarjetas de "lo que cambia" ──────────────────────────── */
/* Sustituyen a los testimonios inventados: cuentan el cambio, que es
   cierto, sin poner palabras en boca de nadie. */
.cambio {
  display: flex; flex-direction: column;
  padding: var(--sp-6); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cambio:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.cambio__cifra {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em;
  font-size: var(--fs-2xl); line-height: 1; color: var(--accent);
  margin-bottom: var(--sp-4);
}
.cambio h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-5); }
.cambio p { font-size: var(--fs-sm); margin: 0 0 var(--sp-4); padding-left: var(--sp-5); position: relative; }
.cambio p:last-child { margin-bottom: 0; }
.cambio__antes { color: var(--text-faint); }
.cambio__despues { color: var(--text-muted); }
.cambio p::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 2px; border-radius: 2px; background: currentColor;
}
.cambio__despues::before { background: var(--accent); width: 10px; }

/* ═══════════════════════════════════════════════════════════════════
   8. DISEÑO WEB · piezas de webs.propulfy.io

   La página vende webs y no enseñaba ninguna. Este bloque es el
   argumento visual: un navegador con una web dentro y, debajo, lo que
   pasa en cuanto alguien rellena su formulario. Es la tesis entera —
   la web no termina cuando se entrega— dicha sin un solo párrafo.

   Va todo con tokens y sin imágenes: pesa cero, se adapta a los dos
   temas y no hay nada que se vea borroso en una pantalla retina.
   ═══════════════════════════════════════════════════════════════════ */

.mock { position: relative; }

.mock__win {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.mock__bar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.mock__luces { display: flex; gap: 6px; flex: 0 0 auto; }
.mock__luces i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.mock__url {
  flex: 1; min-width: 0;
  font-size: var(--fs-xs); color: var(--text-faint);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px var(--sp-3);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* La "web" de dentro. Barras en vez de texto real: se lee como un
   diseño y no compite por la atención con el titular de al lado. */
.mock__vista { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
.mock__nav { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.mock__marca { width: 46px; height: 8px; border-radius: 3px; background: var(--text); opacity: 0.85; }
.mock__menu { margin-left: auto; display: flex; gap: var(--sp-3); }
.mock__menu i { width: 26px; height: 5px; border-radius: 3px; background: var(--border-strong); }

.mock__linea { height: 12px; border-radius: 4px; background: var(--text); opacity: 0.88; margin-bottom: 9px; }
.mock__linea--2 { width: 72%; }
.mock__sub { height: 6px; border-radius: 3px; background: var(--border-strong); margin-bottom: 7px; }
.mock__sub--2 { width: 56%; margin-bottom: var(--sp-5); }

.mock__cta {
  display: inline-block; height: 26px; width: 128px;
  border-radius: 999px; background: var(--accent);
  margin-bottom: var(--sp-6);
}
.mock__fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.mock__caja {
  height: 52px; border-radius: var(--r-sm);
  background: var(--bg); border: 1px solid var(--border);
}

/* Lo que pasa después, que es lo que nadie más entrega. Se solapa con
   el navegador a propósito: son la misma cosa, no dos servicios. */
.mock__flujo {
  position: relative; z-index: 1;
  margin: calc(var(--sp-6) * -1) var(--sp-4) 0 auto;
  width: min(22rem, 100%);
  background: var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  padding: var(--sp-4);
}
.mock__flujo b {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--accent); margin-bottom: var(--sp-3);
}
.mock__flujo b i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success); box-shadow: var(--anillo-ok);
}
.mock__paso {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--text-read);
  padding: 7px 0;
}
.mock__paso + .mock__paso { border-top: 1px solid var(--border); }
.mock__paso svg { flex: 0 0 15px; color: var(--success); }
.mock__paso em {
  margin-left: auto; font-style: normal;
  font-size: var(--fs-xs); color: var(--text-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── Lo que se entrega siempre ─────────────────────────────────────
   Rejilla de entregables. Es lo que hace que un presupuesto se
   entienda: no se compra "una web", se compran doce cosas. */
.entrega { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5) var(--sp-6); }
.entrega__item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.entrega__item svg { flex: 0 0 18px; color: var(--accent); margin-top: 3px; }
.entrega__item strong { display: block; font-size: var(--fs-sm); margin-bottom: 3px; }
.entrega__item span { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.55; }

@media (max-width: 1024px) {
  .entrega { grid-template-columns: repeat(2, 1fr); }
  .mock__flujo { margin-inline: auto; }
}
@media (max-width: 560px) {
  .entrega { grid-template-columns: 1fr; gap: var(--sp-4); }
  .mock__vista { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
  .mock__fila { gap: var(--sp-2); }
  .mock__caja { height: 42px; }
  .mock__flujo { width: 100%; margin-top: calc(var(--sp-4) * -1); }
}