/* ============================================================================
   BLOQUES — Shanghai Summit Industrial
   Todo consume tokens.css. Ley de Composición (07): sin align-items:end entre columnas
   dispares, sin max-width:none en el hero, columnas de texto acotadas en ch, imágenes con
   aspect-ratio + object-fit + height:auto.
   ============================================================================ */
@import url('fonts.css');

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
table{border-collapse:collapse;width:100%}

html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);font-size:var(--t-md);line-height:1.62;
  color:var(--ink);background:var(--surface);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.018em;color:var(--ink)}
h1{font-size:var(--t-h1);line-height:1.09}
h2{font-size:var(--t-h2);line-height:1.13;text-wrap:balance}
h1,h3{text-wrap:balance}
h3{font-size:var(--t-h3);line-height:1.22}
h4{font-size:var(--t-h4);line-height:1.3}
p{max-width:64ch}
strong{font-weight:700}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius)}
[hidden]{display:none !important}
::selection{background:var(--brand-4);color:var(--brand-1)}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.container--narrow{max-width:1020px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--s4);top:-3rem;z-index:200;background:var(--brand-4);color:var(--brand-1);
  padding:.6rem 1rem;font-family:var(--font-mono);font-size:var(--t-xs);transition:top var(--d2) var(--ease-out)}
.skip:focus{top:.6rem}

/* ---------------------------------------------------------------- firma: etiqueta de carga */
.tag{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:500;
  letter-spacing:var(--tr-mono);text-transform:uppercase;
  color:var(--accent-deep);background:var(--surface-2);
  border:1px solid var(--line);padding:.32em .7em .3em;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%);
}
.tag b{font-weight:600;color:var(--ink)}
.tag--dark{color:var(--brand-5);background:rgba(198,161,91,.10);border-color:rgba(198,161,91,.35)}
.tag--dark b{color:var(--on-dark)}
.tag--plain{background:transparent;border-color:var(--line)}
.tag--solid{background:var(--brand-4);border-color:var(--brand-4);color:var(--brand-1)}
.tag--solid b{color:var(--brand-1)}

.eyebrow{
  display:flex;align-items:center;gap:.7em;
  font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:500;
  letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--accent-deep);margin-bottom:var(--s3);
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--accent);flex:none}
.on-dark .eyebrow,.sec--dark .eyebrow,.subhero .eyebrow{color:var(--brand-5)}  /* AA sobre midnight */
.idx{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);color:var(--ink-mute)}
.on-dark .idx{color:var(--on-dark-mute)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-display);font-weight:700;font-size:var(--t-sm);
  padding:.82rem 1.45rem;border-radius:var(--radius);border:1px solid transparent;
  transition:background var(--d2) var(--ease-out),color var(--d2) var(--ease-out),
             border-color var(--d2) var(--ease-out),transform var(--d1) var(--ease-out);
}
.btn:active{transform:scale(.975)}
.btn--primary{background:var(--brand-4);color:var(--brand-1);border-color:var(--brand-4)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost-dark{background:transparent;color:var(--on-dark);border-color:var(--line-dark)}
.btn--block{width:100%}
@media (hover:hover){
  .btn--primary:hover{background:var(--brand-5);border-color:var(--brand-5)}
  .btn--ghost:hover{border-color:var(--ink);background:var(--surface-2)}
  .btn--ghost-dark:hover{border-color:var(--brand-5);color:var(--brand-5)}
}
/* enlace de acción con regla (el CTA del header y de las tarjetas) */
.alink{
  display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-mono);
  font-size:var(--fs-mono);letter-spacing:var(--tr-mono);text-transform:uppercase;font-weight:600;
  color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:2px;
  transition:color var(--d2) var(--ease-out),gap var(--d2) var(--ease-out);
}
.alink .ar{transition:transform var(--d2) var(--ease-out)}
.on-dark .alink,.sec--dark .alink{color:var(--on-dark)}
@media (hover:hover){ .alink:hover{color:var(--accent-deep);gap:.75em} .on-dark .alink:hover,.sec--dark .alink:hover{color:var(--brand-5)} }

/* ---------------------------------------------------------------- secciones */
.sec{padding-block:var(--sec);position:relative}
.sec--tight{padding-block:var(--sec-tight)}
.sec--ivory{background:var(--surface-2)}
.sec--dark{background:var(--brand-1);color:var(--on-dark)}
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4{color:var(--on-dark)}
.sec--dark p{color:var(--on-dark-soft)}
.sec--rule{border-top:var(--rule)}
.on-dark{color:var(--on-dark)}
.shead{max-width:56ch;margin-bottom:var(--s7)}
.shead p{color:var(--ink-soft);margin-top:var(--s3);font-size:var(--t-lg)}
.sec--dark .shead p{color:var(--on-dark-soft)}
.shead--split{display:grid;gap:var(--s5);max-width:none;align-items:start}
@media (min-width:900px){ .shead--split{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:var(--s7)} .shead--split h2{max-width:20ch} .shead--split p{margin-top:.35rem} }

/* ---------------------------------------------------------------- header 2026 (base: 17 asimétrico) */
/* Todo el chrome en Nunito: navegación, idioma, lista, buscador, cajón y paneles. Radio del sitio (2px),
   nada de píldoras. La asimetría del 17: la losa de acero que sale del borde izquierdo detrás de la marca. */
.hdr{position:sticky;top:0;z-index:100;background:var(--brand-1);border-bottom:1px solid var(--line-dark);
  font-family:var(--font-body);transition:box-shadow var(--d3) var(--ease-out)}
.hdr.is-stuck{box-shadow:0 12px 28px -20px rgba(0,0,0,.9)}
.hdr__bar{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.4rem);height:var(--hdr-h);
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.hdr button{font-family:inherit}
.brand{position:relative;display:flex;align-items:center;gap:.7rem;flex:none;color:var(--on-dark);height:100%;padding-right:clamp(.9rem,1.6vw,1.6rem)}
.brand::before{content:"";position:absolute;top:0;bottom:-1px;right:0;left:-100vw;background:var(--brand-2);z-index:-1}
.brand::after{content:"";position:absolute;top:0;bottom:-1px;right:0;width:2px;background:var(--brand-4)}
.brand__mark{width:34px;height:34px;flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand__word{width:152px;height:auto;display:block}
.brand__zh{font-size:.72rem;letter-spacing:.08em;color:var(--on-dark-mute);white-space:nowrap}
.hdr{overflow-x:clip}

/* navegación principal */
.nav{display:none;height:100%}
.nav__ul{display:flex;align-items:stretch;height:100%;gap:clamp(.25rem,1vw,.9rem);margin:0;padding:0;list-style:none}
.nav__i{position:static;display:flex}
.nav__a{position:relative;display:inline-flex;align-items:center;gap:.4rem;padding:0 .55rem;height:100%;
  font-size:.95rem;font-weight:600;letter-spacing:.005em;color:var(--on-dark);white-space:nowrap;background:none;border:0;cursor:pointer;
  transition:color var(--d2) var(--ease-out)}
.nav__a::after{content:"";position:absolute;left:.55rem;right:.55rem;bottom:-1px;height:2px;background:var(--brand-4);
  transform:scaleX(0);transform-origin:left;transition:transform var(--d2) var(--ease-out)}
.nav__a.is-on{color:var(--brand-5)}
.nav__a.is-on::after{transform:scaleX(1)}
.nav__btn[aria-expanded="true"]{color:var(--brand-5)}
.nav__btn[aria-expanded="true"]::after{transform:scaleX(0)}
.nav__btn .chev{transition:transform var(--d2) var(--ease-out);opacity:.75}
.nav__btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav__a:focus-visible{outline:2px solid var(--brand-4);outline-offset:-6px}
@media (hover:hover){ .nav__a:hover{color:var(--brand-5)} .nav__a:hover::after{transform:scaleX(1)} }

/* mega-menú de productos */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--brand-1);border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
.mega:not([hidden]){animation:hdrIn .22s var(--ease-out)}
.mega__in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,3fr);gap:clamp(1.5rem,3vw,3rem);
  max-width:var(--maxw);margin-inline:auto;padding:clamp(1.5rem,2.4vw,2.2rem) var(--pad) clamp(1.75rem,2.6vw,2.4rem)}
.mega__eb{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-4);margin:0}
.mega__h{font-size:1.45rem;font-weight:800;line-height:1.15;color:var(--on-dark);margin:.6rem 0 0;max-width:14ch;text-wrap:balance}
.mega__p{font-size:.92rem;color:var(--on-dark-soft);margin:.7rem 0 0;max-width:30ch}
.mega__links{display:grid;gap:.55rem;margin:1.4rem 0 0}
.mega__links a{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.92rem;color:var(--brand-5)}
.mega__links a svg{transition:transform var(--d2) var(--ease-out)}
@media (hover:hover){ .mega__links a:hover svg{transform:translateX(3px)} }
.mega__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
.mcard{display:grid;grid-template-columns:88px minmax(0,1fr);gap:.9rem;align-items:center;padding:.8rem;background:var(--brand-1);
  transition:background var(--d2) var(--ease-out)}
.mcard__ph img{width:88px;aspect-ratio:4/3;height:auto;object-fit:cover;display:block;background:var(--brand-2)}
.mcard__b{display:grid;gap:.12rem;min-width:0}
.mcard__n{font-size:.75rem;font-weight:700;color:var(--brand-4);font-variant-numeric:tabular-nums}
.mcard__t{font-size:.98rem;font-weight:700;color:var(--on-dark);line-height:1.2}
.mcard__c{font-size:.8rem;color:var(--on-dark-soft);font-variant-numeric:tabular-nums}
.mcard:focus-visible{outline:2px solid var(--brand-4);outline-offset:-2px}
@media (hover:hover){ .mcard:hover{background:var(--brand-2)} .mcard:hover .mcard__t{color:var(--brand-5)} }

/* desplegable de empresa */
.nav__i--drop{position:relative}
.drop{position:absolute;top:100%;left:0;min-width:21rem;display:grid;background:var(--brand-1);border:1px solid var(--line-dark);
  box-shadow:0 24px 48px -24px rgba(0,0,0,.85)}
.drop:not([hidden]){animation:hdrIn .2s var(--ease-out)}
.drop__i{display:grid;gap:.15rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--line-dark-soft);transition:background var(--d2) var(--ease-out)}
.drop__i:last-child{border-bottom:0}
.drop__t{font-weight:700;font-size:.95rem;color:var(--on-dark)}
.drop__d{font-size:.82rem;color:var(--on-dark-mute);line-height:1.4}
.drop__i[aria-current="page"] .drop__t{color:var(--brand-5)}
.drop__i:focus-visible{outline:2px solid var(--brand-4);outline-offset:-2px}
@media (hover:hover){ .drop__i:hover{background:var(--brand-2)} }

