/* =====================================================================
   11 · Sectores — A «Cuatro columnas» (la elegida) + Ronda 11: B–F nuevas
   (tipografía grande, cinta, etiquetas, ficha técnica, iniciales). Sistema sx.
   ===================================================================== */

/* ---------- A · Cuatro columnas ---------- */
.sec-a__list{list-style:none;margin:0;padding:0;row-gap:clamp(36px,4vw,56px)}
.sec-a__it{grid-column:span 3;position:relative;display:flex;flex-direction:column;gap:10px;padding-top:18px}
.sec-a__it::before,.sec-a__it::after{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:currentColor;opacity:.16}
.sec-a__it::after{background:var(--u-blue);opacity:1;transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.sec-a__it:hover::after{transform:scaleX(1)}
.sec-a__it .sx-meta{color:var(--u-blue)}
.sec-a__it p{color:var(--u-muted);font-size:.98rem;line-height:1.5;max-width:32ch}
@media (max-width:560px){
  .sec-a__list{row-gap:0}
  .sec-a__it{grid-column:1/-1;display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:4px 12px;padding:16px 0 18px}
  .sec-a__it .sx-meta{grid-row:1/3;padding-top:.35em}
  .sec-a__it p{font-size:.94rem}
}


/* ---------- B · Lista tipográfica (nombres enormes, uno encendido) ---------- */
.sec-b2__wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.4vw,32px)}
.sec-b2__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;column-gap:.32em;row-gap:0;font-family:var(--f-head);font-weight:var(--w-display);font-size:clamp(2rem,5.4vw,5.6rem);line-height:1;letter-spacing:-.05em}
.sec-b2__w{position:relative;display:inline-flex;align-items:flex-start;gap:.18em;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;line-height:1.02;color:rgba(255,255,255,.28);cursor:pointer;transition:color .5s var(--ease)}
.sec-b2__w .sx-meta{font-size:clamp(.6rem,.75vw,.72rem);letter-spacing:.06em;padding-top:.9em;color:inherit}
.sec-b2__it:not(:last-child)::after{content:"/";margin-left:.32em;color:rgba(255,255,255,.12);font-weight:400}
.sec-b2__it{display:flex;align-items:flex-start}
.sec-b2__w:hover{color:rgba(255,255,255,.55)}
.sec-b2__w[aria-pressed="true"]{color:var(--u-paper)}
.sec-b2__w[aria-pressed="true"] .sx-meta{color:var(--u-blue)}
.sec-b2__w:focus-visible{outline:2px solid var(--u-blue);outline-offset:4px;border-radius:4px}
.sec-b2__cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;padding-top:clamp(16px,1.6vw,22px);border-top:1px solid rgba(255,255,255,.16);min-height:3.4em}
.sec-b2__cap .sx-meta{color:var(--u-blue)}
.sec-b2__tx{font-size:clamp(1rem,1.3vw,1.25rem);line-height:1.5;color:var(--u-paper)}
.sec-b2__cap.is-swap>*{animation:secSwap .5s var(--ease) both}
@keyframes secSwap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- C · Cinta doble (dos cintas infinitas en sentidos opuestos) ---------- */
.sec-c2{overflow:hidden}
.sec-c2 .sx-head{margin-bottom:clamp(28px,3vw,48px)}
.sec-c2__band{display:grid;gap:clamp(10px,1.2vw,18px)}
.sec-c2__row{display:flex;width:max-content}
.sec-c2__track{list-style:none;margin:0;padding:0;display:flex;flex:none}
.sec-c2__row--a .sec-c2__track{animation:secMq 60s linear infinite}
.sec-c2__row--b .sec-c2__track{animation:secMq 48s linear infinite reverse}
.sec-c2__band:hover .sec-c2__track{animation-play-state:paused}
@keyframes secMq{to{transform:translateX(-100%)}}
.sec-c2__row--a li{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:12px;row-gap:6px;width:clamp(280px,26vw,400px);padding:clamp(18px,1.8vw,26px) clamp(20px,2vw,30px);margin-right:clamp(10px,1vw,16px);border:1px solid rgba(255,255,255,.14);border-radius:var(--sx-r);transition:background .4s,border-color .4s}
.sec-c2__row--a li:hover{background:var(--u-navy);border-color:var(--u-blue)}
.sec-c2__row--a .sx-meta{color:var(--u-blue)}
.sec-c2__row--a b{font-family:var(--f-head);font-weight:var(--w-display);font-size:clamp(1.4rem,2vw,1.9rem);letter-spacing:-.04em;line-height:1.05}
.sec-c2__d{grid-column:1/-1;color:var(--u-muted);font-size:.95rem;line-height:1.5}
.sec-c2__row--b li{display:flex;align-items:center;font-family:var(--f-head);font-weight:var(--w-display);font-size:clamp(3rem,7vw,7rem);letter-spacing:-.05em;line-height:1.05;white-space:nowrap}
.sec-c2__row--b b{color:transparent;-webkit-text-stroke:1.5px rgba(153,196,228,.55)}
.sec-c2__row--b li::after{content:"";width:.18em;height:.18em;margin:0 .45em;border-radius:50%;background:var(--u-blue)}
@media (prefers-reduced-motion:reduce){
  .sec-c2__track{animation:none!important}
  .sec-c2__row--a{width:auto;max-width:1500px;margin-inline:auto;padding-inline:var(--pad)}
  .sec-c2__row--a .sec-c2__track:first-child{flex:1 1 auto;min-width:0;flex-wrap:wrap;gap:12px}
  .sec-c2__row--a .sec-c2__track:first-child li{margin:0}
  .sec-c2__row--a .sec-c2__track[aria-hidden],.sec-c2__row--b{display:none}
}

