/* ============================================================
   IRONCLAD · Sistema visual
   Territorio ORO DE BATALLA · el oro es protagonista
   Logo R3 · Punzón de ley
   ============================================================ */
:root {
  /* --- paleta · proporciones de uso --- */
  --negro:        #000000;   /* fondo default · 55% · negro puro */
  --oro:          #EFB141;   /* protagonista · 20%  */
  --papel:        #F4F2ED;   /* texto principal · 15% */
  --acero:        #9B9BA7;   /* texto secundario · 5% */
  --senal:        #FF2E63;   /* urgencia y drops · 5% MÁX */

  --grafito:      #1A1A20;
  --humo:         #26262E;
  --oro-claro:    #FFD98A;
  --oro-profundo: #7A5A10;
  --negro-hondo:  #000000;   /* con fondo #000, la separación la dan las líneas humo */
  --grabado:      #D9A63F;

  --ok:           #3DD68C;
  --alerta:       #E5484D;

  /* gradientes que SON marca */
  --metal: linear-gradient(180deg, #3A3A42, #232329 55%, #2E2E36);
  --placa-bg: linear-gradient(120deg, #1E1E25, #101014);

  --radius-s: 2px;
  --radius-m: 6px;

  --shadow-card:  0 18px 50px rgba(0, 0, 0, .55);
  --shadow-stamp: 4px 4px 0 var(--negro);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 16px;
  --sp-4: 24px; --sp-5: 40px; --sp-6: 64px; --sp-7: 96px;

  --font-display: 'Archivo', 'Arial Black', sans-serif;
  /* Roboto para TODO lo que se lee como texto corrido: descripciones,
     reseñas, párrafos. Archivo se queda para titulares y Space Mono para
     etiquetas — cada una hace un trabajo distinto. */
  --font-body: 'Roboto', system-ui, -apple-system, sans-serif;
  /* DECIDIDO · etiquetas, menú y rótulos en Roboto.
     Antes esto era Space Mono y pesaba en todo el sitio; se movió a Roboto
     porque en cuerpos chicos se lee mejor. El nombre de la variable se
     mantiene por compatibilidad con las 32 reglas que ya la usaban. */
  --font-mono: 'Roboto', system-ui, -apple-system, sans-serif;
  /* Space Mono se retira de las etiquetas y se queda SOLO donde el dato es
     de máquina: número de serie, medida, talla, plazo. Ahí la anchura fija
     de la monoespaciada tiene una función — alinea cifras en columna — y no
     es decoración. */
  --font-dato: 'Space Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: 240ms;
  --fast: 120ms;

  --shell: 1400px;
}
/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--negro);
  color: var(--papel);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--oro); color: var(--negro); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.num, .price, time { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ---------- tipografía ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 900; font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: .94;
  margin: 0;
  color: var(--papel);
  text-wrap: balance;
}
/* Los dos extremos del clamp los fija la palabra más larga del hero:
   "GARANTIZADO." son 12 caracteres y en Archivo Expanded Black cada uno ocupa
   ~.72em. Mínimo: a 375px el ancho útil es 343px → 343/(12*.72) ≈ 39px.
   Máximo: la columna del hero a 1440px mide ~660px → 660/(12*.72) ≈ 76px.
   Ahora el titular ocupa el ancho completo (1132px útiles a 1440), así que el
   techo sube: 1132/(12*.72) ≈ 131px. Se deja 118 por margen de seguridad. */
/* techo 96: a 104 el titular del hero cabía por 2px — cero margen para el
   fallback de fuente (Arial Black es más ancha) o el zoom del usuario */
.d-xl { font-size: clamp(38px, 8.2vw, 96px); line-height: .9; }
.d-l { font-size: clamp(32px, 5.4vw, 66px); }
.d-m { font-size: clamp(23px, 3.2vw, 38px); }
.d-s { font-size: clamp(19px, 2.1vw, 25px); }
.kicker {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--oro); margin: 0;
}
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--acero); }
.lede { font-size: 17px; line-height: 1.6; color: var(--acero); max-width: 60ch; text-wrap: pretty; }
/* ---------- layout ---------- */
.shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--sp-4); }
/* la nav es sticky: sin esto, al saltar a #ensayo o #grabados el titular queda
   debajo de la barra y se pierde la primera línea */
[id] { scroll-margin-top: 88px; }

/* Scroll suave (Lenis). `html.lenis` lo pone la propia librería: cuando está
   activa, el scroll-behavior nativo sobra y encima se pelea con ella.
   `ic-sin-scroll` congela el fondo con cualquier overlay abierto — también
   sin Lenis, para que el comportamiento sea el mismo con movimiento reducido. */
html.lenis { scroll-behavior: auto; }
html.ic-sin-scroll { overflow: clip; }
/* rejillas de dos columnas · colapsan solas, no por estilo inline */
.material-split {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(24px, 4vw, 58px);
}
.garantia-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 860px) {
  .garantia-grid { grid-template-columns: 1fr; }
}
.section { padding-block: clamp(56px, 9vw, 110px); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  border-top: 1px solid var(--oro);
  padding-top: var(--sp-3); margin-bottom: var(--sp-5);
}
/* La línea dorada separa CONTENIDOS entre sí. Cuando la primera cabecera
   de sección es lo primero de la página, ahí no separa nada: solo dibuja
   un subrayado bajo la barra que el inicio no tiene. */
main > .section-head:first-child { border-top: 0; padding-top: 0; }
/* uniforme y neutro: era un degradado de oro a transparente, y con el oro
   ya reservado para la acción una línea dorada a media asta aquí solo
   ensuciaba. Es un separador, no un acento. */
.filete { height: 1px; background: var(--humo); border: 0; margin: 0; }
/* ---------- texto con textura de metal · REUTILIZABLE ----------
   La foto del foil se recorta con la letra: el titular queda hecho de metal.
   Uso: <span class="tx tx-oro">GARANTIZADO.</span> / <span class="tx tx-plata">.
   Funciona en cualquier display sobre fondo oscuro. */
/* tiles -mirror: recorte al área 100% metal + su espejo, en un archivo */
/* en teléfono el titular mide ~40px de alto: el tile de 250px sobra y pesa
   6 veces menos — mismo dibujo, misma escala relativa */
/* ---------- grano de película · REUTILIZABLE ----------
   Ruido SVG generado en el propio CSS (sin archivo). Se posa sobre fotos y
   les quita el liso digital. Uso: añadir .grain al contenedor. */
