/* Foclick — landing. Paleta obligatoria de .cursorrules; no se agregan colores. */
:root{
  --bg:#0D1117; --surface:#161B22; --card:#1C2128; --line:#30363D; --line-2:#454C55;
  --cyan:#00E5FF; --text:#E6EDF3; --muted:#8B949E; --dim:#848D97;
  --green:#3FB950; --red:#F85149; --amber:#F0A500;
  --ease:cubic-bezier(.22,.61,.36,1);
  --w:1160px; --gut:20px;
}
*,*::before,*::after{box-sizing:border-box}
*{-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);overflow-x:hidden;
  font:400 16px/1.5 'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--cyan);outline-offset:3px;border-radius:10px}

.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
/* Oculto para la vista pero legible por lector de pantalla, SIN sacarlo a -9999px:
   esa tecnica ensancha el area de scroll y produce scroll horizontal en movil. */
.saltar{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.saltar:focus{position:fixed;left:12px;top:12px;z-index:100;width:auto;height:auto;
  margin:0;padding:12px 18px;overflow:visible;clip:auto;clip-path:none;border-radius:12px;
  background:var(--cyan);color:var(--bg);font-weight:800}

/* ── Tipografía ─────────────────────────────────────────────── */
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.06;text-wrap:balance}
h1{font-size:clamp(34px,6.2vw,62px);letter-spacing:-.045em;line-height:1}
h2{font-size:clamp(27px,4vw,42px)}
h3{font-size:clamp(17px,2vw,20px);letter-spacing:-.02em;line-height:1.25}
p{margin:0;text-wrap:pretty}
.sub{color:var(--muted);font-size:clamp(15px,1.8vw,18px);line-height:1.55}
.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
/* Los enlaces de prosa NO se distinguen sólo por el color. Lo señaló PageSpeed
   (accesibilidad 94): `.acento` ponía cyan y nada más, y así un usuario que no
   distingue el cyan del gris no ve que hay un enlace. Son cuatro en la página
   —la política de privacidad del consentimiento y tres «Escríbenos por WhatsApp»—.
   El `underline-offset` evita que la raya toque las tildes. */
.acento{color:var(--cyan);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}

/* ── Superficies ────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:18px}
.surface{background:var(--surface);border:1px solid var(--line);border-radius:22px;
  box-shadow:0 4px 24px rgba(0,0,0,.4)}
.aura{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.rejilla{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(0,229,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,229,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 78% 58% at 50% 0,#000 28%,transparent 76%);
          mask-image:radial-gradient(ellipse 78% 58% at 50% 0,#000 28%,transparent 76%)}

/* ── Botones ────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 24px;border-radius:999px;border:0;cursor:pointer;
  font-size:15px;font-weight:700;white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),
             background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.btn-1{background:var(--cyan);color:var(--bg)}
.btn-1:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,229,255,.4)}
.btn-2{background:transparent;color:var(--text);border:1px solid var(--line-2)}
.btn-2:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
.btn-1:active,.btn-2:active{transform:translateY(0) scale(.98)}
.btn-sm{min-height:40px;padding:0 18px;font-size:14px}

/* ── Barra superior ─────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(13,17,23,.72);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease);
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.nav.scrolled{border-bottom-color:var(--line)}
/* Avance del scroll: una línea de 2 px al pie de la barra. La anima el
   compositor con animation-timeline: scroll(), así que NO corre una sola línea
   de JavaScript por fotograma. Va dentro de @supports porque un navegador sin
   scroll-timeline dejaría la barra en scaleX(0) para siempre, y una barra que
   no avanza es peor que ninguna. */
