/* Kalop · v9 «Precisión». Neutros cálidos y tinta grafito; el color lo ponen los productos, el logo y cada división.
   Títulos en Archivo semiexpandida (como el logo), rótulos y códigos en mono, líneas finas y esquinas apenas redondeadas.
   Todo valor visual sale de tokens.css. */

/* Archivo (la familia del logo, con eje de ancho) para todo el texto y Geist Mono para códigos y rótulos técnicos. Licencia OFL 1.1. */
@font-face { font-family: 'Archivo'; src: url('../fuentes/archivo-latin-wdth-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../fuentes/archivo-latin-wdth-wght-italic.woff2') format('woff2-variations'); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('../fuentes/geist-mono-latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---------- Temas por sección: claro, cálido u oscuro ---------- */
:root { --tit-peso: 780; --tit-ancho: 125%; --tit-track: -0.04em; --sub-peso: 700; --sub-ancho: 115%; }
:root, [data-tema="claro"] { --acento-tit: var(--color-celeste-text); --fondo: var(--color-bg); --texto: var(--color-text); --suave: var(--color-text-muted); --linea: var(--color-border); --linea-fuerte: var(--color-border-strong); --superficie: var(--color-surface); --superficie-2: var(--color-surface-alt); --enfasis: var(--color-accent-text); --foco: var(--color-focus); --vidrio: rgb(15 26 38 / 0.04); }
[data-tema="calido"] { --acento-tit: var(--color-celeste-text); --fondo: var(--color-surface-warm); --texto: var(--color-text); --suave: var(--color-text-muted); --linea: rgb(15 26 38 / 0.1); --linea-fuerte: var(--color-border-strong); --superficie: var(--color-surface); --superficie-2: var(--color-bg); --enfasis: var(--color-accent-text); --foco: var(--color-focus); --vidrio: rgb(15 26 38 / 0.04); }
[data-tema="oscuro"] { --acento-tit: var(--color-celeste); --fondo: var(--color-ink); --texto: var(--color-on-ink); --suave: var(--color-on-ink-muted); --linea: rgb(255 255 255 / 0.12); --linea-fuerte: rgb(255 255 255 / 0.3); --superficie: var(--color-ink-2); --superficie-2: rgb(255 255 255 / 0.04); --enfasis: var(--color-focus-on-ink); --foco: var(--color-focus-on-ink); --vidrio: rgb(255 255 255 / 0.05); }
[data-tema] { background-color: var(--fondo); color: var(--texto); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); overflow-x: clip; -webkit-font-smoothing: antialiased; transition: background-color 0.9s var(--ease-out); }
button, input, select, textarea { font: inherit; }
img, svg, canvas, video { max-width: 100%; display: block; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--color-link); text-underline-offset: 0.2em; }
[data-tema="oscuro"] a:not([class]) { color: var(--color-on-ink); }
:focus-visible { outline: 3px solid var(--foco, var(--color-focus)); outline-offset: 3px; border-radius: 4px; }
main { position: relative; display: block; }
.ancho { width: min(100% - 2 * var(--space-4), 80rem); margin-inline: auto; position: relative; }
@media (min-width: 48rem) { .ancho { width: min(100% - 2 * var(--space-12), 80rem); } }
.saltar { position: absolute; left: var(--space-4); top: -4rem; z-index: 100; background: var(--color-accent); color: var(--color-on-accent); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-weight: 600; }
.saltar:focus { top: var(--space-4); }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.trampa { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
code { font-family: var(--font-mono); font-size: 0.95em; font-variant-numeric: tabular-nums; }
mark { background: rgb(240 125 0 / 0.25); color: inherit; border-radius: 2px; padding: 0 1px; }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 1.375rem; border-radius: var(--radius-sm); border: 1px solid transparent; font: 600 var(--text-sm)/1 var(--font-body); letter-spacing: 0.005em; text-decoration: none; cursor: pointer; transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease; }
.boton:hover { transform: none; }
.boton:active { transform: translateY(0); }
.boton--acento { background: var(--color-accent); color: var(--color-on-accent); }
.boton--acento:hover { background: var(--color-accent-hover); }
.boton--primario { background: var(--color-primary); color: var(--color-on-primary); }
.boton--primario:hover { background: var(--color-primary-hover); }
[data-tema="oscuro"] .boton--primario { background: var(--color-on-ink); color: var(--color-ink); }
.boton--linea { border-color: currentColor; color: var(--texto); background: transparent; }
.boton--linea:hover { background: var(--vidrio); }
.boton--chico { min-height: 42px; padding: 0 var(--space-4); }
.boton__nota { font-weight: 500; opacity: 0.9; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); }
.enlace-flecha { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: 700; font-size: var(--text-sm); color: var(--texto); text-decoration: none; }
.enlace-flecha::after { content: "→"; color: var(--enfasis); transition: transform var(--duration-fast) var(--ease-out); }
.enlace-flecha:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }
.enlace-flecha:hover::after { transform: translateX(4px); }

/* ---------- Barra superior ---------- */
.barra-sup { background: var(--color-ink); color: var(--color-on-ink-muted); font-size: var(--text-xs); }
.barra-sup__fila { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 2.5rem; }
.barra-sup__lema { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-on-ink); font-weight: 600; }
/* En el inicio el lema ya encabeza la portada: no se repite arriba. */
body:has(.portada) .barra-sup__lema { visibility: hidden; }
@media (max-width: 64rem) { body:has(.portada) .barra-sup { display: none; } }
.barra-sup__enlaces { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-6); }
.barra-sup__enlaces a { color: var(--color-on-ink-muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 2.5rem; }
.barra-sup__enlaces a:hover { color: var(--color-on-ink); text-decoration: underline; }
.barra-sup :focus-visible { outline-color: var(--color-focus-on-ink); }
.bandera { width: 22px; height: 15px; border-radius: 3px; flex: none; background: linear-gradient(var(--color-celeste-ar) 0 33.3%, var(--color-blanco) 33.3% 66.6%, var(--color-celeste-ar) 66.6%); box-shadow: 0 0 0 1px rgb(15 26 38 / 0.12); position: relative; }
.bandera::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #F6B40E; }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / 0.92); backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6); color: var(--color-text); border-bottom: 1px solid var(--color-border); transition: box-shadow var(--duration-base) ease; }
.cabecera.con-sombra { box-shadow: 0 10px 30px -18px rgb(15 26 38 / 0.35); }
.cabecera__fila { display: flex; align-items: center; gap: var(--space-6); min-height: 4.5rem; }
.marca { display: inline-flex; align-items: center; color: var(--color-text); text-decoration: none; flex: none; }
/* Logo original (BRAND SOURCES/LOGO HORIZONTAL.ai, exportado a SVG). Las letras toman el color del texto. */
.marca__logo { display: block; height: 1.6rem; width: auto; }
.marca__iso-a { fill: var(--color-logo-naranja); }
.marca__iso-b { fill: var(--color-logo-celeste); }
.marca__letras { fill: currentColor; }
.nav { flex: 0 0 auto; }
.menu__lista { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--space-1); }
.menu__item > a, .menu__abre { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text); font: 600 var(--text-sm) var(--font-body); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease; }
.menu__item > a:hover, .menu__abre:hover, .menu__abre[aria-expanded="true"] { background: var(--color-surface-alt); }
.menu__item > a[aria-current="page"] { color: var(--color-accent-text); }
.menu__abre::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform var(--duration-fast) ease; }
.menu__abre[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.menu__extra { display: none; }
.menu-btn { display: none; align-items: center; gap: var(--space-2); background: none; border: 1px solid var(--color-border-strong); color: var(--color-text); border-radius: var(--radius-sm); min-height: 44px; padding: 0 var(--space-4); font: 600 var(--text-sm) var(--font-body); cursor: pointer; }
.menu-btn__barras, .menu-btn__barras::before { display: block; width: 16px; height: 2px; background: currentColor; position: relative; transition: transform var(--duration-fast) ease; }
.menu-btn__barras::before { content: ""; position: absolute; top: 5px; }
.menu-btn[aria-expanded="true"] .menu-btn__barras { transform: translateY(2px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__barras::before { transform: translateY(-5px) rotate(-90deg); }
.cabecera__cta { flex: none; }

/* Mega menú: las tres divisiones de kalop.com.ar, cada una con su color y la foto de cada línea */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-bg); border-bottom: 1px solid var(--color-border); box-shadow: 0 40px 60px -30px rgb(15 26 38 / 0.35); padding: var(--space-8) 0 var(--space-6); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--duration-fast) ease, transform var(--duration-base) var(--ease-out), visibility 0s var(--duration-base); }
.js .mega.abierto, .no-js .menu__item--mega:hover .mega, .menu__item--mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; transition: opacity var(--duration-fast) ease, transform var(--duration-base) var(--ease-out), visibility 0s; }
.js .menu__item--mega:focus-within .mega:not(.abierto) { opacity: 0; visibility: hidden; }
.mega__grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.mega__div { --div: var(--color-div-modular); --div-tinte: var(--color-div-modular-tinte); --div-texto: var(--color-div-modular-texto); display: grid; align-content: start; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-md); background: var(--div-tinte); }
.mega__div--electricos { --div: var(--color-div-electricos); --div-tinte: var(--color-div-electricos-tinte); --div-texto: var(--color-div-electricos-texto); }
.mega__div--conductores { --div: var(--color-div-conductores); --div-tinte: var(--color-div-conductores-tinte); --div-texto: var(--color-div-conductores-texto); }
.mega__titulo { font-size: var(--text-lg); font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); letter-spacing: -0.02em; line-height: 1.1; display: flex; align-items: center; gap: var(--space-2); }
.mega__titulo::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--div); flex: none; }
.mega__titulo a { color: var(--color-text); text-decoration: none; }
.mega__titulo a:hover { color: var(--div-texto); text-decoration: underline; }
.mega__bajada { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.5; }
.mega__lista { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.mega__lista a { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; gap: var(--space-3); min-height: 3.5rem; padding: 4px var(--space-2) 4px 4px; border-radius: 12px; color: var(--color-text); font-size: var(--text-sm); font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease; }
.mega__lista img { width: 3rem; height: 3rem; object-fit: cover; border-radius: 10px; background: var(--color-bg); transition: transform var(--duration-base) var(--ease-out); }
.mega__lista img[src*="recortes"] { object-fit: contain; padding: 3px; }
.mega__lista li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.mega__lista a:hover { background: var(--color-bg); box-shadow: var(--shadow-1); color: var(--div-texto); }
.mega__lista a:hover img { transform: scale(1.08); }
.mega__extra { justify-self: start; color: var(--div-texto); }
.mega__pie { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); margin-top: var(--space-4); }

/* Buscador de códigos de la cabecera: el rubro compra por código */
.busca-cab { position: relative; flex: 1 1 17rem; min-width: 10rem; max-width: 17rem; margin-left: auto; }
.busca-cab input { width: 100%; min-height: 44px; padding: 0 var(--space-3) 0 2.6rem; text-overflow: ellipsis; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface-alt); color: var(--color-text); font: 500 var(--text-sm) var(--font-body); transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.busca-cab input::placeholder { color: var(--color-text-muted); }
.busca-cab input:focus { outline: none; background: var(--color-bg); border-color: var(--color-celeste-text); box-shadow: 0 0 0 4px rgb(0 159 227 / 0.18); }
.busca-cab__lupa { position: absolute; left: 1rem; top: 50%; width: 14px; height: 14px; margin-top: -9px; border: 2px solid var(--color-text-muted); border-radius: 50%; pointer-events: none; }
.busca-cab__lupa::after { content: ""; position: absolute; right: -5px; bottom: -4px; width: 6px; height: 2px; background: var(--color-text-muted); transform: rotate(45deg); }
.busca-cab__caja { position: absolute; right: 0; top: calc(100% + 8px); width: min(28rem, calc(100vw - 2rem)); padding: var(--space-2); border-radius: var(--radius-md); background: var(--color-bg); border: 1px solid var(--color-border); box-shadow: var(--shadow-2); display: none; }
.busca-cab.con-texto .busca-cab__caja { display: block; }
.busca-cab__estado { font-size: var(--text-xs); color: var(--color-text-muted); padding: var(--space-2) var(--space-3); }
.busca-cab__lista { list-style: none; margin: 0; padding: 0; display: grid; }
.busca-cab__lista a { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-2); border-radius: 12px; color: var(--color-text); text-decoration: none; font-size: var(--text-sm); line-height: 1.3; }
.busca-cab__lista a:hover, .busca-cab__lista a:focus-visible { background: var(--color-surface-alt); }
.busca-cab__lista .mini { width: 3rem; height: 3rem; border-radius: 10px; background: var(--color-bg); border: 1px solid var(--color-border); overflow: hidden; display: grid; place-items: center; }
.busca-cab__lista .mini img { width: 100%; height: 100%; object-fit: contain; }
.busca-cab__lista code { display: block; font-weight: 700; color: var(--color-link); }
.busca-cab__lista span span { color: var(--color-text-muted); }
.busca-btn { display: none; place-items: center; color: var(--color-text); position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface-alt); cursor: pointer; }
.busca-btn svg { margin: auto; }

/* En notebooks (hasta 1400 px) el menú no entra completo con el buscador abierto: el buscador pasa a ser una lupa que lo despliega debajo. */
@media (max-width: 87.5rem) {
  .busca-btn { display: grid; margin-left: auto; }
  .busca-cab { display: none; position: absolute; right: 0; top: 100%; width: min(28rem, 100%); max-width: none; margin: 0; padding: var(--space-3); background: var(--color-bg); border: 1px solid var(--color-border); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: 0 24px 40px -24px rgb(15 26 38 / 0.35); }
  .cabecera.buscando .busca-cab { display: block; }
  .busca-cab__lupa { left: calc(var(--space-3) + 1rem); }
  .busca-cab__caja { left: var(--space-3); right: var(--space-3); width: auto; }
}
@media (max-width: 75rem) {
  .menu__item > a, .menu__abre { padding: 0 var(--space-2); }
}
@media (max-width: 72rem) { .cabecera__cta { display: none; } }
@media (max-width: 64rem) {
  .cabecera__cta { display: inline-flex; }
  .barra-sup__enlaces { display: none; }
  .cabecera__fila { gap: var(--space-3); min-height: 4rem; }
  .nav { flex: 0 0 auto; order: 3; }
  .marca { margin-right: auto; }
  .menu-btn { display: inline-flex; }
  .menu-btn__texto { display: none; }
  .menu-btn { width: 44px; padding: 0; justify-content: center; }
  .busca-btn { display: grid; order: 1; }
  .cabecera__cta { order: 2; }
  .busca-cab { position: absolute; left: 0; right: 0; top: 100%; width: auto; padding: var(--space-3) var(--space-4); border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; box-shadow: none; }
  .cabecera.buscando .busca-cab { display: block; }
  .busca-cab__lupa { left: calc(var(--space-4) + 1rem); }
  .busca-cab__caja { left: var(--space-4); right: var(--space-4); width: auto; }
  .js .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100dvh - 4rem); overflow-y: auto; background: var(--color-bg); border-bottom: 1px solid var(--color-border); box-shadow: 0 30px 40px -20px rgb(15 26 38 / 0.3); padding: var(--space-2) var(--space-4) var(--space-6); }
  .js .menu.abierto { display: block; }
  .menu__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__item { border-bottom: 1px solid var(--color-border); }
  .menu__item > a, .menu__abre { width: 100%; justify-content: space-between; min-height: 56px; padding: 0 var(--space-2); border-radius: 0; font-size: var(--text-lg); }
  .menu__item > a:hover, .menu__abre:hover, .menu__abre[aria-expanded="true"] { background: none; }
  .mega { position: static; box-shadow: none; border: 0; padding: 0 0 var(--space-4); display: none; opacity: 1; visibility: visible; transform: none; }
  .js .mega.abierto { display: block; }
  .mega .ancho { width: 100%; }
  .mega__grilla { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .mega__div { padding: var(--space-4); }
  .mega__bajada { display: none; }
  .menu__extra { display: grid; list-style: none; margin: var(--space-4) 0 0; padding: 0; gap: 2px; }
  .menu__extra a { display: flex; align-items: center; min-height: 44px; color: var(--color-text-muted); font-size: var(--text-sm); }
}
@media (max-width: 40rem) {
  .barra-sup__lema { font-size: 0.75rem; }
  .cabecera__cta { display: none; }
  .mega__lista { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Piezas comunes ---------- */
.sobretitulo { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--texto); }
.etiqueta { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 var(--text-xs)/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave); }
.etiqueta::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--color-accent); }
.etiqueta:has(.bandera)::before { display: none; }
.etiqueta a { color: inherit; text-underline-offset: 0.25em; }
.titulo { font-family: var(--font-display); font-weight: var(--tit-peso); font-stretch: var(--tit-ancho); font-size: var(--text-2xl); line-height: 1; letter-spacing: -0.03em; }
/* Titulares de un solo tono: la parte destacada va en gris, no en otro color. */
.titulo em { font-style: normal; color: var(--acento-tit); }
.cabeza { display: grid; gap: var(--space-4); max-width: 48rem; margin-bottom: var(--space-8); }
.cabeza--centro { margin-inline: auto; text-align: center; justify-items: center; }
/* Cabeza partida: el título a la izquierda y la bajada a la derecha, apoyada en la misma línea de base. */
.cabeza--partida { max-width: none; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 1rem + 3vw, 5rem); align-items: end; }
.cabeza--partida .etiqueta { grid-column: 1 / -1; }
.cabeza--partida .cabeza__bajada { justify-self: start; }
@media (max-width: 48rem) { .cabeza--partida { grid-template-columns: minmax(0, 1fr); } }
.cabeza__bajada { font-size: var(--text-lg); color: var(--suave); max-width: 42rem; }
.nota { font-size: var(--text-xs); color: var(--suave); }
.dato { font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips li { font-size: var(--text-xs); font-weight: 600; padding: 5px 12px; border: 1px solid var(--linea); border-radius: var(--radius-sm); background: var(--superficie); }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); position: relative; }
/* Al bajar, la página entera pasa a oscuro cuando llega un bloque oscuro (y vuelve al salir): sitio.js marca body[data-vista]. */
.js body[data-vista] main > [data-tema] { background-color: transparent; transition: color 0.9s var(--ease-out); }
.js body[data-vista="oscuro"] { background-color: var(--color-ink); }
/* En los tramos oscuros, una trama de puntos muy fina sobre el grafito (detalle técnico, casi imperceptible). */
.js body { background-image: radial-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1.2px); background-size: 16px 16px; background-attachment: fixed; background-blend-mode: normal; }
.js body:not([data-vista="oscuro"]) { background-image: none; }
.js body[data-vista="calido"] { background-color: var(--color-surface-warm); }
.js body[data-vista="oscuro"] main > [data-tema] { --acento-tit: var(--color-celeste); --fondo: var(--color-ink); --texto: var(--color-on-ink); --suave: var(--color-on-ink-muted); --linea: rgb(255 255 255 / 0.12); --linea-fuerte: rgb(255 255 255 / 0.3); --superficie: var(--color-ink-2); --superficie-2: rgb(255 255 255 / 0.04); --enfasis: var(--color-focus-on-ink); --foco: var(--color-focus-on-ink); --vidrio: rgb(255 255 255 / 0.05); }
.js body[data-vista="claro"] main > [data-tema], .js body[data-vista="calido"] main > [data-tema] { --acento-tit: var(--color-celeste-text); --texto: var(--color-text); --suave: var(--color-text-muted); --linea: var(--color-border); --linea-fuerte: var(--color-border-strong); --superficie: var(--color-surface); --superficie-2: var(--color-surface-alt); --enfasis: var(--color-accent-text); --foco: var(--color-focus); --vidrio: rgb(15 26 38 / 0.04); }
/* Un bloque oscuro que todavía no llegó al centro de la pantalla se ve sobre el fondo claro: sus detalles también. */
.js body:is([data-vista="claro"], [data-vista="calido"]) main > [data-tema="oscuro"] a:not([class]) { color: var(--color-text); }
.js body:is([data-vista="claro"], [data-vista="calido"]) main > [data-tema="oscuro"] .boton--primario { background: var(--color-primary); color: var(--color-on-primary); }
.js body[data-vista="oscuro"] main > [data-tema]:not([data-tema="oscuro"]) .boton--primario { background: var(--color-on-ink); color: var(--color-ink); }