.grain::after {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: .11;
  mix-blend-mode: overlay;
  animation: grain-shift 900ms steps(4) infinite;
  will-change: transform;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-4%, 3%); }
  50% { transform: translate(3%, -4%); }
  75% { transform: translate(-2%, -2%); }
  100% { transform: translate(0, 0); }
}
/* ---------- hero a sangre completa ----------
   La portada es una TOMA, no una diapositiva: la foto ocupa la pantalla y el
   titular vive encima. 82svh a propósito — asoma el filo del bloque siguiente
   e invita a bajar; la prueba sigue arriba del pliegue. */
.hero-full {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 82vh;
  min-height: 82svh;
  background: var(--negro);
  /* sin borde al pie: el corte de la foto contra el negro separa solo,
     y el aire de la sección siguiente hace el resto */
  overflow: hidden;
}
/* tres tomas · 7s cada una · crossfade en el solape.
   OJO con la especificidad: el shorthand `animation:` de `.hero-capas .capa`
   es (0,2,0); un `.capa-2` suelto (0,1,0) PIERDE y el delay nunca aplica —
   las tres capas quedan sincronizadas y el hero pasa negro el 60% del ciclo.
   Por eso los overrides repiten el ancestro. */
@keyframes hero-fade {
  0% { opacity: 0; } 5% { opacity: 1; } 33.3% { opacity: 1; }
  40% { opacity: 0; } 100% { opacity: 0; }
}
/* la primera arranca VISIBLE: sin esto hay 1.5s de negro al cargar */
@keyframes hero-fade-first {
  0% { opacity: 1; } 33.3% { opacity: 1; } 40% { opacity: 0; }
  93% { opacity: 0; } 100% { opacity: 1; }
}
/* hero en video (index) · el tótem va centrado, así que el recorte
   por cover se come los bordes sin tocar el sujeto en ningún ancho */
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  background: var(--negro);
}
@media (max-width: 767px) {
  .hero-full { min-height: 76svh; }
}
/* ============================================================
   HERO CINE · solo el inicio: video a sangre, sin texto encima
   hasta que el destello del clip lo trae.
   Va con doble clase (.pagina-inicio .hero-cine) a propósito:
   así gana por especificidad sobre .hero-full y sobre el
   override móvil de arriba, sin depender del orden ni de
   !important, y sin tocar el hero de taller/contraste.
   ============================================================ */
.pagina-inicio .hero-cine {
  min-height: 80vh;
  min-height: 80svh;
  justify-content: center;
}
@media (max-width: 767px) {
  .pagina-inicio .hero-cine { min-height: 70svh; }
}
/* difuminado arriba y abajo: el video se funde con el negro de la página
   y de paso disimula la costura con la nav */
.hero-fundido {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, var(--negro) 0%, rgba(0,0,0,.62) 7%, rgba(0,0,0,0) 24%),
    linear-gradient(0deg,   var(--negro) 0%, rgba(0,0,0,.68) 9%, rgba(0,0,0,0) 30%);
}
/* el letrero · lo dispara el JS a los 7s de cada vuelta del clip */
.hero-letrero {
  position: relative; z-index: 2;
  margin: 0; padding-inline: var(--sp-4);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900; font-stretch: 112%;
  font-size: clamp(23px, 4.6vw, 58px);
  letter-spacing: -.01em; line-height: 1.05;
  color: var(--papel);
  /* tres sombras superpuestas, de la más cerrada a la más abierta: la
     primera despega la letra del fondo, la segunda la asienta, y el halo
     ancho recoge la luz cenital que ya trae el video. */
  text-shadow:
    0 1px 3px rgba(0, 0, 0, .85),
    0 4px 16px rgba(0, 0, 0, .8),
    0 6px 44px rgba(0, 0, 0, .7);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.7s ease-out, transform 1.7s ease-out;
}
.hero-letrero.visible { opacity: 1; transform: none; }
/* botón blando que baja al catálogo · vive bajo el letrero.
   Entra CON el letrero sin tocar el JS: el hermano general (~) lo
   engancha a la clase que ya conmuta el <h1>. */
.hero-baja {
  position: relative; z-index: 2;
  align-self: center;              /* el hero es flex-column: sin esto se estira a todo el ancho */
  margin-top: clamp(18px, 2.4vw, 32px);
  display: inline-flex; align-items: center;
  padding: 13px 30px;
  border: 1px solid rgba(244, 242, 237, .26);
  border-radius: 999px;
  background: rgba(0, 0, 0, .22);
  font-family: var(--font-display);
  font-weight: 300;                /* letra delgada: Archivo es variable y baja hasta 300 */
  font-size: 13.5px; letter-spacing: .14em;
  color: var(--papel); text-decoration: none; white-space: nowrap;
  opacity: 0; transform: translateY(14px);
  transition: opacity 1.7s ease-out, transform 1.7s ease-out,
              border-color var(--fast) linear, color var(--fast) linear, background var(--fast) linear;
}
.hero-letrero.visible ~ .hero-baja { opacity: 1; transform: none; }
.hero-baja:hover { border-color: var(--oro); color: var(--oro); background: rgba(0, 0, 0, .42); }
.hero-baja:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .hero-letrero { transition: none; }
  .hero-baja { transition: none; opacity: 1; transform: none; }
}
/* ---------- cinta ---------- */
.ticker { border-top: 1px solid var(--humo); border-bottom: 1px solid var(--oro); background: var(--negro-hondo); overflow: hidden; white-space: nowrap; }
.ticker span { font-family: var(--font-dato); font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--oro); padding-block: 9px; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* aviso fijo del inicio · un solo mensaje, quieto y centrado.
   Reusa la caja de .ticker pero NO su cinta: sin .ticker-track no hay
   animación que apagar. El claro es --papel (#F4F2ED), el mismo blanco
   con que está pintada la palabra IRONCLAD del logotipo. */
.ticker-blanco {
  background: var(--negro);
  border-top: 0; border-bottom: 0;
  text-align: center;
}
/* la tipografía es la que ya traía la cinta (Space Mono 11/700/.2em):
   se hereda de `.ticker span` a propósito, así no se duplica el valor
   y si cambia allá, cambia aquí. Solo se pisa el color. */
.ticker-blanco span {
  display: inline-block;
  color: var(--papel);
}
@media (max-width: 420px) {
  .ticker-blanco span { font-size: 11px; letter-spacing: .14em; }
}
/* ---------- nav ---------- */
/* borde inferior transparente: el hilo gris cortaba el video del inicio y,
   con las páginas ya unificadas, delataba la caja en el resto del sitio. */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(0,0,0,.94); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; }
