/* ============================================================
   /agentes-ia/ — paginas web y agentes de IA a medida
   Extiende hub_chirho.css.

   Nota: las clases llevan sufijo `-wa` porque la pagina nacio
   como /whatsapp/. Se conservan a proposito: renombrarlas en
   700 lineas de HTML solo agregaria riesgo de tipeo.

   La tesis de la pagina es visual: el chatbot se dibuja apagado
   y encajonado; el agente, vivo y abierto. Si alguien "normaliza"
   esos estilos para que se vean iguales, el argumento se pierde.
   ============================================================ */

:root{
  --chat:#6f6c66;                 /* chatbot · neutro, deliberadamente muerto */
  --chat-soft:rgba(242,239,230,.05);
  --chat-line:rgba(242,239,230,.10);
}
@property --ang-chirho{syntax:'<angle>';inherits:false;initial-value:0deg}

.wrap-wa{max-width:1400px;margin:0 auto;padding:0 2.5rem}
.sec-wa{padding:clamp(5rem,10vw,9rem) 0;position:relative;overflow:hidden}

/* ---------- CABEZA DE SECCION EDITORIAL ----------
   El numeral vive como marca de agua detras del titulo. */
.head-wa{position:relative;margin-bottom:clamp(2.5rem,5vw,4rem);max-width:66ch}
/* El numeral vive en el aire a la derecha del titulo, no debajo del texto:
   detras de las letras se leia como suciedad, no como marca editorial. */
.head-wa .idx{
  position:absolute;left:100%;margin-left:2vw;top:50%;transform:translateY(-52%);z-index:0;
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:clamp(7rem,14vw,12rem);line-height:1;
  color:rgba(242,239,230,.055);pointer-events:none;user-select:none;
}
.head-wa>*{position:relative;z-index:1}
.head-wa .kicker{
  display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem;
  font-family:'JetBrains Mono',monospace;font-size:.7rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
}
.head-wa .kicker::before{content:"";width:44px;height:1px;background:var(--accent);opacity:.6;flex:0 0 44px}
.head-wa h2{
  font-family:'Instrument Serif',serif;font-weight:400;font-style:italic;
  font-size:clamp(2.2rem,5vw,4.4rem);line-height:.98;letter-spacing:-.03em;color:var(--ink);
}
.head-wa h2 em{color:var(--accent);font-style:inherit}
.head-wa h2 .stroke{
  font-family:'Space Grotesk',sans-serif;font-style:normal;font-weight:300;letter-spacing:-.04em;
  -webkit-text-stroke:1.2px var(--ink);-webkit-text-fill-color:transparent;
}
.head-wa p{margin-top:1.2rem;color:var(--ink-soft);font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.65;max-width:62ch}
.head-wa p strong{color:var(--ink);font-weight:500}
/* ojo: el background va SOLO en el ::before (la reglita).
   Ponerlo tambien en .kicker pinta una barra solida sobre el texto. */
.head-wa.muted .kicker{color:var(--chat)}
.head-wa.muted .kicker::before{background:var(--chat);opacity:.55}
/* subtitulo dentro de una seccion ya numerada: sin marca de agua */
.head-wa.sub-wa{margin-top:clamp(3.5rem,7vw,5.5rem);margin-bottom:1.6rem}
.head-wa.sub-wa h2{font-size:clamp(1.7rem,3vw,2.6rem)}
/* kicker suelto del hero, sin la cabeza de seccion completa */
.kicker-solo-wa{
  display:flex;align-items:center;gap:1rem;
  font-family:'JetBrains Mono',monospace;font-size:.72rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
}
.kicker-solo-wa::before{content:"";width:44px;height:1px;background:var(--accent);opacity:.6;flex:0 0 44px}
.fuente-wa{
  display:block;margin-top:.9rem;font-family:'JetBrains Mono',monospace;font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);font-weight:400;
}

