/* Escena 3D de cada sector dentro de «Soluciones de IA para tu sector» (home). La genera sectores3d.py; la escena, sectores3d.js.
   Sin 3D no se ve nada de esto y quedan las tarjetas (.packs). */
.sx{display:none}
.sectors.sx-on .sx{display:flex;flex-direction:column;gap:12px}
.sectors.sx-on .sel-panel .packs{display:none}
.sectors.sx-on .sel-panel .core{gap:22px}

.sx-vis{position:relative}
.sx-stage{position:relative;aspect-ratio:16 / 10.5;min-height:300px;border-radius:20px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#f3f5f8,#e7eaef);box-shadow:inset 0 0 0 1px var(--hair)}
.sx-stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.sx-tags{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sx-tag{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:6px;padding:5px 9px 5px 7px;border-radius:999px;white-space:nowrap;
  background:oklch(1 0 0 / .93);box-shadow:0 6px 18px -8px var(--shadow),inset 0 0 0 1px var(--hair);font:600 .72rem/1 var(--text);color:var(--chalk);
  will-change:transform;transition:opacity 300ms var(--ease-out),background-color 200ms var(--ease-out),color 200ms var(--ease-out)}
.sx-tag i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.sx-tag.on{background:var(--c);color:#fff}
.sx-tag.on i{background:#fff}
.sx-load{position:absolute;inset:0;display:grid;place-items:center;color:var(--chalk-2);transition:opacity 500ms var(--ease-out)}
.sx-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:6px 12px;border-radius:999px;background:oklch(1 0 0 / .86);
  color:var(--chalk-2);white-space:nowrap;font-size:.7rem;box-shadow:inset 0 0 0 1px var(--hair);transition:opacity 400ms var(--ease-out)}
.sx-load.off,.sx-hint.off{opacity:0;pointer-events:none}

.sx-card{position:absolute;left:12px;bottom:12px;width:min(330px,calc(100% - 24px));padding:16px 18px 16px;border-radius:18px;
  background:oklch(1 0 0 / .96);box-shadow:0 24px 50px -22px var(--shadow),inset 0 0 0 1px var(--hair);
  opacity:0;transform:translateY(10px) scale(.98);transition:opacity 300ms var(--ease-out),transform 400ms var(--ease-out)}
.sx-card.on{opacity:1;transform:none}
.sx-card::before{content:"";position:absolute;left:18px;right:18px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--c)}
.sx-x{all:unset;cursor:pointer;font:500 .76rem/1 var(--text);color:var(--chalk-2);padding:4px 0;margin-bottom:8px;display:inline-block}
.sx-x:hover{color:var(--chalk)}
.sx-x:focus-visible{outline:2px solid var(--signal-2);outline-offset:3px;border-radius:6px}
.sx-card-r{display:block;font:700 1.08rem/1.2 var(--display);letter-spacing:-.015em;margin-bottom:6px}
.sx-card-t{color:var(--chalk-2);font-size:.9rem;line-height:1.45;margin:0}

.sx-chips{display:flex;flex-wrap:wrap;gap:8px}
.sx-chip{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:8px 13px 8px 10px;border-radius:999px;
  font:600 .82rem/1 var(--text);color:var(--chalk);background:var(--night);box-shadow:inset 0 0 0 1px var(--hair-2);
  transition:background-color 200ms var(--ease-out),color 200ms var(--ease-out),transform 160ms var(--ease-out)}
.sx-chip i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.sx-chip:hover{box-shadow:inset 0 0 0 1px var(--c)}
.sx-chip:active{transform:scale(.97)}
.sx-chip[aria-pressed="true"]{background:var(--c);color:#fff;box-shadow:none}
.sx-chip[aria-pressed="true"] i{background:#fff}
.sx-chip:focus-visible{outline:2px solid var(--signal-2);outline-offset:2px}

@media (max-width:560px){
  .sx-stage{aspect-ratio:4 / 3.3;min-height:0}
  .sx-card{position:relative;left:auto;bottom:auto;width:auto;margin-top:10px}
  .sx-tag{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sx-card,.sx-tag,.sx-chip{transition:none}
}

/* Página de cada sector (#equipo-ia): la escena en grande y un ejemplo por robot al lado, que hace de botón */
.sx-sec{padding-block:var(--section);border-top:1px solid var(--hair)}
.sx-sec-head{max-width:62ch;margin-bottom:clamp(24px,3.5vw,40px)}
.sx-sec-head h2{font-size:clamp(2rem,3.8vw,3.4rem);text-wrap:balance;margin-bottom:12px}
.sx-sec-head p{color:var(--chalk-2);font-size:1.05rem;line-height:1.5;margin:0}
.sx-sec .sx{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(18px,2.6vw,32px);align-items:start}
.sx-sec:not(.sx-on) .sx{grid-template-columns:1fr}
.sx-sec:not(.sx-on) .sx-vis{display:none}
.sx-sec .sx-stage{aspect-ratio:16 / 11;min-height:380px}
.sx-ejs h3{font:700 1.05rem/1.25 var(--display);letter-spacing:-.01em;margin:0 0 12px}
.sx-ejs ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sx-ej{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;padding:13px 16px 14px;border-radius:16px;background:var(--night);
  box-shadow:inset 0 0 0 1px var(--hair);transition:box-shadow 200ms var(--ease-out),background-color 200ms var(--ease-out),transform 160ms var(--ease-out)}
.sx-ej:hover{box-shadow:inset 0 0 0 1px var(--c)}
.sx-ej:active{transform:scale(.985)}
.sx-ej:focus-visible{outline:2px solid var(--signal-2);outline-offset:2px}
.sx-ej[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--c);background:color-mix(in oklch,var(--c) 7%,var(--night))}
.sx-ej-n{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font:700 .92rem/1.2 var(--display);color:var(--chalk);margin-bottom:5px}
.sx-ej-n i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.sx-ej-n small{font:500 .78rem/1.2 var(--text);color:var(--chalk-2)}
.sx-ej-t{display:block;color:var(--chalk-2);font-size:.9rem;line-height:1.45}
@media (max-width:900px){
  .sx-sec .sx{grid-template-columns:1fr}
  .sx-sec .sx-stage{min-height:0}
}
@media (max-width:560px){ .sx-sec .sx-stage{aspect-ratio:4 / 3.3} }
@media (prefers-reduced-motion:reduce){ .sx-ej{transition:none} }