/* ---------- Portada (v9): la vitrina de novedades recibe al visitante ----------
   A la izquierda el rótulo, el nombre del producto, su código y las acciones; a la derecha el escenario, que cambia de
   tono según el producto (claro para los oscuros, grafito para los claros) y lleva el nombre grande en su piso.
   La página no cambia de color: solo el escenario. */
.portada { --div: var(--color-div-modular); --div-texto: var(--color-div-modular-texto); --escenario: var(--color-div-modular-tinte); --palabra: color-mix(in srgb, var(--color-div-modular) 13%, var(--escenario));
  position: relative; padding-block: var(--space-6) var(--space-12); background: var(--color-bg); color: var(--color-text); }
.portada[data-div="electricos"] { --div: var(--color-div-electricos); --div-texto: var(--color-div-electricos-texto); --escenario: var(--color-div-electricos-tinte); --palabra: color-mix(in srgb, var(--color-div-electricos) 14%, var(--escenario)); }
.portada[data-div="conductores"] { --div: var(--color-div-conductores); --div-texto: var(--color-div-conductores-texto); --escenario: var(--color-div-conductores-tinte); --palabra: color-mix(in srgb, var(--color-div-conductores) 15%, var(--escenario)); }
.portada[data-tema-lamina="oscuro"] { --escenario: var(--color-ink-2); --palabra: color-mix(in srgb, var(--div) 22%, var(--color-ink-2)); }
.vitrina { --dur: 6000ms; position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8) clamp(2rem, 1rem + 3vw, 5rem); height: clamp(30rem, calc(100svh - 10.5rem), 44rem); }
.vitrina__info { display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--space-6); min-width: 0; padding-block: var(--space-2) 0; }
.vitrina__rotulo { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.vitrina__marca { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); }
.vitrina__marca::before { content: ""; width: 8px; height: 8px; background: var(--color-accent); }
.vitrina__indice { font-variant-numeric: tabular-nums; }
.vitrina__indice [data-indice] { color: var(--color-text); display: inline-block; }
.vitrina__indice { overflow: hidden; }
.vitrina__indice [data-indice].entra { animation: num-rueda 0.6s var(--ease-out) both; }
@keyframes num-rueda { from { transform: translateY(100%); opacity: 0; } }
.vitrina__texto { display: grid; align-content: center; gap: var(--space-4); min-width: 0; }
.vitrina__tipo { font: 500 var(--text-xs)/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--div-texto); transition: color 0.6s ease; }
.vitrina__nombre { font-family: var(--font-display); font-weight: var(--tit-peso); font-stretch: var(--tit-ancho); font-size: var(--text-3xl); line-height: 0.95; letter-spacing: -0.035em; min-height: 1.9em; display: flex; flex-wrap: wrap; align-content: flex-end; column-gap: 0.25em; }
.vitrina__lema { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 30rem; min-height: calc(1.6em * 2); }
/* Al cambiar de producto, cada palabra del nombre sube desde una máscara y el resto aparece apenas después. */
.vitrina__nombre .pal { display: inline-block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.vitrina__nombre .pal > span { display: inline-block; }
.vitrina__nombre.entra .pal > span { animation: pal-sube 0.9s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes pal-sube { from { transform: translateY(105%); } }
.vitrina__tipo.entra, .vitrina__lema.entra { animation: fundir 0.8s var(--ease-out) 0.15s both; }
.vitrina__acciones { gap: var(--space-3) var(--space-6); }
.escenario__control { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.escenario__puntos { display: grid; grid-auto-flow: column; grid-auto-columns: 2.5rem; flex: none; gap: var(--space-2); }
.punto { height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; }
.punto__barra { display: block; height: 2px; background: var(--color-border); overflow: hidden; position: relative; }
.punto__barra::after { content: ""; position: absolute; inset: 0; background: var(--color-text); transform: scaleX(0); transform-origin: left; }
.punto.activo .punto__barra::after { animation: llenar var(--dur) linear both; }
.punto:hover .punto__barra { background: var(--color-border-strong); }
.vitrina.quieta .punto.activo .punto__barra::after { animation: none; transform: scaleX(1); }
@keyframes llenar { to { transform: scaleX(1); } }
.escenario__pausa { width: 44px; height: 44px; flex: none; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: transparent; color: var(--color-text); cursor: pointer; position: relative; }
.escenario__pausa::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 11px; translate: -50% -50%; border-inline: 3px solid currentColor; box-sizing: border-box; }
.escenario__pausa[aria-pressed="true"]::before { width: 0; height: 0; border: 0; border-left: 10px solid currentColor; border-block: 6px solid transparent; translate: -35% -50%; }
.escenario__pausa:hover { border-color: var(--color-text); }

/* Escenario: tono parejo, marcas de corte en las esquinas y el nombre grande apoyado en el piso. */
.vitrina__escena { position: relative; overflow: hidden; border-radius: var(--radius-lg); background-color: var(--escenario); background-image: radial-gradient(rgb(17 20 24 / 0.08) 1px, transparent 1.2px); background-size: 14px 14px; container-type: inline-size; transition: background-color 0.9s var(--ease-out); }
.vitrina__escena::before { content: ""; position: absolute; inset: 14px; pointer-events: none; z-index: 2; opacity: 0.5;
  background: linear-gradient(currentColor, currentColor) 0 0 / 14px 1px, linear-gradient(currentColor, currentColor) 0 0 / 1px 14px,
    linear-gradient(currentColor, currentColor) 100% 0 / 14px 1px, linear-gradient(currentColor, currentColor) 100% 0 / 1px 14px,
    linear-gradient(currentColor, currentColor) 0 100% / 14px 1px, linear-gradient(currentColor, currentColor) 0 100% / 1px 14px,
    linear-gradient(currentColor, currentColor) 100% 100% / 14px 1px, linear-gradient(currentColor, currentColor) 100% 100% / 1px 14px;
  background-repeat: no-repeat; color: var(--color-text-muted); }
.portada[data-tema-lamina="oscuro"] .vitrina__escena::before { color: var(--color-on-ink-muted); }
.portada[data-tema-lamina="oscuro"] .vitrina__escena { background-image: radial-gradient(60% 55% at 55% 40%, color-mix(in srgb, var(--div) 18%, transparent), transparent 70%), radial-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1.2px); background-size: auto, 14px 14px; }
.vitrina__gigante { position: absolute; left: 3.5%; bottom: -0.17em; z-index: 0; font-family: var(--font-display); font-weight: 700; font-stretch: 125%; font-size: min(24cqi, calc(140cqi / var(--l, 6))); line-height: 1; letter-spacing: -0.04em; color: var(--palabra); white-space: nowrap; pointer-events: none; transition: color 0.9s var(--ease-out); }
.vitrina__gigante.cambia { animation: gigante 1.1s var(--ease-out) both; }
@keyframes gigante { from { opacity: 0; transform: translateX(8%); } }
.diapo { position: absolute; inset: 0; margin: 0; z-index: 1; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s 0.6s; }
.diapo.activa { opacity: 1; visibility: visible; transition: opacity 0.6s ease 0.1s, visibility 0s; }
.diapo__objeto { position: absolute; inset: 7% 14% 22%; }
.diapo__objeto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 26px rgb(17 20 24 / 0.2)); transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform 0.6s var(--ease-out); }
.portada[data-tema-lamina="oscuro"] .diapo__objeto img { filter: drop-shadow(0 22px 30px rgb(0 0 0 / 0.45)); }
.vitrina__escena { perspective: 1400px; }
/* Caños: el atado entra desde la derecha y se corta en el borde, como si siguiera. */
.diapo__objeto--sangra { inset: 20% 0 32% 12%; }
.diapo__objeto--sangra img { object-position: right center; }
.diapo.activa .diapo__objeto { animation: entra-producto 1.1s var(--ease-out) both; }
@keyframes entra-producto { from { opacity: 0; transform: translateY(24px) scale(0.96); clip-path: inset(18% 0 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }

/* ---------- Manifiesto: el mensaje nacional, debajo de la vitrina ---------- */
.manifiesto { padding-block: clamp(3rem, 2rem + 4vw, 6rem); background: var(--color-bg); color: var(--color-text); border-top: 1px solid var(--color-border); }
.manifiesto__grilla { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6) clamp(2rem, 1rem + 3vw, 5rem); align-items: end; }
.manifiesto .etiqueta { grid-column: 1 / -1; }
.manifiesto__titulo { font-family: var(--font-display); font-weight: var(--tit-peso); font-stretch: var(--tit-ancho); font-size: var(--text-3xl); line-height: 0.98; letter-spacing: -0.035em; }
.manifiesto__titulo em { font-style: normal; color: var(--acento-tit); }
.manifiesto__texto { display: grid; gap: var(--space-6); justify-items: start; }
.manifiesto__texto p { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 34rem; }
.pilares { grid-column: 1 / -1; list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Los pilares son tres módulos en un mismo bastidor: marco único, divisiones finas y los tornillos arriba y abajo. */
.pilares { position: relative; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); }
.pilares::before, .pilares::after { content: ""; position: absolute; left: 50%; width: 9px; height: 9px; translate: -50% 0; border-radius: 50%; border: 1px solid var(--color-border-strong); background: linear-gradient(var(--color-border-strong), var(--color-border-strong)) center / 5px 1px no-repeat, var(--color-bg); }
.pilares::before { top: -5px; } .pilares::after { bottom: -5px; }
.pilares li { display: grid; gap: var(--space-1); padding: var(--space-6); }
.pilares li + li { border-left: 1px solid var(--color-border); }
.pilares__num { font: 500 var(--text-xs)/1 var(--font-mono); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.pilares strong { font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); font-size: var(--text-xl); letter-spacing: -0.015em; }
.pilares li > span:last-child { color: var(--color-text-muted); font-size: var(--text-sm); }
@media (max-width: 64rem) {
  .vitrina { grid-template-columns: minmax(0, 1fr); height: auto; gap: var(--space-6); }
  .vitrina__escena { order: -1; aspect-ratio: 5 / 4; }
  .vitrina__info { grid-template-rows: auto auto auto auto; gap: var(--space-4); }
  .vitrina__rotulo { order: -1; }
  .vitrina__nombre { min-height: 0; }
  .manifiesto__grilla { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 40rem) {
  .portada { padding-block: var(--space-4) var(--space-8); }
  .vitrina__escena { aspect-ratio: 1; }
  .vitrina__nombre { font-size: clamp(2.5rem, 12vw, 3.25rem); }
  .vitrina__lema { font-size: var(--text-base); min-height: 0; }
  .diapo__objeto { inset: 7% 12% 24%; }
  .diapo__objeto--sangra { inset: 24% 0 34% 6%; }
  .pilares { grid-template-columns: minmax(0, 1fr); }
  .pilares li { padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6); }
  .pilares li + li { border-left: 0; border-top: 1px solid var(--color-border); }
  .pilares::before, .pilares::after { left: auto; right: var(--space-4); translate: none; }
  .pilares__num { margin-bottom: var(--space-1); }
}

/* ---------- Divisiones (v9): tres filas separadas por líneas finas. A la izquierda el texto y las familias como una
   lista técnica; a la derecha un escenario del tono de la división con tres productos sobre un mismo piso.
   Al pasar o enfocar una familia, el escenario muestra sus productos. ---------- */
.puertas { display: grid; border-top: 1px solid var(--texto); }
.puerta:focus-within { z-index: 10; }
.puerta { --div: var(--color-div-modular); --div-tinte: var(--color-div-modular-tinte); --div-texto: var(--color-div-modular-texto); position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8) clamp(2rem, 1rem + 3vw, 5rem); align-items: stretch; padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); border-bottom: 1px solid var(--linea); color: var(--texto); scroll-margin-top: 6rem; }
.puerta--electricos { --div: var(--color-div-electricos); --div-tinte: var(--color-div-electricos-tinte); --div-texto: var(--color-div-electricos-texto); }
.puerta--conductores { --div: var(--color-div-conductores); --div-tinte: var(--color-div-conductores-tinte); --div-texto: var(--color-div-conductores-texto); }
.puerta__texto { display: grid; gap: var(--space-4); align-content: start; justify-items: start; position: relative; z-index: 1; }
.puerta__num { font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.08em; color: var(--div-texto); display: inline-flex; align-items: center; gap: var(--space-3); }
.puerta__num::after { content: ""; width: 2.5rem; height: 1px; background: var(--div); }
.puerta__titulo { font-weight: var(--tit-peso); font-stretch: var(--tit-ancho); font-size: var(--text-2xl); line-height: 1; letter-spacing: -0.03em; }
.puerta__bajada { color: var(--suave); font-size: var(--text-lg); max-width: 34rem; }
/* Familias: lista de dos columnas con línea fina y flecha, como un índice técnico. */
.puerta__enlaces { list-style: none; margin: var(--space-2) 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); border-top: 1px solid var(--linea); }
.puerta__enlaces li { border-bottom: 1px solid var(--linea); }
.puerta__enlaces a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 48px; color: var(--texto); font-size: var(--text-sm); font-weight: 500; text-decoration: none; transition: color var(--duration-fast) ease, padding var(--duration-base) var(--ease-out); }
.puerta__enlaces a::after { content: "→"; color: var(--div-texto); opacity: 0.5; transition: opacity var(--duration-fast) ease, transform var(--duration-base) var(--ease-out); }
.puerta__enlaces a:hover, .puerta__enlaces a:focus-visible { color: var(--div-texto); padding-left: 6px; }
.puerta__enlaces a:hover::after, .puerta__enlaces a:focus-visible::after { opacity: 1; transform: translateX(-2px); }
.puerta .acciones { margin-top: var(--space-2); }
.puerta .enlace-flecha { color: var(--texto); }
.puerta .enlace-flecha::after { color: var(--div-texto); }
/* Escenario: tono de la división, trama de puntos muy fina y marcas de corte en las esquinas. */
.puerta__collage { position: relative; min-height: 22rem; border-radius: var(--radius-lg); overflow: hidden; background-color: var(--div-tinte); background-image: radial-gradient(rgb(17 20 24 / 0.09) 1px, transparent 1.2px); background-size: 14px 14px; }
.puerta__collage::before { content: ""; position: absolute; inset: 14px; pointer-events: none; z-index: 3; opacity: 0.55; color: var(--color-text-muted);
  background: linear-gradient(currentColor, currentColor) 0 0 / 14px 1px, linear-gradient(currentColor, currentColor) 0 0 / 1px 14px,
    linear-gradient(currentColor, currentColor) 100% 0 / 14px 1px, linear-gradient(currentColor, currentColor) 100% 0 / 1px 14px,
    linear-gradient(currentColor, currentColor) 0 100% / 14px 1px, linear-gradient(currentColor, currentColor) 0 100% / 1px 14px,
    linear-gradient(currentColor, currentColor) 100% 100% / 14px 1px, linear-gradient(currentColor, currentColor) 100% 100% / 1px 14px;
  background-repeat: no-repeat; }
.puerta__gigante { display: none; }
.pieza { position: absolute; width: 46%; height: auto; filter: drop-shadow(0 18px 22px rgb(17 20 24 / 0.18)); transition: transform 0.9s var(--ease-out), opacity 0.6s var(--ease-out); transition-delay: calc(var(--n, 0) * 110ms); }
.puerta__collage::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 17%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgb(17 20 24 / 0.14), transparent); pointer-events: none; }
.pieza--1 { left: 6%; bottom: 20%; width: 26%; }
.pieza--2 { left: 0; right: 0; margin-inline: auto; bottom: 18%; width: 38%; z-index: 2; }
.pieza--3 { right: 6%; bottom: 20%; width: 26%; }
.pieza--4 { display: none; }
.puerta__collage--cables .pieza--1, .puerta__collage--cables .pieza--3 { width: 22%; bottom: 21%; }
.puerta__collage--cables .pieza--2 { width: 46%; bottom: 18%; }
.puerta:hover .pieza--2 { scale: 1.03; }
/* Entrada: las piezas llegan escalonadas cuando el bloque asoma (sitio.js pone .espera y la saca). */
.pieza--1 { --n: 0; --dx: -60px; } .pieza--2 { --n: 1; --dx: 0px; } .pieza--3 { --n: 2; --dx: 60px; } .pieza--4 { --n: 3; --dx: 40px; }
.js .puerta.espera .pieza { opacity: 0; transform: translate(var(--dx), 50px) scale(0.9); }
.js .puerta.espera .puerta__collage { clip-path: inset(0 0 100% 0); }
.puerta__collage { transition: clip-path 1.1s var(--ease-inout); clip-path: inset(0 0 0 0); }
/* Una sola foto (conductores): grande y al centro. */
.puerta__collage[data-solo] .pieza--2 { left: 0; right: 0; margin-inline: auto; top: 8%; bottom: auto; width: auto; height: 70%; }
.pieza--cambia { animation: pieza-entra 0.22s var(--ease-out); }
@keyframes pieza-entra { from { opacity: 0.35; scale: 0.94; } }
@media (prefers-reduced-motion: reduce) { .pieza--cambia { animation: none; } }

/* ---------- Inspiración: líneas, ambientes y de cerca, en pestañas (v8.12) ---------- */
.inspiracion__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-4) var(--space-6); margin-bottom: var(--space-6); }
.inspiracion__cabeza .cabeza { margin-bottom: 0; }
.pestanas { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-sm); background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linea); }
.pestanas [role="tab"] { min-height: 44px; padding: 0 var(--space-6); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--texto); font: 700 var(--text-sm) var(--font-body); cursor: pointer; }
.pestanas [role="tab"]:hover { background: var(--superficie); }
.pestanas [role="tab"][aria-selected="true"] { background: var(--color-text); color: var(--color-bg); }
:root:not(.js) .pestanas { display: none; }
:root:not(.js) [data-lineas-grupos] { display: none; }
:root:not(.js) .inspiracion__panel + .inspiracion__panel { margin-top: var(--space-12); }
.inspiracion__panel.entra { animation: panel-entra 0.25s var(--ease-out); }
@keyframes panel-entra { from { opacity: 0; } }

/* ---------- Líneas: grupos en solapas y sus familias en grilla (todo hacia abajo, sin barra horizontal) ---------- */
.lineas__grilla { list-style: none; margin-block: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
@media (max-width: 64rem) { .lineas__grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.chip-corto { display: none; }
@media (max-width: 40rem) { .chip-largo { display: none; } .chip-corto { display: inline; } }
@media (max-width: 40rem) { .lineas__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-3); } }
.lineas__control { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.filtros-div { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filtros-div button { min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--linea-fuerte); background: transparent; color: var(--texto); font: 600 var(--text-sm) var(--font-body); cursor: pointer; transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease; }
.filtros-div button:hover { border-color: var(--texto); }
.filtros-div button[aria-pressed="true"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.linea { --div: var(--color-div-modular); --div-texto: var(--color-div-modular-texto); }
.linea--electricos { --div: var(--color-div-electricos); --div-texto: var(--color-div-electricos-texto); }
.linea--conductores { --div: var(--color-div-conductores); --div-texto: var(--color-div-conductores-texto); }
.linea a { display: grid; gap: var(--space-1); color: var(--color-text); text-decoration: none; }
.linea__foto { display: block; aspect-ratio: 368 / 450; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-alt); box-shadow: var(--shadow-1); position: relative; margin-bottom: var(--space-2); }
.linea__foto::after { content: ""; position: absolute; inset: auto 0 0; height: 5px; background: var(--div); transform: scaleX(0.18); transform-origin: left; transition: transform 0.5s var(--ease-out); }
.linea__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.linea a:hover .linea__foto img, .linea a:focus-visible .linea__foto img { transform: scale(1.06); }
.linea a:hover .linea__foto::after, .linea a:focus-visible .linea__foto::after { transform: none; }
.linea__div { font-size: var(--text-xs); font-weight: 700; color: var(--div-texto); letter-spacing: 0.02em; }
.linea__nombre { font-weight: 700; font-size: var(--text-base); letter-spacing: -0.01em; line-height: 1.2; }
.linea.fuera { display: none; }

/* ---------- Ambientes: la foto del lugar y la tapa que lo acompaña ---------- */
.ambientes__grilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
.ambiente { grid-column: span 5; }
.ambiente--grande { grid-column: span 7; }
.ambiente a { position: relative; display: block; height: clamp(14rem, 7rem + 12vw, 19rem); border-radius: var(--radius-lg); overflow: hidden; color: var(--color-text); text-decoration: none; background: var(--color-surface-alt); }
.ambiente__foto { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.ambiente a:hover .ambiente__foto { transform: scale(1.04); }
.ambiente__ficha { position: absolute; left: var(--space-4); bottom: var(--space-4); right: auto; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2); border-radius: var(--radius-md); background: rgb(255 255 255 / 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-2); transition: transform 0.5s var(--ease-out); max-width: calc(100% - 2 * var(--space-4)); }
.ambiente a:hover .ambiente__ficha { transform: translateY(-6px); }
.ambiente__ficha img { width: 4.5rem; height: 4.5rem; object-fit: contain; border-radius: 12px; background: #fff; flex: none; }
.ambiente__ficha > span { display: grid; gap: 2px; min-width: 0; }
/* De cerca: fotos editoriales; el texto va debajo de la foto, nunca encima del producto. */
.detalles__grilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
.detalle a { display: grid; gap: var(--space-1); color: var(--color-text); text-decoration: none; }
.detalle__foto { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface-alt); margin-bottom: var(--space-2); }
.detalle__foto img { width: 100%; height: 100%; object-fit: cover; }
.detalle__rubro { font-size: var(--text-xs); letter-spacing: 0.08em; font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; color: var(--color-accent-text); }
.detalle__nombre { font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); letter-spacing: -0.02em; font-size: var(--text-lg); line-height: 1.1; }
.detalle__nombre::after { content: "\00a0→"; color: var(--color-accent-text); }
.detalle a:hover .detalle__nombre { color: var(--color-primary); }
.detalle a:hover .detalle__foto { outline: 3px solid var(--color-accent); outline-offset: 3px; }
@media (max-width: 40rem) {
  .detalles__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-3); }
  .detalle__nombre { font-size: var(--text-base); }
}
.ambiente__linea { font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); font-size: var(--text-lg); letter-spacing: -0.02em; line-height: 1.15; }
.ambiente__lema { font-size: var(--text-xs); color: var(--color-text-muted); }
.ambiente__linea::after { content: " →"; color: var(--color-accent-text); }

