/* =========================================================================
   BiselLab · Captación automática para negocios locales · styles.css
   Una sola hoja para todas las páginas. Sin framework y sin build.

   Dirección (4 de octubre de 2026): oscura y de lujo. Fondo medianoche,
   azul de marca #0858F8 para las acciones, rodio para los filetes y el azul
   del logo (#4D8BFF) para resaltar; nada de amarillo (David, 4/10/2026). Toda la letra en Manrope. Los relojes
   (esfera del hero, del proceso, iconos con minutería) se probaron y David
   los descartó. Los tres metales de los planes (bronce, acero, platino) siguen
   siendo los colores de nivel.

   Tema único oscuro A PROPÓSITO: el isotipo de cristal del hero recorta su
   fondo con mix-blend-mode: screen, que sobre un fondo claro lo haría
   desaparecer. No es un olvido del modo claro.

   Radios: tarjetas 24px · campos 12px · botones y chips en píldora.
   Capas (z-index): nav 40 · asistente 60-70 · toast 80.
   ========================================================================= */

/* ---------- 1. Tipografía ----------
   Una sola familia, Manrope (variable, 400-700), elegida por David el
   4/10/2026: titulares en 600, texto y botones en 400-500. Sustituye a Bodoni
   Moda, Michroma y Geist, que sumaban 92 KB; Manrope pesa 25. Se probó a
   combinarla con DM Sans y se descartó: son dos letras de palo demasiado
   parecidas y juntas se leen como un descuido, no como un contraste. */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Tokens ---------- */
:root {
  --bg:        #05070e;   /* esfera de medianoche */
  --bg-2:      #080b16;
  --surface:   #0c1120;
  --surface-2: #111830;
  --line:      rgba(214, 220, 232, .085);   /* filetes de rodio */
  --line-2:    rgba(214, 220, 232, .17);

  --txt:   #f3efe6;   /* marfil, más cálido que el blanco */
  --txt-2: #bab6ad;
  --txt-3: #8f8c85;

  --accent:    #0858f8;   /* acero pavonado: relleno de botones, 5,6:1 con blanco */
  --accent-2:  #2a6dff;   /* hover */
  --accent-hi: #7aa3ff;   /* texto e iconos azules sobre la esfera */
  --accent-glow: rgba(8, 88, 248, .35);
  --acero-claro: #3a72ff; /* agujas */

  /* Resalte: el azul del logo, algo más luminoso para leerse bien sobre el
     fondo (6,2:1). Sustituye al oro champán desde el 4/10/2026: David no
     quería texto amarillo, sino la paleta del logo. */
  --resalte:   #4d8bff;
  --resalte-2: #0858f8;
  --rodio: #d6dbe4;

  --ok:  #5fd39a;
  --err: #ff8a9a;

  --font:  "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* --mono se queda como alias de --font: lo usan los rótulos pequeños de
     todas las páginas (en mayúsculas y espaciados). Para texto de verdad
     monoespaciado (el mensaje del formulario) se usa --code. */
  --mono:  var(--font);
  --code:  "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-xs:   .8125rem;
  --fs-sm:   .9375rem;
  --fs-base: 1.0625rem;   /* 17 px: cómodo de leer en el móvil */
  --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-h3:   1.25rem;
  --fs-h2:   clamp(2rem, 1.35rem + 2.6vw, 3.4rem);
  --fs-h1:   clamp(2.6rem, 1.45rem + 4.4vw, 4.85rem);

  --pad-lat: 1.25rem;
  /* Espacio de cada sección arriba y abajo. Se bajó el 4/10/2026 (antes
     llegaba a 6rem) porque entre sección y sección quedaba demasiado hueco
     y la página se hacía larga. */
  --pad-sec: clamp(2.25rem, 1.6rem + 2.3vw, 4rem);
  --nav-h:   68px;
  --r:       24px;
  --r-sm:    12px;

  /* Movimiento. Una salida exponencial para casi todo (entra rápido y se posa
     despacio, que es lo que se lee como «caro»), otra simétrica para lo que se
     mueve dentro de la pantalla y una duración corta para lo que se pulsa. */
  /* Placa de esfera: el fondo de las tarjetas, con el índice de las 12 */
  --placa: linear-gradient(180deg, rgba(214, 220, 232, .04), rgba(214, 220, 232, .012));
  --indice: linear-gradient(var(--resalte), var(--resalte)) 50% 0 / 2px 11px no-repeat;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --t-press: 160ms;
}
@media (min-width: 768px) { :root { --pad-lat: 2rem; } }

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  color-scheme: dark;
  scrollbar-color: #262c38 var(--bg);
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.65;
  letter-spacing: .005em;   /* Manrope es estrecha: a tamaño de lectura respira mejor con un poco de aire */
  color: var(--txt);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Fondo de toda la web: la luz de una vitrina de relojería sobre la esfera
   de medianoche, fija y quieta (en el móvil no cuesta ni un fotograma), más
   un grano fino. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 80% 0%, rgba(30, 64, 160, .22), transparent 70%),
    radial-gradient(45% 40% at 0% 70%, rgba(77, 139, 255, .05), transparent 70%),
    radial-gradient(50% 40% at 100% 100%, rgba(8, 88, 248, .07), transparent 70%);
}

img, svg { display: block; max-width: 100%; }
svg { width: 1.25em; height: 1.25em; flex: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a, button, label, select { touch-action: manipulation; }
input, select, textarea { font: inherit; color: inherit; caret-color: var(--accent-hi); }
ul, ol { padding: 0; list-style: none; }
::selection { background: rgba(77, 139, 255, .38); color: #fff; }

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

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: .75rem; left: .75rem; z-index: 100;
  padding: .7rem 1rem; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 500;
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

/* Rendimiento: el navegador no maqueta ni pinta las secciones que aún no
   están en pantalla. Medido el 4/10/2026: la primera maquetación de la
   página pasaba de unos 140 ms a 20 ms en un ordenador (en un móvil normal,
   de más de medio segundo a poco más de 0,1). --alto es lo que mide cada
   sección de verdad: con él, la barra de desplazamiento no baila y los
   enlaces del menú llevan al sitio correcto. Si una sección cambia mucho de
   alto, actualiza su valor (escritorio aquí, móvil más abajo). El pie solo
   en la portada: en las páginas legales es corto y no compensa. */
/* contain-intrinsic-size es el alto del CONTENIDO: el relleno de la sección
   se suma encima, así que se descuenta. Sin descontarlo, el primer salto
   desde el menú a Planes se pasaba 350 px. */
main > section:not(.hero, .integra), .footer:has(.footer__grid) {
  content-visibility: auto;
  contain-intrinsic-size: auto calc(var(--alto, 800px) - 2 * var(--pad-sec));
}
.footer:has(.footer__grid) { contain-intrinsic-size: auto calc(var(--alto) - clamp(2.25rem, 1.6rem + 2.5vw, 3.75rem)); }
#problema { --alto: 580px; }   #como-funciona { --alto: 565px; }  #servicios { --alto: 860px; }
#demo { --alto: 960px; }       #sectores { --alto: 800px; }       #proceso { --alto: 525px; }
#planes { --alto: 1415px; }    .compromisos { --alto: 435px; }    #faq { --alto: 800px; }
#contacto { --alto: 985px; }   .footer { --alto: 555px; }
@media (max-width: 767px) {
  #problema { --alto: 885px; }   #como-funciona { --alto: 820px; }  #servicios { --alto: 815px; }
  #demo { --alto: 1260px; }      #sectores { --alto: 700px; }       #proceso { --alto: 730px; }
  #planes { --alto: 1740px; }    .compromisos { --alto: 775px; }    #faq { --alto: 1035px; }
  #contacto { --alto: 615px; }   .footer { --alto: 720px; }
}

/* ---------- 4. Tipos ---------- */
/* Titulares en Manrope 600: grandes pero con aire. Solo se cierra un poco el
   espaciado en los más grandes, que es donde una letra de palo se abre sola;
   apretarlo más lo hace parecer un logotipo. */
h1, h2, h3, h4 { font-weight: 600; color: var(--txt); text-wrap: balance; }
h1, h2, h3 { font-variant-numeric: lining-nums; }
:root { font-synthesis: none; }   /* Manrope no tiene cursiva: que nadie la invente */
h1 { font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.015em; }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.01em; }
p  { color: var(--txt-2); text-wrap: pretty; }
/* Medida de lectura: los párrafos sueltos no pasan de unas 68 letras por
   línea. Los que van dentro de tarjetas ya son más estrechos. */
.head p, .hero__lead, .faq__a p, .contact__aside > p, .legal p, .legal li, .faq-wrap__cab p { max-width: 68ch; }
strong, b { font-weight: 600; color: var(--txt); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--resalte);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: ""; width: 1.4rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--resalte));
}
/* Restos de la versión anterior que siguen en Recursos */
.eyebrow--dot::before { content: ""; }

/* Una palabra destacada: cursiva dorada, nunca un degradado sobre el texto */
.chrome { font-family: var(--font); color: var(--resalte); }

.container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--pad-lat); }
.section { padding-block: var(--pad-sec); position: relative; }
.section--tight { padding-block: calc(var(--pad-sec) * .7); }
.section--ink { background: linear-gradient(180deg, transparent, rgba(255,255,255,.015) 20%, rgba(255,255,255,.015) 80%, transparent); }

.head { max-width: 46rem; margin-bottom: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); }
.head h2 + p { margin-top: .75rem; font-size: var(--fs-lead); max-width: 40rem; }
.head--centro, .head--center { margin-inline: auto; text-align: center; }
.head--centro h2 + p, .head--center h2 + p { margin-inline: auto; }

