/* ==========================================================================
   BOTTI · Tokens y componentes de interfaz
   Ruta 02 — "Botti, el amigo"
   Todos los contrastes están verificados contra WCAG 2.1 AA.
   Uso: <link rel="stylesheet" href="botti-tokens.css">
   ========================================================================== */

/* --------------------------------------------------------------- 1. COLOR */
:root{
  /* marca */
  --bt-violeta-700:#4B2FC0;
  --bt-violeta-500:#6B4BE8;   /* la marca y la acción */
  --bt-violeta-300:#9B85FF;   /* SOLO texto en modo oscuro */
  --bt-violeta-100:#EAE3FF;
  --bt-limon:#FFD23F;         /* acento: nunca lleva texto blanco encima */
  --bt-limon-700:#8F6108;

  /* neutros */
  --bt-tinta:#1E1633;
  --bt-tinta-600:#5C5372;
  --bt-nube:#F7F5FF;
  --bt-blanco:#FFFFFF;
  --bt-gris-100:#EFEDF5;
  --bt-gris-200:#DFDBEA;

  /* semánticos */
  --bt-exito:#0F7A4F;   --bt-exito-suave:#E4F6EE;
  --bt-alerta:#8F6108;  --bt-alerta-suave:#FFF3D6;
  --bt-error:#C2261F;   --bt-error-suave:#FDE7E4;

  /* roles — usa estos en los componentes, no los de arriba */
  --bt-fondo:var(--bt-nube);
  --bt-superficie:var(--bt-blanco);
  --bt-superficie-2:var(--bt-gris-100);
  --bt-borde:var(--bt-gris-200);
  --bt-texto:var(--bt-tinta);
  --bt-texto-suave:var(--bt-tinta-600);
  --bt-accion:var(--bt-violeta-500);
  --bt-accion-hover:var(--bt-violeta-700);
  --bt-sobre-accion:var(--bt-blanco);      /* 5.53 sobre violeta 500 */
  --bt-sobre-limon:var(--bt-tinta);        /* 11.94 — nunca blanco */
  --bt-foco:var(--bt-violeta-500);

  /* ------------------------------------------------------ 2. FORMA Y AIRE */
  --bt-r-xs:6px; --bt-r-sm:10px; --bt-r-md:14px; --bt-r-lg:20px; --bt-r-full:999px;
  --bt-e-1:4px; --bt-e-2:8px; --bt-e-3:12px; --bt-e-4:16px;
  --bt-e-5:24px; --bt-e-6:32px; --bt-e-7:48px; --bt-e-8:64px;
  --bt-sombra-1:0 1px 2px rgba(30,22,51,.07);
  --bt-sombra-2:0 2px 6px rgba(30,22,51,.08), 0 12px 28px -12px rgba(30,22,51,.20);
  --bt-sombra-3:0 8px 20px rgba(30,22,51,.12), 0 28px 56px -20px rgba(30,22,51,.28);

  /* ------------------------------------------------------- 3. TIPOGRAFÍA */
  --bt-fuente-display:'Fredoka','Trebuchet MS',sans-serif;
  --bt-fuente-texto:'Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --bt-t-display:clamp(34px,5.2vw,56px);
  --bt-t-titulo:clamp(25px,3.2vw,34px);
  --bt-t-subtitulo:21px;
  --bt-t-cuerpo:16px;
  --bt-t-chico:14px;
  --bt-t-micro:12.5px;
  --bt-alto-apretado:1.12;
  --bt-alto-normal:1.6;

  /* ------------------------------------------------------------ 4. MOTION */
  --bt-rapido:130ms; --bt-normal:220ms;
  --bt-curva:cubic-bezier(.32,.72,0,1);
}

/* modo oscuro: sólo cambian los roles, nunca los componentes */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bt-fondo:#151024; --bt-superficie:#1E1730; --bt-superficie-2:#271F3C;
    --bt-borde:#332A4A; --bt-texto:#EFEBFA; --bt-texto-suave:#A9A2BE;
    --bt-accion:var(--bt-violeta-500); --bt-accion-hover:var(--bt-violeta-300);
    --bt-exito:#5FD39B; --bt-exito-suave:#12301F;
    --bt-alerta:#FFD26B; --bt-alerta-suave:#33260A;
    --bt-error:#FF9E93;  --bt-error-suave:#3A1512;
    --bt-violeta-100:#2A2145;
  }
}
:root[data-theme="dark"]{
  --bt-fondo:#151024; --bt-superficie:#1E1730; --bt-superficie-2:#271F3C;
  --bt-borde:#332A4A; --bt-texto:#EFEBFA; --bt-texto-suave:#A9A2BE;
  --bt-accion:var(--bt-violeta-500); --bt-accion-hover:var(--bt-violeta-300);
  --bt-exito:#5FD39B; --bt-exito-suave:#12301F;
  --bt-alerta:#FFD26B; --bt-alerta-suave:#33260A;
  --bt-error:#FF9E93;  --bt-error-suave:#3A1512;
  --bt-violeta-100:#2A2145;
}