.nav-inner { display: flex; align-items: center; gap: var(--sp-4); height: 68px; }
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand .mark { width: 27px; height: 25px; color: var(--oro); flex: none; }
.brand .word { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-size: 19px; letter-spacing: .01em; color: var(--papel); white-space: nowrap; }
.nav-links { display: flex; gap: var(--sp-4); margin-left: var(--sp-5); }
.nav-links a {
  /* el menú se queda en la monoespaciada aunque el resto de etiquetas
     pasara a Roboto: es la firma del sitio en la barra */
  font-family: var(--font-dato); font-size: 11px; font-weight: 700; letter-spacing: .18em;
  color: var(--acero); min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: color var(--fast) linear, border-color var(--fast) linear;
}
.nav-links a:hover { color: var(--papel); border-bottom-color: var(--humo); }
.nav-links a[aria-current="page"] { color: var(--oro); border-bottom-color: var(--oro); }
.nav-tools { margin-left: auto; display: flex; align-items: center; gap: var(--sp-1); }
/* Franja intermedia: con cinco secciones el menú medía 427px y a 768 la
   barra se pasaba (739 de 720), mientras que a 1024 empujaba el logo 49px
   fuera del eje. Aquí los enlaces se aprietan lo justo para que quepan y
   la marca vuelva al centro; de 1200 para arriba recuperan su tamaño. */
@media (min-width: 768px) and (max-width: 1199px) {
  /* con el piso de 11 px los cinco enlaces no cabían a 768: menos aire entre ellos y tras la marca */
  .nav-links { gap: var(--sp-2); margin-left: var(--sp-4); }
  .nav-links a { font-size: 11px; letter-spacing: .08em; }
}
/* marca al centro · tres columnas: enlaces | marca | herramientas.
   Los dos costados miden 1fr, así que la marca cae en el eje exacto de la
   barra aunque un lado tenga más contenido que el otro.
   Desde 1024 y no antes: entre 768 y 1023 los cuatro enlaces del inicio
   (CATÁLOGO · GRABADOS · EL ENSAYO · EL REGISTRO) son más anchos que su
   columna, la empujan y la marca se corría 83px del eje. Ahí se queda el
   reparto de siempre, con la marca a la izquierda. */
@media (min-width: 1024px) {
  .nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .nav-inner .nav-links { grid-area: 1 / 1; margin-left: 0; }
  .nav-inner .brand { grid-area: 1 / 2; justify-self: center; }
  .nav-inner .nav-tools { grid-area: 1 / 3; justify-self: end; margin-left: 0; }
}
/* ---------- menú móvil ---------- */
.menu-btn { display: none; }
.nav-panel { display: none; }
@media (max-width: 767px) {
  .menu-btn {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    color: var(--acero); cursor: pointer;
    transition: color var(--fast) linear, transform var(--fast) var(--ease);
  }
  .menu-btn:hover { color: var(--papel); }
  .menu-btn:active { transform: scale(.9); }
  .menu-btn svg { width: 20px; height: 20px; }
  .nav-panel {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 39;
    background: rgba(0, 0, 0, .97);
    padding: 92px var(--sp-4) var(--sp-5);
    transform: translateY(-100%);
    /* visibility además del transform: cerrado NO puede interceptar nada,
       pase lo que pase con stacking contexts o desbordes */
    visibility: hidden;
    transition: transform 260ms var(--ease), visibility 0s 260ms;
  }
  .nav-panel.abierto { transform: translateY(0); visibility: visible; transition: transform 260ms var(--ease); }
  .nav-panel a {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 58px;
    font-family: var(--font-display); font-weight: 900; font-stretch: 125%;
    font-size: 26px; text-transform: uppercase; color: var(--papel);
    border-bottom: 1px solid var(--humo);
  }
  .nav-panel a::after { content: "→"; color: var(--oro); font-size: 20px; }
  .nav-panel a:active { color: var(--oro); }
  .nav-panel .mono { display: block; margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-panel { transition: none; }
}
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--acero); cursor: pointer; position: relative;
  transition: color var(--fast) linear, transform var(--fast) var(--ease);
}
.icon-btn:hover { color: var(--papel); }
.icon-btn:active { transform: scale(.9); }
.icon-btn svg { width: 19px; height: 19px; }
.cart-count {
  position: absolute; top: 5px; right: 4px; min-width: 16px; height: 16px; padding: 0 3px;
  background: var(--oro); color: var(--negro);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  display: grid; place-items: center;
}
/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 28px; border-radius: var(--radius-s);
  font-weight: 800; font-size: 14px; letter-spacing: .07em; text-transform: uppercase;
  cursor: pointer;
  transition: background var(--fast) linear, color var(--fast) linear,
              border-color var(--fast) linear, transform var(--fast) var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--oro); color: var(--negro); }
