/* ═══════════════════════════════════════════════════════════
   SECTORES · variante A — "índice + fichas"
   Solo para sectores-vA.html. No toca quimconex.css: usa sus tokens.

   La regla de medidas (lo que pidió el dueño):
   · la foto es una franja de proporción FIJA (21:6 escritorio, 21:8 tablet,
     2:1 móvil) con object-fit:cover. El texto nunca la estira.
   · debajo, una matriz de 3 filas de fichas en TODOS los sectores. Si el
     sector tiene menos de 9 productos, las filas se completan (las fichas se
     ensanchan para que ninguna fila quede coja) y el espacio que sobra lo
     toma un bloque de consulta. Si tiene más de 9, los demás van plegados.
   · el pie (conteo de vista + enlaces) mide lo mismo en los siete.
   Resultado: en escritorio los siete sectores miden prácticamente igual.
   ═══════════════════════════════════════════════════════════ */

.sx{
  --sx-pad:32px;          /* margen lateral común: franja, cabecera, fichas y pie */
  --sx-row:180px;         /* alto mínimo de una fila de fichas */
  --sx-idx-h:66px;        /* alto del índice fijo (para el ancla) */
  --sx-pie-h:58px;
  position:relative;
  border-top:1px solid var(--line);
}

/* ── ÍNDICE FIJO ─────────────────────────────────── */
.sx-idx{position:sticky;top:0;z-index:40;background:rgba(11,11,12,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.sx-idx ol{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(max-content,1fr);overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sx-idx ol::-webkit-scrollbar{display:none}
.sx-idx li{display:flex;min-width:0}
.sx-idx li+li{border-left:1px solid var(--line)}
.sx-idx a{position:relative;flex:1;display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:"n c" "t t";row-gap:8px;column-gap:12px;align-items:baseline;
  padding:14px 22px 15px;color:var(--dim);transition:color .3s var(--ease),background .4s var(--ease)}
.sx-idx .n{grid-area:n;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dimmer);transition:color .3s}
.sx-idx .c{grid-area:c;justify-self:end;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dimmer)}
.sx-idx .t{grid-area:t;font-family:var(--disp);font-size:14px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;line-height:1;white-space:nowrap}
.sx-idx a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--a1);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.sx-idx a:hover{color:var(--ink);background:var(--surf)}
.sx-idx a:hover::after{transform:scaleX(1)}
.sx-idx a[aria-current="true"]{color:var(--ink);background:var(--surf)}
.sx-idx a[aria-current="true"] .n{color:var(--a1)}
.sx-idx a[aria-current="true"]::after{transform:scaleX(1)}
.sx-idx a:focus-visible{outline:2px solid var(--a1);outline-offset:-2px}

/* ── SECTOR ──────────────────────────────────────── */
.sx-sec{position:relative;scroll-margin-top:var(--sx-idx-h)}
.sx-sec+.sx-sec{border-top:1px solid var(--line)}

/* franja de foto: proporción fija, la foto se recorta, nunca se estira */
.sx-band{position:relative;width:100%;aspect-ratio:21/6;overflow:hidden}
.sx-band.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
/* las copias escaneadas traen marco de papel: se recorta con un zoom fijo */
.sx-band.ph img.marco{transform:scale(1.17)}
.sx-band.ph.in img.marco{transform:scale(1.1)}
.sx-band .tint{background:
  linear-gradient(0deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,.5) 46%,rgba(11,11,12,.1) 100%),
  linear-gradient(168deg,rgba(249,162,29,.16) 0%,rgba(203,55,43,.2) 40%,rgba(11,11,12,.45) 100%)}
.sx-band .stamp{top:20px;bottom:auto;left:var(--sx-pad);right:var(--sx-pad)}
.sx-cap{position:absolute;left:var(--sx-pad);right:calc(var(--sx-pad) + 22%);bottom:30px;z-index:5}
.sx-cap .mono{display:block;color:var(--a1);margin-bottom:14px}
.sx-cap h2{font-family:var(--disp);font-size:clamp(34px,4.7vw,74px);font-weight:600;letter-spacing:-.02em;
  line-height:.92;text-transform:uppercase;margin:0;max-width:none;text-wrap:balance}
.sx-num{position:absolute;right:var(--sx-pad);bottom:22px;z-index:5;font-family:var(--disp);font-weight:300;
  font-size:clamp(64px,9.2vw,150px);line-height:.74;letter-spacing:-.04em;color:transparent;
  -webkit-text-stroke:1px rgba(243,238,234,.42);pointer-events:none;user-select:none}

