/*
 * Pantallas de Innovación, Showroom y proveedores del Master (filas 55 a 66): 05, 05.1, 05.2, 07_1, SUPPLIERS_08,
 * 07_2 (las 8 categorías), 09 (p. 40 del PDF), 10 y 11. Se carga después de sistema.css y solo usa sus tokens;
 * aquí, los componentes que estas pantallas añaden. Piezas en Twig: templates/web/_pantallas.html.twig.
 */

/* ---------- Comunes ---------- */
.punto-oro{color:var(--oro)}
.boton--pequeno{min-height:2.4rem;padding:.45rem 1.5rem;font-size:var(--t-xs);letter-spacing:.08em;gap:.7rem}
.boton--pequeno svg{width:1.2em;height:1.2em}
.tss-icono{width:1.6rem;height:1.6rem;flex:none;color:var(--oro)}
.linea-oro{display:block;width:2.6rem;height:2px;margin:var(--e-4) 0;background:var(--oro);border:0}
.texto-serif{font-family:var(--fuente-titulares);font-variation-settings:"opsz" var(--opsz-titulares)}

/* Migas: SHOWROOM › CERAMICS & SURFACES */
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:.2em .7em;margin:0 0 var(--e-4);padding:0;font:500 var(--t-xs)/1.3 var(--fuente-texto);letter-spacing:.12em;text-transform:uppercase;color:var(--oro)}
.migas li+li::before{content:"›";margin-right:.7em;color:var(--oro)}
.migas a{color:var(--oro);text-decoration:none}
.migas a:hover{text-decoration:underline}

