/* Jaula de Grillos · Agentes comerciales con IA (sección home + página propia) */

/* Etiqueta "Nuevo" en el menú */
nav a{white-space:nowrap}
nav a .nav-new{position:absolute;left:50%;top:-3px;transform:translateX(-50%);padding:2px 6px 1px;border-radius:20px;background:#f3e2fb;color:#8904ab;font-size:8px;font-weight:700;letter-spacing:.6px;line-height:1.2;white-space:nowrap}
@media(max-width:1150px){nav{gap:18px}}
@media(max-width:620px){nav a .nav-new{position:static;transform:none;display:inline-block;margin-left:6px;vertical-align:2px}}

/* ---------- Bloque oscuro con demo de chat ---------- */
.ai-feature{position:relative;isolation:isolate;overflow:hidden;border-radius:30px;margin:14px 0;padding:clamp(36px,4.6vw,66px) clamp(26px,5vw,72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:40px clamp(30px,5vw,80px);align-items:center;color:#fff;background:radial-gradient(ellipse at 0% 0%,#8d16a8,transparent 60%),linear-gradient(115deg,#2a0a3a,#3b0a4e 55%,#52096a);scroll-margin-top:24px}
.ai-feature:before{content:'';position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#ffffff2e 1px,transparent 1.6px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 55% 75% at 78% 50%,#000,transparent 75%);mask-image:radial-gradient(ellipse 55% 75% at 78% 50%,#000,transparent 75%)}
.ai-orb{position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.ai-orb.o1{width:52%;aspect-ratio:1;right:-16%;bottom:-48%;background:linear-gradient(145deg,#a42bd0,#5a0b78)}
.ai-orb.o2{width:26%;aspect-ratio:1;right:30%;top:-20%;background:linear-gradient(145deg,#6e1590,#3b0a4e);opacity:.8}
.ai-copy{position:relative;z-index:1}
.ai-tag{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:11px;letter-spacing:3px;margin:0 0 20px;color:#f1dcfb}
.ai-tag b{letter-spacing:1.4px;font-size:10px;padding:6px 11px 5px;border-radius:20px;background:#fff;color:#8904ab}
.ai-feature h2{font-size:clamp(40px,4.7vw,70px);line-height:.96;letter-spacing:-2.6px;margin:0 0 24px;font-weight:800}
.ai-feature h2 em{font-style:normal;color:#e7b6ff;position:relative;white-space:nowrap}
.ai-feature h2 em svg{position:absolute;left:-2%;bottom:-.2em;width:104%;height:.32em;color:#d58cff}
.ai-text{font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:#ecd5f7;margin:0 0 24px;max-width:490px}
.ai-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px;padding:0}
.ai-chips li{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:30px;background:#ffffff14;border:1px solid #ffffff26;font-size:14px;color:#fff;transition:background .3s,transform .35s cubic-bezier(.16,1,.3,1)}
.ai-chips li:hover{background:#ffffff26;transform:translateY(-3px)}
.ai-chips svg{width:16px;height:16px;flex:none;color:#e7b6ff}
.ai-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.ai-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:16px;border-radius:40px;background:#fff;color:#81049e;padding:17px 30px;font-size:16px;font-weight:500;transition:transform .3s,box-shadow .3s}
.ai-btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px #12021f55}
.ai-btn .arrow{font-size:22px}
.ai-hand{font:clamp(16px,1.4vw,19px)/1.15 'Chalkboard SE','Comic Sans MS',cursive;color:#f3d9ff;transform:rotate(-5deg);display:inline-flex;align-items:center;gap:10px;margin:0}
.ai-hand svg{width:54px;height:auto;flex:none;color:#d58cff}

/* Ventana de chat */
.ai-stage{position:relative;z-index:1;justify-self:center;width:min(100%,440px)}
.ai-chat{position:relative;background:#fff;color:var(--ink);border-radius:26px;box-shadow:0 40px 90px #12021f73,0 0 0 1px #ffffff1f;overflow:hidden}
.ai-chat-top{display:flex;align-items:center;gap:12px;padding:15px 16px 15px 18px;border-bottom:1px solid #f0e8f5}
.ai-avatar{flex:none;position:relative;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#b722d7,#6b0a8a);display:grid;place-items:center;color:#fff}
.ai-avatar svg{width:22px;height:22px}
.ai-avatar:after{content:'';position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:#2bc48a;border:2px solid #fff}
.ai-who{min-width:0}
.ai-who strong{display:block;font-size:15px;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-who small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.ai-langs{margin-left:auto;flex:none;display:flex;gap:2px;background:#f5eefa;border-radius:20px;padding:3px}
.ai-langs button{border:0;background:none;font-size:11px;font-weight:700;letter-spacing:.5px;color:#7a6d8a;padding:0 9px;border-radius:16px;cursor:pointer;min-width:34px;min-height:30px;transition:background .25s,color .25s}
.ai-langs button:hover{color:#8904ab}
.ai-langs button[aria-pressed="true"]{background:#8904ab;color:#fff}
.ai-chat-body{height:350px;overflow:hidden;padding:18px 16px 10px;display:flex;flex-direction:column;justify-content:flex-end;gap:9px;background:linear-gradient(180deg,#fff,#fbf8fd)}
.ai-msg{flex:none;max-width:84%;padding:11px 15px;border-radius:18px;font-size:14.5px;line-height:1.45;margin:0}
.ai-msg.bot{align-self:flex-start;background:#f3ebf8;border-bottom-left-radius:6px}
.ai-msg.user{align-self:flex-end;background:linear-gradient(135deg,#9a0bbf,#74008f);color:#fff;border-bottom-right-radius:6px}
.ai-msg.in,.ai-typing.in{animation:aiIn .5s cubic-bezier(.16,1,.3,1) both}
@keyframes aiIn{from{opacity:0;transform:translateY(12px) scale(.96)}}
.ai-typing{flex:none;align-self:flex-start;display:flex;gap:4px;padding:14px 16px;background:#f3ebf8;border-radius:18px;border-bottom-left-radius:6px}
.ai-typing i{width:7px;height:7px;border-radius:50%;background:#a46cc0;animation:aiDot 1s infinite}
.ai-typing i:nth-child(2){animation-delay:.15s}.ai-typing i:nth-child(3){animation-delay:.3s}
@keyframes aiDot{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-4px);opacity:1}}
.ai-chat-input{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 14px 14px;padding:7px 7px 7px 16px;border-radius:30px;border:1px solid #eadff2;font-size:14px;color:#9a90a8}
.ai-send{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#a90bd0,#790094);color:#fff;font-size:18px}

/* Aviso de lead */
.ai-toast{position:absolute;z-index:3;left:-46px;bottom:-22px;display:flex;gap:12px;align-items:center;padding:12px 18px 12px 12px;background:#fff;border-radius:18px;box-shadow:0 22px 50px #12021f55;color:var(--ink);font-size:13px;line-height:1.35;width:max-content;max-width:270px;opacity:0;transform:translateY(16px) scale(.94);transition:opacity .5s,transform .6s cubic-bezier(.16,1,.3,1);pointer-events:none}
.ai-toast.show{opacity:1;transform:none}
.ai-toast .ico{flex:none;width:40px;height:40px;border-radius:12px;background:#e3f7ee;color:#13955f;display:grid;place-items:center}
.ai-toast .ico svg{width:20px;height:20px}
.ai-toast strong{display:block;font-size:13.5px;margin-bottom:1px}
.ai-toast span{color:var(--muted)}
.ai-sticker{position:absolute;z-index:3;left:-30px;top:-30px;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;text-align:center;background:linear-gradient(135deg,#e9c3fb,#c98cec);color:#3a0a50;font:15px/1 'Chalkboard SE','Comic Sans MS',cursive;transform:rotate(-12deg);box-shadow:0 14px 30px #12021f44;animation:aiFloat 5s ease-in-out infinite}
.ai-sticker b{display:block;font:800 24px/1 Arial,Helvetica,sans-serif;letter-spacing:-1px}
@keyframes aiFloat{50%{transform:rotate(-6deg) translateY(-7px)}}

@media(max-width:950px){.ai-feature{grid-template-columns:1fr}.ai-stage{margin-top:10px}.ai-toast{left:-18px}}
@media(max-width:620px){
.ai-feature{border-radius:27px;padding:32px 22px 40px}
.ai-feature h2{font-size:clamp(38px,11vw,50px);letter-spacing:-2px}
.ai-feature h2 em{white-space:normal}
.ai-chips li{font-size:13px;padding:9px 13px}
.ai-btn{font-size:15px;padding:16px 24px}
.ai-chat-body{height:330px}
.ai-msg{font-size:14px}
.ai-who small{display:none}
.ai-toast{left:10px;right:10px;bottom:-26px;max-width:none;width:auto}
.ai-sticker{left:-8px;top:-34px;width:70px;height:70px;font-size:13px}.ai-sticker b{font-size:20px}
}
@media(prefers-reduced-motion:reduce){.ai-msg.in,.ai-typing.in,.ai-typing i,.ai-sticker{animation:none}.ai-toast{transition:none}.ai-chips li:hover,.ai-btn:hover{transform:none}}

/* ---------- Página agentes-ia.html ---------- */
.page-hero .ai-actions{margin-top:28px}
.page-hero .ai-actions .audience-link{color:#760092}
@media(max-width:1100px){.page-hero.has-art .ai-actions{margin-bottom:6px}}

.ai-feature.demo h2{font-size:clamp(36px,4vw,58px)}

/* Panel del cliente */
.ai-panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px;margin:14px 0}
.ai-panel>.panel{border-radius:30px;padding:clamp(30px,4vw,52px) clamp(26px,4vw,52px);position:relative;overflow:hidden;isolation:isolate}
.ai-dash-wrap{display:grid;place-items:center;background:radial-gradient(ellipse at 100% 100%,#9d1ec6,transparent 60%),linear-gradient(135deg,#400850,#6b0f87)}
.ai-dash-wrap:before{content:'';position:absolute;z-index:-1;width:60%;aspect-ratio:1;border-radius:50%;left:-22%;top:-30%;background:linear-gradient(135deg,#7d15a0,#4a0a63)}
.ai-dash{width:100%;max-width:560px;background:#fff;border-radius:22px;box-shadow:0 30px 70px #12021f66;color:var(--ink);overflow:hidden;transform:rotate(-1.5deg);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.ai-panel:hover .ai-dash{transform:none}
.ai-dash-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid #f0e8f5}
.ai-dash-head strong{font-size:15px;letter-spacing:-.2px;display:flex;align-items:center;gap:10px}
.ai-dash-head strong i{width:10px;height:10px;border-radius:50%;background:#2bc48a;box-shadow:0 0 0 4px #2bc48a26}
.ai-dash-head small{font-size:11px;letter-spacing:.5px;color:#8904ab;background:#f5eafa;border-radius:20px;padding:5px 10px;white-space:nowrap}
.ai-dash-body{padding:18px 20px 20px;display:grid;gap:16px}
.ai-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ai-kpi{background:#faf6fc;border:1px solid #f1e8f6;border-radius:14px;padding:12px 14px}
.ai-kpi span{display:block;font-size:11px;color:var(--muted);letter-spacing:.3px}
.ai-kpi strong{display:block;font-size:clamp(22px,2.2vw,28px);letter-spacing:-1px;margin-top:4px}
.ai-chart{display:grid;grid-template-columns:repeat(7,1fr);align-items:end;gap:8px;height:96px;padding:0 2px}
.ai-chart i{display:block;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#c98cec,#e9d3f6);height:var(--h);transform-origin:bottom;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.ai-chart i:last-child{background:linear-gradient(180deg,#a90bd0,#790094)}
.ai-chart-days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;font-size:10px;color:#9a90a8;text-align:center;margin-top:-10px}
.ai-leads{list-style:none;margin:0;padding:0;border-top:1px solid #f0e8f5}
.ai-leads li{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #f4eef8;font-size:13px}
.ai-leads .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;background:linear-gradient(135deg,#b45edb,#6b0f87)}
.ai-leads li:nth-child(2) .av{background:linear-gradient(135deg,#e88ac0,#a3236d)}
.ai-leads li:nth-child(3) .av{background:linear-gradient(135deg,#7fa8f0,#3657b5)}
.ai-leads b{display:block;font-size:13.5px}
.ai-leads em{font-style:normal;color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-leads .lng{font-size:10px;font-weight:700;letter-spacing:.6px;color:#6a5d7a;border:1px solid #e6dcee;border-radius:8px;padding:4px 6px}
.ai-leads .st{font-size:11px;border-radius:20px;padding:5px 10px;background:#e3f7ee;color:#13955f;white-space:nowrap}
.ai-leads .st.n{background:#f5eafa;color:#8904ab}
@media(max-width:950px){.ai-panel{grid-template-columns:1fr}}
@media(max-width:620px){.ai-panel>.panel{border-radius:27px;padding:28px 18px}.ai-panel>.panel-light{padding:28px 22px}.ai-dash{transform:none}.ai-dash-head{padding:14px 16px}.ai-dash-body{padding:14px 16px 16px}.ai-kpi{padding:10px}.ai-kpi strong{font-size:20px}.ai-leads li{grid-template-columns:30px minmax(0,1fr) auto;gap:10px}.ai-leads .lng{display:none}.ai-leads .av{width:30px;height:30px}}
@media(prefers-reduced-motion:reduce){.ai-dash{transform:none;transition:none}}

/* Prueba real: Mr. Cri */
.ai-proof{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px clamp(24px,4vw,50px);text-align:left;padding:clamp(30px,4vw,48px) clamp(26px,5vw,64px)}
.ai-proof .ai-avatar{width:clamp(64px,7vw,88px);height:clamp(64px,7vw,88px)}
.ai-proof .ai-avatar svg{width:45%;height:45%}
.ai-proof .ai-avatar:after{width:16px;height:16px;border-width:3px}
.ai-proof h2{margin:0 0 8px}
.ai-proof p{margin:0;max-width:640px}
.ai-proof .hand{color:#3a1150;margin:0}
.ai-proof .hand svg{display:block;width:64px;margin:10px 0 0 30px;transform:rotate(35deg)}
@media(max-width:850px){.ai-proof{grid-template-columns:auto minmax(0,1fr)}.ai-proof .hand{grid-column:1/-1;justify-self:end}}
@media(max-width:620px){.ai-proof{grid-template-columns:1fr;text-align:left}}

/* Cabecera de la página: más alta para que quepan los botones */
@media(min-width:1101px){.page-hero.has-art.ai-hero{aspect-ratio:auto;min-height:clamp(500px,38vw,580px)}.page-hero.has-art.ai-hero .page-copy{width:44%}}
.ai-feature .ai-stage{margin-bottom:22px}
@media(max-width:950px){.ai-feature{grid-template-columns:minmax(0,1fr)}}
.page-hero.ai-hero .page-intro{max-width:470px}

/* ---------- Cabecera de agentes-ia.html con el grillo animado ---------- */
.page-hero.gh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:center;gap:20px;min-height:clamp(560px,42vw,640px);padding-top:clamp(40px,4vw,60px);padding-bottom:clamp(40px,4vw,60px)}
.gh .page-copy{width:auto}
.gh-stage{position:relative;height:100%;min-height:500px;display:grid;place-items:end center}
.gh-cricket{position:relative;z-index:2;width:min(100%,400px);height:auto;aspect-ratio:880/1072;display:block;margin-bottom:6px;object-fit:contain;background:transparent}
.gh-disc{position:absolute;z-index:0;width:min(92%,470px);max-width:calc(100% - 10px);aspect-ratio:1;left:50%;bottom:6%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,#f3e2fd 40%,#e2bdf7 100%);box-shadow:inset 0 -30px 60px #c98cec55}
.gh-shadow{position:absolute;z-index:1;width:46%;height:24px;left:27%;bottom:2%;border-radius:50%;background:radial-gradient(#4b0a6744,transparent 70%)}
.gh-bubble{position:absolute;z-index:3;margin:0;padding:13px 17px;border-radius:20px;font-size:15px;line-height:1.35;box-shadow:0 16px 36px #4b0a6722;opacity:0;animation:ghPop 10.27s cubic-bezier(.16,1,.3,1) infinite}
.gh-bubble.b1{left:-2%;top:16%;background:#fff;color:var(--ink);border-bottom-right-radius:6px}
.gh-bubble.b1 b{color:#8904ab}
.gh-bubble.b2{right:-4%;top:40%;background:linear-gradient(135deg,#9a0bbf,#74008f);color:#fff;border-bottom-left-radius:6px;animation-delay:1.6s}
@keyframes ghPop{0%{opacity:0;transform:translateY(14px) scale(.9)}6%,40%{opacity:1;transform:none}46%,100%{opacity:0;transform:translateY(-8px) scale(.96)}}
.gh-toast{left:auto;right:-6%;bottom:12%;opacity:0;animation:ghToast 10.27s cubic-bezier(.16,1,.3,1) infinite 3.4s;transition:none}
@keyframes ghToast{0%{opacity:0;transform:translateY(16px) scale(.94)}6%,45%{opacity:1;transform:none}52%,100%{opacity:0;transform:translateY(16px) scale(.94)}}
.gh-pill{position:absolute;z-index:3;left:4%;bottom:10%;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:30px;background:#fff;font-size:13px;color:#3d3450;box-shadow:0 10px 26px #4b0a6718}
.gh-pill i{width:9px;height:9px;border-radius:50%;background:#2bc48a;box-shadow:0 0 0 4px #2bc48a2b;animation:ghBlink 1.6s infinite}
@keyframes ghBlink{50%{box-shadow:0 0 0 7px #2bc48a00}}
.gh-hand{position:absolute;z-index:3;right:2%;top:6%;margin:0;font:clamp(16px,1.4vw,20px)/1.1 'Chalkboard SE','Comic Sans MS',cursive;color:#3a1150;transform:rotate(8deg);text-align:center}
@media(max-width:900px){.page-hero.gh{grid-template-columns:1fr;padding-bottom:0;gap:0}.gh-stage{min-height:0;padding-top:70px}.gh-cricket{width:min(78%,340px)}.gh-bubble.b1{left:0;top:6%}.gh-bubble.b2{right:0;top:36%}.gh-toast{right:0;bottom:6%}.gh-hand{display:none}}
@media(max-width:620px){.gh-stage{min-height:0;padding-top:64px;margin-top:8px}.gh-cricket{width:min(74%,300px);margin-bottom:24px}.gh-bubble.b1{top:0;left:0}.gh-bubble.b2{top:30%}.gh-toast{display:none}.gh-bubble{font-size:13.5px;padding:11px 14px}.gh-pill{bottom:4%}}
@media(prefers-reduced-motion:reduce){.gh-bubble,.gh-toast{animation:none;opacity:1}.gh-pill i{animation:none}}