/* utilidades: buscar, idioma, lista */
.utils{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.util{flex:none;display:inline-flex;align-items:center;gap:.5rem;height:40px;padding:0 .8rem;border:1px solid var(--line-dark);
  border-radius:var(--radius);background:transparent;color:var(--on-dark);font-size:.9rem;font-weight:600;white-space:nowrap;cursor:pointer;
  transition:border-color var(--d2) var(--ease-out),background var(--d2) var(--ease-out),transform 120ms var(--ease-out)}
.util svg{flex:none}
.util:active{transform:scale(.97)}
.util:focus-visible{outline:2px solid var(--brand-4);outline-offset:2px}
@media (hover:hover){ .util:hover{border-color:var(--brand-4)} }
.util kbd{font-family:inherit;font-size:.75rem;font-weight:700;line-height:1;padding:.2rem .4rem;border:1px solid var(--line-dark);
  border-radius:var(--radius);color:var(--on-dark-mute)}
.util--search{color:var(--on-dark-soft)}
.util--lang .chev{opacity:.7;transition:transform var(--d2) var(--ease-out)}
.util--lang[aria-expanded="true"] .chev{transform:rotate(180deg)}
.util--list{background:var(--brand-4);border-color:var(--brand-4);color:var(--brand-1);font-weight:700}
@media (hover:hover){ .util--list:hover{background:var(--brand-5);border-color:var(--brand-5)} }
.util__n{min-width:1.35rem;height:1.35rem;display:inline-grid;place-items:center;padding:0 .3rem;border-radius:var(--radius);
  background:var(--brand-1);color:var(--brand-5);font-size:.75rem;font-variant-numeric:tabular-nums}
.langsw,.lwrap{position:relative}
.langm{position:absolute;right:0;top:calc(100% + 10px);min-width:13rem;display:grid;padding:.35rem;background:var(--brand-1);
  border:1px solid var(--line-dark);box-shadow:0 24px 48px -24px rgba(0,0,0,.85)}
.langm:not([hidden]){animation:hdrIn .18s var(--ease-out)}
.langm__i{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem .75rem;font-size:.95rem;font-weight:600;
  color:var(--on-dark-soft);border-radius:var(--radius);transition:background var(--d2) var(--ease-out),color var(--d2) var(--ease-out)}
.langm__c{font-size:.75rem;font-weight:700;color:var(--on-dark-mute)}
.langm__i.is-on{color:var(--brand-5)}
.langm__i.is-on .langm__c{color:var(--brand-4)}
.langm__i:focus-visible{outline:2px solid var(--brand-4);outline-offset:-2px}
@media (hover:hover){ .langm__i:hover{background:var(--brand-2);color:var(--on-dark)} }
.lpop{position:absolute;right:0;top:calc(100% + 10px);width:min(24rem,calc(100vw - 2rem));padding:1rem;background:var(--brand-1);
  border:1px solid var(--line-dark);box-shadow:0 24px 48px -24px rgba(0,0,0,.85);color:var(--on-dark)}
.lpop:not([hidden]){animation:hdrIn .18s var(--ease-out)}
.lpop__h{font-weight:800;font-size:1rem;margin:0 0 .6rem;display:flex;align-items:center;gap:.5rem}
.lpop__h b{font-size:.8rem;color:var(--brand-5);font-variant-numeric:tabular-nums}
.lpop__empty{font-size:.88rem;color:var(--on-dark-soft);margin:0 0 .9rem;max-width:34ch}
.lpop__ul{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:1px;background:var(--line-dark-soft);max-height:15rem;overflow:auto}
.lpop__ul:empty{display:none}
.lpop__ul li{display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:var(--brand-1);padding:.45rem 0 .45rem .1rem;font-size:.88rem}
.lpop__ul button{flex:none;width:32px;height:32px;display:grid;place-items:center;color:var(--on-dark-mute);background:none;border:1px solid transparent;
  border-radius:var(--radius);font-size:1.05rem;cursor:pointer}
.lpop__ul button:focus-visible{outline:2px solid var(--brand-4)}
@media (hover:hover){ .lpop__ul button:hover{border-color:var(--line-dark);color:var(--on-dark)} }
.lpop__act{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem}
.lpop__lnk{display:inline-flex;align-items:center;gap:.35rem;font-size:.88rem;font-weight:700;color:var(--brand-5)}

/* hamburguesa */
.burger{display:grid;place-content:center;gap:5px;width:44px;height:44px;flex:none;background:transparent;cursor:pointer;
  border:1px solid var(--line-dark);border-radius:var(--radius);grid-auto-rows:2px}
.burger span{display:block;width:19px;height:2px;background:var(--on-dark);
  transition:transform var(--d2) var(--ease-out),opacity var(--d1) var(--ease-out)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.burger:focus-visible{outline:2px solid var(--brand-4);outline-offset:2px}

/* móvil y tablet: marca + buscar + lista + menú. Idiomas y secciones viven en el cajón. */
.util--lang,.util--search .util__t,.util--search kbd,.util--list .util__t{display:none}
.util--search{width:44px;height:44px;padding:0;justify-content:center}
.util--list{height:44px;padding:0 .7rem}
/* teléfonos (<480): la barra completa mide ~450 px; acá la marca baja a 28 px, el contador de la lista va como cifra
   junto al ícono y los tres botones siguen a 44 px. Medido: 360 → borde derecho a 342 px (gutter simétrico). */
@media (max-width:479px){
  .hdr__bar{gap:.5rem} .utils{gap:.3rem}
  .util--list{padding:0 .5rem}
  .util__n{min-width:0;height:auto;padding:0;background:none;color:inherit;font-size:.85rem}
  .brand{gap:.45rem;padding-right:.5rem} .brand__mark{width:28px;height:28px} .brand__word{width:118px} .brand__zh{font-size:.66rem}
}
@media (min-width:1180px){
  .nav{display:block}
  .burger{display:none}
  .util--lang{display:inline-flex}
  .util--search{width:auto;height:40px;padding:0 .8rem}
  .util--list{height:40px;padding:0 .8rem}
}
@media (min-width:1360px){ .util--search .util__t,.util--search kbd,.util--list .util__t{display:inline} }

/* cajón móvil */
.drawer{position:fixed;inset:var(--hdr-h) 0 0 0;z-index:99;background:var(--brand-1);font-family:var(--font-body);
  transform:translateY(-8px);opacity:0;visibility:hidden;overflow-y:auto;overscroll-behavior:contain;
  transition:opacity var(--d3) var(--ease-out),transform var(--d3) var(--ease-out),visibility var(--d3)}
.drawer.is-open{opacity:1;transform:translateY(0);visibility:visible}
.drawer__in{max-width:40rem;margin-inline:auto;padding:1.1rem var(--pad) 2rem;min-height:100%;display:flex;flex-direction:column}
.dsearch{display:flex;align-items:center;gap:.7rem;width:100%;height:50px;padding:0 1rem;border:1px solid var(--line-dark);
  border-radius:var(--radius);background:var(--brand-2);color:var(--on-dark-mute);font-size:.95rem;text-align:left;cursor:pointer}
.dsearch span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dnav{list-style:none;margin:.6rem 0 0;padding:0}
.dnav > li{border-bottom:1px solid var(--line-dark-soft)}
.dacc{display:flex;align-items:stretch}
.dnav__a{flex:1;display:flex;align-items:baseline;gap:.75rem;padding:1.05rem 0;font-size:1.45rem;font-weight:800;color:var(--on-dark);
  letter-spacing:-.01em;background:none;border:0;text-align:left;cursor:pointer}
.dacc__btn{flex:none;width:48px;display:grid;place-items:center;background:none;border:0;border-left:1px solid var(--line-dark-soft);color:var(--on-dark-soft);cursor:pointer}
.dacc__btn .chev{width:14px;height:14px;transition:transform var(--d2) var(--ease-out)}
.dacc__btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.dacc__p{padding:0 0 1rem}
.dfams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.dfam{display:flex;align-items:center;gap:.6rem;padding:.45rem;background:var(--brand-2);border:1px solid var(--line-dark-soft);min-width:0}
.dfam img{width:44px;height:44px;object-fit:cover;flex:none}
.dfam span{display:grid;min-width:0}
.dfam b{font-size:.86rem;line-height:1.2;color:var(--on-dark)}
.dfam small{font-size:.75rem;color:var(--on-dark-mute)}
.dsub{display:block;padding:.6rem 0;font-size:1.05rem;font-weight:700;color:var(--on-dark-soft)}
.dlangs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:1.4rem;border:1px solid var(--line-dark);border-radius:var(--radius)}
.dlang{display:grid;place-items:center;min-height:46px;font-size:.95rem;font-weight:700;color:var(--on-dark-soft);border-right:1px solid var(--line-dark)}
.dlang:last-child{border-right:0}
.dlang.is-on{background:var(--brand-2);color:var(--brand-5);box-shadow:inset 0 -2px 0 var(--brand-4)}
.drawer__cta{margin-top:auto;padding-top:1.6rem;display:grid;gap:.8rem;justify-items:center}
.dmail{font-size:.9rem;font-weight:600;color:var(--on-dark-soft)}
.dnav__a:focus-visible,.dacc__btn:focus-visible,.dfam:focus-visible,.dsub:focus-visible,.dlang:focus-visible,.dsearch:focus-visible{outline:2px solid var(--brand-4);outline-offset:2px}
@media (min-width:1180px){ .drawer{display:none} }

/* paleta de búsqueda */
.pal{position:fixed;inset:0;z-index:200;display:flex;justify-content:center;align-items:flex-start;padding:12vh 1rem 1rem;
  background:rgba(11,18,32,.62);backdrop-filter:blur(3px);font-family:var(--font-body)}
.pal[hidden]{display:none}
.pal__box{width:min(42rem,100%);background:var(--brand-1);border:1px solid var(--line-dark);box-shadow:0 40px 80px -30px rgba(0,0,0,.9);
  animation:hdrIn .2s var(--ease-out)}
.pal__bar{display:flex;align-items:center;gap:.75rem;padding:0 .9rem 0 1.1rem;border-bottom:1px solid var(--line-dark);color:var(--on-dark-mute)}
.pal__bar input{flex:1;min-width:0;height:60px;background:transparent;border:0;color:var(--on-dark);font:inherit;font-size:1.08rem}
.pal__bar input::placeholder{color:var(--on-dark-mute)}
.pal__bar input:focus{outline:none}
.pal__bar input::-webkit-search-cancel-button,.pal__bar input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.pal__x{flex:none;font-size:.75rem;font-weight:700;padding:.3rem .5rem;border:1px solid var(--line-dark);border-radius:var(--radius);
  background:none;color:var(--on-dark-mute);cursor:pointer}
.pal__res{max-height:min(26rem,58vh);overflow:auto;padding:.4rem}
.pal__lbl{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-4);margin:.5rem .6rem .4rem}
.pal__i{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.7rem .7rem;border-radius:var(--radius);color:var(--on-dark)}
.pal__t{font-weight:700;font-size:.95rem;line-height:1.3}
.pal__s{font-size:.8rem;color:var(--on-dark-mute);white-space:nowrap}
.pal__i[aria-selected="true"],.pal__i:focus-visible{background:var(--brand-2);outline:none;box-shadow:inset 2px 0 0 var(--brand-4)}
@media (hover:hover){ .pal__i:hover{background:var(--brand-2)} }
.pal__none{margin:0;padding:.9rem 1.1rem}
.pal__none a{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--brand-5)}
.pal__hint{margin:0;padding:.65rem 1.1rem;border-top:1px solid var(--line-dark);font-size:.8rem;color:var(--on-dark-mute);display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.pal__hint span{display:inline-flex;align-items:center;gap:.3rem}
.pal__hint kbd{font-family:inherit;font-size:.72rem;font-weight:700;padding:.1rem .35rem;border:1px solid var(--line-dark);border-radius:var(--radius);color:var(--on-dark-soft)}
@media (max-width:640px){ .pal{padding-top:1rem} .pal__s{display:none} }
.pal p,.lpop__h,.lpop__act{max-width:none}
@keyframes hdrIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}


/* ---------------------------------------------------------------- hero: índice técnico */
.hero{background:var(--brand-1);color:var(--on-dark);padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2.5rem,6vw,4.75rem);
  position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,transparent 40%,rgba(23,35,56,.85) 100%)}
.hero > *{position:relative;z-index:1}
.hero__grid{display:grid;gap:var(--s7);align-items:start}
@media (min-width:1000px){ .hero__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(2rem,4vw,4rem)} }
.hero__copy{max-width:36rem}
.hero h1,.hero .hero__h{color:var(--on-dark);max-width:17ch;font-size:var(--t-h1);line-height:1.08}
.hero__legal{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand-5);margin-bottom:var(--s4)}
.hero__sub{color:var(--on-dark-soft);max-width:48ch;margin-top:var(--s4);font-size:var(--t-lg)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.hero__meta{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--line-dark)}
.hero__meta div{min-width:7rem}
.hero__meta b{display:block;font-family:var(--font-mono);font-size:1.5rem;font-weight:600;color:var(--brand-5);
  font-variant-numeric:tabular-nums;line-height:1.1}
.hero__meta span{font-size:.8rem;color:var(--on-dark-mute)}

/* hero con video: la foto es fondo, el índice sigue siendo la pieza firma.
   El velo es direccional (más denso bajo el texto) y el póster es el LCP. */
.hero > .hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--brand-1)}
.hero__poster,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.78) contrast(1.04)}
.hero__video{opacity:0;transition:opacity .7s var(--ease-out)}
.hero__video.is-on{opacity:1}
.hero--video::after{background:
  linear-gradient(90deg,rgba(11,18,32,.94) 0%,rgba(11,18,32,.86) 40%,rgba(11,18,32,.6) 100%),
  linear-gradient(0deg,rgba(11,18,32,.75) 0%,rgba(11,18,32,0) 38%)}
@media (max-width:999px){ .hero--video::after{background:rgba(11,18,32,.86)} }
.hero > .hero__toggle{position:absolute;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,2.5vw,1.6rem);z-index:2;
  width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line-dark);
  background:rgba(11,18,32,.6);color:var(--on-dark);transition:border-color var(--d2) var(--ease-out),transform 120ms var(--ease-out)}
.hero__toggle span{width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.hero__toggle.is-paused span{width:0;height:0;border:0;border-left:11px solid currentColor;
  border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.hero__toggle:active{transform:scale(.95)}
.hero__toggle:focus-visible{outline:2px solid var(--brand-4);outline-offset:3px}
@media (hover:hover){ .hero__toggle:hover{border-color:var(--brand-4)} }

/* índice de familias (la pieza firma del hero) */
.idxbox{border:1px solid var(--line-dark);background:rgba(23,35,56,.55);backdrop-filter:blur(2px)}
.idxbox__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:.85rem 1rem;border-bottom:1px solid var(--line-dark)}
.idxbox__top h2{font-size:.82rem;font-family:var(--font-mono);font-weight:500;letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--on-dark-mute)}
.srch{display:flex;border-bottom:1px solid var(--line-dark)}
.srch input{flex:1;min-width:0;background:transparent;border:0;padding:.95rem 1rem;color:var(--on-dark);font-size:.92rem}
.srch input::placeholder{color:var(--on-dark-mute)}
.srch input:focus{outline:none;background:rgba(245,243,238,.05)}
.srch button{flex:none;padding:0 1.1rem;background:var(--brand-4);color:var(--brand-1);
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);text-transform:uppercase;font-weight:600}
.srch button:active{transform:scale(.98)}
.idxrow{display:grid;grid-template-columns:auto 56px minmax(0,1fr) auto;align-items:center;gap:.9rem;
  padding:.72rem 1rem;border-bottom:1px solid var(--line-dark-soft);
  transition:background var(--d2) var(--ease-out)}