/* ---------- Cabecera de pantalla (SUPPLIERS, 07_2, 10) ---------- */
.pantalla-cab{position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--alto-cab,clamp(17rem,19vw,24rem));background:var(--negro);border-bottom:1px solid var(--linea-suave);overflow:hidden}
.pantalla-cab__foto{position:absolute;z-index:-1;inset:0 0 0 var(--inicio-foto,36%);margin:0}
.pantalla-cab__foto img{width:100%;height:100%;object-fit:cover;object-position:var(--foco-foto,50% 50%)}
.pantalla-cab__foto::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--negro) 0%,rgba(0,0,0,.55) 7%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 72%,rgba(0,0,0,.6) 86%,rgba(0,0,0,.85) 100%)}
.pantalla-cab__texto{padding-block:clamp(1.75rem,2.6vw,3rem)}
.pantalla-cab__titulo{display:flex;align-items:flex-start;gap:clamp(.8rem,1.6vw,1.75rem);max-width:min(44rem,var(--ancho-texto,44%))}
.pantalla-cab__numero{flex:none;font:400 clamp(3rem,1.6rem + 3.4vw,5.6rem)/.8 var(--fuente-titulares);color:var(--oro)}
.pantalla-cab__antetitulo{margin:0 0 var(--e-3);font:400 var(--t-s)/1.2 var(--fuente-texto);letter-spacing:.32em;text-transform:uppercase}
.pantalla-cab__h1{font-size:clamp(1.9rem,1rem + 2.6vw,3.6rem);line-height:1;text-transform:uppercase;letter-spacing:.005em;color:var(--blanco)}
.pantalla-cab__subtitulo{margin:var(--e-3) 0 0;font:400 clamp(.8rem,.7rem + .3vw,1.05rem)/1.4 var(--fuente-texto);letter-spacing:.24em;text-transform:uppercase}
.pantalla-cab__subtitulo::after{content:"";display:block;width:2.4rem;height:2px;margin-top:var(--e-4);background:var(--oro)}
.pantalla-cab__intro{margin:var(--e-4) 0 0;max-width:34rem;font:400 clamp(.95rem,.85rem + .3vw,1.15rem)/1.4 var(--fuente-titulares);font-variation-settings:"opsz" var(--opsz-titulares);color:var(--texto)}
.pantalla-cab__lema{position:absolute;right:var(--margen);top:50%;transform:translateY(-50%);width:9.5em;margin:0;font:500 clamp(.7rem,.6rem + .2vw,.875rem)/1.65 var(--fuente-texto);letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
.pantalla-cab__lema::after{content:"";display:block;width:2.2rem;height:1px;margin-top:var(--e-4);background:var(--oro)}
/* SUPPLIERS.: el titular grande, con el punto en oro, y debajo un subtítulo serif */
.pantalla-cab--grande .pantalla-cab__h1{font-size:clamp(2.6rem,1rem + 4.2vw,5.4rem);line-height:.92}
.pantalla-cab--grande .pantalla-cab__subtitulo{margin-top:var(--e-2);font:400 clamp(1.3rem,.9rem + 1.3vw,2.6rem)/1.05 var(--fuente-titulares);letter-spacing:.01em}
.pantalla-cab--grande .pantalla-cab__subtitulo::after{display:none}
@media (max-width:899.98px){
  .pantalla-cab{flex-direction:column;align-items:stretch;min-height:0}
  .pantalla-cab__foto{position:relative;inset:auto;height:clamp(12rem,52vw,22rem)}
  .pantalla-cab__foto::after{background:linear-gradient(0deg,var(--negro) 0%,rgba(0,0,0,.3) 30%,rgba(0,0,0,0) 60%)}
  .pantalla-cab__texto{padding-top:var(--e-2)}
  .pantalla-cab__titulo{max-width:none}
  .pantalla-cab__lema{position:static;transform:none;width:auto;padding:0 var(--margen) var(--e-6)}
  .pantalla-cab__lema::after{display:none}
}
@media (max-width:520px){.pantalla-cab__titulo--numero{flex-direction:column;gap:var(--e-3)}}

/* ---------- Tira «Trusted brands» (showroom.js la desliza) ---------- */
.tss-tira{display:flex;align-items:center;gap:var(--e-5);padding:clamp(1.25rem,2vw,2.2rem) var(--margen);background:radial-gradient(120% 140% at 50% 140%,rgba(242,180,82,.28),rgba(242,180,82,0) 55%),#050505;border-top:1px solid var(--linea-suave)}
.tss-tira-etiqueta{flex:none;max-width:13em;margin:0;padding-right:var(--e-5);border-right:1px solid var(--oro);font:400 var(--t-xs)/1.45 var(--fuente-texto);letter-spacing:.06em;text-transform:uppercase}
.tss-tira-marcas{flex:1;min-width:0;display:flex;align-items:center;gap:clamp(1.5rem,2.6vw,3rem);overflow-x:auto;scrollbar-width:none;padding-block:var(--e-2)}
.tss-tira-marcas::-webkit-scrollbar{display:none}
/* D-PRIN-109: si quedan marcas a la derecha (showroom.js pone .tss-tira--mas), el borde se funde: se ve que hay más, no un logo cortado. */
.tss-tira--mas .tss-tira-marcas{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 6rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 6rem),transparent)}
.tss-tira-marca{position:relative;flex:none;display:flex;align-items:center;color:var(--blanco);text-decoration:none;opacity:.92}
.tss-tira-marca:hover{opacity:1}
/* Con .tss-tira-marca delante: «.web img» (max-width:100%) pesaba más y un logo ancho (Alumdec) ocupaba toda la tira. */
.tss-tira-marca .tss-tira-logo{max-height:1.7rem;max-width:10rem;width:auto;height:auto}
.tss-tira-nombre{font:400 var(--t-l)/1 var(--fuente-titulares);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
/* La franja fija de la maqueta del Showroom (diap. 25): las 19 en una fila a 1440, más juntas y pequeñas; en estrecho, varias filas, sin carrusel. */
.tss-tira--maqueta .tss-tira-marcas{flex-wrap:wrap;overflow:visible;gap:.6rem clamp(.8rem,1.4vw,1.6rem);justify-content:space-between}
.tss-tira--maqueta .tss-tira-marca .tss-tira-logo{max-height:1.25rem;max-width:5.5rem}
.tss-tira--maqueta .tss-tira-nombre{font:500 var(--t-2xs)/1.1 var(--fuente-texto);letter-spacing:.08em;white-space:normal;max-width:7em;text-align:center}
/* Desde 1100, en UNA fila como la maqueta (a 1440 sus logos miden ~45 px): cada marca encoge si no cabe, sin partir la fila. */
@media (min-width:1100px),(min-width:900px) and (orientation:landscape){   /* desde 900 en horizontal también (SEG-p18-villa-emmar-diap25-1024-4): los logos con su ancho de la diapositiva, en una fila */
  .tss-tira--maqueta .tss-tira-marcas{flex-wrap:nowrap;gap:clamp(.3rem,.55vw,.8rem)}   /* d25: con el ancho por marca de la diapositiva (abajo) las 19 caben sin encoger a 1440 */
  .tss-tira--maqueta .tss-tira-lema{max-width:7em;color:var(--blanco);border-left-color:var(--blanco);font-size:max(.7rem,.78vw);letter-spacing:.08em;line-height:1.35}   /* «MÁS QUE UN SHOWROOM.» como en la diapositiva 25 (V9 22-oct): blanco, pequeño, en tres líneas, con la raya blanca; salía dorado y más grande */
  .tss-tira--maqueta .tss-tira-marca{flex:0 1 auto;min-width:0}
  .tss-tira--maqueta .tss-tira-marca .tss-tira-logo{max-width:100%;max-height:1.15rem}
  /* d25 (V3, logos de la franja a 1440): el ancho de cada marca es el de su hueco en la diapositiva 25 (medido sobre ella: 78, 40, 51, 43… px a 1440), no un tope de 18 px de alto igual para todas (TAU, Marbres, Premium Wood, Orideck, Frepi y Alpha salían diminutas, Matter, Porcelanosa y Ascale demasiado grandes). Matter, Buo Home y Ascale (logo oficial mucho más apaisado que el de la maqueta) van a 0,8vw de alto (legibles) y Marbres y Orideck (oficial apilado y con icono grande, a su ancho saldrían de 37 y 32 px de alto) a 1,7vw de alto en vez del ancho de la maqueta (saldrían de 5 px). Las formas de algunos logos (Matter, APAVISA, TRES, Orideck) son las del logo oficial, no el rasterizado de la maqueta: diferencia aceptada (puente, 22-oct). */
  .tss-tira--maqueta .tss-tira-marca .tss-tira-logo{height:auto;max-height:none}
  .tss-tira--maqueta .tss-tira-logo[src*="/porcelanosa.png"]{width:5.4vw}
  .tss-tira--maqueta .tss-tira-logo[src*="/tau-ceramica.png"]{width:2.8vw}
  .tss-tira--maqueta .tss-tira-logo[src*="/cosentino.png"]{width:3.5vw}
  .tss-tira--maqueta .tss-tira-logo[src*="/apavisa.png"]{width:3vw}
  .tss-tira--maqueta .tss-tira-logo[src*="/ascale.png"]{width:auto;height:.8vw}
  .tss-tira--maqueta .tss-tira-logo[src*="/xtone.png"]{width:3.2vw}
  .tss-tira--maqueta .tss-tira-logo[src*="/tres.png"]{width:2.4vw}
  .tss-tira--maqueta .tss-tira-logo[src*="/frepi.png"]{width:2.4vw}
  .tss-tira--maqueta .tss-tira-logo[src*="/insolit.png"]{width:3.5vw}
  .tss-tira--maqueta .tss-tira-logo[src*="/matter-atelier.png"]{width:auto;height:.8vw}
  .tss-tira--maqueta .tss-tira-logo[src*="/buohome.png"]{width:auto;height:.8vw}
  .tss-tira--maqueta .tss-tira-logo[src*="/rekker.svg"]{width:2.48vw}
  .tss-tira--maqueta .tss-tira-logo[src*="/elica.png"]{width:2.2vw}
  .tss-tira--maqueta .tss-tira-logo[src*="/marbres-diseny.png"]{width:auto;height:1.7vw}
  .tss-tira--maqueta .tss-tira-logo[src*="/liebherr.png"]{width:3.5vw}
  .tss-tira--maqueta .tss-tira-logo[src*="/premium-wood.svg"]{width:2.78vw}
  .tss-tira--maqueta .tss-tira-logo[src*="/riood.svg"]{width:2.99vw}
  .tss-tira--maqueta .tss-tira-logo[src*="/orideck.png"]{width:auto;height:1.7vw}
  .tss-tira--maqueta .tss-tira-logo[src*="/alpha-lighting.svg"]{width:2.29vw}
}
.tss-tira-flecha{flex:none;width:2.4rem;height:2.4rem;background:none;border:0;color:var(--oro);font-size:2rem;line-height:1;cursor:pointer}
.tss-tira-lema{flex:none;max-width:13em;margin:0;padding-left:var(--e-5);border-left:1px solid var(--oro);font:500 var(--t-xs)/1.5 var(--fuente-texto);letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
@media (max-width:899.98px){
  .tss-tira{flex-wrap:wrap}
  .tss-tira-etiqueta{border:0;padding:0;max-width:none;flex-basis:100%}
  .tss-tira-lema{border:0;padding:0;max-width:none;flex-basis:100%}
}

/* ---------- Franja final (BARCELONA | DUBAI · DESIGN · TECHNOLOGY · INVEST. LIVE. BELONG.) ---------- */
.franja-final{border-top:1px solid rgba(242,180,82,.45);background:var(--negro)}
.franja-final__fila{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--e-3) var(--e-6);min-height:3.6rem;padding-block:var(--e-3)}
.franja-final p{margin:0;font:400 var(--t-xs)/1.4 var(--fuente-texto);letter-spacing:.2em;text-transform:uppercase}
.franja-final .franja-final__oro{color:var(--oro);letter-spacing:.3em}
/* D-PRIN-2144 (diap. 20, 390): SOLO en Innovación (.innova + .franja-final; el parcial es común) la franja va a ancho completo en UNA fila de tres columnas (como la diapositiva), no apilada en tres líneas. A 390, letra de 10 px como mínimo (W9 y Codex: ~8 px no se leía); cada columna puede ir en 2 renglones. */
@media (max-width:899.98px){.franja-final__fila{justify-content:center;text-align:center}.franja-final__oro{order:-1;flex-basis:100%}}
@media (max-width:899.98px){.innova + .franja-final .franja-final__fila{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:var(--e-2);text-align:center;padding-inline:var(--e-3)}.innova + .franja-final p{font-size:clamp(.625rem,2.6vw,.75rem);letter-spacing:.04em;line-height:1.35}.innova + .franja-final .franja-final__oro{letter-spacing:.08em;order:0;flex-basis:auto}.innova + .franja-final .franja-final__fila>p:first-child{text-align:left}.innova + .franja-final .franja-final__fila>p:last-child{text-align:right}}

/* ---------- Ventajas con título y texto (09, 11) ---------- */
.ventajas-fila{display:flex;align-items:center;gap:var(--e-6);padding:clamp(1.5rem,2.4vw,2.6rem) var(--margen);background:#0b0b0b;border-top:1px solid var(--linea-suave)}
.ventajas-fila__lista{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin:0;padding:0;list-style:none}
.ventajas-fila__lista li{display:flex;flex-direction:column;align-items:center;gap:var(--e-2);padding:var(--e-3) var(--e-4);text-align:center}
.ventajas-fila__lista li+li{background:linear-gradient(var(--oro),var(--oro)) left center/1px 70% no-repeat}
.ventajas-fila__lista .tss-icono{width:2.4rem;height:2.4rem;margin-bottom:var(--e-2)}
.ventajas-fila__lista strong{font:500 var(--t-xs)/1.4 var(--fuente-texto);letter-spacing:.14em;text-transform:uppercase}
.ventajas-fila__lista span{max-width:15em;font:400 var(--t-s)/1.4 var(--fuente-titulares);color:var(--texto-suave)}
.ventajas-fila__lema{flex:none;width:11em;min-width:min-content;margin:0;padding-left:var(--e-6);border-left:1px solid var(--oro);font:500 clamp(.8rem,.7rem + .3vw,1rem)/1.45 var(--fuente-texto);letter-spacing:.16em;text-transform:uppercase;color:var(--oro)}
/* min-content: una palabra larga del lema («EXCEPCIONALES.») no se sale de su columna hacia el borde de la pantalla. */
.ventajas-fila__lema::after{content:"";display:block;width:2.4rem;height:2px;margin-top:var(--e-3);background:var(--oro)}
@media (max-width:899.98px){
  .ventajas-fila{flex-direction:column;align-items:stretch}
  .ventajas-fila__lista{grid-template-columns:repeat(2,1fr)}
  .ventajas-fila__lista li+li{background:none}
  .ventajas-fila__lema{width:auto;border:0;padding:0;text-align:center}
  .ventajas-fila__lema::after{margin-inline:auto}
}

/* ---------- Pasos 01-06 (05.1 y 05.2) ---------- */
.pasos{list-style:none;margin:0;padding:0 0 var(--e-5);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;background:var(--negro);border-top:1px solid rgba(242,180,82,.4);border-bottom:1px solid rgba(242,180,82,.4)}
.paso{display:flex;flex-direction:column;background:#070707}
.paso__cabeza{display:flex;align-items:center;gap:.65rem;min-height:4.2rem;margin:0;padding:.5rem clamp(.6rem,1vw,1.4rem)}
.paso__numero{flex:none;font:400 clamp(1.8rem,1.2rem + 1.1vw,2.6rem)/1 var(--fuente-titulares);color:var(--oro)}
.paso__titulo{flex:1;font:400 clamp(.7rem,.6rem + .25vw,.875rem)/1.3 var(--fuente-texto);letter-spacing:.03em;text-transform:uppercase}
.paso__flecha{flex:none;color:var(--oro)}
.paso__flecha svg{width:1.4rem;height:1.4rem}
.paso__foto{width:100%;aspect-ratio:3/2;object-fit:cover}
.paso__texto{margin:0;padding:var(--e-3) var(--e-3) 0;text-align:center;font:400 clamp(.78rem,.7rem + .2vw,.92rem)/1.4 var(--fuente-texto)}
@media (max-width:1099.98px){.pasos{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--e-5)}}
@media (max-width:640px){.pasos{grid-template-columns:repeat(2,minmax(0,1fr))}.paso__flecha{display:none}}

/* ---------- Banda de cierre (05.1, 05.2): lema · texto · botón · iconos ---------- */
.banda-cierre{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,46fr) auto;align-items:center;justify-content:space-between;gap:var(--e-5) var(--e-6);padding:clamp(1.25rem,2vw,2.2rem) var(--margen);background:var(--negro)}
.banda-cierre>*{min-width:0;overflow-wrap:break-word}
.banda-cierre>*+*{padding-left:var(--e-6);border-left:1px solid var(--oro)}
.banda-cierre__lema{margin:0;font:400 clamp(.95rem,.55rem + .75vw,1.3rem)/1.3 var(--fuente-titulares);letter-spacing:.06em;text-transform:uppercase}
.banda-cierre__lema span{display:block;color:var(--oro);font-size:.82em;letter-spacing:.1em}
.banda-cierre__medio{display:flex;align-items:center;justify-content:center;gap:var(--e-6)}
@media (min-width:1280px){.banda-cierre .boton{white-space:nowrap}}
.banda-cierre__texto{flex:1 1 14em;max-width:24em}
/* La lista de sectores de Filmbase (05.2) no cabía al lado del botón en castellano y quedaba en una columna de una palabra por línea: el botón baja debajo. */
.banda-cierre__medio:has(.banda-cierre__texto--sectores){flex-wrap:wrap}
.banda-cierre__texto--sectores{min-width:min(14em,100%)}
.banda-cierre__texto{margin:0;font:400 clamp(.8rem,.6rem + .35vw,1rem)/1.5 var(--fuente-texto);letter-spacing:.1em;text-transform:uppercase}
.banda-cierre__iconos{display:flex;gap:clamp(1rem,2.2vw,2.6rem);margin:0;list-style:none}
.banda-cierre__iconos li{display:flex;flex-direction:column;align-items:center;gap:var(--e-2);max-width:7em;text-align:center;font:400 var(--t-xs)/1.3 var(--fuente-texto);text-transform:uppercase}
.banda-cierre__iconos .tss-icono{width:2rem;height:2rem}
@media (max-width:1279.98px){
  .banda-cierre{grid-template-columns:1fr 1fr}
  .banda-cierre>*+*{padding-left:0;border-left:0}
  .banda-cierre__medio{flex-wrap:wrap}
}
@media (max-width:760px){.banda-cierre{grid-template-columns:1fr;text-align:center}.banda-cierre__medio,.banda-cierre__iconos{justify-content:center}}

/* ---------- 05 Innovation ---------- */
.innova{position:relative;background:var(--negro)}
.innova__cabeza{text-align:center;padding:var(--e-7) var(--margen) var(--e-5)}
.innova__titulo{text-wrap:balance;font-size:clamp(1.7rem,.9rem + 2.4vw,3.45rem);line-height:1.05;text-transform:uppercase;color:var(--blanco);letter-spacing:.01em}
.innova__antetitulo{display:block;margin-bottom:.55em;font:300 clamp(.85rem,.6rem + .7vw,1.45rem)/1 var(--fuente-texto);letter-spacing:.5em;color:var(--oro);padding-left:.5em}
.innova__pilar{white-space:nowrap}   /* D-PRIN-2144: el «·» abre el siguiente trozo; nunca queda colgando al final de línea */
.innova__pilares{margin:.7em 0 0;font:300 clamp(.75rem,.55rem + .7vw,1.4rem)/1.2 var(--fuente-texto);letter-spacing:.38em;text-transform:uppercase}
.innova__cita{margin:var(--e-5) auto 0;max-width:20rem;font:italic 400 clamp(1rem,.8rem + .6vw,1.4rem)/1.35 var(--fuente-titulares);text-align:left}
.innova__cita p{margin:0}
.innova__cita footer{margin-top:var(--e-4);padding-top:var(--e-4);border-top:1px solid var(--oro);width:3rem;white-space:nowrap;font:400 clamp(.7rem,.6rem + .3vw,1rem)/1 var(--fuente-texto);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--oro)}
.innova__paneles{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--e-6) var(--e-4);padding:0 var(--margen) var(--e-8)}
.innova__panel{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--e-3)}
/* D-PRIN-162 (W7, puente 21-oct): la foto del panel es la del Drive (con el logo SS plateado en matte, a tamaño natural) y el rótulo, nombre y dominio, es TEXTO
   sobre ella. Todo se mide en «px del héroe» (--u: 1 px de la diapositiva de 1672 de ancho): en móvil respecto al ancho de la lámina (--w = ancho de su foto), en escritorio respecto al ancho de la ventana. */