/* ---------- Descargas: el catálogo en PDF como tarjeta principal, y las hojas al costado ---------- */
.descargas { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-6); align-items: stretch; }
.folleto__etiqueta { font-size: var(--text-xs); letter-spacing: 0.08em; font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; color: var(--color-accent-text); }
.folleto__titulo { font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); font-size: calc(var(--text-2xl) * 0.78); line-height: 1.04; letter-spacing: -0.018em; }
.folleto__bajada { color: var(--color-text-muted); max-width: 30rem; }
.folleto__caja { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--color-div-modular-tinte), var(--color-div-electricos-tinte)); overflow: hidden; color: var(--color-text); }
.folleto__texto { display: grid; gap: var(--space-4); justify-items: start; }
.folleto__texto .cabeza__bajada { color: var(--color-text-muted); }
/* El catálogo es apaisado: dos hojas enteras, el interior atrás y la tapa adelante, sin salirse de la tarjeta. */
.folleto__libro { position: relative; aspect-ratio: 4 / 3; margin: 0; }
.folleto__hoja { position: absolute; width: 78%; height: auto; left: 2%; bottom: 6%; border: 5px solid var(--color-surface); border-radius: 6px; box-shadow: 0 24px 50px -18px rgb(15 26 38 / 0.45), 0 2px 6px rgb(15 26 38 / 0.12); rotate: -3deg; transition: rotate 0.5s var(--ease-out); }
.folleto__hoja--atras { left: auto; right: 2%; bottom: auto; top: 6%; rotate: 3deg; }
.folleto__caja:hover .folleto__hoja { rotate: -5deg; }
.folleto__caja:hover .folleto__hoja--atras { rotate: 5deg; }