/* ===================================================== 5. BASE Y ENFOQUE */
.bt{font-family:var(--bt-fuente-texto);font-size:var(--bt-t-cuerpo);
    line-height:var(--bt-alto-normal);color:var(--bt-texto);background:var(--bt-fondo)}
.bt h1,.bt h2,.bt h3{font-family:var(--bt-fuente-display);font-weight:600;
    line-height:var(--bt-alto-apretado);margin:0;text-wrap:balance}
.bt :focus-visible{outline:2px solid var(--bt-foco);outline-offset:2px;border-radius:var(--bt-r-xs)}

/* =========================================================== 6. BOTONES */
.bt-btn{
  font-family:var(--bt-fuente-display);font-weight:600;font-size:15.5px;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--bt-e-2);
  min-height:44px;padding:0 var(--bt-e-5);border:1.5px solid transparent;
  border-radius:var(--bt-r-full);cursor:pointer;text-decoration:none;
  transition:background var(--bt-rapido) var(--bt-curva),
             transform var(--bt-rapido) var(--bt-curva);
  background:var(--bt-accion);color:var(--bt-sobre-accion);
}
.bt-btn:hover{background:var(--bt-accion-hover)}
.bt-btn:active{transform:translateY(1px)}
.bt-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.bt-btn--limon{background:var(--bt-limon);color:var(--bt-sobre-limon)}
.bt-btn--limon:hover{background:#F0C231}
.bt-btn--borde{background:transparent;color:var(--bt-accion);border-color:var(--bt-accion)}
.bt-btn--borde:hover{background:var(--bt-violeta-100)}
.bt-btn--fantasma{background:transparent;color:var(--bt-texto-suave)}
.bt-btn--fantasma:hover{background:var(--bt-superficie-2);color:var(--bt-texto)}
.bt-btn--chico{min-height:34px;font-size:14px;padding:0 var(--bt-e-4)}

/* ============================================================ 7. CAMPOS */
.bt-campo{display:flex;flex-direction:column;gap:var(--bt-e-1)}
.bt-etiqueta{font-size:var(--bt-t-chico);font-weight:500;color:var(--bt-texto)}
.bt-input{
  font-family:var(--bt-fuente-texto);font-size:var(--bt-t-cuerpo);
  min-height:44px;padding:0 var(--bt-e-4);border-radius:var(--bt-r-sm);
  border:1.5px solid var(--bt-borde);background:var(--bt-superficie);color:var(--bt-texto);
  transition:border-color var(--bt-rapido) var(--bt-curva);width:100%
}
.bt-input::placeholder{color:var(--bt-texto-suave)}
.bt-input:hover{border-color:var(--bt-violeta-300)}
.bt-input:focus{outline:none;border-color:var(--bt-accion);box-shadow:0 0 0 3px var(--bt-violeta-100)}
.bt-input[aria-invalid="true"]{border-color:var(--bt-error)}
.bt-ayuda{font-size:var(--bt-t-micro);color:var(--bt-texto-suave)}
.bt-ayuda--error{color:var(--bt-error)}

/* ====================================================== 8. CHAT (el core) */
.bt-chat{border:1px solid var(--bt-borde);border-radius:var(--bt-r-lg);overflow:hidden;
  background:var(--bt-superficie);box-shadow:var(--bt-sombra-2);max-width:420px}
.bt-chat__hd{display:flex;align-items:center;gap:var(--bt-e-3);padding:var(--bt-e-3) var(--bt-e-4);
  background:var(--bt-accion);color:var(--bt-sobre-accion);font-family:var(--bt-fuente-display);
  font-weight:600}
/* la cara de Botti calada sobre el violeta del encabezado */
.bt-chat__hd svg{width:28px;height:28px;flex:none;display:block;
  --m1:var(--bt-nube);--m2:var(--bt-limon);--m3:var(--bt-accion);
  --b1:var(--bt-nube);--b2:var(--bt-limon);--b3:var(--bt-accion)}
.bt-chat__bd{display:flex;flex-direction:column;gap:var(--bt-e-2);padding:var(--bt-e-4);
  background:var(--bt-superficie-2)}
.bt-msg{font-size:var(--bt-t-chico);line-height:1.45;padding:10px 13px;max-width:80%}
.bt-msg--bot{background:var(--bt-superficie);border:1px solid var(--bt-borde);
  border-radius:var(--bt-r-md) var(--bt-r-md) var(--bt-r-md) 3px;color:var(--bt-texto)}
.bt-msg--yo{background:var(--bt-accion);color:var(--bt-sobre-accion);align-self:flex-end;
  border-radius:var(--bt-r-md) var(--bt-r-md) 3px var(--bt-r-md)}
.bt-msg--hora{font-size:var(--bt-t-micro);color:var(--bt-texto-suave);align-self:center}
.bt-escribiendo{display:flex;gap:5px;align-items:center;padding:12px 14px;width:fit-content;
  background:var(--bt-superficie);border:1px solid var(--bt-borde);
  border-radius:var(--bt-r-md) var(--bt-r-md) var(--bt-r-md) 3px}
.bt-escribiendo i{width:7px;height:7px;border-radius:50%;background:var(--bt-violeta-300);display:block}
@media (prefers-reduced-motion:no-preference){
  .bt-escribiendo i{animation:bt-bota 1.25s var(--bt-curva) infinite}
  .bt-escribiendo i:nth-child(2){animation-delay:.16s}
  .bt-escribiendo i:nth-child(3){animation-delay:.32s}
  @keyframes bt-bota{0%,60%,100%{transform:translateY(0);opacity:.55}
                     30%{transform:translateY(-5px);opacity:1}}
  .bt-antena{animation:bt-parpadeo 3.2s var(--bt-curva) infinite;transform-origin:32px 8px}
  @keyframes bt-parpadeo{0%,74%,100%{transform:scale(1);opacity:1}
                         82%{transform:scale(1.3);opacity:.7}90%{transform:scale(1)}}
  .bt-entra{animation:bt-entra var(--bt-normal) var(--bt-curva) both}
  @keyframes bt-entra{from{opacity:0;transform:translateY(6px) scale(.98)}
                      to{opacity:1;transform:none}}
}

/* ========================================================== 9. AVISOS */
.bt-aviso{display:flex;gap:var(--bt-e-3);padding:var(--bt-e-3) var(--bt-e-4);
  border-radius:var(--bt-r-md);font-size:var(--bt-t-chico);line-height:1.45;
  background:var(--bt-superficie-2);color:var(--bt-texto);border-left:3px solid var(--bt-texto-suave)}
.bt-aviso--exito{background:var(--bt-exito-suave);border-left-color:var(--bt-exito)}
.bt-aviso--alerta{background:var(--bt-alerta-suave);border-left-color:var(--bt-alerta)}
.bt-aviso--error{background:var(--bt-error-suave);border-left-color:var(--bt-error)}
.bt-aviso b{font-family:var(--bt-fuente-display);font-weight:600;display:block}

/* ========================================== 10. TARJETAS, CHIPS Y VACÍOS */
.bt-tarjeta{background:var(--bt-superficie);border:1px solid var(--bt-borde);
  border-radius:var(--bt-r-lg);padding:var(--bt-e-5);box-shadow:var(--bt-sombra-1)}
.bt-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--bt-t-micro);
  font-weight:500;padding:5px 11px;border-radius:var(--bt-r-full);
  background:var(--bt-violeta-100);color:var(--bt-violeta-700)}