/* ---------- 5. Botones ---------- */
.btn {
  --h: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: var(--h); padding: 0 1.45rem;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font); font-size: .9375rem; font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap; cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease,
              box-shadow .3s var(--ease-out), transform var(--t-press) var(--ease-out);
}
.btn svg { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
/* Respuesta al pulsar: todo lo que se toca cede un poco bajo el dedo */
.btn:active, .icon-btn:active, .chip:active, .demo__tab:active,
.way:active, .asis__op:active, .desliza-punto:active { transform: scale(.97); }
/* Acero pavonado: el azul de marca con el brillo del metal pulido */
.btn--primary {
  background: linear-gradient(180deg, #1a5ef8 0%, #0858f8 55%, #0646c9 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.25),
              0 1px 0 rgba(0,0,0,.4), 0 14px 30px -14px rgba(0,0,0,.9);
}
.btn--ghost { border-color: rgba(214, 220, 232, .26); background: rgba(255,255,255,.02); color: var(--txt); }
/* Los hover solo con ratón: en el móvil un toque dejaba el botón «encendido» */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: linear-gradient(180deg, #2468ff 0%, #0b5cff 55%, #0752e0 100%); }
  .btn--ghost:hover { background: rgba(77, 139, 255, .06); border-color: rgba(77, 139, 255, .55); }
  .btn:hover > svg:last-child:not(:first-child) { transform: translateX(3px); }
}
.btn--sm { --h: 40px; padding: 0 1.05rem; font-size: .875rem; }
.btn--lg { --h: 56px; padding: 0 1.75rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.icon-btn {
  width: 40px; height: 40px; flex: none;
  display: inline-grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--line-2);
  background: rgba(255,255,255,.03); color: var(--txt-2);
  transition: background-color .2s, color .2s, border-color .2s, transform var(--t-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: rgba(255,255,255,.08); color: var(--txt); } }
.icon-btn svg { width: 19px; height: 19px; }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag {
  font-family: var(--font); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .65rem; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--txt-2);
}

/* ---------- 6. Navegación ----------
   Sticky y no fixed: ocupa su sitio en el flujo y el hero empieza debajo sin
   tener que adivinar su alto. En el móvil los enlaces bajan a una segunda
   fila, todos a la vista (decisión del propietario: nada de hamburguesa). */
.nav {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
}
.nav.is-stuck {
  background: rgba(5, 7, 14, .78);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
.nav__inner { display: flex; align-items: center; gap: 1.25rem; min-height: 68px; }

.brand { display: inline-flex; align-items: center; gap: .55rem; flex: none; }
.brand__mark { width: 28px; height: auto; }
.brand__word { font-size: 1.25rem; font-weight: 700; letter-spacing: -.03em; color: var(--txt); }
.brand__word b { font-weight: 700; color: var(--accent-hi); }
.brand__tag {
  font-family: var(--font); font-weight: 400;
  text-transform: uppercase; color: var(--txt-3);
  padding-left: .6rem; margin-left: .1rem; border-left: 1px solid var(--line-2);
  line-height: 1.4; font-size: .625rem; font-weight: 600; letter-spacing: .1em;
}

/* Los enlaces de secciones son botones de verdad (pedido por David el
   4/10/2026: como texto suelto no se veía que se pudieran pulsar). Píldoras
   con filete de rodio y un fondo apenas encendido; al pasar el ratón y en la
   sección en la que estás, el azul de resalte. */
.nav__links { display: flex; align-items: center; gap: .4rem; margin-inline: auto; }
.nav__links a {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 0 .95rem; border-radius: 999px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(214, 220, 232, .07), rgba(214, 220, 232, .025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  font-size: .875rem; font-weight: 500; color: var(--txt);
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform var(--t-press) var(--ease-out);
}
.nav__links a:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { border-color: rgba(77, 139, 255, .55); background: rgba(77, 139, 255, .08); }
}
.nav__links a.is-active {
  color: #fff; border-color: rgba(77, 139, 255, .7);
  background: rgba(77, 139, 255, .16);
}
.nav__cta { display: flex; align-items: center; gap: .5rem; flex: none; }
/* El WhatsApp de la barra, iluminado con su verde (lo pidió el propietario):
   se reconoce de un vistazo sin competir con el azul de «Reservar llamada». */
.nav__wa {
  color: #25d366;
  border-color: rgba(37, 211, 102, .6);
  background: rgba(37, 211, 102, .16);
  box-shadow: 0 0 24px -5px rgba(37, 211, 102, .65), inset 0 1px 0 rgba(255,255,255,.08);
}
.nav__wa:hover { color: #4be083; background: rgba(37, 211, 102, .2); border-color: rgba(37, 211, 102, .7); }
.nav__wa svg { width: 20px; height: 20px; }
/* «Reservar» y «llamada» van en piezas separadas para poder recortar el botón
   en pantallas muy estrechas; el espacio entre ambas lo pone este gap. */
.nav__cta .btn--sm { gap: .28em; }

@media (max-width: 960px) {
  .nav__inner { flex-wrap: wrap; row-gap: 0; min-height: 0; padding-top: .6rem; }
  .nav__cta { margin-left: auto; }
  .nav__links {
    order: 3; width: 100%; margin: 0;
    overflow-x: auto; scrollbar-width: none;
    padding: .5rem 0 .6rem; gap: .4rem;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .nav__links.is-fin { -webkit-mask-image: none; mask-image: none; }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a { white-space: nowrap; min-height: 34px; padding: 0 .85rem; font-size: .8125rem; flex: none; }
}
/* Portátiles pequeños: la barra cabe en una fila si se aprieta un poco */
@media (min-width: 961px) and (max-width: 1180px) {
  .brand__tag { display: none; }
  .nav__links { gap: .3rem; }
  .nav__links a { padding: 0 .7rem; font-size: .8125rem; }
}
/* Móviles: logo, WhatsApp y «Reservar llamada» en una sola fila y a la misma
   altura en cualquier ancho. Se aprieta por escalones en vez de quitar el
   WhatsApp, y solo por debajo de 340 px el botón se queda en «Reservar». */
@media (max-width: 960px) {
  .nav__inner { column-gap: .75rem; }
  .brand__tag { display: none; }
  .brand__mark { width: 28px; }
}
@media (max-width: 400px) {
  .nav__cta { gap: .4rem; }
  .nav__cta .icon-btn, .nav__cta .btn--sm { --h: 38px; height: 38px; }
  .nav__cta .icon-btn { width: 38px; }
  .nav__cta .btn--sm { padding: 0 .85rem; font-size: .8125rem; }
  .brand { gap: .45rem; }
  .brand__mark { width: 26px; }
  .brand__word { font-size: 1.0625rem; }
}
@media (max-width: 339px) {
  .nav__mas { display: none; }
}
@media (max-width: 400px) { .nav__cta .btn--sm { font-size: .8125rem; } }

/* ---------- 7. Hero ---------- */
/* overflow-x: clip y no hidden: recorta lo que el isotipo sobresale por los
   lados en el móvil sin crear un contenedor con scroll ni un contexto de
   apilamiento, que romperían el mix-blend-mode. */
.hero { position: relative; overflow-x: clip; }
.hero__grid {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
  gap: clamp(2rem, 4vw, 4rem);
  /* Hasta 740 px: con más, en pantallas altas quedaba un hueco vacío encima
     y debajo del contenido */
  min-height: min(calc(100svh - var(--nav-h)), 680px);
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(1.75rem, 3.5vw, 3rem);
}
/* La columna de texto y su fondo ocupan la misma celda de la rejilla: el
   isotipo se centra en la columna y el texto queda encima. */
.hero__fondo, .hero__copy { grid-column: 1; grid-row: 1; }
.hero__visual { grid-column: 2; grid-row: 1; }
.hero__copy { position: relative; z-index: 1; }
.hero__fondo { position: relative; align-self: stretch; pointer-events: none; }
.hero__b {
  position: absolute; left: 50%; top: 50%;
  height: min(118%, 640px); width: auto; max-width: none;
  transform: translate(-50%, -50%);   /* centrado también sin animación */
  mix-blend-mode: screen; opacity: .28;
  /* Se desvanece hacia los bordes: así no hay un corte duro y el texto, que
     cae sobre la parte más tenue, se sigue leyendo bien. */
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  animation: flotarB 12s ease-in-out infinite;
}
@keyframes flotarB {
  0%, 100% { transform: translate(-50%, -50%) perspective(1200px) rotateY(-10deg) rotateX(4deg); }
  50%      { transform: translate(-50%, calc(-50% - 14px)) perspective(1200px) rotateY(10deg) rotateX(-3deg); }
}
.hero h1 { margin-bottom: 1.4rem; }

/* Entrada del hero al cargar: el único momento coreografiado de la página.
   Cada pieza sube y se enfoca, escalonada. Solo CSS y con estado final
   visible: si la animación no corre (movimiento reducido), todo está en su
   sitio. El isotipo no se anima aquí: es lo que más tarda en pintarse y no
   se le debe retrasar. */
@media (prefers-reduced-motion: no-preference) {
  .hero__copy .eyebrow, .hero__l1, .hero__l2, .hero__lead, .hero__copy .btn-row {
    animation: aparecer 1s var(--ease) both;
  }
  .hero__l1                { animation-delay: .08s; }
  .hero__l2                { animation-delay: .16s; }
  .hero__lead              { animation-delay: .26s; }
  .hero__copy .btn-row     { animation-delay: .34s; }
  .hero__visual            { animation: aparecerVisual 1.2s var(--ease) .3s both; }
}
@keyframes aparecer {
  from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes aparecerVisual {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
/* El titular de captación (4/10/2026) es más largo que el anterior: va algo
   más pequeño para que quepa en cuatro líneas como mucho en el ordenador. La
   segunda mitad, la promesa, en el azul del logo (color liso, nunca un
   degradado sobre el texto). */
.hero h1 { font-size: clamp(2.3rem, 1.3rem + 3.3vw, 3.9rem); }
.hero__l1, .hero__l2 { display: block; }
.hero__l2 { color: var(--resalte); }
.hero__lead { font-size: var(--fs-lead); max-width: 34rem; margin-bottom: 2.2rem; }

/* A la derecha solo el producto. El isotipo estaba detrás del teléfono y los
   dos se pisaban; ahora vive junto al manifiesto. Aquí basta un halo azul. */
.hero__visual { position: relative; display: grid; place-items: center; isolation: isolate; }
.hero__visual::before {
  content: ""; position: absolute; z-index: -1; inset: 8% -6% 4%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(8, 88, 248, .30), rgba(8, 88, 248, .08) 55%, transparent 72%);
  filter: blur(10px); pointer-events: none;
}
@keyframes flotar {
  0%, 100% { transform: perspective(1200px) translateY(0) rotateY(-8deg) rotateX(4deg); }
  50%      { transform: perspective(1200px) translateY(-14px) rotateY(8deg) rotateX(-2deg); }
}

/* Teléfono con la conversación de ejemplo: un
   marco de acero pulido alrededor de la pantalla. */
.chat-demo {
  position: relative; width: min(100%, 368px); margin: 0;
  border-radius: 36px; border: 7px solid transparent;
  background:
    linear-gradient(180deg, #0f1528, #070a14) padding-box,
    linear-gradient(160deg, #e3e7ee, #6f7786 38%, #262c37 58%, #c9ced6) border-box;
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.5);
  overflow: hidden; justify-self: center;
}
.chat-demo__cab {
  display: flex; align-items: center; gap: .7rem;
  padding: .95rem 1.1rem; border-bottom: 1px solid var(--line);
}
.chat-demo__avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #1b2230, #0e1218); border: 1px solid var(--line-2);
  color: var(--accent-hi);
}
.chat-demo__avatar svg { width: 18px; height: 18px; }
.chat-demo__quien { display: grid; line-height: 1.25; }
.chat-demo__quien b { font-size: .9375rem; font-weight: 500; }
.chat-demo__quien span { font-size: .75rem; color: var(--txt-3); }
.chat-demo__canal { margin-left: auto; width: 20px; height: 20px; color: #25d366; opacity: .9; }
/* Alto fijo: con el «escribiendo…» intercalado la conversación crecía unos 40 px
   y el teléfono, centrado, se desplazaba al rellenarse. */
.chat-demo__log { display: flex; flex-direction: column; gap: .55rem; padding: 1.1rem; height: 432px; overflow: hidden; }
@media (max-width: 420px) { .chat-demo__log { height: 470px; } }
.chat-demo__msg {
  max-width: 84%; padding: .65rem .85rem; border-radius: 16px;
  font-size: .875rem; line-height: 1.45; color: var(--txt);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.chat-demo__msg--cli { align-self: flex-end; background: #232a37; border-bottom-right-radius: 5px; }
.chat-demo__msg--bot {
  align-self: flex-start; border-bottom-left-radius: 5px;
  background: rgba(8, 88, 248, .16); border: 1px solid rgba(110, 155, 255, .22);
}
.chat-demo__evento {
  align-self: center; display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .35rem; padding: .4rem .8rem; border-radius: 999px;
  font-size: .75rem; font-weight: 500; color: var(--ok);
  background: rgba(95, 211, 154, .09); border: 1px solid rgba(95, 211, 154, .25);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.chat-demo__evento svg { width: 15px; height: 15px; }
.chat-demo__escribe { display: none; align-self: flex-start; gap: 4px; padding: .7rem .85rem; border-radius: 16px; background: rgba(255,255,255,.05); }
.chat-demo__escribe i { width: 6px; height: 6px; border-radius: 50%; background: var(--txt-3); animation: puntos 1.1s infinite ease-in-out; }
.chat-demo__escribe i:nth-child(2) { animation-delay: .15s; }
.chat-demo__escribe i:nth-child(3) { animation-delay: .3s; }
@keyframes puntos { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Con JavaScript, los mensajes entran de uno en uno */
.js-chat .chat-demo__msg:not(.is-in),
.js-chat .chat-demo__evento:not(.is-in) { opacity: 0; transform: translateY(8px); }
.js-chat .chat-demo__escribe.is-on { display: inline-flex; }

@media (max-width: 900px) {
  /* En el móvil el texto del hero va centrado (lo pidió el propietario), igual
     que el isotipo de fondo y el teléfono: todo sobre el mismo eje. */
  .hero__copy { text-align: center; }
  .hero__copy .eyebrow { justify-content: center; }
  .hero__lead { margin-inline: auto; }
  .hero__copy .btn-row { justify-content: center; }
  .hero__grid { grid-template-columns: 1fr; min-height: 0; padding-top: 1.5rem; }
  .hero__visual { grid-column: 1; grid-row: 2; padding-block: .5rem 0; }
  .chat-demo { justify-self: center; }
  .hero__b { height: min(112%, 520px); opacity: .22; }
}
/* En el móvil los dos botones del hero a todo el ancho: «Quiero automatizar
   mi negocio» no cabe en una línea junto a otro botón. */
@media (max-width: 560px) {
  .hero__copy .btn-row { flex-direction: column; }
  .hero__copy .btn-row .btn { width: 100%; white-space: normal; text-align: center; }
}

/* ---------- 8. Integraciones ---------- */
.integra { padding-block: 1rem .5rem; }
.integra__t {
  text-align: center; font-size: var(--fs-xs); color: var(--txt-3);
  margin-bottom: 1.4rem;
}
.integra__logos {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(1.4rem, 3vw, 2.6rem);
}
/* En el móvil, cuatro y cuatro: con el hueco de escritorio quedaban seis y dos */
@media (max-width: 560px) { .integra__logos { max-width: 180px; margin-inline: auto; gap: 1.25rem 1.5rem; } }
.integra__logos svg { width: 24px; height: 24px; color: var(--txt); opacity: .55; transition: opacity .25s, transform .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .integra__logos li:hover svg { opacity: 1; transform: translateY(-2px); } }

/* ---------- 9. Manifiesto ---------- */
.manifiesto__txt {
  font-size: clamp(1.5rem, 1.05rem + 2vw, 2.6rem);
  line-height: 1.25; letter-spacing: -.01em; font-weight: 500;
  color: var(--txt); max-width: 22em;
}
/* Las palabras se encienden al pasar. Solo donde el navegador sabe atar una
   animación al scroll; en los demás, el texto se ve entero desde el principio. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .manifiesto__txt .w {
      animation: encender linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 42%;
    }
  }
}
/* Apagadas al 42 %: por debajo no llegaban al contraste mínimo de texto grande */
@keyframes encender { from { color: rgba(243, 239, 230, .42); } to { color: var(--txt); } }

.pilares {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
}
/* Las cuatro situaciones del problema (4/10/2026) */
.pilares--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 768px) and (max-width: 1000px) { .pilares--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pilar { border-top: 1px solid var(--line-2); padding-top: 1.3rem; }
.pilar svg { width: 24px; height: 24px; color: var(--resalte); margin-bottom: .9rem; }
.pilar h3 { font-size: 1.125rem; margin-bottom: .35rem; }
.pilar p { font-size: var(--fs-sm); }

/* La frase que cierra el problema y da paso a la solución */
.manifiesto__cierre {
  display: flex; align-items: center; gap: .9rem;
  width: fit-content; max-width: 100%;
  margin-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); padding: .95rem 1.4rem .95rem 1.1rem;
  border-radius: 20px; border: 1px solid rgba(77, 139, 255, .38); background: rgba(77, 139, 255, .07);
  font-size: var(--fs-lead); line-height: 1.4; color: var(--txt);
}
.manifiesto__cierre img { width: 28px; height: auto; flex: none; }
@media (max-width: 767px) {
  .pilares { grid-template-columns: 1fr; gap: 1.1rem; }
  /* Centrado en el móvil, como el hero. El icono va en la línea del título:
     apilado, cada pilar gastaba 40 px más sin decir nada nuevo. */
  .manifiesto .eyebrow { display: flex; justify-content: center; }
  .manifiesto__txt { text-align: center; margin-inline: auto; }
  .pilar { text-align: center; padding-top: 1.1rem; }
  .pilar svg { display: inline-block; vertical-align: -5px; width: 22px; height: 22px; margin: 0 .45rem 0 0; }
  .pilar h3 { display: inline; }
  .pilar p { margin-top: .35rem; }
  .manifiesto__cierre { margin-inline: auto; text-align: left; font-size: 1rem; }
}

/* ---------- 9b. La solución: el recorrido ----------
   Consulta → respuesta → solicitud ordenada → aviso o reserva → venta. Seis
   paradas unidas por una línea que recorre un pulso de luz. En el ordenador
   van en fila; en la tablet y el móvil, en columna, como los pasos. */
.recorrido {
  position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem; margin-top: .5rem;
}
.recorrido::before, .recorrido::after { content: ""; position: absolute; pointer-events: none; }
.recorrido::before {
  top: 27px; left: calc(100% / 12); right: calc(100% / 12); height: 1px;
  background: linear-gradient(90deg, var(--line-2), rgba(77, 139, 255, .6));
}
.recorrido::after {
  top: 26px; left: calc(100% / 12); width: 10%; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--resalte), transparent);
  opacity: 0;
}
.recorrido li { position: relative; display: grid; justify-items: center; align-content: start; gap: .3rem; text-align: center; }
.recorrido__ico {
  width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: .8rem;
  border-radius: 50%; border: 1px solid var(--line-2); color: var(--accent-hi);
  /* Fondo opaco para tapar la línea que pasa por detrás */
  background: linear-gradient(180deg, rgba(214, 220, 232, .07), rgba(214, 220, 232, .02)), var(--bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.recorrido__ico svg { width: 22px; height: 22px; }
.recorrido b { font-size: 1.0625rem; line-height: 1.3; }
.recorrido li > span:last-child { font-size: .875rem; line-height: 1.5; color: var(--txt-2); max-width: 15rem; }
/* La última parada es la del negocio: la venta la cierras tú */
.recorrido__fin .recorrido__ico {
  color: #fff; border-color: rgba(122, 163, 255, .7);
  background: linear-gradient(180deg, #1a5ef8 0%, #0858f8 55%, #0646c9 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 34px -6px var(--accent-glow);
}
@media (prefers-reduced-motion: no-preference) {
  /* La lista no se desvanece entera: entran sus paradas, una detrás de otra */
  .recorrido[data-reveal] { opacity: 1; transform: none; }
  .recorrido[data-reveal] li { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .recorrido.is-visible li { opacity: 1; transform: none; }
  .recorrido.is-visible li:nth-child(2) { transition-delay: .12s; }
  .recorrido.is-visible li:nth-child(3) { transition-delay: .24s; }
  .recorrido.is-visible li:nth-child(4) { transition-delay: .36s; }
  .recorrido.is-visible li:nth-child(5) { transition-delay: .48s; }
  .recorrido.is-visible li:nth-child(6) { transition-delay: .6s; }
  .recorrido.is-visible::after { animation: pulsoRecorrido 4.5s var(--ease-in-out) 1s infinite; }
}
/* 733 %: el pulso mide un 10 % y recorre el 73 % que queda de línea */
@keyframes pulsoRecorrido {
  0% { transform: translateX(0); opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { transform: translateX(733%); opacity: 0; }
}
@media (max-width: 1000px) {
  .recorrido { grid-template-columns: 1fr; gap: 1.1rem; max-width: 34rem; margin-inline: auto; }
  .recorrido::before {
    top: 27px; bottom: 27px; left: 27px; right: auto; width: 1px; height: auto;
    background: linear-gradient(180deg, var(--line-2), rgba(77, 139, 255, .6));
  }
  .recorrido::after { display: none; }
  .recorrido li { grid-template-columns: 54px 1fr; justify-items: start; align-items: center; column-gap: 1rem; row-gap: .1rem; text-align: left; }
  .recorrido__ico { grid-row: span 2; margin: 0; }
  .recorrido li > span:last-child { max-width: none; }
}

/* ---------- 10. Qué hacemos: tres bloques ----------
   Captación, Automatización y Conversión (4/10/2026). Antes eran siete
   celdas de servicios sueltos. Cada bloque conserva una animación de la
   versión anterior: los canales, el pulso del flujo y el embudo. En el móvil
   y la tablet es un carrusel (.desliza). */
.bento { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cell {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.75rem;
  border-radius: var(--r); border: 1px solid var(--line);
  background: var(--indice), var(--placa);
  transition: border-color .3s var(--ease);
}
/* Foco de luz que sigue al cursor (--mx/--my desde main.js) */
.cell::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(77, 139, 255, .09), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
@media (hover: hover) and (pointer: fine) {
  .cell:hover { border-color: var(--line-2); }
  .cell:hover::before { opacity: 1; }
}
.cell h3 { position: relative; font-size: 1.5rem; }
.cell p { position: relative; font-size: var(--fs-sm); }
.cell__lista {
  position: relative; display: grid; gap: .6rem;
  margin-top: .8rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.cell__lista li { display: flex; gap: .6rem; font-size: var(--fs-sm); color: var(--txt-2); line-height: 1.45; }
.cell__lista svg { width: 17px; height: 17px; margin-top: .15rem; color: var(--resalte); }

.canales { display: flex; gap: .5rem; flex: none; margin-bottom: 1.4rem; }
.canales span {
  width: 52px; height: 52px; display: grid; place-items: center; color: var(--txt-2);
  border-radius: 14px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(214, 220, 232, .07), rgba(214, 220, 232, .02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.canales svg { width: 22px; height: 22px; }

.flujo { display: flex; align-items: center; margin-bottom: 1.4rem; min-height: 52px; }
.flujo span {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; color: var(--accent-hi);
  border-radius: 14px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(214, 220, 232, .07), rgba(214, 220, 232, .02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.flujo span svg { width: 19px; height: 19px; }
.flujo i { position: relative; flex: 1; height: 1px; background: var(--line-2); overflow: hidden; }
.flujo i::after {
  content: ""; position: absolute; top: -1px; left: 0; width: 30%; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--resalte), transparent);
  animation: recorrer 2.4s linear infinite;
}
.flujo i + span + i::after { animation-delay: 1.2s; }
@keyframes recorrer { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

.embudo { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: 1.4rem; min-height: 52px; }
.embudo span {
  font-size: .75rem; padding: .3rem .65rem; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--txt-2);
}
.embudo span.is-on { color: #0a1230; background: var(--resalte); border-color: var(--resalte); }
.embudo svg { width: 13px; height: 13px; color: var(--txt-3); }

@media (max-width: 640px) {
  .cell { padding: 1.35rem; }
  .cell h3 { font-size: 1.375rem; }
}

/* ---------- 11. Ejemplo: conversación y ficha del cliente ---------- */
.demo__tabs {
  display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem;
  width: fit-content; max-width: 100%; margin: 0 auto 1.25rem;
  padding: .35rem; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.02);
}
.demo__tab {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 42px; padding: 0 1.1rem; border-radius: 999px;
  font-size: .9rem; color: var(--txt-2);
  transition: background-color .25s var(--ease), color .25s, transform var(--t-press) var(--ease-out);
}
.demo__tab svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) { .demo__tab:hover { color: var(--txt); } }
.demo__tab[aria-selected="true"] { background: rgba(77, 139, 255, .12); color: var(--txt); box-shadow: inset 0 0 0 1px rgba(77, 139, 255, .45); }
.demo__tab[aria-selected="true"] svg { color: var(--resalte); }

.demo__escena {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); gap: 1rem;
  max-width: 1040px; margin-inline: auto;
}
.llamada, .acciones {
  border-radius: var(--r); border: 1px solid var(--line);
  background: var(--indice), var(--placa);
}
/* Côtes de Genève: las franjas pulidas de un movimiento, de fondo en la demo
   y en los planes, desvanecidas arriba y abajo */
.demo::before, #planes::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(105deg, rgba(214, 220, 232, 0) 0, rgba(214, 220, 232, .02) 22px, rgba(214, 220, 232, 0) 44px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.llamada { padding: 1.25rem; display: flex; flex-direction: column; }
.llamada__cab { display: flex; align-items: center; gap: .8rem; }
.llamada__avatar {
  position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(8, 88, 248, .18); color: var(--accent-hi); border: 1px solid rgba(110,155,255,.3);
}
.llamada__avatar svg { width: 20px; height: 20px; }
.demo.is-hablando .llamada__avatar::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid rgba(110,155,255,.45); animation: anillo 1.8s var(--ease) infinite;
}
@keyframes anillo { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.llamada__quien { display: grid; line-height: 1.3; }
.llamada__quien b { font-weight: 500; }
.llamada__quien span { font-family: var(--mono); font-size: .75rem; color: var(--txt-3); }
.llamada__repetir { margin-left: auto; }
.llamada__log {
  display: flex; flex-direction: column; gap: .6rem;
  height: 380px; overflow-y: auto; margin-top: 1rem; padding: .5rem .25rem .25rem;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.llamada__linea {
  display: grid; gap: .15rem; max-width: 88%;
  animation: entrar .45s var(--ease) both;
}
.llamada__linea span { font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-3); }
.llamada__linea p { padding: .6rem .85rem; border-radius: 14px; font-size: .9rem; color: var(--txt); line-height: 1.45; background: rgba(255,255,255,.05); }
.llamada__linea--ia p { background: rgba(8, 88, 248, .15); border: 1px solid rgba(110,155,255,.2); }
.llamada__linea--cli { align-self: flex-end; text-align: right; }
.llamada__linea--cli p { text-align: left; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.acciones { padding: 1.5rem; display: flex; flex-direction: column; }
.acciones__nota { margin-top: auto; padding-top: 1.25rem; font-size: var(--fs-xs); color: var(--txt-3); }

/* Ficha de «Nuevo cliente potencial»: lo que le llega al negocio. Cada dato
   empieza en «…» y se rellena cuando el asistente se entera (main.js). */
.ficha__cab {
  font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--txt-3); margin-bottom: 1rem;
}
.ficha__tarjeta {
  padding: 1.1rem 1.2rem .5rem; border-radius: 18px;
  border: 1px solid rgba(77, 139, 255, .35); background: rgba(77, 139, 255, .06);
}
.ficha__t { display: flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--txt); margin-bottom: .7rem; }
.ficha__t svg { width: 20px; height: 20px; color: var(--resalte); }
.ficha__fila {
  display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); gap: .75rem; align-items: baseline;
  padding: .65rem 0; border-top: 1px solid var(--line); font-size: .9rem; line-height: 1.4;
}
.ficha__fila dt { color: var(--txt-3); }
.ficha__fila dd { margin: 0; color: var(--txt-3); }
.ficha__fila.is-hecho dd { color: var(--txt); animation: entrar .45s var(--ease) both; }
.ficha__fila--estado.is-hecho dd {
  justify-self: start; padding: .15rem .7rem; border-radius: 999px;
  font-size: .8125rem; font-weight: 500; color: #fff;
  background: rgba(77, 139, 255, .2); border: 1px solid rgba(77, 139, 255, .55);
}

@media (max-width: 860px) {
  .demo__escena { grid-template-columns: 1fr; }
  .llamada__log { height: 330px; }
  .acciones { padding: 1.25rem; }
}
@media (max-width: 520px) {
  .demo__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 20px; width: 100%; }
  .demo__tab { flex-direction: column; justify-content: center; gap: .25rem; min-height: 60px; padding: .45rem .3rem; border-radius: 15px; font-size: .8rem; line-height: 1.2; text-align: center; }
  .llamada__repetir span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- 12. Sectores: galería horizontal ---------- */
.sectores__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.sectores__cab .head { margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }
.sectores__flechas { display: flex; gap: .5rem; margin-bottom: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); }
.galeria {
  --borde: max(var(--pad-lat), calc((100vw - 1240px) / 2 + var(--pad-lat)));
  display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 400px);
  gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--borde);
  padding-inline: var(--borde); padding-bottom: .5rem;
  scrollbar-width: none;
}
.galeria::-webkit-scrollbar { display: none; }
.sector { scroll-snap-align: start; }
.sector img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 20px; border: 1px solid var(--line);
  margin-bottom: 1.1rem;
  transition: filter .6s ease, border-color .4s ease;
}
@media (hover: hover) and (pointer: fine) {
  .sector:hover img { filter: brightness(1.1); border-color: var(--line-2); }
}
.sector h3 { margin-bottom: .35rem; }
.sector p { font-size: var(--fs-sm); }
@media (max-width: 640px) { .sectores__flechas { display: none; } }

/* ---------- 13. Proceso ---------- */
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; position: relative; }
.pasos::before {
  content: ""; position: absolute; top: 24px; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, var(--accent-hi), var(--line-2) 40%, var(--line-2));
  transform-origin: left center;
  transition: transform 1.6s var(--ease-in-out) .15s;
}
/* La línea que une los pasos se dibuja cuando aparecen: cuenta el recorrido */
@media (prefers-reduced-motion: no-preference) {
  .pasos:has(.paso[data-reveal])::before { transform: scaleX(0); }
  .pasos:has(.paso.is-visible)::before  { transform: none; }
}
.paso { position: relative; }
.paso__ico {
  position: relative; width: 48px; height: 48px; display: grid; place-items: center; color: var(--accent-hi);
  border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg);
  margin-bottom: 1.3rem;
}
.paso:first-child .paso__ico { border-color: rgba(77, 139, 255, .7); }
.paso__ico svg { width: 21px; height: 21px; }
.paso h3 { margin-bottom: .45rem; }
.paso p { font-size: var(--fs-sm); }
@media (max-width: 900px) {
  .pasos { grid-template-columns: 1fr; gap: 1.25rem; }
  .pasos::before { top: 24px; bottom: 24px; left: 24px; right: auto; width: 1px; height: auto;
    background: linear-gradient(180deg, var(--accent-hi), var(--line-2) 40%); transform-origin: center top; }
  .pasos:has(.paso[data-reveal])::before { transform: scaleY(0); }
  .pasos:has(.paso.is-visible)::before  { transform: none; }
  .paso { display: grid; grid-template-columns: 48px 1fr; column-gap: 1.1rem; }
  .paso__ico { grid-row: span 2; margin: 0; }
}

/* ---------- 14. Planes ----------
   Cuatro planes desde el 4/10/2026: Esencial (solo web), Starter, Growth y
   Pro. Colores de nivel: grafito → cobre → acero → platino. El azul de marca
   no entra en las tarjetas: con un solo botón azul, el ojo lee «este» antes
   de haber comparado nada. */
.plan--grafito { --tier: #7d8796; --tier-text: #aab3c0; }
.plan--bronce  { --tier: #cb6b2c; --tier-text: #e09a6c; }
.plan--acero   { --tier: #8fa8c7; --tier-text: #b3c6de; }
.plan--oro     { --tier: #dfe3ea; --tier-text: #f1f3f6; }   /* platino; antes latón amarillo */

/* Todas a la misma altura y por FILAS comunes (lo pidió el propietario el 27/09/2026):
   nivel, título, descripción, precio, lista, «ver todo», para quién y botón
   empiezan a la misma altura en todas. Se puede estirar sin dejar agujeros
   porque las listas van plegadas a seis puntos (initPlanesPlegados). */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
}
/* Entre la tablet y el portátil pequeño, dos y dos. Las filas comunes
   no dejan hueco entre las dos parejas: se lo da el margen. */
@media (min-width: 901px) and (max-width: 1140px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan:nth-child(n+3) { margin-top: 1.5rem; }
}
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: 1.5rem; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--placa);
}
/* Después de la regla general de .plan: si va antes, su display:flex gana y
   las tarjetas dejan de compartir filas. */
@supports (grid-template-rows: subgrid) {
  .plans { grid-template-rows: repeat(8, auto); row-gap: 0; }
  .plan { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .plan > * { align-self: start; }
  .plan > .plan__nivel { grid-row: 1; }
  .plan > h3           { grid-row: 2; }
  .plan > .plan__for   { grid-row: 3; }
  .plan > .plan__price { grid-row: 4; }
  .plan > ul           { grid-row: 5; }
  .plan > .plan__mas   { grid-row: 6; justify-self: start; }
  .plan > .plan__para  { grid-row: 7; }
  .plan > .btn         { grid-row: 8; align-self: end; }
/* El índice de las 12, en el metal de la caja de cada plan */
.plan::before {
  content: ""; position: absolute; top: -1px; left: 50%; width: 3px; height: 14px; translate: -50% 0;
  border-radius: 0 0 2px 2px; background: var(--tier);
}
.plan--feat {
  border-color: rgba(143, 168, 199, .35);
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(143, 168, 199, .11), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  box-shadow: 0 40px 100px -40px rgba(8, 88, 248, .35);
}
/* Montado sobre el borde superior: con cuatro columnas, arriba a la derecha
   pisaba el nombre del nivel. */
.plan__badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 1;
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  padding: .3rem .75rem; border-radius: 999px;
  font-size: .75rem; font-weight: 500; color: var(--bg);
  background: var(--tier-text);
}
.plan__badge svg { width: 14px; height: 14px; }
.plan__nivel {
  font-family: var(--mono); font-size: .6875rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tier-text); margin-bottom: .6rem;
}
.plan h3 { font-size: 1.5rem; margin-bottom: .45rem; }
.plan__for { font-size: var(--fs-sm); }
.plan__price {
  display: grid; margin: 1.4rem 0 1.25rem; padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: lining-nums;
  font-size: 2.4rem; font-weight: 600; letter-spacing: -.035em; line-height: 1.05; color: var(--txt);
}
.plan__price small {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: .6875rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--txt-3); margin-bottom: .45rem;
}
/* La mensualidad, o en el Esencial qué incluye el precio */
.plan__mes { margin-top: .45rem; font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0; color: var(--tier-text); }
.plan__price--texto { font-size: 2rem; }
.plan ul { display: grid; gap: .6rem; margin-bottom: 1.4rem; }
.plan li { display: flex; gap: .6rem; font-size: var(--fs-sm); color: var(--txt-2); line-height: 1.45; }
.plan li svg { width: 17px; height: 17px; margin-top: .15rem; color: var(--tier-text); }
.plan__para { font-size: var(--fs-xs); color: var(--txt-3); margin-bottom: 1.4rem; }

.btn--tier {
  margin-top: auto; white-space: normal; text-align: center;
  border-color: color-mix(in srgb, var(--tier) 55%, transparent);
  background: color-mix(in srgb, var(--tier) 10%, transparent);
  color: var(--txt);
}
.btn--tier:hover { background: color-mix(in srgb, var(--tier) 22%, transparent); border-color: var(--tier); }

/* Listas plegadas a seis puntos (main.js añade .plegable y el botón) */
.plans.plegable:not(.is-abierto) .plan ul li:nth-child(n+7) { display: none; }
.plan__mas {
  align-self: flex-start; margin: -.5rem 0 1.4rem; width: fit-content;
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--fs-xs); font-weight: 500; color: var(--tier-text);
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}

/* Qué incluye el pago inicial y la mensualidad */
.ia-incluye {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem;
  margin-top: 1rem; padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  border-radius: var(--r); border: 1px solid var(--line); background: rgba(255,255,255,.02);
}
.ia-incluye h3 { font-size: 1.125rem; margin-bottom: 1rem; }
.ia-incluye h3 small {
  margin-left: .5rem; font-size: .6875rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--txt-3); white-space: nowrap;
}
.ia-incluye ul { display: grid; gap: .7rem; }
.ia-incluye li { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--txt-2); }
.ia-incluye li svg { width: 18px; height: 18px; margin-top: .15rem; color: var(--resalte); }
@media (max-width: 760px) {
  .ia-incluye { grid-template-columns: 1fr; gap: 1.25rem; }
  .ia-incluye h3 { margin-bottom: .7rem; }
  .ia-incluye h3 small { display: block; margin: .3rem 0 0; }
  .ia-incluye ul { gap: .5rem; }
}

.plans__note { text-align: center; font-size: var(--fs-xs); color: var(--txt-3); margin: 1.25rem auto 0; max-width: 62rem; }

/* Carrusel del móvil, compartido por cualquier .desliza */
.desliza-pie { display: none; }
@media (max-width: 900px) {
  .desliza {
    display: grid; grid-auto-flow: column; grid-template-columns: none;
    /* En el móvil, una tarjeta y un asomo de la siguiente. En la tablet
       caben dos: al 84 % del ancho cada tarjeta medía 650 px y se leía torpe. */
    grid-auto-columns: min(84%, 340px); gap: .8rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--pad-lat) * -1); padding-inline: var(--pad-lat);
    scroll-padding-inline: var(--pad-lat);
  }
  .desliza::-webkit-scrollbar { display: none; }
  .desliza > * { scroll-snap-align: center; }
  /* Sitio para la etiqueta «Recomendado», que asoma por encima de la tarjeta:
     el carrusel recorta lo que sale de su caja. */
  .plans.desliza { padding-top: .9rem; }
  .desliza-pie { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.25rem; }
  .desliza-puntos { display: flex; }
  /* El botón mide 24 px (el mínimo para el dedo); el punto que se ve, 8 */
  .desliza-punto { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; }
  .desliza-punto::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--line-2); transition: width .3s var(--ease), background-color .3s; }
  .desliza-punto.is-on::after { width: 22px; background: var(--resalte); }
  .desliza-texto { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); color: var(--txt-3); }
  .desliza-texto svg { width: 14px; height: 14px; }
}
@media (max-width: 360px) {
  .desliza { grid-auto-columns: 88%; }
  .plan { padding: 1.35rem; }
  .plan__price { font-size: 2.1rem; }
  .plan__price--texto { font-size: 1.7rem; }
}