.innova__lamina{position:relative;margin:0 0 var(--e-3);width:100%;container-type:inline-size}
.innova__foto{display:block;width:100%;height:auto;aspect-ratio:var(--w,1)/450;object-fit:cover}
.innova__marca{--u:calc(100cqw / var(--w));position:absolute;left:0;right:0;top:55.6%;text-align:center;color:var(--blanco);pointer-events:none}
.innova__marca-nombre{display:block;font:300 calc(32 * var(--u))/1.15 var(--fuente-texto);letter-spacing:.2em;text-transform:uppercase;padding-left:.2em;text-shadow:0 0 calc(10 * var(--u)) rgba(0,0,0,.9),0 0 calc(3 * var(--u)) rgba(0,0,0,.7)}   /* D-PRIN-162: «PERFORMANCE» blanco sobre el coche claro de la foto del Drive no se leía */
.innova__marca-oro{font:700 calc(46 * var(--u))/1 var(--fuente-titulares);letter-spacing:.02em;color:var(--oro);margin-right:.2em}
.innova__marca-oro{-webkit-text-stroke:calc(1.6 * var(--u)) currentColor;paint-order:stroke fill}   /* W11 (SEG-USAR-innovacion-*, «AI» cortado a «Λ I»): el travesaño fino de la A del titular desaparecía a este tamaño; un contorno del mismo color lo hace visible como en la diapositiva 20. Solo el «AI» del rótulo de AI Designer */
.innova__marca-nombre::after{content:"";display:block;width:82%;height:1px;margin:calc(14 * var(--u)) auto 0;background:linear-gradient(90deg,transparent,var(--oro) 12%,var(--oro) 88%,transparent);box-shadow:0 0 calc(7 * var(--u)) rgba(242,180,82,.6)}
.innova__marca-dominio{display:inline-flex;align-items:center;gap:calc(14 * var(--u));margin-top:calc(16 * var(--u));font:500 calc(22 * var(--u))/1 var(--fuente-titulares);letter-spacing:.07em;text-transform:uppercase;color:var(--oro);text-decoration:none;pointer-events:auto;text-shadow:0 0 calc(8 * var(--u)) rgba(0,0,0,.95),0 0 calc(3 * var(--u)) rgba(0,0,0,.85)}
.innova__marca-dominio::before,.innova__marca-dominio::after{content:"";width:calc(28 * var(--u));height:1px;background:var(--oro)}
.innova__panel-titulo{font-size:clamp(1.05rem,.9rem + .5vw,1.3rem);letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
.innova__panel-texto{max-width:20em;margin:0;font-size:var(--t-m);line-height:1.35}
.innova__boton{min-width:min(15rem,100%);margin-top:auto}
/* Diap. 20 a 768 (V9): los tres paneles en una fila (con auto-fit cabían 2 y Performance quedaba solo) y la cita centrada de verdad */
@media (min-width:600px) and (max-width:1023.98px){.innova__paneles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1023.98px){.innova__cita{width:max-content;max-width:calc(100% - 2 * var(--margen));text-align:center}.innova__cita footer{margin-inline:auto}}
/* D-PRIN-2144 (diap. 20, 390): los tres paneles con la misma proporción 4:5 (alturas iguales, no 350/435/342), la foto del Drive a 2× y, como en la diapositiva,
   el texto y el botón SOBRE la foto (se funde a negro por abajo), no debajo. El rótulo mide en «px del héroe» sobre la foto ya a su altura (--u = 125cqw / 450). */
@media (max-width:1023.98px){
  .innova__foto{aspect-ratio:4/5}
  .innova__marca{--u:calc(125cqw / 450);z-index:1}
  .innova__lamina{margin-bottom:0}
  .innova__lamina::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(180deg,rgba(0,0,0,0),var(--negro) 92%)}
  .innova__panel-titulo{position:relative;z-index:1;margin-top:-4.25rem}
  .innova__panel-texto,.innova__boton{position:relative;z-index:1}
}
/* Escritorio: la foto de los tres paneles de la pantalla aprobada, con todo el texto encima en su sitio (medidas en %, de 1672 × 790). */
@media (min-width:1024px){   /* D-PRIN-1091 (de p22c 3fe6ff03): la portada de la maqueta desde 1024, no tarjetas */
  .innova__boton--registro{display:none}   /* la diap. 20 no lleva el registro de AI Designer (26f3aab2d, diap. 22): en la portada pisaba la línea dorada; sigue en tarjetas y en /…/innovacion/ai-designer (puente) */
  .innova{aspect-ratio:1672/790;background:var(--negro) var(--fondo-innova) center/cover no-repeat}
  @supports (background-image:image-set(url(a.webp) 1x)){.innova{background-image:var(--fondo-innova-2x)}}   /* retina: heroe-3344 (≥ 2 × 1440); sin image-set, el de 1672 */
  @media (min-width:1921px){.innova{background-image:var(--fondo-innova-grande)}}   /* d20 a 2356 (revisión final V12/V9): heroe-1672 se pintaba ×1,41; desde 1921 se sirve heroe-3344 a 1x (×1,42 de densidad, nunca >×1,2 de ampliación) también a dppx 1 */
  .innova__cabeza{position:absolute;inset:0 0 auto;padding:2.55vw 0 0}
  .innova__titulo{letter-spacing:.01em;font-weight:400}   /* SEG diap. 20: peso y espaciado de la diapositiva; el tamaño (≈64% del ancho, 3,3vw) lo pone la regla de W11 más abajo; antes (antes ≈57%), y más fino */
  .innova__antetitulo{font-size:1.35vw;margin-bottom:.7em}
  .innova__pilares{font-size:1.48vw;margin-top:.55em}
  .innova__cita{position:absolute;right:2.9vw;top:2.3vw;width:9.6vw;margin:0;font-size:1.36vw}
  /* D-PRIN-152: en es/en la cita lleva los saltos de la diapositiva 20 (tres líneas): a su ancho y sin partir más; ca/fr/ru, como antes */
  :is(:lang(es),:lang(en)) .innova__cita{width:max-content}
  :is(:lang(es),:lang(en)) .innova__cita p{white-space:nowrap}
  /* D-PRIN-162: firma 2 vw más arriba, como la diapositiva 20 (con 2.3/1.6 caía sobre las hojas claras de la foto del Drive), y con sombra para leerse */
  .innova__cita footer{font-size:.98vw;width:auto;border:0;padding:0;margin-top:1.1vw;text-shadow:0 0 .5vw rgba(0,0,0,.95),0 0 .2vw rgba(0,0,0,.9)}
  .innova__cita footer::before{content:"";display:block;width:2.6vw;height:1px;margin-bottom:1vw;background:var(--oro)}
  .innova__paneles{position:absolute;inset:0;display:block;padding:0}
  .innova__panel{position:absolute;top:72.2%;width:30%;transform:translateX(-50%);gap:.35vw}
  .innova__panel--1{left:16.9%}
  .innova__panel--2{left:49.6%}
  .innova__panel--3{left:82.6%}
  .innova .innova__foto{display:none}
  .innova__lamina{display:contents}
  .innova__marca{--u:calc(100vw / 1672);left:50%;right:auto;top:auto;bottom:calc(100% + 3.45vw);width:max-content;transform:translateX(-50%)}
  .innova__panel-titulo{font-size:1.32vw;letter-spacing:.035em}   /* SEG diap. 20: menos espaciado, como la diapositiva */
  html[lang=ru] .innova__panel-titulo{font-size:1.12vw;letter-spacing:.02em}   /* D-PRIN-123: «ОТ ИДЕИ К РЕАЛЬНОМУ ПРОСТРАНСТВУ.» salía del panel, pegado al borde y casi tocando el lema de Filmbase */
  .innova__panel-texto{font-size:1.22vw;line-height:1.3;max-width:21vw;min-height:2.6em}   /* D-PRIN-121: 2 renglones siempre, para que los 3 «ENTER» queden a la misma altura (en, Performance iba en 1) */
  .innova__boton{min-width:0;width:14.9vw;min-height:3.2vw;margin-top:1.6vw;font-size:1.3vw;letter-spacing:.02em;padding:0}
  .innova__boton svg{width:1.6vw;height:1.6vw}
  /* W11 (diap. 20, fila de /es/innovacion): en la diapositiva las diagonales doradas EMPIEZAN debajo de la franja del título (el texto queda limpio) y las fotos de los
     paneles van más oscuras, sobre todo la del coche (medido: el panel derecho servido era ≈45 % más claro, el central ≈10-17 %). Un velo negro sobre la franja superior
     (22 % del alto) y otro sobre el panel derecho, por detrás del texto; el título, un 13 % mayor (3,3 vw: en la diapositiva ocupa el 64 % del ancho, antes el 57 %). */
  .innova::before,.innova::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
  .innova::before{background:linear-gradient(180deg,#000 0,rgba(0,0,0,.97) 17%,rgba(0,0,0,.6) 21%,rgba(0,0,0,0) 26%);-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.4) 0,rgba(0,0,0,.4) 32%,#000 36%);mask-image:linear-gradient(90deg,rgba(0,0,0,.4) 0,rgba(0,0,0,.4) 32%,#000 36%)}   /* a la izquierda no hay diagonal: ahí la foto se ve algo (en la diapositiva, 52 de luminosidad en la franja) */
  .innova::after{background:rgba(0,0,0,.2);clip-path:polygon(71% 0,100% 0,100% 100%,61% 100%)}
  .innova__cabeza,.innova__paneles{z-index:1}
  .innova__titulo{font-size:3.3vw}
  /* SEG diap. 20: ENTRAR más plano, sin halo (la diapositiva lo lleva así) */
  .innova__boton.boton--oro{box-shadow:none;background:linear-gradient(180deg,#f0b552,#e2a03a)}
  /* SEG diap. 20: la cita sobre las ramas claras de la foto, con la zona oscurecida como en la diapositiva */
  .innova__cita{isolation:isolate}
  .innova__cita::before{content:"";position:absolute;z-index:-1;inset:-3vw -2.5vw -2.5vw -4vw;background:radial-gradient(ellipse at center,rgba(0,0,0,.72) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,0) 75%)}
  .innova__cita p{text-shadow:0 0 .6vw #000,0 0 1.2vw #000}
  /* SEG diap. 20: franja inferior más cerca de la diapositiva (texto algo mayor, menos espaciado) */
  .innova + .franja-final p{font-size:1.02vw;letter-spacing:.12em}
  .innova + .franja-final .franja-final__oro{letter-spacing:.2em}
  html[lang=en] .innova__titulo{font-size:2.9vw}   /* W11 d20 (V7/V9, 1440 en): «IDEAS THAT CREATE A BETTER TOMORROW» (1015 px a 3,3vw) tocaba la cita; a 2,9vw mide ~900 px como el titular es de la diapositiva */
  /* V3 (SEG-W11-d20-banda-paneles, medido a 1440 sobre la diap. 20): la franja del título arrancaba 14 px más abajo que en la diapositiva (título 76-110 frente a 62-93, relativo a la sección) y ENTRAR 13 px más abajo (593-638 frente a 580-624): menos aire arriba y menos entre el texto y el botón; con esto título 62-96 y botón 583-628. */
  .innova__cabeza{padding-top:1.57vw}
  .innova__boton{margin-top:.88vw}
}

/* ---------- 05.1 AI Designer y 05.2 Filmbase: héroe «coming soon» ---------- */
.lanza{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,22.5%) minmax(0,1fr);align-items:center;min-height:23.6vw;background:var(--negro);border-top:1px solid rgba(242,180,82,.4)}
.lanza__foto{position:absolute;z-index:-1;inset:0 0 0 23.6%;margin:0}
.lanza__foto img{width:100%;height:100%;object-fit:cover;object-position:100% 50%}
.lanza__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--negro) 0%,rgba(0,0,0,.92) 32%,rgba(0,0,0,.55) 50%,rgba(0,0,0,0) 64%)}
.lanza__logo{margin:0;padding:1vw 0 1vw 1.2vw}
.lanza__logo img{width:100%;max-width:375px}
.lanza__texto{max-width:min(47rem,40vw);padding:2vw 0 1.6vw 1vw}
.lanza__antetitulo{margin:0;font:400 clamp(.9rem,.5rem + 1.15vw,1.6rem)/1 var(--fuente-texto);letter-spacing:.55em;text-transform:uppercase;color:var(--oro)}
.lanza__titulo{margin-top:.35em;font-size:clamp(1.6rem,.5rem + 2.4vw,3.2rem);line-height:1;text-transform:uppercase;color:var(--blanco)}
.lanza__titulo span{display:block;color:var(--oro);font-size:.8em;margin-top:.12em}
.lanza__parrafo{margin:var(--e-4) 0 0;max-width:34em;font-size:clamp(.92rem,.7rem + .4vw,1.1rem);line-height:1.38}
.lanza__iconos{display:flex;flex-wrap:wrap;margin:var(--e-5) 0 0;padding:0;list-style:none}
.lanza__iconos li{display:flex;flex-direction:column;align-items:center;gap:var(--e-2);min-width:6.5em;max-width:9em;padding:0 var(--e-4);text-align:center;font:400 var(--t-xs)/1.35 var(--fuente-texto);text-transform:uppercase}
.lanza__iconos li+li{border-left:1px solid var(--linea-suave)}
.lanza__iconos .tss-icono{width:2.2rem;height:2.2rem}
.lanza__cita{position:absolute;right:var(--margen);top:44%;transform:translateY(-50%);width:9.5em;margin:0;font:italic 400 clamp(1rem,.7rem + .8vw,1.6rem)/1.3 var(--fuente-titulares)}
.lanza__cita p{margin:0}
.lanza__cita footer{margin-top:var(--e-5);font:400 clamp(.75rem,.6rem + .35vw,1.05rem)/1 var(--fuente-texto);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--oro)}
.lanza__cita footer::before{content:"";display:block;width:2.6rem;height:1px;margin-bottom:var(--e-5);background:var(--oro)}
.lanza__lateral{position:absolute;right:var(--margen);top:44%;transform:translateY(-50%);width:6.6em;margin:0;font:400 clamp(.85rem,.6rem + .7vw,1.3rem)/1.4 var(--fuente-texto);letter-spacing:.14em;text-transform:uppercase}
.lanza__lateral span{display:block;margin-top:var(--e-4);padding-top:var(--e-4);border-top:1px solid var(--oro);width:max-content;font-size:.8em;letter-spacing:.06em;color:var(--oro)}
.lanza__estudios{position:absolute;right:var(--margen);top:var(--e-3);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--texto-suave)}
@media (max-width:1399.98px){.lanza__cita,.lanza__lateral{display:none}}
@media (max-width:1099.98px){
  .lanza{grid-template-columns:1fr;padding-top:0}
  .lanza__foto{position:relative;inset:auto;height:clamp(13rem,55vw,26rem);grid-row:1}
  .lanza__foto::after{background:linear-gradient(0deg,var(--negro) 0%,rgba(0,0,0,.4) 28%,rgba(0,0,0,0) 60%)}
  .lanza__logo{grid-row:1;grid-column:1;align-self:end;justify-self:start;width:clamp(7rem,30vw,12rem);padding:0 0 var(--e-3) var(--margen)}
  .lanza__texto{max-width:none;padding:var(--e-4) var(--margen) var(--e-6)}
  .lanza__foto{grid-column:1}
  .lanza__estudios{top:auto;bottom:auto;position:static;grid-row:3;padding:0 var(--margen) var(--e-5)}
  .lanza__iconos li{min-width:0;flex:1 1 40%;padding:var(--e-3)}
  .lanza__iconos li+li{border-left:0}
}