@supports (animation-timeline: scroll(root block)) {
  @media (prefers-reduced-motion: no-preference) {
    .nav::after{content:'';position:absolute;left:0;bottom:-1px;height:2px;width:100%;
      transform:scaleX(0);transform-origin:0 50%;
      background:linear-gradient(90deg,rgba(0,229,255,.22),var(--cyan));
      animation:avanceScroll linear both;animation-timeline:scroll(root block)}
    @keyframes avanceScroll{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:62px;min-width:0}
.marca{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:-.02em;
  flex:0 1 auto;min-width:0}
.marca span{white-space:nowrap}
/* El asset aprobado (logo-foclick-clean.svg) son 104 paths sin viewBox. A ~48px el
   mark se lee mejor; por debajo de ~38px se pierde. En un teléfono el nombre se
   esconde para que el mark, los idiomas y los dos botones quepan sin pisarse. */
.marca img{width:48px;height:48px;flex:0 0 auto}
.nav-acciones{display:flex;align-items:center;gap:8px;flex:0 0 auto}
@media (max-width:540px){
  .nav .wrap{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .nav-in{gap:8px;height:56px}
  .marca span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .nav-acciones{gap:6px}
  .nav-acciones .btn-sm{min-height:34px;padding:0 11px;font-size:12.5px}
  .nav-acciones .idiomas{padding:2px}
  .nav-acciones .idiomas button{font-size:10px;padding:5px 6px;min-width:0}
}
@media (max-width:359px){
  .marca img{width:40px;height:40px}
  .nav-acciones .btn-sm{padding:0 8px;font-size:12px}
}
.nav-links{display:none;gap:2px;font-size:14px;font-weight:600;color:var(--muted)}
.nav-links a{padding:9px 13px;border-radius:9px;transition:color .2s var(--ease)}
.nav-links a:hover{color:var(--text)}
@media(min-width:900px){.nav-links{display:flex}}

/* ── Hero ───────────────────────────────────────────────────── */
.hero{position:relative;padding:104px 0 72px;overflow:hidden}
@media(min-width:900px){.hero{padding:138px 0 96px}}
.hero-grid{position:relative;z-index:1;display:grid;gap:40px;align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:1fr minmax(0,478px);gap:56px}}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;
  background:rgba(0,229,255,.07);border:1px solid rgba(0,229,255,.25);
  font-size:12px;font-weight:700;color:var(--cyan)}
.punto{width:6px;height:6px;border-radius:50%;background:var(--green);flex:0 0 auto}
.hero h1{margin:22px 0 0}
.hero .sub{margin-top:18px;max-width:38ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}
.hero-nota{margin-top:16px;font-size:13px;color:var(--dim);font-weight:500}

/* ── Conmutador de industria ────────────────────────────────── */
.industrias{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.ind{padding:8px 15px;border-radius:999px;background:var(--card);border:1px solid var(--line);
  color:var(--muted);font-size:13.5px;font-weight:600;cursor:pointer;min-height:40px;
  transition:all .2s var(--ease)}
.ind:hover{border-color:var(--line-2);color:var(--text)}
.ind[aria-pressed="true"]{background:rgba(0,229,255,.1);border-color:rgba(0,229,255,.5);
  color:var(--cyan);box-shadow:0 0 16px rgba(0,229,255,.12)}

/* ── Consola del agente (el hero real) ──────────────────────── */
.consola{display:flex;flex-direction:column;min-height:430px;overflow:hidden}
.consola-top{display:flex;align-items:center;gap:10px;padding:14px 17px;
  border-bottom:1px solid var(--line)}
/* El punto «está vivo» LATE AL CARGAR Y LUEGO SE QUEDA QUIETO. Decisión de Javier
   del 2026-10-26, y el motivo está medido: era `infinite`, está dentro del hero
   (HTML :101) y por tanto encima del pliegue, así que la curva de completitud visual
   del filmstrip no se cerraba nunca — de ahí un Speed Index de 10,9 s con LCP 3,3 s
   y TBT 0 ms. No era una página lenta: era una página que no paraba de moverse.

   Tres repeticiones = 7,2 s, y luego quieto. No hace falta `animation-fill-mode`:
   `latido` empieza y acaba en `opacity:1`, que es el estado sin animación, así que
   al terminar el punto se queda visible y no da ningún salto.

   ⚠️ SIGUE HABIENDO OTRO MOVIMIENTO que esto no toca: el bucle de la pieza 3D.
   Si la segunda medición todavía da un Speed Index alto, el siguiente paso es ése y
   no bajar más este número — aunque bajarlo a 2 es cambiar un carácter. */
.consola-top .punto{animation:latido 2.4s ease 3}
.consola-tit{font-size:13.5px;font-weight:700}
.consola-sub{font-size:11.5px;color:var(--green);font-weight:600}

/* Pestañas: los dos agentes. Paleta sin cambios — la activa usa el mismo cian de
   marca que ya llevan el foco y los acentos. 44px de alto mínimo: es el objetivo
   táctil que el resto de la landing respeta. */
.consola-tabs{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--line)}
.consola-tab{flex:1;min-height:38px;padding:8px 10px;border:1px solid transparent;
  border-radius:10px;background:transparent;color:var(--muted);
  font-size:12.5px;font-weight:700;line-height:1.25;cursor:pointer;
  transition:color .18s ease,background .18s ease,border-color .18s ease}
.consola-tab:hover{color:var(--text);background:rgba(255,255,255,.035)}
.consola-tab.activa{color:var(--cyan);background:rgba(0,229,255,.08);
  border-color:rgba(0,229,255,.32)}
@media (prefers-reduced-motion:reduce){.consola-tab{transition:none}}
@media (max-width:420px){
  .consola-tabs{padding:7px 8px}
  .consola-tab{font-size:11.5px;padding:8px 6px}
}
.consola-aviso{margin:0;padding:10px 14px;border-bottom:1px solid var(--line);
  background:rgba(240,165,0,.09);color:var(--text);
  font-size:12px;line-height:1.45}
.consola-aviso b{color:var(--amber)}
.consola-aviso[hidden]{display:none}
@media (max-width:420px){.consola-aviso{font-size:11.5px;padding:9px 11px}}

/* El puente a la pestaña del asesor, el CTA de WhatsApp y la captura del lead.
   Los tres cuelgan del hilo y comparten el borde superior, así que se ven como una
   continuación de la conversación y no como tres cajas sueltas. */
.consola-puente,.consola-cta,.consola-lead{padding:12px 15px;border-top:1px solid var(--line);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.consola-puente[hidden],.consola-cta[hidden],.consola-lead[hidden]{display:none}
.consola-puente p{margin:0;flex:1;min-width:180px;font-size:13px;color:var(--muted);line-height:1.45}
.consola-puente b{color:var(--cyan)}
.consola-lead{flex-direction:column;align-items:stretch}
.consola-lead-campos{display:flex;gap:8px;flex-wrap:wrap}
.consola-lead-campos input{flex:1;min-width:140px;min-height:42px;padding:0 13px;border-radius:11px;
  border:1px solid var(--line);background:var(--bg-2);color:var(--ink);font-size:14px}
.consola-lead-campos input:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,229,255,.1)}
.consola-lead-ok{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--dim);line-height:1.45}
.consola-lead-ok input{margin-top:2px;flex:0 0 auto}
.consola-lead-aviso{margin:0;font-size:12.5px}
.consola-lead-aviso[hidden]{display:none}
.consola-lead-aviso.ok{color:var(--cyan)}
.consola-lead-aviso.mal{color:var(--amber)}
.hilo{flex:1;padding:17px;display:flex;flex-direction:column;gap:11px;
  overflow-y:auto;max-height:340px;scrollbar-width:thin}