.btn-primary:hover { background: var(--oro-claro); }
.btn-ghost { border: 1px solid var(--humo); color: var(--papel); }
.btn-ghost:hover { border-color: var(--oro); color: var(--oro); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; transform: none; }
/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .16em;
  color: var(--oro); border: 1px solid var(--oro); padding: 9px 14px;
  transition: background var(--fast) linear, color var(--fast) linear;
}
.chip:hover { background: var(--oro); color: var(--negro); }
.chip-senal { color: var(--negro); background: var(--senal); border-color: var(--senal); }
/* ---------- placa técnica ---------- */
.placa {
  position: relative; display: inline-flex; align-items: center;
  border: 1px solid rgba(239, 177, 65,.85); background: var(--placa-bg);
  padding: 14px 30px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .18em;
  color: var(--oro);
}
.placa::before, .placa::after, .placa > i::before, .placa > i::after {
  content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--oro-claro), var(--oro-profundo));
}
.placa::before { left: 6px; top: 6px; }
.placa::after { right: 6px; top: 6px; }
.placa > i::before { left: 6px; bottom: 6px; }
.placa > i::after { right: 6px; bottom: 6px; }
/* ---------- grabado en metal ---------- */
.metal {
  display: inline-block; background: var(--metal); border-radius: 3px;
  padding: 16px 32px;
}
.metal span {
  font-family: var(--font-mono); letter-spacing: .3em; color: var(--grabado);
  text-shadow: 0 1px 0 rgba(255,255,255,.14), 0 -1px 1px rgba(0,0,0,.8);
}
/* ---------- micrograbado ---------- */
.engrave { position: absolute; inset: 0; overflow: hidden; pointer-events: none; user-select: none; }
.engrave div {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; line-height: 2.05;
  color: rgba(239, 177, 65,.30); white-space: nowrap;
}
.engrave div:nth-child(2) { margin-left: -46px; }
.engrave div:nth-child(3) { margin-left: -96px; }
.engrave div:nth-child(4) { margin-left: -22px; }
.engrave div:nth-child(5) { margin-left: -70px; }
/* ---------- media ---------- */
.media { position: relative; overflow: hidden; background: var(--negro-hondo); }
.media img { width: 100%; height: 100%; object-fit: cover; }
/* ---------- producto ---------- */
.grid-products {
  /* el piso manda cuántas columnas entran: con 230 el contenedor de 1400
     daba 5 columnas más chicas que antes. A 280 se queda en 4 y la tarjeta
     crece — que es lo que se buscaba al ensanchar. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* Antes: gap de 1px sobre fondo humo + borde — eso dibujaba la retícula
     que encajonaba cada pieza. Ahora las piezas respiran sobre el negro y
     la separación la da el aire, no una línea.
     El hueco entre filas va aparte y más corto: al vertical ya se le suma
     el relleno inferior de la tarjeta, así que con el mismo valor que el
     horizontal las filas se veían el doble de separadas. */
  column-gap: clamp(14px, 1.8vw, 26px);
  row-gap: clamp(8px, 1vw, 14px);
}
/* sin fondo propio ni cambio al pasar: cualquiera de los dos vuelve a
   dibujar la caja que se quiso quitar. El aviso de hover lo dan la foto,
   el nombre y el signo +. */
.card { display: flex; flex-direction: column; }
.card:hover .card-name { color: var(--oro); transition: color var(--fast) linear; }
.card .media { aspect-ratio: 4 / 5; }
.card .media img { transition: transform 420ms var(--ease); }
.card:hover .media img { transform: scale(1.04); }
/* segunda toma · se funde encima al señalar la pieza.
   Va absoluta para apilarse sobre la primera (las dos son hijas de
   .media, que ya es relative con overflow hidden). El scale de arriba
   la alcanza igual, así que ambas se acercan juntas y el cambio se lee
   como una sola toma que gira, no como dos fotos distintas. */
.card .media .foto-2 {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.card:hover .media .foto-2,
.card:focus-visible .media .foto-2 { opacity: 1; }
/* en pantallas sin puntero no hay "señalar": la segunda toma sobra */
@media (hover: none) {
  .card .media .foto-2 { display: none; }
}
.card-tag { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; background: var(--senal); color: var(--negro); padding: 4px 9px; }
.card-body { padding: var(--sp-3) var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 7px; flex: 1; }
/* Sin alto reservado: el nombre ocupa solo sus líneas reales y el precio le
   queda pegado. El coste es que en una fila donde un nombre ocupa una línea
   y otro dos, esos precios NO caen a la misma altura — se cambió a propósito,
   priorizando que el bloque nombre-precio se lea junto. */
.card-name { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-size: 17px; line-height: 1.14; text-transform: uppercase; color: var(--papel); }
/* El pie ya NO se empuja al fondo con margin-top:auto — se queda pegado al
   nombre. Los precios de una fila siguen alineados porque lo de arriba mide
   igual en todas: el nombre reserva dos líneas y .card-sw reserva su alto
   aunque la pieza tenga un solo acabado. */
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 0; }
/* El precio de la tarjeta va deliberadamente bajo de tono: en la grilla se
   compara, y un precio a 25px en oro convierte la vista en una subasta.
   Va acotado a .card — en la ficha del producto y en el carrito el precio
   SÍ tiene que pesar, y ahí se queda como estaba. */
.card .price {
  font-size: 17px; font-weight: 500; font-stretch: 100%;
  color: var(--papel); letter-spacing: .01em;
}
/* añadir · solo el signo, sin círculo. Conserva 38px de caja invisible
   para que siga siendo un objetivo cómodo con el dedo. */