.idxrow:last-child{border-bottom:0}
.idxrow__n{font-family:var(--font-mono);font-size:.7rem;color:var(--brand-4);letter-spacing:.08em}
.idxrow__img{width:56px;aspect-ratio:1/1;height:auto;object-fit:cover;background:var(--brand-2);border:1px solid var(--line-dark-soft)}
.idxrow__b{min-width:0}
.idxrow__t{font-weight:700;font-size:.95rem;color:var(--on-dark);display:block;line-height:1.25}
.idxrow__r{font-family:var(--font-mono);font-size:.7rem;color:var(--on-dark-mute);display:block;margin-top:.15rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idxrow__c{font-family:var(--font-mono);font-size:.7rem;color:var(--on-dark-mute);white-space:nowrap}
@media (hover:hover){ .idxrow:hover{background:rgba(245,243,238,.06)} .idxrow:hover .idxrow__t{color:var(--brand-5)} }
@media (max-width:520px){ .idxrow{grid-template-columns:auto 44px minmax(0,1fr);gap:.7rem} .idxrow__c{display:none} .idxrow__img{width:44px} }

/* ---------------------------------------------------------------- subhero de interiores */
.subhero{background:var(--brand-1);color:var(--on-dark);padding-block:clamp(2.2rem,5vw,3.6rem) clamp(2.2rem,5vw,3.6rem)}
.subhero__grid{display:grid;gap:var(--s5);align-items:start}
@media (min-width:920px){ .subhero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s7)} }
.subhero h1{color:var(--on-dark);max-width:20ch}
.subhero p{color:var(--on-dark-soft);max-width:54ch;margin-top:var(--s4)}
.subhero__side{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
@media (min-width:920px){ .subhero__side{align-items:flex-end;padding-top:2.2rem} }
/* etiqueta de carga: la pieza del concepto "etiquetado para la carga", con su ojal */
.plate{position:relative;width:min(100%,21rem);border:1px solid rgba(198,161,91,.4);
  background:rgba(23,35,56,.6);font-family:var(--font-mono);padding:.2rem 0 .35rem;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.plate::before{content:"";position:absolute;top:.8rem;right:1.1rem;width:9px;height:9px;border-radius:50%;
  border:1px solid rgba(198,161,91,.55)}
.plate .plate__hd{display:flex;gap:.9rem;align-items:baseline;margin:0;max-width:none;padding:.65rem 2.6rem .65rem 1rem;
  border-bottom:1px dashed rgba(198,161,91,.3);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-mute)}
.plate__hd span:first-child{color:var(--brand-4)}
.plate ul{list-style:none;margin:0;padding:0}
.plate li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.55rem 1rem;
  border-bottom:1px solid var(--line-dark-soft)}
.plate li:last-child{border-bottom:0}
.plate li b{font-size:1.35rem;font-weight:600;color:var(--brand-5);font-variant-numeric:tabular-nums;order:2}
.plate li span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-soft)}
.plate li.plate__txt span{text-transform:none;letter-spacing:.02em;font-size:.8rem;color:var(--on-dark)}
/* del hero oscuro al contenido no hace falta la sección entera de aire */
.subhero + .sec{padding-top:clamp(2.75rem,5vw,4.25rem)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.06em;color:var(--on-dark-mute);margin-bottom:var(--s4)}
.crumbs a{color:var(--on-dark-mute);border-bottom:1px solid transparent}
@media (hover:hover){ .crumbs a:hover{color:var(--brand-5);border-bottom-color:var(--brand-4)} }

/* ---------------------------------------------------------------- índice de familias (lista técnica) */
.famlist{border-top:1px solid var(--line)}
.famrow{display:grid;grid-template-columns:auto 96px minmax(0,1fr);gap:var(--s4);align-items:center;
  padding:var(--s4) 0;border-bottom:1px solid var(--line);transition:background var(--d2) var(--ease-out)}
.famrow__n{font-family:var(--font-mono);font-size:.72rem;color:var(--accent-deep);letter-spacing:.08em;align-self:start;padding-top:.3rem}
.famrow__img{width:96px;aspect-ratio:4/3;height:auto;object-fit:cover;background:var(--surface-3);border:1px solid var(--line-soft)}
.famrow__b{display:grid;gap:.35rem}
.famrow h3{font-size:var(--t-h4)}
.famrow p{font-size:.92rem;color:var(--ink-soft);max-width:70ch}
.famrow__meta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;margin-top:.2rem}
@media (hover:hover){ .famrow:hover{background:var(--surface)} .famrow:hover h3{color:var(--accent-deep)} }
@media (min-width:860px){
  .famrow{grid-template-columns:auto 132px minmax(0,1.35fr) minmax(0,.75fr);gap:var(--s5)}
  .famrow__img{width:132px}
  .famrow__side{justify-self:end;text-align:right;display:grid;gap:.5rem;justify-items:end}
}
/* móvil: el lateral (referencias + enlace) baja a su propia fila bajo el texto, nunca a la columna del número */
@media (max-width:859px){
  .famrow__side{grid-column:2 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}
}
@media (max-width:480px){ .famrow{grid-template-columns:auto 72px minmax(0,1fr);gap:var(--s3)} .famrow__img{width:72px} }

/* ---------------------------------------------------------------- grilla de referencias (cards) */
.pgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:560px){ .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:900px){ .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1180px){ .pgrid--4{grid-template-columns:repeat(4,minmax(0,1fr))} }
.pcard{background:var(--surface);display:flex;flex-direction:column;
  transition:background var(--d2) var(--ease-out)}
.pcard>a{display:flex;flex-direction:column;flex:1}
.pcard__media{position:relative;background:var(--surface-2)}
.pcard__img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;display:block}
.pcard__n{position:absolute;left:0;top:0;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;
  background:var(--brand-1);color:var(--brand-5);padding:.3rem .55rem}
.pcard__b{padding:var(--s4);display:flex;flex-direction:column;gap:.5rem;flex:1}
.pcard__group{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.pcard h3{font-size:.98rem;line-height:1.28;font-weight:700}
.pcard__specs{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:auto;padding-top:.5rem}
.pcard__specs span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;color:var(--ink-soft);
  border:1px solid var(--line);padding:.2rem .45rem}
.pcard__foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.65rem var(--s4);border-top:1px solid var(--line-soft)}
@media (hover:hover){ .pcard:hover{background:var(--surface-2)} .pcard:hover h3{color:var(--accent-deep)} }

/* ---------------------------------------------------------------- banda de etiquetas (firma) */
.tagband{display:grid;gap:1px;background:var(--line-dark);border-block:1px solid var(--line-dark);margin-top:var(--s7)}
@media (min-width:700px){ .tagband{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .tagband{grid-template-columns:repeat(4,minmax(0,1fr))} }
.tagband__i{background:var(--brand-1);padding:var(--s5) var(--s4);display:grid;gap:.6rem;align-content:start}
.tagband__i h3{font-size:1rem;color:var(--on-dark)}
.tagband__i p{font-size:.88rem;color:var(--on-dark-soft);max-width:38ch}

/* ---------------------------------------------------------------- listas editoriales (razones, pasos) */
.rlist{display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:860px){ .rlist{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s7)} }
.rlist li{border-bottom:1px solid var(--line);padding-block:var(--s5);display:grid;
  grid-template-columns:2.4rem minmax(0,1fr);gap:var(--s3)}
.rlist__n{font-family:var(--font-mono);font-size:.72rem;color:var(--accent-deep);letter-spacing:.08em;padding-top:.28rem}
.rlist h3{font-size:var(--t-h4);margin-bottom:.35rem}
.rlist p{font-size:.94rem;color:var(--ink-soft);max-width:52ch}
.sec--dark .rlist{border-color:var(--line-dark)}
.sec--dark .rlist li{border-color:var(--line-dark)}
.sec--dark .rlist p{color:var(--on-dark-soft)}
.sec--dark .rlist__n{color:var(--brand-5)}

.steps{display:grid;gap:var(--s5);counter-reset:st}
@media (min-width:760px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s7)} }
@media (min-width:1100px){ .steps--3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.steps li{display:grid;gap:.5rem;padding-top:var(--s4);border-top:2px solid var(--brand-4)}
.steps li h3{font-size:var(--t-h4)}
.steps li p{font-size:.93rem;color:var(--ink-soft);max-width:48ch}
.steps__n{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:var(--accent-deep)}
.sec--dark .steps li p{color:var(--on-dark-soft)}
.sec--dark .steps__n{color:var(--brand-5)}

/* ---------------------------------------------------------------- split editorial con cifras */
.split{display:grid;gap:var(--s6);align-items:start}
@media (min-width:900px){ .split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem)} }
.split__copy p+p{margin-top:var(--s4)}
.split__copy p{color:var(--ink-soft)}
.sec--dark .split__copy p{color:var(--on-dark-soft)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.stats div{background:var(--surface);padding:var(--s4)}
.sec--ivory .stats div{background:var(--surface-2)}
.stats b{display:block;font-family:var(--font-mono);font-size:clamp(1.7rem,1.1rem + 1.8vw,2.5rem);font-weight:600;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.05}
.stats span{display:block;font-size:.82rem;color:var(--ink-soft);margin-top:.3rem;max-width:18ch}

/* ---------------------------------------------------------------- figura con marco */
.fig{margin:0;border:1px solid var(--line);background:var(--surface-2)}
.fig img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;display:block}
.fig--wide img{aspect-ratio:16/9}
.fig--sq img{aspect-ratio:1/1}
.fig figcaption{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em;color:var(--ink-mute);
  padding:.55rem .7rem;border-top:1px solid var(--line-soft)}
.imgband{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:640px){ .imgband{grid-template-columns:repeat(3,minmax(0,1fr))} }
.imgband img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;display:block}

/* ---------------------------------------------------------------- tablas técnicas */
.tbl{width:100%;font-size:.88rem}
.tbl caption{text-align:left;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-mute);padding-bottom:.6rem}
.tbl th,.tbl td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
.tbl thead th{font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-mute);background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.tbl td.txt{font-family:var(--font-body);color:var(--ink-soft)}
.tbl tbody tr:nth-child(even) td{background:rgba(245,243,238,.45)}
/* position:relative: el rótulo .sr (absoluto) del encabezado escapaba del scroll y abría 36px de
   desborde horizontal en móvil */
.tblwrap{position:relative;overflow-x:auto;border:1px solid var(--line);background:var(--surface)}
.tblwrap .tbl th:first-child,.tblwrap .tbl td:first-child{padding-left:var(--s4)}
.dl{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:640px){ .dl{grid-template-columns:repeat(2,minmax(0,1fr))} }
.dl > div{background:var(--surface);padding:.85rem var(--s4)}
.dl dt{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.dl dd{margin:.25rem 0 0;font-size:.93rem}
.note{font-size:.82rem;color:var(--ink-mute);margin-top:var(--s3);max-width:62ch}

/* ---------------------------------------------------------------- catálogo: filtros + resultados */
.cat{display:grid;gap:var(--s6);align-items:start}
@media (min-width:1000px){ .cat{grid-template-columns:262px minmax(0,1fr);gap:var(--s7)} }
.filters{position:sticky;top:calc(var(--hdr-h) + 1rem);display:grid;gap:var(--s5);align-content:start}
@media (max-width:999px){ .filters{position:static} }
.filters h2{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--ink-mute);margin-bottom:.6rem}
.fgroup ul{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.fbtn{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;
  background:var(--surface);padding:.6rem .8rem;text-align:left;font-size:.88rem;
  transition:background var(--d2) var(--ease-out)}
.fbtn small{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-mute)}
.fbtn[aria-pressed="true"]{background:var(--brand-1);color:var(--on-dark)}
.fbtn[aria-pressed="true"] small{color:var(--brand-5)}
@media (hover:hover){ .fbtn:hover{background:var(--surface-2)} .fbtn[aria-pressed="true"]:hover{background:var(--brand-2)} }
.catbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);
  padding-bottom:var(--s4);border-bottom:1px solid var(--line);margin-bottom:var(--s5)}
.srch--light{border:1px solid var(--line);background:var(--surface);max-width:34rem;flex:1 1 18rem}
.srch--light input{color:var(--ink)}
.srch--light input::placeholder{color:var(--ink-mute)}
.srch--light input:focus{background:var(--surface-2)}
.count{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-mute);white-space:nowrap}
.empty{padding:var(--s7) 0;color:var(--ink-soft)}

/* ---------------------------------------------------------------- lista de cotización */
@media (hover:hover){ .listbtn:hover{border-color:var(--brand-4)} }
.addbtn{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep);border:1px solid var(--line);
  padding:.35rem .6rem;border-radius:var(--radius);transition:border-color var(--d2) var(--ease-out),background var(--d2) var(--ease-out),color var(--d2) var(--ease-out),transform 120ms var(--ease-out)}
.addbtn[aria-pressed="true"]{background:var(--brand-1);border-color:var(--brand-1);color:var(--brand-5)}
.addbtn:active{transform:scale(.97)}
@media (hover:hover){ .addbtn:hover{border-color:var(--accent);background:var(--surface-2)} }