.hilo::-webkit-scrollbar{width:5px}
.hilo::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.msg{max-width:84%;padding:10px 14px;border-radius:15px;font-size:14px;line-height:1.45;
  width:fit-content;animation:aparece .3s var(--ease) both}
.msg-bot{background:#21262D;border-bottom-left-radius:5px}
.msg-yo{margin-left:auto;background:rgba(0,229,255,.12);border:1px solid rgba(0,229,255,.28);
  border-bottom-right-radius:5px}
.msg-err{background:rgba(248,81,73,.1);border:1px solid rgba(248,81,73,.3);color:var(--red)}
.escribiendo{display:flex;gap:4px;padding:13px 15px}
.escribiendo i{width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:rebote 1.3s ease infinite}
.escribiendo i:nth-child(2){animation-delay:.16s}
.escribiendo i:nth-child(3){animation-delay:.32s}
.consola-form{display:flex;gap:8px;padding:13px 15px;border-top:1px solid var(--line)}
.consola-form input{flex:1;min-width:0;min-height:44px;padding:0 15px;border-radius:12px;
  background:var(--card);border:1.5px solid var(--line);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.consola-form input::placeholder{color:var(--dim)}
.consola-form input:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,229,255,.1)}
.consola-form button{width:44px;height:44px;flex:0 0 auto;padding:0;border-radius:12px;
  background:var(--cyan);color:var(--bg);border:0;cursor:pointer;
  display:grid;place-items:center;transition:transform .2s var(--ease),opacity .2s var(--ease)}
.consola-form button:hover:not(:disabled){transform:scale(1.06)}
.consola-form button:disabled{opacity:.45;cursor:not-allowed}

/* ── Secciones ──────────────────────────────────────────────── */
/* overflow:hidden recorta el .aura decorativo, que mide mas que el viewport
   en movil y era la otra fuente de scroll horizontal. */
.sec{padding:76px 0;border-top:1px solid var(--line);position:relative;overflow:hidden}
@media(min-width:900px){.sec{padding:104px 0}}
.sec-cab{max-width:56ch}
.sec-cab h2{margin-top:13px}
.sec-cab .sub{margin-top:16px}
.centro{margin-left:auto;margin-right:auto;text-align:center}

/* ── Tandas dentro de una sección (FASE A del rediseño, 2026-10-24) ─────────
   Las tres secciones que contaban lo mismo —problema, agente, cómo funciona— se
   fundieron en `#agente`. Una tanda es cada uno de los tres bloques de dentro: lleva
   su propio titulillo y su malla de tarjetas, sin la cabecera completa de sección.

   El `scroll-margin-top` no es decorativo: las tandas conservan los anclas
   `#problema` y `#como`, y sin él un enlace profundo deja el titulillo debajo del nav
   fijo. Es el mismo valor del `scroll-padding-top` de `html`. */
.tanda{margin-top:56px}
.tanda:first-of-type{margin-top:0}
/* FASE D — la línea de la familia del visitante, en la cabecera de `#agente`.
   Arranca `hidden` desde el HTML: sin JS no se muestra ninguna, que es el
   comportamiento de hoy. El margen la separa del subtítulo sin mover las tandas. */
.fam-linea{margin:14px 0 0;padding:10px 14px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);
  font-size:.95rem;line-height:1.55;max-width:62ch}