.card-mas {
  flex: none;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 300;
  font-size: 27px; line-height: 1; color: var(--papel);
  transition: color var(--fast) linear, transform var(--fast) var(--ease);
}
.card:hover .card-mas,
.card:focus-visible .card-mas { color: var(--oro); transform: scale(1.12); }
.price { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-size: 25px; color: var(--oro); line-height: 1; }
/* ---------- ficha de producto ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .94fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.pdp-info { padding-top: 4px; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { cursor: pointer; }
.opcion span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 68px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--humo); border-radius: var(--radius-s);
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; color: var(--papel);
  transition: border-color var(--fast) linear, color var(--fast) linear, background var(--fast) linear;
}
.opcion:hover span { border-color: var(--acero); }
.opcion input:checked + span { border-color: var(--oro); color: var(--negro); background: var(--oro); font-weight: 700; }
.opcion input:focus-visible + span { outline: 2px solid var(--oro); outline-offset: 3px; }
.campo {
  min-height: 48px; padding: 0 14px;
  background: var(--negro-hondo); border: 1px solid var(--humo); border-radius: var(--radius-s);
  color: var(--papel); font-family: var(--font-mono); font-size: 14px; letter-spacing: .12em;
  transition: border-color var(--fast) linear;
}
.campo::placeholder { color: var(--acero); letter-spacing: .08em; }
.campo:hover { border-color: var(--acero); }
.campo:focus { border-color: var(--oro); outline: none; box-shadow: 0 0 0 1px var(--oro); }
.campo[aria-invalid="true"] { border-color: var(--alerta); }
.acordeon details { border-top: 1px solid var(--humo); }
.acordeon details:last-child { border-bottom: 1px solid var(--humo); }
.acordeon summary {
  cursor: pointer; list-style: none; min-height: 52px; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; color: var(--papel);
  transition: color var(--fast) linear;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: "+"; color: var(--oro); font-size: 17px; line-height: 1; }
.acordeon details[open] summary::after { content: "−"; }
.acordeon summary:hover { color: var(--oro); }
.acordeon details > div { padding-bottom: 18px; }
.acordeon p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.65; color: var(--acero); text-wrap: pretty; }
.acordeon p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .pdp { grid-template-columns: 1fr; }
}
/* ---------- checkout ---------- */
.pasos { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0 0 var(--sp-5); padding: 0 0 var(--sp-3); border-bottom: 1px solid var(--humo); }
.paso { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--acero); }
.paso-n { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid currentColor; font-size: 11px; flex: none; }
.paso.activo { color: var(--oro); }
.paso.activo .paso-n { background: var(--oro); color: var(--negro); border-color: var(--oro); }
.checkout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.metodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 8px; }
.metodo { cursor: pointer; }
.metodo span {
  display: flex; flex-direction: column; gap: 3px; min-height: 62px; justify-content: center;
  padding: 12px 15px; border: 1px solid var(--humo); border-radius: var(--radius-s);
  transition: border-color var(--fast) linear, background var(--fast) linear;
}
.metodo b { font-size: 14px; color: var(--papel); }
.metodo small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--acero); }
.metodo:hover span { border-color: var(--acero); }
.metodo input:checked + span { border-color: var(--oro); background: rgba(239, 177, 65, .07); }
.metodo input:focus-visible + span { outline: 2px solid var(--oro); outline-offset: 3px; }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.campo-wrap { display: flex; flex-direction: column; gap: 7px; }
.campo-wrap label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--acero); }
.campo-wrap small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--acero); }
.campo-wrap small.error { color: var(--alerta); }
.aviso { display: flex; gap: 13px; padding: 16px 18px; border: 1px solid; border-radius: var(--radius-s); margin-bottom: var(--sp-4); }
.aviso b { display: block; font-size: 15px; margin-bottom: 5px; }
.aviso p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--acero); text-wrap: pretty; }
.aviso svg { flex: none; margin-top: 2px; }
.aviso-error { border-color: var(--alerta); background: rgba(229, 72, 77, .08); color: var(--alerta); }
.aviso-error b { color: var(--alerta); }
.resumen { background: var(--negro-hondo); border: 1px solid var(--humo); padding: var(--sp-4); position: sticky; top: var(--sp-3); }
.linea { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--humo); }
.linea b { display: block; font-size: 14px; color: var(--papel); }
.linea .mono { display: block; font-size: 11px; margin-top: 3px; }
.totales { display: grid; grid-template-columns: 1fr auto; gap: 9px 12px; margin: 0; font-family: var(--font-mono); font-size: 12px; }
.totales dt { color: var(--acero); letter-spacing: .1em; }
.totales dd { margin: 0; text-align: right; color: var(--papel); }
@media (max-width: 900px) {
  .checkout { grid-template-columns: 1fr; }
  .resumen { position: static; order: -1; }
}
@media (max-width: 520px) {
  .campos { grid-template-columns: 1fr; }
}
/* ---------- material y evidencia ---------- */
.material-visual {
  position: relative; min-width: 0; margin: 0; overflow: hidden;
  background: var(--negro-hondo);
}
.material-visual picture, .material-visual img { display: block; width: 100%; height: 100%; }
.material-visual picture {
  position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 72% 94% at center,
    #000 0%, #000 68%, rgba(0, 0, 0, .78) 78%, rgba(0, 0, 0, .30) 90%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 94% at center,
    #000 0%, #000 68%, rgba(0, 0, 0, .78) 78%, rgba(0, 0, 0, .30) 90%, transparent 100%);
}
.material-visual img { object-fit: contain; object-position: 50% 50%; }
.material-visual::after {
  content: "";
  position: absolute; inset: -1px; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .40) 14%, transparent 28%),
    radial-gradient(ellipse 42% 78% at 50% 48%,
      transparent 0%, transparent 58%, rgba(0, 0, 0, .38) 74%, rgba(0, 0, 0, .86) 92%, var(--negro) 100%);
}
.material-prueba {
  position: absolute; left: 16px; bottom: 14px; z-index: 2;
  color: var(--acero); font-family: var(--font-dato); font-size: 9px;
  letter-spacing: .13em; text-transform: uppercase;
}
@media (min-width: 1024px) {
  .material-visual { min-height: clamp(540px, 43vw, 610px); }
}
.material-panel {
  position: relative; min-width: 0;
  padding: clamp(18px, 2vw, 28px) 0;
  overflow: hidden;
}
.material-panel::before {
  content: ""; position: absolute; width: 52%; height: 1px; top: 0; left: -52%;
  background: linear-gradient(90deg, transparent, var(--oro), transparent);
  transform: translateX(0); opacity: 0;
}
.is-in .material-panel::before { animation: material-scan 900ms var(--ease) 260ms both; }
@keyframes material-scan {
  12% { opacity: 1; }
  to { transform: translateX(292%); opacity: 0; }
}
.material-pvd-titulo { margin: 0; font-size: clamp(29px, 3.2vw, 44px); line-height: .96; }
.material-intro {
  max-width: 48ch; margin: 14px 0 0;
  color: var(--papel); font-size: clamp(15px, 1.35vw, 18px); line-height: 1.58;
}
.pvd-caracteristicas {
  display: flex; flex-wrap: wrap; gap: 10px clamp(16px, 2.2vw, 28px);
  margin: clamp(18px, 2vw, 24px) 0 0; padding: 0; list-style: none;
}
.pvd-caracteristicas li { position: relative; padding: 0; }
.pvd-caracteristicas li::before { content: none; }
.pvd-caracteristicas strong {
  display: block; color: var(--oro); font-family: var(--font-dato); font-size: 11px;
  font-weight: 700; letter-spacing: .13em; line-height: 1.2;
}
.material-garantia {
  display: grid; grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  gap: clamp(18px, 2vw, 28px); align-items: center;
  margin-top: clamp(26px, 3vw, 38px); padding-top: 0;
}
.material-garantia-kicker {
  color: var(--acero); font-family: var(--font-dato); font-size: 9px;
  letter-spacing: .14em; line-height: 1.4;
}
.material-garantia-dato {
  margin: 6px 0 0; color: var(--papel); font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 28px); font-weight: 900; line-height: 1.02;
  text-wrap: balance;
}
.material-garantia-cierre {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-width: 0;
}
.material-garantia-cierre .btn { margin-top: 14px; }
picture.tarjeta-garantia-foto.material-tarjeta { width: 100%; max-width: 280px; transform: none; }
/* ---------- botón "ver más" · el mismo pill del hero ----------
   .hero-baja vive dentro del hero (absoluto, se funde con el letrero).
   Esta variante repite su forma y su letra delgada, pero en flujo normal. */