/* ---------------------------------------------------------------- ficha de producto */
.pdetail{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);align-items:start}
.pdetail > *{min-width:0}
@media (min-width:920px){ .pdetail{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,4vw,3.5rem)} }
.pdetail__media{position:sticky;top:calc(var(--hdr-h) + 1.5rem)}
@media (max-width:919px){ .pdetail__media{position:static} }
.pdetail h1{font-size:clamp(1.5rem,1.15rem + 1.4vw,2.2rem);max-width:22ch}
.pdetail__lead{color:var(--ink-soft);margin-top:var(--s4);max-width:56ch}
.pdetail__blk{margin-top:var(--s6)}
.pdetail__blk h2{font-size:var(--t-h4);margin-bottom:var(--s3);font-family:var(--font-mono);font-weight:500;
  letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--ink-mute);font-size:.72rem}
.pdetail__cta{margin-top:var(--s6);padding:var(--s5);background:var(--brand-1);color:var(--on-dark)}
.pdetail__cta h2{color:var(--on-dark);font-size:var(--t-h4);font-family:var(--font-display);
  text-transform:none;letter-spacing:-.01em;font-weight:800}
.pdetail__cta p{color:var(--on-dark-soft);font-size:.92rem;margin:.5rem 0 var(--s4);max-width:50ch}
.rel{display:grid;gap:0;border-top:1px solid var(--line);margin-top:var(--s4)}
.rel a{border:1px solid var(--line);border-top:0}
@media (min-width:640px){ .rel{grid-template-columns:repeat(2,minmax(0,1fr))} .rel a:nth-child(2n){border-left:0} }
.rel a{background:var(--surface);padding:.75rem var(--s4);display:grid;gap:.2rem;transition:background var(--d2) var(--ease-out)}
.rel strong{font-size:.9rem;font-weight:700;line-height:1.3}
.rel small{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-mute)}
@media (hover:hover){ .rel a:hover{background:var(--surface-2)} }

/* ---------------------------------------------------------------- acordeón FAQ */
.faq{border-top:1px solid var(--line);max-width:80ch}
.sec--dark .faq{border-color:var(--line-dark)}
.faq details{border-bottom:1px solid var(--line)}
.sec--dark .faq details{border-color:var(--line-dark)}
.faq summary{display:flex;align-items:baseline;gap:.75rem;padding:var(--s4) 0;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:var(--t-h4);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq__q{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.faq summary::after{flex:none;display:inline-block;width:1em;height:1em;line-height:1;text-align:center}
.img-none{display:block;background:linear-gradient(135deg,var(--brand-2),var(--brand-1))}
.faq summary::after{content:"+";margin-left:auto;font-family:var(--font-mono);color:var(--accent-deep);
  transition:transform var(--d2) var(--ease-out);font-weight:400}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq__n{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-mute);flex:none}
.faq p{padding:0 0 var(--s4) 2.1rem;color:var(--ink-soft);font-size:.95rem}
.sec--dark .faq p{color:var(--on-dark-soft)}
.sec--dark .faq summary::after{color:var(--brand-5)}

/* ---------------------------------------------------------------- CTA final */
.ctapanel{display:grid;gap:var(--s5);align-items:center}
@media (min-width:860px){ .ctapanel{grid-template-columns:minmax(0,1.1fr) auto;gap:var(--s7)} }
.ctapanel h2{max-width:20ch}
.ctapanel p{color:var(--on-dark-soft);margin-top:var(--s3);max-width:52ch}
.ctapanel__act{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* ---------------------------------------------------------------- formulario */
.form{display:grid;gap:var(--s4)}
.fgrid{display:grid;gap:var(--s4)}
@media (min-width:620px){ .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .fgrid .full{grid-column:1/-1} }
.field label{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-mute);margin-bottom:.35rem}
.field input,.field select,.field textarea{
  width:100%;padding:.75rem .85rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);font-size:.95rem;transition:border-color var(--d2) var(--ease-out)}
.field textarea{resize:vertical;min-height:9rem;font-family:var(--font-body)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mute)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formmsg{display:none;padding:.9rem 1rem;border:1px solid var(--accent);background:var(--surface-2);font-size:.92rem}
.formmsg.is-on{display:block}
.formmsg.is-err{border-color:#B4472F;color:#8F3623}

/* contacto */
.contact{display:grid;gap:var(--s6);align-items:start}
@media (min-width:980px){ .contact{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s7)} }
.cpanel{background:var(--brand-1);color:var(--on-dark);padding:var(--s5)}
.cpanel h2{color:var(--on-dark);font-size:var(--t-h3)}
.clist{display:grid;gap:var(--s4);margin-top:var(--s5)}
.clist dt{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-5)}
.clist dd{margin:.25rem 0 0;font-size:.95rem;color:var(--on-dark)}
.clist a{border-bottom:1px solid var(--line-dark)}
@media (hover:hover){ .clist a:hover{border-bottom-color:var(--brand-4);color:var(--brand-5)} }
.clist small{display:block;color:var(--on-dark-mute);font-size:.76rem;margin-top:.15rem}

/* ---------------------------------------------------------------- prosa legal */
.prose{max-width:72ch}
.prose h2{font-size:var(--t-h3);margin-top:var(--s6)}
.prose h2:first-child{margin-top:0}
.prose p{margin-top:var(--s3);color:var(--ink-soft)}

/* ---------------------------------------------------------------- footer 17 */
.ft{background:var(--brand-1);color:var(--on-dark-soft);border-top:1px solid var(--line-dark)}
.ft__in{padding-block:clamp(2.5rem,6vw,4.5rem) var(--s5)}
.ft__grid{display:grid;gap:var(--s6);margin-top:var(--s7);padding-bottom:var(--s6);border-bottom:1px solid var(--line-dark)}
@media (min-width:760px){ .ft__grid{grid-template-columns:1.25fr 1fr 1fr} }
@media (min-width:1080px){ .ft__grid{grid-template-columns:1.4fr 1fr 1fr 1fr} }
.ft__meta{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;line-height:1.8;
  color:var(--on-dark-mute);max-width:30ch}
.ft__h{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand-5);margin-bottom:var(--s3)}
.ft__col{display:grid;gap:.55rem;align-content:start}
.ft__col a{font-size:.9rem;color:var(--on-dark-soft);display:flex;align-items:baseline;gap:.5em}
.ft__col a[data-n]::before{content:attr(data-n);font-family:var(--font-mono);font-size:.7rem;color:var(--on-dark-mute)}
@media (hover:hover){ .ft__col a:hover{color:var(--brand-5)} }
.ft__bottom{display:flex;flex-wrap:wrap;gap:.6rem var(--s5);justify-content:space-between;
  padding-top:var(--s4);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:var(--on-dark-mute)}
.ft__bottom nav{display:flex;gap:var(--s4)}

/* ---------------------------------------------------------------- motion base */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ---------------------------------------------------------------- bloques de páginas interiores */
/* lista de grupos dentro de una familia */
.gblock{margin-bottom:var(--s8)}
.gblock:last-of-type{margin-bottom:0}
.gblock__head{display:grid;gap:.5rem;margin-bottom:var(--s4);max-width:78ch}
.gblock__head h2{font-size:var(--t-h3)}
.gblock__head p{color:var(--ink-soft);font-size:.95rem}
.gblock__head .tag{justify-self:start;margin-top:.25rem}
.gblock .tbl td:first-child a{font-weight:700;color:var(--ink);border-bottom:1px solid transparent}
@media (hover:hover){ .gblock .tbl td:first-child a:hover{color:var(--accent-deep);border-bottom-color:var(--accent)} }
.subnav{display:flex;flex-wrap:wrap;gap:.45rem}
.imgband + .subnav{margin-top:var(--s4)}
.subnav .tag{transition:border-color var(--d2) var(--ease-out),background var(--d2) var(--ease-out)}
@media (hover:hover){ .subnav .tag:hover{border-color:var(--accent);background:var(--surface-2)} }

/* dl usados como lista editorial (no son grillas de cards) */
.rlist--dl{display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:860px){ .rlist--dl{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2rem,4vw,4rem)} }
@media (min-width:1100px){ .rlist--3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.rlist--dl > div{border-bottom:1px solid var(--line);padding-block:var(--s5)}
.rlist--dl dt{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.4rem}
.rlist--dl dd{margin:0;padding-left:2.1rem}
.rlist--dl dd p{font-size:.94rem;color:var(--ink-soft);max-width:52ch}
.rlist--dl h3{font-size:var(--t-h4)}
.sec--dark .rlist--dl,.sec--dark .rlist--dl > div{border-color:var(--line-dark)}
.sec--dark .rlist--dl dd p{color:var(--on-dark-soft)}

/* banda firma en dl */
.tagband dt{margin:0}
.tagband dd{margin:0}
.tagband__i h3{font-size:1rem}
.tagband__i p{font-size:.88rem;color:var(--on-dark-soft);max-width:38ch}

/* timeline de 1 columna (control de calidad) */
.tline{display:grid;gap:0;border-left:2px solid var(--brand-4);padding-left:var(--s5);max-width:64ch}
.tline li{padding-block:var(--s4);border-bottom:1px solid var(--line);position:relative}
.tline li:last-child{border-bottom:0}
.tline li::before{content:"";position:absolute;left:calc(-1 * var(--s5) - 6px);top:calc(var(--s4) + .55rem);
  width:10px;height:10px;background:var(--brand-4)}
.tline h3{font-size:var(--t-h4);margin:.2rem 0 .3rem}
.tline p{font-size:.94rem;color:var(--ink-soft);max-width:54ch}
.tline .steps__n{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:var(--accent-deep)}

/* bloques de capacidades (zigzag real: alterna lados) */
.capblock{display:grid;gap:var(--s5);align-items:center;padding-block:var(--s7);border-bottom:1px solid var(--line)}
.capblock:first-child{padding-top:0}
.capblock:last-child{border-bottom:0}
@media (min-width:900px){
  .capblock{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem)}
  .capblock--rev .capblock__c{order:2}
  .capblock--rev .fig{order:1}
}
.capblock h2{font-size:var(--t-h2);margin:.3rem 0 .6rem}
.capblock p{color:var(--ink-soft);max-width:56ch}
.ticks{margin-top:var(--s4);display:grid;gap:.5rem}
.ticks li{display:grid;grid-template-columns:1.1rem minmax(0,1fr);gap:.6rem;font-size:.9rem;color:var(--ink)}
.ticks .rlist__n{color:var(--accent)}

/* aplicaciones */
.indcard__f{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.indcard__f .tag{font-size:.7rem}

/* empresa */
.abrow{padding-block:var(--s5);border-bottom:1px solid var(--line)}
.abrow:first-child{padding-top:0}
.abrow:last-child{border-bottom:0}
.abrow__h{display:flex;align-items:baseline;gap:.8rem;margin-bottom:.5rem}
.abrow h2{font-size:var(--t-h3)}
.abrow p{color:var(--ink-soft);max-width:60ch}
.sec--ivory .abrow{border-color:var(--line)}

.imgband--2{grid-template-columns:1fr}
@media (min-width:640px){ .imgband--2{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* grupo con foto en la página de familia */
.gblock__top{display:grid;gap:var(--s4);align-items:start;margin-bottom:var(--s4)}
@media (min-width:760px){ .gblock__top{grid-template-columns:200px minmax(0,1fr);gap:var(--s5)} }
.gblock__img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border:1px solid var(--line);background:var(--surface-2)}
.gblock__head{margin-bottom:0}

/* pie: la nota del teléfono provisorio va en su propia línea, nunca pegada al número */
.ft__note{display:block;margin-top:.2rem;font-size:.7rem;line-height:1.5;color:var(--on-dark-mute);max-width:32ch}

/* home: empresa con foto de lugar, QC con foto de banco, FAQ en dos columnas */
.split__copy h2 + p{margin-top:var(--s4)}
.fig--place img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;display:block}
.qcgrid{display:grid;gap:var(--s6);align-items:start}
@media (min-width:960px){ .qcgrid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem)}
  .qcgrid__fig{position:sticky;top:calc(var(--hdr-h) + 1.5rem)} }
.faqgrid{display:grid;gap:var(--s6);align-items:start}
@media (min-width:960px){ .faqgrid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem)}
  .faqgrid .shead{position:sticky;top:calc(var(--hdr-h) + 1.5rem)} }
.faqgrid .faq{max-width:none}
.faqgrid__aside{margin-top:var(--s4);color:var(--ink-soft);max-width:36ch;font-size:.95rem}
@media (max-width:919px){ .pdetail__media .note + .fig{display:none} }

/* la lista de materiales, visible y editable dentro del formulario */
.formlist{border:1px solid var(--line);background:var(--surface-2);padding:.8rem 1rem}
.formlist__h{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .5rem}
.formlist ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.formlist li{display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:.9rem;
  background:var(--surface);border:1px solid var(--line-soft);padding:.35rem .35rem .35rem .7rem}
.formlist li button{flex:none;width:32px;height:32px;display:grid;place-items:center;font-size:1.1rem;line-height:1;
  color:var(--ink-soft);border:1px solid transparent;transition:border-color var(--d2) var(--ease-out),transform 120ms var(--ease-out)}
.formlist li button:active{transform:scale(.94)}
.formlist li button:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}
@media (hover:hover){ .formlist li button:hover{border-color:var(--line);color:var(--ink)} }

/* deshacer al vaciar la lista */
.undo{display:flex;align-items:center;gap:.75rem;margin-top:var(--s3);font-size:.9rem;color:var(--on-dark-soft)}
.undo button{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-5);
  border-bottom:1px solid var(--brand-4);padding:.2rem 0}