.fam-linea[hidden]{display:none}
.fam-linea strong{font-weight:650}
.tanda[id]{scroll-margin-top:76px}
.tanda-tit{margin:0 0 10px;font-size:clamp(19px,2.4vw,23px);font-weight:700;letter-spacing:-.01em}
.tanda-sub{margin:0 0 22px;max-width:62ch;color:var(--muted);font-size:15.5px;line-height:1.6}
@media (max-width:640px){.tanda{margin-top:40px}}

.malla{display:grid;gap:16px;margin-top:44px}
@media(min-width:680px){.malla-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:880px){.malla-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:880px){.malla-4{grid-template-columns:repeat(4,1fr)}}

.bloque{padding:26px 24px}
.bloque h3{margin-bottom:9px}
.bloque p{color:var(--muted);font-size:14.5px;line-height:1.55}
.ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;margin-bottom:17px;
  background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.22);color:var(--cyan)}
.ico-rojo{background:rgba(248,81,73,.08);border-color:rgba(248,81,73,.22);color:var(--red)}
.num{font-size:38px;font-weight:800;line-height:1;color:#21262D;letter-spacing:-.04em}

/* ── Planes ─────────────────────────────────────────────────── */
.frec{display:inline-flex;padding:4px;border-radius:999px;background:var(--card);
  border:1px solid var(--line);margin-top:26px}
.frec button{min-height:38px;padding:0 17px;border-radius:999px;background:transparent;
  border:0;color:var(--muted);font-size:13.5px;font-weight:700;cursor:pointer;
  transition:all .2s var(--ease)}
.frec button[aria-checked="true"]{background:rgba(0,229,255,.12);color:var(--cyan)}
.plan{display:flex;flex-direction:column;padding:26px 24px;position:relative;
  transition:transform .25s var(--ease),border-color .25s var(--ease)}
.plan:hover{transform:translateY(-3px);border-color:var(--line-2)}
.plan-top{border-color:rgba(0,229,255,.45);box-shadow:0 0 16px rgba(0,229,255,.12)}
.plan-eti{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  padding:4px 12px;border-radius:999px;background:var(--cyan);color:var(--bg);
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.precio{display:flex;align-items:baseline;gap:5px;margin:20px 0 4px}
.precio b{font-size:36px;font-weight:800;letter-spacing:-.035em;line-height:1}
.precio span{font-size:14px;color:var(--muted);font-weight:700}
.plan-nota{font-size:12.5px;color:var(--muted);font-weight:600}
.plan ul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.tick{flex:0 0 auto;width:17px;height:17px;margin-top:2px;color:var(--green)}
.plan .btn{margin-top:22px;width:100%}

/* ── Diferenciación de los planes (2026-11-02) ────────────────
   Tres piezas nuevas, y las tres van en elementos que `pintarServicios()` NO pisa:
   esa función reescribe el `ul` entero desde el catálogo, así que nada que deba
   sobrevivir puede vivir dentro de la lista. */

/* A quién va dirigido el plan. Va pegada al nombre, antes del precio, porque es lo
   que decide si el visitante sigue leyendo esa tarjeta o pasa a la siguiente. */
.plan-para{margin:8px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted);font-weight:600;min-height:38px}

/* El equivalente mensual cuando se paga semestral o anual. Nace con `hidden` y lo
   llena `app.js` desde `tablaPrecios()`; en mensual vuelve a ocultarse. */
.plan-equiv{margin:2px 0 6px;font-size:12.5px;color:var(--cyan);font-weight:700}
.plan-equiv[hidden]{display:none}

/* La franja de los 15 días. Ancho completo y encima de las tarjetas: antes era una
   línea de 13,5 px al final de la sección. */
.franja-regalo{margin-top:44px;padding:16px 22px;border-radius:14px;
  background:linear-gradient(90deg,rgba(0,229,255,.10),rgba(0,229,255,.03));
  border:1px solid rgba(0,229,255,.28);text-align:center}
.franja-regalo p{margin:0;font-size:15px;line-height:1.5;color:var(--text);font-weight:600}
.franja-regalo b{color:var(--cyan)}

/* La tabla de la comisión decreciente. En móvil se desplaza en horizontal en vez de
   apretar cuatro columnas de pesos: un número de seis cifras partido en dos líneas
   no se lee. */
.comparativa{padding:24px}
.comparativa h3{font-size:19px;letter-spacing:-.02em}
.tabla-comp{margin-top:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla-comp table{width:100%;min-width:430px;border-collapse:collapse;font-size:14px}
.tabla-comp th,.tabla-comp td{padding:11px 12px;text-align:right;white-space:nowrap}
.tabla-comp thead th{font-size:11.5px;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--line)}
.tabla-comp th[scope="row"],.tabla-comp thead th:first-child{text-align:left}
.tabla-comp tbody tr+tr th,.tabla-comp tbody tr+tr td{border-top:1px solid var(--line)}
.tabla-comp tbody th{font-weight:700;color:var(--text)}
.tabla-comp tbody td{color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.tabla-comp tr.gana th,.tabla-comp tr.gana td{background:rgba(0,229,255,.06);color:var(--text)}
.tabla-comp tr.gana b{color:var(--cyan)}

/* ── Formulario ─────────────────────────────────────────────── */
.campo{display:flex;flex-direction:column;gap:7px}
.campo label{font-size:12px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em}
.campo input,.campo select{min-height:46px;padding:0 14px;border-radius:12px;
  background:var(--card);border:1.5px solid var(--line);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.campo input:focus,.campo select:focus{outline:0;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,229,255,.1)}
.campo input::placeholder{color:var(--dim)}
/* Casilla de autorización del formulario. No usa .campo: ése apila etiqueta sobre
   campo y pone la etiqueta en mayúsculas, que para un texto legal de tres líneas no
   sirve. El área de toque es toda la fila, no sólo el cuadrito de 18 px. */
.campo-chk{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  font-size:13px;line-height:1.55;color:var(--muted)}
.campo-chk input{flex:0 0 auto;width:18px;height:18px;margin-top:1px;
  accent-color:var(--cyan);cursor:pointer}
.campo-chk a{color:var(--cyan);text-decoration:underline}
.aviso{margin-top:14px;padding:12px 15px;border-radius:12px;font-size:14px;font-weight:600}
.aviso-ok{background:rgba(63,185,80,.1);border:1px solid rgba(63,185,80,.3);color:var(--green)}
.aviso-mal{background:rgba(248,81,73,.1);border:1px solid rgba(248,81,73,.3);color:var(--red)}

/* ── Pie ────────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--line);padding:44px 0}
.pie-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.pie nav{display:flex;flex-wrap:wrap;gap:22px;font-size:13.5px;font-weight:600;color:var(--muted)}
.pie nav a:hover{color:var(--text)}
/* Botón del pie para cambiar la decisión de medición. Se ve igual que los enlaces
   vecinos: es un <button> y no un <a> porque no navega a ninguna parte. */
.pie-boton{background:none;border:0;padding:0;font:inherit;color:var(--muted);
  font-weight:600;cursor:pointer}
.pie-boton:hover{color:var(--text)}

/* ── Aviso de medición ──────────────────────────────────────────────────────
   Abajo y centrado, por encima de todo. No tapa el contenido del hero ni los CTA:
   con `max-width` y el margen inferior se queda en una franja, no en una cortina
   modal — nadie tiene que aceptar nada para poder leer la página.
   Los dos botones comparten tamaño y fila: el rechazo pesa lo mismo que el sí. */
.aviso-medicion{position:fixed;z-index:60;left:50%;transform:translateX(-50%);
  bottom:16px;width:calc(100% - 32px);max-width:640px;
  background:var(--card);border:1px solid var(--line-2);border-radius:14px;
  padding:16px 18px;box-shadow:0 14px 40px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:13px}
.aviso-medicion p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0}
.aviso-medicion a{color:var(--cyan);text-decoration:underline}
.aviso-medicion-btns{display:flex;gap:10px}
.aviso-medicion-btns .btn{flex:1 1 0;min-height:42px;padding:0 16px;font-size:14px}
@media (min-width:560px){
  .aviso-medicion{flex-direction:row;align-items:center;gap:16px;max-width:760px}
  .aviso-medicion p{flex:1 1 auto}
  .aviso-medicion-btns{flex:0 0 auto}
  .aviso-medicion-btns .btn{flex:0 0 auto}
}
.pie-legal{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  text-align:center;font-size:12.5px;color:var(--dim)}

/* ── Movimiento ─────────────────────────────────────────────── */
@keyframes aparece{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes rebote{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.35}}
.rev{opacity:0;transform:translateY(20px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rev.visible{opacity:1;transform:none}
.no-js .rev{opacity:1;transform:none;transition:none}

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

/* ── Fondo WebGL del hero ─────────────────────────────────────── */
/* Ocupa el hero por debajo del contenido. Nace transparente: mientras no haya
   pintado nada, lo que se ve es la .rejilla de CSS — que es el fallback. */
.hero3d{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  opacity:0;transition:opacity .9s var(--ease);pointer-events:none}
.hero3d[data-activo]{opacity:1}
.hero-grid{position:relative;z-index:1}

/* ── Narrativa con scroll — animaciones nativas ───────────────── */
/* Corren fuera del hilo principal, sin librería y sin JS. Los navegadores que no
   las soportan simplemente ven el estado final, que es legible: por eso el
   @supports envuelve solo el estado inicial oculto. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rev{opacity:1;transform:none;transition:none;
      animation:entra linear both;
      animation-timeline:view();
      animation-range:entry 8% cover 26%}
    @keyframes entra{
      from{opacity:0;transform:translateY(26px) scale(.985)}
      to  {opacity:1;transform:none}
    }
    /* La cabecera de cada sección entra un poco antes que sus tarjetas */
    .sec-cab{animation:entra linear both;animation-timeline:view();
      animation-range:entry 4% cover 20%}
    /* Las tarjetas de plan escalonan por posición en la fila */
    .malla-3 > .plan:nth-child(2){animation-delay:0s;animation-range:entry 10% cover 28%}
    .malla-3 > .plan:nth-child(3){animation-range:entry 13% cover 31%}
  }
}

/* ── Micro-interacciones ──────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .btn-1{position:relative;overflow:hidden}
  /* Barrido de luz al pasar el cursor: 600ms, una sola vez, no en bucle */
  .btn-1::after{content:'';position:absolute;inset:0;
    background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
    transform:translateX(-120%);transition:transform .6s var(--ease)}
  .btn-1:hover::after{transform:translateX(120%)}

  .plan{will-change:transform}
  .plan:hover{transform:translateY(-5px)}
  .plan-top:hover{box-shadow:0 0 24px rgba(0,229,255,.2)}

  .ind{transition:all .2s var(--ease)}
  .ind:active{transform:scale(.96)}

  .bloque .ico{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
  .bloque:hover .ico{transform:translateY(-2px) scale(1.06);
    box-shadow:0 0 18px rgba(0,229,255,.22)}

  /* El agente "escribe" la respuesta en vez de volcarla de golpe */
  .msg-bot.escribiendo-txt::after{content:'';display:inline-block;width:2px;height:1em;
    margin-left:2px;background:var(--cyan);vertical-align:text-bottom;
    animation:cursorParpadea .9s step-end infinite}
  @keyframes cursorParpadea{0%,100%{opacity:1}50%{opacity:0}}
}

/* ── Preguntas frecuentes ──────────────────────────────────────────────────── */
.faq { display: grid; gap: 12px; }
.faq details { padding: 0; overflow: hidden; }
.faq summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 18px 20px; list-style: none; user-select: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; flex: 1; font-size: 15.5px; }
/* El signo se dibuja con CSS: un carácter menos que traducir y que se rompa. */
.faq summary::after {
  content: ''; flex: 0 0 11px; width: 11px; height: 11px; margin-right: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: .55;
  transition: transform .22s ease, opacity .22s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); opacity: .9; }
