/* ============================================================
   THE BALLER COMPANY — software a medida y agentes de IA
   Panel de operaciones del hero, áreas de la empresa y traza
   de un agente. Solo CSS: sin JavaScript todo se lee completo.
   ============================================================ */

/* ---------- Hero: panel de operaciones ---------- */
.ops{position:relative;max-width:560px;margin-inline:auto}
.ops-card{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--paper);overflow:hidden;box-shadow:0 60px 120px -70px rgba(26,19,21,.6)}
.ops-top{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.ops-top i{width:9px;height:9px;border-radius:50%;background:var(--paper-3)}
.ops-top b{margin-left:6px;font-family:var(--mono);font-weight:400;font-size:11.5px;color:var(--ink-3)}
.ops-top span{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#2E9E6B}
.ops-top span::before{content:"";width:7px;height:7px;border-radius:50%;background:#2E9E6B;animation:pulse-g 1.8s ease-in-out infinite}
.ops-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.ops-kpis div{padding:16px 18px}
.ops-kpis div + div{border-left:1px solid var(--line)}
.ops-kpis b{display:block;font-family:var(--display);font-size:clamp(24px,2.4vw,30px);font-weight:600;letter-spacing:-.04em;color:var(--wine);line-height:1}
.ops-kpis span{display:block;margin-top:6px;font-size:12px;color:var(--ink-3);line-height:1.3}
.ops-list{list-style:none;margin:0;padding:10px 12px 14px;display:flex;flex-direction:column;gap:6px}
.ops-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid transparent}
.ops-row svg.lg{width:30px;height:30px;display:block}
.ops-row b{display:block;font-size:13.5px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ops-row small{display:block;margin-top:2px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ops-state{position:relative;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--line-2)}
.ops-state svg{width:14px;height:14px;color:#fff;opacity:0}
.js .ops.in .ops-row{animation:opsrow 12s var(--ease) infinite;animation-delay:calc(var(--i) * 2s)}
.js .ops.in .ops-state{animation:opsstate 12s var(--ease) infinite;animation-delay:calc(var(--i) * 2s)}
.js .ops.in .ops-state svg{animation:opscheck 12s var(--ease) infinite;animation-delay:calc(var(--i) * 2s)}
.js .ops.in .ops-state::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;border-top-color:var(--wine);
  animation:opsspin 12s linear infinite;animation-delay:calc(var(--i) * 2s)}
@keyframes opsrow{0%,2%{background:transparent;border-color:transparent}5%,12%{background:var(--wine-tint);border-color:rgba(160,56,67,.3)}16%,100%{background:transparent;border-color:transparent}}
@keyframes opsstate{0%,10%{background:transparent;border-color:var(--line-2)}13%,92%{background:#2E9E6B;border-color:#2E9E6B}97%,100%{background:transparent;border-color:var(--line-2)}}
@keyframes opscheck{0%,10%{opacity:0}13%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes opsspin{0%{transform:rotate(0);opacity:1}10%{transform:rotate(720deg);opacity:1}11%,100%{opacity:0}}
.ops-chip{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;background:var(--night);color:#fff;
  box-shadow:0 26px 50px -24px rgba(26,19,21,.8);animation:floaty 6s ease-in-out infinite}
.ops-chip svg{width:30px;height:30px;display:block;border-radius:9px}
.ops-chip b{display:block;font-size:13px;font-weight:600;line-height:1.2}
.ops-chip span{display:block;font-size:11px;color:#B3A7A9}
.ops-chip.c1{left:-40px;top:-38px}
.ops-chip.c2{right:-22px;bottom:-24px;background:var(--paper);color:var(--ink);border:1px solid var(--line);animation-delay:-3s}
.ops-chip.c2 span{color:var(--ink-3)}
@media(max-width:600px){.ops-chip.c1{left:-6px;top:-26px}.ops-chip.c2{right:-4px}.ops-kpis div{padding:12px}}

/* ---------- Dentro de la empresa ---------- */
.inside{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:900px){.inside{grid-template-columns:1fr}}
.inside li{list-style:none;padding:24px;border-top:2px solid var(--wine)}
.inside b{display:block;font-family:var(--display);font-size:21px;letter-spacing:-.03em;line-height:1.2}
.inside p{margin-top:8px;font-size:15px;color:var(--ink-2)}
.inside .mono{display:block;margin-bottom:12px;color:var(--wine)}
.inside-list{margin:0;padding:0}

/* ---------- Áreas de la empresa ---------- */
.areas .tabs{display:flex;flex-wrap:wrap;border-radius:22px}
.area{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:900px){.area{grid-template-columns:1fr}}
.area h3{font-size:clamp(26px,2.8vw,36px);letter-spacing:-.04em;line-height:1.1}
.area-ba{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
@media(max-width:560px){.area-ba{grid-template-columns:1fr}}
.area-ba div{padding:16px 18px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--paper)}
.area-ba div.after{border-color:rgba(160,56,67,.35);background:var(--wine-tint)}
.area-ba .mono{display:block;margin-bottom:6px;font-size:10.5px;color:var(--ink-3)}
.area-ba .after .mono{color:var(--wine)}
.area-ba p{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.area-flow{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--paper);overflow:hidden;box-shadow:0 50px 110px -70px rgba(26,19,21,.55)}
.area-flow .seqx-flow{gap:18px}
.tabpanel .area-flow .seq-node{animation:areanode 8s var(--ease) infinite;animation-delay:calc(var(--i) * 2s)}
@keyframes areanode{0%,24%,100%{border-color:var(--line);box-shadow:0 12px 30px -24px rgba(26,19,21,.55)}3%,20%{border-color:var(--wine);box-shadow:0 0 0 4px var(--wine-tint),0 22px 40px -26px rgba(160,56,67,.7)}}

/* ---------- Traza de un agente de IA ---------- */
.agent{border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);background:rgba(255,255,255,.04);overflow:hidden}
.agent-top{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.agent-top svg{width:28px;height:28px;display:block}
.agent-top b{font-size:14px;font-weight:600}
.agent-top span{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--wine-light)}
.agent-steps{list-style:none;margin:0;padding:18px;display:flex;flex-direction:column;gap:10px}
.agent-steps li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.agent-steps .n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.08);font-family:var(--mono);font-size:11px;color:#D9CDD0}
.agent-steps b{display:block;font-size:14px;font-weight:600;color:#fff;line-height:1.3}
.agent-steps small{display:block;margin-top:3px;font-size:12.5px;color:#B3A7A9;line-height:1.45}
.agent-steps em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#8B7E81;padding-top:5px}
.agent-steps li.human{border-color:rgba(224,97,111,.45);background:rgba(160,56,67,.18)}
.agent-steps li.human em{color:var(--wine-light)}
.js .agent.in .agent-steps li{animation:agentstep 12s var(--ease) infinite;animation-delay:calc(var(--i) * 1.6s)}
@keyframes agentstep{0%{opacity:.25;transform:translateY(6px)}4%,86%{opacity:1;transform:none}94%,100%{opacity:.25;transform:translateY(6px)}}

@media(prefers-reduced-motion:reduce){
  .ops-chip,.js .ops.in *,.tabpanel .area-flow .seq-node,.js .agent.in .agent-steps li{animation:none!important}
  .ops-state{background:#2E9E6B;border-color:#2E9E6B}
  .ops-state svg{opacity:1}
}

/* ============================================================
   SEO para IA: asistentes, medidor e informe de visibilidad
   ============================================================ */
.geo{position:relative;max-width:540px;margin-inline:auto;padding-bottom:40px}
.geo-bots{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.geo-bots span{padding:7px 13px;border-radius:100px;border:1px solid var(--line);background:var(--paper);font-size:13px;font-weight:500;color:var(--ink-2)}
.js .geo.in .geo-bots span{animation:geobot 8s var(--ease) infinite;animation-delay:calc(var(--i) * 2s)}
@keyframes geobot{0%,22%,100%{background:var(--paper);color:var(--ink-2);border-color:var(--line)}3%,19%{background:var(--ink);color:var(--paper);border-color:var(--ink)}}
.geo-meter{position:absolute;right:-18px;bottom:0;z-index:2;width:250px;padding:14px 16px;border-radius:18px;background:var(--night);color:#fff;
  box-shadow:0 30px 60px -28px rgba(26,19,21,.85);animation:floaty 6s ease-in-out infinite}
.geo-meter b{display:block;font-size:13px;font-weight:600;margin-bottom:10px}
.gm-row{display:grid;grid-template-columns:70px 1fr 38px;gap:8px;align-items:center;font-size:11.5px;color:#B3A7A9;padding:3px 0}
.gm-row i{height:6px;border-radius:6px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.gm-row i::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,var(--wine),var(--wine-light));transform-origin:0 50%}
.js .geo.in .gm-row i::after{animation:gmgrow 1.6s var(--ease) both .4s}
@keyframes gmgrow{from{transform:scaleX(0)}}
.gm-row em{font-style:normal;text-align:right;color:#fff;font-weight:600}
@media(max-width:600px){.geo-meter{right:0;width:220px}}

.geo-report{border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);background:rgba(255,255,255,.04);overflow:hidden;font-size:13px}
.gr-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.gr-top b{font-weight:600}
.gr-top span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--wine-light)}
.gr-head,.gr-row{display:grid;grid-template-columns:minmax(0,2.2fr) repeat(4,minmax(0,1fr));gap:8px;align-items:center;padding:11px 18px}
.gr-head{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#8B7E81;border-bottom:1px solid rgba(255,255,255,.06)}
.gr-head span:not(:first-child),.gr-row em{text-align:center}
.gr-row{border-bottom:1px solid rgba(255,255,255,.06);color:#E9E1E3}
.gr-row em{font-style:normal;font-weight:600;border-radius:8px;padding:5px 0}
.gr-row em.y{background:rgba(46,158,107,.18);color:#6FD3A3}
.gr-row em.n{color:#6E6366}
.js .geo-report.in .gr-row em.y{animation:grpop 9s var(--ease) infinite;animation-delay:calc(var(--i) * .6s)}
@keyframes grpop{0%,4%{transform:scale(.6);opacity:0}9%,90%{transform:none;opacity:1}96%,100%{transform:scale(.6);opacity:0}}
.gr-foot{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px 18px}
.gr-foot span{color:#B3A7A9}
.gr-foot i{height:8px;border-radius:8px;background:rgba(255,255,255,.1);overflow:hidden}
.gr-foot i b{display:block;height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,var(--wine),var(--wine-light))}
.gr-foot strong{font-family:var(--display);font-size:22px;letter-spacing:-.03em}
@media(max-width:560px){.gr-head,.gr-row{grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));padding:10px 12px;gap:4px;font-size:11.5px}.gr-head{font-size:8.5px}}
@media(prefers-reduced-motion:reduce){.js .geo.in *,.geo-meter,.js .geo-report.in .gr-row em.y{animation:none!important}}