/* ---------- 07_1 Showroom experience ---------- */
.showroom-heroe{position:relative;isolation:isolate;display:flex;align-items:center;min-height:31.2vw;background:var(--negro)}
.showroom-heroe__foto{position:absolute;z-index:-1;inset:0 0 0 32.3%;margin:0}
.showroom-heroe__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}   /* VS 22-oct (calidad): FACHADA 2.png del Drive, de día, a su máximo (1544 px) con el rótulo BADAJOZ 60 y la entrada; el 30 % de alto deja arriba el rótulo y recorta acera */
.showroom-heroe__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 6%,rgba(0,0,0,.12) 13%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 74%,rgba(0,0,0,.55) 86%,rgba(0,0,0,.7) 100%)}   /* D-PRIN-109: los textos llegan al 41,5 % y pisan la foto (empieza en el 32,3 %): como en la diapositiva 25, debajo queda oscuro */
.showroom-heroe__texto{max-width:none;margin:0;padding-block:clamp(2rem,3.2vw,4rem) var(--e-6)}
@media (min-width:1100px){
  .showroom-heroe__texto>*{max-width:min(44rem,41.5vw)}   /* D-PRIN-109: diapositiva 25, textos hasta el 41,5 % y el titular hasta el 44,6 % */
  .showroom-heroe__texto>.showroom-heroe__h1{max-width:min(48rem,45vw)}
  .showroom-heroe__texto>.showroom-heroe__sub,.showroom-heroe__texto>.showroom-heroe__intro{max-width:36vw}   /* diap. 25 (OK ajeno de W5, 22-oct): los dos textos cortan como la diapositiva (intro en 3 líneas, hasta el ~40 %) y no pisan la fachada */
  .showroom-heroe__texto>.botones{max-width:min(54rem,50vw)}   /* D-PRIN-109: con el vídeo son 3 botones; en una fila a ≥1280 si caben (la letra no baja) */
  .showroom-heroe .botones .boton{padding-inline:var(--e-5)}
}
/* D-PRIN-109 (diapositiva 25): antetítulo en oro, titular de 3 líneas (mayúscula ≈ 2,4 % del ancho) y «BARCELONA» en oro y espaciada debajo;
   el texto de debajo, en caja normal (sin la raya de antes). */
