/* Página del bot de WhatsApp · 3.32
   Se apoya en site.css: de ahí salen los tokens de los dos temas, los botones, el
   interruptor de tema y las tipografías. Aquí solo va lo propio de esta página.
   Todo el color sale de tokens, así que la página funciona igual en claro y en oscuro.

   La idea del rediseño: la página no enseña «un chat», enseña LAS DOS PANTALLAS. A la
   izquierda el teléfono del cliente; a la derecha la agenda del dueño, que se llena sola
   cuando el bot deja una cita. Es lo que de verdad se contrata. */

/* ---------- cabecera ---------- */
.bo-head .s-headin{display:flex;align-items:center;justify-content:space-between;gap:18px}
.bo-nav{display:flex;align-items:center;gap:6px;min-width:0}
.bo-nav a:not(.s-btn){color:var(--mu);text-decoration:none;font-size:.87rem;font-weight:600;
  padding:10px 10px;border-radius:10px;min-height:44px;display:inline-grid;place-items:center;white-space:nowrap}
.bo-nav a:not(.s-btn):hover{color:var(--c2);background:var(--t2)}
/* 3.39: con «Demos» y «Planes» la fila ya no cabe en una tablet. Los enlaces menos
   importantes se van antes de que la barra empuje la página hacia fuera. */
@media (max-width:1060px){ .bo-nav a[href="#bo-cap"],.bo-nav a[href="#bo-faq"]{display:none} }
@media (max-width:880px){ .bo-nav a[href="#bo-demo"]{display:none} }

/* ---------- titular ---------- */
.bo-hero{padding:64px 0 56px;border-bottom:1px solid var(--bd);
  background:radial-gradient(60% 70% at 85% 30%,color-mix(in srgb,var(--c1) 10%,transparent) 0,transparent 70%)}
.bo-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:44px;align-items:end;margin-bottom:44px}
.bo-intro h1{margin:0;font:800 clamp(2.2rem,5vw,3.7rem)/1.02 var(--f-tit);letter-spacing:-.035em;text-wrap:balance}
.bo-lead{margin:0 0 22px;color:var(--mu);font-size:1.06rem;line-height:1.62;max-width:32em}
.bo-acts{display:flex;flex-wrap:wrap;gap:12px;margin:0}

/* ---------- las dos pantallas ---------- */
.bo-escena{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:28px;align-items:start;
  padding:28px;border:1px solid var(--bd);border-radius:24px;
  background:color-mix(in srgb,var(--sf) 70%,transparent)}
.bo-col{min-width:0}
.bo-rot{display:flex;align-items:center;gap:9px;margin:0 0 12px;font:600 .9rem/1.3 var(--f-tx);color:var(--tx)}
.bo-rn{display:grid;place-items:center;width:24px;height:24px;border-radius:99px;flex:0 0 24px;
  font:700 .74rem/1 var(--f-num);color:var(--sobre-c);background:var(--c2)}
.bo-nota{margin:16px 0 0;color:var(--mu);font-size:.85rem;line-height:1.6;max-width:56em}
.bo-nota b{color:var(--tx)}

/* el teléfono */
.bo-chat{border:1px solid var(--bd);border-radius:28px;background:var(--sf);
  box-shadow:0 24px 60px var(--sombra),0 0 0 6px color-mix(in srgb,var(--bd) 55%,transparent);
  display:flex;flex-direction:column;overflow:hidden}
.bo-chat-h{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--bd);background:var(--t1)}
.bo-chat-av{display:grid;place-items:center;width:36px;height:36px;border-radius:99px;flex:0 0 36px;
  font:800 .95rem/1 var(--f-tit);color:var(--sobre-c);background:var(--c2)}