/* ====================== Componentes (de la v7, adaptados) ====================== */
/* ---------- Sistema modular: armador ---------- */
.armador { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "lineas lineas" "escena panel"; gap: var(--space-8) var(--space-12); align-items: start; }
.armador__selector { grid-area: lineas; display: grid; gap: var(--space-3); justify-items: start; }
.armador__lineas { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.armador__lineas button { min-height: 44px; padding: 0 var(--space-6); border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); font: 600 var(--text-sm) var(--font-body); cursor: pointer; transition: background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease; }
.armador__lineas button:hover { border-color: var(--color-primary); }
.armador__lineas button[aria-checked="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-ink); }
.armador__sublineas { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-sm); background: var(--color-surface-alt); }
.armador__sublineas[hidden] { display: none; }
.armador__sublineas button { min-height: 44px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); font: 600 var(--text-sm) var(--font-body); cursor: pointer; }
.armador__sublineas button:hover { background: var(--color-surface); }
.armador__sublineas button[aria-checked="true"] { background: var(--color-surface); box-shadow: inset 0 0 0 2px var(--color-text); }
.armador__escena { grid-area: escena; position: relative; height: clamp(22rem, 52vh, 32rem); display: grid; place-items: center; perspective: 1100px; border-radius: var(--radius-md); background: radial-gradient(60% 55% at 50% 45%, var(--color-surface), var(--color-surface-alt) 75%); }
.armador__capas { position: relative; height: 86%; max-width: 90%; aspect-ratio: 1; transform: rotateY(-10deg) rotateX(3deg); transition: transform 0.6s var(--ease-out); animation: flotar 7s ease-in-out infinite; }
.capa { position: absolute; inset: 0; display: grid; place-items: center; padding: 4%; container-type: size; opacity: 0; transform: scale(0.97); transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.2, 0.75, 0.25, 1); }
.capa img { filter: drop-shadow(0 18px 22px rgb(0 0 0 / 0.35)); }
.capa.visible { opacity: 1; transform: none; }
/* La tapa ocupa un cuadrado (su recorte es de 1000×1000) y los módulos se encastran en su hueco, por debajo del marco. */
.capa__tapa { position: relative; width: min(100cqw, 100cqh); aspect-ratio: 1; }
.capa__tapa > img { position: relative; z-index: 1; }
.capa__ventana { position: absolute; z-index: 0; background: #0d0e10; transform: scale(1.04); }
.capa__puesto { position: absolute; left: 0; right: 0; top: calc(var(--i) * 100% / 3); height: calc(100% / 3); }
.capa__puesto--doble { top: 0; height: 100%; }
.capa__puesto svg { display: block; width: 100%; height: 100%; }
/* Al elegir un módulo, entra al puesto como si se presionara contra el bastidor. */
.capa__puesto.entra { animation: encastre 0.55s var(--ease-out) both; }
@keyframes encastre { 0% { opacity: 0; transform: translateY(-14%) scale(1.08); filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.35)); } 60% { opacity: 1; } 100% { transform: none; filter: none; } }
.armador__piso { position: absolute; left: 25%; right: 25%; bottom: 5%; height: 1.6rem; border-radius: 50%; background: radial-gradient(closest-side, rgb(7 24 51 / 0.25), transparent); }
.armador__panel { grid-area: panel; display: grid; gap: var(--space-4); justify-items: start; }
.armador__lema { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent-text); }
.armador__nombre { font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); letter-spacing: -0.02em; font-size: var(--text-2xl); line-height: 1; }
.armador__desc { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 30rem; }
.armador__formatos { font-size: var(--text-sm); font-weight: 600; }
.fundido { animation: fundir 0.7s cubic-bezier(0.2, 0.75, 0.25, 1) both; }
@keyframes fundir { from { opacity: 0; transform: translateY(10px); } }
.armador__grupo { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-3); min-width: 0; }
.armador__grupo legend { font-size: var(--text-xs); letter-spacing: 0.08em; font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; color: var(--color-text-muted); padding: 0; margin-bottom: var(--space-3); }
.armador__grupo legend span { letter-spacing: 0.04em; text-transform: none; color: var(--color-text); font-size: var(--text-sm); }
.muestras { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.muestra { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--color-surface); background: var(--m); box-shadow: 0 0 0 1px var(--color-border-strong), inset 0 -6px 10px rgb(0 0 0 / 0.15), inset 0 4px 8px rgb(255 255 255 / 0.35); cursor: pointer; transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease; }
.muestra:hover { transform: scale(1.08); }
.muestra[aria-checked="true"] { box-shadow: 0 0 0 3px var(--color-primary), inset 0 -6px 10px rgb(0 0 0 / 0.15), inset 0 4px 8px rgb(255 255 255 / 0.35); }
.muestra[data-patron="madera"] { background: repeating-linear-gradient(95deg, var(--m) 0 5px, rgb(0 0 0 / 0.18) 5px 7px); }
.muestra[data-patron="bricks"] { background: linear-gradient(var(--m) 0 45%, #EDE6DA 45% 55%, var(--m) 55%); }
.muestra[data-patron="circle"] { background: radial-gradient(circle, #E08A4B 0 22%, #EFE9DF 22% 40%, var(--m) 40% 62%, #EFE9DF 62%); }
.muestra[data-patron="pinceladas"] { background: linear-gradient(160deg, var(--m) 0 35%, #F27A1A 35% 65%, #E8C832 65%); }
.armador__modulos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.armador__modulos .armador__armado { grid-column: 1 / -1; min-width: 0; }
.armador__modulos select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.armador__modulos label[hidden] { display: none; }
.armador__modulos label { display: grid; gap: var(--space-1); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.armador__modulos select { min-height: 44px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: 500 var(--text-sm) var(--font-body); padding: 0 var(--space-2); }
.armador__codigo { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-muted); min-height: 1.6em; }
.sistema { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--color-border); display: grid; gap: var(--space-4); }
.sistema__titulo { font-size: var(--text-xs); letter-spacing: 0.08em; font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; color: var(--color-text-muted); }

/* ---------- Página de la línea Zen ---------- */
.hero--linea .etiqueta a { color: inherit; text-underline-offset: 0.25em; }
.saltos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.saltos a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 1px solid rgb(255 255 255 / 0.25); color: var(--color-on-ink); text-decoration: none; font-size: var(--text-sm); font-weight: 600; transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease; }
.saltos a:hover { border-color: var(--color-accent); background: rgb(255 255 255 / 0.06); }
.armador--fija { grid-template-areas: "panel escena"; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* La tapa queda arriba, a la par de los controles, y acompaña el scroll mientras se arma la lista de materiales */
@media (min-width: 64.01rem) { .armador__escena { position: sticky; top: 6rem; } }
.seccion--alt .armador__escena { background: radial-gradient(60% 55% at 50% 45%, var(--color-surface), var(--color-bg) 75%); }
.codigos { border-collapse: collapse; width: 100%; max-width: 30rem; font-size: var(--text-sm); }
.codigos caption { text-align: left; font-size: var(--text-xs); letter-spacing: 0.08em; font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; color: var(--color-text-muted); padding-bottom: var(--space-2); }
.codigos th, .codigos td { text-align: left; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.codigos thead th { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
.codigos td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.zen-cierre .hero__acciones { margin-top: var(--space-4); }
@media (max-width: 64rem) { .armador--fija { grid-template-areas: "panel" "escena"; grid-template-columns: minmax(0, 1fr); } }

/* ---------- Formularios ---------- */
.campo { display: grid; gap: var(--space-2); min-width: 0; }
.campo label { font-size: var(--text-sm); font-weight: 600; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--texto); font: inherit; }
.campo textarea { resize: vertical; }
.seccion--ink .campo input, .seccion--ink .campo select, .seccion--ink .campo textarea { background: var(--superficie); color: var(--texto); border-color: rgb(255 255 255 / 0.25); }
.formulario { display: grid; gap: var(--space-4); padding: var(--space-8); border-radius: var(--radius-md); background: var(--vidrio); border: 1px solid var(--linea); }
.formulario .boton { justify-self: start; }
.estado { min-height: 1.6em; color: var(--suave); }

/* ---------- Empresa ---------- */
.empresa__cabeza { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-12); align-items: end; margin-bottom: var(--space-8); }
.empresa__cabeza .cabeza { margin-bottom: 0; }
.contador { color: var(--enfasis); font-variant-numeric: tabular-nums; }
.mision { margin: 0; padding-left: var(--space-6); border-left: 3px solid var(--color-accent); display: grid; gap: var(--space-3); }
.mision p { font-size: var(--text-lg); max-width: 60ch; }
.mision footer { font-size: var(--text-xs); letter-spacing: 0.08em; font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; color: var(--suave); }
.plantas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.planta__mapa { color: inherit; text-decoration: underline; text-decoration-color: var(--linea-fuerte); text-underline-offset: 3px; }
.planta__mapa:hover { color: var(--enfasis); text-decoration-color: currentColor; }
.planta { padding: var(--space-6); background: var(--superficie); border-radius: var(--radius-md); border: 1px solid var(--linea); display: grid; gap: var(--space-2); align-content: start; }
.planta__tipo { font-size: var(--text-xs); letter-spacing: 0.08em; font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; color: var(--enfasis); }
.planta h3 { font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); letter-spacing: -0.02em; font-size: var(--text-xl); line-height: 1; }
.planta p:not(.planta__tipo) { color: var(--suave); }

/* ---------- Contacto ---------- */
.contacto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }

/* ---------- Piezas de catálogo (v6) ---------- */
code { font-family: var(--font-mono); font-size: 0.95em; font-variant-numeric: tabular-nums; }
mark { background: rgb(240 125 0 / 0.28); color: inherit; border-radius: 2px; padding: 0 1px; }
.tabla-codigos { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tabla-codigos caption { text-align: left; font-size: var(--text-xs); letter-spacing: 0.08em; font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; color: var(--color-text-muted); padding-bottom: var(--space-2); }
.tabla-codigos th { text-align: left; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); padding: 0 var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--color-border-strong); }
.tabla-codigos td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.tabla-codigos td code { color: var(--color-primary); font-weight: 600; white-space: nowrap; }
.color { display: inline-flex; align-items: center; gap: 5px; margin-left: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.color__punto { width: 10px; height: 10px; border-radius: 50%; background: var(--m); box-shadow: 0 0 0 1px var(--color-border-strong); }
.color__punto[data-cristal] { background: linear-gradient(135deg, var(--color-surface) 45%, var(--color-border) 50%, var(--color-surface) 55%); }
.enlace-flecha { font-weight: 600; font-size: var(--text-sm); display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; }
.enlace-flecha::after { content: "→"; transition: transform var(--duration-fast) ease; }
.enlace-flecha:hover::after { transform: translateX(4px); }
.enlaces-chip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.enlaces-chip a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: var(--text-xs); font-weight: 600; text-decoration: none; transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease; }
.enlaces-chip a:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Las familias del catálogo van en una placa Kalop con teclas apiladas. Todas descansan pulsadas a la izquierda (apagadas);
   al pasar el cursor la tecla bascula a la derecha y se enciende el piloto, como un interruptor real.
   Al salir vuelve con demora, así que al recorrer la placa se ven bascular una tras otra. */
.rubros__lista { --marco: 1.75rem; position: relative; display: grid; padding: var(--marco) calc(var(--marco) * 0.85); border-radius: 14px; background: linear-gradient(160deg, #ffffff 0%, #f4f4f1 60%, #ebebe7 100%); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(0 0 0 / 0.08), 0 18px 36px -18px rgb(7 24 51 / 0.35); }
.rubros__lista::before { content: ""; position: absolute; inset: calc(var(--marco) - 6px) calc(var(--marco) * 0.85 - 6px); border-radius: 5px; background: #e9e9e4; box-shadow: inset 0 0 0 1px #d4d4ce, inset 2px 3px 6px rgb(0 0 0 / 0.12); }
.rubros__lista::after { content: "KALOP" / ""; position: absolute; right: 0.45rem; bottom: 1.6rem; writing-mode: vertical-rl; font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); letter-spacing: -0.02em; font-size: 0.6rem; color: #bcbcb5; }
.rubro { position: relative; display: block; padding: 0; border: 0; background: none; perspective: 1500px; cursor: pointer; text-align: left; color: var(--color-text-muted); font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); letter-spacing: -0.02em; font-size: var(--text-xl); line-height: 1; }
.rubro + .rubro { margin-top: 3px; }
/* Balancín: apagado, hundido a la izquierda (sombra a la izquierda, borde derecho levantado que proyecta sombra).
   Encendido, al revés. El cambio usa un rebote corto, como el clic de una tecla real. */
.rubro__cara { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 58px; padding: var(--space-3) 1.25rem var(--space-3) var(--space-4); border-radius: 3px; overflow: hidden; background: #f5f5f2; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.05), 8px 0 12px -7px rgb(0 0 0 / 0.32), 2px 0 0 -1px rgb(0 0 0 / 0.08); transform: rotateY(-2.6deg); transform-origin: center; transition: transform 0.34s cubic-bezier(.3, 1.3, .5, 1) 0.1s, box-shadow 0.3s ease 0.1s, color 0.25s ease 0.1s; }
.rubro__cara::before, .rubro__cara::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity 0.25s ease 0.1s; }
.rubro__cara::before { background: linear-gradient(90deg, rgb(0 0 0 / 0.13) 0%, rgb(0 0 0 / 0.06) 30%, rgb(0 0 0 / 0) 50%, rgb(255 255 255 / 0.85) 74%, rgb(255 255 255 / 0.35) 94%, rgb(0 0 0 / 0.06) 100%); }
.rubro__cara::after { opacity: 0; background: radial-gradient(60% 140% at 100% 50%, rgb(240 125 0 / 0.16), transparent 70%), linear-gradient(270deg, rgb(0 0 0 / 0.11) 0%, rgb(0 0 0 / 0.05) 30%, rgb(0 0 0 / 0) 50%, rgb(255 255 255 / 0.85) 74%, rgb(255 255 255 / 0.35) 94%, rgb(0 0 0 / 0.06) 100%); }
.rubro__cara > * { position: relative; z-index: 1; }
.rubro__nombre { transition: transform 0.34s cubic-bezier(.3, 1.3, .5, 1) 0.1s; }
.rubro__num { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--color-text-muted); transition: color 0.25s ease 0.1s; }
/* piloto como el de la tecla Kalop: rejilla vertical a la derecha */
.rubro__piloto { width: 0.4rem; height: 1.25rem; border-radius: 2px; background: repeating-linear-gradient(180deg, #b9b8b2 0 2px, #dcdbd6 2px 3.5px); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); transition: background 0.2s ease 0.15s, box-shadow 0.2s ease 0.15s; }
.rubro:hover .rubro__cara, .rubro:focus-visible .rubro__cara, .rubro[aria-selected="true"] .rubro__cara, .rubro[aria-current="true"] .rubro__cara { color: var(--color-text); transform: rotateY(2.6deg); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.05), -8px 0 12px -7px rgb(0 0 0 / 0.32), -2px 0 0 -1px rgb(0 0 0 / 0.08); transition-delay: 0s; transition-duration: 0.42s, 0.3s, 0.2s; }
.rubro:hover .rubro__cara::before, .rubro:focus-visible .rubro__cara::before, .rubro[aria-selected="true"] .rubro__cara::before, .rubro[aria-current="true"] .rubro__cara::before { opacity: 0; transition-delay: 0s; transition-duration: 0.22s; }
.rubro:hover .rubro__cara::after, .rubro:focus-visible .rubro__cara::after, .rubro[aria-selected="true"] .rubro__cara::after, .rubro[aria-current="true"] .rubro__cara::after { opacity: 1; transition-delay: 0s; transition-duration: 0.22s; }
.rubro:hover .rubro__nombre, .rubro:focus-visible .rubro__nombre, .rubro[aria-selected="true"] .rubro__nombre, .rubro[aria-current="true"] .rubro__nombre { transform: translateX(6px); transition-delay: 0s; transition-duration: 0.42s; }
.rubro:hover .rubro__num, .rubro:focus-visible .rubro__num, .rubro[aria-selected="true"] .rubro__num, .rubro[aria-current="true"] .rubro__num { color: var(--color-accent-text); transition-delay: 0s; transition-duration: 0.2s; }
.rubro:hover .rubro__piloto, .rubro:focus-visible .rubro__piloto, .rubro[aria-selected="true"] .rubro__piloto, .rubro[aria-current="true"] .rubro__piloto { background: repeating-linear-gradient(180deg, var(--color-accent) 0 2px, #ffb36b 2px 3.5px); box-shadow: 0 0 6px var(--color-accent), 0 0 14px rgb(240 125 0 / 0.65); transition-delay: 0.12s; transition-duration: 0.15s; }
.rubro:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; z-index: 1; }
/* Familia que solo tiene foto en blanco: el recorte va sobre fondo oscuro para que se distinga. */


/* ---------- Armador: lista de materiales ---------- */
.materiales { width: 100%; display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.materiales__cabeza { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.materiales__titulo { font-size: var(--text-xs); letter-spacing: 0.08em; font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; color: var(--color-text-muted); }
.materiales__copiar { min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); font: 600 var(--text-xs) var(--font-body); cursor: pointer; }
.materiales__copiar:hover { border-color: var(--color-primary); color: var(--color-primary); }
.tabla-codigos--materiales td:first-child { font-family: var(--font-mono); width: 2.5rem; }
.materiales__estado { font-size: var(--text-xs); color: var(--color-success); min-height: 1.3em; }

/* ---------- Distribuidores: zapatillas por región ---------- */
.tablero { display: grid; gap: var(--space-6); }
.tablero__panel { margin: 0; min-width: 0; padding: var(--space-6) var(--space-6) var(--space-8); border: 0; border-radius: var(--radius-md); background: linear-gradient(170deg, var(--color-ink-2), var(--color-ink)); color: var(--color-on-ink); position: relative; box-shadow: var(--shadow-2), inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.tablero__panel::before { content: ""; position: absolute; inset: 12px; pointer-events: none; background: radial-gradient(circle, rgb(169 184 206 / 0.5) 0 3px, transparent 4px) 0 0 / 8px 8px no-repeat, radial-gradient(circle, rgb(169 184 206 / 0.5) 0 3px, transparent 4px) 100% 0 / 8px 8px no-repeat, radial-gradient(circle, rgb(169 184 206 / 0.5) 0 3px, transparent 4px) 0 100% / 8px 8px no-repeat, radial-gradient(circle, rgb(169 184 206 / 0.5) 0 3px, transparent 4px) 100% 100% / 8px 8px no-repeat; }
.tablero__leyenda { float: left; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 0 var(--space-2); margin-bottom: var(--space-6); font-size: var(--text-xs); letter-spacing: 0.08em; font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; color: var(--color-on-ink-muted); }
.tablero__lectura { font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: none; font-size: var(--text-sm); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); background: rgb(0 0 0 / 0.35); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); color: var(--color-on-ink-muted); min-width: 12rem; text-align: right; }
.con-provincia .tablero__lectura { color: var(--color-focus-on-ink); text-shadow: 0 0 10px rgb(240 125 0 / 0.6); }
.tablero__riel { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); padding: var(--space-2) var(--space-2) 0; }

/* Zapatilla Kalop de 6 tomas (colores reales de la línea): una por región, cada toma es una provincia */
.zapatilla { --alto: 5.5rem; --cuerpo: #f4f4f0; --cuerpo-2: #d3d4cd; --boca: #eeeee9; min-width: 0; }
.zapatilla--celeste { --cuerpo: #8cbfe2; --cuerpo-2: #5d93bd; --boca: #85bae0; }
.zapatilla--gris { --cuerpo: #a9adb2; --cuerpo-2: #7b7f85; --boca: #a2a6ab; }
.zapatilla--negro { --cuerpo: #2d2f34; --cuerpo-2: #141518; --boca: #34363c; }
.zapatilla__region { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-on-ink); }
.zapatilla__codigo { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--color-on-ink-muted); }
.zapatilla__tomas { --punta: 1.75rem; position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 0.35rem; padding: 0 1.5rem 0 calc(var(--punta) + 0.6rem); }
/* Cuerpo: recto en la punta del cable y redondeado en la otra */
.zapatilla__tomas::before { content: ""; position: absolute; z-index: 0; left: var(--punta); right: 0; top: 0; height: var(--alto); border-radius: 4px calc(var(--alto) / 2) calc(var(--alto) / 2) 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--cuerpo) 70%, #fff) 0, var(--cuerpo) 22%, var(--cuerpo) 58%, var(--cuerpo-2) 100%); box-shadow: 0 14px 20px -8px rgb(0 0 0 / 0.6), 0 2px 3px rgb(0 0 0 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 -3px 4px rgb(0 0 0 / 0.1), inset 3px 0 3px -2px rgb(0 0 0 / 0.18); }
.zapatilla--negro .zapatilla__tomas::before { box-shadow: 0 14px 20px -8px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.16); }
/* Interruptor en el costado de la punta, junto a la salida del cable (como en la zapatilla real), visto de perfil:
   marco negro y tecla roja basculante. Apagada, la tecla asoma arriba; encendida bascula, asoma abajo y se ilumina. */
.zapatilla__llave { position: absolute; z-index: 1; left: calc(var(--punta) - 0.34rem); top: calc(var(--alto) / 2 - 1.05rem); width: 0.34rem; height: 2.1rem; border-radius: 2px 0 0 2px; background: linear-gradient(90deg, #26272a, #111214); box-shadow: 0 1px 2px rgb(0 0 0 / 0.45); }
.zapatilla__tecla { position: absolute; left: -0.22rem; top: 0.18rem; bottom: 0.18rem; width: 0.32rem; border-radius: 0.2rem 1px 1px 0.2rem; overflow: hidden; background: linear-gradient(90deg, #b3191e, #8a1015 60%, #5c0a0d); box-shadow: inset 1px 0 0 rgb(255 255 255 / 0.18), 0 1px 2px rgb(0 0 0 / 0.5); transform: rotate(-7deg); transform-origin: 100% 50%; transition: transform 0.1s cubic-bezier(0.3, 1.3, 0.5, 1), box-shadow 0.08s ease; }
.zapatilla__tecla::before, .zapatilla__tecla::after { content: ""; position: absolute; inset: 0; transition: opacity 0.08s ease; }
.zapatilla__tecla::before { background: linear-gradient(180deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0) 45%, rgb(0 0 0 / 0.3)); }
.zapatilla__tecla::after { opacity: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0.2), rgb(255 255 255 / 0) 55%, rgb(255 255 255 / 0.2)), linear-gradient(90deg, #ff6a5c, #ec2328 55%, #b3141a); }
.zapatilla:has(input:checked) .zapatilla__tecla { transform: rotate(7deg); box-shadow: inset 1px 0 0 rgb(255 255 255 / 0.3), 0 0 6px rgb(236 35 40 / 0.85), 0 0 14px rgb(236 35 40 / 0.4); transition-delay: 0.04s, 0.06s; }
.zapatilla:has(input:checked) .zapatilla__tecla::before { opacity: 0; transition-delay: 0.04s; }
.zapatilla:has(input:checked) .zapatilla__tecla::after { opacity: 1; transition-delay: 0.06s; }
.zapatilla__cable { position: absolute; z-index: -1; left: 0; width: calc(var(--punta) + 0.4rem); top: calc(var(--alto) * 0.82 - 0.45rem); height: 0.9rem; border-radius: 0.45rem 0 0 0.45rem; background: linear-gradient(180deg, var(--cuerpo), var(--cuerpo-2)); box-shadow: 0 3px 5px rgb(0 0 0 / 0.4); }
.toma { position: relative; z-index: 1; display: grid; grid-template-rows: var(--alto) auto; justify-items: center; gap: var(--space-2); min-width: 0; cursor: pointer; }
.toma input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.toma__boca { position: relative; align-self: center; width: min(100%, 3.3rem); aspect-ratio: 1; border-radius: 30%; background: linear-gradient(180deg, color-mix(in srgb, var(--boca) 92%, #000), var(--boca) 45%); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.22), inset 0 -1px 0 rgb(255 255 255 / 0.35), 0 1px 0 rgb(255 255 255 / 0.3); }
/* Boca de toma al ras del cuerpo, con las tres patas planas (dos en V y la de tierra) */
.toma__boca::before { content: ""; position: absolute; inset: 11%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23000' fill-opacity='.72'%3E%3Crect x='11.6' y='10' width='2.8' height='9' rx='1' transform='rotate(30 13 14.5)'/%3E%3Crect x='25.6' y='10' width='2.8' height='9' rx='1' transform='rotate(-30 27 14.5)'/%3E%3Crect x='18.6' y='22' width='2.8' height='9' rx='1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.zapatilla--negro .toma__boca::before { filter: drop-shadow(0 1px 0 rgb(255 255 255 / 0.28)); }
/* La ficha que entra al elegir la provincia */
/* Ficha Kalop de salida lateral (KD44163/KD44164) enchufada, vista de frente: cuerpo de gota con "KALOP" en relieve, tornillo al centro y el cable que sale por la punta */
.toma__ficha { position: absolute; inset: -7.5% -7.5% -42%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='.35'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.55' stop-color='%23eeeee9'/%3E%3Cstop offset='1' stop-color='%23cfd0ca'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='44' y1='0' x2='56' y2='0'%3E%3Cstop offset='0' stop-color='%23c9cac4'/%3E%3Cstop offset='.4' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23c9cac4'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='112' x2='0' y2='129'%3E%3Cstop offset='0' stop-color='white'/%3E%3Cstop offset='1' stop-color='black'/%3E%3C/linearGradient%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='0' y='0' width='100' height='130'%3E%3Crect width='100' height='130' fill='url%28%23g%29'/%3E%3C/mask%3E%3CradialGradient id='t' cx='.38' cy='.35' r='.75'%3E%3Cstop offset='0' stop-color='%23f2f2f2'/%3E%3Cstop offset='.6' stop-color='%23a9abad'/%3E%3Cstop offset='1' stop-color='%236d7073'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M50 108V130' stroke='url%28%23c%29' stroke-width='11' mask='url%28%23m%29'/%3E%3Crect x='41' y='104' width='18' height='12' rx='4' fill='url%28%23b%29'/%3E%3Cpath d='M50 3C80 3 95 15 95 40C95 64 84 84 70 98C65 103 61 106 58 108H42C39 106 35 103 30 98C16 84 5 64 5 40C5 15 20 3 50 3Z' fill='url%28%23b%29'/%3E%3Cpath d='M50 3C80 3 95 15 95 40C95 64 84 84 70 98C65 103 61 106 58 108H42C39 106 35 103 30 98C16 84 5 64 5 40C5 15 20 3 50 3Z' fill='none' stroke='rgba%280,0,0,.10%29' stroke-width='1.2'/%3E%3Cpath d='M20 16C30 7 44 5 56 6' fill='none' stroke='rgba%28255,255,255,.95%29' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M50 12C73 12 85 21 85 41C85 60 76 77 64 89C60 93 56 95 50 95C44 95 40 93 36 89C24 77 15 60 15 41C15 21 27 12 50 12Z' fill='none' stroke='rgba%280,0,0,.10%29' stroke-width='1.2'/%3E%3Ctext x='50' y='29' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='10' letter-spacing='1.2' fill='rgba%28255,255,255,.95%29' opacity='.6'%3EKALOP%3C/text%3E%3Ctext x='50' y='28.4' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='10' letter-spacing='1.2' fill='rgba%280,0,0,.16%29'%3EKALOP%3C/text%3E%3Ccircle cx='50' cy='50' r='6.5' fill='url%28%23t%29'/%3E%3Ccircle cx='50' cy='50' r='6.5' fill='none' stroke='rgba%280,0,0,.25%29' stroke-width='.8'/%3E%3Cpath d='M46.5 50H53.5M50 46.5V53.5' stroke='%234a4c4f' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; filter: drop-shadow(0 5px 4px rgb(0 0 0 / 0.5)); opacity: 0; transform: scale(1.3) translateY(-0.4rem); transform-origin: 50% 38.5%; transition: opacity 0.16s ease, transform 0.28s cubic-bezier(0.3, 1.45, 0.5, 1); pointer-events: none; z-index: 1; }
.zapatilla--negro .toma__ficha { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='.35'%3E%3Cstop offset='0' stop-color='%233b3c41'/%3E%3Cstop offset='.55' stop-color='%231d1e22'/%3E%3Cstop offset='1' stop-color='%230f1013'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='44' y1='0' x2='56' y2='0'%3E%3Cstop offset='0' stop-color='%23121316'/%3E%3Cstop offset='.4' stop-color='%233a3b40'/%3E%3Cstop offset='1' stop-color='%23121316'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='112' x2='0' y2='129'%3E%3Cstop offset='0' stop-color='white'/%3E%3Cstop offset='1' stop-color='black'/%3E%3C/linearGradient%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='0' y='0' width='100' height='130'%3E%3Crect width='100' height='130' fill='url%28%23g%29'/%3E%3C/mask%3E%3CradialGradient id='t' cx='.38' cy='.35' r='.75'%3E%3Cstop offset='0' stop-color='%23f2f2f2'/%3E%3Cstop offset='.6' stop-color='%23a9abad'/%3E%3Cstop offset='1' stop-color='%236d7073'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M50 108V130' stroke='url%28%23c%29' stroke-width='11' mask='url%28%23m%29'/%3E%3Crect x='41' y='104' width='18' height='12' rx='4' fill='url%28%23b%29'/%3E%3Cpath d='M50 3C80 3 95 15 95 40C95 64 84 84 70 98C65 103 61 106 58 108H42C39 106 35 103 30 98C16 84 5 64 5 40C5 15 20 3 50 3Z' fill='url%28%23b%29'/%3E%3Cpath d='M50 3C80 3 95 15 95 40C95 64 84 84 70 98C65 103 61 106 58 108H42C39 106 35 103 30 98C16 84 5 64 5 40C5 15 20 3 50 3Z' fill='none' stroke='rgba%28255,255,255,.10%29' stroke-width='1.2'/%3E%3Cpath d='M20 16C30 7 44 5 56 6' fill='none' stroke='rgba%28255,255,255,.18%29' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M50 12C73 12 85 21 85 41C85 60 76 77 64 89C60 93 56 95 50 95C44 95 40 93 36 89C24 77 15 60 15 41C15 21 27 12 50 12Z' fill='none' stroke='rgba%28255,255,255,.10%29' stroke-width='1.2'/%3E%3Ctext x='50' y='29' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='10' letter-spacing='1.2' fill='rgba%28255,255,255,.18%29' opacity='.6'%3EKALOP%3C/text%3E%3Ctext x='50' y='28.4' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='10' letter-spacing='1.2' fill='rgba%28255,255,255,.16%29'%3EKALOP%3C/text%3E%3Ccircle cx='50' cy='50' r='6.5' fill='url%28%23t%29'/%3E%3Ccircle cx='50' cy='50' r='6.5' fill='none' stroke='rgba%280,0,0,.25%29' stroke-width='.8'/%3E%3Cpath d='M46.5 50H53.5M50 46.5V53.5' stroke='%234a4c4f' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.toma input:checked + .toma__boca .toma__ficha { opacity: 1; transform: none; }
.toma input:focus-visible + .toma__boca { outline: 3px solid var(--color-focus-on-ink); outline-offset: 4px; }
@media (hover: hover) { .toma:hover .toma__boca { box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.22), 0 0 0 2px var(--color-accent); } }
.toma__nombre { max-width: 100%; font-size: 0.75rem; line-height: 1.2; text-align: center; color: var(--color-on-ink-muted); }
.toma input:checked ~ .toma__nombre { color: var(--color-on-ink); font-weight: 600; }
.tablero__pie { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); }
.tablero__pie .campo { flex: 0 1 22rem; }
.tablero__estado { flex-basis: 100%; color: var(--suave); min-height: 1.6em; }
.dist { margin-top: var(--space-4); display: grid; gap: var(--space-4); justify-items: start; }
.dist__lista { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.dist__item { display: grid; align-content: start; gap: 6px; padding: var(--space-4); border-radius: 12px; background: var(--superficie); border: 1px solid var(--linea); border-left: 3px solid var(--color-accent); color: var(--texto); transition: background-color 0.9s var(--ease-out), border-color 0.9s var(--ease-out), color 0.9s var(--ease-out); animation: dist-entra 0.22s var(--ease-out) both; }
.dist__nombre { margin: 0; font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); letter-spacing: -0.02em; font-size: var(--text-lg); line-height: 1.05; overflow-wrap: anywhere; }
.dist__dir { color: var(--suave); text-decoration: underline; text-decoration-color: var(--linea-fuerte); text-underline-offset: 3px; overflow-wrap: anywhere; }
.dist__dir:hover { color: var(--texto); text-decoration-color: currentColor; }
.dist__tel { justify-self: start; font: 500 var(--text-sm) var(--font-mono); color: var(--texto); text-decoration: none; padding-block: 4px; }
.dist__tel:hover { color: var(--enfasis); }
.dist__web { justify-self: start; font-size: var(--text-sm); font-weight: 600; color: var(--texto); padding-block: 4px; }
.dist__web::after { content: " ↗"; }
.dist__mas { border-color: var(--linea-fuerte); color: var(--texto); background: var(--superficie); }
.dist__mas:hover { border-color: var(--enfasis); color: var(--enfasis); }
@keyframes dist-entra { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .dist__item { animation: none; } }
.sumate { margin-top: var(--space-12); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; padding: var(--space-8); border-radius: var(--radius-md); color: var(--color-on-primary); background: radial-gradient(60% 120% at 100% 0%, rgb(240 125 0 / 0.22), transparent 60%), linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); position: relative; overflow: hidden; }
.sumate::after { content: ""; position: absolute; right: -2rem; bottom: -3rem; width: 16rem; height: 16rem; border-radius: 50%; border: 2px dashed rgb(255 255 255 / 0.18); animation: girar 60s linear infinite; pointer-events: none; }
.sumate__texto { display: grid; gap: var(--space-3); position: relative; }
.sumate .etiqueta { color: var(--color-on-primary); }
.sumate h3 { font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); letter-spacing: -0.02em; font-size: var(--text-2xl); line-height: 0.95; }
.sumate__texto p:last-child { max-width: 40rem; }
.sumate__accion { display: grid; gap: var(--space-3); justify-items: start; position: relative; z-index: 1; }
.sumate__mail { color: var(--color-on-primary); font-family: var(--font-mono); font-size: var(--text-sm); min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- Empresa: plantas, video y sellos ---------- */
.planta__dibujo { width: 100%; height: auto; aspect-ratio: 2 / 1; padding: var(--space-6) var(--space-4); margin-bottom: var(--space-2); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--texto) 5%, transparent); border: 1px dashed var(--linea); }
.planta__foto { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; margin-bottom: var(--space-2); border-radius: var(--radius-sm); }
.planta__dibujo * { fill: none; stroke: var(--texto); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.js .planta[data-aparecer] .planta__dibujo * { transition: stroke-dashoffset 1.8s var(--ease-out) 0.3s; }
.js .planta[data-aparecer].abajo .planta__dibujo * { stroke-dashoffset: 1; }
.planta { position: relative; overflow: hidden; transition: border-color var(--duration-base) ease, transform var(--duration-base) var(--ease-out); }
.planta:hover { border-color: var(--enfasis); }
.planta__tel { color: var(--texto); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; justify-self: start; }
.planta__tel:hover { color: var(--enfasis); text-decoration: underline; }

/* ---------- Normas ---------- */
.normas { margin-top: var(--space-8); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: center; padding-top: var(--space-6); border-top: 1px solid var(--linea); }
.normas__texto { display: grid; gap: var(--space-3); }
.normas__texto p:last-child { max-width: 38rem; color: var(--suave); }
.sellos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.sello-norma { display: grid; place-items: center; height: 4.5rem; }
.sello-norma img { height: 100%; width: auto; transition: transform 0.18s ease; }
.sello-norma--iram img { height: 70%; }
.sello-norma:hover img { transform: scale(1.06); }

/* ---------- Descargas: hojas técnicas ---------- */
.hojas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.hoja { --pliegue: 26px; position: relative; display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); border-radius: var(--radius-md) 0 var(--radius-md) var(--radius-md); background: var(--color-surface); color: var(--color-text); text-decoration: none; box-shadow: var(--shadow-1); clip-path: polygon(0 0, calc(100% - var(--pliegue)) 0, 100% var(--pliegue), 100% 100%, 0 100%); transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease; }
.hoja::before { content: ""; position: absolute; top: 0; right: 0; width: var(--pliegue); height: var(--pliegue); background: linear-gradient(225deg, transparent 50%, var(--color-border) 50%); border-bottom-left-radius: 6px; }
.hoja { will-change: transform; }
.hoja:hover, .hoja:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow-2), 0 0 0 1px rgb(240 125 0 / 0.35); }
.hoja::before { transition: background 0.18s ease; }
.hoja:hover::before, .hoja:focus-visible::before { background: linear-gradient(225deg, transparent 50%, var(--color-accent) 50%); }
.hoja__plano { transition: transform 0.25s var(--ease-out); }
.hoja:hover .hoja__plano, .hoja:focus-visible .hoja__plano { transform: scale(1.02); }
.hoja__meta { white-space: nowrap; display: flex; justify-content: space-between; gap: var(--space-3); padding-right: var(--space-6); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent-text); letter-spacing: 0.04em; }
.hoja__accion { color: var(--color-primary); font-weight: 600; }
.hoja__accion::after { content: "↓"; margin-left: 0.4em; display: inline-block; transition: transform var(--duration-base) var(--ease-out); }
.hoja[href^="catalogo"] .hoja__accion::after, .hoja[href*="#"] .hoja__accion::after { content: "→"; }
.hoja:hover .hoja__accion::after, .hoja:focus-visible .hoja__accion::after { transform: translate(3px, 2px); }
.hoja__plano { width: 100%; height: auto; aspect-ratio: 200 / 110; border-radius: var(--radius-sm); background-color: var(--color-bg); background-image: linear-gradient(rgb(0 112 159 / 0.07) 1px, transparent 1px), linear-gradient(90deg, rgb(0 112 159 / 0.07) 1px, transparent 1px); background-size: 12px 12px; }
.hoja__plano * { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--duration-base) ease; }
.hoja:hover .hoja__plano *, .hoja:focus-visible .hoja__plano * { stroke: var(--color-accent-text); }
.hoja h3 { font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); letter-spacing: -0.02em; font-size: var(--text-xl); line-height: 1; }
.hoja p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------- Contacto: áreas ---------- */
.areas { list-style: none; margin: 0; padding: 0; display: grid; }
.areas a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n f" "d f"; align-items: center; gap: 2px var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--linea); color: var(--texto); text-decoration: none; position: relative; transition: padding var(--duration-base) var(--ease-out); }
.areas a::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 2px; background: var(--color-accent); box-shadow: 0 0 10px var(--color-accent); transform: scaleY(0); transition: transform var(--duration-base) var(--ease-out); }
.areas a::after { content: "→"; grid-area: f; color: var(--color-accent); font-size: var(--text-lg); transition: transform var(--duration-base) var(--ease-out); }
.areas a:hover { padding-left: var(--space-4); }
.areas a:hover::before { transform: scaleY(1); }
.areas a:hover::after { transform: translateX(4px); }
.areas__nombre { grid-area: n; font-size: var(--text-xs); letter-spacing: 0.08em; font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; color: var(--suave); }
.areas__dato { grid-area: d; font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere; }

/* ---------- Página del catálogo ---------- */
.hero--catalogo { padding-block: var(--space-16) var(--space-16); }
.catalogo__hero { display: grid; gap: var(--space-6); justify-items: start; }
.catalogo__hero .etiqueta a { color: inherit; text-underline-offset: 0.25em; }
.hero__titulo--medio { font-size: calc(var(--text-3xl) * 0.92); }
.busca { position: relative; width: 100%; max-width: 46rem; }
.busca__campo { width: 100%; min-height: 64px; padding: 0 var(--space-6) 0 3.4rem; border-radius: var(--radius-sm); border: 1px solid rgb(255 255 255 / 0.28); background: rgb(255 255 255 / 0.06); color: var(--color-on-ink); font: 500 var(--text-lg) var(--font-mono); transition: border-color var(--duration-fast) ease, box-shadow var(--duration-base) ease; }
.busca__campo::placeholder { color: var(--color-on-ink-muted); font-size: var(--text-sm); }
.busca__campo:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 4px rgb(240 125 0 / 0.25), 0 0 32px rgb(240 125 0 / 0.25); }
.busca__icono { position: absolute; left: 1.35rem; top: 50%; width: 16px; height: 16px; margin-top: -10px; border: 2px solid var(--color-accent); border-radius: 50%; pointer-events: none; }
.busca__icono::after { content: ""; position: absolute; right: -6px; bottom: -6px; width: 8px; height: 2px; background: var(--color-accent); transform: rotate(45deg); }
.cabeza--compacta { margin-bottom: var(--space-4); }
.catalogo__hero > :not(.tira) { max-width: min(100%, 46rem); }
@media (min-width: 64rem) { .catalogo__hero > :not(.tira) { max-width: 56%; } }
.tira { position: absolute; top: 0; bottom: 0; right: 0; width: 38%; overflow: hidden; pointer-events: none; mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.tira__pista { display: grid; animation: subir 70s linear infinite; }
.tira__fila { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid rgb(255 255 255 / 0.07); font-size: var(--text-sm); white-space: nowrap; }
.tira__fila code { color: var(--color-focus-on-ink); font-weight: 600; }
.tira__fila span { color: var(--color-on-ink-muted); overflow: hidden; text-overflow: ellipsis; }
.tira__fila:nth-child(5n + 2) code { color: var(--color-on-ink); }
@keyframes subir { to { transform: translateY(-50%); } }
@media (max-width: 64rem) { .tira { display: none; } }
.catalogo { padding-top: var(--space-12); }
.catalogo__barra { position: relative; z-index: 5; display: grid; gap: var(--space-3); padding: var(--space-4) 0; margin-bottom: var(--space-4); background: rgb(243 244 241 / 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); }
@media (min-width: 64rem) and (min-height: 40rem) { .catalogo__barra { position: sticky; top: 4.25rem; } html:has(.catalogo__barra) { scroll-padding-top: 16rem; } }
.filtros { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filtro { min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); font: 600 var(--text-xs) var(--font-body); cursor: pointer; white-space: nowrap; transition: background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease; }
.filtro:hover { border-color: var(--color-primary); }
.filtro[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-ink); }
.catalogo__fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3) var(--space-6); }
.campo--en-linea { grid-template-columns: auto minmax(0, 16rem); align-items: center; gap: var(--space-3); }
.campo--en-linea select { min-height: 44px; padding-block: 0; }
.catalogo__cuenta { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-muted); }
.grupo { margin-top: var(--space-12); }
.grupo:first-child { margin-top: var(--space-6); }
.grupo__titulo { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); letter-spacing: -0.02em; font-size: var(--text-xl); line-height: 1; }
.grupo__rubro { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--color-accent-text); text-transform: none; }
.tabla-codigos--catalogo { background: var(--color-surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-1); }
.tabla-codigos--catalogo th:first-child, .tabla-codigos--catalogo td:first-child { padding-left: var(--space-4); width: 13rem; }
.tabla-codigos--catalogo th { padding-top: var(--space-3); }
.tabla-codigos--catalogo td { padding-block: var(--space-3); }
.tabla-codigos--catalogo td:first-child code { white-space: normal; }
.tabla-codigos--catalogo td:last-child { width: 52px; padding: 0; vertical-align: middle; }
.tabla-codigos--catalogo tbody tr { transition: background var(--duration-fast) ease; }
.tabla-codigos--catalogo tbody tr:hover { background: rgb(0 112 159 / 0.04); }
.copiar { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; border-radius: var(--radius-sm); color: var(--color-text-muted); }
.copiar::before, .copiar::after { content: ""; position: absolute; width: 11px; height: 13px; border: 1.6px solid currentColor; border-radius: 2px; }
.copiar::before { left: 14px; top: 13px; }
.copiar::after { left: 18px; top: 17px; background: var(--color-surface); }
.copiar:hover { color: var(--color-primary); background: rgb(0 112 159 / 0.06); }
.copiar.copiado { color: var(--color-success); }
.copiar.copiado::before { width: 6px; height: 12px; left: 19px; top: 13px; border-width: 0 2.4px 2.4px 0; border-radius: 0; transform: rotate(45deg); }
.copiar.copiado::after { display: none; }
.catalogo__vacio { padding: var(--space-12) 0; font-size: var(--text-lg); color: var(--color-text-muted); }
.catalogo__mas { margin-top: var(--space-8); }
.catalogo__nota { margin-top: var(--space-8); max-width: 60ch; }