.faq summary:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; border-radius: 12px; }
.faq details > p { margin: 0; padding: 0 20px 20px; }
.faq details > p a { text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}

/* ── Las filas ✅ / ❌ de cada tarjeta (2026-11-05) ─────────────────────────────
   Reemplazan la viñeta genérica «Lo que tu negocio necesite además…» y la lista que
   `pintarServicios()` pintaba desde el catálogo. Ahora las filas son estáticas y las
   genera `canUse` del propio `planGuard`, con `tests/routes/tarjetasPlanesFilas.test.js`
   comprobando fila por fila que la tarjeta no promete lo que su plan no habilita —ni
   calla lo que sí—. Un test que tumba el deploy es una garantía más fuerte que pintar
   en el navegador, que no puede fallar nada. */

/* Los dos encabezados de grupo. `aria-hidden` porque el ✅/❌ de cada fila ya lo dice
   al lector de pantalla: leer «Incluye» como un elemento más de la lista sobra. */
.plan-filas .fila-cab{
  margin:18px 0 2px;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);opacity:.75}
.plan-filas .fila-cab:first-child{margin-top:20px}
.plan-filas .fila-cab-no{color:var(--muted)}

/* La cruz es gris, no roja: una tarjeta con seis rojos parece una advertencia. Lo que
   tiene que comunicar es «eso está en el plan de arriba», no «algo va mal». */