.bo-chat-id{display:grid;min-width:0;line-height:1.25}
.bo-chat-id b{font-size:.93rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bo-chat-t{font:500 .8rem/1.3 var(--f-tx);color:var(--mu)}
.bo-chip{margin-left:auto;font:600 .74rem/1 var(--f-tx);white-space:nowrap;
  color:var(--wa-fg);background:var(--wa-bg);border:1px solid var(--wa-bd);border-radius:99px;padding:5px 10px}

.bo-msgs{list-style:none;margin:0;padding:18px 14px;display:flex;flex-direction:column;gap:8px;
  justify-content:flex-end;height:400px;overflow:auto;scroll-behavior:smooth;
  background:
    radial-gradient(circle at 1px 1px,var(--cuadro) 1px,transparent 1.5px) 0 0/16px 16px,
    var(--b1)}
.bo-msgs>li:first-child{margin-top:auto}
.bo-m{display:flex;max-width:84%}
.bo-av{display:none}   /* en un teléfono no hay avatar en cada burbuja */
.bo-b{border-radius:16px;padding:9px 13px;font-size:.92rem;line-height:1.48;
  background:var(--sf);color:var(--tx);box-shadow:0 1px 1px var(--sombra);border:1px solid var(--bd)}
.bo-b b{font-weight:700}
.bo-bot .bo-b{border-top-left-radius:5px}
.bo-yo{align-self:flex-end}
.bo-yo .bo-b{background:var(--t3);border-color:color-mix(in srgb,var(--c1) 22%,var(--bd));border-top-right-radius:5px}
.bo-sis{align-self:center;max-width:94%}
.bo-sis .bo-b{background:var(--wa-bg);border-color:var(--wa-bd);color:var(--wa-fg);font-size:.8rem;text-align:center;box-shadow:none}

/* el puntito de «está escribiendo» */
.bo-esc .bo-b{display:inline-flex;gap:4px;align-items:center;padding:13px 14px}
.bo-esc i{width:6px;height:6px;border-radius:99px;background:var(--mu);display:block}

.bo-ops{display:flex;flex-wrap:wrap;gap:7px;padding:12px 12px 12px;border-top:1px solid var(--bd);background:var(--sf)}
.bo-ops:empty{display:none}
.bo-op{font:600 .84rem/1.2 var(--f-tx);color:var(--c2);background:var(--sf);border:1px solid var(--c1);
  border-radius:99px;padding:6px 14px;min-height:40px;cursor:pointer;text-align:center}
.bo-op:hover:not(:disabled){background:var(--t3)}
.bo-op:disabled{opacity:.45;cursor:not-allowed;border-color:var(--bd);color:var(--mu)}
.bo-op.bo-op-wa{color:var(--sobre-c);background:var(--c2);border-color:var(--c2)}
.bo-op.bo-op-wa:hover:not(:disabled){background:var(--c2h)}
a.bo-op{display:inline-grid;place-items:center;text-decoration:none}

/* El campo de texto: siempre está, como en cualquier chat. */
.bo-form{display:flex;gap:8px;width:100%;margin-top:3px}
.bo-input{flex:1;min-width:0;font:inherit;font-size:.92rem;color:var(--tx);background:var(--b1);
  border:1px solid var(--bd);border-radius:99px;padding:0 16px;min-height:44px}
.bo-input:focus{outline:3px solid var(--c1);outline-offset:2px;border-color:var(--c1)}
.bo-input::placeholder{color:var(--mu)}
.bo-op-env{width:44px;height:44px;min-height:44px;padding:0;flex:0 0 44px;display:grid;place-items:center;
  color:var(--sobre-c);background:var(--c2);border-color:var(--c2)}
.bo-op-env:hover:not(:disabled){background:var(--c2h)}
.bo-op-env svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bo-nojs{margin:0;padding:12px 16px;color:var(--mu);font-size:.85rem;line-height:1.55}

.bo-chat-f{display:flex;align-items:center;gap:9px;padding:10px 16px;border-top:1px solid var(--bd);
  font:500 .82rem/1.4 var(--f-tx);color:var(--mu);background:var(--t1)}
.bo-dot{width:7px;height:7px;border-radius:99px;background:var(--ok-fg);flex:0 0 7px}
.bo-reiniciar{margin-left:auto;font:600 .84rem/1 var(--f-tx);color:var(--c2);background:none;border:0;
  cursor:pointer;text-decoration:underline;padding:8px 2px;min-height:38px}

/* la agenda del dueño */
.bo-tab{border:1px solid var(--bd);border-radius:18px;background:var(--sf);box-shadow:0 14px 40px var(--sombra);overflow:hidden}
.bo-tab-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:15px 18px;border-bottom:1px solid var(--bd)}
.bo-tab-t{font:600 .95rem/1.3 var(--f-tx);color:var(--mu)}
.bo-tab-t b{color:var(--tx);font-family:var(--f-tit);font-size:1.1rem;font-weight:800;letter-spacing:-.01em}
.bo-tab-ej{font:600 .74rem/1 var(--f-tx);color:var(--wa-fg);background:var(--wa-bg);border:1px solid var(--wa-bd);
  border-radius:99px;padding:5px 10px;white-space:nowrap}

.bo-slots{list-style:none;margin:0;padding:8px 18px}
.bo-slot{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:14px;align-items:center;
  padding:11px 0;border-bottom:1px dashed var(--bd);font-size:.9rem}
.bo-slot:last-child{border-bottom:0}
.bo-slot-h{font:600 .82rem/1.2 var(--f-num);color:var(--mu);font-variant-numeric:tabular-nums}
.bo-slot-t{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0;line-height:1.35}
.bo-slot-libre .bo-slot-t{color:var(--ok-fg);font-weight:600}
.bo-slot-ocu .bo-slot-t{color:var(--mu)}
.bo-slot-ocu .bo-slot-h{text-decoration:line-through;text-decoration-color:var(--bd)}
.bo-slot-nueva{border-bottom-style:solid;background:var(--t3);margin:0 -18px;padding:12px 18px;
  box-shadow:inset 3px 0 0 var(--c1)}
.bo-slot-nueva .bo-slot-h{color:var(--c2)}
.bo-slot-nueva .bo-slot-t{color:var(--tx)}
.bo-slot-tag{font:600 .72rem/1 var(--f-tx);color:var(--c2);border:1px solid var(--c1);border-radius:99px;padding:4px 8px;background:var(--sf)}
.bo-slot-vacio{display:block;color:var(--mu);font-size:.88rem;line-height:1.55;padding:18px 0}

.bo-avisos{border-top:1px solid var(--bd);background:var(--t1);padding:14px 18px 16px}
.bo-avisos-t{margin:0 0 10px;font:600 .84rem/1.3 var(--f-tx);color:var(--mu)}
.bo-av-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bo-aviso{display:grid;gap:2px;border:1px solid var(--bd);border-radius:12px;background:var(--sf);
  padding:10px 12px;font-size:.86rem;line-height:1.45;color:var(--mu)}
