/* 6b · SECTORES (14-10-2026), copiado de la landing de captación (sistema-captacion/web/sectores.css). Prefijo cs-. Calcado de «Por sectores» de la landing de Agentes IA
   (agentes-ia/landing-2026-10/web3/secciones/sectores.css): caras en dos arcos con su sector; dentro del arco, el rótulo,
   el +45.000 y cómo es el contacto; debajo, las etiquetas de los sectores.
   Sin JS o con movimiento reducido: todo quieto en su estado final. Con JS: .cs-anima (entrada, punto verde y pausa). */
.cs-sectores{ --e:cubic-bezier(.16,1,.3,1); --mueve:cubic-bezier(.45,0,.55,1); padding:56px 0 100px; overflow-x:clip; }
.cs-sectores p{ margin:0; }

/* ================= ARRIBA: las caras y el número ================= */
.cs-arriba{ position:relative; --k:1; width:min(1280px, 100% - var(--gutter) * 2); margin:0 auto; }
.cs-lienzo-caja{ position:relative; }
.cs-lienzo{ position:absolute; left:50%; top:0; transform-origin:50% 0; }
.cs-arcos{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; display:none;
  -webkit-mask:linear-gradient(#000 0 48%, transparent 82%); mask:linear-gradient(#000 0 48%, transparent 82%); }
.cs-arcos path{ fill:none; stroke:#e7e7ea; stroke-width:1.5; vector-effect:non-scaling-stroke; }
.cs-caras{ list-style:none; margin:0; padding:0; }
.cs-cara{ position:absolute; display:none; }
.cs-foto{ display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid #fff; background:#f5f5f7;
  box-shadow:0 0 0 1px rgba(10,10,10,.08), 0 10px 22px -12px rgba(10,10,10,.35); }
.cs-aro, .cs-onda{ position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--verde); opacity:0; pointer-events:none; }
.cs-aro{ transition:opacity .2s; }
.cs-cara.hecho .cs-aro{ opacity:1; }
.cs-cara.late .cs-onda{ animation:cs-onda .7s var(--e); }
@keyframes cs-onda{ from{ opacity:.55; transform:scale(1); } to{ opacity:0; transform:scale(1.45); } }
.cs-insignia{ position:absolute; top:calc(100% - 8px); left:50%; transform:translateX(-50%); display:none; align-items:center; height:24px; padding:0 9px;
  border-radius:999px; background:#fff; border:1px solid rgba(10,10,10,.1); white-space:nowrap; max-width:160px; font-size:11.5px; font-weight:500; line-height:1; color:rgba(10,10,10,.82); }
.cs-insignia.izq{ left:-6px; transform:none; } .cs-insignia.der{ left:auto; right:-6px; transform:none; }
.cs-insignia b{ position:relative; font-weight:500; }
.cs-ins-ok{ position:relative; display:grid; place-items:center; width:0; height:12px; overflow:hidden; border-radius:50%; background:var(--verde); color:var(--tinta); opacity:0; transition:opacity .2s; }
.cs-ins-ok .ico{ width:8px; height:8px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.cs-insignia::before{ content:''; position:absolute; inset:-1px; border-radius:inherit; background:var(--verde-agua); opacity:0; transition:opacity .2s; }
.cs-cara.hecho .cs-insignia::before{ opacity:1; }
.cs-cara.hecho .cs-ins-ok{ width:12px; margin-right:5px; opacity:1; }
.cs-orbita{ position:absolute; width:0; height:0; display:none; transition:transform var(--dur, .8s) var(--mueve); }
.cs-punto{ position:absolute; left:-6px; top:-6px; width:12px; height:12px; border-radius:50%; background:var(--verde); border:2px solid #fff; box-shadow:0 1px 3px rgba(10,10,10,.25);
  transform:translateX(var(--r, 0px)) scale(0); transition:transform var(--dur, .8s) var(--mueve); }
.cs-chip{ position:absolute; left:50%; display:none; transform:translateX(-50%); height:28px; max-width:240px; }
.cs-chip span{ position:absolute; left:50%; top:0; transform:translateX(-50%); display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:999px;
  background:var(--verde-agua); white-space:nowrap; font-size:12.5px; font-weight:500; color:var(--tinta); opacity:0; transition:opacity .22s; }
.cs-chip span.ver{ opacity:1; }
.cs-chip span::before{ content:'✓'; display:grid; place-items:center; width:14px; height:14px; border-radius:50%; background:var(--verde); font-size:9px; font-weight:700; color:var(--tinta); }
.cs-cab{ position:relative; text-align:center; }
.cs-num{ margin-top:14px; }
.cs-sub{ margin:18px auto 0 !important; }
.cs-pausa{ display:none; }

/* escritorio (≥ 1100): el número dentro del arco */
@media (min-width:1100px){
  .cs-lienzo{ width:1280px; height:700px; margin-left:-640px; transform:scale(var(--k)); }
  .cs-lienzo-caja{ position:absolute; left:0; right:0; top:0; height:0; }
  .cs-arriba{ padding-top:calc(372px * var(--k)); }
  .cs-arcos.m-d{ display:block; }
  .cs-cara:not([data-d="no"]){ display:block; left:var(--xd); top:var(--yd); width:var(--td); height:var(--td); margin:calc(var(--td) / -2) 0 0 calc(var(--td) / -2); }
  .cs-insignia{ display:inline-flex; }
  .cs-orbita{ left:640px; top:700px; }
  .cs-cab{ max-width:calc(760px * var(--k)); margin:0 auto; }
  .cs-num{ font-size:max(96px, calc(128px * var(--k))); }
}
/* tableta (640-1099): 10 caras encima del número */
@media (min-width:640px) and (max-width:1099.98px){
  .cs-lienzo-caja{ height:calc(330px * var(--k)); }
  .cs-lienzo{ width:640px; height:330px; margin-left:-320px; transform:scale(var(--k)); }
  .cs-arcos.m-e{ display:block; }
  .cs-cara:not([data-e="no"]){ display:block; left:var(--xe); top:var(--ye); width:var(--te); height:var(--te); margin:calc(var(--te) / -2) 0 0 calc(var(--te) / -2); }
  .cs-orbita{ left:320px; top:330px; }
  .cs-chip{ top:290px; }
  .cs-cab{ max-width:640px; margin:32px auto 0; }
}
/* móvil (< 640): 9 caras */
@media (max-width:639.98px){
  .cs-sectores{ padding:56px 0 70px; }
  .cs-lienzo-caja{ height:calc(236px * var(--k)); }
  .cs-lienzo{ width:358px; height:236px; margin-left:-179px; transform:scale(var(--k)); }
  .cs-arcos.m-m{ display:block; }
  .cs-cara:not([data-m="no"]){ display:block; left:var(--xm); top:var(--ym); width:var(--tm); height:var(--tm); margin:calc(var(--tm) / -2) 0 0 calc(var(--tm) / -2); }
  .cs-orbita{ left:179px; top:236px; }
  .cs-chip{ top:202px; }
  .cs-cab{ margin-top:28px; }
}
/* con JS y movimiento: el punto, el chip y la pausa */
.cs-anima .cs-orbita{ display:block; }
.cs-anima .cs-punto.ver{ transform:translateX(var(--r, 0px)) scale(1); }
@media (max-width:1099.98px){ .cs-anima .cs-chip{ display:block; } }
.cs-anima .cs-pausa{ display:grid; place-items:center; position:absolute; z-index:3; width:34px; height:34px; padding:0; border-radius:50%; background:#fff; border:1px solid rgba(10,10,10,.13); color:rgba(10,10,10,.6); cursor:pointer; }
@media (min-width:1100px){ .cs-anima .cs-pausa{ right:calc(50% - 604px * var(--k)); top:calc(548px * var(--k)); } }
@media (max-width:1099.98px){ .cs-anima .cs-pausa{ right:0; top:calc(var(--altocaja, 236px) - 34px); width:32px; height:32px; } }
@media (max-width:639.98px){ .cs-anima .cs-pausa{ top:calc(206px * var(--k)); } }
.cs-pausa .ico{ width:12px; height:12px; fill:currentColor; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.cs-pausa .i-play{ display:none; }
.cs-pausa[aria-pressed="true"] .i-play{ display:block; } .cs-pausa[aria-pressed="true"] .i-pausa{ display:none; }
.cs-pausa:focus-visible{ outline:2px solid var(--verde-os); outline-offset:3px; }
/* la entrada (una vez) */
.cs-anima:not(.cs-entra) .cs-arcos{ opacity:0; transform:rotate(-5deg); }
.cs-arcos{ transform-origin:50% 100%; transition:opacity .8s var(--e), transform .8s var(--e); }
.cs-anima:not(.cs-entra) .cs-cara{ opacity:0; transform:scale(.6); }
.cs-cara{ transition:opacity .42s var(--e) var(--dl, 0ms), transform .42s var(--e) var(--dl, 0ms); }
.cs-anima:not(.cs-entra) .cs-insignia{ opacity:0; }
.cs-insignia{ transition:opacity .24s var(--e) calc(var(--dl, 0ms) + 400ms); }

/* ================= DEBAJO: las etiquetas de los sectores ================= */
.cs-tags{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; width:min(1000px, 100% - var(--gutter) * 2); margin:40px auto 0; padding:0; }
.cs-tag{ display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 18px 0 7px; border-radius:12px; background:#fff;
  box-shadow:inset 0 0 0 1px rgba(10,10,10,.12); font-size:15px; font-weight:500; letter-spacing:-.01em; color:rgba(10,10,10,.82); white-space:nowrap; }
.cs-tag-ico{ width:30px; height:30px; border-radius:8px; background:var(--verde-agua); display:grid; place-items:center; color:var(--tinta); }
.cs-tag-ico .ico{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.cs-tag-mas{ padding:0 18px; color:var(--gris); box-shadow:inset 0 0 0 1px rgba(10,10,10,.12); background:transparent; }
.cs-sectores .cta{ margin-top:36px; }
@media (max-width:639.98px){
  .cs-tags{ gap:7px; margin-top:28px; }
  .cs-tag{ height:34px; padding:0 11px 0 4px; gap:6px; font-size:13px; letter-spacing:-.015em; border-radius:10px; }
  .cs-tag-ico{ width:26px; height:26px; border-radius:7px; }
  .cs-tag-ico .ico{ width:14px; height:14px; }
  .cs-tag-mas{ padding:0 11px; }
}
@media (prefers-reduced-motion:reduce){ .cs-sectores *{ animation:none !important; transition:none !important; } }