.cruz{flex:0 0 auto;width:17px;height:17px;margin-top:2px;color:var(--muted);opacity:.55}
.plan-filas li.no{color:var(--muted);opacity:.62}

/* La única diferencia real entre Pro y Cadena, dicha en la tarjeta de Cadena: en
   funciones son idénticas y lo que cambia es la Tarifa de Éxito. */
.plan-dif{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted);font-weight:600}
.plan-dif b{color:var(--cyan)}

/* ── Responsivo: lo que un teléfono de 320–430 px no podía usar (2026-11-05) ──────
   Encargo de Javier tras ver la página en su iPhone X. Dos cosas distintas y las dos
   medidas con `tests/routes/responsivaPublica.test.js`, que recorre 320, 360, 375,
   390, 414, 768, 1024 y 1440 px. */

/* 1 · LOS CONTROLES DEL FORMULARIO NO PUEDEN ENSANCHAR SU COLUMNA.
   `#leadForm` es un grid y `.campo` un flex: los dos dan a sus hijos `min-width:auto`,
   que se resuelve al ANCHO MÍNIMO DEL CONTENIDO. Para un `<select>` ese mínimo depende
   del MOTOR: Chromium lo recorta y WebKit lo calcula con la opción más larga, que en
   producción es «Profesionales (Abogados, Ingenieros…)», de 37 caracteres. Por eso el
   mismo HTML cabe en Chrome y se sale en el Safari de un iPhone.

   ⚠️ No está medido en WebKit: este contenedor no tiene ese motor. Lo que sí está
   medido es que estas tres reglas hacen imposible la clase entera de fallo —el hijo ya
   no puede empujar a su columna, pase lo que pase con el ancho intrínseco—, y que no
   cambian nada en Chromium, donde la página ya cabía. */