/* ---------- HERO ---------- */
.hero-wa{position:relative;padding:clamp(8rem,14vw,11rem) 0 clamp(3rem,6vw,5rem);overflow:hidden}
.hero-wa::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 74% at 12% 8%,rgba(0,240,255,.15),transparent 62%),
    radial-gradient(46% 62% at 96% 4%,rgba(0,82,255,.17),transparent 60%);
  filter:blur(40px);
}
.hero-wa>*{position:relative;z-index:1}
.hero-wa .crumb{
  display:flex;align-items:center;gap:.6rem;margin-bottom:1.6rem;
  font-family:'JetBrains Mono',monospace;font-size:.64rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);
}
.hero-wa .crumb a:hover{color:var(--accent)}
.hero-wa h1{
  font-family:'Instrument Serif',serif;font-weight:400;font-style:italic;
  font-size:clamp(2.9rem,9vw,8.4rem);line-height:.9;letter-spacing:-.035em;color:var(--ink);
  margin:1.4rem 0 0;
}
.hero-wa h1 span{display:block}
.hero-wa h1 .stroke{
  font-family:'Space Grotesk',sans-serif;font-style:normal;font-weight:300;letter-spacing:-.05em;
  -webkit-text-stroke:1.4px var(--ink);-webkit-text-fill-color:transparent;
}
.hero-wa h1 .hit{color:var(--accent)}
.hero-meta-wa{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem;align-items:end;margin-top:clamp(2rem,4vw,3.2rem)}
.hero-meta-wa .lead{color:var(--ink-soft);font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.65;max-width:44ch}
.hero-meta-wa .lead b{color:var(--ink);font-weight:500}
.hero-meta-wa .k{display:block;margin-bottom:.55rem;font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.hero-meta-wa .v{font-family:'Instrument Serif',serif;font-style:italic;font-size:1.35rem;color:var(--ink-soft);line-height:1.15;display:block}
.actions-wa{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:clamp(1.8rem,3.5vw,2.6rem)}

/* ---------- DUELO DE TELEFONOS (hero) ----------
   Cada lado enfrenta su rotulo contra el mockup, mirandose hacia el
   centro. Asi la composicion ocupa el ancho completo en vez de dejar
   medio hero vacio, y los dos telefonos comparten altura y linea base. */
.duelo-wa{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;
  gap:clamp(1rem,2.4vw,2rem);margin-top:clamp(3rem,7vw,5.5rem);
}
.fono-wa{position:relative;display:grid;gap:clamp(1rem,2vw,1.8rem);align-items:center}
.fono-wa.chat{grid-template-columns:1fr auto}
.fono-wa.ag{grid-template-columns:auto 1fr}
.fono-wa .wa-mock{width:clamp(250px,23vw,340px);align-self:stretch}
.fono-wa.chat .wa-mock{order:2}
.fono-wa.chat .pie{order:1;text-align:right;align-items:flex-end}
.fono-wa .pie{display:flex;flex-direction:column;gap:.5rem}
.fono-wa .nom{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
}
.fono-wa.chat .nom{flex-direction:row-reverse}
.fono-wa .nom i{width:7px;height:7px;border-radius:50%;flex:0 0 7px;display:inline-block}
.fono-wa .pie p{font-size:.92rem;line-height:1.55;color:var(--ink-dim);max-width:30ch}
.vs-wa{align-self:center}

/* Sin transform en el chatbot: cualquier translateY o scale desalinea los
   dos telefonos y se lee como descuido. La jerarquia ya la dan el color
   apagado, las burbujas grises y el halo cyan del agente. */
.fono-wa.chat .wa-mock:hover{filter:none;opacity:1}
.fono-wa.chat .nom{color:var(--chat)}
.fono-wa.chat .nom i{background:var(--chat)}
.fono-wa.ag .wa-mock:hover{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(0,240,255,.2),0 40px 90px -30px rgba(0,240,255,.6)}
.fono-wa.ag .nom{color:var(--accent)}
.fono-wa.ag .nom i{background:var(--accent);box-shadow:0 0 10px var(--accent)}
.vs-wa{
  display:grid;place-items:center;width:clamp(48px,5vw,66px);height:clamp(48px,5vw,66px);
  border:1px solid var(--line-soft);border-radius:50%;
  font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.16em;color:var(--ink-dim);
  background:rgba(11,11,13,.7);backdrop-filter:blur(8px);
}

/* ============================================================
   MOCKUP DE WHATSAPP (HTML/CSS, sin imagenes)
   Antes eran capturas raster de otra empresa y de otro mercado.
   Dibujarlas permite nitidez a cualquier tamano, contenido propio
   y —lo importante— ENSENAR lo que el chatbot no puede hacer:
   el agente muestra sus llamadas a herramientas, el chatbot no.
   Paleta: WhatsApp en modo oscuro, que ya encaja con el sitio.
   ============================================================ */
.wa-mock{
  --wa-bg:#0b141a; --wa-in:#1f2c33; --wa-out:#005c4b;
  --wa-ink:#e9edef; --wa-dim:#8696a0;
  display:flex;flex-direction:column;border-radius:22px;overflow:hidden;
  background:var(--wa-bg);border:1px solid var(--line);
  font-size:13px;line-height:1.45;color:var(--wa-ink);
  transition:transform .7s var(--ease),border-color .5s var(--ease),box-shadow .7s var(--ease);
}
.wa-top{display:flex;align-items:center;gap:.6rem;padding:.7rem .85rem;background:#1f2c33;border-bottom:1px solid rgba(0,0,0,.35)}
.wa-top .flecha{color:var(--wa-dim);font-size:1.1rem;line-height:1}
.wa-top .av{width:30px;height:30px;border-radius:50%;flex:0 0 30px;display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.05em;background:#2a3942;color:var(--wa-dim)}
.wa-top .id{display:flex;flex-direction:column;min-width:0;flex:1}
.wa-top .id b{font-size:.86rem;font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-top .id small{font-size:.66rem;color:var(--wa-dim)}
.wa-top .ic{display:flex;gap:.7rem;color:var(--wa-dim);font-size:.9rem}

/* justify-content:flex-end — los mensajes se apoyan abajo, como en un
   chat real. Ademas, cuando los dos mockups comparten altura, el que
   tiene menos mensajes deja el aire arriba en vez de un hueco raro. */
.wa-body{
  flex:1;padding:.85rem .8rem 1rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.45rem;
  background-image:radial-gradient(rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:22px 22px;
}
.wa-dia{align-self:center;margin-bottom:.3rem;padding:.2rem .6rem;border-radius:7px;background:#1d282f;color:var(--wa-dim);font-size:.62rem;letter-spacing:.04em}
/* min-width: la hora va posicionada abajo a la derecha; en un mensaje
   corto ("Dale") seria mas ancha que el texto y se le encimaria. */
.wa-msg{position:relative;max-width:86%;min-width:5.8rem;padding:.45rem .6rem .95rem;border-radius:8px;word-wrap:break-word}
.wa-msg.ent{align-self:flex-start;background:var(--wa-in);border-top-left-radius:2px}
.wa-msg.sal{align-self:flex-end;background:var(--wa-out);border-top-right-radius:2px}
.wa-msg .hora{position:absolute;right:.55rem;bottom:.3rem;font-size:.58rem;color:rgba(233,237,239,.5);letter-spacing:.02em}
.wa-msg.sal .hora{color:rgba(233,237,239,.6)}
.wa-msg p+p{margin-top:.5rem}
.wa-msg b{font-weight:600}

/* menu rigido: la firma visual del chatbot */
.wa-menu{list-style:none;margin:.5rem 0 .1rem;display:flex;flex-direction:column;gap:.22rem}
.wa-menu li{display:flex;gap:.45rem;padding:.26rem .45rem;border-radius:5px;background:rgba(255,255,255,.045);color:#cfd9de}
.wa-menu li i{font-style:normal;color:var(--chat);font-family:'JetBrains Mono',monospace;font-size:.72rem;flex:0 0 auto}
.wa-error{color:#f0b6a4}

/* llamadas a herramientas: la firma visual del agente */
.wa-tool{
  align-self:flex-start;max-width:86%;display:flex;align-items:center;gap:.45rem;
  margin:.1rem 0;padding:.34rem .6rem;border-radius:99px;
  background:rgba(0,240,255,.09);border:1px solid rgba(0,240,255,.22);
  font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
}
.wa-tool svg{width:11px;height:11px;flex:0 0 11px}
.wa-tool.ok{background:rgba(16,185,129,.10);border-color:rgba(16,185,129,.28);color:#34d399}
.wa-escribe{align-self:flex-start;display:flex;gap:3px;padding:.55rem .7rem;border-radius:8px;background:var(--wa-in);border-top-left-radius:2px}
.wa-escribe i{width:5px;height:5px;border-radius:50%;background:var(--wa-dim);animation:wa-pulso 1.3s infinite}
.wa-escribe i:nth-child(2){animation-delay:.18s}
.wa-escribe i:nth-child(3){animation-delay:.36s}
@keyframes wa-pulso{0%,60%,100%{opacity:.3}30%{opacity:1}}
@media(prefers-reduced-motion:reduce){.wa-escribe i{animation:none;opacity:.6}}

.wa-bar{display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;background:#1f2c33}
.wa-bar .campo{flex:1;padding:.42rem .7rem;border-radius:99px;background:#2a3942;color:var(--wa-dim);font-size:.72rem}
.wa-bar .env{width:26px;height:26px;border-radius:50%;flex:0 0 26px;display:grid;place-items:center;background:#00a884;color:#0b141a;font-size:.7rem}

/* el chatbot: apagado. el agente: vivo. */
.wa-mock.chatbot{filter:saturate(.55) brightness(.86);opacity:.94}
.wa-mock.chatbot .wa-msg.sal{background:#2c3a3f}   /* sin el verde de marca */
.wa-mock.chatbot .wa-bar .env{background:#3a4a52;color:#8696a0}
.wa-mock.agente{border-color:rgba(0,240,255,.26);box-shadow:0 0 0 1px rgba(0,240,255,.09),0 30px 80px -32px rgba(0,240,255,.45)}

/* ---------- MARQUEE ---------- */
.marquee-wa{border-block:1px solid var(--line);padding:1.5rem 0;overflow:hidden;white-space:nowrap;background:var(--bg-deep)}
.marquee-wa .track{
  display:inline-flex;gap:2.6rem;align-items:center;animation:slide-wa 46s linear infinite;
  font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(1.5rem,3vw,2.4rem);color:var(--ink-soft);
}
.marquee-wa .track span:nth-child(even){font-family:'Space Grotesk',sans-serif;font-style:normal;font-weight:300;color:var(--ink-dim)}
.marquee-wa .track .st{font-family:sans-serif;font-style:normal;color:var(--accent);font-size:.5em}
@keyframes slide-wa{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-wa .track{animation:none}}

/* ---------- PANEL: la unidad de contenido ---------- */
.panel-wa{
  position:relative;border:1px solid var(--line);border-radius:24px;overflow:hidden;
  background:linear-gradient(160deg,#15151b 0%,#0e0e12 100%);
  padding:clamp(1.9rem,3vw,2.7rem);
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.panel-wa::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;
  transition:opacity .4s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(0,240,255,.12),transparent 45%);
}
.panel-wa:hover::after{opacity:1}
.panel-wa>*{position:relative;z-index:3}
.panel-wa .tag{
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.2rem;padding:.36rem .8rem;
  border:1px solid var(--accent);border-radius:99px;
  font-family:'JetBrains Mono',monospace;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
}
.panel-wa h3{font-family:'Instrument Serif',serif;font-weight:400;font-style:italic;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
.panel-wa>p{margin-top:1rem;color:var(--ink-soft);line-height:1.65;font-size:1rem;max-width:52ch}
/* Regla BASE del watermark. Antes solo existia dentro de .panel-wa y .ag-wa,
   asi que en cualquier otra tarjeta la letra salia opaca y a tamano normal. */
.glyph-wa{
  position:absolute;right:1rem;bottom:-1.6rem;z-index:1;pointer-events:none;user-select:none;
  font-family:'Instrument Serif',serif;font-style:italic;font-size:9rem;line-height:1;
  color:rgba(242,239,230,.035);
}

/* borde conico animado: solo en lo "vivo" */
.panel-wa.vivo{background:radial-gradient(120% 90% at 100% 0%,rgba(0,240,255,.10),transparent 58%),linear-gradient(160deg,#0d1417,#0a0a0c)}
.panel-wa.vivo:hover{border-color:rgba(0,240,255,.42)}
.panel-wa.vivo::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:0;opacity:0;pointer-events:none;
  background:conic-gradient(from var(--ang-chirho,0deg),transparent 0,transparent 78%,var(--accent) 90%,transparent 100%);
  transition:opacity .5s;
}
.panel-wa.vivo:hover::before{opacity:.55;animation:giro-wa 7s linear infinite}
@keyframes giro-wa{to{--ang-chirho:360deg}}
/* el apagado: sin halo, borde punteado, todo mas frio */
.panel-wa.apagado{background:linear-gradient(160deg,#121215,#0c0c0e);border-style:dashed;border-color:var(--chat-line)}
.panel-wa.apagado .tag{color:var(--chat);border-color:var(--chat-line);background:var(--chat-soft)}
.panel-wa.apagado h3{color:var(--ink-soft)}
.panel-wa.apagado::after{background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(242,239,230,.05),transparent 45%)}

/* listas con marca */
.lista-wa{list-style:none;display:flex;flex-direction:column;gap:.85rem;margin-top:1.5rem}
.lista-wa li{position:relative;padding-left:1.9rem;color:var(--ink-soft);line-height:1.55;font-size:.97rem}
.lista-wa li::before{
  content:"";position:absolute;left:0;top:.42em;width:14px;height:1px;background:var(--accent);
}
.lista-wa.off li::before{background:var(--chat);width:9px}
.lista-wa.off li{color:var(--ink-dim)}

/* ---------- SPLIT asimetrico ----------
   La columna de la captura se fija por rango: si se deja en fr, sobra
   aire alrededor del movil acotado y el split queda desbalanceado. */
.split-wa{display:grid;grid-template-columns:minmax(260px,400px) 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.split-wa.ancho{grid-template-columns:1fr 1fr}   /* para el video, que es cuadrado */
.split-wa.flip{grid-template-columns:1fr minmax(260px,400px)}
.split-wa.flip>*:first-child{order:2}
.shot-wa{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:#0c0c10}
.shot-wa img,.shot-wa video{width:100%;height:auto;display:block}
/* Los mockups de conversacion traen su propio marco: el contenedor no
   debe poner otro borde ni recortar el halo del agente. */
.shot-wa.movil{max-width:360px;margin-inline:auto;border:0;background:none;border-radius:0;overflow:visible}
.shot-wa.off{filter:saturate(.3) brightness(.8)}
.shot-wa.on{border-color:rgba(0,240,255,.25);box-shadow:0 30px 80px -34px rgba(0,240,255,.45)}

/* ---------- AUDIO ---------- */
.audio-wa{margin-top:1.7rem;padding:1rem 1.15rem;border:1px solid var(--line-soft);border-radius:16px;background:rgba(0,240,255,.05)}
.audio-wa .lbl{display:flex;align-items:center;gap:.55rem;margin-bottom:.7rem;font-family:'JetBrains Mono',monospace;font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.audio-wa .lbl svg{width:14px;height:14px}
.audio-wa audio{width:100%;height:36px;filter:invert(1) hue-rotate(180deg) saturate(.6);opacity:.85}

/* ---------- TABLA-DUELO ---------- */
.duel-wa{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:linear-gradient(160deg,#131317,#0c0c0f)}
.duel-row{display:grid;grid-template-columns:1.1fr 1fr 1fr;border-top:1px solid var(--line)}
.duel-row:first-child{border-top:none}
.duel-cell{padding:1.15rem 1.4rem;font-size:.95rem;line-height:1.5;display:flex;align-items:center;gap:.6rem}
.duel-row.cab .duel-cell{padding-block:1.4rem;align-items:flex-start;flex-direction:column;gap:.3rem}
.duel-cell.feat{color:var(--ink);font-weight:500;background:rgba(242,239,230,.018)}
.duel-cell .ttl{display:inline-flex;align-items:center;gap:.55rem;font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase}
.duel-cell .ttl i{width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 7px}
.duel-cell small{font-size:.72rem;color:var(--ink-dim);letter-spacing:.02em;text-transform:none;font-family:'Space Grotesk',sans-serif}
.duel-col-chat{color:var(--ink-dim);background:rgba(242,239,230,.012)}
.duel-col-chat .ttl{color:var(--chat)}.duel-col-chat .ttl i{background:var(--chat)}
.duel-col-ag{color:var(--ink-soft);background:rgba(0,240,255,.035);box-shadow:inset 1px 0 0 rgba(0,240,255,.18)}
.duel-col-ag .ttl{color:var(--accent)}.duel-col-ag .ttl i{background:var(--accent);box-shadow:0 0 10px var(--accent)}
.mk{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;flex:0 0 19px;font-size:.66rem;line-height:1}
.mk.no{background:var(--chat-soft);color:var(--chat)}
.mk.si{background:rgba(0,240,255,.13);color:var(--accent)}

/* ---------- BENTO DE AGENTES ---------- */
.agentes-wa{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;align-items:start}
.ag-wa{position:relative;border:1px solid var(--line);border-radius:24px;overflow:hidden;padding:2.1rem 1.9rem;background:linear-gradient(160deg,#15151b,#0e0e12);transition:transform .5s var(--ease),border-color .5s var(--ease)}
.ag-wa:hover{transform:translateY(-6px);border-color:rgba(0,240,255,.34)}
.ag-wa .sello{width:44px;height:44px;border-radius:13px;border:1px solid var(--line-soft);display:grid;place-items:center;font-family:'Instrument Serif',serif;font-style:italic;font-size:1.4rem;color:var(--accent);margin-bottom:1.2rem}
.ag-wa h3{font-family:'Instrument Serif',serif;font-weight:400;font-style:italic;font-size:1.75rem;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.ag-wa .rol{display:block;margin-top:.5rem;font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.ag-wa>p{margin-top:1rem;color:var(--ink-soft);font-size:.94rem;line-height:1.6}
.ag-wa dl{margin-top:1.4rem;display:flex;flex-direction:column;gap:.85rem}
.ag-wa dl>div{display:grid;grid-template-columns:88px 1fr;gap:.9rem;align-items:start}
.ag-wa dt{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);padding-top:.2em}
.ag-wa dd{color:var(--ink-soft);font-size:.88rem;line-height:1.5}
.ag-wa .ask{
  margin-top:1.5rem;padding:.95rem 1.1rem;border-radius:14px;
  background:rgba(0,240,255,.07);border:1px solid rgba(0,240,255,.18);
  font-size:.88rem;line-height:1.5;color:var(--ink)
}
.ag-wa .ask span{display:block;margin-top:.3rem;color:var(--accent);font-weight:500}
.ag-wa .notas{margin-top:1.1rem;font-size:.79rem;line-height:1.55;color:var(--ink-dim)}
.ag-wa .notas b{color:var(--ink-soft);font-weight:500}
.ag-wa .pilares{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1.3rem}
.ag-wa .pilares div{padding:.8rem .9rem;border:1px solid var(--line);border-radius:12px;background:rgba(242,239,230,.02)}
.ag-wa .pilares b{display:block;font-family:'JetBrains Mono',monospace;font-size:.57rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.35rem}
.ag-wa .pilares span{font-size:.79rem;line-height:1.45;color:var(--ink-soft)}
.ag-wa .flujo{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:1.3rem}
.ag-wa .flujo i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line-soft);border-radius:99px;padding:.34rem .68rem}
.ag-wa .flujo em{color:var(--accent);font-style:normal;font-size:.75rem}
.ag-wa .glyph-wa{right:.9rem;bottom:-1.8rem;font-size:8.5rem;color:rgba(242,239,230,.032)}

/* ---------- CITA / GOBIERNO ---------- */
.cita-wa{
  margin-top:2rem;padding:1.7rem 2rem;border-left:2px solid var(--accent);border-radius:0 18px 18px 0;
  background:linear-gradient(90deg,rgba(0,240,255,.055),transparent 70%);
  color:var(--ink-soft);line-height:1.7;font-size:1rem;
}
.cita-wa b{color:var(--ink);font-weight:500}

/* ---------- RELEVO (3 pasos) ---------- */
.relevo-wa{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.6rem;counter-reset:paso}
.paso-wa{position:relative;padding:1.8rem 1.6rem;border:1px solid var(--line);border-radius:20px;background:linear-gradient(160deg,#141419,#0d0d11)}
.paso-wa::before{
  counter-increment:paso;content:counter(paso,decimal-leading-zero);
  font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:1rem;
}
.paso-wa h4{font-size:1.06rem;font-weight:500;letter-spacing:-.01em;color:var(--ink);margin-bottom:.6rem}
.paso-wa p{color:var(--ink-soft);font-size:.9rem;line-height:1.55}
.paso-wa .quien{display:inline-block;margin-top:1rem;font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(0,240,255,.28);border-radius:99px;padding:.3rem .65rem}

/* ---------- NIVELES DE PAGINA ---------- */
.niveles-wa{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;align-items:stretch}
.nivel-wa{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:linear-gradient(160deg,#141419,#0c0c10);transition:transform .5s var(--ease),border-color .5s var(--ease)}
.nivel-wa:hover{transform:translateY(-6px);border-color:rgba(0,240,255,.3)}
.nivel-wa.destacado{background:radial-gradient(120% 80% at 50% 0%,rgba(0,240,255,.13),transparent 60%),linear-gradient(160deg,#0d1519,#0a0a0c);border-color:rgba(0,240,255,.34)}
.nivel-wa .cinta{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.95rem 1.3rem;border-bottom:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.nivel-wa .cinta b{color:var(--accent);font-weight:500}
.nivel-wa .puntos{display:inline-flex;gap:.28rem}
.nivel-wa .puntos i{width:6px;height:6px;border-radius:50%;background:var(--line-soft);display:inline-block}
.nivel-wa .puntos i.on{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.preview-wa{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line);background:#0a0a0c}
.preview-wa .barra{display:flex;align-items:center;gap:.35rem;padding:.5rem .8rem;background:#111116;border-bottom:1px solid var(--line)}
.preview-wa .barra b{width:7px;height:7px;border-radius:50%;background:var(--line-soft);display:inline-block}
.preview-wa .barra span{margin-left:.5rem;font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.1em;color:var(--ink-dim)}
.preview-wa .vidrio{position:absolute;inset:33px 0 0;overflow:hidden}
/* el iframe se dibuja al triple y se reduce, para que la miniatura
   conserve el layout de escritorio sin importar el ancho real */
.preview-wa iframe{width:320%;height:320%;border:0;transform:scale(.3125);transform-origin:top left;pointer-events:none}
.preview-wa .velo{position:absolute;inset:0;z-index:2}
.nivel-wa .cuerpo{padding:1.6rem 1.5rem;display:flex;flex-direction:column;flex:1}
.nivel-wa .cuerpo h3{font-family:'Instrument Serif',serif;font-weight:400;font-style:italic;font-size:1.5rem;letter-spacing:-.02em;color:var(--ink);margin-bottom:.6rem}
.nivel-wa .cuerpo>p{color:var(--ink-soft);font-size:.9rem;line-height:1.55}
.nivel-wa .rasgos{list-style:none;display:grid;gap:.5rem;margin:1.1rem 0}
.nivel-wa .rasgos li{position:relative;padding-left:1.2rem;font-size:.85rem;line-height:1.45;color:var(--ink-soft)}
.nivel-wa .rasgos li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:1px;background:var(--accent)}
.nivel-wa dl.ficha{display:flex;flex-direction:column;gap:.55rem;margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--line)}
.nivel-wa dl.ficha>div{display:grid;grid-template-columns:74px 1fr;gap:.8rem}
.nivel-wa dl.ficha dt{font-family:'JetBrains Mono',monospace;font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-dim);padding-top:.2em}
.nivel-wa dl.ficha dd{font-size:.83rem;line-height:1.45;color:var(--ink-soft)}
.nivel-wa .abrir{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1.2rem;padding:.8rem 1.2rem;border-radius:99px;border:1px solid var(--line-soft);font-family:'JetBrains Mono',monospace;font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);transition:border-color .3s,color .3s,transform .3s var(--ease)}
.nivel-wa .abrir:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.nivel-wa.destacado .abrir{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.nivel-wa.destacado .abrir:hover{transform:translateY(-3px);color:var(--bg)}
.nota-wa{margin-top:1.2rem;text-align:center;font-size:.82rem;color:var(--ink-dim);font-style:italic}

/* ---------- TABLA DE NIVELES ---------- */
.matriz-wa{margin-top:2.4rem;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:linear-gradient(160deg,#131317,#0c0c0f)}
.matriz-row{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;border-top:1px solid var(--line)}
.matriz-row:first-child{border-top:none}
.matriz-row.grupo{background:rgba(242,239,230,.03)}
.matriz-row.grupo>div{padding:.7rem 1.4rem;font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim)}
.matriz-cell{padding:1rem 1.4rem;font-size:.9rem;line-height:1.45;color:var(--ink-soft);display:flex;align-items:center;gap:.55rem}
.matriz-cell.feat{color:var(--ink);font-weight:500;background:rgba(242,239,230,.018)}
.matriz-row.cab .matriz-cell{flex-direction:column;align-items:flex-start;gap:.25rem;padding-block:1.3rem;font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.matriz-row.cab .matriz-cell small{font-family:'Space Grotesk',sans-serif;font-size:.72rem;letter-spacing:0;text-transform:none;color:var(--ink-dim)}
.matriz-cell.hi{background:rgba(0,240,255,.035);box-shadow:inset 1px 0 0 rgba(0,240,255,.18)}
.matriz-row.cab .matriz-cell.hi{color:var(--accent)}

/* ============================================================
   SERVICIOS — la oferta del rubro, arriba de todo
   ============================================================ */
.servicios-wa{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.serv-wa{
  position:relative;display:flex;flex-direction:column;gap:1rem;overflow:hidden;
  padding:2.6rem 2.4rem;border:1px solid var(--line);border-radius:26px;
  background:radial-gradient(120% 90% at 100% 0%,rgba(0,240,255,.10),transparent 58%),linear-gradient(160deg,#15151b,#0e0e12);
  transition:transform .5s var(--ease),border-color .5s var(--ease);
}
.serv-wa:hover{transform:translateY(-6px);border-color:rgba(0,240,255,.4)}
.serv-wa .num{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.2em;color:var(--ink-dim)}
.serv-wa .ico{width:46px;height:46px;border-radius:13px;border:1px solid var(--line-soft);display:grid;place-items:center;color:var(--accent)}
.serv-wa .ico svg{width:21px;height:21px}
.serv-wa h3{font-family:'Instrument Serif',serif;font-weight:400;font-style:italic;font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.02;letter-spacing:-.02em;color:var(--ink)}
.serv-wa h3 em{color:var(--accent);font-style:inherit}
.serv-wa>p{color:var(--ink-soft);line-height:1.65;font-size:1rem;max-width:46ch}
.serv-wa .pie{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:1.4rem;font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.serv-wa .pie a{display:inline-flex;align-items:center;gap:.4rem;transition:color .3s}
.serv-wa:hover .pie a{color:var(--accent)}
.serv-wa .glyph-wa{font-size:10rem;right:1.4rem;bottom:-2.2rem}
@media(max-width:900px){.servicios-wa{grid-template-columns:1fr}}

/* ============================================================
   PAQUETES — cuatro niveles, al final: primero convencer
   ============================================================ */
.paquetes-wa{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;align-items:stretch}
.paq-wa{
  display:flex;flex-direction:column;gap:1.1rem;padding:1.9rem 1.6rem;
  border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(160deg,#141419,#0c0c10);
  transition:transform .5s var(--ease),border-color .5s var(--ease);
}
.paq-wa:hover{transform:translateY(-6px);border-color:rgba(0,240,255,.32)}
.paq-wa.destacado{background:radial-gradient(120% 80% at 50% 0%,rgba(0,240,255,.13),transparent 60%),linear-gradient(160deg,#0d1519,#0a0a0c);border-color:rgba(0,240,255,.34)}
.paq-wa .cab{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.paq-wa .etq{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);border:1px solid var(--line-soft);border-radius:99px;padding:.3rem .62rem}
.paq-wa.destacado .etq{color:var(--accent);border-color:rgba(0,240,255,.4)}
.paq-wa .sello{width:34px;height:34px;border-radius:10px;border:1px solid var(--line-soft);display:grid;place-items:center;color:var(--accent)}
.paq-wa .sello svg{width:16px;height:16px}
.paq-wa h3{font-family:'Instrument Serif',serif;font-weight:400;font-style:italic;font-size:1.5rem;line-height:1;letter-spacing:-.01em;color:var(--ink)}
.paq-wa h3 b{display:block;margin-top:.3rem;font-family:'Space Grotesk',sans-serif;font-style:normal;font-weight:700;font-size:.85rem;letter-spacing:.04em;color:var(--ink-soft)}
.paq-wa ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.paq-wa li{display:flex;align-items:flex-start;gap:.55rem;font-size:.83rem;line-height:1.45;color:var(--ink-soft)}
.paq-wa li svg{width:13px;height:13px;flex:0 0 13px;margin-top:.18em;color:var(--accent)}
.paq-wa li.hereda{color:var(--ink);font-weight:500}
@media(max-width:1100px){.paquetes-wa{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.paquetes-wa{grid-template-columns:1fr}}

/* ---------- CIERRE EDITORIAL ---------- */
.cierre-wa{position:relative;padding:clamp(6rem,12vw,11rem) 0 clamp(4rem,8vw,7rem);overflow:hidden;text-align:center}
.cierre-wa::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 60% at 50% 40%,rgba(0,240,255,.14),transparent 66%);filter:blur(30px);
}
.cierre-wa>*{position:relative;z-index:1}
.cierre-wa .kicker{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:1.8rem}
.cierre-wa h2{
  font-family:'Instrument Serif',serif;font-weight:400;font-style:italic;
  font-size:clamp(2.3rem,7vw,6.2rem);line-height:.94;letter-spacing:-.035em;color:var(--ink);
  max-width:16ch;margin-inline:auto;
}
.cierre-wa h2 .stroke{
  display:block;font-family:'Space Grotesk',sans-serif;font-style:normal;font-weight:300;letter-spacing:-.045em;
  -webkit-text-stroke:1.3px var(--ink);-webkit-text-fill-color:transparent;
}
.cierre-wa h2 em{color:var(--accent);font-style:inherit}
.cierre-wa .bajada{margin:2rem auto 0;max-width:58ch;color:var(--ink-soft);font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.7}
.cierre-wa .firma{margin-top:2.6rem;display:flex;align-items:center;justify-content:center;gap:1.2rem;flex-wrap:wrap}
.cierre-wa .firma img{width:clamp(120px,14vw,168px);height:auto;border-radius:12px}
.cierre-wa .firma span{font-family:'Instrument Serif',serif;font-style:italic;font-size:1.12rem;color:var(--ink-soft)}

/* wordmark mega antes del pie */
.mega-wa{padding:0 2.5rem;overflow:hidden;line-height:.78;text-align:center;pointer-events:none;user-select:none}
.mega-wa span{
  font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(4rem,17vw,15rem);
  -webkit-text-stroke:1px rgba(242,239,230,.10);-webkit-text-fill-color:transparent;letter-spacing:-.03em;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1100px){
  .hero-meta-wa{grid-template-columns:1fr;gap:1.6rem}
  .agentes-wa,.relevo-wa,.niveles-wa{grid-template-columns:1fr}
  .ag-wa .glyph-wa{font-size:7rem}
}
@media(max-width:900px){
  .head-wa .idx{display:none}
  .split-wa,.split-wa.flip,.split-wa.ancho{grid-template-columns:1fr}
  .split-wa.flip>*:first-child{order:0}
  .duelo-wa{grid-template-columns:1fr;gap:1.6rem}
  .vs-wa{justify-self:center}
  /* apilado: el rotulo baja debajo de su mockup y todo se centra */
  .fono-wa,.fono-wa.chat,.fono-wa.ag{grid-template-columns:1fr;justify-items:center;justify-self:center;gap:1rem}
  .fono-wa .wa-mock{align-self:auto;width:min(340px,100%)}
  .fono-wa.chat .wa-mock{order:0;transform:none}
  .fono-wa.chat .pie{order:1;text-align:left;align-items:flex-start}
  .fono-wa.chat .nom{flex-direction:row}
  .fono-wa .pie{width:min(340px,100%)}
  /* las tablas pasan a fichas apiladas: cada celda dice a que columna pertenece */
  .duel-row,.matriz-row{grid-template-columns:1fr}
  .duel-row.cab,.matriz-row.cab{display:none}
  .duel-row,.matriz-row{border-top:none;border-bottom:1px solid var(--line);padding:.5rem 0}
  .duel-cell.feat,.matriz-cell.feat{background:none;font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);padding-bottom:.2rem}
  .duel-cell:not(.feat)::before,.matriz-cell:not(.feat)::before{
    content:attr(data-col);flex:0 0 92px;font-family:'JetBrains Mono',monospace;font-size:.58rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);
  }
  .duel-col-ag,.matriz-cell.hi{box-shadow:none;border-radius:10px}
  .matriz-row.grupo{border-bottom:none}
  .preview-wa iframe{width:240%;height:240%;transform:scale(.4167)}
}
@media(max-width:600px){
  .wrap-wa{padding:0 1.4rem}
  .head-wa .idx{font-size:6rem}
  .mega-wa{padding:0 1.4rem}
  .ag-wa .pilares{grid-template-columns:1fr}
  .preview-wa iframe{width:280%;height:280%;transform:scale(.3571)}
}