/* cabecera: descripción + sello + conteo */
.sx-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px 48px;
  min-height:118px;padding:24px var(--sx-pad);border-top:1px solid var(--line)}
.sx-desc{margin:0;color:var(--ink);font-size:clamp(16px,1.32vw,19px);line-height:1.5;max-width:62ch}
.sx-meta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:flex-end}
.sx-meta .sello{background:rgba(249,162,29,.1);border-color:rgba(249,162,29,.32)}
.sx-tot{display:flex;align-items:baseline;gap:10px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.sx-tot b{font-family:var(--disp);font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:.8;color:var(--ink)}

/* ── MATRIZ DE FICHAS ───────────────────────────────
   6 columnas internas: una ficha ocupa 2 (tres por fila), 3 (dos por fila)
   o 6 (sola). El reparto lo decide build-sectores-vA.js para que ninguna
   fila quede con huecos. */
.sx-mat{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border-top:1px solid var(--line);min-height:calc(var(--sx-row) * 3 + 2px)}
.sx-mat>.sx-rem{flex:1 1 auto}
.sx-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:minmax(var(--sx-row),auto);gap:1px;background:var(--line)}
.sx-f{grid-column:span 2;position:relative;background:var(--bg);padding:24px var(--sx-pad) 20px;
  display:flex;flex-direction:column;gap:9px;transition:background .4s var(--ease)}
.sx-f.w3{grid-column:span 3}
.sx-f.w6{grid-column:span 6}
.sx-f::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--a1);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.sx-f:hover,.sx-f:focus-within{background:var(--surf)}
.sx-f:hover::after,.sx-f:focus-within::after{transform:scaleX(1)}
.sx-f .f{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--a1);line-height:1.5}
.sx-f h3{font-family:var(--disp);font-size:clamp(17px,1.38vw,21px);font-weight:600;letter-spacing:-.006em;
  text-transform:uppercase;line-height:1.04;margin:0;color:var(--ink)}
.sx-f p{margin:0;color:var(--dim);font-size:14.5px;line-height:1.55;max-width:60ch}
.sx-f-pie{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;align-items:baseline;
  gap:6px 16px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer)}
.sx-f-pie .k{font-variant-numeric:tabular-nums}
.sx-nk{color:var(--dim)}
.sx-nk a{color:var(--a1);border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.sx-nk a:hover{border-bottom-color:var(--a1)}

/* bloque de consulta: llena las filas que un sector chico no usa */
.sx-rem{position:relative;overflow:hidden;background:var(--surf);min-height:var(--sx-row);
  padding:30px var(--sx-pad);display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"m ." "t a" "p a";align-content:end;column-gap:48px;row-gap:10px}
.sx-rem .mono{grid-area:m;color:var(--a1)}
.sx-rem-t{grid-area:t;margin:0;font-family:var(--disp);font-size:clamp(22px,2.2vw,32px);font-weight:600;
  letter-spacing:-.014em;line-height:1;text-transform:uppercase;max-width:22ch;position:relative;z-index:1}
.sx-rem-p{grid-area:p;margin:0;color:var(--dim);font-size:15px;max-width:58ch;position:relative;z-index:1}
.sx-rem-a{grid-area:a;align-self:end;position:relative;z-index:1;display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--line);padding:15px 20px;background:var(--bg);
  transition:color .3s,border-color .3s,background .3s}
.sx-rem-a .arw{transition:transform .35s var(--ease)}
.sx-rem-a:hover{color:#0B0B0C;background:var(--a1);border-color:var(--a1)}
.sx-rem-a:hover .arw{transform:translateX(5px)}
.sx-rings{position:absolute;right:-4%;top:50%;width:min(46%,560px);height:auto;transform:translateY(-50%);
  overflow:visible;pointer-events:none}
.sx-rings circle{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.sx-rings circle:first-child{stroke:rgba(249,162,29,.34)}
.sx-rings circle:last-child{stroke:rgba(243,238,234,.14)}
.sx-rem[data-filas="1"] .sx-rings{width:min(30%,360px);right:18%}
.sx-rem[data-filas="1"]{grid-template-areas:"m a" "t a" "p a"}

/* ── PIE DEL SECTOR ──────────────────────────────── */
.sx-pie{position:relative;border-top:1px solid var(--line);min-height:var(--sx-pie-h)}
.sx-vista{margin:0;height:var(--sx-pie-h);display:flex;align-items:center;padding:0 var(--sx-pad);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer)}
.sx-mas>summary{list-style:none;display:flex;align-items:center;gap:14px;width:max-content;max-width:100%;
  height:var(--sx-pie-h);padding:0 var(--sx-pad);cursor:pointer;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--a1);transition:color .3s var(--ease)}