#leadForm > *, .campo { min-width: 0 }
.campo input, .campo select { width: 100%; max-width: 100%; min-width: 0 }
/* Y si aun así el texto de una opción no cabe, se recorta en vez de empujar. */
.campo select { text-overflow: ellipsis }

/* 2 · LA TABLA DE «POR QUÉ SUBIR DE PLAN CUESTA MENOS», APILADA EN TELÉFONO.
   Lleva `overflow-x:auto` y un `min-width:430px`, así que en un teléfono se arrastra de
   lado. Se puede alcanzar —por eso la auditoría no la marcaba— pero la columna que
   remata el argumento, «Total al mes», queda FUERA de la pantalla: a 375 px se ven
   «Plan» y «Mensualidad» y el visitante nunca llega al número que justifica subir de
   plan. Apilada, las cuatro cifras de cada plan se leen de una vez y sin arrastrar. */
@media (max-width: 430px) {
  .tabla-comp { overflow-x: visible }
  .tabla-comp table { min-width: 0 }
  .tabla-comp thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap }   /* el encabezado lo lee el lector de
    pantalla; en pantalla lo sustituyen los `data-etiqueta` de cada celda */
  .tabla-comp tr { display: block; padding: 12px 0; border-top: 1px solid var(--line) }
  .tabla-comp tbody tr:first-child { border-top: 0 }
  .tabla-comp tbody tr + tr th, .tabla-comp tbody tr + tr td { border-top: 0 }
  .tabla-comp th[scope="row"] { display: block; padding: 0 12px 8px;
    font-size: 15px; font-weight: 800; color: var(--text) }
  .tabla-comp td { display: flex; justify-content: space-between; gap: 12px;
    padding: 4px 12px; text-align: right; white-space: normal }
  .tabla-comp td::before { content: attr(data-etiqueta); text-align: left;
    font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted); align-self: center }
  .tabla-comp tr.gana { border-radius: 12px; padding: 12px 0 }
}

/* El campo de «Otro» nace con el atributo `hidden`, y `.campo` es `display:flex`, que
   lo gana: sin esta regla el campo se vería SIEMPRE. Es el fallo clásico de mezclar
   `hidden` con un display explícito. */
.campo[hidden] { display: none }

.idiomas{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px}
.idiomas button{background:transparent;border:0;color:var(--muted);font-size:11px;font-weight:800;
  letter-spacing:.04em;padding:6px 8px;border-radius:999px;cursor:pointer;min-width:32px}
.idiomas button[aria-pressed="true"]{background:rgba(0,229,255,.12);color:var(--cyan)}

/* Carrera Cervecera: el logo real, de pie, no girando. El anillo es el suelo. */
.caso-escena{display:grid;grid-template-columns:minmax(200px,280px) 1fr;gap:48px;
  align-items:center;perspective:1100px}
.caso-medalla{position:relative;width:240px;height:240px;margin:0 auto;
  transform-style:preserve-3d;transform:rotateX(14deg) rotateY(-22deg);
  transition:transform .7s var(--ease)}
.caso-escena:hover .caso-medalla,.caso-escena:focus-within .caso-medalla{
  transform:rotateX(8deg) rotateY(12deg)}
.caso-anillo{position:absolute;inset:-18px;border-radius:50%;
  border:1px solid rgba(0,229,255,.45);transform:translateZ(-36px) rotateX(72deg);
  box-shadow:0 0 28px rgba(0,229,255,.2)}
.caso-placa{position:relative;width:100%;height:100%;border-radius:50%;background:#0D1117;
  border:1px solid var(--line-2);overflow:hidden;transform:translateZ(28px);
  box-shadow:0 28px 48px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.05)}