/* ---------- Catálogo v7: mapa de rubros → familias → fichas con variantes ---------- */
.cat { display: grid; gap: var(--space-6); }
.cat-mapa { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.cat-rubro { position: relative; display: grid; align-content: start; gap: var(--space-2); height: 100%; padding: var(--space-4) var(--space-4) var(--space-6); border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.cat-rubro__num { font: 500 var(--text-xs) var(--font-mono); color: var(--color-text-muted); letter-spacing: 0.08em; }
.cat-rubro__dibujo { display: block; width: 100%; aspect-ratio: 3 / 2; margin: var(--space-2) 0 var(--space-3); padding: var(--space-2); box-sizing: border-box; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--color-border); }
.cat-rubro__dibujo img { transition: transform 0.18s ease; }
.cat-rubro__nombre { font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); letter-spacing: -0.02em; font-size: var(--text-xl); line-height: 1; }
.cat-rubro__bajada { font-size: var(--text-sm); color: var(--color-text-muted); }
.cat-rubro__familias { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.6; padding-top: var(--space-2); border-top: 1px dashed var(--color-border-strong); margin-top: var(--space-2); }
.cat-rubro__familias i { font-style: normal; color: var(--color-accent); }
.cat-rubro__ir { position: absolute; right: var(--space-4); top: var(--space-4); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--color-border-strong); transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; }
.cat-rubro__ir::after { content: ""; position: absolute; left: 8px; top: 9px; width: 7px; height: 7px; border: solid var(--color-text); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.cat-rubro:hover, .cat-rubro:focus-visible { transform: translateY(-4px); border-color: var(--color-accent); box-shadow: 0 14px 30px -14px rgb(14 30 60 / 0.35), 0 0 0 1px var(--color-accent); }
.cat-rubro:hover .cat-rubro__dibujo img, .cat-rubro:focus-visible .cat-rubro__dibujo img { transform: scale(1.05); }
.cat-rubro:hover .cat-rubro__ir, .cat-rubro:focus-visible .cat-rubro__ir { background: var(--color-accent); border-color: var(--color-accent); transform: translateX(3px); }
.cat-rubro:hover .cat-rubro__ir::after, .cat-rubro:focus-visible .cat-rubro__ir::after { border-color: #fff; }

.cat-rubros { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-bottom: 2px; }
.cat-rubros .cat-chip { flex: none; }
.cat-rubros .cat-chip:not([aria-current]) .cat-chip__dibujo { display: none; }
.cat-rubros .cat-chip:not([aria-current]) { padding-left: var(--space-3); }
.cat-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3) 0 var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); font: 600 var(--text-xs) var(--font-body); text-decoration: none; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.cat-chip--todo { padding-left: var(--space-4); }
.cat-chip__dibujo { flex: none; width: 30px; height: 30px; padding: 2px; box-sizing: border-box; border-radius: 50%; background: #fff; }
.cat-chip__n { font: 500 var(--text-xs) var(--font-mono); color: var(--color-text-muted); }
.cat-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.cat-chip[aria-current="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-ink); }

.cat-chip[aria-current="true"] .cat-chip__n { color: var(--color-on-ink-muted); }

.cat-rubro-cab { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-6); padding: var(--space-8); border-radius: 18px; background: var(--color-ink); color: var(--color-on-ink); overflow: hidden; }
.cat-rubro-cab::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / 22px 22px; pointer-events: none; }
.cat-rubro-cab > * { position: relative; }
.cat-rubro-cab__num { font: 500 var(--text-xs) var(--font-mono); color: var(--color-focus-on-ink); letter-spacing: 0.1em; margin: 0 0 var(--space-2); }
.cat-rubro-cab__nombre { font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); letter-spacing: -0.02em; font-size: var(--text-2xl); line-height: 0.95; margin: 0; }
.cat-rubro-cab__bajada { color: var(--color-on-ink-muted); margin: var(--space-3) 0 0; max-width: 46ch; }
.cat-rubro-cab__docs { display: inline-block; margin-top: var(--space-4); padding-block: var(--space-2); font-weight: 600; font-size: var(--text-sm); color: var(--color-on-ink); text-decoration-color: var(--color-accent); text-underline-offset: 0.3em; }
.cat-rubro-cab__docs::after { content: " →"; color: var(--color-focus-on-ink); }
.cat-rubro-cab__docs:hover { color: var(--color-focus-on-ink); }
.cat-rubro-cab__dibujo { display: block; width: 12rem; aspect-ratio: 1; padding: var(--space-3); box-sizing: border-box; border-radius: var(--radius-md); background: #fff; box-shadow: 0 18px 30px -14px rgb(0 0 0 / 0.6); }

.cat-cuerpo { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.cat-familias { position: sticky; top: 6rem; }
.cat-teclas { --marco: 1.1rem; }
.cat-teclas .rubro { font-size: var(--text-base); text-decoration: none; }
.cat-teclas .rubro__cara { min-height: 50px; grid-template-columns: 1.9rem minmax(0, 1fr) auto; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3); }
.cat-familias__titulo { font-size: var(--text-xs); letter-spacing: 0.08em; font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 var(--space-3); }

.cat-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-4); }
.cat-barra__foto { flex: none; width: 4.5rem; height: auto; aspect-ratio: 368 / 450; object-fit: cover; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface-alt); }
.cat-barra__foto + .cat-barra__titulo { flex: 1 1 12rem; }
.cat-barra__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0; font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); letter-spacing: -0.02em; font-size: var(--text-xl); line-height: 1; }
.cat-barra__titulo span { font: 500 var(--text-xs) var(--font-mono); color: var(--color-text-muted); text-transform: none; }
.cat-vista { display: inline-flex; padding: 3px; border-radius: var(--radius-sm); background: var(--color-surface-alt); border: 1px solid var(--color-border); }
.cat-vista__btn { min-height: 38px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text-muted); font: 600 var(--text-xs) var(--font-body); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.cat-vista__btn[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-1); }