.bt-chip--exito{background:var(--bt-exito-suave);color:var(--bt-exito)}
.bt-chip--error{background:var(--bt-error-suave);color:var(--bt-error)}
.bt-vacio{display:flex;flex-direction:column;align-items:center;gap:var(--bt-e-3);
  text-align:center;padding:var(--bt-e-7) var(--bt-e-5)}
.bt-vacio svg{width:104px;height:104px}
.bt-vacio h3{font-size:var(--bt-t-subtitulo)}
.bt-vacio p{color:var(--bt-texto-suave);font-size:var(--bt-t-chico);max-width:38ch;margin:0}


*{box-sizing:border-box}
body{margin:0;background:var(--bt-fondo);color:var(--bt-texto);
 font-family:var(--bt-fuente-texto);font-size:17px;line-height:var(--bt-alto-normal);
 -webkit-font-smoothing:antialiased;--m1:#6B4BE8;--m2:#FFD23F;--m3:#F7F5FF;
 --b1:#6B4BE8;--b2:#FFD23F;--b3:#F7F5FF;--b4:#EAE3FF}
h1,h2,h3{font-family:var(--bt-fuente-display);font-weight:600;line-height:1.08;margin:0;
 text-wrap:balance;letter-spacing:-.015em}
p{margin:0}
a{color:var(--bt-accion-hover)}
:focus-visible{outline:2px solid var(--bt-foco);outline-offset:3px;border-radius:8px}
.w{max-width:1080px;margin:0 auto;padding:0 clamp(18px,4vw,36px)}
.sec{padding:clamp(56px,8vw,104px) 0}

/* --- barra --- */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bt-fondo) 88%,transparent);
 backdrop-filter:blur(10px);border-bottom:1px solid var(--bt-borde)}