.sx-mas>summary::-webkit-details-marker{display:none}
.sx-mas>summary:hover{color:var(--ink)}
.sx-mas>summary:focus-visible{outline:2px solid var(--a1);outline-offset:-2px}
.sx-mas>summary i{position:relative;flex:none;width:22px;height:22px;border:1px solid rgba(249,162,29,.5);order:-1}
.sx-mas>summary i::before,.sx-mas>summary i::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:1px;
  background:currentColor;transform:translate(-50%,-50%);transition:transform .35s var(--ease)}
.sx-mas>summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.sx-mas[open]>summary i::after{transform:translate(-50%,-50%) rotate(0)}
.sx-mas .ocultar{display:none}
.sx-mas[open] .ver{display:none}
.sx-mas[open] .ocultar{display:inline}
.sx-mas .sx-grid{border-top:1px solid var(--line)}
.sx-links{position:absolute;top:0;right:var(--sx-pad);height:var(--sx-pie-h);margin:0;display:flex;align-items:center;
  gap:28px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.sx-links a{color:var(--dim);display:inline-flex;gap:8px;align-items:center;transition:color .25s}
.sx-links a .arw{transition:transform .35s var(--ease)}
.sx-links a:hover{color:var(--a1)}
.sx-links a:hover .arw{transform:translateX(4px)}

/* ── SIN JS: todo visible, sin cortinas ──────────── */
.sx:not(.sx-js) .ph .curtain,.sx:not(.sx-js) .ph .sweep{display:none}
.sx:not(.sx-js) .ph img{transform:none}
.sx:not(.sx-js) .ph img.marco{transform:scale(1.1)}

/* ── PANTALLAS MEDIANAS ──────────────────────────── */
@media (max-width:1280px){
  .sx{--sx-pad:28px}
  .sx-idx a{padding:13px 16px 14px}
  .sx-idx .t{font-size:13px;letter-spacing:.04em}
}
@media (max-width:1080px){
  .sx{--sx-row:150px}
  .sx-band{aspect-ratio:21/8}
  .sx-num{font-size:96px}
  .sx-mat{min-height:0}
  .sx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-f,.sx-f.w3,.sx-f.w6{grid-column:auto}
  .sx-f.t2{grid-column:1 / -1}
  .sx-rem[data-filas="1"],.sx-rem{grid-template-areas:"m" "t" "p" "a";grid-template-columns:1fr}
  .sx-rem-a{justify-self:start;margin-top:10px}
  .sx-rem[data-filas="1"] .sx-rings{width:min(46%,420px);right:-4%}
}

/* ── MÓVIL ───────────────────────────────────────── */
@media (max-width:760px){
  .sx{--sx-pad:20px;--sx-idx-h:46px}
  .sx-idx{top:60px}
  .sx-idx ol{-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
  .sx-idx ol.fin{-webkit-mask-image:none;mask-image:none}
  .sx-idx a{grid-template-columns:auto auto auto;grid-template-areas:"n t c";column-gap:9px;padding:15px 16px 14px}
  .sx-idx .t{font-size:13px}
  .sx-sec{scroll-margin-top:calc(60px + var(--sx-idx-h))}
  .sx-band{aspect-ratio:2/1}
  .sx-band .stamp{top:14px;font-size:9px;letter-spacing:.1em;line-height:1.5}
  .sx-num{display:none}
  .sx-cap{right:var(--sx-pad);bottom:20px}
  .sx-cap .mono{margin-bottom:10px}
  .sx-cap h2{font-size:clamp(28px,8.4vw,40px)}
  .sx-head{grid-template-columns:1fr;min-height:0;padding:24px var(--sx-pad) 22px;gap:18px}
  .sx-meta{justify-content:flex-start}
  .sx-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .sx-f,.sx-f.w3,.sx-f.w6,.sx-f.t2{grid-column:auto}
  .sx-f{padding:20px var(--sx-pad) 16px}
  .sx-rem{min-height:0;padding:28px var(--sx-pad)}
  .sx-rings,.sx-rem[data-filas="1"] .sx-rings{width:70%;right:-22%;top:34%}
  .sx-pie{display:flex;flex-direction:column}
  .sx-links{position:static;height:auto;padding:16px var(--sx-pad) 18px;flex-wrap:wrap;gap:12px 24px;
    border-top:1px solid var(--line)}
  .sx-mas>summary{width:100%}
}