.btn-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 30px;
  border: 1px solid rgba(244, 242, 237, .26);
  border-radius: 999px;
  background: rgba(0, 0, 0, .22);
  font-family: var(--font-display); font-weight: 300;
  font-size: 13.5px; letter-spacing: .14em;
  color: var(--papel); white-space: nowrap;
  transition: border-color var(--fast) linear, color var(--fast) linear, background var(--fast) linear;
}
.btn-pill:hover { border-color: var(--oro); color: var(--oro); background: rgba(0, 0, 0, .42); }
.pie-grilla { display: flex; justify-content: center; margin-top: clamp(20px, 2.4vw, 32px); }
/* ---------- las cuatro categorías ---------- */
.cuatro {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
}
.cat {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* sin marco: la foto se apoya sola sobre el negro, igual que las tarjetas */
}
.cat img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 460ms var(--ease);
}
.cat:hover img { transform: scale(1.06); }
.cat::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.88) 100%);
}
.cat-nombre {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(14px, 1.6vw, 22px);
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: var(--font-display); font-weight: 900; font-stretch: 125%;
  font-size: clamp(14px, 1.5vw, 21px); text-transform: uppercase;
  color: var(--papel);
  transition: color var(--fast) linear;
}
.cat-nombre span { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--acero); }
.cat:hover .cat-nombre { color: var(--oro); }
@media (max-width: 767px) {
  .cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---------- producto estrella ---------- */
.estrella-split {
  display: grid;
  /* la foto va MÁS ESTRECHA que el texto: a 1fr/1fr medía 825px de alto y
     aplastaba a la columna de al lado. Mismo reparto que .ensayo-split. */
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(22px, 3.4vw, 52px);
  align-items: center;
}
.estrella-split .media { aspect-ratio: 4 / 5; }
.estrella-info { display: flex; flex-direction: column; gap: clamp(16px, 2.2vw, 26px); }
.estrella-precio { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); flex-wrap: wrap; }
@media (max-width: 900px) {
  .estrella-split { grid-template-columns: 1fr; }
}
/* ---------- registro ---------- */
.registro { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 1px; background: var(--humo); border: 1px solid var(--humo); }
.registro > div { background: var(--negro); padding: clamp(24px, 4vw, 44px); }
.rango { background: var(--negro-hondo); padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.lista li { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--papel); }
.lista b { color: var(--oro); font-weight: 700; }
/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--oro); background: var(--negro-hondo); }
.footer-inner { display: flex; flex-wrap: wrap; gap: var(--sp-5); justify-content: space-between; padding-block: var(--sp-5); }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col a { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; color: var(--acero); min-height: 26px; display: inline-flex; align-items: center; transition: color var(--fast) linear; }
.footer-col a:hover { color: var(--oro); }
/* ============================================================
   MOVIMIENTO
   ============================================================ */
/* Mejora progresiva: el contenido nace VISIBLE. Solo se oculta para animar
   si el JS arrancó y puso la clase .js — así una falla de script, un observer
   que no dispara o un navegador viejo nunca dejan la página en blanco. */