.nav .w{display:flex;align-items:center;gap:14px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--bt-fuente-display);
 font-weight:600;font-size:23px;letter-spacing:-.02em;color:var(--bt-texto);text-decoration:none}
.logo svg{width:34px;height:34px}
.nav .sp{margin-left:auto}

/* --- hero --- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,56px);align-items:center;
 padding:clamp(44px,7vw,88px) 0 clamp(40px,6vw,72px)}
@media(max-width:860px){.hero{grid-template-columns:1fr}}
.hero h1{font-size:clamp(40px,6.6vw,68px);margin-bottom:20px}
.hero .sub{font-size:clamp(17px,2vw,20px);color:var(--bt-texto-suave);max-width:46ch;margin-bottom:26px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.micro{font-size:13.5px;color:var(--bt-texto-suave);margin-top:14px}
.chip-top{display:inline-flex;align-items:center;gap:8px;background:var(--bt-violeta-100);
 color:var(--bt-violeta-700);font-size:13px;font-weight:500;padding:6px 13px;
 border-radius:var(--bt-r-full);margin-bottom:22px}
.chip-top svg{width:18px;height:18px}

/* --- demo: teléfono con WhatsApp --- */
.demo{position:relative;display:flex;justify-content:center;gap:10px;align-items:flex-end}
.fono{
  width:302px;flex:none;background:#141019;border-radius:40px;padding:11px;
  box-shadow:0 30px 60px -24px rgba(30,22,51,.55), 0 2px 8px rgba(30,22,51,.25);
  position:relative;z-index:2}
.fono__pantalla{border-radius:30px;overflow:hidden;background:var(--wa-fondo);
  display:flex;flex-direction:column;height:606px}