.showroom-heroe__ante{display:block;margin:0 0 var(--e-4);font:400 clamp(.75rem,.85vw,1.05rem)/1 var(--fuente-texto);letter-spacing:.3em;text-transform:uppercase;color:var(--oro)}
.showroom-heroe__h1{font-size:min(clamp(2.6rem,.6rem + 3.9vw,5.2rem),10vw);line-height:.9;text-transform:uppercase;color:var(--blanco)}   /* D-PRIN-109: a 390 en ca/fr «D’ARQUITECTURA» no cabía a 41,6 px (barra de 398): en el móvil, como mucho 10vw */
.showroom-heroe__h1>span{display:block}
.showroom-heroe__h1>.showroom-heroe__ciudad{margin-top:.3em;font-size:.5em;line-height:1;letter-spacing:.42em;color:var(--oro)}
.showroom-heroe__sub{margin:var(--e-5) 0 0;font:400 clamp(1.05rem,1.2vw,1.45rem)/1.3 var(--fuente-titulares)}
.showroom-heroe__intro{margin:var(--e-4) 0 0;font:400 clamp(.95rem,1.02vw,1.25rem)/1.35 var(--fuente-titulares)}
.showroom-heroe .botones{margin-top:var(--e-5);gap:var(--e-3)}
/* d25 (V3): «VER VÍDEO» como la diapositiva 25: dorado como «Descubre el showroom», ▶ en un círculo negro a la izquierda y el rótulo centrado (antes, contorno oscuro). */
.showroom-heroe .showroom-heroe__video{justify-content:center;gap:.8em}
.showroom-heroe .showroom-heroe__video .boton__icono{width:1.9em;height:1.9em;border:0;background:#0b0b0b;color:var(--oro)}
.showroom-heroe__direccion{margin:var(--e-4) 0 0;font:400 var(--t-xs)/1.5 var(--fuente-texto);letter-spacing:.24em;text-transform:uppercase}
.bloques{list-style:none;margin:0;padding:var(--e-2) var(--margen) var(--e-4);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:#0b0b0b;border-top:1px solid var(--linea-suave)}
.bloque{position:relative;display:flex;flex-direction:column;gap:var(--e-3);padding:var(--e-4) clamp(.8rem,1.3vw,1.4rem)}
.bloque+.bloque{border-left:1px solid var(--linea-suave)}
.bloque__titulo{display:flex;align-items:baseline;gap:var(--e-3);font:400 clamp(.75rem,.65rem + .25vw,.95rem)/1.2 var(--fuente-titulares);letter-spacing:.06em;text-transform:uppercase}   /* D-PRIN-109: en la diapositiva 25 cada título va en una línea */
.bloque__titulo .num{font-size:2.1em;letter-spacing:0;color:var(--oro)}
.bloque__titulo a{text-decoration:none}
.bloque__titulo a::after{content:"";position:absolute;inset:0}
.bloque img{width:100%;aspect-ratio:2.2/1;object-fit:cover;border:1px solid var(--oro)}   /* SEG diap. 25: borde dorado, como la lámina */
.bloque img.bloque__logo{object-fit:contain;background:#000}
/* Diap. 25 (2.ª revisión W13): el logo de la tarjeta 03 llenaba el 35 % del alto de la caja y en la diapositiva el 55 %: se muestra el 88 % central de la imagen (×1,14, el logo entero con su dirección web); y desde 1100 la caja de las fotos a la proporción de la diapositiva (2,2:1; la compacta de 2,4:1 de V3 sigue de 900 a 1099 en horizontal): la franja de marcas llega a 823 de 900 a 1440×900 */
.bloque img.bloque__logo{object-view-box:inset(6% 6%)}
@media (min-width:1100px){.showroom-heroe + .bloques .bloque img{aspect-ratio:2.2/1}}
/* Diap. 25 (SEG-R3-d25-0a5eacd5, SEG-R3-d25-7cf4eda8): las fotos de las tarjetas 04 y 05 llevan, como en la lámina, filete dorado con un marco oscuro dentro. */
.bloque:nth-child(n+4) img{border-color:var(--oro);padding:3px;background:#0b0b0b}
.bloque__texto{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e-3);margin:0;font:400 var(--t-s)/1.35 var(--fuente-titulares)}
.bloque__texto svg{flex:none;width:1.2rem;height:1.2rem;color:var(--oro)}
@media (min-width:1100px){
  /* D-PRIN-109: tarjetas casi a sangre como la diapositiva 25 (≈ 24 px a 1440) y título en una línea (texto ≈ 202 px a 1440) */
  .bloques{padding-inline:clamp(.75rem,1.6vw,1.75rem)}
  .bloque{padding-inline:clamp(.7rem,1vw,1.1rem)}
  .bloque__titulo{gap:.6em;font-size:clamp(.7rem,.9vw,.95rem)}
  .bloque__titulo .num{font-size:1.75em}
  .showroom-heroe__h1{font-size:clamp(2.1rem,3.1vw,4.2rem)}   /* con la Didot de la web, «SHOWROOM INTELIGENTE» = 41 % del ancho (diapositiva 25: 41,2 %); a 3,4vw medía 653 px y se partía. Por debajo de 1100, el tamaño de antes */
}
@media (max-width:1099.98px){
  .showroom-heroe{flex-direction:column;align-items:stretch}
  .showroom-heroe__foto{position:relative;inset:auto;height:clamp(14rem,58vw,28rem)}
  .showroom-heroe__foto::after{background:linear-gradient(0deg,var(--negro) 0%,rgba(0,0,0,0) 35%)}
  .showroom-heroe__texto{padding-top:var(--e-2)}
  .showroom-heroe__texto>*{max-width:40rem}
  .bloques{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bloque+.bloque{border-left:0}
  .bloque{border-bottom:1px solid var(--linea-suave)}
}
@media (max-width:560px){.bloques{grid-template-columns:1fr}}
/* Diap. 25 entre 900 y 1099 (SEG 1024-3/-5): como a 1440, la foto detrás y el texto encima, y las cinco tarjetas en una fila. */
@media (min-width:900px) and (max-width:1099.98px){
  .showroom-heroe{flex-direction:row;align-items:center;min-height:31.2vw}
  .showroom-heroe__foto{position:absolute;inset:0 0 0 32.3%;height:auto}
  .showroom-heroe__foto::after{background:linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 6%,rgba(0,0,0,.12) 13%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 74%,rgba(0,0,0,.55) 86%,rgba(0,0,0,.7) 100%)}
  .showroom-heroe__texto{padding-top:clamp(2rem,3.2vw,4rem)}
  .showroom-heroe__texto>*{max-width:min(44rem,44vw)}
  .showroom-heroe__h1{font-size:clamp(2.1rem,3.4vw,4.2rem)}   /* como desde 1100: el titular no pisa la fachada */
  /* d25 a 1024 (SEG-cx-p21-2-diap25-1024-1/-3): la foto es más ancha que alta (≈1,8) y a 1440 se ve entera a lo ancho (árbol y edificio de la derecha incluidos); aquí, con el texto más alto, «cover» la recortaba por los lados. Se pone a todo el ancho de su hueco, centrada, y se funde arriba y abajo con el negro. Los dos botones, juntos en una fila como en la diapositiva. */
  .showroom-heroe__foto{display:flex;align-items:center;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
  .showroom-heroe__foto img{height:auto}
  .showroom-heroe__texto>.botones{max-width:none;flex-wrap:nowrap}
  .showroom-heroe .botones .boton{padding-inline:var(--e-4);white-space:nowrap}
  .bloques{grid-template-columns:repeat(5,minmax(0,1fr))}
}
/* En dos columnas (561-899, SEG 768-5), la 05 no queda sola a media fila: ocupa la fila entera. */
@media (min-width:561px) and (max-width:899.98px){.bloque:last-child:nth-child(odd){grid-column:1/-1}}
/* d25 (V3, SEG-p20x3-diap25-1024-2, SEG-cx-p21-2-diap25-1024-5): desde 900, como la diapositiva 25: la raya dorada bajo «BARCELONA» y las letras de los botones del héroe en serif de caja alta espaciada (antes sans en negrita). */
@media (min-width:900px){
  .showroom-heroe__h1>.showroom-heroe__ciudad::after{content:"";display:block;width:3.1rem;height:2px;margin-top:.9rem;background:var(--oro)}
  .showroom-heroe .botones .boton{font-family:var(--fuente-titulares);font-weight:400;letter-spacing:.12em}
}
/* d25 (SEG-p33f-diap25-768-1): la franja de marcas entre 561 y 899 en dos filas ordenadas y centradas (antes tres, con ORIDECK y ALPHA sueltos a los lados). */
@media (min-width:561px) and (max-width:899.98px){
  .tss-tira--maqueta .tss-tira-marcas{gap:.55rem 1rem;justify-content:center}
  .tss-tira--maqueta .tss-tira-marca .tss-tira-logo{max-height:.95rem;max-width:4.4rem}
}
/* d25 (V9 22-oct): el lema de la franja también en blanco por debajo de 900 (a 768 y 390 salía dorado, incoherente con 900+). */
@media (max-width:899.98px){.tss-tira--maqueta .tss-tira-lema{color:var(--blanco)}}
/* d25 (SEG-p20x3-diap25-1024-3): «MÁS QUE UN SHOWROOM.» en blanco, pequeño y en tres líneas también entre 900 y 1099 (la regla de ≥1100 no llegaba). */
@media (min-width:900px) and (max-width:1099.98px){
  .showroom-heroe__texto>.showroom-heroe__h1{max-width:46vw;font-size:clamp(1.9rem,3.1vw,4.2rem)}   /* el titular en tres líneas como la diapositiva 25 (SHOWROOM INTELIGENTE / DE ARQUITECTURA E / INTERIORISMO DE LUJO): con el tamaño de ≥1100 y un ancho del 46 % cabe también a 900 */
  .tss-tira--maqueta .tss-tira-lema{max-width:7em;color:var(--blanco);border-left-color:var(--blanco);font-size:.7rem;letter-spacing:.08em;line-height:1.35}
}

/* ---------- SUPPLIERS: las 8 categorías ---------- */
.categorias{list-style:none;margin:0;padding:var(--e-2) clamp(.5rem,1.1vw,1.25rem) var(--e-5);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--negro)}
.categoria{display:flex;flex-direction:column;gap:var(--e-3);padding:var(--e-3) var(--e-3) var(--e-4);background:#060606;border:1px solid var(--linea-suave)}
.categoria__titulo{display:flex;align-items:center;gap:var(--e-4);min-height:2.8rem;font:400 clamp(.78rem,.65rem + .3vw,1rem)/1.2 var(--fuente-texto);letter-spacing:.04em;text-transform:uppercase}
.categoria__titulo .num{font:400 clamp(1.8rem,1.2rem + 1vw,2.5rem)/1 var(--fuente-titulares);color:var(--oro)}
.categoria__foto{display:block;overflow:hidden}
.categoria__foto img{width:100%;aspect-ratio:760/380;object-fit:cover;transition:transform .6s ease}
.categoria:hover .categoria__foto img{transform:scale(1.03)}
.categoria__texto{flex:1;margin:0;font:400 clamp(.9rem,.8rem + .25vw,1.05rem)/1.25 var(--fuente-titulares)}
.categoria .boton{align-self:flex-start;min-width:11rem}
@media (max-width:1099.98px){.categorias{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.categorias{grid-template-columns:1fr}}

/* ---------- 07_2 Categoría: marcas, panel de relleno y ventajas ---------- */
.marcas-cat{display:grid;gap:var(--e-2);padding:var(--e-2) clamp(.5rem,1.1vw,1.25rem) var(--e-3);background:var(--negro)}
.marcas-cat__fila{display:grid;gap:var(--e-2);grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
.marca-cat{display:flex;flex-direction:column;background:#000;border:1px solid var(--linea-suave)}
.marca-cat__foto{margin:0;padding:var(--e-2) var(--e-2) 0}
.marca-cat__foto img{width:100%;aspect-ratio:var(--prop);object-fit:cover}
.marca-cat__cuerpo{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--e-2);padding:var(--e-3) var(--e-3) var(--e-4);text-align:center}
.marca-cat__nombre{display:flex;align-items:center;justify-content:center;min-height:2.6rem;margin:0}
.marca-cat__nombre img{max-height:2.4rem;max-width:72%;width:auto}
.marca-cat__nombre span{font:400 clamp(1.25rem,1rem + .7vw,1.75rem)/1 var(--fuente-titulares);letter-spacing:.04em;text-transform:uppercase}
.marca-cat__lema{flex:1;margin:0;font:400 var(--t-xs)/1.35 var(--fuente-texto);letter-spacing:.06em;text-transform:uppercase}
.marca-cat__texto{margin:0;font:400 var(--t-s)/1.4 var(--fuente-titulares);color:var(--texto-suave)}
.marca-cat__inactivo{display:inline-flex;align-items:center;min-height:2.4rem;padding:.45rem 1.5rem;background:#231e18;color:#bdb5a9;font:500 var(--t-xs)/1 var(--fuente-texto);letter-spacing:.08em;text-transform:uppercase}
/* La marca a lo ancho (08: BuoHome, Bose): texto a la izquierda y foto a la derecha */
.marca-cat--horizontal{flex-direction:row-reverse}
.marca-cat--horizontal .marca-cat__foto{flex:1 1 50%;padding:0}
.marca-cat--horizontal .marca-cat__foto img{height:100%;aspect-ratio:auto;min-height:16rem}
.marca-cat--horizontal .marca-cat__cuerpo{flex:1 1 50%;align-items:flex-start;justify-content:center;text-align:left;padding:var(--e-6)}
.marca-cat--horizontal .marca-cat__nombre{justify-content:flex-start}
.marca-cat--horizontal .marca-cat__nombre img{max-width:12rem;max-height:3rem}
.marca-cat--horizontal .marca-cat__lema{flex:none;font-size:var(--t-s);letter-spacing:.12em}
.relleno{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--e-4);min-height:12rem;padding:var(--e-6);background:#050505 center/cover no-repeat;border:1px solid var(--linea-suave);text-align:center}
.relleno::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.relleno>*{position:relative}
.relleno__lema{max-width:16em;margin:0;font:400 clamp(1rem,.8rem + .6vw,1.5rem)/1.3 var(--fuente-texto);letter-spacing:.04em;text-transform:uppercase;color:var(--oro)}
.relleno__lema::after{content:"";display:block;width:2.6rem;height:1px;margin:var(--e-5) auto 0;background:var(--oro)}
.relleno__firma{margin:0;font:400 var(--t-s)/1 var(--fuente-texto);letter-spacing:.24em;text-transform:uppercase}
.ventajas-cat{display:flex;align-items:center;flex-wrap:wrap;gap:var(--e-5) var(--e-7);padding:var(--e-5) var(--margen);background:var(--negro)}
.ventajas-cat__lista{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e-4);margin:0;padding:0;list-style:none}
.ventajas-cat__lista--9{grid-template-columns:repeat(9,minmax(0,1fr));flex-basis:100%}
.ventajas-cat__lista li{display:flex;align-items:center;gap:var(--e-4);font:400 var(--t-xs)/1.4 var(--fuente-texto)}
.ventajas-cat__lista--9 li{flex-direction:column;text-align:center;gap:var(--e-2);text-transform:uppercase}
.ventajas-cat__lista .tss-icono{width:2.2rem;height:2.2rem}
.ventajas-cat__lista b{display:block;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--texto)}
.ventajas-cat__lista span span{color:var(--texto-suave)}
.productos-cat{padding:var(--e-6) var(--margen);background:#0b0b0b;border-top:1px solid var(--linea-suave)}
.productos-cat__lista{list-style:none;margin:var(--e-5) 0 0;padding:0;display:grid;gap:var(--e-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.producto-cat{display:flex;flex-direction:column;gap:var(--e-2);padding:var(--e-3);background:#000;border:1px solid var(--linea-suave)}
.producto-cat img{width:100%;aspect-ratio:4/3;object-fit:cover}
.producto-cat__marca{margin:0;font:500 var(--t-xs)/1.3 var(--fuente-texto);letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
.producto-cat__nombre{font-size:var(--t-h5);text-transform:uppercase;letter-spacing:.03em}
.producto-cat__texto{margin:0;font-size:var(--t-s);color:var(--texto-suave)}
.acceso-prov{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3) var(--e-6);padding:var(--e-4) var(--margen);background:var(--negro);border-top:1px solid var(--linea-suave);font-size:var(--t-s)}
.acceso-prov p{margin:0;color:var(--texto-suave);letter-spacing:.08em;text-transform:uppercase;font-size:var(--t-xs)}
.acceso-prov a{color:var(--oro);text-decoration:none}
.acceso-prov a:hover{text-decoration:underline}
@media (max-width:1099.98px){
  .marcas-cat__fila{grid-template-columns:repeat(min(var(--cols),3),minmax(0,1fr))}
  .ventajas-cat__lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ventajas-cat__lista--9{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .ventajas-cat{flex-direction:column;align-items:flex-start}
  .ventajas-cat__lista{width:100%}
  .marcas-cat__fila{grid-template-columns:repeat(min(var(--cols),2),minmax(0,1fr))}
  .marca-cat--horizontal{flex-direction:column}
  .marca-cat--horizontal .marca-cat__foto img{min-height:0;aspect-ratio:4/3}
  .marca-cat--horizontal .marca-cat__cuerpo{padding:var(--e-4)}
  .relleno{grid-column:1/-1!important}
}
@media (max-width:480px){.marcas-cat__fila{grid-template-columns:1fr}}

/* ---------- 11 Entrada a las áreas privadas ---------- */
.acceso{display:grid;grid-template-columns:minmax(0,65.1fr) minmax(0,34.9fr);min-height:min(43.3vw,46rem);background:#0b0b0b}
.acceso__escena{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(1.5rem,2.3vw,2.4rem) var(--margen) clamp(1.5rem,2.5vw,2.6rem)}
.acceso__foto{position:absolute;z-index:-1;inset:0;margin:0}
.acceso__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.acceso__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 38%,rgba(0,0,0,0) 60%)}
.acceso__titulo{display:flex;align-items:flex-start;gap:clamp(1rem,1.6vw,1.8rem);margin-top:var(--e-3)}
.acceso__numero{flex:none;padding-right:clamp(1rem,1.6vw,1.8rem);border-right:1px solid rgba(255,255,255,.4);font:400 clamp(3rem,1.4rem + 3.6vw,5.4rem)/.82 var(--fuente-titulares);color:var(--oro)}
.acceso__h1{max-width:9.5em;font-size:clamp(1.9rem,.8rem + 2.4vw,3.4rem);line-height:1;text-transform:uppercase;color:var(--blanco)}
.acceso__sub{margin:var(--e-4) 0 0;font:400 clamp(.8rem,.65rem + .4vw,1.1rem)/1.3 var(--fuente-texto);letter-spacing:.3em;text-transform:uppercase}
.acceso__sub::after{content:"";display:block;width:2.4rem;height:2px;margin-top:var(--e-5);background:var(--oro)}
.acceso__intro{max-width:17em;margin:var(--e-5) 0 0;font:400 clamp(1.05rem,.75rem + .55vw,1.4rem)/1.3 var(--fuente-titulares)}
/* Con la foto al lado (11): el párrafo no llega al rótulo «THE SEDUCTION» de la pared, que quedaba pegado a «documentos y». */
@media (min-width:1100px){.acceso__intro{max-width:15em}}
.acceso__lema{max-width:13em;margin:var(--e-7) 0 0;font:400 var(--t-xs)/1.7 var(--fuente-texto);letter-spacing:.2em;text-transform:uppercase}
.acceso__panel{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.75rem,2.6vw,3rem) clamp(1.25rem,3.3vw,5rem)}
.acceso__marca{display:flex;align-items:center;justify-content:center;gap:var(--e-4);color:var(--blanco)}
.acceso__marca .logo__s{height:clamp(2.6rem,1.8rem + 2vw,3.6rem)}
.acceso__marca .logo__marca{font-size:clamp(1.2rem,.9rem + .8vw,1.75rem)}
.acceso__marca .logo__lema{display:block}
.acceso__panel-titulo{margin:var(--e-7) 0 var(--e-4);text-align:center;font:400 clamp(1rem,.85rem + .5vw,1.35rem)/1.2 var(--fuente-texto);letter-spacing:.3em;text-transform:uppercase}
.acceso__panel-texto{margin:0 auto var(--e-6);max-width:26em;text-align:center;font:400 var(--t-m)/1.4 var(--fuente-titulares)}
.acceso__form{display:grid;gap:var(--e-4)}
.acceso__campo{position:relative;display:block}
.acceso__campo .tss-icono{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:1.3rem;height:1.3rem;color:var(--texto)}
.acceso__campo input{width:100%;min-height:3.4rem;padding:.8rem 1rem .8rem 3.1rem;background:#121212;border:1px solid var(--linea);border-radius:0;color:var(--texto);font:400 var(--t-m)/1.4 var(--fuente-texto)}
.acceso__campo input::placeholder{color:var(--texto-suave)}
.acceso__campo input:focus-visible{outline:2px solid var(--foco);outline-offset:1px;border-color:var(--oro)}
.acceso__olvido{justify-self:end;margin:0;font:400 var(--t-m)/1.3 var(--fuente-titulares)}
.acceso__olvido a{color:var(--oro);text-decoration:none}
.acceso__olvido a:hover{text-decoration:underline}
.acceso__form .boton{width:100%;min-height:3.4rem;letter-spacing:.14em}
.acceso__aviso{margin:0;padding:var(--e-3) var(--e-4);border-left:3px solid var(--oro);background:rgba(242,180,82,.1);font-size:var(--t-s)}
.acceso__alerta{margin:0;padding:var(--e-3) var(--e-4);border-left:3px solid #e2725b;background:rgba(226,114,91,.12);font-size:var(--t-s)}
.acceso__nuevo{margin-top:var(--e-6);padding-top:var(--e-6);border-top:1px solid var(--linea);text-align:center}
.acceso__nuevo p{margin:0 0 var(--e-4);font:400 var(--t-m)/1.3 var(--fuente-titulares)}
.acceso__nuevo .boton{letter-spacing:.12em}
@media (max-width:1099.98px){
  .acceso{grid-template-columns:1fr}
  .acceso__escena{min-height:clamp(26rem,90vw,36rem)}
  .acceso__foto::after{background:linear-gradient(0deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.55) 100%)}
  .acceso__panel{padding:var(--e-7) var(--margen)}
  .acceso__form,.acceso__nuevo{width:100%;max-width:30rem;margin-inline:auto}
}
@media (max-width:520px){.acceso__numero{display:none}.acceso__marca .logo__lema{display:none}}

/* ---------- 09 Become a supplier partner: proceso y formulario ---------- */
.proceso{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--e-6);padding:clamp(1.5rem,2.4vw,2.6rem) var(--margen);background:#0b0b0b;border-top:1px solid var(--linea-suave)}
.proceso__titulo{max-width:7em;font-size:clamp(1.5rem,1rem + 1.3vw,2.4rem);line-height:1.05;text-transform:uppercase}
.proceso__titulo::after{content:"";display:block;width:2.6rem;height:2px;margin-top:var(--e-5);background:var(--oro)}
.proceso__pasos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e-5);margin:0;padding:0;list-style:none}
.proceso__paso{position:relative;display:flex;flex-direction:column;gap:var(--e-2);padding-right:2.2rem}
.proceso__paso:not(:last-child)::after{content:"→";position:absolute;right:0;top:3.3rem;color:var(--oro);font-size:1.6rem;line-height:1}
.proceso__num{display:grid;place-items:center;width:3.2rem;height:3.2rem;margin-bottom:var(--e-2);border:1.5px solid var(--oro);border-radius:50%;font:500 var(--t-l)/1 var(--fuente-texto);color:var(--oro)}
.proceso__paso strong{font:500 var(--t-s)/1.4 var(--fuente-texto);letter-spacing:.12em;text-transform:uppercase}
.proceso__paso>span:last-child{font:400 var(--t-m)/1.35 var(--fuente-titulares);color:var(--texto-suave)}
.proceso__accion{display:flex;flex-direction:column;align-items:center;gap:var(--e-4);padding-left:var(--e-6);border-left:1px solid var(--linea);text-align:center}
.proceso__accion .boton{min-width:14rem;letter-spacing:.12em}
.proceso__accion p{margin:0;max-width:16em;font:500 var(--t-xs)/1.7 var(--fuente-texto);letter-spacing:.12em;text-transform:uppercase}
@media (min-width:1100px) and (max-width:1439.98px){.proceso__pasos{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--e-6)}.proceso__paso:nth-child(2n)::after{display:none}}   /* D-PRIN-117: de 1100 a 1439 los 4 pasos en 2×2 (título y botón en su sitio): en fila, cada paso dejaba 50-100 px y «СОТРУДНИЧЕСТВА», «COLLABORATION» o «SOL·LICITUD» cruzaban la flecha y la línea del botón; la flecha solo en el 1.º y el 3.º. Desde 1440, 4 en fila como antes. */
@media (max-width:1099.98px){
  .proceso{grid-template-columns:1fr}
  .proceso__pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proceso__paso::after{display:none}
  .proceso__accion{padding-left:0;border-left:0}
}
@media (max-width:520px){.proceso__pasos{grid-template-columns:1fr}}
.alta{padding:var(--seccion) var(--margen);background:var(--negro);border-top:1px solid var(--linea-suave)}
.alta__caja{max-width:62rem;margin-inline:auto}
.alta__cabeza{display:flex;align-items:center;gap:var(--e-5);margin-bottom:var(--e-6)}
.alta__num{display:grid;place-items:center;flex:none;width:3.4rem;height:3.4rem;border:1.5px solid var(--oro);border-radius:50%;font:500 var(--t-l)/1 var(--fuente-texto);color:var(--oro)}
.alta__titulo{font:500 var(--t-l)/1.3 var(--fuente-texto);letter-spacing:.14em;text-transform:uppercase}
.alta__cabeza p{margin:var(--e-1) 0 0;font:400 var(--t-m)/1.4 var(--fuente-titulares);color:var(--texto-suave)}
.alta__grupo{margin:0 0 var(--e-6);padding:0;border:0}
.alta__grupo legend{margin-bottom:var(--e-4);font:500 var(--t-xs)/1.3 var(--fuente-texto);letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}
.alta__rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-4) var(--e-6)}
.alta .campo select{width:100%;min-height:3rem;padding:.7rem .9rem;background:var(--superficie-2);border:1px solid var(--linea);border-radius:var(--radio-s);color:var(--texto);font:400 var(--t-m)/1.4 var(--fuente-texto)}
.alta .campo small{color:var(--texto-suave);font-size:var(--t-xs)}
.alta__errores{margin:0 0 var(--e-6);padding:var(--e-4) var(--e-5);border-left:3px solid #e2725b;background:rgba(226,114,91,.12)}
.alta__errores ul{margin:0;padding-left:1.2rem}
.alta__pie{margin-top:var(--e-5);color:var(--texto-suave);font-size:var(--t-s)}
.alta__pie a{color:var(--oro)}
@media (max-width:640px){.alta__rejilla{grid-template-columns:1fr}}

/* ---------- 10 Supplier agreement (informativa) ---------- */
.acuerdo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:clamp(1.5rem,2vw,2.4rem) var(--margen);background:#0b0b0b;border-top:1px solid var(--linea-suave)}
.acuerdo__col{display:flex;flex-direction:column;gap:var(--e-4);padding:0 clamp(1rem,1.8vw,2.2rem)}
.acuerdo__col+.acuerdo__col{border-left:1px solid var(--linea-suave)}
.acuerdo__cabeza{display:flex;align-items:center;gap:var(--e-5)}
.acuerdo__num{display:grid;place-items:center;flex:none;width:3.2rem;height:3.2rem;border:1.5px solid var(--oro);border-radius:50%;font:500 var(--t-l)/1 var(--fuente-texto);color:var(--oro)}
.acuerdo__titulo{font:500 var(--t-s)/1.3 var(--fuente-texto);letter-spacing:.14em;text-transform:uppercase}
.acuerdo__cabeza p{margin:var(--e-1) 0 0;font:400 var(--t-s)/1.4 var(--fuente-titulares);color:var(--texto-suave)}
.acuerdo__lista{margin:0;padding:0;list-style:none;display:grid;gap:var(--e-3)}
.acuerdo__lista li{display:flex;justify-content:space-between;gap:var(--e-3);padding-bottom:var(--e-2);border-bottom:1px solid var(--linea-suave);font-size:var(--t-s)}
.acuerdo__lista li span{color:var(--texto-suave);text-align:right}
.acuerdo__caja{display:flex;flex-direction:column;gap:var(--e-4);padding:var(--e-5);background:#141414;border:1px solid var(--linea-suave)}
.acuerdo__caja .acuerdo__caja-titulo{display:flex;align-items:center;gap:var(--e-4);font:500 var(--t-s)/1.4 var(--fuente-texto);letter-spacing:.14em;text-transform:uppercase}
.acuerdo__caja-titulo .tss-icono{width:2.4rem;height:2.4rem;color:var(--texto)}
.acuerdo__caja p{margin:0;font:400 var(--t-s)/1.45 var(--fuente-titulares);color:var(--texto-suave)}
.acuerdo__caja .acuerdo__docusign{font:700 clamp(1.4rem,1.1rem + .6vw,1.75rem)/1 var(--fuente-texto);letter-spacing:-.02em}
.acuerdo__checks{margin:0;padding:0;list-style:none;display:grid;gap:var(--e-3)}
.acuerdo__checks li{display:flex;align-items:flex-start;gap:var(--e-3);font-size:var(--t-s)}
.acuerdo__checks .tss-icono{width:1.4rem;height:1.4rem}
.acuerdo__caja .acuerdo__seguro{display:flex;align-items:center;justify-content:center;gap:var(--e-2);font-size:var(--t-s);color:var(--texto-suave)}
.acuerdo__seguro .tss-icono{width:1.2rem;height:1.2rem}
.firmado{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));align-items:center;gap:var(--e-5);padding:clamp(1.25rem,2vw,2.2rem) var(--margen);background:var(--negro);border-top:1px solid var(--linea-suave)}
.firmado__principal{display:flex;align-items:center;gap:var(--e-5)}
.firmado__principal>.tss-icono{width:3.6rem;height:3.6rem;padding:.7rem;border:1.5px solid var(--oro);border-radius:50%}
.firmado__titulo{font:500 var(--t-m)/1.3 var(--fuente-texto);letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
.firmado__principal p{margin:var(--e-1) 0 0;font:400 var(--t-m)/1.4 var(--fuente-titulares)}
.firmado__item{display:flex;align-items:center;gap:var(--e-4);padding-left:var(--e-5);border-left:1px solid var(--linea);font:500 var(--t-xs)/1.5 var(--fuente-texto);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.firmado__item .tss-icono{width:2.4rem;height:2.4rem}
a.firmado__item:hover{color:var(--oro)}
@media (max-width:1099.98px){
  .acuerdo{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--e-7)}
  .acuerdo__col:nth-child(3){border-left:0}
  .firmado{grid-template-columns:1fr}
  .firmado__item{border-left:0;padding-left:0}
}
@media (max-width:640px){.acuerdo{grid-template-columns:1fr}.acuerdo__col+.acuerdo__col{border-left:0}}

/* Diálogo del aviso de lanzamiento de SS AI Designer (public/aidesigner/aidesigner.js) con el aspecto de la web nueva */
.tsa-dialogo{width:min(46rem,94vw);max-height:92vh;padding:0;border:1px solid var(--oro);background:var(--superficie);color:var(--texto)}
.tsa-dialogo::backdrop{background:rgba(0,0,0,.82)}
.tsa-form{position:relative;padding:clamp(1.5rem,3vw,2.6rem)}
.tsa-cerrar{position:absolute;right:.75rem;top:.75rem;width:2.6rem;height:2.6rem;background:none;border:1px solid var(--oro);color:var(--blanco);font-size:1.4rem;line-height:1;cursor:pointer}
.tsa-form-titulo{margin:0 0 var(--e-4);padding-right:3rem;font:500 var(--t-h4)/1.15 var(--fuente-titulares);text-transform:uppercase;color:var(--blanco)}
.tsa-form .antetitulo{font-size:var(--t-s)}
.tsa-parrafo{margin:0 0 var(--e-5);color:var(--texto-suave)}
.tsa-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-4)}
.tsa-campos label{display:flex;flex-direction:column;gap:var(--e-2);font-size:var(--t-s)}
.tsa-campos .tsa-ancho{grid-column:1/-1}
.tsa-campos input:not([type=checkbox]),.tsa-campos select,.tsa-campos textarea{width:100%;min-height:3rem;padding:.7rem .9rem;background:var(--superficie-2);border:1px solid var(--linea);border-radius:var(--radio-s);color:var(--texto);font:400 var(--t-m)/1.4 var(--fuente-texto)}
.tsa-campos em{color:var(--texto-suave);font-style:normal}
.tsa-consentimiento{flex-direction:row!important;align-items:flex-start;color:var(--texto-suave)}
.tsa-consentimiento input{flex:none;width:1.15rem;height:1.15rem;margin-top:.15rem;accent-color:var(--oro)}
.tsa-consentimiento a{color:var(--oro)}
.tsa-trampa{position:absolute!important;left:-9999px;width:1px;height:1px}
.tsa-aviso{color:#f2a08e;font-size:var(--t-xs)}
.tsa-error{margin:var(--e-4) 0 0;color:#f2a08e}
.tsa-enviar{margin-top:var(--e-5)}
.tsa-gracias:focus{outline:none}
@media (max-width:560px){.tsa-campos{grid-template-columns:1fr}}

/* Ajustes por pantalla de la cabecera: 07_2 (categoría), 09 (alta), 10 (acuerdo) */
.pantalla-cab--categoria{--inicio-foto:45%}
.pantalla-cab--foco-derecha{--foco-foto:100% 50%}
/* En tableta y móvil la foto entra entera a lo ancho y el encuadre no recorta: se amplía un poco desde la derecha. */
@media (max-width:899.98px){.pantalla-cab--foco-derecha .pantalla-cab__foto{overflow:hidden}.pantalla-cab--foco-derecha .pantalla-cab__foto img{transform:scale(1.15);transform-origin:100% 50%}}
/* Mobiliario (cat06), VS 22-oct: el RENDER 2 de Víctor (estantería iluminada y sofá verde) con el foco abajo, que se vea el sofá; en móvil sin la ampliación de 1,15 para que entre entero. */
.pantalla-cab--categoria .pantalla-cab__foto img[src*="cat06-cabecera"]{object-position:60% 100%}
@media (max-width:899.98px){.pantalla-cab--foco-derecha .pantalla-cab__foto img[src*="cat06-cabecera"]{transform:none}}
/* Iluminación (cat05), VS 23-oct (Víctor: «como antes, la cama y las mesillas, pero que además aparezca la lámpara»): misma escala y encuadre horizontal que hoy; solo la cabecera de ESTA sección más alta, lo justo para que entren la lámpara del techo (≈6-16 % del alto de la foto 1494x1052) y la cama con las mesillas (hasta ≈97 %): alto = 95,5 % de la foto a la escala de hoy (la foto ocupa el 55 % del ancho: 0,55 × 0,704 × 0,955 = 37vw: ventana 2,2-97,8 %, lámpara y cama con mesillas con margen); en móvil la foto va a todo el ancho SIN la ampliación de 1,15 (el scale también agranda el alto y dejaba una ventana del 87 %: lámpara cortada): alto = 0,704 × 0,955 = 67vw (tope 40rem), cover por ancho, ventana 2,2-97,8 %. */
@media (min-width:900px){.pantalla-cab--categoria:has(img[src*="indice-05-full"]){min-height:37vw}}
@media (max-width:899.98px){.pantalla-cab--categoria:has(img[src*="indice-05-full"]) .pantalla-cab__foto{height:clamp(12rem,67vw,40rem)}.pantalla-cab--foco-derecha .pantalla-cab__foto img[src*="indice-05-full"]{transform:none}}
/* Como en las pantallas aprobadas, la foto se funde en negro por la derecha: el lema dorado iba sobre la parte clara (la pantalla de BuoHome, la estantería iluminada) y no se leía. */
@media (min-width:900px){.pantalla-cab--categoria .pantalla-cab__foto::after{background:linear-gradient(90deg,var(--negro) 0%,rgba(0,0,0,.55) 7%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 60%,rgba(0,0,0,.78) 78%,var(--negro) 92%)}}
.pantalla-cab--categoria .pantalla-cab__h1{font-size:clamp(1.8rem,.7rem + 2.3vw,3.3rem)}
.pantalla-cab--categoria .pantalla-cab__intro{font-family:var(--fuente-texto);font-size:clamp(.9rem,.8rem + .25vw,1.05rem)}
.pantalla-cab--alta{--inicio-foto:40%;--alto-cab:clamp(20rem,27vw,32rem);--ancho-texto:46%}
.pantalla-cab--alta .pantalla-cab__h1,.pantalla-cab--acuerdo .pantalla-cab__h1{font-size:clamp(1.9rem,.8rem + 2.3vw,3.3rem)}
.pantalla-cab--alta .pantalla-cab__subtitulo{max-width:24em}
/* Hazte proveedor (09): el párrafo no llega a la «S» del escaparate de la foto, que quedaba debajo de «The Seduction y». */
@media (min-width:900px){.pantalla-cab--alta .pantalla-cab__intro{max-width:26rem}}
.pantalla-cab--acuerdo{--inicio-foto:40%;--alto-cab:clamp(20rem,23vw,28rem);--ancho-texto:50%}
/* El lema, bajo las letras impresas de la caja de la foto («A SHARED VISION»): centrado se montaba encima. */
.pantalla-cab--acuerdo .pantalla-cab__lema{top:76%}
.pantalla-cab--acuerdo .pantalla-cab__h1{font-size:clamp(1.8rem,.6rem + 2.1vw,3rem)!important}

/* Cifras en Bodoni Moda: el atajo «font:» quita el tamaño óptico heredado y, con el automático (el tamaño en px), la
   diagonal del 4 se pierde y «04» se lee «01». Tamaño óptico bajo y peso 500, como en secciones.css. */
.pantalla-cab__numero,.paso__numero,.bloque__titulo .num,.categoria__titulo .num,.acceso__numero{font-variation-settings:"opsz" 9;font-weight:500}

/* V3 d25 Showroom (puente 21-oct 21:1x): a ≥1100 el héroe, las 5 tarjetas y la franja de marcas caben en la primera pantalla como en la diapositiva 25 (1440x810: franja hasta 804 px; 1440x900: también la frase del pie). Solo la escena Showroom; la cabecera no se toca. */
@media (min-width:1100px){
  .showroom-heroe__texto{padding-block:clamp(1rem,1.5vw,1.9rem) clamp(.8rem,1vw,1.25rem)}
  .showroom-heroe__ante{margin-bottom:.55rem}
  .showroom-heroe__sub{margin-top:.7rem}
  .showroom-heroe__intro{margin-top:.45rem}
  .showroom-heroe .botones{margin-top:.75rem}
  .showroom-heroe .botones .boton{padding-block:.65rem}
  .showroom-heroe__direccion{margin-top:.5rem}
  .showroom-heroe + .bloques{padding-block:.25rem .4rem}
  .showroom-heroe + .bloques .bloque{padding-block:.5rem;gap:.4rem}
  .showroom-heroe + .bloques .bloque img{aspect-ratio:2.4/1}
  .tss-tira--maqueta{padding-block:.7rem}
  .tss-tira--maqueta .tss-tira-marcas{padding-block:0}
}
/* Codex en vivo (pt196): la foto de cada panel de Innovación se pulsa y lleva al destino de su ENTRAR (antes no hacía nada). Por debajo de 1100, enlace sobre la foto
   (el rótulo y el dominio, por encima; el degradado de abajo no bloquea el clic); desde 1100, la foto es el fondo de la sección: una zona por columna, por detrás de los paneles. */
.innova__foto-enlace{position:absolute;inset:0;z-index:0}
.innova__lamina::after{pointer-events:none}
.innova__zona{display:none}
@media (min-width:1100px){
  .innova__foto-enlace{display:none}
  .innova__zona{display:block;position:absolute;top:22%;bottom:0;width:33.34%}
  .innova__zona--1{left:0}
  .innova__zona--2{left:33.33%}
  .innova__zona--3{left:66.66%}
}
/* W11 (SEG-cx-p27-4-diap20-768-1/-2, criterio 3558, puente 22-oct 03:0x): de 700 a 1023 px la portada de Innovación como la diapositiva, no tarjetas: el héroe (heroe-1672 con las tres fotos enteras, el logo SS y las diagonales doradas) continuo bajo la cabecera y, debajo de cada panel, su rótulo, titular, texto y ENTRAR en tres columnas alineadas con las del héroe (35,7 / 33,7 / 30,6 %). Solo ese tramo: 390 (hasta 699), 1024 y 1440 no cambian. */
@media (min-width:700px) and (max-width:1023.98px){
  .innova__paneles{position:relative;display:grid;grid-template-columns:35.7fr 33.7fr 30.6fr;gap:0;padding:0 0 var(--e-8);container-type:inline-size;background:var(--negro) var(--fondo-innova) top center/100% auto no-repeat}
  @supports (background-image:image-set(url(a.webp) 1x)){.innova__paneles{background-image:var(--fondo-innova-2x)}}
  .innova__paneles::before{content:"";grid-column:1/-1;aspect-ratio:1672/790}
  .innova__zona{display:block;position:absolute;top:0;height:calc(100cqw * 790 / 1672);z-index:1}
  .innova__zona--1{left:0;width:35.7%}
  .innova__zona--2{left:35.7%;width:33.7%}
  .innova__zona--3{left:69.4%;width:30.6%}
  .innova .innova__foto{display:none}
  .innova .innova__foto-enlace{display:none}
  .innova .innova__lamina::after{display:none}
  .innova__panel{grid-row:2;padding:var(--e-4) var(--e-3) 0}
  .innova__marca{--u:calc(100cqw / 440);position:static;margin-bottom:var(--e-3)}
  .innova__panel-titulo{position:static;margin-top:0}
  .innova__panel-texto,.innova__boton{position:static}
  .innova__panel--1 .innova__panel-texto br{display:none}   /* el salto de línea de la diapositiva (1440) dejaba «reales» sola en AI Designer a 768; ahí el texto fluye y se parte solo (en Filmbase y Performance el salto de la diapositiva queda bien) */
  .innova__panel--1 .innova__panel-texto{text-wrap:balance}
}
/* Diap. 25, uso (SEG-USAR-showroom-barcelona): la foto de cada bloque es un botón que la amplía en el visor (por encima del enlace extendido del título,
 * que ya no la cubre); y las marcas de la tira dan una zona de clic de 44 px (con ::after, sin cambiar el alto de la franja). */
.bloque__foto{position:relative;z-index:1;display:block;width:100%;padding:0;margin:0;border:0;background:none;cursor:pointer;color:inherit;font:inherit}   /* la foto navega al destino de su título (cliente, 22-oct); ya no amplía */
.bloque__foto:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
a.tss-tira-marca{position:relative}
a.tss-tira-marca::after{content:"";position:absolute;left:-.25rem;right:-.25rem;top:50%;height:44px;transform:translateY(-50%)}   /* zona de clic de 44 px sin cambiar el alto de la franja de la diapositiva */
/* d25 a 1024 (V3, SEG-p18-villa-emmar-diap25-1024-4, criterio 3558): de 900 a 1099 en horizontal, el héroe, las 5 tarjetas y la franja de marcas en la primera
   pantalla como la diapositiva 25 (a 1024x768: héroe 77-460, tarjetas 465-664, franja hasta 739; antes héroe hasta 573, tarjetas hasta 831 y franja en 2 filas hasta 938):
   los mismos márgenes compactos que desde 1100. */
@media (min-width:900px) and (max-width:1099.98px) and (orientation:landscape){
  .showroom-heroe__texto{padding-block:clamp(1rem,1.5vw,1.9rem) clamp(.8rem,1vw,1.25rem)}
  .showroom-heroe__ante{margin-bottom:.55rem}
  .showroom-heroe__sub{margin-top:.7rem}
  .showroom-heroe__intro{margin-top:.45rem}
  .showroom-heroe .botones{margin-top:.75rem}
  .showroom-heroe .botones .boton{padding-block:.65rem}
  .showroom-heroe__direccion{margin-top:.5rem}
  .showroom-heroe + .bloques{padding-block:.25rem .4rem}
  .showroom-heroe + .bloques .bloque{padding-block:.5rem;gap:.4rem}
  .showroom-heroe + .bloques .bloque img{aspect-ratio:2.4/1}
  .tss-tira--maqueta{padding-block:.7rem}
  .tss-tira--maqueta .tss-tira-marcas{padding-block:0}
}

/* d25 a 390 (V3, SEG-W13-d25-pt296-franja-390-alpha-sola; puente DECIDIDO 4121): por debajo de 561, las 19 marcas en rejilla de 5 columnas (filas 5/5/5/4), sin ALPHA LIGHTING
   sola en una última fila (antes 4/4/4/6/1 con space-between). */
@media (max-width:560px){
  .tss-tira--maqueta .tss-tira-marcas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-items:center;align-items:center;gap:.8rem .6rem}
  .tss-tira--maqueta .tss-tira-marca .tss-tira-logo{max-width:100%;max-height:1rem}
}

/* d25 P1 (V3, filas de W13 sobre pt296: foto oscurecida a la derecha, párrafos sobre la parte clara, bandas negras a 1024; puente DECIDIDO 4121): desde 900, el velo
   de la foto del héroe oscurece a la izquierda, detrás del texto, como la diapositiva, y ya no a la derecha (contraste del texto blanco sobre la foto a 1440:
   p95 5,5→13,8:1, p99 3,9→11,8:1; a 1024: 1,9→8,4:1 y 1,8→6,0:1). De 900 a 1099 en horizontal, la foto cubre el héroe (cover; el hueco 693x383 ya tiene la
   proporción 1,8 de la foto) en vez de ir a lo ancho con bandas negras de ~32 px arriba y abajo. */
@media (min-width:900px){
  .showroom-heroe__foto::after{background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.72) 8%,rgba(0,0,0,.55) 17%,rgba(0,0,0,.25) 26%,rgba(0,0,0,0) 34%,rgba(0,0,0,0) 100%)}
}
@media (min-width:900px) and (max-width:1099.98px) and (orientation:landscape){
  .showroom-heroe__foto{-webkit-mask-image:none;mask-image:none}
  .showroom-heroe__foto img{height:100%}
}

/* d25 P2 (V3, SEG-W13-d25-pt296-lema-jost): desde 900, «MÁS QUE UN SHOWROOM.» de la franja de marcas en la letra de titulares sin negrita, como la diapositiva
   (antes Jost 500); mismo tamaño, mismas 3 líneas y mismo alto de la franja (69 px a 1440). Bajo 900 sigue lo servido (DECIDIDO 3683-1). */
@media (min-width:900px){
  .tss-tira--maqueta .tss-tira-lema{font-family:var(--fuente-titulares);font-weight:400}
}
/* d20 Innovación a ≤767 (contraste del rótulo de cada panel, método V3/V16): velo radial local detrás de «AI Designer», «SS Filmbase», «SS Performance» y su dominio. Sin inset lateral (el −14 % de la primera versión daba scrollWidth 424 > 390) y con overflow-x:clip en la marca; p99 en pod con el CSS inyectado: «AI» 3,49, «Designer» 3,85, resto ≥4,5, scrollWidth 390 y 768. */
@media (max-width:767.98px){.innova__marca{overflow-x:clip}.innova__marca::before{content:"";position:absolute;inset:-30% 0;background:radial-gradient(closest-side,rgba(0,0,0,.97),rgba(0,0,0,.9) 65%,transparent);z-index:-1;pointer-events:none}}
/* Showroom, categorías (VS 23-oct): foco de las fotos nuevas del cliente en la cabecera; 02 vertical, 03 y 01 con el producto entero */
.pantalla-cab--categoria .pantalla-cab__foto img[src*="indice-01-full"]{object-position:50% 35%}
.pantalla-cab--categoria .pantalla-cab__foto img[src*="indice-02-full"]{object-position:50% 72%}
.pantalla-cab--categoria .pantalla-cab__foto img[src*="indice-03-full"]{object-position:50% 75%}
/* Revisión de maqueta d25 (V16, DECIDIDO 5527; medido sobre pt780 a 1100/1440/2356 es/en contra la diapositiva 25 a 1440): el titular con el trazo grueso de la diapositiva
   (600 y opsz 6, como los de Contacto; mismo ancho y 3 renglones) y su interlínea (43,5 px a 1440); los botones a la altura de la diapositiva (38 de 49 a 1440); entradilla
   y párrafo un 7,5 % mayores, como la diapositiva (a 1100 sin cambio). */
@media (min-width:1100px){
  .showroom-heroe .showroom-heroe__h1{font-weight:600;line-height:.975;font-variation-settings:"opsz" 6}
  .showroom-heroe .showroom-heroe__sub{font-size:max(16.8px,1.29vw)}
  .showroom-heroe .showroom-heroe__intro{font-size:max(15.2px,1.135vw)}
  .showroom-heroe .botones .boton{min-height:max(38px,2.64vw);height:max(38px,2.64vw);padding-block:0}
}