.js [data-reveal] { opacity: 0; transform: translateY(15px); }
.js .is-in [data-reveal] { animation: rise var(--dur) var(--ease) forwards; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
/* MOMENTO FIRMA · el láser graba el titular */
@keyframes cut { to { clip-path: inset(0 0 0 0); } }
@keyframes beam {
  0%   { transform: translateX(0); opacity: 0; }
  8%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(var(--laser-w, 60vw)); opacity: 0; }
}
/* el sello se estampa */
@keyframes stamp {
  0%   { transform: rotate(-8deg) scale(1.5); opacity: 0; }
  55%  { transform: rotate(-8deg) scale(.94); opacity: 1; }
  100% { transform: rotate(-8deg) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* el crossfade del hero es loop decorativo: se congela en la primera toma */
  /* el grano se queda, quieto: la textura no molesta, el parpadeo sí */
  .grain::after { animation: none; }
  .card .media img, .card:hover .media img { transition: none; transform: none; }
  .card .media .foto-2 { transition: none; }
  .material-panel::before { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .is-in [data-reveal] { animation-duration: 1ms; animation-delay: 0ms; }
}
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .registro { grid-template-columns: 1fr; }
  .material-split { grid-template-columns: 1fr; }
  .material-visual { aspect-ratio: 16 / 10; }
  /* táctil: hasta tablet se navega con el dedo, no con puntero */
  .footer-col a, .brand, nav[aria-label="Ruta"] a, .pdp-info p > a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .footer-col { gap: 0; }
}
@media (max-width: 767px) {
  .nav-links { display: none; }
  .nav-inner { height: 60px; }
  /* marca al centro en móvil · patrón hamburguesa | logo | carrito.
     Los dos costados miden 44px exactos, así que la marca cae en el eje
     real de la pantalla. No cabía de otro modo: a 375px el ancho útil es
     343 y marca(172)+herramientas(188) ya se pasaban 17px.
     `display:contents` disuelve la caja .nav-tools para que sus botones
     entren como celdas de esta rejilla sin tocar el HTML de 6 páginas. */
  /* barra móvil: menú · buscar | MARCA | cuenta · carrito.
     Cinco columnas FIJAS de 44px a los lados: si una página no trae alguno
     de esos botones, el hueco se reserva igual y la marca sigue cayendo en
     el eje exacto. La fila va explícita en todos — con solo la columna, la
     colocación automática los mandaba a una segunda fila y salían fuera de
     la barra (y=102 con la barra acabando en 94). */
  .nav-inner {
    display: grid;
    grid-template-columns: 44px 44px 1fr 44px 44px;
    grid-template-rows: 1fr;
    column-gap: 0;
    align-items: center;
  }
  .nav-tools { display: contents; }
  .menu-btn { grid-area: 1 / 1; justify-self: start; }
  .nav-tools > button[aria-label="Buscar"] { grid-area: 1 / 2; justify-self: start; }
  .nav-inner .brand { grid-area: 1 / 3; justify-self: center; }
  .nav-tools > a.icon-btn { grid-area: 1 / 4; justify-self: end; }
  .nav-tools > [aria-label^="Carrito"] { grid-area: 1 / 5; justify-self: end; }
  /* con 176px comidos por los botones, la palabra a 19px ya no entra:
     escala con el ancho para no chocar contra ellos en pantallas de 360. */
  .brand .word { font-size: clamp(14px, 4.2vw, 19px); }
  .brand { gap: 8px; }
  /* TALLER sí sobra: el sitio quedó en negro fijo */
  [id] { scroll-margin-top: 76px; }
  .shell { padding-inline: var(--sp-3); }
  /* minmax(0,1fr) y no 1fr: con `1fr` el mínimo es el contenido de la
     tarjeta, y en pantallas de 320-360 las columnas se negaban a encoger
     — salían desiguales (156.7 y 138.8) y se pasaban del ancho de la
     grilla. Con mínimo 0 se reparten exacto y el texto envuelve dentro. */
  .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card, .card-body { min-width: 0; }
  .card-foot { flex-wrap: wrap; }
  /* a dos columnas el nombre baja de cuerpo: "OCTOGONAL" pedía 145px en una
     tarjeta de 138 y se salía de su caja */
  .card-name { font-size: 15px; }
  .lede { font-size: 16px; }
  .placa { padding: 12px 18px; font-size: 11px; letter-spacing: .1em; }
  /* táctil: en pantalla de dedo, todo enlace llega a 44px */
  .footer-col a, .brand { min-height: 44px; }
  .footer-col { gap: 0; }
}
/* móvil: SIEMPRE dos piezas por fila. Antes, por debajo de 420px caía a
   una sola columna y la tienda parecía una lista, no un surtido.
   La regla vive en el bloque de 767px; aquí solo se ajusta lo que a dos
   columnas ya no entra en pantallas muy angostas: con la tarjeta en
   143px, "COLGANTE" se salía de su caja a 17px. */
/* ============================================================
   MÓVIL · LAS FOTOS VAN A SANGRE, EL TEXTO NO
   Regla del sistema, no un parche: el .shell reserva 16px por lado, y
   TODO bloque cuyo contenido sea imagen o vídeo sale de ese margen para
   llegar al borde. Los títulos, párrafos y fichas conservan el aire —
   un texto pegado al filo se lee mal y en pantallas curvas se pierde.
   Cubre las 7 páginas; la lista es el inventario completo de bloques de
   medio que quedaban cortos, medido en cada una a 390px.
   ============================================================ */
@media (max-width: 767px) {
  .grid-products, .cuatro, .pdp-galeria, .material-split, .estrella-split > .media {
    margin-inline: calc(var(--sp-3) * -1);
  }
  /* el panel de material pierde su marco lateral al llegar al borde:
     un borde a ras de pantalla se ve como un corte, no como un marco */
  .material-split { border-left: 0; border-right: 0; }
  .material-visual { aspect-ratio: 5 / 4; }
  .material-visual img { object-fit: cover; object-position: 50% 20%; }
  .material-panel { padding: 24px var(--sp-3) 0; }
  .material-garantia { grid-template-columns: 1fr; gap: 14px; }
  picture.tarjeta-garantia-foto.material-tarjeta { max-width: 300px; transform: none; }
  .material-garantia-cierre .btn { width: 100%; margin-top: 18px; }
}
@media (max-width: 360px) {
  .card-body { padding: 13px 12px 16px; }
  .card-name { font-size: 13.5px; }
  .card-mas { width: 34px; height: 34px; font-size: 24px; }
}
/* ============================================================
   DATO DE MÁQUINA · lo único que conserva la monoespaciada
   ============================================================ */
.num-serie,                      /* números de serie */
.engrave div,                    /* la tira de micrograbado */
.opcion span,                    /* medidas y tallas: 50 cm, 55 cm, talla 9 */
.dias,                           /* contador de días de servicio */
.estado,                         /* estados del registro */
.paso-n,                         /* pasos numerados del pago */
.stock-nota,                     /* EN STOCK · SALE EN 24-48 H */
.pdp-info > p.mono {             /* ficha: material · acabado · grosor */
  font-family: var(--font-dato);
}
/* ============================================================
   NAVEGACIÓN · Space Mono, en todo el sitio
   La regla no es por tamaño ni por sitio, es por FUNCIÓN: si un elemento
   dice DÓNDE ESTÁS o A DÓNDE VAS, va en la monoespaciada. Junto con los
   datos de máquina (medida, serie, plazo) es lo único que la conserva
   después de mover las etiquetas a Roboto.
   ============================================================ */
.nav-links a,                    /* barra principal */
.nav-panel a,                    /* menú del teléfono */
nav[aria-label="Ruta"],          /* miga de pan · dónde estás */
nav[aria-label="Ruta"] a,
.footer-col a,                   /* mapa del sitio en el pie */
.filtro,                         /* filtros: cambian la vista actual */
.paso,                           /* pasos del pago · en qué punto vas */
.res-garantias {                 /* enlaces de servicio del resumen */
  font-family: var(--font-dato);
}
/* ---------- titular relleno de cadena ----------
   El oro deja de ser un color plano y pasa a ser la pieza: la foto del
   tejido vive DENTRO de las letras. Pide tipografía muy gruesa (Archivo
   900); en pesos finos el eslabón no se distingue y solo se ve sucio.
   Va sobre fondo oscuro: encima de --papel no hay contraste. */
@keyframes cadena-respira {
  from { background-position: 42% 38%; }
  to   { background-position: 61% 56%; }
}
/* sin recorte al texto, `color: transparent` dejaría el titular
   invisible: se vuelve al oro plano de siempre */
/* ============================================================
   SHELL · lo que comparten todas las páginas
   Skip link, pie legal, línea de confianza, prosa de las páginas de
   texto y el estado vacío de la ficha.
   ============================================================ */
/* saltar al contenido: invisible hasta que el teclado lo enfoca.
   Solo transform (regla de movimiento), sin transición. */
.skip {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 16px;
  background: var(--oro); color: var(--negro);
  font-family: var(--font-dato); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; outline-offset: 0; }
/* pie: canales, identificación del proveedor y línea de confianza */
.footer-social { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 8px; }
.footer-social a[hidden] { display: none; }
.footer-pie {
  border-top: 1px solid var(--humo);
  padding-block: 18px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center;
}
.footer-pie.sin-linea { border-top: 0; padding-top: 0; }
.footer-legal, .footer-confianza {
  margin: 0;
  font-family: var(--font-dato); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--acero); line-height: 1.9;
}
.footer-legal a { color: var(--acero); display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px; transition: color var(--fast) linear; }
.footer-legal a:hover { color: var(--oro); }
/* el hueco que David tiene que rellenar se ve, a propósito */
.footer-legal [data-empresa]:empty::before { content: "⟦DATO⟧"; color: var(--senal); }
/* prosa · páginas de texto (legales, ayuda, nosotros) */
.prosa { max-width: 68ch; font-size: 16px; line-height: 1.7; color: var(--papel); }
.prosa h2 {
  font-family: var(--font-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase;
  font-size: clamp(19px, 2.1vw, 25px); line-height: 1; letter-spacing: .015em;
  color: var(--papel); margin: var(--sp-5) 0 var(--sp-3);
}
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { font-family: var(--font-dato); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); margin: var(--sp-4) 0 var(--sp-2); }
.prosa p, .prosa li { color: var(--acero); text-wrap: pretty; }
.prosa p { margin: 0 0 14px; }
.prosa ul, .prosa ol { padding-left: 22px; margin: 0 0 14px; }
.prosa li { margin: 6px 0; }
.prosa strong, .prosa b { color: var(--papel); font-weight: 600; }
.prosa a { color: var(--oro); text-decoration: underline; text-underline-offset: 3px; }
.prosa .dato, .dato { font-family: var(--font-dato); }
.prosa table { border-collapse: collapse; width: 100%; margin: 0 0 18px; font-family: var(--font-dato); font-size: 13px; }
.prosa th, .prosa td { border: 1px solid var(--humo); padding: 9px 12px; text-align: left; vertical-align: top; }
.prosa th { color: var(--acero); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }
.prosa td { color: var(--papel); }
.indice { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); margin: 0 0 var(--sp-4); padding: 0; list-style: none; }
.indice a { font-family: var(--font-dato); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--acero); min-height: 44px; display: inline-flex; align-items: center; }
.indice a:hover { color: var(--oro); }
.actualizado { font-family: var(--font-dato); font-size: 11px; letter-spacing: .14em; color: var(--acero); margin: 0; }
@media print {
  .nav, .nav-panel, .ticker, .footer, .btn, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .prosa, .prosa p, .prosa li, .prosa td { color: #000; }
}
/* ficha sin producto (?id= inexistente) */
.pdp-vacio { grid-column: 1 / -1; padding: var(--sp-6) 0; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
/* bloque de contacto del inicio */

/* ============================================================
   COLLAGE · lo que quedó vivo de assets/collage.css (fundido aquí en la Fase 7;
   el archivo original está en _archivo/assets/). Foil, stickers y tarjeta de garantía.
   ============================================================ */
/* ============================================================
   IRONCLAD · Capa de COLLAGE
   Lo que faltaba del territorio ORO DE BATALLA: papel rasgado,
   cinta, stickers, foil y sellos que se atreven.
   Se carga DESPUÉS de ironclad.css.
   ============================================================ */
/* ---------- papel rasgado ----------
   El borde no es recto: se recorta con un polígono irregular. Cada variante
   tiene su propio dentado para que dos papeles nunca se rasguen igual. */
.papel {
  background: var(--papel);
  color: var(--negro);
  position: relative;
  padding: clamp(22px, 3vw, 38px) clamp(20px, 3vw, 36px) clamp(30px, 4vw, 48px);
}
.papel .display, .papel .lede, .papel p, .papel h2, .papel h3 { color: var(--negro); }
/* sobre papel, la tinta secundaria es humo: el acero (#9B9BA7) da 2.46:1 y no
   es legible, y el oro brillante todavía menos */
.papel .mono { color: var(--humo); }
/* textura de fibra sobre el papel: lo aleja del bloque plano de color */
.papel::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(97deg, rgba(0,0,0,.028) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(3deg, rgba(0,0,0,.02) 0 1px, transparent 1px 6px);
  pointer-events: none;
}
/* ---------- cinta adhesiva ---------- */
/* ---------- sticker ---------- */
.sticker {
  display: inline-block;
  background: var(--senal);
  color: var(--negro);
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  font-size: clamp(13px, 1.5vw, 17px);
  letter-spacing: .02em;
  line-height: 1.06;
  padding: 11px 15px;
  box-shadow: var(--shadow-stamp);
  transform: rotate(-4deg);
}
.sticker-oro { background: var(--oro); }
.sticker-r { transform: rotate(3.5deg); }
/* ---------- foil dorado ---------- */
.foil {
  position: relative;
  overflow: hidden;
  background: var(--negro-hondo);
}
.foil img { width: 100%; height: 100%; object-fit: cover; }
.foil-tira {
  height: clamp(74px, 9vw, 122px);
  clip-path: polygon(
    0% 8%, 12% 0%, 26% 7%, 41% 1%, 55% 8%, 69% 2%, 84% 9%, 100% 3%,
    100% 92%, 87% 100%, 72% 93%, 58% 99%, 43% 92%, 28% 98%, 13% 91%, 0% 97%
  );
}
/* En pantalla grande la lámina asoma un pelín más que el texto: se come
   la MITAD del margen, no entero. Con el margen entero, entre 768 y
   1400 px se pegaba al filo de la pantalla, que es justo lo que no
   queremos. En el teléfono no asoma nada: se queda a ras del contenido. */
@media (min-width: 768px) {
  .foil-tira { margin-inline: calc(var(--sp-4) * -0.5); }
}
/* ---------- sello estampado ----------
   La geometría del manual R3, pero pasada por un filtro de tinta:
   el borde tiembla y la superficie se come. Se atreve. */
/* ---------- grabados de la gente ---------- */
/* ---------- tarjeta de garantía física ---------- */
.tarjeta-garantia-foto {
  display: block;
  width: 100%; max-width: 560px;
  margin-inline: auto;
  transform: rotate(-1.6deg);
}
.tarjeta-garantia-foto img {
  display: block;
  width: 100%; height: auto;
}
/* ---------- hero en collage ----------
   Las piezas se pisan un poco: no es una rejilla, es una mesa con cosas encima. */
/* ---------- utilidades de collage ---------- */
@media (max-width: 767px) {
  .tarjeta-garantia-foto { max-width: 620px; transform: none; }
}