.cat-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: var(--space-4); }
.prod { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-3); padding: var(--space-4) var(--space-4) 0; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.prod:hover, .prod:focus-within { border-color: var(--color-border-strong); box-shadow: 0 12px 28px -16px rgb(14 30 60 / 0.4); }
.prod__cabeza { display: flex; align-items: center; gap: var(--space-2); min-height: 28px; padding-right: 3.5rem; }
.prod__fam { min-width: 0; font: 500 var(--text-xs) var(--font-mono); color: var(--color-accent-text); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod__variantes { font: 500 var(--text-xs) var(--font-mono); color: var(--color-text-muted); white-space: nowrap; }
.prod__nombre small { display: block; margin-top: 4px; font: 500 var(--text-xs) var(--font-mono); color: var(--color-text-muted); text-transform: none; }
.prod__variantes::before { content: "· "; }


.prod__foto { margin: 0 calc(-1 * var(--space-4)); aspect-ratio: 4 / 3; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: var(--space-3); overflow: hidden; background: radial-gradient(circle at 50% 40%, #fff, var(--color-surface-alt)); border-block: 1px solid var(--color-border); }
.prod > * { min-width: 0; }
.prod__foto img { display: block; width: 100%; max-width: 100%; height: 100%; min-height: 0; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.18s ease; }
.prod:hover .prod__foto img { transform: scale(1.03); }
.prod:has(.prod__foto) { grid-template-rows: auto auto auto 1fr auto; }

.prod__nombre { margin: 0; font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); letter-spacing: -0.02em; font-size: var(--text-lg); line-height: 1.05; }
.prod__cuerpo { display: grid; align-content: start; gap: var(--space-3); }
.prod__grupo { display: grid; gap: var(--space-2); }
.prod__rotulo { margin: 0; font-size: var(--text-xs); letter-spacing: 0.08em; font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; color: var(--color-text-muted); }
.prod__rotulo span { letter-spacing: 0; text-transform: none; color: var(--color-text); font-weight: 600; margin-left: var(--space-1); }
.prod__opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.opcion { min-height: 34px; padding: 0 var(--space-3); border-radius: 8px; border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); font: 500 var(--text-xs) var(--font-mono); cursor: pointer; white-space: nowrap; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; }
.opcion:hover { border-color: var(--color-primary); color: var(--color-primary); }
.opcion[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-focus-on-ink); }
.prod__colores { display: flex; flex-wrap: wrap; gap: 6px; }
.tono { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 2px solid transparent; background: none; cursor: pointer; transition: border-color 0.12s ease, transform 0.12s ease; }
.tono .color__punto { width: 22px; height: 22px; box-shadow: inset 0 -3px 5px rgb(0 0 0 / 0.18), 0 0 0 1px var(--color-border-strong); }
.tono:hover { transform: scale(1.08); }
.tono[aria-pressed="true"] { border-color: var(--color-accent); }
.prod__esp { border-top: 1px solid var(--color-border); }
.prod__esp summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 40px; cursor: pointer; list-style: none; font-size: var(--text-xs); letter-spacing: 0.08em; font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; color: var(--color-text-muted); }
.prod__esp summary::-webkit-details-marker { display: none; }
.prod__esp summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.prod__esp[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.prod__esp summary:hover { color: var(--color-primary); }
.prod__esp-cuerpo { display: grid; gap: var(--space-2); padding-bottom: var(--space-3); font-size: var(--text-xs); line-height: 1.45; }
.prod__esp-desc { margin: 0; color: var(--color-text); }
.prod__esp-datos { display: grid; margin: 0; border-top: 1px solid var(--color-border); }
.prod__esp-datos > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); padding: 6px 0; border-bottom: 1px solid var(--color-border); }
.prod__esp-datos dt { color: var(--color-text-muted); }
.prod__esp-datos dd { margin: 0; font-family: var(--font-mono); text-align: right; color: var(--color-text); overflow-wrap: anywhere; }
.prod__esp-tit { margin: var(--space-1) 0 0; font-weight: 600; color: var(--color-text); }
.prod__esp-notas { margin: 0; padding-left: 1.1em; color: var(--color-text-muted); display: grid; gap: 2px; }
.prod__esp-fuente { justify-self: start; font-weight: 600; color: var(--color-accent-text); }
.prod__esp-enlaces { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.prod__esp-enlaces a { padding-block: 4px; }
.prod__codigo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); margin: 0 calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4); background: var(--color-ink); color: var(--color-on-ink); }
.prod__led { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent); }
.prod__cod { display: grid; min-width: 0; }
.prod__cod code { font: 600 var(--text-base) var(--font-mono); color: var(--color-focus-on-ink); letter-spacing: 0.02em; overflow-wrap: anywhere; }
.prod__cod small { font-size: var(--text-xs); color: var(--color-on-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod mark, .cat-lista mark { background: rgb(240 125 0 / 0.25); color: inherit; border-radius: 2px; }
.copiar--ink { color: var(--color-on-ink-muted); }
.copiar--ink::after { background: var(--color-ink); }
.copiar--ink:hover { color: var(--color-on-ink); background: rgb(255 255 255 / 0.08); }
.copiar--ink.copiado { color: var(--color-focus-on-ink); }
.prod.cambio .prod__cod code { animation: codigo 0.5s ease; }
.prod.cambio .prod__led { animation: led 0.5s ease; }
@keyframes codigo { 0% { opacity: 0.2; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }
@keyframes led { 0% { transform: scale(1.8); box-shadow: 0 0 18px var(--color-accent); } 100% { transform: none; } }
.cat-lista { display: grid; gap: var(--space-6); }
.cat-lista caption { font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); letter-spacing: -0.02em; font-size: var(--text-base); color: var(--color-text); padding: var(--space-3) var(--space-4) var(--space-2); }
.cat .catalogo__mas { justify-self: center; }
.entra .cat-rubro, .entra .prod { animation: entrar 0.38s var(--ease-out) both; animation-delay: calc(var(--k, 0) * 32ms); }
.entra .cat-rubro-cab, .entra .cat-barra { animation: entrar 0.3s var(--ease-out) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 75rem) { .cat-mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 64rem) {
  .cat-cuerpo { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .cat-familias { position: static; }
  .cat-familias__titulo { display: none; }
  .cat-rubro-cab__dibujo { width: 8rem; }
}
@media (max-width: 40rem) {
  .cat-mapa { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .cat-rubro { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-1); padding: var(--space-4); }
  .cat-rubro__num { grid-column: 2; }
  .cat-rubro__dibujo { grid-column: 1; grid-row: 1 / span 4; margin: 0; padding: var(--space-1); align-self: start; aspect-ratio: 1; }
  .cat-rubro__nombre, .cat-rubro__bajada, .cat-rubro__familias { grid-column: 2; }
  .cat-rubro__nombre { font-size: var(--text-lg); padding-right: 2rem; }
  .cat-rubro__familias { display: none; }
  .cat-rubros .cat-chip { flex: none; }
.cat-rubros .cat-chip:not([aria-current]) .cat-chip__dibujo { display: none; }
.cat-rubros .cat-chip:not([aria-current]) { padding-left: var(--space-3); }
  .cat-rubro-cab { grid-template-columns: minmax(0, 1fr) 5rem; align-items: start; gap: var(--space-4); padding: var(--space-6); }
  .cat-rubro-cab__dibujo { width: 5rem; padding: var(--space-1); }
  .cat-rubro-cab__nombre { font-size: var(--text-xl); }
  .cat-grilla { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) { .opcion { min-height: 44px; } .tono { width: 44px; height: 44px; } .prod__esp summary { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .cat-rubro:hover, .cat-rubro:focus-visible { transform: none; } }

/* ---------- Anchos de componentes ---------- */
@media (max-width: 64rem) {
  .normas { grid-template-columns: minmax(0, 1fr); }
  .rubro { font-size: var(--text-lg); }
  .rubro__cara { min-height: 52px; grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
  .tablero__riel { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .sumate { grid-template-columns: minmax(0, 1fr); }
  .hojas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hoja { padding: var(--space-4); }
  .hoja__meta { padding-right: var(--space-4); }
}
@media (max-width: 40rem) {
  .rubros__lista { --marco: 1.1rem; }
  .rubros__lista::after { display: none; }
  .rubro { font-size: 1.05rem; }
  .rubro__cara { min-height: 46px; gap: var(--space-2); padding: var(--space-2) var(--space-3); grid-template-columns: 1.75rem minmax(0, 1fr) auto; }
  .tablero__panel { padding: var(--space-4) var(--space-3) var(--space-6); }
  .tablero__leyenda { flex-direction: column; align-items: stretch; gap: var(--space-2); padding: var(--space-2) var(--space-3) 0; }
  .tablero__lectura { min-width: 0; text-align: left; }
  .tablero__riel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-3); padding-inline: 0; }
  /* En celular cada zapatilla queda parada: la toma a la izquierda y la provincia al lado */
  .zapatilla { --alto: 4rem; }
  .zapatilla__region { flex-direction: column; align-items: flex-start; gap: 2px; }
  .zapatilla__tomas { --punta: 1.25rem; grid-template-columns: var(--alto) minmax(0, 1fr); column-gap: var(--space-2); row-gap: 0.25rem; padding: calc(var(--punta) + 0.6rem) 0 1.1rem; }
  .zapatilla__tomas::before { left: 0; right: auto; top: var(--punta); bottom: 0; width: var(--alto); height: auto; border-radius: 4px 4px calc(var(--alto) / 2) calc(var(--alto) / 2); background: linear-gradient(90deg, color-mix(in srgb, var(--cuerpo) 70%, #fff) 0, var(--cuerpo) 22%, var(--cuerpo) 58%, var(--cuerpo-2) 100%); }
  .zapatilla__llave { left: calc(var(--alto) / 2 - 0.9rem); top: calc(var(--punta) - 0.34rem); width: 1.8rem; height: 0.34rem; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #26272a, #111214); }
  .zapatilla__tecla { left: 0.18rem; right: 0.18rem; top: -0.22rem; bottom: auto; width: auto; height: 0.32rem; border-radius: 0.2rem 0.2rem 1px 1px; background: linear-gradient(180deg, #b3191e, #8a1015 60%, #5c0a0d); transform-origin: 50% 100%; }
  .zapatilla__tecla::before { background: linear-gradient(90deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0) 45%, rgb(0 0 0 / 0.3)); }
  .zapatilla__tecla::after { background: linear-gradient(90deg, rgb(0 0 0 / 0.2), rgb(255 255 255 / 0) 55%, rgb(255 255 255 / 0.2)), linear-gradient(180deg, #ff6a5c, #ec2328 55%, #b3141a); }
  .zapatilla__cable { left: calc(var(--alto) * 0.87 - 0.4rem); top: 0; width: 0.8rem; height: calc(var(--punta) + 0.4rem); border-radius: 0.4rem 0.4rem 0 0; background: linear-gradient(90deg, var(--cuerpo), var(--cuerpo-2)); }
  .toma { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: var(--alto) minmax(0, 1fr); align-items: center; justify-items: start; min-height: 2.9rem; }
  .toma__boca { justify-self: center; width: 2.9rem; }
  .toma__boca::before { transform: rotate(90deg); }
  .toma__ficha { transform: rotate(90deg) scale(1.3); }
  .toma input:checked + .toma__boca .toma__ficha { transform: rotate(90deg); }
  .toma__nombre { text-align: left; font-size: 0.8125rem; }
  .tablero__pie .campo, .tablero__pie .boton { flex: 1 1 100%; }
  .sumate { padding: var(--space-6); }
  .sellos { gap: var(--space-2); }
  .sello-norma { height: 3.5rem; }
  .hojas { grid-template-columns: minmax(0, 1fr); }
  .hero--catalogo { padding-block: var(--space-12); }
  .campo--en-linea { grid-template-columns: auto minmax(0, 1fr); width: 100%; }
  .tabla-codigos--catalogo th:first-child, .tabla-codigos--catalogo td:first-child { width: 6.5rem; padding-left: var(--space-3); }
  .tabla-codigos--catalogo td:first-child code { overflow-wrap: anywhere; }
  .areas__dato { font-size: var(--text-xs); }
}
@media (prefers-reduced-motion: reduce) {
  .video-hueco__barrido, .sumate::after { display: none; }
  .rubro__cara, .rubro__nombre { transform: none !important; }
}

/* ---------- Documentación: fichas técnicas y certificados por rubro ---------- */
.docs__rubros { margin-bottom: var(--space-8); flex-wrap: wrap; overflow: visible; }
.docs { display: grid; gap: var(--space-12); }
.docs__rubro { display: grid; gap: var(--space-4); }
.docs__titulo { font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); letter-spacing: -0.02em; font-size: var(--text-xl); line-height: 1; padding-bottom: var(--space-3); border-bottom: 1px dashed var(--color-border-strong); }
.docs__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--space-3); }
.doc { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); }
.doc__nombre { font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); letter-spacing: -0.02em; font-size: var(--text-lg); line-height: 1.05; margin-bottom: auto; }
.doc__acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.doc__pdf { flex: 1 1 9rem; display: grid; gap: 2px; min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); color: var(--color-text); text-decoration: none; transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease; }
.doc__tipo { font-weight: 600; font-size: var(--text-sm); }
.doc__tipo::after { content: " ↗"; color: var(--color-accent-text); }
.doc__peso { font: 500 var(--text-xs) var(--font-mono); color: var(--color-text-muted); }
.doc__pdf:hover { border-color: var(--color-primary); background: rgb(0 112 159 / 0.06); color: var(--color-primary); }
.doc__certs { display: grid; gap: var(--space-2); }
.doc__certs-tit { font: 600 var(--text-xs) var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.doc__certs-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.doc__cert { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-1) var(--space-3); border-radius: 999px; border: 1px solid var(--color-border-strong); color: var(--color-text); font-size: var(--text-sm); font-weight: 600; text-decoration: none; transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease; }
.doc__cert::after { content: "↗"; color: var(--color-accent-text); }
.doc__cert:hover { border-color: var(--color-primary); background: rgb(0 112 159 / 0.06); color: var(--color-primary); }
/* Videos de instalación y fabricación (documentación): portada en la grilla, se reproducen en un visor. */
.videos { display: grid; gap: var(--space-4); }
.videos__grupo { font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); letter-spacing: -0.02em; font-size: var(--text-xl); line-height: 1; padding-bottom: var(--space-3); border-bottom: 1px dashed var(--color-border-strong); }
.videos__lista + .videos__grupo { margin-top: var(--space-8); }
.videos__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-6) var(--space-4); }
.video { display: grid; gap: var(--space-1); width: 100%; padding: 0; border: 0; background: none; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.video__cuadro { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-md); background: var(--color-ink); margin-bottom: var(--space-2); }
.video__cuadro img { width: 100%; height: 100%; object-fit: cover; }
.video__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--color-accent); box-shadow: var(--shadow-2); }
.video__play::before { content: ""; position: absolute; left: 54%; top: 50%; translate: -50% -50%; border-style: solid; border-width: 0.5rem 0 0.5rem 0.8rem; border-color: transparent transparent transparent var(--color-on-accent); }
.video__dur { position: absolute; right: var(--space-2); bottom: var(--space-2); padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-on-ink); font: 600 var(--text-xs) var(--font-mono); }
.video__titulo { font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); letter-spacing: -0.02em; font-size: var(--text-lg); line-height: 1.1; }
.video__bajada { color: var(--color-text-muted); font-size: var(--text-sm); }
.video:hover .video__play { background: var(--color-primary); }
.video:hover .video__titulo { color: var(--color-primary); }
.visor { width: min(100% - 2rem, 60rem); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--color-ink); color: var(--color-on-ink); overflow: hidden; }
.visor[data-vertical] { width: min(100% - 2rem, calc((100dvh - 7rem) * 9 / 16), 26rem); }
.visor::backdrop { background: color-mix(in srgb, var(--color-ink) 88%, transparent); }
.visor__marco { position: relative; display: grid; }
.visor video { width: 100%; max-height: calc(100dvh - 6rem); aspect-ratio: 16 / 9; background: var(--color-ink); }
.visor[data-vertical] video { aspect-ratio: 9 / 16; }
.visor__titulo { padding: var(--space-3) var(--space-4); padding-right: 4rem; font-weight: 700; }
.visor__cerrar { position: absolute; right: var(--space-2); bottom: var(--space-1); z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--color-on-ink); cursor: pointer; }
.visor__cerrar::before, .visor__cerrar::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: currentColor; translate: -50% -50%; rotate: 45deg; }
.visor__cerrar::after { rotate: -45deg; }
.visor__cerrar:hover { color: var(--color-accent); }
@media (max-width: 40rem) {
  .videos__lista { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- v8: ajustes de los componentes al tema claro ---------- */
/* Teclas de rubro (catálogo) */
.rubro { font-weight: 700; letter-spacing: -0.01em; }
.tabla-codigos td code { color: var(--color-link); }

/* Armador sobre fondo cálido */
/* Las tapas son claras: se muestran sobre fondo oscuro para que se lean (blanco sobre blanco se pierde). */
.armador__escena { border-radius: var(--radius-lg); background: radial-gradient(60% 55% at 50% 42%, var(--color-ink-2), var(--color-ink) 80%); box-shadow: none; }
.armador__piso { background: radial-gradient(closest-side, rgb(0 0 0 / 0.5), transparent); }
/* Tapa oscura o con diseño: fondo claro con el tinte del sistema modular. */
.armador__escena[data-fondo="claro"] { background: radial-gradient(60% 55% at 50% 42%, var(--color-surface), var(--color-div-modular-tinte) 85%); }
.armador__escena { transition: background 0.6s var(--ease-out); }
.armador__lineas button { background: var(--color-bg); border-color: var(--color-border); }
.armador__lineas button[aria-checked="true"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.armador__nombre { font-size: var(--text-2xl); letter-spacing: -0.02em; }
.armador__lema { font-family: var(--font-body); font-weight: 600; }

/* Distribuidores: el tablero sigue oscuro, para que las zapatillas blancas y celestes luzcan */
.tablero__panel { border-radius: var(--radius-lg); }
.dist__item { border-radius: var(--radius-md); border-left-color: var(--color-celeste); }
.sumate { border-radius: var(--radius-lg); background: radial-gradient(70% 140% at 100% 0%, rgb(240 125 0 / 0.35), transparent 60%), linear-gradient(135deg, var(--color-celeste-text), var(--color-ink)); }
.sumate .etiqueta { color: var(--color-on-primary); }
.sumate h3 { font-size: var(--text-2xl); letter-spacing: -0.02em; line-height: 1.02; }

/* Empresa: bloque oscuro */
.empresa__cabeza .cabeza__bajada { max-width: 36rem; }
.mision { border-left-color: var(--color-accent); }
.mision p { font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.015em; line-height: 1.4; }
.plantas { margin-top: var(--space-4); }
.planta { border-radius: var(--radius-lg); background: var(--vidrio); }
.planta h3 { font-size: var(--text-xl); letter-spacing: -0.015em; }
.planta__mapa:hover { color: var(--texto); }
.planta__tel { color: var(--texto); }
.normas { border-top-color: var(--linea); }
.sello-norma { height: 4.75rem; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: #fff; }
.sello-norma img { height: 100%; }

/* Descargas */
.hoja { border-radius: var(--radius-lg) 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-flota), 0 0 0 1px var(--color-border); }
.hoja h3 { font-size: var(--text-xl); letter-spacing: -0.015em; }
.hoja__plano { background-image: linear-gradient(rgb(0 112 159 / 0.07) 1px, transparent 1px), linear-gradient(90deg, rgb(0 112 159 / 0.07) 1px, transparent 1px); }

/* Contacto: cierra el tramo oscuro (empresa, descargas y contacto) */
.contacto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.formulario { background: var(--superficie); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-flota); }
.estado { color: var(--suave); }
.areas a { color: var(--texto); }

/* ---------- Cabezal de las páginas internas (catálogo, documentación, línea Zen) ---------- */
.hero { --fondo: var(--color-surface-warm); background: var(--fondo); color: var(--color-text); padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; width: 60vmax; height: 60vmax; right: -20vmax; top: -30vmax; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 159 227 / 0.14), transparent); pointer-events: none; }
.hero > .ancho { z-index: 1; }
.hero__grilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.hero__texto, .catalogo__hero { display: grid; gap: var(--space-6); justify-items: start; }
.hero__titulo { font-weight: var(--tit-peso); font-stretch: var(--tit-ancho); font-size: var(--text-3xl); line-height: 0.95; letter-spacing: -0.025em; display: grid; }
.hero__titulo--medio { font-size: calc(var(--text-3xl) * 0.85); }
.hero__linea { display: block; }
.hero__rota { color: var(--color-text-muted); justify-self: start; }
.hero__rota.saliendo .letra { animation: letra-sale 0.45s var(--ease-inout) both; animation-delay: calc(var(--i) * 22ms); }
.hero__bajada { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 36rem; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-2); }
.busca__campo { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); box-shadow: var(--shadow-flota); font-family: var(--font-body); }
.busca__campo::placeholder { color: var(--color-text-muted); }
.busca__campo:focus { border-color: var(--color-celeste-text); box-shadow: 0 0 0 4px rgb(0 159 227 / 0.18), var(--shadow-flota); }
.busca__icono { border-color: var(--color-celeste-text); }
.busca__icono::after { background: var(--color-celeste-text); }
.tira__fila { border-bottom-color: rgb(15 26 38 / 0.08); }
.tira__fila code { color: var(--color-link); }
.tira__fila span { color: var(--color-text-muted); }
.tira__fila:nth-child(5n + 2) code { color: var(--color-text); }
.saltos a { border-color: var(--color-border-strong); color: var(--color-text); background: var(--color-bg); }
.saltos a:hover { border-color: var(--color-text); background: var(--color-bg); }
.cierre { text-align: left; }
.cierre .cabeza { margin-bottom: var(--space-6); }
.catalogo__barra { background: rgb(255 255 255 / 0.94); }

/* Vitrina de la página Zen: la foto de la tapa en una tarjeta blanca */
.vitrina--tarjetas .diapo__objeto { inset: 7% 12% 10%; }
.vitrina--tarjetas .vitrina__escena { border-radius: var(--radius-lg); background: radial-gradient(60% 55% at 50% 42%, var(--color-ink-2), var(--color-ink) 80%); }
.vitrina--tarjetas .vitrina__escena::after { background: radial-gradient(closest-side, rgb(0 0 0 / 0.5), transparent); }
.tapa3d { position: relative; height: 100%; max-width: 100%; aspect-ratio: 1; padding: 2%; filter: drop-shadow(0 24px 28px rgb(0 0 0 / 0.35)); transform: rotateY(calc(-8deg + var(--ry, 0deg))) rotateX(calc(2deg + var(--rx, 0deg))); transition: transform 0.6s var(--ease-out); animation: flotar 7s ease-in-out infinite; }
.tapa3d img, .capa img, .cat-rubro__dibujo img, .cat-chip__dibujo img, .cat-rubro-cab__dibujo img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Catálogo y documentación en el tema claro */
.cat-rubro { border-radius: var(--radius-md); }
.cat-rubro-cab { border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-ink), var(--color-ink-2)); }
.prod { border-radius: var(--radius-md); }
.doc { border-radius: var(--radius-md); border-left-color: var(--color-celeste); }

