/* ============================================================
   agente-wa.css — Landing agente de WhatsApp · bloque 3
   Usa base.css + la familia de agente-voz.css (hero, secciones,
   dolor, pasos, precio, FAQ, cita ya vienen de allí).
   Solo añade: mini-chat del hero + teléfono WA de la demo.
============================================================ */

/* ---------- MINI-CHAT DEL HERO (estático, decorativo) ---------- */
.wa-mini{width:min(300px,72vw);background:var(--panel);border:1px solid var(--line-2);border-radius:18px;overflow:hidden;box-shadow:0 30px 70px -45px rgba(0,0,0,.9),0 0 60px -30px rgba(0,229,255,.35)}
.wa-mini-head{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-bottom:1px solid var(--line);background:rgba(0,229,255,.03)}
.wa-mini-head .wa-mini-ava{flex:none;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(0,229,255,.5),rgba(0,229,255,.12));border:1px solid var(--line-2)}
.wa-mini-head strong{display:block;font-size:.82rem}
.wa-mini-head small{color:var(--accent);font-size:.68rem;font-family:var(--mono)}
.wa-mini-body{padding:.8rem .8rem .9rem;display:grid;gap:.5rem;min-height:150px;align-content:start}

/* ---------- TELÉFONO DEMO (reproductor en bucle) ---------- */
.wa-phone{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;max-width:480px;box-shadow:0 30px 70px -45px rgba(0,0,0,.9),0 0 80px -40px rgba(0,229,255,.4)}
.wa-head{display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);background:rgba(0,229,255,.03)}
.wa-head .wa-ava{flex:none;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(0,229,255,.5),rgba(0,229,255,.12));border:1px solid var(--line-2)}
.wa-head .wa-who{min-width:0;flex:1}
.wa-head .wa-who strong{display:block;font-size:.88rem}
.wa-head .wa-who small{color:var(--accent);font-size:.7rem;font-family:var(--mono)}
.wa-head .wa-time{flex:none;font-family:var(--mono);font-size:.68rem;color:var(--text-mute)}
.wa-lines{list-style:none;padding:1rem .85rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.55rem;height:430px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 48px);mask-image:linear-gradient(180deg,transparent 0,#000 48px)}
.wa-phone:not(.playing) .wa-lines{height:auto}

/* burbujas */
.wline{max-width:92%;display:grid;gap:.15rem}
.wline p{font-size:.9rem;line-height:1.4;padding:.55rem .75rem;border-radius:12px;position:relative}
.wline .wt{font-family:var(--mono);font-size:.62rem;color:var(--text-mute);padding:0 .3rem}
.wline.in{justify-self:start}
.wline.in p{background:var(--panel-2);border:1px solid var(--line);border-top-left-radius:4px}
.wline.in .wt{text-align:left}
.wline.out{justify-self:end;text-align:right}
.wline.out p{background:rgba(0,229,255,.09);border:1px solid rgba(0,229,255,.22);border-top-right-radius:4px;text-align:left}
.wline.out .wt{text-align:right}
.wline.link p{background:rgba(0,229,255,.05);border:1px dashed var(--accent-dim)}
.wline.link b{color:var(--accent)}
.wline.note{justify-self:center;text-align:center;max-width:100%}
.wline.note p{font-family:var(--mono);font-size:.72rem;color:var(--accent);border:1px dashed var(--accent-dim);border-radius:999px;padding:.4rem .9rem;background:transparent}

/* indicador "escribiendo…" (burbuja con 3 puntos) */
.wline.typing{justify-self:start}
.wline.typing p{display:flex;gap:4px;align-items:center;padding:.7rem .8rem}
.wline.typing .tdots{display:inline-flex;gap:3px}
.wline.typing .tdots i{width:5px;height:5px;border-radius:50%;background:var(--text-mute);animation:tdot 1.1s ease-in-out infinite}
.wline.typing .tdots i:nth-child(2){animation-delay:.15s}
.wline.typing .tdots i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}

/* modo reproducción: líneas aparecen una a una */
.wa-phone.playing .wa-lines .wline{display:none}
.wa-phone.playing .wa-lines .wline.show{display:grid;animation:lineIn .35s ease both}
@keyframes lineIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.wa-foot{font-family:var(--mono);font-size:.72rem;color:var(--text-mute);padding:.75rem 1rem;border-top:1px solid var(--line)}

@media (prefers-reduced-motion: reduce){
  .wline.typing .tdots i{animation:none;opacity:.5}
  .wa-phone.playing .wa-lines .wline.show{animation:none}
}

@media(max-width:880px){
  .wa-phone{max-width:none}
  .wa-lines{height:360px}
  /* en ESTA landing el texto va primero y el chat después (orden natural del DOM);
     anula el order:-1 heredado de agente-voz.css (allí el orbe subía delante) */
  .hero-visual{order:1}
  .hero-grid{gap:1.6rem}
  /* el mini-chat del hero es decoración: en móvil FUERA (queda fuera de contexto;
     la demo completa del chat sigue más abajo) */
  .hero-visual{display:none}
}

/* ---------- ROTADOR H1 SIN SALTOS: cada frase SIEMPRE en 1 línea ----------
   nowrap + tamaño ajustado al ancho (clamp por viewport) = la altura del H1
   no cambia nunca al rotar frases. */
.hero h1 .typed-line{white-space:nowrap;min-height:1.25em}
@media(max-width:880px){
  .hero h1{font-size:clamp(1.72rem,7.2vw,2.6rem)}
}

/* ---------- BENEFICIOS (qué gana el negocio, no qué hace el agente) ---------- */
.bene-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.bene{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.2rem;position:relative;overflow:hidden;transition:border-color .2s}
.bene:hover{border-color:var(--accent-dim)}
.bene::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),transparent 70%);opacity:.5}
.bene .b-num{font-family:var(--mono);font-size:.72rem;color:var(--accent);letter-spacing:.1em;display:block;margin-bottom:.6rem}
.bene .b-big{font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:-.01em;display:block;margin-bottom:.35rem}
.bene .b-big em{font-style:normal;color:var(--accent)}
.bene p{color:var(--text-soft);font-size:.9rem}