.undo button:focus-visible{outline:2px solid var(--brand-4);outline-offset:3px}
/* campo mal completado: se marca recién después de que la persona lo tocó */
.form input:user-invalid,.form textarea:user-invalid,.form select:user-invalid{border-color:#B4432F;box-shadow:inset 0 0 0 1px #B4432F}
.formmsg .alink{margin-left:.35rem}


/* ---------------------------------------------------------------- home: split invertido y etiqueta sobre foto */
@media (min-width:900px){ .split--rev .split__copy{order:2} }
.fig--tagged{position:relative}
.fig__tag{position:absolute;left:1rem;bottom:1rem;display:grid;gap:.15rem;padding:.55rem 2.4rem .6rem .9rem;
  background:var(--brand-1);color:var(--on-dark);border:1px solid rgba(198,161,91,.5);
  clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%)}
.fig__tag::before{content:"";position:absolute;top:.6rem;right:.9rem;width:8px;height:8px;border-radius:50%;
  border:1px solid rgba(198,161,91,.75)}
.fig__tag span{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;color:var(--brand-4)}
.fig__tag b{font-size:.9rem;font-weight:700;line-height:1.2}
.rlist__n--mark{width:8px;height:8px;background:var(--brand-4);padding:0;margin-top:.55rem;flex:none}

/* ---------------------------------------------------------------- footer: ficha de la empresa */
.ft__top{display:grid;gap:var(--s6);align-items:start}
@media (min-width:900px){ .ft__top{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s8)} .plate--ft{justify-self:end} }
.ft__brand{display:grid;gap:var(--s4);align-content:start}
.ft__logo{display:inline-flex;align-items:center;gap:.8rem;color:var(--on-dark);text-decoration:none;width:max-content}
.ft__mark{width:38px;height:36px;flex:none}
.ft__name{display:grid;gap:4px;line-height:1.15}
.ft__word{width:168px;height:auto;display:block}   /* el wordmark real, igual que en el header */
.ft__name small{font-family:var(--font-body);font-weight:400;font-size:.72rem;color:var(--on-dark-mute);letter-spacing:.06em}
.ft__tagline{max-width:34ch;font-size:var(--t-lg);color:var(--on-dark);line-height:1.35}
.ft__contact{display:grid;gap:.3rem;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.03em;color:var(--on-dark-soft)}
.ft__contact a{color:var(--on-dark)}
.plate--ft{width:min(100%,26rem);background:rgba(23,35,56,.7)}
.plate--ft li.plate__txt span{font-size:.78rem;line-height:1.5}
.ft__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){ .ft__grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.ft__col a{gap:0}
.ft__col a[aria-current="true"]{color:var(--brand-5)}


/* índice como segunda sección: menos aire abajo (el escenario ya dio la pausa) */
.hero--index{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,4vw,2.75rem)}

/* ---------------------------------------------------------------- escenario de producto (primera sección, 100svh) */
/* 100svh MENOS el header (sticky, en flujo): si no, la barra de pestañas queda bajo el pliegue */
.stage{position:relative;min-height:calc(100svh - var(--hdr-h));display:grid;grid-template-rows:1fr auto;
  padding:0;background:var(--brand-1);color:var(--on-dark);overflow:clip;isolation:isolate}
.stage__media{position:absolute;inset:0;z-index:0}
.stage__slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease-out),visibility 0s linear .45s}
.stage__slide.is-on{opacity:1;visibility:visible;transition-delay:0s}
/* .stage__bg se retiró con el escenario v4 (2026-09-20): la escena ya no lleva fondo desenfocado */
.stage__poster{position:absolute;top:0;bottom:0;right:0;width:min(62vw,100%);height:100%;object-fit:cover;
  object-position:center;filter:saturate(.85) contrast(1.03);transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
/* deriva LINEAL (no ease-in-out): se mueve desde el primer segundo, que es lo que mide la perceptibilidad */
/* la deriva de la escena se define una sola vez, en el bloque del escenario v4 */
.stage__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease-out)}
.stage__video.is-on{opacity:1}
.stage::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(11,18,32,.94) 0%,rgba(11,18,32,.84) 38%,rgba(11,18,32,.22) 70%,rgba(11,18,32,.12) 100%),
  linear-gradient(0deg,rgba(11,18,32,.85) 0%,rgba(11,18,32,0) 32%)}
.stage__grid{position:relative;z-index:1;display:grid;gap:var(--s6);align-items:center;
  padding-block:clamp(2rem,7vh,4.5rem) var(--s5)}
@media (min-width:1000px){ .stage__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,4vw,4rem)} }
.stage__copy{max-width:38rem}
.stage h1{color:var(--on-dark);max-width:22ch;font-size:var(--t-h1);line-height:1.04;letter-spacing:-.02em;margin-bottom:var(--s6);text-wrap:balance}
.stage__fams{display:grid}
.stage__fam{grid-area:1/1;visibility:hidden;opacity:0;translate:0 10px;
  transition:opacity var(--d3) var(--ease-out),translate var(--d3) var(--ease-out),visibility 0s linear var(--d3)}
.stage__fam.is-on{visibility:visible;opacity:1;translate:0 0;transition-delay:0s}
.stage__k{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-mute)}
.stage__k b{color:var(--brand-5);font-weight:500}
.stage__name{font-family:var(--font-display);font-weight:800;font-size:var(--t-h2);line-height:1.1;margin-top:.5rem;color:var(--on-dark)}
.stage__range{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.04em;color:var(--brand-5);margin-top:.45rem}
.stage__lede{color:var(--on-dark-soft);max-width:46ch;margin-top:var(--s4);font-size:var(--t-md)}
.stage__cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.stage__side{display:grid;justify-items:end;align-items:center}
/* la etiqueta nunca es traslúcida sobre la foto: fondo casi opaco, entra cayendo (sin fundido) y
   sale en seco. Un fundido de 480 ms sobre el ovillo iluminado bajaba el contraste a 2,1:1 (render K). */
.stage__plate{grid-area:1/1;width:min(100%,22rem);visibility:hidden;translate:0 8px;
  transition:translate var(--d3) var(--ease-out)}
.stage__plate.is-on{visibility:visible;translate:0 0}
.stage__plate .plate{width:100%;background:rgba(23,35,56,.94);backdrop-filter:blur(2px)}
.stage__plate .plate__hd span:last-child{color:var(--on-dark-soft)}
.stage__bar{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s3) var(--s5);padding-block:var(--s3) clamp(1rem,3vh,1.5rem);border-top:1px solid var(--line-dark)}
.stage__dots{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.15rem}
.stage__dots button{position:relative;display:inline-flex;align-items:baseline;gap:.5em;padding:.6rem .65rem .55rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-mute);
  background:transparent;border:0;cursor:pointer;transition:color var(--d2) var(--ease-out)}
.stage__dots button b{font-weight:500;color:var(--brand-5)}
.stage__dots button .t{display:none}
@media (min-width:900px){ .stage__dots button .t{display:inline} }
.stage__dots button::after{content:"";position:absolute;left:.65rem;right:.65rem;bottom:0;height:2px;background:var(--line-dark)}
.stage__dots button[aria-selected="true"]{color:var(--on-dark)}
.stage__dots button[aria-selected="true"]::after{background:var(--brand-4);transform-origin:0 50%;transform:scaleX(1)}
.stage.is-auto .stage__dots button[aria-selected="true"]::after{animation:stage-prog 3.6s linear both}
@keyframes stage-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.stage__ctl{display:flex;gap:.4rem}
.stage__btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-dark);background:rgba(11,18,32,.55);
  color:var(--on-dark);cursor:pointer;transition:border-color var(--d2) var(--ease-out),transform var(--d1) var(--ease-out)}
.stage__btn:hover{border-color:var(--brand-4)}
.stage__btn:active{transform:scale(.96)}
.stage__chev{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin-left:-3px}
.stage__chev--l{transform:rotate(135deg);margin-left:3px}
.stage__btn--pause span{width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.stage__btn--pause[aria-pressed="true"] span{width:0;height:0;border:0;border-left:11px solid currentColor;
  border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
@media (max-width:999px){
  .stage::after{background:linear-gradient(0deg,rgba(11,18,32,.9) 0%,rgba(11,18,32,.82) 55%,rgba(11,18,32,.5) 100%)}
  .stage__poster{width:100%;-webkit-mask-image:none;mask-image:none;object-position:center 30%}
  .stage__side{justify-items:start}
  .stage__lede{display:none}
}
@media (prefers-reduced-motion:reduce){
  .stage__slide.is-on .stage__poster{animation:none}
  .stage.is-auto .stage__dots button[aria-selected="true"]::after{animation:none}
  .stage__slide,.stage__fam,.stage__plate,.stage__video{transition:none}
}

/* ---------------------------------------------------------------- footer v3: franja de familias y volver arriba */
.ft__fams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line-dark);
  border:1px solid var(--line-dark);margin-bottom:var(--s7)}
@media (min-width:640px){ .ft__fams{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1100px){ .ft__fams{grid-template-columns:repeat(6,minmax(0,1fr))} }
.ft__tile{display:grid;gap:.35rem;align-content:start;padding:var(--s4);background:var(--brand-1);color:var(--on-dark);
  text-decoration:none;position:relative;transition:background-color var(--d2) var(--ease-out)}
.ft__tile b{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.1em;color:var(--brand-5)}
.ft__tile .ft__tname{font-family:var(--font-display);font-weight:700;font-size:.95rem;line-height:1.25}
.ft__tile small{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;color:var(--on-dark-mute)}
.ft__tile::after{content:"";position:absolute;left:var(--s4);right:var(--s4);bottom:0;height:2px;background:var(--brand-4);
  transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d3) var(--ease-out)}
@media (hover:hover){ .ft__tile:hover{background:var(--brand-2)} .ft__tile:hover::after{transform:scaleX(1)} }
.ft__up{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-soft)}
.ft__grid{grid-template-columns:repeat(3,minmax(0,1fr))}


/* ---------------------------------------------------------------- aplicaciones y calidad (20-sep) */
/* ficha de sector: lo que más se mueve, con su medida real */
.indcard__h{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute);margin-top:var(--s4)}
.indcard__refs{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.3rem;border-top:1px solid var(--line-soft)}
.indcard__refs li{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
  padding-top:.35rem;border-bottom:1px solid var(--line-soft);padding-bottom:.35rem}
.indcard__refs li:last-child{border-bottom:0}
.indcard__refs a{font-size:.85rem;line-height:1.3;color:var(--ink)}
.indcard__refs span{font-size:.7rem;color:var(--ink-mute);white-space:nowrap}
@media (hover:hover){ .indcard__refs a:hover{color:var(--accent-deep)} }

/* qué viaja junto: tres perfiles como lista descriptiva (la grilla de cards de los sectores es la
   única de la página: R1 «LAY-grid-unico») */
.mixlist > div{align-content:start}
.mixlist .indcard__f{margin-top:.6rem}

/* planilla: instrumento y criterio bajo cada control */
.qmeta{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.35rem}
/* rótulo arriba y valor debajo, en una sola columna: con el texto suelto el rótulo mono se
   superponía a la frase en pantallas angostas */
.qmeta li{display:grid;grid-template-columns:minmax(0,1fr);gap:.15rem;
  padding-left:.75rem;border-left:2px solid var(--line)}
.qmeta__k{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-mute)}
.qmeta__v{font-size:.88rem;line-height:1.45;color:var(--ink-soft)}
.sec--dark .qmeta li{color:var(--on-dark-soft);border-left-color:var(--line-dark)}

/* dos columnas para las listas largas de calidad */
@media (min-width:900px){ .rlist--2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s7)} }

/* lo que no hacemos: lista de límites, sin numerar */
.nodo{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line-dark);max-width:80ch}
.nodo li{position:relative;padding:var(--s4) 0 var(--s4) 1.9rem;border-bottom:1px solid var(--line-dark);
  color:var(--on-dark-soft);font-size:.95rem}
.nodo li::before{content:"";position:absolute;left:0;top:calc(var(--s4) + .55rem);width:11px;height:2px;
  background:var(--brand-4)}


/* 404 con salidas: buscador y lista de familias compacta */
.srch--404{max-width:34rem;margin-top:var(--s5)}
.famrow--slim{grid-template-columns:auto minmax(0,1fr) auto}
.famrow--slim .famrow__b p{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em;color:var(--ink-mute)}