.bo-aviso b{color:var(--tx);font-size:.88rem}
.bo-aviso-nueva{border-color:var(--ok-bd);background:var(--ok-bg)}
.bo-aviso-nueva b{color:var(--ok-fg)}
.bo-aviso-vacio{display:block;border-style:dashed;background:transparent}

/* ---------- secciones ---------- */
.bo-sec{padding:76px 0}
.bo-alt{background:var(--alt);border-block:1px solid var(--bd)}
.bo-sec h2{text-align:left}
.bo-h2{margin:0 0 30px!important}

/* título a la izquierda, contenido a la derecha */
.bo-dos{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:56px;align-items:start}
.bo-dos-t{position:sticky;top:96px}
.bo-dos-t h2{margin:0 0 14px;font:800 clamp(1.7rem,3.4vw,2.5rem)/1.05 var(--f-tit);letter-spacing:-.025em}
.bo-dos-t p{margin:0;color:var(--mu);line-height:1.62;max-width:24em}

.bo-caps{list-style:none;margin:0;padding:0;border-top:1px solid var(--bd)}
.bo-cap{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:12px;padding:22px 0;border-bottom:1px solid var(--bd)}
.bo-cap .ek-num{padding-top:5px;color:var(--c2)}
.bo-cap h3{margin:0 0 6px;font:700 1.12rem/1.3 var(--f-tit);letter-spacing:-.01em}
.bo-cap p{margin:0;color:var(--mu);font-size:.95rem;line-height:1.62;max-width:40em}

/* los tres pasos, unidos por una línea */
.bo-pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;position:relative}
.bo-pasos::before{content:"";position:absolute;left:22px;right:22px;top:22px;height:2px;
  background:linear-gradient(90deg,var(--c1),color-mix(in srgb,var(--c1) 20%,var(--bd)))}
.bo-paso{position:relative}
.bo-pn{display:grid;place-items:center;width:46px;height:46px;border-radius:99px;margin-bottom:18px;
  font:800 1.1rem/1 var(--f-tit);color:var(--c2);background:var(--sf);border:2px solid var(--c1);position:relative}
.bo-paso h3{margin:0 0 8px;font:700 1.12rem/1.3 var(--f-tit);letter-spacing:-.01em}
.bo-paso p{margin:0;color:var(--mu);font-size:.95rem;line-height:1.62}
.bo-pie{margin:30px 0 0;color:var(--mu);font-size:.88rem}

/* el cierre: precio y contacto en una banda de acento */
.bo-cierre-sec{padding-bottom:20px}
.bo-cierre{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center;
  padding:44px;border-radius:24px;background:var(--c2);color:var(--sobre-c)}
.bo-cbrow{margin:0 0 10px;font:600 .95rem/1.3 var(--f-tx);opacity:.85}
.bo-cifra{margin:0 0 14px!important;font:800 clamp(1.7rem,3.4vw,2.5rem)/1.08 var(--f-tit)!important;letter-spacing:-.025em;color:inherit}
.bo-pdesc{margin:0;line-height:1.65;max-width:36em;opacity:.92}
.bo-pcaja{display:grid;gap:12px}
.bo-cbtn{display:grid;place-items:center;min-height:52px;padding:0 20px;border-radius:12px;text-decoration:none;
  font:700 .98rem/1.2 var(--f-tx);text-align:center;color:var(--sobre-c);border:1.5px solid color-mix(in srgb,var(--sobre-c) 55%,transparent)}
.bo-cbtn:hover{background:color-mix(in srgb,var(--sobre-c) 10%,transparent)}
.bo-cbtn-pri{background:var(--sobre-c);color:var(--c2);border-color:var(--sobre-c)}
.bo-cbtn-pri:hover{background:color-mix(in srgb,var(--sobre-c) 88%,var(--c2))}
.bo-cbtn:focus-visible{outline:3px solid var(--sobre-c);outline-offset:3px}
.bo-cierre .bo-fine{color:inherit;opacity:.85}
.bo-cierre .bo-fine b{color:inherit}
.bo-cierre .s-warn a{color:inherit}
.bo-fine{margin:0;color:var(--mu);font-size:.8rem;line-height:1.55}
.bo-fine b{color:var(--tx)}

.bo-faq details:first-child{margin-top:0}

.bo-foot{display:grid;gap:8px}
.bo-foot p{margin:0;color:var(--mu);font-size:.88rem}
.bo-foot a{color:var(--c2)}