/* ---------- D · Etiquetas (fondo claro, nube de etiquetas grandes) ---------- */
.sec-d2__cloud{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:clamp(8px,1vw,14px)}
.sec-d2__chip{display:inline-flex;align-items:center;gap:.6em;min-height:48px;padding:.42em .9em .46em .75em;border:1.5px solid var(--u-ink);border-radius:999px;background:transparent;color:var(--u-ink);font-family:var(--f-head);font-weight:var(--w-display);font-size:clamp(1.25rem,2.7vw,2.6rem);letter-spacing:-.04em;line-height:1;cursor:pointer;transition:background .4s var(--ease),color .4s,border-color .4s}
.sec-d2__chip .sx-meta{font-size:.68rem;color:var(--u-blue-strong);transition:color .4s}
.sec-d2__chip:hover{border-color:var(--u-blue-strong);color:var(--u-blue-strong)}
.sec-d2__chip[aria-pressed="true"]{background:var(--u-ink);border-color:var(--u-ink);color:var(--u-paper)}
.sec-d2__chip[aria-pressed="true"] .sx-meta{color:var(--u-blue)}
.sec-d2__chip:focus-visible{outline:2px solid var(--u-blue-strong);outline-offset:3px}
.sec-d2__cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;margin-top:clamp(28px,3vw,44px);padding-top:clamp(16px,1.6vw,22px);border-top:1px solid var(--u-line-dark);min-height:3.4em}
.sec-d2__cap .sx-meta{color:var(--u-blue-strong)}
.sec-d2__tx{font-size:clamp(1rem,1.3vw,1.25rem);line-height:1.5;color:var(--u-ink)}
.sec-d2__cap.is-swap>*{animation:secSwap .5s var(--ease) both}

/* ---------- E · Ficha técnica (tabla sobre azul de marca) ---------- */
.sec-e2__acc{color:var(--u-blue);font-style:italic}
.sec-e2__tb{border-top:1px solid rgba(255,255,255,.28)}
.sec-e2__tr{display:grid;grid-template-columns:3.2rem minmax(0,3fr) minmax(0,4fr) minmax(0,4fr);gap:var(--sx-gap);align-items:center;padding:clamp(12px,1.3vw,18px) 10px;border-bottom:1px solid rgba(255,255,255,.18);transition:background .35s}
.sec-e2__tr:not(.sec-e2__th):hover{background:rgba(255,255,255,.07)}
.sec-e2__th{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);padding-block:12px}
.sec-e2__tr .sx-meta{color:var(--u-blue)}
.sec-e2__n{font-family:var(--f-head);font-weight:var(--w-display);font-size:clamp(1.25rem,1.9vw,1.8rem);letter-spacing:-.035em;line-height:1.05}
.sec-e2__tr p{color:rgba(255,255,255,.8);font-size:.95rem;line-height:1.5}
.sec-e2__tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sec-e2__tags li{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;padding:5px 9px;border:1px solid rgba(153,196,228,.5);border-radius:999px;color:#fff}
@media (max-width:900px){
  .sec-e2__th{display:none}
  .sec-e2__tr{grid-template-columns:2.4rem minmax(0,1fr);row-gap:8px;padding-inline:0}
  .sec-e2__tr>.sx-meta{grid-row:1/4;align-self:start;padding-top:.5em}
}

/* ---------- F · Iniciales (rejilla 4×2 a filete, inicial gigante en contorno) ---------- */
.sec-f2__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.16);border-left:1px solid rgba(255,255,255,.16)}
.sec-f2__c{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:clamp(220px,20vw,300px);padding:clamp(18px,1.8vw,26px);border-right:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);outline:0;transition:background .5s var(--ease)}
.sec-f2__l{position:absolute;top:-.12em;right:.06em;font-family:var(--f-head);font-weight:var(--w-display);font-size:clamp(7rem,13vw,13rem);line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px rgba(153,196,228,.35);transition:color .5s var(--ease),-webkit-text-stroke-color .5s,transform .7s var(--ease);pointer-events:none}
.sec-f2__c .sx-meta{color:var(--u-blue);position:relative}
.sec-f2__n{position:relative;font-family:var(--f-head);font-weight:var(--w-display);font-size:clamp(1.3rem,1.8vw,1.75rem);letter-spacing:-.035em;line-height:1.05}
.sec-f2__c p{position:relative;color:var(--u-muted);font-size:.93rem;line-height:1.5;max-height:0;opacity:0;transition:max-height .6s var(--ease),opacity .4s}
.sec-f2__c:hover,.sec-f2__c:focus-visible{background:var(--u-navy)}
.sec-f2__c:hover .sec-f2__l,.sec-f2__c:focus-visible .sec-f2__l{color:var(--u-blue);-webkit-text-stroke-color:var(--u-blue);transform:translateY(-.05em)}
.sec-f2__c:hover p,.sec-f2__c:focus-visible p{max-height:6em;opacity:1}
.sec-f2__c:focus-visible{box-shadow:inset 0 0 0 2px var(--u-blue)}
@media (hover:none),(prefers-reduced-motion:reduce){.sec-f2__c p{max-height:none;opacity:1}}
@media (max-width:900px){.sec-f2__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.sec-f2__c{min-height:180px}.sec-f2__l{font-size:6.5rem}}
@media (prefers-reduced-motion:reduce){.sec-b2__cap.is-swap>*,.sec-d2__cap.is-swap>*{animation:none}}