/* tabla apilable: a 390 px la de «del patio a la referencia» se cortaba tras un scroll horizontal */
@media (max-width:640px){
  .tbl--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tbl--stack tr{display:grid;gap:.25rem;padding:var(--s4) var(--s4);border-bottom:1px solid var(--line)}
  .tbl--stack tr:last-child{border-bottom:0}
  .tbl--stack td{display:grid;gap:.1rem;padding:0;border:0}
  .tbl--stack td[data-l]::before{content:attr(data-l);font-family:var(--font-mono);font-size:.62rem;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
  .tbl--stack .tblwrap,.tbl--stack{overflow:visible}
  /* un grupo por renglón: el separador no puede quedar solo en su línea */
  .tbl--stack .g{display:block}
  .tbl--stack i{display:none}
}


/* tabla dentro de una banda oscura: sin esto el .tblwrap sale blanco y parte la sección en dos
   (hallazgo de la revisión estética del 20-sep, tabla de factores de diseño en calidad) */
.sec--dark .tblwrap{background:rgba(23,35,56,.55);border-color:var(--line-dark)}
.sec--dark .tbl caption{color:var(--on-dark-mute)}
.sec--dark .tbl thead th{background:rgba(23,35,56,.92);color:var(--on-dark-mute);
  border-bottom-color:var(--line-dark)}
.sec--dark .tbl td{color:var(--on-dark-soft);border-bottom-color:var(--line-dark-soft)}
.sec--dark .tbl tbody tr:nth-child(even) td{background:rgba(245,243,238,.045)}
.sec--dark .tbl .txt{color:var(--on-dark)}
.sec--dark .note{color:var(--on-dark-mute)}


/* ============================================================================
   REDISEÑO de aplicaciones y calidad (2026-09-20)
   Las dos páginas estaban hechas con un solo módulo repetido: volanta, título y lista de
   filetes, cinco veces, todo al mismo peso y con la foto reducida a miniatura. El problema
   no era el contenido sino la composición, así que acá está la composición: una portada con
   foto, una banda por sector, una banda oscura sobre foto que corta el gris, la cifra de
   display que le da entrada a cada tabla y el certificado dibujado como un certificado.
   ========================================================================== */

/* --- portada de sección: la foto sangra por el borde derecho, las cifras van al zócalo --- */
.opener{position:relative;isolation:isolate;overflow:clip;background:var(--brand-1);
  color:var(--on-dark);display:grid;align-content:end;padding-top:clamp(2.4rem,5.5vw,4.4rem)}
/* el tope de 780 px dejaba la foto como una tira angosta pegada al borde en pantallas anchas:
   a 1920 ocupaba el 41 % y el velo se comia buena parte, asi que la imagen visible era un resto. */
.opener__media{position:absolute;inset:0 0 0 auto;width:clamp(320px,52%,980px);z-index:-1}
.opener__media img{width:100%;height:100%;object-fit:cover;display:block}
/* la columna del texto se apoya en midnight pleno (con el degradado arrancando antes, la
   volanta dorada medía 3,46:1 sobre la foto) y la imagen sigue sangrando por la derecha */
.opener__scrim{position:absolute;inset:0;background:linear-gradient(90deg,
  var(--brand-1) 0 36%,rgba(11,18,32,.74) 58%,rgba(11,18,32,.22) 86%,rgba(11,18,32,.4))}
.opener__in{padding-bottom:clamp(2.2rem,4.5vw,3.6rem)}
.opener .crumbs{margin-bottom:var(--s5)}
.opener .eyebrow{color:var(--brand-5)}
.opener h1{color:var(--on-dark);font-size:clamp(2.2rem,1.35rem + 3.4vw,4.1rem);line-height:1.02;
  letter-spacing:-.018em;max-width:15ch;margin-top:.55rem}
.opener p{color:var(--on-dark-soft);max-width:50ch;margin-top:var(--s4);font-size:var(--t-lg)}
.opener__rail{border-top:1px solid var(--line-dark)}
/* margin-inline:auto y no margin:0 — el riel es un .container y el margin:0 le anulaba el centrado,
   asi que las cifras arrancaban pegadas al borde izquierdo mientras el titulo iba en el contenedor.
   A 1920 eso eran 320 px de desfase entre el titulo y la primera cifra. */
.opener__rail ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-block:0;margin-inline:auto}
.opener__rail li{display:flex;align-items:baseline;gap:.7rem;padding-block:var(--s4)}
.opener__rail li + li{border-left:1px solid var(--line-dark);padding-left:clamp(1rem,2.5vw,2rem)}
.opener__rail b{font-size:clamp(1.45rem,1.05rem + 1.5vw,2.35rem);font-weight:600;line-height:1;
  color:var(--brand-5);font-variant-numeric:tabular-nums}
.opener__rail span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-dark-mute);line-height:1.35}
.opener + .sec{padding-top:clamp(2.75rem,5vw,4.25rem)}
@media (max-width:860px){
  /* en angosto la foto pasa a ser textura de fondo: con la mitad derecha el título la pisaba */
  .opener__media{width:100%}
  .opener__scrim{background:linear-gradient(180deg,rgba(11,18,32,.9) 0 55%,rgba(11,18,32,.94))}
  .opener__rail li{flex-direction:column;gap:.15rem}
  .opener__rail li + li{padding-left:clamp(.75rem,3vw,1.25rem)}
}

/* --- un sector por banda: la foto a 4/3 y el número como entrada de lectura -------------- */
.yards{display:grid;border-top:1px solid var(--line)}
.yard{display:grid;gap:var(--s5);align-items:center;border-bottom:1px solid var(--line);
  padding-block:clamp(2rem,4.5vw,3.6rem)}
@media (min-width:900px){
  .yard{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.6rem)}
  .yard--rev .yard__fig{order:2}
}
/* las fotos de sector son recortes sobre blanco: sin plato se derraman en la página */
.yard__fig{margin:0;background:var(--surface-2);border:1px solid var(--line-soft)}
.yard__fig img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.yard__c{min-width:0}
.yard__n{display:flex;align-items:center;gap:1rem;margin:0 0 .45rem}
.yard__n span{font-family:var(--font-mono);font-size:1.55rem;line-height:1;color:var(--accent-deep)}
.yard__n::after{content:"";height:1px;background:var(--line);flex:1}
.yard h3{font-size:clamp(1.3rem,1.02rem + .95vw,1.95rem);line-height:1.14;letter-spacing:-.012em}
.yard__p{font-size:1.02rem;line-height:1.62;color:var(--ink-soft);max-width:48ch;margin-top:.55rem}
.yard .indcard__h{margin-top:var(--s5)}
.yard .indcard__refs a{font-size:.9rem}
.yard .indcard__f{margin-top:var(--s4)}

/* --- «qué viaja junto» sobre la foto del depósito: corta cuatro secciones claras seguidas - */
.mixband{position:relative;isolation:isolate;overflow:clip}
.mixband__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:grayscale(.35)}
.mixband__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,
  rgba(11,18,32,.95) 24%,rgba(11,18,32,.78) 58%,rgba(11,18,32,.56))}
.sec--dark .tag--plain{color:var(--on-dark-soft);border-color:var(--line-dark)}
@media (hover:hover){
  .sec--dark a.tag--plain:hover{color:var(--brand-5);border-color:rgba(198,161,91,.5)}
}

/* --- una tabla sola es una mancha gris: al lado va la cifra que la resume ---------------- */
.mapgrid{display:grid;gap:var(--s6)}
@media (min-width:960px){
  .mapgrid{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(2rem,5vw,4.5rem);
    align-items:start}
  .mapgrid__a{position:sticky;top:calc(var(--hdr-h) + 1.75rem)}
}
.mapgrid__a .shead{margin-bottom:var(--s5);max-width:32ch}
.bigfig{display:grid;gap:.4rem;margin:0;padding-top:var(--s4);border-top:1px solid var(--line)}
.bigfig b{font-size:clamp(2.5rem,1.5rem + 3.4vw,4.3rem);line-height:.94;font-weight:700;
  color:var(--accent-deep);font-variant-numeric:tabular-nums;letter-spacing:-.022em}
.bigfig span{font-family:var(--font-mono);font-size:.67rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute);max-width:24ch;line-height:1.45}
.bigfig--dark{border-color:var(--line-dark);margin-top:var(--s5)}
.bigfig--dark b{color:var(--brand-5)}
.bigfig--dark span{color:var(--on-dark-mute)}

/* --- la planilla de controles: una columna ancha, no dos columnas de cajas apretadas ----- */
.qgrid{display:grid;gap:var(--s6)}
@media (min-width:960px){
  .qgrid{grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);gap:clamp(2rem,5vw,4.5rem);
    align-items:start}
  .qgrid__a{position:sticky;top:calc(var(--hdr-h) + 1.75rem)}
}
.qgrid__a .shead{margin-bottom:var(--s5);max-width:30ch}
.checks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.checks > li{padding-block:clamp(1.5rem,3vw,2.4rem);border-bottom:1px solid var(--line)}
.check__h{display:flex;align-items:baseline;gap:.9rem;line-height:1.2;
  font-size:clamp(1.15rem,1rem + .62vw,1.55rem)}
.check__n{font-family:var(--font-mono);font-size:.78rem;color:var(--accent-deep);
  letter-spacing:.08em;flex:none}
.check__p{font-size:1.02rem;line-height:1.62;color:var(--ink-soft);max-width:58ch;margin-top:.55rem}
.checks .qmeta{margin-top:var(--s4);display:grid;gap:var(--s4)}
.checks .qmeta li{border-left-color:rgba(198,161,91,.55)}
@media (min-width:640px){ .check__p,.checks .qmeta{margin-left:2.5rem} }
@media (min-width:760px){ .checks .qmeta{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* --- banda de foto a sangre: el único respiro de la página, así que va de borde a borde --- */
.bleedfig{margin:0;background:var(--brand-1)}
.bleedfig img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;display:block}
.bleedfig figcaption{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.07em;
  color:var(--on-dark-mute);padding-block:.9rem 1.05rem;max-width:var(--maxw)}
@media (max-width:720px){ .bleedfig img{aspect-ratio:16/10} }

/* --- el certificado dibujado como certificado: campos, no otra lista -------------------- */
.certgrid{display:grid;gap:var(--s6);align-items:start}
@media (min-width:980px){
  .certgrid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2rem,4.5vw,3.6rem)}
}
.cert{border:1px solid var(--line);background:var(--surface-2)}
.cert__hd{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0;
  padding:.85rem var(--s5);background:var(--brand-1);color:var(--brand-5);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.cert__hd span:last-child{color:var(--on-dark-mute);text-align:right}
.cert__rows{list-style:none;margin:0;padding:0}
.cert__rows li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.25rem 1rem;
  padding:var(--s5);border-bottom:1px dashed var(--line)}
.cert__rows li:last-child{border-bottom:0}
.cert__n{font-family:var(--font-mono);font-size:.7rem;color:var(--accent-deep);grid-row:1/3;
  padding-top:.3rem}
.cert__k{font-size:1.02rem;line-height:1.3}
.cert__v{font-size:.96rem;line-height:1.6;color:var(--ink-soft);max-width:52ch;margin:0}
.certfig{margin:0;background:var(--surface-3)}
.certfig img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
@media (min-width:980px){ .certfig{position:sticky;top:calc(var(--hdr-h) + 1.75rem)} }

/* --- lo que no hacemos: se lee como declaración, no como nota al pie -------------------- */
.nodo--lg li{font-size:clamp(1.02rem,.94rem + .5vw,1.3rem);line-height:1.45;color:var(--on-dark);
  padding:var(--s5) 0 var(--s5) 2.4rem;max-width:62ch}
.nodo--lg li::before{width:15px;top:calc(var(--s5) + .72rem);background:var(--brand-4)}
.rlist--lede h3{font-size:var(--t-h3)}
.rlist--lede dd p{font-size:1rem;line-height:1.6;max-width:54ch}

/* --- el acordeón de aplicaciones, con la pregunta a tamaño de lectura ------------------- */
.faqgrid .faq summary{font-size:1.04rem}

/* ============================================================================
   ARMONIZACIÓN 2026-09-20 — bloques nuevos para site.css
   Se pega al final de site.css salvo el bloque 1, que REEMPLAZA reglas del escenario.
   ============================================================================ */

/* ---------------------------------------------------------------- 1 · ESCENARIO v4 «la lámpara»
   Reemplaza: .stage__bg (ya no existe en el markup), .stage__poster, stage-kb, stage-bgkb y .stage::after.
   La escena va a sangre en clave baja y la luz se dirige al producto. El haz vive dentro de cada
   lámina (--bx), así cambia con la familia sin JavaScript. */
.stage__poster{position:absolute;right:0;left:auto;top:clamp(2.5rem,11%,6rem);
  bottom:clamp(5rem,17%,8.5rem);width:min(54vw,800px);height:auto;
  object-fit:cover;object-position:center;filter:brightness(.72) contrast(1.05) saturate(.94);
  transform-origin:60% 50%;box-shadow:0 40px 90px -40px rgba(0,0,0,.95);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);
  mask-image:linear-gradient(90deg,transparent 0,#000 16%)}
.stage__slide.is-on .stage__poster{animation:stage-kb 3.6s linear both}
@keyframes stage-kb{from{transform:scale(1.01) translate3d(.7%,0,0)}
  to{transform:scale(1.05) translate3d(-.7%,0,0)}}
/* el haz: la lámpara del taller. Abre donde está el producto y cae a la noche en los bordes */
.stage__beam{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(38% 46% at var(--bx,72%) 44%,rgba(255,255,255,.20) 0%,
    rgba(214,226,255,.09) 40%,transparent 74%)}
.stage__vig{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(70% 84% at var(--bx,72%) 44%,transparent 30%,rgba(5,8,14,.34) 66%,rgba(5,8,14,.8) 100%)}
/* el velo lateral es del escenario, no de la lámina: no parpadea al cambiar de familia */
.stage__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  linear-gradient(90deg,rgba(11,18,32,.92) 0%,rgba(11,18,32,.55) 34%,transparent 62%),
  linear-gradient(0deg,rgba(11,18,32,.72) 0%,rgba(11,18,32,0) 26%)}