/* ---------- pantallas medianas ---------- */
@media (max-width:1000px){
  .bo-top{grid-template-columns:1fr;gap:22px;margin-bottom:34px}
  .bo-escena{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:20px;gap:20px}
  .bo-dos{grid-template-columns:1fr;gap:26px}
  .bo-dos-t{position:static}
  .bo-cierre{grid-template-columns:1fr;padding:34px 28px;gap:26px}
}
@media (max-width:820px){
  .bo-escena{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .bo-pasos{grid-template-columns:1fr;gap:26px}
  .bo-pasos::before{left:22px;right:auto;top:22px;bottom:22px;width:2px;height:auto;
    background:linear-gradient(180deg,var(--c1),color-mix(in srgb,var(--c1) 20%,var(--bd)))}
  .bo-paso{padding-left:66px}
  .bo-pn{position:absolute;left:0;top:0}
}
/* ---------- móvil ---------- */
@media (max-width:640px){
  .bo-hero{padding:38px 0 40px}
  .bo-sec{padding:54px 0}
  .bo-acts .s-btn{width:100%}
  .bo-escena{padding:0;border:0;background:none}
  .bo-chat{border-radius:22px;box-shadow:0 14px 34px var(--sombra)}
  /* Antes tenía altura fija (62 % de la pantalla): al empezar, con un solo mensaje, el
     teléfono enseñaba media pantalla vacía. Ahora crece con la conversación hasta un tope,
     y a partir de ahí se desplaza por dentro. */
  .bo-msgs{height:auto;min-height:230px;max-height:min(58vh,440px);max-height:min(58svh,440px)}
  .bo-m{max-width:90%}
  .bo-cierre{padding:28px 20px;border-radius:18px}
  .bo-cierre-sec{padding-bottom:8px}
  /* En el móvil la barra solo lleva la marca (que ya vuelve a la web) y el interruptor:
     con el botón puesto, la fila se salía por la derecha. */
  .bo-nav a:not(.s-btn){display:none}
  .bo-nav .s-btn{display:none}
  .bo-head .s-brand{min-width:0;flex:0 1 auto}   /* que la marca encoja: a 320 px empujaba la barra fuera */
  .bo-head .s-brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bo-chat-t{display:none}   /* en estrecho cede su sitio: la etiqueta «Demostración» no se esconde nunca */
  .bo-chip,.bo-tab-ej{font-size:.76rem}
  .bo-cap .ek-num{font-size:.75rem}
  .bo-head .s-tema button{width:40px;height:40px}
  .bo-cierre-sec{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
}

/* ---------- movimiento ---------- */
@media (prefers-reduced-motion:no-preference){
  .bo-op,.bo-cbtn{transition:background-color .2s,border-color .2s,color .2s}
  .bo-m{animation:bo-entra .3s cubic-bezier(.22,.61,.36,1) both}
  @keyframes bo-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .bo-esc i{animation:bo-pensar 1.1s ease-in-out infinite}
  .bo-esc i:nth-child(2){animation-delay:.16s}
  .bo-esc i:nth-child(3){animation-delay:.32s}
  @keyframes bo-pensar{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
  .bo-slot-nueva,.bo-aviso-nueva{animation:bo-llega .7s cubic-bezier(.22,.61,.36,1) both}
  @keyframes bo-llega{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .bo-msgs{scroll-behavior:auto}
}

/* ============================================================================
   3.39 · WPBot: demos, planes y modales
   ============================================================================
   Los botones .bo-cbtn nacieron dentro de la banda de acento, donde el color de
   texto es el de encima del acento. Fuera de ella hay que devolverlos al color
   normal de la página, o salen invisibles sobre el fondo. */
.bo-sec .bo-cbtn{color:var(--tx);border-color:var(--bd2);background:var(--sf)}
.bo-sec .bo-cbtn:hover{border-color:var(--c2);color:var(--c2);background:var(--t2)}
.bo-sec .bo-cbtn-pri{background:var(--c2);color:var(--sobre-c);border-color:var(--c2)}
.bo-sec .bo-cbtn-pri:hover{background:var(--c2h);color:var(--sobre-c);border-color:var(--c2h)}
.bo-sec .bo-cbtn-tx{background:transparent;border-color:transparent;text-decoration:underline;
  text-underline-offset:4px;color:var(--c2)}
.bo-sec .bo-cbtn-tx:hover{background:var(--t2);border-color:transparent}
.bo-sec .bo-cbtn:focus-visible{outline:3px solid var(--tx);outline-offset:3px}
.bo-h2-s{margin:-20px 0 30px;color:var(--mu);max-width:60ch;line-height:1.6}

/* ---------- índice de demos: todos a la vista, no un carrusel ---------- */
.dm-indice{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.dm-chip{display:inline-flex;align-items:baseline;gap:9px;flex:0 1 auto;min-height:40px;padding:10px 16px;
  border:1px solid var(--bd);border-radius:999px;background:var(--sf);color:var(--mu);cursor:pointer;
  text-align:left;transition:border-color .25s,background .25s,color .25s}
.dm-chip b{font:700 .95rem/1.2 var(--f-tit);color:var(--tx);letter-spacing:-.01em}
.dm-chip span{display:none}
.dm-chip i{font:500 .82rem/1.2 var(--f-txt);font-style:normal;color:var(--mu)}
.dm-chip:hover{border-color:var(--c1)}
.dm-chip:focus-visible{outline:3px solid var(--tx);outline-offset:2px}
.dm-chip.on{border-color:var(--c1);background:var(--t1)}
.dm-chip.on b,.dm-chip.on i{color:var(--c2)}
.dm-brow{font:700 .72rem/1.3 var(--f-num);letter-spacing:.14em;text-transform:uppercase;color:var(--mu);white-space:nowrap}
.dm-linea{flex:1 1 auto;height:1px;background:var(--bd)}
.dm-slide{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:36px;align-items:start}
.dm-slide[hidden]{display:none}
.dm-marca{margin:0 0 10px;font:700 .74rem/1.3 var(--f-num);letter-spacing:.1em;text-transform:uppercase;color:var(--c2)}
.dm-t{margin:0 0 14px;font:800 clamp(1.5rem,3vw,2.1rem)/1.14 var(--f-tit);letter-spacing:-.025em}
.dm-t span{color:var(--mu)}
.dm-d{margin:0 0 18px;color:var(--mu);line-height:1.65;max-width:44ch}
.dm-si{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px}
.dm-si li{position:relative;padding-left:24px;font-size:.93rem;line-height:1.5}
.dm-si li::before{content:"";position:absolute;left:2px;top:.52em;width:10px;height:2px;background:var(--c1)}
.dm-si li::after{content:"";position:absolute;left:8px;top:.25em;width:6px;height:6px;border-top:2px solid var(--c1);
  border-right:2px solid var(--c1);transform:rotate(45deg)}
.dm-acc{margin:0}
.dm-acc .bo-cbtn{display:inline-grid;min-width:220px}
.dm-caja{min-width:0}

/* El demo de Alice es un panel de tres columnas: necesita el ancho entero. El texto se
   reparte arriba en dos columnas y el panel va debajo, a lo ancho. */
.dm-ancho{grid-template-columns:1fr;gap:26px}
.dm-ancho .dm-tx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 40px;align-items:start}
.dm-ancho .dm-marca,.dm-ancho .dm-t{grid-column:1}
.dm-ancho .dm-d{grid-column:1;margin-bottom:0}
.dm-ancho .dm-si{grid-column:2;grid-row:1/4;margin:0;align-self:center}

@media (max-width:980px){
  .dm-slide{grid-template-columns:1fr;gap:24px}
  .dm-ancho .dm-tx{grid-template-columns:1fr}
  .dm-ancho .dm-si{grid-column:1;grid-row:auto;margin-top:12px}
  .dm-acc .bo-cbtn{width:100%}
}

/* ---------- planes, uno por servicio ---------- */
.pl-sv{margin:0 0 42px}
.pl-sv:last-of-type{margin-bottom:0}
.pl-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--bd)}
.pl-sv-n{margin:0;font:800 1.18rem/1.25 var(--f-tit);letter-spacing:-.02em}
.pl-sv-n span{font:600 .74rem/1.3 var(--f-num);letter-spacing:.1em;text-transform:uppercase;color:var(--c2);
  margin-left:8px;vertical-align:middle}
.pl-sv-d{margin:6px 0 0;color:var(--mu);font-size:.92rem;line-height:1.6;max-width:62ch}
.pl-verdemo{flex:0 0 auto}
.pl-lista{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.pl-card{display:flex;flex-direction:column;gap:4px;padding:28px 24px 26px;border:1px solid var(--bd);border-radius:18px;background:var(--sf)}
.pl-top{border-color:var(--c1);box-shadow:0 0 0 1px var(--c1) inset,0 22px 50px -32px var(--sombra);position:relative}
.pl-top::before{content:"";position:absolute;inset:-1px -1px auto;height:4px;border-radius:18px 18px 0 0;background:var(--c1)}
.pl-n{margin:0 0 10px;font:700 .74rem/1.3 var(--f-num);letter-spacing:.12em;text-transform:uppercase;color:var(--mu)}
.pl-top .pl-n{color:var(--c2)}
.pl-n span{font-weight:500}
.pl-precio{margin:0;display:flex;align-items:baseline;gap:2px}
.pl-precio b{font:800 clamp(1.8rem,3.4vw,2.4rem)/1 var(--f-tit);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pl-precio span{color:var(--mu);font-size:.95rem;font-weight:600}
.pl-setup{margin:8px 0 0;color:var(--mu);font-size:.84rem}
.pl-si{list-style:none;margin:20px 0 24px;padding:0;display:grid;gap:9px}
.pl-si li{position:relative;padding-left:22px;font-size:.92rem;line-height:1.5}
.pl-si li::before{content:"";position:absolute;left:0;top:.68em;width:12px;height:2px;background:var(--c1)}
.pl-si .pl-no{color:var(--mu);text-decoration:line-through;text-decoration-color:var(--bd)}
.pl-si .pl-no::before{background:var(--bd)}
.pl-acc{display:grid;gap:8px;margin:auto 0 0}
.pl-acc .bo-cbtn{min-height:48px;font-size:.92rem}
.pl-nota{margin:26px 0 0;text-align:center;color:var(--mu);font-size:.88rem}
.pl-origen{margin:8px 0 0;text-align:center;color:var(--mu);font-size:.84rem;line-height:1.6;max-width:64ch;margin-inline:auto}
.pl-aviso{color:var(--wa-fg)}

@media (max-width:900px){
  .pl-lista{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
}

/* ---------- el panel del formulario, dentro de la página ----------
   No es una ventana: se mete debajo del plan elegido. Ni backdrop, ni foco atrapado,
   ni la página escondida detrás. Se cierra con Escape, con Cancelar o al terminar. */
.fm{margin:20px 0 0;opacity:0;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease}
.fm.on{opacity:1;transform:none}
.fm[hidden]{display:none}
.fm-in{position:relative;border:1px solid var(--c1);border-radius:16px;background:var(--sf);
  padding:20px 20px 18px;max-width:640px;box-shadow:0 24px 56px -40px var(--sombra)}
.fm-in[hidden]{display:none}
.fm-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 4px}
.fm-brow{margin:0 0 2px;font:700 .7rem/1.3 var(--f-num);letter-spacing:.12em;text-transform:uppercase;color:var(--c2)}
.fm-t{margin:0;font:800 1.14rem/1.25 var(--f-tit);letter-spacing:-.02em}
.fm-x{flex:0 0 auto;width:40px;height:40px;border-radius:10px;border:1px solid transparent;background:none;
  color:var(--mu);font-size:22px;line-height:1;cursor:pointer}
.fm-x:hover{background:var(--t2);color:var(--tx)}
.fm-x:focus-visible{outline:3px solid var(--tx);outline-offset:2px}
.fm-sub{margin:0 0 16px;color:var(--mu);font-size:.9rem;line-height:1.55}
.fm-sub:empty{display:none}
.fm-rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.fm-campo{margin:0;display:grid;gap:5px}
.fm-campo label{font:700 .68rem/1.3 var(--f-num);letter-spacing:.1em;text-transform:uppercase;color:var(--mu)}
.fm-campo input,.fm-campo select{width:100%;min-height:44px;border:1px solid var(--bd);border-radius:10px;
  padding:0 12px;background:var(--b0);color:var(--tx);font:inherit;font-size:.94rem}
.fm-campo input:focus-visible,.fm-campo select:focus-visible{outline:3px solid var(--tx);outline-offset:2px}
.fm-campo input[aria-invalid],.fm-campo select[aria-invalid]{border-color:var(--er-fg)}
.fm-demo .fm-solo-plan,.fm-plan .fm-solo-demo{display:none}
.fm-check{margin:12px 0 0}
.fm-check label{display:flex;gap:9px;align-items:flex-start;font-size:.84rem;line-height:1.5;color:var(--mu);cursor:pointer}
.fm-check input{width:18px;height:18px;flex:0 0 18px;margin-top:1px;accent-color:var(--c1)}
.fm-check input[aria-invalid]{outline:2px solid var(--er-fg);outline-offset:2px}
.fm-err{margin:10px 0 0;color:var(--er-fg);font-size:.87rem;line-height:1.5}
.fm-err:empty{display:none}
.fm-acc{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.fm-acc .bo-cbtn{min-height:46px}
.fm-acc .fm-enviar{background:var(--c2);color:var(--sobre-c);border-color:var(--c2)}
.fm-acc .fm-enviar:hover{background:var(--c2h);border-color:var(--c2h);color:var(--sobre-c)}
.fm-acc .fm-enviar[disabled]{opacity:.6;cursor:progress}
.fm-fine{margin:12px 0 0;color:var(--mu);font-size:.79rem;line-height:1.55}
.fm-fine:empty{display:none}
.fm-ref{margin:0;font:600 .9rem/1.4 var(--f-tx);color:var(--mu)}
.fm-ref b{font-family:var(--f-num);color:var(--tx)}
@media (max-width:620px){
  .fm-rejilla{grid-template-columns:minmax(0,1fr)}
  .fm-acc .bo-cbtn{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.fm{transition:none;opacity:1;transform:none}}

/* ---------- Alice: el demo de domótica ---------- */
.al{--al-bg:#0b1220;--al-sf:#121c2f;--al-bd:rgba(150,185,255,.18);--al-tx:#e8efff;--al-tx2:#9db0d6;
  --al-on:#ffd27a;--al-ok:#5fe3aa;--al-luz:#5ccbff;--al-al:#ff7a90;
  border-radius:18px;overflow:hidden;background:var(--al-bg);color:var(--al-tx);border:1px solid var(--al-bd)}
.al-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid var(--al-bd)}
.al-marca{margin:0;display:flex;align-items:center;gap:10px;font:800 1rem/1 var(--f-tit);letter-spacing:-.01em}
.al-on{display:inline-flex;align-items:center;gap:6px;font:600 .74rem/1 var(--f-tx);color:var(--al-tx2);letter-spacing:0}
.al-on i{width:7px;height:7px;border-radius:50%;background:var(--al-ok)}
.al-reloj{margin:0;display:flex;align-items:center;gap:10px;font:600 .8rem/1 var(--f-num);color:var(--al-tx2)}
.al-reloj b{color:var(--al-tx);font-size:.95rem}
.al-cuerpo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.al-col{padding:16px;border-right:1px solid var(--al-bd);min-width:0}
.al-col:last-child{border-right:0}
.al-tit{margin:0 0 9px;font:700 .68rem/1.3 var(--f-num);letter-spacing:.12em;text-transform:uppercase;color:var(--al-tx2)}
.al-tit:not(:first-child){margin-top:18px}

.al-zonas{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.al-z{width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;text-align:left;
  padding:10px 12px;min-height:50px;border:1px solid var(--al-bd);border-radius:11px;background:var(--al-sf);
  color:var(--al-tx);font:inherit;cursor:pointer;transition:border-color .2s,background-color .2s}
.al-z:hover{border-color:rgba(150,185,255,.4)}
.al-z-n{font-size:.9rem;font-weight:600}
.al-z-d{grid-column:1;font:500 .74rem/1.3 var(--f-tx);color:var(--al-tx2)}
.al-z-p{grid-row:1/3;grid-column:2;width:11px;height:11px;border-radius:50%;background:#2b3a56;transition:background-color .25s,box-shadow .25s}
.al-z.on{border-color:color-mix(in srgb,var(--al-on) 55%,transparent);background:color-mix(in srgb,var(--al-on) 9%,var(--al-sf))}
.al-z.on .al-z-p{background:var(--al-on);box-shadow:0 0 0 4px color-mix(in srgb,var(--al-on) 22%,transparent)}
.al-z.on .al-z-d{color:var(--al-on)}
.al-z:focus-visible,.al-d:focus-visible,.al-esc:focus-visible,.al-s:focus-visible{outline:3px solid var(--al-tx);outline-offset:2px}

.al-escenas{display:flex;flex-wrap:wrap;gap:6px}
.al-esc{border:1px solid var(--al-bd);background:transparent;color:var(--al-tx2);border-radius:999px;
  padding:9px 13px;min-height:40px;font:600 .8rem/1 var(--f-tx);cursor:pointer}
.al-esc:hover{color:var(--al-tx);border-color:rgba(150,185,255,.45)}

.al-med{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.al-med li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;
  padding:10px 12px;border-radius:11px;background:var(--al-sf);border:1px solid var(--al-bd)}
.al-med span{font-size:.78rem;color:var(--al-tx2)}
.al-med b{font:700 .95rem/1 var(--f-num);font-variant-numeric:tabular-nums}
.al-med small{grid-column:1/-1;font-size:.72rem;color:var(--al-tx2)}
.al-spark{grid-column:1/-1;width:100%;height:26px;margin-top:4px}
.al-spark polyline{fill:none;stroke:var(--al-luz);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.al-barra{grid-column:1/-1;height:5px;border-radius:3px;background:#22304a;overflow:hidden;margin-top:5px}
.al-barra i{display:block;height:100%;background:var(--al-luz);transition:width .4s}

.al-cam{border:1px solid var(--al-bd);border-radius:12px;overflow:hidden;background:#060b14;cursor:pointer}
.al-cam-img{position:relative;height:132px;background:linear-gradient(180deg,#0a1220,#060b14)}
.al-cam-sue{position:absolute;left:0;right:0;bottom:0;height:38%;background:#0e1626;border-top:1px solid #1b2942}
.al-cam-pue{position:absolute;left:16%;bottom:38%;width:62px;height:72px;border-radius:3px;background:#17233a;border:1px solid #243454}
.al-cam-pla{position:absolute;right:16%;bottom:38%;width:34px;height:40px;border-radius:50% 50% 8px 8px;background:#14321f;border:1px solid #1d4a2c}
.al-cam-per,.al-cam-caja{position:absolute;opacity:0;transition:opacity .4s}
.al-cam-per{left:44%;bottom:38%;width:26px;height:58px;border-radius:13px 13px 4px 4px;background:#2d4f86}
.al-cam-per::before{content:"";position:absolute;left:50%;top:-14px;transform:translateX(-50%);width:17px;height:17px;border-radius:50%;background:#365c99}
.al-cam-caja{left:52%;bottom:38%;width:30px;height:22px;background:#6b5433;border:1px solid #8a6b40}
.al-cam[data-estado="persona"] .al-cam-per{opacity:1}
.al-cam[data-estado="paquete"] .al-cam-caja{opacity:1}
.al-cam[data-estado="persona"],.al-cam[data-estado="paquete"]{border-color:color-mix(in srgb,var(--al-al) 55%,transparent)}
.al-cam-pie{margin:0;display:flex;align-items:center;gap:8px;padding:9px 12px;border-top:1px solid var(--al-bd);
  font-size:.8rem;color:var(--al-tx2)}
.al-cam-pie i{width:7px;height:7px;border-radius:50%;background:#3a4a68}
.al-cam[data-estado="persona"] .al-cam-pie i,.al-cam[data-estado="paquete"] .al-cam-pie i{background:var(--al-al)}
.al-cam[data-estado="persona"] .al-cam-pie,.al-cam[data-estado="paquete"] .al-cam-pie{color:var(--al-al)}

.al-disp{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.al-d{display:grid;gap:2px;text-align:left;padding:10px 12px;min-height:50px;border:1px solid var(--al-bd);
  border-radius:11px;background:var(--al-sf);color:var(--al-tx);font:inherit;cursor:pointer}
.al-d span{font-size:.78rem;color:var(--al-tx2)}
.al-d b{font-size:.86rem;font-weight:600}
.al-d.on{border-color:color-mix(in srgb,var(--al-ok) 50%,transparent);background:color-mix(in srgb,var(--al-ok) 10%,var(--al-sf))}
.al-d.on b{color:var(--al-ok)}

.al-log{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.8rem}
.al-log li{display:grid;grid-template-columns:auto 1fr;gap:9px;color:var(--al-tx2);line-height:1.45}
.al-log b{font:600 .76rem/1.45 var(--f-num);color:var(--al-tx)}
.al-log-v{opacity:.6}

.al-col-chat{display:flex;flex-direction:column}
.al-msgs{list-style:none;margin:0 0 9px;padding:0;display:flex;flex-direction:column;gap:7px;
  flex:1 1 auto;min-height:190px;max-height:290px;overflow-y:auto}
.al-m{max-width:86%;padding:9px 12px;border-radius:13px;font-size:.87rem;line-height:1.5}
.al-m-bot{align-self:flex-start;background:var(--al-sf);border:1px solid var(--al-bd);border-bottom-left-radius:4px}
.al-m-yo{align-self:flex-end;background:color-mix(in srgb,var(--al-luz) 20%,var(--al-sf));
  border:1px solid color-mix(in srgb,var(--al-luz) 35%,transparent);border-bottom-right-radius:4px}
.al-m-esc{display:flex;gap:4px;align-items:center}
.al-m-esc i{width:6px;height:6px;border-radius:50%;background:var(--al-tx2)}
.al-sug{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.al-s{border:1px solid var(--al-bd);background:transparent;color:var(--al-tx2);border-radius:999px;
  padding:7px 11px;min-height:36px;font:500 .76rem/1 var(--f-tx);cursor:pointer}
.al-s:hover{color:var(--al-tx);border-color:rgba(150,185,255,.45)}
.al-form{display:flex;gap:7px}
.al-form input{flex:1 1 auto;min-width:0;min-height:44px;border:1px solid var(--al-bd);border-radius:11px;
  padding:0 12px;background:#0d1626;color:var(--al-tx);font:inherit;font-size:.88rem}
.al-form input::placeholder{color:#64749a}
.al-form input:focus-visible{outline:3px solid var(--al-tx);outline-offset:2px}
.al-form button{flex:0 0 auto;width:44px;min-height:44px;border:0;border-radius:11px;background:var(--al-luz);
  color:#06132a;font-size:1.1rem;font-weight:700;cursor:pointer}
.al-form button:hover{filter:brightness(1.08)}
.al-form button:focus-visible{outline:3px solid var(--al-tx);outline-offset:2px}

.al-aviso{margin:0;padding:12px 16px;border-top:1px solid var(--al-bd);color:var(--al-tx2);
  font-size:.79rem;line-height:1.55;background:#0a1220}
.al-aviso b{color:var(--al-tx)}
.al.al-noche{--al-bg:#070c16;--al-sf:#0e1728}

@media (prefers-reduced-motion:no-preference){
  .al-z.on .al-z-p{animation:al-luz 3.4s ease-in-out infinite}
  @keyframes al-luz{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--al-on) 12%,transparent)}}
  .al-m-esc i{animation:al-pun 1.2s ease-in-out infinite}
  .al-m-esc i:nth-child(2){animation-delay:.15s}
  .al-m-esc i:nth-child(3){animation-delay:.3s}
  @keyframes al-pun{50%{opacity:.3;transform:translateY(-2px)}}
  .al-cam[data-estado="persona"] .al-cam-pie i,.al-cam[data-estado="paquete"] .al-cam-pie i{animation:al-late 1.3s ease-in-out infinite}
  @keyframes al-late{50%{opacity:.35}}
  .al-cam.mirando .al-cam-img::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--al-luz) 22%,transparent),transparent);
    animation:al-scan 1.3s ease-in-out 2}
  @keyframes al-scan{from{transform:translateY(-100%)}to{transform:translateY(100%)}}
  .al-log li.nuevo{animation:al-entra .45s ease}
  @keyframes al-entra{from{opacity:0;transform:translateX(-6px)}}
  .al-d.on b{transition:color .25s}
}

@media (max-width:1100px){
  .al-cuerpo{grid-template-columns:1fr 1fr}
  .al-col{border-bottom:1px solid var(--al-bd)}
  .al-col-chat{grid-column:1/-1;border-right:0;border-bottom:0}
}
@media (max-width:640px){
  .al-cuerpo{grid-template-columns:1fr}
  .al-col{border-right:0}
  .al-disp{grid-template-columns:1fr 1fr}
  .fm-in{padding:18px 16px 16px}
}


/* ===========================================================================
   EL ÍNDICE DEL TITULAR (3.40)
   Lo primero de la página: dónde están todos los demos. Son enlaces de verdad:
   sin JavaScript llevan a la sección; con él, además abren el que toca.
   =========================================================================== */
.bo-indice{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;
  list-style:none;margin:34px 0 0;padding:0}
.bo-ix{display:grid;gap:7px;height:100%;min-height:40px;padding:18px 20px;border:1px solid var(--bd);
  border-radius:18px;background:var(--sf);text-decoration:none;color:var(--mu);
  transition:border-color .25s,transform .25s,box-shadow .25s}
.bo-ix:hover{border-color:var(--c1);transform:translateY(-2px);box-shadow:0 12px 26px rgba(22,26,35,.08)}
.bo-ix:focus-visible{outline:3px solid var(--tx);outline-offset:3px}
.bo-ix-c{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.bo-ix-c b{font:700 1.08rem/1.2 var(--f-tit);color:var(--tx);letter-spacing:-.012em}
.bo-ix-c span{font:600 .72rem/1.2 var(--f-num);letter-spacing:.09em;text-transform:uppercase;color:var(--c2)}
.bo-ix-d{font-size:.93rem;line-height:1.45}
.bo-ix-b{margin-top:2px;font:600 .88rem/1 var(--f-txt);color:var(--c2)}
.bo-ix-b::after{content:" \2192"}
@media (prefers-reduced-motion:reduce){.bo-ix:hover{transform:none}}

/* El cierre ya no canta un precio: el precio vive en Planes, por servicio. */
.bo-cierre-h{margin:6px 0 0;font:800 clamp(1.3rem,2.6vw,1.9rem)/1.15 var(--f-tit);letter-spacing:-.018em}

/* Los servicios del catálogo que todavía no tienen plan publicado. */
.pl-resto{margin:22px 0 0;color:var(--mu);font-size:.93rem;line-height:1.6}
.pl-resto b{color:var(--tx);font-weight:600}
/* 3.42: el código de referido o cupón solo se pide al pedir un sistema propio */
.fm-solo-unico{display:none}
.fm-unico .fm-solo-unico{display:grid}