/* ---------- 15. Compromisos ---------- */
.pledge { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.pledge__item { border-top: 1px solid var(--line-2); padding-top: 1.4rem; }
.pledge__item svg { width: 24px; height: 24px; color: var(--resalte); margin-bottom: 1rem; }
.pledge__item h3 { margin-bottom: .45rem; }
.pledge__item p { font-size: var(--fs-sm); }
@media (max-width: 1000px) { .pledge { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  {
  .pledge { grid-template-columns: 1fr; gap: 1.1rem; }
  .pledge__item { display: grid; grid-template-columns: 26px 1fr; column-gap: .9rem; padding-top: 1.1rem; }
  .pledge__item svg { grid-row: span 2; margin: .1rem 0 0; }
}

/* ---------- 16. FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.faq-wrap__cab { position: sticky; top: calc(var(--nav-h) + 2rem); }
.faq-wrap__cab p { margin: 1rem 0 1.6rem; font-size: var(--fs-lead); }
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  width: 100%; padding: 1.35rem 0; text-align: left;
  font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; color: var(--txt);
}
.faq__q svg { width: 20px; height: 20px; color: var(--txt-3); transition: transform .35s var(--ease), color .3s; }
@media (hover: hover) and (pointer: fine) { .faq__q:hover svg { color: var(--txt); } }
.faq__q[aria-expanded="true"] svg { transform: rotate(45deg); color: var(--resalte); }
.faq__a { height: 0; overflow: hidden; visibility: hidden; transition: height .4s var(--ease), visibility .4s; }
.faq__a > div {
  padding-bottom: 1.4rem; max-width: 40rem;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .25s ease, transform .35s var(--ease-out);
}
.faq__item.is-open .faq__a > div { opacity: 1; transform: none; transition-delay: .06s; }
.faq__a p { font-size: var(--fs-sm); }
.faq__item.is-open .faq__a { visibility: visible; }
@media (max-width: 900px) {
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-wrap__cab { position: static; }
  .faq-wrap__cab p { margin: .8rem 0 1.25rem; }
  .faq__q { padding: 1.1rem 0; font-size: 1.0625rem; }
}

/* ---------- 17. Contacto y formulario ---------- */
.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
.contact__aside h2 { margin-bottom: 1rem; }
.contact__aside > p { font-size: var(--fs-lead); margin-bottom: 2rem; max-width: 30rem; }
.contact__ways { display: grid; gap: .65rem; }
.way {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.1rem; border-radius: 18px; border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
  transition: border-color .25s, background-color .25s, transform var(--t-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .way:hover { border-color: var(--line-2); background: rgba(255,255,255,.05); }
  .way:hover .way__go { transform: translate(2px, -2px); color: var(--txt); }
}
.way__ico {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center; color: var(--accent-hi);
  border-radius: 14px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(214, 220, 232, .07), rgba(214, 220, 232, .02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.way__ico svg { width: 21px; height: 21px; }
.way > span:nth-child(2) { display: grid; min-width: 0; }
.way b { font-size: 1.0625rem; font-weight: 600; }
.way > span > span { font-size: var(--fs-xs); color: var(--txt-3); overflow-wrap: anywhere; }
.way__go { margin-left: auto; width: 18px; height: 18px; color: var(--txt-3); transition: transform .3s var(--ease-out), color .25s; }
/* La llamada a la acción final: lo primero que se ve en Contacto, por encima
   de WhatsApp y el correo. */
.contact__cta { width: 100%; max-width: 26rem; }
.contact__aside > .contact__o {
  margin: 1.4rem 0 .75rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--txt-3);
}

.form {
  padding: clamp(1.4rem, 1rem + 1.5vw, 2rem); border-radius: var(--r);
  border: 1px solid var(--line); background: var(--indice), var(--placa);
}
.form__t { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: var(--txt); margin-bottom: 1.25rem; }
.field { display: grid; gap: .45rem; margin-bottom: 1.1rem; }
.field--row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.field label, #lf-needs-label { font-size: .875rem; font-weight: 500; color: var(--txt); }
.field__opc { color: var(--txt-3); font-weight: 400; }
.field input, .field select, .field textarea, .newsletter input {
  width: 100%; min-height: 48px; padding: .75rem .95rem;
  border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: rgba(255,255,255,.035); color: var(--txt);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field textarea { min-height: 112px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--txt-3) 50%), linear-gradient(135deg, var(--txt-3) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.field select option { background: var(--surface-2); color: var(--txt); }
::placeholder { color: #80879a; opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus, .newsletter input:focus {
  outline: none; border-color: var(--accent-hi); background: rgba(255,255,255,.05);
  box-shadow: 0 0 0 3px rgba(110, 155, 255, .2);
}
.err { display: none; font-size: .8125rem; color: var(--err); }
.field.has-error .err { display: block; }
.field.has-error input { border-color: var(--err); }
#lf-consent-err { margin: -.4rem 0 1rem; }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  min-height: 38px; padding: 0 .95rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.025);
  font-size: .85rem; color: var(--txt-2);
  transition: background-color .2s, border-color .2s, color .2s, transform var(--t-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .chip:hover { color: var(--txt); border-color: rgba(255,255,255,.24); } }
.chip.is-on { background: rgba(77, 139, 255, .16); border-color: rgba(77, 139, 255, .65); color: #fff; }

.consent { display: flex; gap: .7rem; align-items: flex-start; margin: .4rem 0 1.25rem; }
.consent input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--accent); flex: none; }
.consent label { font-size: .8125rem; color: var(--txt-2); line-height: 1.5; }
.consent a, .legal a, .note a { color: var(--txt); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }

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

/* Formulario plegado en el móvil y la tablet (main.js pone .form--plegable y
   enseña el botón). En el ordenador el botón no existe y el formulario se ve. */
.form-abrir { margin-top: .65rem; }
.form-abrir__flecha { margin-left: auto; transition: transform .35s var(--ease-out); }
.form-abrir[aria-expanded="true"] .form-abrir__flecha { transform: rotate(180deg); }
@media (min-width: 901px) { .form-abrir { display: none; } }
@media (max-width: 900px) {
  .contact { gap: 1rem; }
  .form-abrir { justify-content: flex-start; white-space: normal; text-align: left; line-height: 1.4; padding-block: .6rem; }
  .form--plegable:not(.is-abierto) { display: none; }
  .form--plegable.is-abierto { animation: entrar .5s var(--ease) both; }
}
/* En el móvil las dos vías de contacto van en una fila de dos botones en
   lugar de dos tarjetas apiladas. El correo completo sigue en el pie. */
@media (max-width: 560px) {
  .contact__ways { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .way { flex-direction: column; justify-content: center; text-align: center; gap: .55rem; padding: .9rem .4rem; }
  .way > span > span, .way__go { display: none; }
  .way b { font-size: .875rem; line-height: 1.2; }
}
@media (max-width: 560px) {
  .field--row { grid-template-columns: 1fr; }
  .form .btn--block { min-height: 48px; }
}

/* Panel de respaldo del mailto: (main.js) */
.respaldo {
  position: relative; margin-top: 1rem; padding: 1.25rem;
  border-radius: var(--r); border: 1px solid rgba(110,155,255,.35); background: rgba(8, 88, 248, .08);
}
.respaldo__x { position: absolute; top: .6rem; right: .75rem; width: 32px; height: 32px; font-size: 1.4rem; color: var(--txt-3); }
.respaldo__t { font-size: var(--fs-sm); margin-bottom: .8rem; padding-right: 2rem; }
.respaldo__msg {
  white-space: pre-wrap; font-family: var(--code); font-size: .78rem; color: var(--txt-2);
  max-height: 180px; overflow: auto; padding: .8rem; border-radius: var(--r-sm);
  background: rgba(0,0,0,.25); border: 1px solid var(--line); margin-bottom: .9rem;
}
.respaldo__bts { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- 18. Footer ---------- */
.footer { position: relative; overflow: hidden; border-top: 1px solid var(--line); padding-top: clamp(2.25rem, 1.6rem + 2.5vw, 3.75rem); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.footer__claim { margin: 1rem 0 1.4rem; font-size: var(--fs-sm); max-width: 22rem; }
.footer__vias { display: grid; gap: .55rem; }
.footer__via { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--fs-sm); color: var(--txt-2); width: fit-content; transition: color .2s; }
@media (hover: hover) and (pointer: fine) { .footer__via:hover { color: var(--txt); } }
.footer__via svg { width: 18px; height: 18px; color: var(--resalte); }
.footer__socials { display: flex; gap: .5rem; margin-top: 1rem; }
.footer__socials:empty { display: none; }
.footer :is(h3, h4) { font-family: var(--font); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--resalte); margin-bottom: 1rem; }
.footer ul { display: grid; gap: .55rem; }
.footer ul a { font-size: var(--fs-sm); color: var(--txt-2); transition: color .2s; }
.footer ul a:hover { color: var(--txt); }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 2rem; padding-block: 1.25rem; border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--txt-3);
}
.footer__bottom a:hover { color: var(--txt); }
.footer__arriba { display: inline-flex; align-items: center; gap: .4rem; }
.footer__arriba svg { width: 15px; height: 15px; }
.footer__marca {
  font-size: clamp(3.5rem, 1rem + 15vw, 15rem); font-weight: 700; letter-spacing: -.06em; line-height: .8;
  text-align: center; margin-bottom: -.14em; user-select: none;
  color: rgba(243, 239, 230, .05);
}
/* La marca gigante es decoración: va en un pseudoelemento y no como texto,
   para que nadie la lea ni la evalúe como un texto de poco contraste. */
.footer__marca::before { content: attr(data-marca); }
/* En el móvil, en vez de apilar las cuatro columnas una debajo de otra: la
   marca centrada, Servicios y La agencia lado a lado, y Legal en una sola
   línea. Así el pie mide la mitad. */
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
  .footer__brand { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .footer__vias { justify-items: center; grid-auto-flow: column; gap: 1.25rem; }
  .footer__grid > div:last-child { grid-column: 1 / -1; text-align: center; padding-top: 1.25rem; border-top: 1px solid var(--line); }
  .footer__grid > div:last-child ul { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem 1.5rem; }
  .footer__grid > div:last-child :is(h3, h4) { display: none; }
  .footer__bottom { justify-content: center; text-align: center; margin-top: 1.25rem; }
  .footer ul a { font-size: .875rem; }
}

/* ---------- 19. Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 1.25rem; z-index: 80;
  max-width: min(92vw, 440px); padding: .8rem 1.1rem; border-radius: 14px;
  background: rgba(19, 23, 32, .95); border: 1px solid var(--line-2); color: var(--txt);
  font-size: var(--fs-sm); box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);
  transform: translate(-50%, 150%); opacity: 0; pointer-events: none;
  transition: transform .25s ease-in, opacity .2s ease-in;
}
.toast.is-in { transform: translate(-50%, 0); opacity: 1; transition: transform .45s var(--ease-out), opacity .3s ease-out; }

/* ---------- 20. Entrada al hacer scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }


/* ---------- 20b. Iconos en movimiento ----------
   Tres capas, todas con transform y opacity (no repintan):
   1. Entrada: cuando su tarjeta aparece, el icono salta desde pequeño y algo
      girado, con un rebote corto, un poco después que la tarjeta.
   2. Reposo: cada familia de iconos tiene su gesto propio en bucle, lento y
      escalonado, para que la página respire sin que todo se mueva a la vez.
   3. Ratón: al pasar por la tarjeta, el icono se inclina y sube.
   Todo se para fuera de pantalla (main.js pone .is-fuera en la sección) y
   desaparece con movimiento reducido. */
:root { --rebote: cubic-bezier(.34, 1.56, .64, 1); }
@media (prefers-reduced-motion: no-preference) {
  /* 1. Entrada */
  [data-reveal] :is(.paso__ico, .canales span, .flujo span, .embudo span),
  [data-reveal].pilar > svg, [data-reveal].pledge__item > svg {
    opacity: 0; transform: scale(.6) rotate(-10deg);
    transition: opacity .5s ease .25s, transform .8s var(--rebote) .25s;
  }
  [data-reveal].is-visible :is(.paso__ico, .canales span, .flujo span, .embudo span),
  [data-reveal].is-visible.pilar > svg, [data-reveal].is-visible.pledge__item > svg {
    opacity: 1; transform: none;
  }
  /* las piezas de un mismo grupo entran una detrás de otra */
  .canales span:nth-child(2), .flujo span:nth-of-type(2), .embudo span:nth-of-type(2) { transition-delay: .33s, .33s; }
  .canales span:nth-child(3), .flujo span:nth-of-type(3), .embudo span:nth-of-type(3) { transition-delay: .41s, .41s; }

  /* 2. Reposo */
  /* Pilares y compromisos: flotan despacio, cada uno a su tiempo */
  .is-visible.pilar > svg, .is-visible.pledge__item > svg { animation: flotarIcono 4.8s ease-in-out 1.2s infinite; }
  .pilar:nth-child(2) > svg, .pledge__item:nth-child(2) > svg { animation-delay: 1.8s; }
  .pilar:nth-child(3) > svg, .pledge__item:nth-child(3) > svg { animation-delay: 2.4s; }
  .pilar:nth-child(4) > svg, .pledge__item:nth-child(4) > svg { animation-delay: 3s; }

  /* Canales de captación: llega una consulta a cada uno, por turnos */
  .is-visible .canales span { animation: mensajeCanal 4.8s var(--ease-out) 1.2s infinite; }
  .is-visible .canales span:nth-child(2) { animation-delay: 2.4s; }
  .is-visible .canales span:nth-child(3) { animation-delay: 3.6s; }

  /* Conversión: la consulta avanza hasta «Reserva» */
  .is-visible .embudo span:nth-of-type(1) { animation: etapa 6s ease-in-out 1s infinite; }
  .is-visible .embudo span:nth-of-type(2) { animation: etapa 6s ease-in-out 3s infinite; }
  .is-visible .embudo svg { animation: avance 6s ease-in-out 1s infinite; }

  /* Automatizaciones: cada pieza late cuando le llega el pulso */
  .is-visible .flujo span { animation: latePieza 2.4s ease-out 1s infinite; }
  .is-visible .flujo span:nth-of-type(2) { animation-delay: 1.75s; }
  .is-visible .flujo span:nth-of-type(3) { animation-delay: 2.5s; }

  /* Proceso: los iconos de los pasos se balancean uno detrás de otro */
  .is-visible.paso .paso__ico svg { animation: girito 6s var(--ease-in-out) 1.4s infinite; }
  .paso:nth-child(2) .paso__ico svg { animation-delay: 2.9s; }
  .paso:nth-child(3) .paso__ico svg { animation-delay: 4.4s; }
  .paso:nth-child(4) .paso__ico svg { animation-delay: 5.9s; }

  /* Integraciones: una ola de luz recorre los logotipos */
  .integra__logos li svg { animation: ola 7s ease-in-out infinite; }
  .integra__logos li:nth-child(2) svg { animation-delay: .15s; }
  .integra__logos li:nth-child(3) svg { animation-delay: .3s; }
  .integra__logos li:nth-child(4) svg { animation-delay: .45s; }
  .integra__logos li:nth-child(5) svg { animation-delay: .6s; }
  .integra__logos li:nth-child(6) svg { animation-delay: .75s; }
  .integra__logos li:nth-child(7) svg { animation-delay: .9s; }
  .integra__logos li:nth-child(8) svg { animation-delay: 1.05s; }

  /* Iconos del contacto y del recorrido: un saludo de vez en cuando */
  .way__ico svg, .is-visible .recorrido__ico svg { animation: saludo 7s var(--ease-in-out) 2s infinite; }
  .way:nth-child(2) .way__ico svg { animation-delay: 3.2s; }
  .recorrido li:nth-child(2) .recorrido__ico svg { animation-delay: 2.6s; }
  .recorrido li:nth-child(3) .recorrido__ico svg { animation-delay: 3.2s; }
  .recorrido li:nth-child(4) .recorrido__ico svg { animation-delay: 3.8s; }
  .recorrido li:nth-child(5) .recorrido__ico svg { animation-delay: 4.4s; }
  .recorrido li:nth-child(6) .recorrido__ico svg { animation-delay: 5s; }

  /* 3. Ratón */
  @media (hover: hover) and (pointer: fine) {
    :is(.way__ico, .svc__ico, .paso__ico) { transition: transform .45s var(--rebote), border-color .3s ease; }
    :is(.way, .svc, .paso):hover :is(.way__ico, .svc__ico, .paso__ico) {
      transform: translateY(-3px) rotate(-8deg) scale(1.08); border-color: rgba(77, 139, 255, .6);
    }
    .pilar:hover > svg, .pledge__item:hover > svg { animation-play-state: paused; transform: scale(1.15) rotate(-8deg); transition: transform .45s var(--rebote); }
  }

  /* Fuera de pantalla no se mueve nada */
  .is-fuera *, .is-fuera *::before, .is-fuera *::after { animation-play-state: paused !important; }
}
@keyframes flotarIcono { 0%, 100% { transform: none; } 50% { transform: translateY(-5px) rotate(4deg); } }
@keyframes mensajeCanal {
  0%, 22%, 100% { transform: none; border-color: var(--line-2); color: var(--txt-2); }
  6% { transform: translateY(-6px) scale(1.08); border-color: rgba(77, 139, 255, .7); color: var(--txt); }
  14% { transform: translateY(0) scale(1); }
}
@keyframes etapa {
  0%, 40%, 100% { background: transparent; color: var(--txt-2); border-color: var(--line-2); }
  10%, 30% { background: rgba(77, 139, 255, .16); color: var(--txt); border-color: rgba(77, 139, 255, .6); }
}
@keyframes avance { 0%, 100% { transform: none; } 20% { transform: translateX(3px); } 40% { transform: none; } }
@keyframes latePieza { 0%, 40%, 100% { transform: none; } 10% { transform: scale(1.12); border-color: rgba(77, 139, 255, .7); } }
@keyframes girito { 0%, 20%, 100% { transform: none; } 6% { transform: rotate(-14deg) scale(1.1); } 12% { transform: rotate(10deg); } }
/* Solo opacidad y posición: van en la tarjeta gráfica sin repintar nada.
   Antes cambiaba el color, y eso repintaba los logotipos en cada fotograma. */
@keyframes ola { 0%, 70%, 100% { transform: none; opacity: .55; } 10% { transform: translateY(-5px); opacity: 1; } 20% { transform: none; } }
@keyframes saludo { 0%, 14%, 100% { transform: none; } 4% { transform: rotate(-12deg) scale(1.12); } 9% { transform: rotate(8deg); } }

/* ---------- 21. Asistente de la web (asistente.js) ---------- */
.asis-lanzador {
  position: fixed; right: max(1.1rem, env(safe-area-inset-right)); bottom: max(1.1rem, env(safe-area-inset-bottom)); z-index: 60;
  display: inline-flex; align-items: center; gap: .6rem;
  height: 58px; padding: 0 1.25rem 0 .55rem; border-radius: 999px;
  background: linear-gradient(180deg, #1a5ef8 0%, #0858f8 55%, #0646c9 100%); color: #fff; font-size: .9375rem; font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 18px 40px -16px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .3s var(--ease), opacity .3s, background-color .2s;
}
@media (hover: hover) and (pointer: fine) { .asis-lanzador:hover { background: var(--accent-2); transform: translateY(-2px); } }
.asis-lanzador:active { transform: scale(.96); transition-duration: var(--t-press); }
.asis-lanzador__ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); }
.asis-lanzador__ico svg { width: 24px; height: 24px; }
.asis-lanzador.is-oculto { opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none; }
@media (max-width: 560px) {
  .asis-lanzador { padding: 0; width: 58px; justify-content: center; }
  .asis-lanzador__txt { display: none; }
  .asis-lanzador__ico { background: none; }
}

.asis {
  position: fixed; z-index: 70;
  right: max(1.1rem, env(safe-area-inset-right)); bottom: max(1.1rem, env(safe-area-inset-bottom));
  width: min(400px, calc(100vw - 2.2rem)); height: min(640px, calc(100svh - 2.2rem));
  display: flex; flex-direction: column;
  border-radius: 26px; border: 1px solid var(--line-2);
  background: rgba(12, 14, 19, .94);
  -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.03), inset 0 1px 0 rgba(255,255,255,.07);
  transform-origin: bottom right;
  transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .35s;
}
.asis[hidden] { display: flex; visibility: hidden; opacity: 0; transform: translateY(16px) scale(.97); pointer-events: none; }
@media (max-width: 560px) {
  .asis { inset: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; border: 0; }
}

.asis__cab { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.asis__avatar { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #172034, #0b0f17); border: 1px solid rgba(110,155,255,.3); flex: none; }
.asis__avatar img { width: 20px; height: auto; }
.asis__avatar::after { content: ""; position: absolute; right: 0; bottom: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); border: 2px solid #0c0e13; }
.asis__quien { display: grid; line-height: 1.25; min-width: 0; }
.asis__quien b { font-size: 1rem; font-weight: 600; }
.asis__quien span { font-size: .75rem; color: var(--txt-3); }
.asis__acciones { margin-left: auto; display: flex; gap: .3rem; }
.asis__acciones .icon-btn { width: 36px; height: 36px; }
.asis__acciones .icon-btn svg { width: 17px; height: 17px; }

.asis__log {
  flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; overscroll-behavior: contain;
}
.asis__aviso { font-size: .75rem; color: var(--txt-3); text-align: center; line-height: 1.45; padding: 0 .5rem .4rem; }
.asis__aviso a { color: var(--txt-2); text-decoration: underline; text-underline-offset: 2px; }
.asis__msg {
  max-width: 88%; padding: .7rem .9rem; border-radius: 16px;
  font-size: .9rem; line-height: 1.5; color: var(--txt);
  animation: entrar .35s var(--ease) both; overflow-wrap: anywhere;
}
.asis__msg p { color: inherit; }
.asis__msg p + p, .asis__msg p + ul, .asis__msg ul + p { margin-top: .5rem; }
.asis__msg ul { display: grid; gap: .3rem; padding-left: 0; }
.asis__msg li { position: relative; padding-left: 1rem; }
.asis__msg li::before { content: ""; position: absolute; left: 0; top: .65em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-hi); }
.asis__msg a { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 2px; }
.asis__msg--bot { align-self: flex-start; background: rgba(255,255,255,.055); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.asis__msg--yo { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.asis__escribe { align-self: flex-start; display: inline-flex; gap: 4px; padding: .8rem .9rem; border-radius: 16px; background: rgba(255,255,255,.055); }
.asis__escribe i { width: 6px; height: 6px; border-radius: 50%; background: var(--txt-3); animation: puntos 1.1s infinite ease-in-out; }
.asis__escribe i:nth-child(2) { animation-delay: .15s; }
.asis__escribe i:nth-child(3) { animation-delay: .3s; }

.asis__resumen { align-self: stretch; padding: 1rem; border-radius: 16px; border: 1px solid rgba(110,155,255,.3); background: rgba(8, 88, 248, .08); animation: entrar .35s var(--ease) both; }
.asis__resumen h4 { font-size: 1rem; font-weight: 600; margin-bottom: .6rem; }
.asis__resumen dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; font-size: .85rem; margin-bottom: .9rem; }
.asis__resumen dt { color: var(--txt-3); }
.asis__resumen dd { margin: 0; color: var(--txt); overflow-wrap: anywhere; }
.asis__resumen .btn { width: 100%; margin-top: .45rem; }

.asis__opciones { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .75rem; }
.asis__opciones:empty { display: none; }
.asis__op {
  min-height: 36px; padding: 0 .85rem; border-radius: 999px;
  border: 1px solid rgba(110,155,255,.35); background: rgba(8, 88, 248, .08);
  font-size: .8125rem; color: var(--txt); text-align: left;
  transition: background-color .2s, border-color .2s;
  animation: entrar .35s var(--ease) both;
}
.asis__op:hover { background: rgba(8, 88, 248, .2); border-color: rgba(110,155,255,.6); }

.asis__form { display: flex; gap: .5rem; padding: .75rem 1rem 1rem; border-top: 1px solid var(--line); }
.asis__form input {
  flex: 1; min-width: 0; min-height: 46px; padding: 0 1rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--txt); font-size: 16px;
}
.asis__form input:focus { outline: none; border-color: var(--accent-hi); box-shadow: 0 0 0 3px rgba(110,155,255,.2); }
.asis__form button { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; flex: none; transition: background-color .2s; }
.asis__form button:hover { background: var(--accent-2); }
.asis__form button svg { width: 19px; height: 19px; }

/* ---------- 22. Páginas legales ---------- */
.legal { max-width: 760px; }
.legal h1 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem); margin-bottom: .6rem; }
.legal h2 { font-size: 1.375rem; letter-spacing: -.02em; margin: 2.5rem 0 .8rem; }
.legal h3 { margin: 1.6rem 0 .5rem; }
.legal p, .legal li { font-size: var(--fs-sm); line-height: 1.7; }
.legal p + p { margin-top: .8rem; }
.legal ul, .legal ol { display: grid; gap: .4rem; margin: .8rem 0; padding-left: 1.2rem; list-style: disc; color: var(--txt-2); }
.legal ol { list-style: decimal; }
.updated, .legal .updated { font-size: .8125rem; color: var(--txt-3); }
.note { margin: 1rem 0; padding: 1.1rem 1.2rem; border-radius: 16px; border: 1px solid rgba(110,155,255,.3); background: rgba(8, 88, 248, .07); }
.note p { color: var(--txt); }
.table-wrap { overflow-x: auto; margin: 1rem 0; border-radius: 16px; border: 1px solid var(--line); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table-wrap th, .table-wrap td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-wrap tr:last-child th, .table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap th { font-weight: 500; color: var(--txt); background: rgba(255,255,255,.025); }
.table-wrap td { color: var(--txt-2); }
.nav__volver { margin-left: auto; }

/* ---------- 23. Recursos (tienda.html) ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1000px) and (min-width: 901px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc {
  position: relative; display: flex; flex-direction: column; gap: .6rem;
  padding: 1.5rem; border-radius: var(--r); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}
.svc p { font-size: var(--fs-sm); }
.svc__ico {
  width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: .4rem; color: var(--accent-hi);
  border-radius: 14px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(214, 220, 232, .07), rgba(214, 220, 232, .02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.svc__ico svg { width: 20px; height: 20px; }
.svc__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .4rem; }
.step { padding: 1.5rem; border-radius: var(--r); border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.step__n { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; color: var(--resalte); margin-bottom: .8rem; }
.step h3 { margin-bottom: .4rem; }
.step p { font-size: var(--fs-sm); }
.newsletter {
  max-width: 760px; margin-inline: auto; text-align: center;
  padding: clamp(1.8rem, 1.2rem + 2vw, 3rem); border-radius: var(--r);
  border: 1px solid var(--line); background: radial-gradient(80% 70% at 50% 0%, rgba(8,88,248,.14), transparent 70%), rgba(255,255,255,.02);
  display: flex; flex-direction: column; align-items: center;
}
.newsletter h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin-bottom: .8rem; }
.newsletter form { display: flex; gap: .5rem; width: 100%; max-width: 460px; margin-top: 1.5rem; }
.newsletter input { flex: 1; border-radius: 999px; }
@media (max-width: 520px) { .newsletter form { flex-direction: column; } }

/* ---------- 24. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hero__b { animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
}