.stage::after{content:none}
/* el hilo del que cuelga la etiqueta de carga */
.stage__hang{display:none}   /* el hilo quedaba lejos de la placa; el balanceo ya dice que cuelga */
.stage__plate{transform-origin:top center}
.stage__plate.is-on .plate{animation:stage-sway 1.5s var(--ease-out) both}
@keyframes stage-sway{0%{transform:rotate(0)}22%{transform:rotate(1.5deg)}55%{transform:rotate(-.8deg)}
  80%{transform:rotate(.3deg)}100%{transform:rotate(0)}}
/* las pestañas son mini-etiquetas de carga: número, nombre y CONTEO de referencias */
.stage__dots{gap:1px}
.stage__dots button{--cut:9px;flex-direction:column;align-items:flex-start;gap:.1rem;
  padding:.5rem .7rem .55rem;background:rgba(11,18,32,.42);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
  transition:background-color var(--d2) var(--ease-out),color var(--d2) var(--ease-out)}
.stage__dots button small{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;
  color:var(--on-dark-mute);display:none}
@media (min-width:760px){ .stage__dots button small{display:block} }
.stage__dots button:hover{background:rgba(245,243,238,.07);color:var(--on-dark)}
.stage__dots button[aria-selected="true"]{background:rgba(198,161,91,.14)}
.stage__dots button[aria-selected="true"] small{color:var(--brand-5)}
@media (max-width:999px){
  .stage__poster{position:absolute;top:0;left:0;right:0;bottom:auto;width:100%;
    height:clamp(230px,36svh,380px);object-position:center 42%;
    filter:brightness(.82) contrast(1.06) saturate(.95);box-shadow:none;
    -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 58%,transparent 100%)}
  .stage__grid{padding-top:clamp(190px,30svh,320px)}
  .stage__beam{background:radial-gradient(60% 26% at 60% 16%,rgba(255,255,255,.18),transparent 72%)}
  .stage__vig{background:radial-gradient(90% 40% at 60% 14%,transparent 30%,rgba(5,8,14,.5) 100%)}
  .stage__scrim{background:linear-gradient(180deg,rgba(11,18,32,.08) 0,rgba(11,18,32,.16) calc(clamp(230px,36svh,380px) * .5),
    rgba(11,18,32,.9) clamp(230px,36svh,380px),rgba(11,18,32,.94) 100%)}
  .stage__hang{display:none}
  .stage__dots{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .stage__dots::-webkit-scrollbar{display:none}
  .stage__dots li{flex:none}
}
@media (prefers-reduced-motion:reduce){
  .stage__slide.is-on .stage__poster{animation:none}
  .stage__plate.is-on .plate{animation:none}
}

/* ---------------------------------------------------------------- 2 · ÍNDICE con grupos
   La fila del índice gana el conteo de grupos, que vivía en la lista de familias retirada. */
.idxrow__c{display:grid;justify-items:end;gap:.1rem;line-height:1.2}
.idxrow__c b{color:var(--brand-5);font-weight:500}
.idxrow__c small{font-size:.72rem;color:var(--on-dark-mute);letter-spacing:.04em}
.idxrow__c,.idxrow__r,.idxrow__n{font-size:.74rem}
/* 2026-09-26 (07): en teléfono el conteo pasa a una línea bajo el rango, en la columna del texto;
   antes el display:grid de arriba pisaba el display:none móvil y lo apilaba bajo el número de fila */
@media (max-width:520px){ .idxrow{row-gap:.2rem}
  .idxrow__n,.idxrow__img{grid-row:span 2}
  .idxrow__c{grid-column:3;display:flex;gap:.5rem;justify-items:start;align-items:baseline} }
/* la columna de texto se centra contra el índice: sin hueco bajo las cifras */
@media (min-width:1000px){ .hero--index .hero__grid{align-items:center} }

/* ---------------------------------------------------------------- 3 · PORTADA DEL CATÁLOGO (products)
   Seis paneles verticales: se elige familia con un gesto antes de ver 254 tarjetas. */
.fpanels{display:flex;gap:2px;height:min(64vh,520px);overflow:hidden;margin-top:var(--s6)}
.fpanel{position:relative;flex:1;min-width:0;overflow:hidden;background:#05080E;text-decoration:none;
  color:var(--on-dark);display:block;transition:flex 480ms var(--ease-out)}
.fpanel__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.92) brightness(.5) contrast(1.08);transition:filter 480ms var(--ease-out)}
.fpanel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(5,8,14,.94) 0%,rgba(5,8,14,.28) 56%,rgba(5,8,14,.42) 100%)}
.fpanel__in{position:absolute;z-index:2;inset:auto 0 0 0;padding:var(--s4);display:grid;gap:.45rem}
.fpanel__n{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:var(--brand-4)}
/* el nombre pasa de vertical a horizontal al abrirse el panel: writing-mode y font-size no se
   animan (el `transition:all` de antes intentaba interpolar el alto y el cuerpo de letra). El
   gesto lo da el ensanche del panel; el título solo cambia de orientación. */
.fpanel__t{font-family:var(--font-display);font-weight:800;font-size:1.05rem;line-height:1.15;
  writing-mode:vertical-rl;transform:rotate(180deg);max-block-size:17rem;transition:none}
.fpanel__more{display:grid;gap:.5rem;opacity:0;block-size:0;overflow:clip;
  transition:opacity 280ms var(--ease-out) 120ms}
@supports (interpolate-size:allow-keywords){
  .fpanel{interpolate-size:allow-keywords}
  .fpanel__more{transition:opacity 280ms var(--ease-out) 120ms,block-size 420ms var(--ease-out)}
}
.fpanel__d{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;color:var(--on-dark-soft)}
.fpanel.is-on{flex:3}
.fpanel.is-on .fpanel__img{filter:grayscale(0) brightness(.82) contrast(1.05)}
.fpanel.is-on .fpanel__t{writing-mode:horizontal-tb;transform:none;max-height:none;font-size:var(--t-h3)}
.fpanel.is-on .fpanel__more{opacity:1;block-size:auto}
.fpanel:focus-visible{outline:2px solid var(--brand-4);outline-offset:-2px}
/* chino: el texto vertical se lee de arriba a abajo. El giro de 180 grados es para el latín
   (que se lea desde abajo); con caracteres CJK los dejaría cabeza abajo. */
html[lang="zh"] .fpanel__t{transform:none}
html[lang="zh"] .fpanel.is-on .fpanel__t{transform:none}
@media (max-width:900px){
  .fpanels{display:grid;grid-template-columns:1fr;gap:1px;height:auto}
  .fpanel,.fpanel.is-on{flex:none;min-height:0}
  .fpanel__in{position:relative;inset:auto;padding:var(--s4) var(--s5);display:grid;gap:.35rem;
    grid-template-columns:auto minmax(0,1fr);align-items:baseline}
  .fpanel__n{grid-row:1}
  .fpanel__t{writing-mode:horizontal-tb;transform:none;max-height:none;font-size:var(--t-h4)}
  .fpanel__more{opacity:1;block-size:auto;overflow:visible;grid-column:2}
  .fpanel__img{filter:grayscale(.35) brightness(.5)}
  .fpanel::after{background:linear-gradient(90deg,rgba(5,8,14,.9) 0%,rgba(5,8,14,.72) 70%,rgba(5,8,14,.55) 100%)}
  .fpanel.is-on .fpanel__t{font-size:var(--t-h4)}
}
@media (prefers-reduced-motion:reduce){ .fpanel,.fpanel__t,.fpanel__more{transition:none} }

/* contenedor ancho: los paneles de calidad respiran más que el texto (no existe en site.css) */
.wide{width:100%;max-width:1560px;margin-inline:auto;padding-inline:var(--pad)}

/* ---------------------------------------------------------------- 4 · CINCO LUGARES (quality)
   Reemplaza la banda de foto decorativa: una foto por control, con su número y su frase. */
.qpans{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin-top:var(--s6)}
.qpan{position:relative;min-height:min(62vh,480px);overflow:hidden;background:#05080E;display:grid;align-items:end}
.qpan__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.58) contrast(1.06);transition:filter 520ms var(--ease-out),transform 900ms var(--ease-out)}
.qpan:hover .qpan__img,.qpan:focus-within .qpan__img{filter:brightness(.8);transform:scale(1.04)}
.qpan::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(5,8,14,.94) 0%,rgba(5,8,14,.2) 62%,transparent 100%)}
.qpan__in{position:relative;z-index:2;padding:var(--s5)}
.qpan__n{display:block;font-family:var(--font-display);font-weight:800;font-size:2.4rem;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(245,243,238,.5);margin-bottom:.5rem}
.qpan h3{font-size:var(--t-h4);color:var(--on-dark);margin-bottom:.4rem}
.qpan p{margin:0;font-size:.88rem;color:var(--on-dark-soft);block-size:0;opacity:0;overflow:clip}
@supports (interpolate-size:allow-keywords){
  .qpan{interpolate-size:allow-keywords}
  .qpan p{transition:block-size 420ms var(--ease-out),opacity 280ms var(--ease-out)}
  .qpan:hover p,.qpan:focus-within p{block-size:auto;opacity:1}
}
@supports not (interpolate-size:allow-keywords){
  .qpan:hover p,.qpan:focus-within p{block-size:auto;opacity:1}
}
@media (max-width:1240px){ .qpans{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:1000px){
  .qpans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qpan{min-height:19rem}
  .qpan p{block-size:auto;opacity:1}
}
@media (max-width:600px){ .qpans{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .qpan__img,.qpan p{transition:none} }

/* ---------------------------------------------------------------- 5 · CRONOGRAMA (how-to-order)
   Hoja apoyada sobre la noche. Secuencia y peso relativo: no hay semanas inventadas. */
.gantt{--cut:30px;position:relative;background:var(--surface-2);color:var(--ink);margin-top:var(--s6);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.85);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.sec--dark .gantt,.sec--dark .gantt .gantt__t span{color:var(--ink)}
.sec--dark .gantt p{color:var(--ink-soft)}
.sec--dark .gantt .gantt__hd{color:var(--accent-deep)}
.sec--dark .gantt .gantt__scale,.sec--dark .gantt .gantt__ft,.sec--dark .gantt .gantt__t b,
.sec--dark .gantt .gantt__bar em{color:var(--ink-mute)}
.gantt__hd{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);flex-wrap:wrap;width:100%;max-width:none;
  margin:0;padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep)}
.gantt__row{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:var(--s5);align-items:center;
  padding:.7rem var(--s5);border-bottom:1px solid var(--line-soft);transition:background-color var(--d1) var(--ease-out)}
.gantt__row:hover{background:#fff}
.gantt__t{display:grid;gap:.1rem}
.gantt__t b{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--ink-mute);font-weight:500}
.gantt__t span{font-weight:700;font-size:.95rem;color:var(--ink);line-height:1.25}
.gantt__t p{margin:.15rem 0 0;font-size:.82rem;color:var(--ink-soft);max-width:44ch}
.gantt__bar{position:relative;height:26px;background:repeating-linear-gradient(90deg,var(--surface-3) 0 1px,transparent 1px 64px)}
.gantt__bar i{position:absolute;left:var(--l);width:var(--w);top:4px;height:18px;background:var(--brand-4);
  display:block;transform-origin:left center;animation:gantt-grow var(--d3) var(--ease-out) both}
.gantt__bar i.is-open{background:repeating-linear-gradient(135deg,var(--brand-4) 0 6px,rgba(198,161,91,.3) 6px 12px)}
@keyframes gantt-grow{from{transform:scaleX(0)}to{transform:none}}
.gantt__bar em{position:absolute;top:50%;transform:translateY(-50%);left:calc(var(--l) + var(--w) + 10px);
  font-style:normal;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink-mute);
  white-space:nowrap}
.gantt__bar.is-last em{left:auto;right:calc(100% - var(--l) + 10px)}
.gantt__scale{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:var(--s5);
  padding:.5rem var(--s5) .9rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-mute)}
.gantt__scale > div{display:flex;justify-content:space-between}
.gantt__ft{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
@media (max-width:820px){
  .gantt__row,.gantt__scale{grid-template-columns:1fr}
  .gantt__bar{margin-top:.5rem;margin-bottom:1.4rem}
  .gantt__bar em,.gantt__bar.is-last em{position:static;display:block;margin-top:.55rem;transform:none}
}
@media (prefers-reduced-motion:reduce){ .gantt__bar i{animation:none} }

/* ---------------------------------------------------------------- 6 · LIBRO DE PREGUNTAS (home)
   Reemplaza el acordeón: lista a un lado, respuesta al otro. Sin JS se leen las seis. */
.qabook{display:grid;gap:var(--s6);align-items:start;border-top:1px solid var(--line-dark)}
@media (min-width:1000px){ .qabook{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:var(--s8)} }
.qalist{list-style:none;margin:0;padding:0}
@media (min-width:1000px){ .qalist{border-right:1px solid var(--line-dark)} }
.qabtn{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);width:100%;text-align:left;
  padding:var(--s4) var(--s5) var(--s4) 0;background:none;border:0;border-bottom:1px solid var(--line-dark-soft);
  cursor:pointer;color:var(--on-dark-soft);font:inherit;position:relative;
  transition:color var(--d2) var(--ease-out),translate var(--d2) var(--ease-out)}
.qabtn:hover{color:var(--on-dark);translate:10px 0}
.qabtn b{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.1em;color:var(--brand-4)}
.qabtn span{font-weight:700;font-size:1rem;line-height:1.3}
.qabtn[aria-selected="true"]{color:var(--on-dark)}
.qabtn[aria-selected="true"]::after{content:"";position:absolute;right:-1px;top:22%;bottom:22%;width:2px;
  background:var(--brand-4)}