/* ---------- Pie ---------- */
.pie { background: var(--color-ink); color: var(--color-on-ink-muted); padding-block: var(--space-16) var(--space-8); }
.pie :focus-visible { outline-color: var(--color-focus-on-ink); }
.pie__arriba { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-8); padding-bottom: var(--space-12); margin-bottom: var(--space-12); border-bottom: 1px solid rgb(255 255 255 / 0.1); }
.pie__marca { display: grid; gap: var(--space-3); color: var(--color-on-ink); }
.pie__marca .marca { color: var(--color-on-ink); }
.pie__marca .marca__logo { height: 2rem; }
.pie__marca p { color: var(--color-on-ink-muted); max-width: 26rem; }
.pie__lema { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-on-ink) !important; font-weight: 600; }
.pie__cta { display: grid; gap: 2px; padding: var(--space-6) var(--space-8); border-radius: var(--radius-lg); background: var(--color-accent); color: var(--color-on-accent); text-decoration: none; min-width: min(100%, 22rem); transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) ease; }
.pie__cta span { font-size: var(--text-sm); font-weight: 600; }
.pie__cta strong { font-size: var(--text-xl); font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); letter-spacing: -0.015em; }
.pie__cta strong::after { content: " →"; }
.pie__cta:hover { background: var(--color-accent-hover); transform: translateY(-3px); }
.pie__grilla { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-8); }
.pie__titulo { font-size: var(--text-sm); font-weight: 700; color: var(--color-on-ink); margin-bottom: var(--space-3); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.pie a:not(.pie__cta) { color: var(--color-on-ink-muted); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.pie a:not(.pie__cta):hover { color: var(--color-on-ink); text-decoration: underline; }
.pie__base { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid rgb(255 255 255 / 0.1); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); font-size: var(--text-xs); }
.pie__legales { display: flex !important; flex-wrap: wrap; gap: var(--space-1) var(--space-6) !important; }

/* ---------- Movimiento ---------- */
/* Paralaje: sitio.js mueve --py según la posición en pantalla */
[data-paralaje] { translate: 0 var(--py, 0px); }
.folleto__caja:hover .folleto__hoja, .folleto__caja:hover .folleto__hoja--atras { translate: 0 var(--py, 0px); }
/* Títulos que suben desde una máscara */
.mascara { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.mascara > span { display: inline-block; }
.por-ver .mascara > span { transform: translateY(110%); transition: transform 1.2s var(--ease-out); transition-delay: calc(var(--i) * 80ms); }
.por-ver.visto .mascara > span { transform: none; }
/* Aparición escalonada (0,15 s entre piezas), solo para lo que está debajo del primer pantallazo */
.js [data-aparecer] { transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out); }
.js [data-aparecer].abajo { opacity: 0.001; transform: translateY(40px); }

/* ---------- Anchos ---------- */
@media (max-width: 64rem) {
  .puerta { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .puerta__collage { order: -1; }
  .ambiente, .ambiente--grande { grid-column: span 6; }
  .folleto__caja { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .hero__grilla, .contacto, .empresa__cabeza { grid-template-columns: minmax(0, 1fr); }
  .pie__grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .armador { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lineas" "escena" "panel"; }
  .plantas { gap: var(--space-4); }
}
@media (max-width: 48rem) {
  .ambiente a { height: 16rem; }
  .ambientes__grilla { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .ambiente, .ambiente--grande { grid-column: auto; }
}
@media (max-width: 40rem) {
  .plantas { grid-template-columns: minmax(0, 1fr); }
  .puerta { padding-block: var(--space-6) var(--space-8); }
  .puerta__enlaces { column-gap: var(--space-4); }
  .ambiente__ficha img { width: 3.5rem; height: 3.5rem; }
  .ambiente a { height: 17rem; }
  .armador__lineas button { padding: 0 var(--space-4); }
  .armador__sublineas button { padding: 0 var(--space-3); }
  .armador__modulos { grid-template-columns: minmax(0, 1fr); }
  .armador__escena { height: 22rem; }
  .formulario { padding: var(--space-6); }
  .pie__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__cta { width: 100%; }
  .filtros-div button { padding: 0 var(--space-3); }
  .lineas__control .filtros-div { flex: 1 1 100%; min-width: 0; }
  .sello-norma { height: 3.75rem; padding: var(--space-2) var(--space-3); }
}
@media (max-width: 22.5rem) { .zapatilla { --alto: 3.7rem; } .toma__boca { width: 2.6rem; } .toma__nombre { font-size: 0.75rem; letter-spacing: -0.01em; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .js [data-aparecer].abajo { opacity: 1; transform: none; }
  [data-paralaje], .puerta__gigante { translate: none; }
  .js .puerta.espera .pieza { opacity: 1; transform: none; }
  .js .puerta.espera .puerta__collage { clip-path: none; }
  .rubro__cara, .rubro__nombre { transform: none !important; }
  .sumate::after { display: none; }
}

/* Empresa: fotos de planta (llegaron 2026-10-13). Mosaico en pantallas anchas, tira deslizable en celular. */
.fabrica { display: grid; gap: var(--space-4); margin: var(--space-8) 0; }
.fabrica__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-6); }
.fabrica__cabeza .etiqueta { margin: 0; }
.fabrica__texto { margin: 0; max-width: 36rem; color: var(--suave); }
.fabrica__grilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: clamp(7.5rem, 10vw, 10.5rem); gap: var(--space-3); }
.fabrica__foto { overflow: hidden; border-radius: var(--radius-md); background: var(--superficie-2); }
.fabrica__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fabrica__foto:has(img[data-grande]) { cursor: zoom-in; }
/* Vista grande de la foto (al hacer clic); se cierra con otro clic. */
.fabrica__vista { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--space-6); background: color-mix(in srgb, var(--color-ink) 82%, transparent); cursor: zoom-out; }
.fabrica__vista[hidden] { display: none; }
.fabrica__vista img { max-width: min(100%, 90rem); max-height: calc(100dvh - 2 * var(--space-6)); width: auto; height: auto; border-radius: var(--radius-md); box-shadow: 0 12px 40px rgb(0 0 0 / 0.45); }
.fabrica__foto[role="button"]:focus-visible { outline: 3px solid var(--color-focus-on-ink); outline-offset: 3px; }
.fabrica__foto--1 { grid-column: span 2; grid-row: span 2; }
@media (max-width: 40rem) {
  .fabrica { margin: var(--space-8) 0; }
  .fabrica__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: var(--space-2); }
  .fabrica__foto { aspect-ratio: 1; }
  .fabrica__foto--1 { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; }
}

/* Celular y tableta: composiciones ordenadas. La palabra grande va entera y centrada en una franja arriba,
   y los productos se apoyan sobre un mismo piso, sin pisar el texto (pedido de Nacho, 2026-10-13). */
@media (max-width: 64rem) {

  .puerta__collage { container-type: inline-size; height: auto; min-height: 0; aspect-ratio: 10 / 8; }
  .puerta__collage .pieza { top: auto; rotate: 0deg; translate: none; height: auto; filter: drop-shadow(0 12px 16px rgb(15 26 38 / 0.2)); }
  .puerta__collage .pieza--1 { left: 4%; right: auto; bottom: 12%; width: 28%; }
  .puerta__collage .pieza--3 { left: auto; right: 4%; bottom: 12%; width: 28%; }
  .puerta__collage .pieza--2 { left: 0; right: 0; margin-inline: auto; bottom: 9%; width: 42%; z-index: 2; }
  .puerta__collage .pieza--4 { display: none; }
  .puerta__collage--cables .pieza--1, .puerta__collage--cables .pieza--3 { width: 24%; bottom: 13%; }
  .puerta__collage--cables .pieza--2 { width: 48%; }
  .puerta__collage[data-solo] .pieza--2 { top: auto; bottom: 9%; height: 70%; width: auto; }
  .puerta:hover .pieza--2 { scale: 1; }
}
@media (max-width: 40rem) {
  .sellos { flex-wrap: nowrap; justify-content: space-between; gap: var(--space-2); }
  .sello-norma { flex: none; height: 2.75rem; padding: var(--space-1) 6px; }
}
@media (max-width: 22.5rem) { .sellos { flex-wrap: wrap; justify-content: flex-start; } }

/* Legales (privacidad, términos y cookies): texto corrido, cómodo de leer */
.legal__texto { max-width: 72ch; }
.legal__texto h2 { margin: var(--space-8) 0 var(--space-2); font-size: var(--text-lg); line-height: 1.3; }
.legal__texto p { margin: 0 0 var(--space-3); color: var(--texto); line-height: 1.7; overflow-wrap: anywhere; }
.legal__otros { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--linea); font-size: var(--text-sm); color: var(--suave); }
/* Video de planta (Así fabricamos): bucle mudo, con pausa. */
.fabrica__video { position: relative; }
.fabrica__video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.fabrica__pausa { position: absolute; right: var(--space-3); bottom: var(--space-3); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--superficie); color: var(--texto); cursor: pointer; box-shadow: 0 2px 8px rgb(15 26 38 / 0.25); }
.fabrica__pausa svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fabrica__pausa .i-play { display: none; fill: currentColor; stroke: none; }
.fabrica__pausa[aria-pressed="true"] .i-play { display: block; }
.fabrica__pausa[aria-pressed="true"] .i-pausa { display: none; }
.fabrica__pausa:focus-visible { outline: 2px solid var(--enfasis); outline-offset: 2px; }

/* ---------- v8.12: inicio más corto ---------- */
/* Descargas: en tableta y celular, el catálogo arriba y las hojas debajo. */
.hojas.hojas--lista { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.hojas--lista .hoja { grid-template-columns: 7rem minmax(0, 1fr); grid-template-areas: "plano meta" "plano titulo" "plano texto"; gap: 4px var(--space-4); align-content: center; align-items: center; padding: var(--space-4) var(--space-8) var(--space-4) var(--space-4); }
.hojas--lista .hoja__plano { grid-area: plano; }
.hojas--lista .hoja__meta { grid-area: meta; padding-right: 0; }
.hojas--lista .hoja h3 { grid-area: titulo; font-size: var(--text-lg); }
.hojas--lista .hoja p { grid-area: texto; }
@media (max-width: 64rem) {
  .descargas { grid-template-columns: minmax(0, 1fr); }
  .descargas .folleto__caja { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .descargas .folleto__caja { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .descargas .folleto__libro { max-width: 22rem; width: 100%; justify-self: center; }
  .hojas--lista .hoja { grid-template-columns: 4.5rem minmax(0, 1fr); padding-right: var(--space-6); }
  .hojas--lista .hoja__meta { flex-wrap: wrap; white-space: normal; gap: 0 var(--space-3); }
}

/* Inspiración en celular: las pestañas ocupan el ancho. */
@media (max-width: 40rem) {
  .pestanas { display: flex; width: 100%; }
  .pestanas [role="tab"] { flex: 1 1 0; padding: 0 var(--space-2); }
}

/* Volver arriba: aparece pasada la mitad de una página larga. */
.arriba { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 40; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--color-ink); color: var(--color-on-ink); border: 1px solid rgb(255 255 255 / 0.22); box-shadow: var(--shadow-2); text-decoration: none; font-size: 1.2rem; font-weight: 700; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s var(--ease-out), visibility 0s 0.2s; }
.arriba.visible { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s ease, transform 0.2s var(--ease-out); }
.arriba:hover { background: var(--color-accent); color: var(--color-on-accent); }
.arriba:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
@media (min-width: 48rem) { .arriba { right: var(--space-6); bottom: var(--space-6); } }

/* Empresa y productos en celular: las sedes van una debajo de la otra y los textos largos un punto más chicos. */
@media (max-width: 40rem) {
  .plantas { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .planta { grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-1); padding: var(--space-4); align-items: start; }
  .planta > :not(.planta__foto, .planta__dibujo) { grid-column: 2; }
  .planta__foto, .planta__dibujo { grid-row: 1 / span 4; aspect-ratio: 1; height: auto; margin: 0; }
  .planta__dibujo { padding: var(--space-2); }
  .mision p { font-size: var(--text-lg); }
  .empresa__cabeza { gap: var(--space-6); }
  .puerta__bajada { font-size: var(--text-base); }
  .puerta__collage { aspect-ratio: 10 / 7; }
}

/* Armador en escritorio: la tapa a la izquierda, a la par de las líneas y las opciones (entra en una pantalla). */
@media (min-width: 64.01rem) {
  .armador { grid-template-areas: "escena lineas" "escena panel"; grid-template-rows: auto 1fr; gap: var(--space-6) var(--space-12); }
  .armador__escena { height: clamp(20rem, 50vh, 30rem); }
}

/* Tableta: los productos arriba a todo el ancho y apaisados; el texto y los enlaces debajo. */
@media (min-width: 45rem) and (max-width: 64rem) {
  .puerta__collage { aspect-ratio: 16 / 9; }
}

/* Riel de líneas: con el mouse sobre un borde, el cursor indica hacia dónde se va a deslizar; mientras anda, sin imán. */

/* ── v9 · Lecciones de cloudflare.com (ver referencias/cloudflare-analisis.md) ── */
/* Haz de luz que recorre el borde: un conic-gradient que gira, usado como máscara del borde. */
@property --haz { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.haz { position: relative; isolation: isolate; --haz-color: var(--color-accent); }
.boton--acento.haz, .pie__cta.haz { --haz-color: #fff; }
.haz::after { content: ""; position: absolute; inset: -2px; border-radius: calc(var(--radius-sm) + 2px); padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--haz), transparent 0 64%, color-mix(in srgb, var(--haz-color) 25%, transparent) 72%, var(--haz-color) 82%, transparent 90% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: haz-gira 4.5s linear infinite; }
.pie__cta.haz::after { border-radius: calc(var(--radius-lg) + 2px); }
@keyframes haz-gira { to { --haz: 360deg; } }

/* Motivo propio de Kalop: el bastidor de la placa. Los escenarios de producto llevan un marco fino
   redondeado con sus dos tornillos, arriba y abajo, en lugar de marcas de corte. */
.vitrina__escena::before, .puerta__collage::before { inset: 12px; border: 1px solid currentColor; border-radius: 14px; opacity: 0.32;
  background: radial-gradient(circle, transparent 2.5px, currentColor 3px 4px, transparent 4.5px) 50% 8px / 10px 10px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 12.5px / 5px 1px no-repeat,
    radial-gradient(circle, transparent 2.5px, currentColor 3px 4px, transparent 4.5px) 50% calc(100% - 8px) / 10px 10px no-repeat,
    linear-gradient(currentColor, currentColor) 50% calc(100% - 12.5px) / 5px 1px no-repeat; }

/* Líneas: cada familia es una celda de una grilla de filetes, como módulos en un bastidor.
   Foto limpia sobre la superficie, rótulo mono con el color de la división y flecha al pasar. */
.lineas__grilla { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
.linea { border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.linea a { gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-6); height: 100%; align-content: start; }
.linea__foto { aspect-ratio: 1; box-shadow: none; border-radius: var(--radius-sm); background: var(--color-surface-alt); margin-bottom: var(--space-3); }
.linea__foto::after { display: none; }
.linea a:hover .linea__foto img, .linea a:focus-visible .linea__foto img { transform: none; }
.linea__div { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 var(--text-xs)/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.linea__div::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--div); }
.linea__nombre { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); font-size: var(--text-lg); letter-spacing: -0.015em; line-height: 1.15; }
.linea__nombre::after { content: "→"; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-muted); transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast); }
.linea a:hover .linea__nombre::after, .linea a:focus-visible .linea__nombre::after { transform: translateX(4px); color: var(--color-text); }
.linea a:hover { background: var(--color-bg); }
.filtros-div button { font-weight: 500; }
.pestanas [role="tab"] { font-weight: 600; }
@media (max-width: 64rem) { .lineas__grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .lineas__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .linea a { padding: var(--space-3) var(--space-3) var(--space-4); } .linea__nombre { font-size: var(--text-base); } }

/* Armador: rótulos en mono como el resto del sistema, escena más alta y fija mientras se eligen módulos. */
.armador__grupo legend, .materiales__titulo { font: 500 var(--text-xs)/1.2 var(--font-mono); letter-spacing: 0.08em; }
@media (min-width: 64.01rem) { .armador__escena { height: clamp(24rem, calc(100svh - 12rem), 38rem); position: sticky; top: 6.5rem; } }
.armador__escena::before { content: ""; position: absolute; inset: 12px; border: 1px solid currentColor; border-radius: 14px; opacity: 0.2; pointer-events: none; color: var(--color-on-ink-muted);
  background: radial-gradient(circle, transparent 2.5px, currentColor 3px 4px, transparent 4.5px) 50% 8px / 10px 10px no-repeat,
    radial-gradient(circle, transparent 2.5px, currentColor 3px 4px, transparent 4.5px) 50% calc(100% - 8px) / 10px 10px no-repeat; }
.armador__escena[data-fondo="claro"]::before { color: var(--color-text-muted); }

/* Sumate: tinta lisa con la trama de puntos, sin degradé; el círculo punteado gira solo con movimiento permitido. */
.sumate { background: var(--color-ink); background-image: radial-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1.2px); background-size: 14px 14px; border: 1px solid rgb(255 255 255 / 0.08); }
.sumate::after { border-color: rgb(240 125 0 / 0.35); }

/* v9.1 · Presencia. Títulos anchos y pesados, de la familia del logo (Archivo al 125 %), con la parte
   destacada en el azul de la marca. Como la portada de la v8: todo el inicio se tiñe del color de la división
   del producto que se muestra y la primera palabra del nombre toma ese color. */
.titulo, .vitrina__nombre, .manifiesto__titulo, .puerta__titulo, .hero__titulo { letter-spacing: var(--tit-track); }
.portada { background-color: color-mix(in srgb, var(--div) 9%, var(--color-bg)); transition: background-color 0.9s var(--ease-out); }
.vitrina__escena { background-color: color-mix(in srgb, var(--div) 16%, var(--color-bg)); }
.portada[data-tema-lamina="oscuro"] .vitrina__escena { background-color: var(--color-ink-2); }
.portada { --palabra: color-mix(in srgb, var(--div) 30%, var(--color-bg)); }
.portada[data-tema-lamina="oscuro"] { --palabra: color-mix(in srgb, var(--div) 30%, var(--color-ink-2)); }
.vitrina__nombre .pal:first-child > span { color: var(--div-texto); transition: color 0.6s var(--ease-out); }
.vitrina__info { container-type: inline-size; }
/* La palabra más larga de cada título tiene que entrar entera en su columna, en cualquier pantalla. */
.vitrina__nombre { font-size: min(var(--text-3xl), 13cqi); }
.manifiesto__titulo, .hero__titulo { font-size: min(var(--text-3xl), 8.6vw); }
.hero__titulo--medio { font-size: min(calc(var(--text-3xl) * 0.85), 8.6vw); }
@media (min-width: 64.01rem) { .manifiesto__titulo { font-size: min(var(--text-3xl), 5.1vw); } .hero__titulo, .hero__titulo--medio { font-size: min(var(--text-3xl), 5.4vw); } }
.titulo, .puerta__titulo { font-size: min(var(--text-2xl), 8vw); }
.planta h3 { font-size: min(var(--text-xl), 6.2vw); }

/* Pilares con el color de cada división, como acentos de marca. */
.pilares li:nth-child(1) { --c: var(--color-div-modular-texto); } .pilares li:nth-child(2) { --c: var(--color-div-electricos-texto); } .pilares li:nth-child(3) { --c: var(--color-div-conductores-texto); }
.pilares__num { color: var(--c); display: inline-flex; align-items: center; gap: var(--space-2); }
.pilares__num::before { content: ""; width: 8px; height: 8px; background: var(--c); }

/* Divisiones: los enlaces son teclas de interruptor en una placa Kalop (como el índice de la v6–v8).
   Placa de dos columnas, como una de seis módulos; en celular, una sola columna. La tecla bascula y
   enciende el piloto con el color de la división. */
.puerta__teclas { list-style: none; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 6px; align-self: start; }
.puerta__teclas li { margin: 0; min-width: 0; }
.puerta__teclas .rubro { text-decoration: none; font-size: var(--text-base); height: 100%; }
.puerta__teclas .rubro__cara { min-height: 52px; height: 100%; grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
.puerta__teclas::after { display: none; }
@media (max-width: 40rem) { .puerta__teclas { grid-template-columns: minmax(0, 1fr); } }

/* El cuadradito de "Novedades" late, como los puntos de las bandas de Cloudflare. */
.vitrina__marca::before { animation: punto-late 2.2s var(--ease-inout) infinite; }
@keyframes punto-late { 50% { opacity: 0.3; transform: scale(0.75); } }

/* Pie: KALOP gigante que asoma y se desliza al llegar al final de la página. */
.pie { position: relative; overflow: hidden; padding-bottom: 0; }
.pie__titulo { font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-on-ink-muted); margin-bottom: var(--space-4); }
.pie__cta { border-radius: var(--radius-lg); }
.pie__cta:hover { transform: none; }
.pie__firma { margin-top: var(--space-8); height: clamp(4.5rem, 14vw, 13.5rem); overflow: hidden; color: rgb(255 255 255 / 0.07); pointer-events: none; }
.pie__firma path { fill: currentColor; }
.pie__firma svg { display: block; width: 100%; height: auto; fill: currentColor; transform: translateY(14%); }
@supports (animation-timeline: view()) {
  .pie__firma svg { animation: firma-sube linear both; animation-timeline: view(); animation-range: entry 10% entry 100%; }
  @keyframes firma-sube { from { transform: translateY(70%); } to { transform: translateY(14%); } }
}

/* Empresa: foto de planta como atmósfera, fundida con máscara radial (como el video del inicio de Cloudflare).
   Se acerca solo al hacer scroll, así no hay movimiento que pausar. */