.fono__isla{position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:82px;height:22px;border-radius:12px;background:#141019;z-index:3}

/* barra de estado */
.wa-status{display:flex;align-items:center;padding:9px 20px 4px;background:var(--wa-barra);
  color:var(--wa-texto);font-size:12px;font-weight:500;font-family:var(--bt-fuente-texto)}
.wa-status .sig{margin-left:auto;display:flex;gap:4px;align-items:center}
.wa-status .sig i{display:block;width:3px;border-radius:1px;background:currentColor}
.wa-status .bat{width:20px;height:10px;border:1.2px solid currentColor;border-radius:3px;
  position:relative;opacity:.9}
.wa-status .bat::after{content:"";position:absolute;inset:1.5px;right:6px;background:currentColor;
  border-radius:1px}

/* encabezado del chat */
.wa-hd{display:flex;align-items:center;gap:10px;padding:8px 14px 10px;background:var(--wa-barra);
  color:var(--wa-texto);font-family:var(--bt-fuente-texto)}
.wa-hd .volver{font-size:19px;line-height:1;opacity:.75;margin-right:-2px}
.wa-hd .pic{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#9FC7C2;color:#123F3A;font-weight:600;font-size:14px;letter-spacing:.02em}
.wa-hd .quien{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.wa-hd .nom{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-hd .est{font-size:12px;color:var(--wa-suave);min-height:15px}
.wa-hd .est.escribe{color:var(--wa-verde)}

/* conversación */
.wa-bd{flex:1;overflow:hidden;padding:14px 10px;display:flex;flex-direction:column;gap:5px;
  justify-content:flex-end;background:var(--wa-fondo);
  background-image:
    radial-gradient(circle at 12% 18%, var(--wa-doodle) 0 2.5px, transparent 3px),
    radial-gradient(circle at 74% 32%, var(--wa-doodle) 0 2px, transparent 2.5px),
    radial-gradient(circle at 38% 62%, var(--wa-doodle) 0 3px, transparent 3.5px),
    radial-gradient(circle at 88% 79%, var(--wa-doodle) 0 2.5px, transparent 3px),
    radial-gradient(circle at 22% 91%, var(--wa-doodle) 0 2px, transparent 2.5px);
  background-size:180px 180px}
.wa-dia{align-self:center;background:var(--wa-dia);color:var(--wa-suave);font-size:11.5px;
  padding:4px 11px;border-radius:8px;margin-bottom:6px;font-family:var(--bt-fuente-texto);
  box-shadow:0 1px 1px rgba(0,0,0,.06)}
.wa-b{max-width:82%;padding:6px 9px 5px;border-radius:8px;font-size:13.6px;line-height:1.35;
  font-family:var(--bt-fuente-texto);position:relative;box-shadow:0 1px 1px rgba(0,0,0,.13);
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 8px}
.wa-b .t{flex:1 1 auto;min-width:0}
.wa-b .meta{margin-left:auto;display:flex;align-items:center;gap:3px;font-size:10.5px;
  color:var(--wa-hora);white-space:nowrap;transform:translateY(2px)}
.wa-b .meta svg{width:15px;height:10px}
.wa-b--ellos{align-self:flex-start;background:var(--wa-ellos);color:var(--wa-texto);
  border-top-left-radius:2px}
.wa-b--yo{align-self:flex-end;background:var(--wa-yo);color:var(--wa-texto);
  border-top-right-radius:2px}

/* barra de escribir */
.wa-ft{display:flex;align-items:center;gap:7px;padding:8px 9px 11px;background:var(--wa-barra)}
.wa-ft .campo{flex:1;background:var(--wa-campo);border-radius:19px;padding:9px 14px;
  font-size:13.5px;color:var(--wa-suave);font-family:var(--bt-fuente-texto)}
.wa-ft .env{width:36px;height:36px;border-radius:50%;background:var(--wa-verde);flex:none;
  display:grid;place-items:center}
.wa-ft .env svg{width:17px;height:17px}

/* tokens de whatsapp: claro */
:root{--wa-fondo:#EFE7DE;--wa-barra:#F0F2F5;--wa-campo:#FFFFFF;--wa-texto:#111B21;
  --wa-suave:#667781;--wa-hora:#8B9AA3;--wa-ellos:#FFFFFF;--wa-yo:#D9FDD3;--wa-dia:#FFFFFF;
  --wa-verde:#1DA45C;--wa-check:#3B9EDB;--wa-doodle:rgba(17,27,33,.045)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --wa-fondo:#0B141A;--wa-barra:#202C33;--wa-campo:#2A3942;--wa-texto:#E9EDEF;
  --wa-suave:#8696A0;--wa-hora:#8696A0;--wa-ellos:#202C33;--wa-yo:#005C4B;--wa-dia:#182229;
  --wa-verde:#21C063;--wa-check:#53BDEB;--wa-doodle:rgba(233,237,239,.045)}}
:root[data-theme="dark"]{--wa-fondo:#0B141A;--wa-barra:#202C33;--wa-campo:#2A3942;
  --wa-texto:#E9EDEF;--wa-suave:#8696A0;--wa-hora:#8696A0;--wa-ellos:#202C33;--wa-yo:#005C4B;
  --wa-dia:#182229;--wa-verde:#21C063;--wa-check:#53BDEB;--wa-doodle:rgba(233,237,239,.045)}

/* Botti al lado del teléfono */
.demo .apunta{width:132px;height:132px;flex:none;margin-bottom:18px;margin-right:-14px;
  order:-1;transform:scaleX(-1)}
@media(max-width:980px){.demo .apunta{display:none}}
.pie-demo{text-align:center;font-size:14px;color:var(--bt-texto-suave);margin-top:18px;
  max-width:38ch;margin-left:auto;margin-right:auto;line-height:1.5}
.pie-demo b{color:var(--bt-texto);font-family:var(--bt-fuente-display);font-weight:500}

/* --- escena --- */
.escena{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:26px}
.mom{background:var(--bt-superficie);border:1px solid var(--bt-borde);border-radius:var(--bt-r-lg);
 padding:20px;display:flex;flex-direction:column;gap:8px}
.mom .h{font-family:var(--bt-fuente-display);font-weight:600;font-size:15px;color:var(--bt-texto-suave);
 font-variant-numeric:tabular-nums}
.mom p{font-size:15.5px;line-height:1.5}
.mom.malo{border-color:var(--bt-error);background:var(--bt-error-suave)}
.mom.malo .h{color:var(--bt-error)}
.conbotti{margin-top:16px;background:var(--bt-violeta-100);border-radius:var(--bt-r-lg);
 padding:20px 22px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.conbotti svg{width:56px;height:56px;flex:none}
.conbotti .h{font-family:var(--bt-fuente-display);font-weight:600;font-size:17px;
 color:var(--bt-violeta-700)}
.conbotti p{font-size:15.5px;color:var(--bt-texto)}

/* --- pasos --- */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:32px;
 counter-reset:paso}
.paso{background:var(--bt-superficie);border:1px solid var(--bt-borde);border-radius:var(--bt-r-lg);
 padding:26px 24px;counter-increment:paso}
.paso::before{content:counter(paso);display:grid;place-items:center;width:38px;height:38px;
 border-radius:var(--bt-r-full);background:var(--bt-accion);color:var(--bt-sobre-accion);
 font-family:var(--bt-fuente-display);font-weight:600;font-size:18px;margin-bottom:16px}
.paso h3{font-size:19px;margin-bottom:8px}
.paso p{color:var(--bt-texto-suave);font-size:15.5px}

/* --- capacidades --- */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin-top:32px}
.cap{background:var(--bt-superficie);border:1px solid var(--bt-borde);border-radius:var(--bt-r-lg);
 padding:22px;display:flex;flex-direction:column;gap:11px}
.cap svg{width:46px;height:46px}
.cap h3{font-size:17.5px}
.cap p{font-size:15px;color:var(--bt-texto-suave);line-height:1.5}

/* --- precios --- */
.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(226px,1fr));gap:14px;margin-top:36px;
 align-items:stretch}
.plan{background:var(--bt-superficie);border:1.5px solid var(--bt-borde);border-radius:var(--bt-r-lg);
 padding:24px 20px;display:flex;flex-direction:column;gap:12px}
.plan .pos{font-size:14px;color:var(--bt-texto-suave);line-height:1.45;min-height:62px}
.plan .setup{font-size:13.5px;color:var(--bt-texto-suave);margin-top:-6px}
.plan .setup b{color:var(--bt-texto);font-weight:500}
.plan .esp{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--bt-borde);
 padding-top:14px;margin-top:2px}
.plan .esp div{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.plan .esp span:first-child{color:var(--bt-texto-suave)}
.plan .esp span:last-child{font-family:var(--bt-fuente-display);font-weight:500;
 font-variant-numeric:tabular-nums}
.plan.destacado{border-color:var(--bt-accion);box-shadow:var(--bt-sombra-2);position:relative}
.plan .etq{position:absolute;top:-12px;left:24px;background:var(--bt-limon);color:var(--bt-sobre-limon);
 font-family:var(--bt-fuente-display);font-weight:600;font-size:12.5px;padding:4px 12px;
 border-radius:var(--bt-r-full)}
.plan h3{font-size:19px}
.precio{font-family:var(--bt-fuente-display);font-weight:600;font-size:36px;line-height:1.05;
 display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;min-height:38px}
.precio.custom{font-size:26px;align-items:center}
.precio small{font-family:var(--bt-fuente-texto);font-weight:400;font-size:14px;
 color:var(--bt-texto-suave)}
.plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.plan li{font-size:15px;display:flex;gap:9px;align-items:flex-start;line-height:1.45}
.plan li svg{width:16px;height:16px;flex:none;margin-top:4px}

/* --- familias --- */
.familia{background:var(--bt-superficie);border:1px solid var(--bt-borde);
 border-radius:26px;padding:clamp(22px,3.4vw,34px);box-shadow:var(--bt-sombra-1)}
.fam-hd{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.fam-hd h3{font-size:clamp(22px,2.9vw,28px)}
.fam-hd .rango{font-family:var(--bt-fuente-display);font-weight:500;font-size:15px;
 color:var(--bt-accion-hover);background:var(--bt-violeta-100);padding:5px 13px;
 border-radius:var(--bt-r-full);font-variant-numeric:tabular-nums}
.fam-para{color:var(--bt-texto-suave);font-size:16px;max-width:66ch;margin-top:10px}
.familia .planes{margin-top:26px}
.familia .incluye{margin-top:26px}
.familia .incluye h3{font-size:16px;margin-bottom:13px}
.detalle{margin-top:22px;border-top:1px solid var(--bt-borde);padding-top:8px}
.detalle summary{cursor:pointer;list-style:none;padding:12px 0;font-family:var(--bt-fuente-display);
 font-weight:500;font-size:16px;color:var(--bt-accion-hover);display:flex;align-items:center;gap:8px}
.detalle summary::-webkit-details-marker{display:none}
.detalle summary::before{content:"+";font-size:19px;line-height:1}
.detalle[open] summary::before{content:"–"}

/* --- franja enterprise --- */
.ent{margin-top:14px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
 justify-content:space-between;background:var(--bt-superficie-2);
 border:1px dashed var(--bt-borde);border-radius:18px;padding:20px 24px}
.ent-t{font-family:var(--bt-fuente-display);font-weight:600;font-size:17px;margin-bottom:4px}
.ent-p{font-size:15px;color:var(--bt-texto-suave);max-width:58ch;line-height:1.45}

/* --- el puente entre familias --- */
.puente{display:flex;align-items:center;gap:clamp(16px,3vw,30px);flex-wrap:wrap;
 justify-content:center;text-align:center;margin:26px auto;max-width:760px;
 background:var(--bt-violeta-100);border-radius:22px;padding:24px clamp(20px,3vw,32px)}
.puente .salto{font-family:var(--bt-fuente-display);font-weight:600;
 font-size:clamp(22px,3vw,30px);color:var(--bt-accion-hover);white-space:nowrap;
 font-variant-numeric:tabular-nums}
.puente p{font-size:16px;color:var(--bt-texto);max-width:44ch;text-align:left}
.puente p b{font-family:var(--bt-fuente-display);font-weight:600}
@media(max-width:640px){.puente p{text-align:center}}

/* --- incluidos --- */
.incluye{margin-top:36px;background:var(--bt-violeta-100);border-radius:var(--bt-r-lg);
 padding:26px clamp(20px,3vw,32px)}
.incluye h3{font-size:19px;color:var(--bt-violeta-700);margin-bottom:16px}
.incluye ul{margin:0;padding:0;list-style:none;display:grid;
 grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:12px 20px}
.incluye li{display:flex;gap:9px;align-items:flex-start;font-size:15.5px;line-height:1.4}
.incluye li svg{width:17px;height:17px;flex:none;margin-top:3px}

/* --- tabla comparativa --- */
.tabla{margin-top:36px;border:1px solid var(--bt-borde);border-radius:var(--bt-r-lg);
 background:var(--bt-superficie);overflow-x:auto}
.tabla table{border-collapse:collapse;width:100%;min-width:660px;font-size:14.5px}
.tabla th,.tabla td{padding:13px 16px;text-align:right;border-bottom:1px solid var(--bt-borde);
 font-variant-numeric:tabular-nums}
.tabla th:first-child,.tabla td:first-child{text-align:left;position:sticky;left:0;
 background:var(--bt-superficie);font-weight:400;color:var(--bt-texto-suave)}
.tabla thead th{font-family:var(--bt-fuente-display);font-weight:600;font-size:15px;
 color:var(--bt-texto);border-bottom:1.5px solid var(--bt-borde)}
.tabla thead th.hot{color:var(--bt-accion-hover)}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla td.hot{background:var(--bt-violeta-100);font-weight:500}
.tabla tr.fila-precio td,.tabla tr.fila-precio th{font-family:var(--bt-fuente-display);
 font-weight:600;font-size:16px}

/* --- faq --- */
.faq{margin-top:28px;border-top:1px solid var(--bt-borde)}
.faq details{border-bottom:1px solid var(--bt-borde)}
.faq summary{cursor:pointer;padding:18px 0;font-family:var(--bt-fuente-display);font-weight:500;
 font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--bt-texto-suave);flex:none;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 18px;color:var(--bt-texto-suave);font-size:16px;max-width:62ch}

/* --- cierre --- */
.cierre{background:var(--bt-accion);border-radius:28px;padding:clamp(36px,6vw,64px);
 display:flex;gap:28px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.cierre h2{color:#FFFFFF;font-size:clamp(28px,4vw,42px);max-width:16ch}
.cierre p{color:#EAE3FF;margin-top:12px;font-size:17px;max-width:40ch}
.cierre svg{width:140px;height:140px;--b1:#FFFFFF;--b2:#FFD23F;--b3:#6B4BE8;--b4:#7E60EE}
.cierre .bt-btn{background:#FFD23F;color:#1E1633}
.cierre .bt-btn:hover{background:#FFE076}

/* --- pie --- */
.pie{border-top:1px solid var(--bt-borde);padding:32px 0 14px;font-size:14px;
 color:var(--bt-texto-suave);display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.pie-nav{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}
.pie-nav a{color:var(--bt-texto-suave);text-decoration:none;border-bottom:1px solid transparent}
.pie-nav a:hover{color:var(--bt-texto);border-bottom-color:var(--bt-borde)}
.pie-legal{font-size:12.5px;color:var(--bt-texto-suave);padding-bottom:34px;line-height:1.5;opacity:.85}



/* ---------- páginas legales ---------- */
.doc-nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bt-fondo) 90%,transparent);
 backdrop-filter:blur(10px);border-bottom:1px solid var(--bt-borde)}
.doc-nav .w{display:flex;align-items:center;gap:14px;height:64px}
.doc-nav .volver{margin-left:auto;font-size:14.5px;color:var(--bt-accion-hover);text-decoration:none}
.doc-nav .volver:hover{text-decoration:underline}
.doc{max-width:760px;margin:0 auto;padding:clamp(34px,6vw,64px) clamp(18px,4vw,36px) 90px}
.doc h1{font-family:var(--bt-fuente-display);font-weight:600;font-size:clamp(30px,4.6vw,44px);
 line-height:1.1;margin:0 0 10px;letter-spacing:-.02em}
.doc .fecha{font-size:14px;color:var(--bt-texto-suave);margin-bottom:26px}
.doc .intro{font-size:17px;line-height:1.65;color:var(--bt-texto);margin-bottom:8px}
.toc{background:var(--bt-superficie);border:1px solid var(--bt-borde);border-radius:var(--bt-r-lg);
 padding:20px 24px;margin:28px 0 8px}
.toc h2{font-family:var(--bt-fuente-display);font-weight:600;font-size:15px;margin:0 0 12px;
 text-transform:none}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px}
.toc li{margin-bottom:6px;font-size:14.5px;break-inside:avoid}
.toc a{color:var(--bt-texto-suave);text-decoration:none}
.toc a:hover{color:var(--bt-accion-hover);text-decoration:underline}
@media(max-width:640px){.toc ol{columns:1}}
.doc section{margin-top:38px;scroll-margin-top:80px}
.doc h2{font-family:var(--bt-fuente-display);font-weight:600;font-size:21px;line-height:1.2;
 margin:0 0 12px;display:flex;gap:11px;align-items:baseline}
.doc h2 .n{color:var(--bt-accion);font-variant-numeric:tabular-nums;flex:none}
.doc h3{font-family:var(--bt-fuente-display);font-weight:500;font-size:16.5px;margin:22px 0 8px}
.doc p{margin:0 0 13px;font-size:16px;line-height:1.68}
.doc ul,.doc ol.lista{margin:0 0 14px;padding-left:22px}
.doc li{margin-bottom:7px;font-size:16px;line-height:1.6}
.doc li::marker{color:var(--bt-accion)}
.doc a{color:var(--bt-accion-hover)}
.doc strong{font-weight:500;color:var(--bt-texto)}
.doc .caja{background:var(--bt-superficie-2);border-left:3px solid var(--bt-accion);
 border-radius:var(--bt-r-md);padding:16px 20px;margin:16px 0}
.doc .caja p:last-child{margin-bottom:0}
.doc .caja.ojo{border-left-color:var(--bt-alerta);background:var(--bt-alerta-suave)}
.ph{background:var(--bt-limon);color:var(--bt-tinta);padding:1px 7px;border-radius:5px;
 font-family:var(--bt-fuente-display);font-weight:500;font-size:.92em;white-space:nowrap}
.doc table{width:100%;border-collapse:collapse;font-size:15px;margin:8px 0 16px}
.doc th,.doc td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--bt-borde);
 vertical-align:top}
.doc th{font-family:var(--bt-fuente-display);font-weight:600;font-size:14px}
.doc .tw{overflow-x:auto;border:1px solid var(--bt-borde);border-radius:var(--bt-r-md);margin:8px 0 16px}
.doc .tw table{margin:0;min-width:520px}
.doc .tw tr:last-child td{border-bottom:0}