.qapanels{position:relative}
@media (min-width:1000px){ .qapanels{padding-top:var(--s5)} }
.qapanel h3{font-size:var(--t-h3);color:var(--on-dark);margin-bottom:var(--s4)}
.qapanel p{color:var(--on-dark-soft);max-width:58ch;margin:0}
/* con JS: una respuesta a la vez, en la misma celda (sin salto de altura) */
html.js .qapanel{position:absolute;inset:0;visibility:hidden;opacity:0;translate:0 10px;
  transition:opacity .28s var(--ease-out),translate .28s var(--ease-out),visibility 0s linear .28s}
html.js .qapanel.is-on{position:relative;inset:auto;visibility:visible;opacity:1;translate:0 0;transition-delay:0s}
html.js .qapanels{min-height:14rem}
/* sin JS: las seis respuestas, una debajo de otra */
html:not(.js) .qapanel{padding-bottom:var(--s5);border-bottom:1px solid var(--line-dark-soft)}
@media (prefers-reduced-motion:reduce){ html.js .qapanel{transition:none} }

/* ---------------------------------------------------------------- 7 · PIE «lista de empaque» (F1)
   El pie era la última banda plana del sitio: gana lugar (la nave al fondo), un filo dorado que lo
   cose con el CTA y la foto de cada familia en su mosaico. */
.ft{position:relative;isolation:isolate;overflow:clip}
.ft::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--ft-img);
  background-size:cover;background-position:center 62%;filter:grayscale(1);opacity:.12}
.ft::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(0deg,var(--brand-1) 14%,rgba(11,18,32,.88) 68%,var(--brand-1) 100%)}
.ft__edge{position:absolute;top:0;left:0;right:0;height:2px;z-index:1;
  background:linear-gradient(90deg,var(--brand-4) 0%,rgba(198,161,91,.16) 58%,transparent 100%)}
.ft__tile{overflow:hidden}
.ft__tile .ft__timg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16;
  transition:opacity var(--d2) var(--ease-out),transform 600ms var(--ease-out)}
.ft__tile > b,.ft__tile > .ft__tname,.ft__tile > small{position:relative;z-index:1}
.ft__tile:hover .ft__timg{opacity:.34;transform:scale(1.06)}
.ft__tile:hover{background:rgba(11,18,32,.55)}
@media (prefers-reduced-motion:reduce){ .ft__tile .ft__timg{transition:none} }


/* --- el índice de sectores lleva a su banda: el orden es navegación, no decoración -------- */
.yard{scroll-margin-top:calc(var(--hdr-h) + 1.5rem)}
.mapsec{display:flex;align-items:baseline;gap:.6rem;color:var(--ink);font-weight:700;
  border-bottom:1px solid transparent}
.mapsec__n{font-family:var(--font-mono);font-size:.7rem;font-weight:400;color:var(--accent-deep);
  letter-spacing:.06em}
@media (hover:hover){ .mapsec:hover{color:var(--accent-deep);border-bottom-color:var(--accent)} }

/* ---------------------------------------------------------------- catálogo: entrada directa al listado
   Pedido de Diego (20-sep): products.html abre en la grilla. El encabezado pierde la columna de cifras
   y el aire de abajo, y la sección del catálogo arranca pegada a él. */
.subhero--flat{padding-block:clamp(1.6rem,3vw,2.4rem) clamp(1.1rem,2vw,1.6rem)}
.subhero--flat h1{max-width:24ch}
.subhero--flat p{max-width:70ch;margin-top:var(--s3)}
.subhero--flat + .sec{padding-top:clamp(1.4rem,2.4vw,2rem)}


/* ============================================================================
   ESCENARIO: la primera pantalla entra entera en el teléfono (20-sep, pedido de Diego)
   Medido antes: 1.020 px de escenario sobre un viewport de 844, así que la etiqueta de carga,
   las pestañas de familia y los controles caían debajo del pliegue y había que scrollear para
   ver de qué se trataba. Va al final del archivo a propósito: las reglas del escenario v4 se
   agregaron después del bloque original y, con la misma especificidad, gana la última.
   ========================================================================== */
@media (max-width:999px){
  /* la etiqueta de carga no se pierde: sus datos ya están a la vista en esta misma pantalla
     —los chips bajo el nombre de la familia son sus mismas palabras y el conteo vive en la
     pestaña—, así que en el teléfono se va y deja entrar a las pestañas */
  .stage__side{display:none}
  .stage__poster{height:clamp(180px,26svh,290px)}
  .stage__grid{align-content:center;gap:var(--s4);
    padding-top:clamp(140px,22svh,230px);padding-bottom:var(--s4)}
  .stage h1{font-size:clamp(1.7rem,5.9vw,2.1rem);margin-bottom:var(--s4)}
  .stage__cta{gap:var(--s2);margin-top:var(--s4)}
  .stage__bar{padding-block:var(--s2) var(--s4)}
}
@media (max-width:999px) and (max-height:720px){
  /* teléfonos bajos (360x640): un escalón menos de tipografía y de foto */
  .stage__poster{height:clamp(140px,20svh,210px)}
  .stage__grid{padding-top:clamp(110px,18svh,180px);gap:var(--s3)}
  .stage h1{font-size:1.5rem;margin-bottom:var(--s3)}
  .stage__name{font-size:1.15rem}
}

/* ==========================================================================
   CATÁLOGO · rail de filtros acotado y barra de resultados a la vista
   (bloque nuevo, 2026-09-20 — no modifica ninguna regla anterior)

   Por qué: el rail lista 6 familias y 43 grupos. Apilados miden 2265 px medidos,
   más alto que cualquier pantalla, así que el `position:sticky` de .filters se clava
   con el pie fuera de la ventana: de los 43 grupos se llegaba a unos 11 y los otros
   quedaban inalcanzables. En el teléfono ese mismo rail (2220 px) deja la primera
   tarjeta recién en y=2788. Acotando la lista de grupos el rail vuelve a entrar en la
   ventana (774 px); y la barra de resultados —contador, filtros activos y quitar— se
   queda pegada bajo el header, que es donde hace falta cuando ya se está en el listado.
   ========================================================================== */
#grpfilters{max-height:32rem;overflow:auto;overscroll-behavior:auto;scrollbar-width:thin}
#grpfilters{max-height:max(9rem, calc(100svh - var(--hdr-h) - 26rem))}
@media (max-width:999px){ #grpfilters{max-height:13rem} }

.catbar{position:sticky;top:var(--hdr-h);z-index:4;
  background:var(--surface);padding-top:var(--s3);margin-bottom:0}
.catbar + .pgrid{margin-top:var(--s5)}
.catbar__r{display:flex;align-items:center;gap:var(--s3);flex:none}
/* en el teléfono la barra pegada no puede comerse un cuarto de la pantalla */
@media (max-width:999px){
  .catbar{gap:var(--s2);padding-top:var(--s2);padding-bottom:var(--s3)}
  .catbar .srch--light input{padding-block:.72rem}
}

.clrbtn{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-deep);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:.35rem .6rem;
  transition:border-color var(--d2) var(--ease-out),background var(--d2) var(--ease-out)}
@media (hover:hover){ .clrbtn:hover{border-color:var(--accent);background:var(--surface-2)} }
.clrbtn:focus-visible{outline:2px solid var(--brand-4);outline-offset:2px}

.catchips{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0;list-style:none}
.cchip{display:inline-flex;align-items:center;gap:.45rem;max-width:22rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;
  color:var(--on-dark);background:var(--brand-1);border:1px solid var(--brand-1);
  border-radius:var(--radius);padding:.25rem .5rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background var(--d2) var(--ease-out),border-color var(--d2) var(--ease-out)}
.cchip span{flex:none;color:var(--brand-5);font-size:.9rem;line-height:1}
@media (hover:hover){ .cchip:hover{background:var(--brand-2);border-color:var(--brand-2)} }
.cchip:focus-visible{outline:2px solid var(--brand-4);outline-offset:2px}
/* [hidden] pierde contra una clase que declara display: hay que devolverselo a mano */
.catchips[hidden],.clrbtn[hidden]{display:none}


/* ---------------------------------------------------------- calidad · tabla de factores apilada
   Medido a 360 px: las tres columnas de «factor de diseño» pedían 344 px dentro de un riel
   de 323 y dejaban un scroll horizontal escondido adentro de la banda oscura. Se apila con el
   mismo patrón .tbl--stack que ya usa la tabla de aplicaciones; acá solo van los colores que
   ese patrón no tenía, porque nació sobre fondo claro. Apilada, cada fila ya es una ficha
   con su borde: el cebrado de la tabla ancha se apaga (si no, pinta la celda y no la fila). */
@media (max-width:640px){
  .sec--dark .tbl--stack tr{border-bottom-color:var(--line-dark)}
  .sec--dark .tbl--stack td[data-l]::before{color:var(--on-dark-mute)}
  .tbl.tbl--stack tbody tr:nth-child(even) td{background:none}
  .sec--dark .tbl--stack tbody tr:nth-child(even) td{background:none}
}
/* el pie del panel de «cinco lugares» ya no repite la planilla: dice el lugar y el momento,
   que es justo lo que promete el rótulo de la banda. En diez palabras entra sin plegarse, así
   que deja de esconderse detrás del hover (en el teléfono nunca hubo hover). La foto conserva
   su realce al pasar el puntero. */
.qpan p{block-size:auto;opacity:1}


/* ==================================================================================================
   aplicaciones + empresa (20-sep, ronda 2)
   Bloque aditivo: no modifica ninguna regla anterior. Tres piezas nuevas
     .ref__n / .ref__s  · la fila de «lo que mas se mueve» es el enlace entero, con su flecha
     .yard__ct          · el peso del sector, en el mismo renglon del numero de banda
     .faq__sec          · de que patio sale cada pregunta del acordeon
     .tbl--check        · tabla de lo comprobable (empresa): la 2.a columna es un enlace, no un dato
   ================================================================================================== */

/* --- aplicaciones · la referencia concreta es lo que hay que ver ------------------------------- */
.yard .indcard__refs li{padding-top:0;padding-bottom:0}
.yard .indcard__refs a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  align-items:baseline;gap:.75rem;width:100%;min-width:0;padding:.45rem 0;text-decoration:none;
  color:var(--ink);border-left:2px solid transparent;
  transition:color .18s ease,border-color .18s ease}
/* min-width:0 arriba: el <a> es item flex del <li> y sin eso no baja de su ancho de contenido,
   asi que los nombres largos (cable de ascensor, variador) pisaban la medida */
/* white-space:normal: .indcard__refs span traia nowrap (era solo la medida) y con el nombre
   dentro del <a> los nombres largos dejaban de cortar y empujaban la pagina a 567 px en 360 */
.yard .indcard__refs .ref__n{min-width:0;font-size:.9rem;line-height:1.35;color:inherit;
  white-space:normal;overflow-wrap:anywhere}
.yard .indcard__refs .ref__s{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-mute);
  white-space:nowrap}
.yard .indcard__refs a::after{content:"\2192";font-family:var(--font-mono);font-size:.8rem;
  line-height:1;color:var(--accent-deep);opacity:.45;transform:translateX(-.15rem);
  transition:opacity .18s ease,transform .18s ease}
@media (hover:hover){
  /* el enlace no se mueve al pasar el puntero: animar padding refluia la fila, y desplazarlo
     con translate lo sacaba 8 px fuera de su columna. El filete dorado, el color y la flecha
     que avanza ya marcan el hover sin correr el objetivo de clic. */
  .yard .indcard__refs a:hover{color:var(--accent-deep);border-left-color:var(--accent)}
  .yard .indcard__refs a:hover .ref__s{color:var(--accent-deep)}
  .yard .indcard__refs a:hover::after{opacity:1;transform:translateX(0)}
}
.yard .indcard__refs a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;
  border-left-color:var(--accent)}
@media (max-width:479px){
  /* en 360 el nombre completo y la medida no entran en la misma linea */
  .yard .indcard__refs a{grid-template-columns:minmax(0,1fr) auto;row-gap:.15rem}
  .yard .indcard__refs .ref__s{grid-column:1;font-size:.68rem}
  .yard .indcard__refs a::after{grid-column:2;grid-row:1}
}

/* --- aplicaciones · el peso del sector, donde ya esta el numero de banda ----------------------- */
.yard__n{flex-wrap:wrap}
.yard__n::after{order:2}
.yard__ct{order:3;flex:none;font-family:var(--font-mono);font-weight:400;font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}

/* --- aplicaciones · la pregunta vuelve a tener patio ------------------------------------------- */
.faq__sec{display:block;font-family:var(--font-mono);font-weight:400;font-size:.62rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:.28rem}
.sec--dark .faq__sec{color:var(--on-dark-mute)}

/* --- empresa · tabla de lo comprobable --------------------------------------------------------- */
.tbl--check td:last-child{white-space:nowrap}
.tbl--check td:last-child a{font-weight:700;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:1px}
@media (hover:hover){
  .tbl--check td:last-child a:hover{color:var(--accent-deep);border-bottom-color:var(--accent)}
}
.tbl--check td:last-child a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:799px){ .tbl--check td:last-child{white-space:normal} }

@media (prefers-reduced-motion:reduce){
  .yard .indcard__refs a,.yard .indcard__refs a::after{transition:none}
}