.empresa { position: relative; isolation: isolate; overflow: clip; }
.empresa__fondo { position: absolute; top: 0; right: 0; width: min(62%, 52rem); height: min(42rem, 100%); z-index: -1; opacity: 0.32; pointer-events: none;
  -webkit-mask: radial-gradient(75% 70% at 72% 32%, #000 20%, transparent 72%); mask: radial-gradient(75% 70% at 72% 32%, #000 20%, transparent 72%); }
.empresa__fondo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
@supports (animation-timeline: view()) {
  .empresa__fondo img { animation: fondo-acerca linear both; animation-timeline: view(); animation-range: entry 0% exit 40%; }
  @keyframes fondo-acerca { from { transform: scale(1.18); } to { transform: scale(1); } }
}
@media (max-width: 40rem) { .empresa__fondo { width: 100%; height: 30rem; opacity: 0.24; } }

@media (prefers-reduced-motion: reduce) {
  .haz::after { animation: none; opacity: 0; }
  .vitrina__marca::before { animation: none; }
  .pie__firma svg { animation: none !important; transform: translateY(14%); }
  .empresa__fondo img { animation: none !important; }
  .sumate::after { animation: none; }
}

/* ---------- v9.3 · Vitrina con impacto ----------
   El escenario deja de ser una tarjeta con marco: es un paño de color de la división que llega hasta el borde de la pantalla
   y de arriba abajo de la portada. El nombre grande va arriba, entero y en blanco, y el producto se apoya debajo,
   con su sombra en el piso y un leve vaivén. Al cambiar, el color se funde, la palabra sube desde una máscara
   y el producto entra desde la derecha. */
.portada { overflow-x: clip; --sangria: max(var(--space-4), (100vw - 80rem) / 2); }
.portada .vitrina__escena { margin: calc(-1 * var(--space-6)) calc(-1 * var(--sangria-d, var(--sangria))) calc(-1 * var(--space-12)) 0; border-radius: 0;
  background-color: var(--div);
  background-image: radial-gradient(48% 46% at 54% 60%, rgb(255 255 255 / 0.30), transparent 70%), linear-gradient(165deg, rgb(255 255 255 / 0.08), rgb(0 0 0 / 0.18)), radial-gradient(rgb(255 255 255 / 0.16) 1px, transparent 1.3px);
  background-size: auto, auto, 16px 16px; transition: background-color 0.9s var(--ease-out); }
.portada .vitrina__escena::before { display: none; }
.portada[data-tema-lamina="oscuro"] .vitrina__escena { background-color: var(--color-ink-2);
  background-image: radial-gradient(50% 48% at 54% 60%, color-mix(in srgb, var(--div) 34%, transparent), transparent 72%), radial-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1.3px);
  background-size: auto, 16px 16px; }
.portada .vitrina__gigante { left: 0; right: 0; top: 7%; bottom: auto; text-align: center; color: #fff; font-weight: var(--tit-peso); font-size: min(22cqi, calc(132cqi / var(--l, 6))); line-height: 0.9; padding-bottom: 0.05em; }
.portada[data-tema-lamina="oscuro"] .vitrina__gigante { color: var(--div); }
.portada .vitrina__gigante.cambia { animation: gigante-sube 1s var(--ease-out) both; }
@keyframes gigante-sube { from { clip-path: inset(0 0 100% 0); transform: translateY(40%); } to { clip-path: inset(0 0 -10% 0); transform: none; } }
.portada .diapo__objeto { inset: 30% 12% 8%; }
.portada .diapo__objeto--sangra { inset: 40% 0 16% 10%; }
.portada .diapo::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 5%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / 0.28), transparent); pointer-events: none; z-index: -1; }
.portada .diapo:has(.diapo__objeto--sangra)::after { left: 20%; right: 0; bottom: 13%; }
.portada .diapo__objeto img { filter: drop-shadow(0 24px 28px rgb(0 0 0 / 0.28)); }
.portada .diapo.activa .diapo__objeto { animation: producto-llega 1.1s var(--ease-out) both, producto-flota 6s ease-in-out 1.1s infinite; }
@keyframes producto-llega { from { opacity: 0; transform: translateX(14%) rotate(-3deg) scale(0.94); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes producto-flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.6%; } }
@media (max-width: 64rem) {
  .portada .vitrina__escena { margin: calc(-1 * var(--space-6)) calc(-1 * var(--sangria-d, var(--sangria))) 0 calc(-1 * var(--sangria-i, var(--sangria))); }
}
@media (max-width: 40rem) {
  .portada .vitrina__escena { margin-top: calc(-1 * var(--space-4)); }
  .portada .diapo__objeto { inset: 30% 10% 8%; }
  .portada .diapo__objeto--sangra { inset: 42% 0 18% 6%; }
}
@media (prefers-reduced-motion: reduce) { .diapo.activa .diapo__objeto { animation: none; } }

/* ---------- v9.3 · Dónde comprar ----------
   Mismo armado que Empresa: título a la izquierda y la bajada con filete naranja a la derecha.
   Debajo, una sola consola grafito: las zapatillas a la izquierda y, separada por un filete, la lectura de la provincia
   enchufada, la búsqueda por localidad y los distribuidores. "Sumate" cierra como una banda a todo el ancho. */
.donde__cabeza { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-6) var(--space-12); align-items: end; margin-bottom: var(--space-8); }
.donde__cabeza .cabeza { margin-bottom: 0; }
.donde__nota { margin: 0; padding-left: var(--space-6); border-left: 3px solid var(--color-accent); font-size: var(--text-lg); line-height: 1.5; color: var(--suave); max-width: 34rem; }
.donde { display: grid; gap: var(--space-6); }
.donde .tablero { --superficie: rgb(255 255 255 / 0.045); --texto: var(--color-on-ink); --suave: var(--color-on-ink-muted); --linea: rgb(255 255 255 / 0.1); --linea-fuerte: rgb(255 255 255 / 0.22); --enfasis: var(--color-focus-on-ink);
  position: relative; display: grid; gap: 0; border-radius: var(--radius-lg); color: var(--color-on-ink); overflow: hidden;
  background: radial-gradient(80% 60% at 0% 0%, rgb(255 255 255 / 0.05), transparent 60%), linear-gradient(170deg, var(--color-ink-2), var(--color-ink));
  box-shadow: 0 30px 60px -30px rgb(10 14 20 / 0.55), inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.donde .tablero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1.2px); background-size: 14px 14px; mask-image: linear-gradient(180deg, #000, transparent 70%); }
.donde .tablero__panel { background: none; box-shadow: none; border-radius: 0; padding: var(--space-8); }
.donde .tablero__pie { position: relative; z-index: 1; display: grid; align-content: start; gap: var(--space-4); padding: var(--space-8); border-top: 1px solid rgb(255 255 255 / 0.08); }
.tablero__provincia { margin: 0 0 var(--space-2); display: grid; gap: var(--space-2); }
.tablero__provincia span { font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-on-ink-muted); display: inline-flex; align-items: center; gap: var(--space-2); }
.tablero__provincia span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / 0.2); transition: background 0.2s ease, box-shadow 0.2s ease; }
.con-provincia .tablero__provincia span::before { background: var(--color-accent); box-shadow: 0 0 10px var(--color-accent); }
.tablero__provincia strong { font-family: var(--font-display); font-weight: var(--tit-peso); font-stretch: var(--tit-ancho); letter-spacing: var(--tit-track); font-size: min(var(--text-2xl), 9vw); line-height: 1; color: rgb(255 255 255 / 0.28); overflow-wrap: anywhere; }
.con-provincia .tablero__provincia strong { color: var(--color-on-ink); }
.con-provincia .tablero__provincia strong.entra { animation: lectura-entra 0.6s var(--ease-out) both; }
@keyframes lectura-entra { from { opacity: 0; transform: translateY(30%); } }
.donde .tablero__pie .campo { flex: none; }
.donde .tablero__pie .campo label { color: var(--color-on-ink-muted); font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.donde .tablero__pie .campo input { background: rgb(0 0 0 / 0.28); border-color: rgb(255 255 255 / 0.16); color: var(--color-on-ink); }
.donde .tablero__pie .campo input::placeholder { color: rgb(255 255 255 / 0.4); }
.donde .tablero__pie .campo input:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px rgb(240 125 0 / 0.25); }
.donde .tablero__pie .boton { justify-self: start; }
.donde .tablero__estado { min-height: 0; color: var(--color-on-ink-muted); font-size: var(--text-sm); }
.donde .dist { position: relative; z-index: 1; margin: 0; padding: 0 var(--space-8) var(--space-8); }
.donde .dist__lista { grid-template-columns: minmax(0, 1fr); }
.donde .dist__item { border-radius: var(--radius-sm); border-color: rgb(255 255 255 / 0.08); border-left-color: var(--color-accent); }
.donde .dist__mas { background: transparent; }
.donde .sumate { margin-top: 0; grid-template-columns: minmax(0, 1.4fr) auto; gap: var(--space-8); padding: var(--space-8) var(--space-10, 2.5rem); border-radius: var(--radius-lg); }
.donde .sumate h3 { font-size: min(var(--text-2xl), 8vw); }
@media (min-width: 64.01rem) {
  .donde .tablero { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .donde .tablero__panel { grid-column: 1; grid-row: 1 / span 2; }
  .donde .tablero__riel { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .donde .zapatilla { --alto: 4.75rem; }
  .donde .zapatilla__region { margin-bottom: var(--space-2); }
  .donde .tablero__pie { grid-column: 2; grid-row: 1; border-top: 0; border-left: 1px solid rgb(255 255 255 / 0.08); }
  .donde .dist { grid-column: 2; grid-row: 2; border-left: 1px solid rgb(255 255 255 / 0.08); max-height: 30rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgb(255 255 255 / 0.2) transparent; }
}
@media (max-width: 64rem) {
  .donde__cabeza { grid-template-columns: minmax(0, 1fr); }
  .donde .sumate { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .donde .tablero__panel { padding: var(--space-6) var(--space-3); }
  .donde .tablero__pie { padding: var(--space-6) var(--space-4); }
  .donde .dist { padding: 0 var(--space-4) var(--space-6); }
  .donde .sumate { padding: var(--space-6); }
  .donde__nota { font-size: var(--text-base); padding-left: var(--space-4); }
}
/* Los cuatro tornillos van en las esquinas de la consola entera, no del panel de las zapatillas. */
.donde .tablero__panel::before { display: none; }
.donde .tablero::before { content: ""; position: absolute; inset: 12px; z-index: 1; pointer-events: none;
  background: radial-gradient(circle, rgb(169 184 206 / 0.45) 0 3px, transparent 4px) 0 0 / 8px 8px no-repeat, radial-gradient(circle, rgb(169 184 206 / 0.45) 0 3px, transparent 4px) 100% 0 / 8px 8px no-repeat, radial-gradient(circle, rgb(169 184 206 / 0.45) 0 3px, transparent 4px) 0 100% / 8px 8px no-repeat, radial-gradient(circle, rgb(169 184 206 / 0.45) 0 3px, transparent 4px) 100% 100% / 8px 8px no-repeat; }
@media (min-width: 64.01rem) {
  .donde .tablero__riel { gap: var(--space-6); }
  .donde .dist { max-height: 27rem; }
}
@media (min-width: 40.01rem) and (max-width: 64rem) { .donde .dist__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- v9.5 · Nombre de la vitrina sin eco ----------
   El nombre se lee una sola vez, a la izquierda. En el escenario la palabra queda como grafismo de fondo:
   solo el contorno, grande, apoyada en el piso detrás del producto, que la tapa en parte.
   Al cambiar de producto, un bloque del color de la división barre cada palabra del nombre y la deja escrita. */
.portada .vitrina__gigante { display: block; top: auto; bottom: -0.1em; color: transparent; -webkit-text-stroke: 2px rgb(255 255 255 / 0.5); font-size: min(26cqi, calc(118cqi / var(--l, 6))); line-height: 1; }
.portada[data-tema-lamina="oscuro"] .vitrina__gigante { color: transparent; -webkit-text-stroke-color: color-mix(in srgb, var(--div) 70%, transparent); }
.portada .vitrina__gigante.cambia { animation: gigante-entra 1.2s var(--ease-out) both; }
@keyframes gigante-entra { from { opacity: 0; transform: translateX(6%); } }
.portada .diapo__objeto { inset: 12% 17% 27%; }
.portada .diapo__objeto--sangra { inset: 24% 0 38% 14%; }
.portada .diapo::after { bottom: 23%; }
.portada .diapo:has(.diapo__objeto--sangra)::after { bottom: 34%; }
.portada .vitrina__nombre { font-size: min(calc(var(--text-3xl) * 1.08), 14cqi); line-height: 0.92; row-gap: 0.04em; }
.portada .vitrina__nombre .pal { position: relative; overflow: visible; }
.portada .vitrina__nombre .pal::after { content: ""; position: absolute; left: -0.04em; right: -0.04em; top: 0.08em; bottom: 0.02em; background: var(--div); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.portada .vitrina__nombre.entra .pal > span { animation: nombre-aparece 0.9s linear both; animation-delay: calc(var(--i) * 110ms); }
.portada .vitrina__nombre.entra .pal::after { animation: nombre-barre 0.9s var(--ease-cajon) both; animation-delay: calc(var(--i) * 110ms); }
@keyframes nombre-aparece { 0%, 48% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes nombre-barre { 0% { transform: scaleX(0); transform-origin: left; } 48% { transform: scaleX(1); transform-origin: left; } 52% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
@media (max-width: 40rem) {
  .portada .diapo__objeto { inset: 12% 14% 27%; }
  .portada .diapo__objeto--sangra { inset: 22% 0 36% 6%; }
  .portada .vitrina__gigante { -webkit-text-stroke-width: 1.5px; }
  .portada .vitrina__nombre { font-size: clamp(2.5rem, 13vw, 3.5rem); }
}
@media (prefers-reduced-motion: reduce) { .vitrina__nombre .pal::after { display: none; } }

/* ---------- v9.6 · Vitrina con las fotos de campaña ----------
   El escenario muestra las fotos de las novedades que la empresa usa en su inicio (drive 2025-2026/home), a sangre,
   con un acercamiento lento al entrar. Sin palabra de fondo ni recortes flotando. */
.portada .vitrina__escena { background: #e8e9ee; }
.portada .vitrina__gigante { display: none; }
.diapo__foto { position: absolute; inset: 0; overflow: hidden; }
.diapo__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 70% 50%); }
.diapo:has(.diapo__foto)::after { display: none; }
.diapo.activa .diapo__foto img { animation: foto-acerca 7s var(--ease-out) both; }
@keyframes foto-acerca { from { transform: scale(1.09); } to { transform: none; } }
.diapo__foto img[src*="wifi"] { --pos: 27% 50%; }
.diapo__foto img[src*="tekna"], .diapo__foto img[src*="kaloductos"] { --pos: 100% 50%; }
.diapo__foto img[src*="subterraneo"] { --pos: 55% 50%; }
.diapo__foto img[src*="velador"] { --pos: 58% 50%; }
@media (prefers-reduced-motion: reduce) { .diapo.activa .diapo__foto img { animation: none; } }

/* Página Zen: su vitrina de tarjetas conserva el armado de antes (escenario arriba, nombre y controles abajo);
   la grilla de dos columnas de la portada del inicio no le corresponde. */
.vitrina--tarjetas { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-4); height: clamp(26rem, 64vh, 38rem); }
.vitrina--tarjetas .vitrina__escena { order: 0; aspect-ratio: auto; min-height: 0; }
.vitrina--tarjetas .vitrina__escena::before { display: none; }
.vitrina--tarjetas .vitrina__pie { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--linea); }
.vitrina--tarjetas .vitrina__texto { gap: 2px; align-content: start; }
.vitrina--tarjetas .vitrina__linea { font-weight: var(--sub-peso); font-stretch: var(--sub-ancho); font-size: var(--text-xl); letter-spacing: -0.02em; line-height: 1.2; }
.vitrina--tarjetas .vitrina__lema { font-size: var(--text-sm); color: var(--suave); line-height: 1.5; min-height: 0; }
.vitrina--tarjetas .escenario__control { border-top: 0; padding-top: 0; flex: none; }
.vitrina--tarjetas .vitrina__indice { font: 500 var(--text-xs) var(--font-mono); color: var(--suave); margin-right: var(--space-2); white-space: nowrap; }
@media (max-width: 40rem) {
  .vitrina--tarjetas { height: auto; }
  .vitrina--tarjetas .vitrina__escena { aspect-ratio: 1; }
  .vitrina--tarjetas .vitrina__pie { flex-wrap: wrap; }
}

/* ---------- v9.7 · Cinco alternativas de vitrina (?vitrina=1 a 5) ----------
   1 Fotos de campaña · 2 Paño de color · 3 Estudio · 4 Mosaico · 5 Grafito. El texto de la izquierda es igual en todas. */
.portada[data-variante="1"] .diapo__objeto { display: none; }
.portada:not([data-variante="1"]) .diapo__foto { display: none; }
.portada:not([data-variante="1"]) .diapo::after { display: block; }
.portada:not([data-variante="1"]) .diapo__objeto { inset: 15% 19% 23%; }
.portada:not([data-variante="1"]) .diapo__objeto--sangra { inset: 28% 0 36% 14%; }
.portada:not([data-variante="1"]) .diapo::after { bottom: 19%; }
.portada:not([data-variante="1"]) .diapo:has(.diapo__objeto--sangra)::after { bottom: 31%; }

/* 2 · Paño de color: el color de la división a sangre, con una luz suave detrás del producto. */
.portada[data-variante="2"] .vitrina__escena { background-color: var(--div);
  background-image: radial-gradient(46% 44% at 50% 48%, rgb(255 255 255 / 0.32), transparent 70%), linear-gradient(165deg, rgb(255 255 255 / 0.08), rgb(0 0 0 / 0.18)), radial-gradient(rgb(255 255 255 / 0.14) 1px, transparent 1.3px);
  background-size: auto, auto, 16px 16px; transition: background-color 0.9s var(--ease-out); }

/* 3 · Estudio: fondo de estudio fotográfico, neutro y luminoso; una barra del color de la división marca el avance. */
.portada[data-variante="3"] .vitrina__escena { background: radial-gradient(110% 85% at 50% 32%, #ffffff 0%, #eef0f3 52%, #d9dce2 100%); }
.portada[data-variante="3"] .diapo::after { background: radial-gradient(closest-side, rgb(20 24 30 / 0.22), transparent); }
.vitrina__avance { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 4px; background: var(--div); transform: scaleX(0); transform-origin: left; transition: background-color 0.6s ease; }
.vitrina__avance.corre { animation: llenar var(--dur) linear both; }
.vitrina.quieta .vitrina__avance { animation: none; transform: scaleX(1); }

/* 4 · Mosaico: el producto grande y, al costado, las cinco novedades en miniatura para elegir. */
.portada[data-variante="4"] .vitrina__escena { background: color-mix(in srgb, var(--div) 12%, #fff); transition: background-color 0.9s var(--ease-out); }
.portada[data-variante="4"] .diapo { right: 30%; }
.portada[data-variante="4"] .diapo__objeto { inset: 14% 12% 22%; }
.portada[data-variante="4"] .diapo__objeto--sangra { inset: 30% 0 36% 8%; }
.mosaico { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; width: 30%; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 1px; background: rgb(17 20 24 / 0.08); border-left: 1px solid rgb(17 20 24 / 0.08); }
.mosaico__item { position: relative; display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border: 0; background: rgb(255 255 255 / 0.62); color: var(--color-text-muted); font: 600 var(--text-sm)/1.2 var(--font-body); text-align: left; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.mosaico__item img { width: 100%; height: 100%; max-height: 5.5rem; object-fit: contain; }
.mosaico__item:hover { background: rgb(255 255 255 / 0.85); color: var(--color-text); }
.mosaico__item[aria-pressed="true"] { background: #fff; color: var(--color-text); box-shadow: inset 4px 0 0 var(--div-m); }
.mosaico__item:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }

/* 5 · Grafito: el escenario oscuro de Empresa, con un halo del color de la división y el número de la novedad. */
.portada[data-variante="5"] .vitrina__escena { background-color: var(--color-ink);
  background-image: radial-gradient(42% 40% at 55% 52%, color-mix(in srgb, var(--div) 42%, transparent), transparent 72%), radial-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1.3px);
  background-size: auto, 16px 16px; }
.portada[data-variante="5"] .diapo::after { background: radial-gradient(closest-side, rgb(0 0 0 / 0.6), transparent); }
.portada[data-variante="5"] .diapo__objeto img { filter: drop-shadow(0 26px 34px rgb(0 0 0 / 0.55)); }
.vitrina__numero { position: absolute; left: 6%; top: 4%; z-index: 0; font-family: var(--font-display); font-weight: var(--tit-peso); font-stretch: var(--tit-ancho); font-size: 20cqi; line-height: 1; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--div) 70%, transparent); pointer-events: none; font-variant-numeric: tabular-nums; }
.vitrina__numero.entra { animation: numero-entra 0.9s var(--ease-out) both; }
@keyframes numero-entra { from { opacity: 0; transform: translateY(18%); } }

@media (max-width: 64rem) {
  .portada[data-variante="4"] .diapo { right: 0; bottom: 22%; }
  .mosaico { top: auto; left: 0; width: auto; height: 22%; grid-template-rows: none; grid-template-columns: repeat(5, minmax(0, 1fr)); border-left: 0; border-top: 1px solid rgb(17 20 24 / 0.08); }
  .mosaico__item { grid-template-columns: minmax(0, 1fr); padding: var(--space-2); }
  .mosaico__item span { display: none; }
  .mosaico__item[aria-pressed="true"] { box-shadow: inset 0 -4px 0 var(--div-m); }
}

/* Selector de alternativas: solo aparece al abrir la página con ?vitrina=N. */
.variantes { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 12px; background: var(--color-ink); color: var(--color-on-ink); box-shadow: 0 12px 30px -10px rgb(0 0 0 / 0.5); font: 500 var(--text-xs)/1 var(--font-mono); }
.variantes > span { padding: 0 8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-on-ink-muted); }
.variantes a { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border-radius: 8px; color: var(--color-on-ink); text-decoration: none; }
.variantes a:hover { background: rgb(255 255 255 / 0.1); }
.variantes a[aria-current="true"] { background: var(--color-accent); color: #111418; }
.variantes__nombre { display: none; }
.variantes a[aria-current="true"] .variantes__nombre { display: inline; }
@media (max-width: 40rem) { .variantes a[aria-current="true"] .variantes__nombre { display: none; } }