.caso-placa img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.caso-cifras{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;margin:28px 0 0;padding:0}
.caso-cifras b{display:block;font-size:clamp(28px,3vw,40px);letter-spacing:-.04em;line-height:1}
.caso-cifras span{display:block;margin-top:6px;color:var(--muted);font-size:13.5px;line-height:1.35}
.caso-nota{margin-top:22px;max-width:62ch;color:var(--muted);font-size:14.5px;line-height:1.55}
@media (prefers-reduced-motion:no-preference){
  .caso-anillo{animation:caso-orbita 42s linear infinite}
}
@keyframes caso-orbita{to{transform:translateZ(-36px) rotateX(72deg) rotateZ(360deg)}}
@media (max-width:720px){
  .caso-escena{grid-template-columns:1fr;gap:28px}
  .caso-medalla{width:200px;height:200px}
  .caso-cifras{grid-template-columns:1fr;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .caso-medalla{transform:none}
  .caso-anillo{transform:none}
}

/* La carta y el pase, en la línea de restaurantes. La carta usa tres productos
   públicos de Beer Express. El pase no lleva código de barras: la cara muestra
   los puntos, que es el campo grande del pase. */
.mano-escena{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:36px;
  margin:20px 0 64px;padding:8px 0 4px;perspective:1200px}
.mano-suelo{position:absolute;left:2%;right:2%;bottom:132px;height:180px;pointer-events:none;
  background:
    radial-gradient(ellipse at center, rgba(0,229,255,.18), transparent 62%),
    repeating-linear-gradient(90deg, rgba(0,229,255,.32) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(0deg, rgba(0,229,255,.2) 0 1px, transparent 1px 52px);
  transform:rotateX(74deg);transform-origin:center bottom;border-radius:18px;
  mask-image:linear-gradient(transparent, #000 28%, #000 72%, transparent)}
.mano-pieza{position:relative;z-index:1;text-align:center}
.mano-vitrina{position:relative;height:340px;display:grid;place-items:center;
  transform-style:preserve-3d}
.mano-aro{position:absolute;width:230px;height:230px;border-radius:50%;
  border:1px solid rgba(0,229,255,.5);box-shadow:0 0 28px rgba(0,229,255,.2);
  transform:translateZ(-48px) rotateX(74deg)}
.mano-base{position:absolute;bottom:22px;width:168px;height:34px;border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,229,255,.42), transparent 70%)}
.mano-telefono{width:164px;height:292px;padding:18px 12px 14px;border-radius:34px;
  background:linear-gradient(165deg, #1c2128, #0d1117 62%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), inset 0 -14px 22px rgba(0,0,0,.5),
    22px 32px 44px rgba(0,0,0,.55), -7px 8px 0 #10141a;
  transform:rotateY(-24deg) rotateX(12deg) translateZ(24px);
  transition:transform .6s var(--ease)}
.mano-telefono::before{content:"";display:block;width:52px;height:5px;margin:0 auto 10px;
  border-radius:99px;background:#30363d}
.mano-pieza:hover .mano-telefono,.mano-pieza:focus-within .mano-telefono{
  transform:rotateY(10deg) rotateX(6deg) translateZ(40px)}
.mano-pantalla{height:calc(100% - 15px);border-radius:18px;background:#0d1117;padding:12px 10px;
  box-shadow:inset 0 10px 18px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:10px}
.mano-barra{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.mano-plato{display:grid;grid-template-columns:34px 1fr;gap:6px;align-items:center;min-width:0}
.mano-plato img{width:34px;height:34px;border-radius:8px;object-fit:cover;background:#1c2128}
.mano-plato span{min-width:0;display:flex;flex-direction:column;gap:2px}
.mano-plato b{display:-webkit-box;height:auto;border-radius:0;background:none;
  font-size:11px;font-weight:700;line-height:1.15;color:var(--text);
  overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mano-plato em{font-style:normal;font-size:11px;font-weight:800;color:var(--cyan)}
.mano-pase{width:262px;height:158px;padding:18px 18px 14px;border-radius:22px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left;
  background:linear-gradient(118deg, rgba(255,255,255,.22), transparent 32%),
    linear-gradient(155deg, rgba(0,229,255,.5), #161b22 48%, #0d1117);
  border:1px solid rgba(0,229,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 18px 28px 40px rgba(0,0,0,.5),
    -6px 7px 0 rgba(0,229,255,.16);
  transform:rotateY(22deg) rotateX(14deg) translateZ(28px);
  transition:transform .6s var(--ease)}
.mano-pieza:hover .mano-pase,.mano-pieza:focus-within .mano-pase{
  transform:rotateY(-8deg) rotateX(8deg) translateZ(42px)}
.mano-pase-marca{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.mano-pase-campo{font-size:28px;font-weight:800;letter-spacing:-.03em;color:var(--cyan);line-height:1}
.mano-pase-pies{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--text);letter-spacing:.04em}
.mano-pieza h3{margin:2px 0 0;font-size:1.2rem;letter-spacing:-.03em}
.mano-pieza p{margin:10px auto 0;max-width:38ch;padding:10px 14px;border-radius:14px;
  background:rgba(13,17,23,.82);color:var(--muted);font-size:14.5px;line-height:1.5}
@media (prefers-reduced-motion:no-preference){
  .mano-telefono{animation:mano-flotar 5.5s ease-in-out infinite}
  .mano-pase{animation:mano-flotar 6.2s ease-in-out infinite reverse}
  .mano-aro{animation:mano-orbita 36s linear infinite}
}
@keyframes mano-flotar{50%{translate:0 -14px}}
@keyframes mano-orbita{to{transform:translateZ(-48px) rotateX(74deg) rotateZ(360deg)}}
@media (max-width:720px){
  .mano-escena{grid-template-columns:1fr;gap:8px;margin-bottom:36px}
  .mano-suelo{display:none}
  .mano-vitrina{height:280px}
  .mano-telefono{width:140px;height:250px}
  .mano-pase{width:230px;height:140px}
}