/* ==========================================================================
   DESGUACES EL RUBIO, sistema de diseño v2 "almacen industrial editorial"
   Papel hueso + tinta calida + amarillo señal mate. Fotografia protagonista,
   titulares condensados gigantes, datos tecnicos en monoespaciada, grano
   global y hairlines. Compartido por todas las paginas del sitio.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Tinta navy fria: base de secciones oscuras, footer y contraste */
  --c-ink: #101430;
  --c-ink-2: #191d42;
  --c-ink-3: #262b57;
  --c-ink-text: #f5f6fc;
  --c-ink-soft: #bcc0e0;
  --c-ink-mute: #868bb4;
  --c-ink-line: rgba(255, 255, 255, 0.12);
  --c-ink-line-strong: rgba(255, 255, 255, 0.26);

  /* Neutros claros y frios */
  --c-paper: #f4f6fb;
  --c-paper-2: #e9edf6;
  --c-card: #ffffff;
  /* Cara de card y plato de foto de producto: blanco puro para que catalogo
     y carrito destaquen sobre el fondo gris azulado */
  --c-card-face: #ffffff;
  --c-plate: #ffffff;

  /* Compatibilidad con nombres v1 (usados en estilos inline de las paginas) */
  --c-bg: #f4f6fb;
  --c-bg-alt: #e9edf6;
  --c-surface: #ffffff;
  --c-surface-2: #eef1f8;
  --c-surface-3: #e2e7f3;
  --c-border: #e1e6f0;
  --c-border-strong: #c2cade;
  --c-text: #14162e;
  --c-text-soft: #4b5170;
  --c-text-mute: #5c627e;

  /* Amarillo del logo, señal principal */
  --c-yellow: #ffcd1e;
  --c-yellow-bright: #ffd94a;
  --c-yellow-deep: #e0aa00;
  --c-yellow-ink: #1a1400;
  --c-yellow-glow: rgba(255, 205, 30, 0.28);

  /* Azul indigo del logo, acento secundario */
  --c-blue: #2f2c86;
  --c-blue-deep: #201d5f;
  --c-blue-bright: #4b46d6;
  --c-blue-soft: #ecebfb;
  --c-blue-ink: #ffffff;

  /* Rojo señal, uso muy puntual */
  --c-signal-red: #d23b2a;

  /* Estados, mates */
  --c-success: #1f9254;
  --c-danger: #d23b2a;
  --c-info: #2f2c86;

  /* Secciones claras v1 (compatibilidad) */
  --c-light-bg: #e9edf6;
  --c-light-surface: #ffffff;
  --c-light-border: #e1e6f0;
  --c-light-text: #14162e;
  --c-light-text-soft: #4b5170;

  /* Tipografia moderna: grotesca geometrica para titulares y UI */
  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
  --font-editorial: 'Space Grotesk', system-ui, 'Segoe UI', sans-serif;
  /* Peso de titulares display: 600 (mas sereno que 700). Punto unico de control. */
  --fw-display: 600;

  /* Espaciado, base 4px */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-30: 120px;

  /* Radios deliberados: mezcla de recto y redondeado con firma asimetrica
     (esquina inferior izquierda recta en cards y paneles) */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;
  --r-asym: var(--r-lg);
  --r-asym-md: var(--r-md);

  /* Corte diagonal recurrente (biselado industrial) */
  --cut: clamp(16px, 2.4vw, 34px);

  /* Escala de elevacion: sombras calidas en capas, nunca duras */
  --shadow-xs: 0 1px 2px rgba(16, 20, 48, 0.08);
  --shadow-sm: 0 1px 2px rgba(16, 20, 48, 0.06), 0 6px 16px rgba(16, 20, 48, 0.08);
  --shadow-md: 0 2px 6px rgba(16, 20, 48, 0.07), 0 14px 32px rgba(16, 20, 48, 0.12);
  --shadow-lg: 0 6px 18px rgba(16, 20, 48, 0.12), 0 30px 64px rgba(16, 20, 48, 0.22);
  --shadow-yellow: none;

  /* Transiciones */
  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-med: 260ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 480ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --container: 1280px;
  --header-h: 74px;
  --z-header: 100;
  --z-grain: 400;
  /* El aviso de cookies vive en 99998 y sale en la primera visita, justo cuando
     el cliente abre el carrito por primera vez. El carrito es un dialogo y los
     avisos son respuestas a una accion suya: van por encima. El banner sigue
     ahi al cerrarlos, que es lo que exige el consentimiento. */
  /* El panel del selector de filtros necesita un escalon propio: tiene que
     ganar al aviso de cookies para que se pueda tocar en movil, y perder con el
     carrito y los avisos. Se hace hueco bajando cookies, no subiendo el
     carrito, para no empatar --z-drawer con --z-toast: con dos elementos en el
     mismo nivel decide el orden del DOM, y ahi el aviso debe ganar siempre. */
  --z-cookies: 99997;
  --z-fsel: 99998;
  --z-drawer: 99999;
  --z-toast: 100000;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-text);
  background-color: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grano global, sutil, encima de todo y sin capturar clicks */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { padding: 0; }

::selection { background: var(--c-yellow); color: var(--c-yellow-ink); }

:focus-visible {
  outline: 2px solid var(--c-yellow-deep);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   3. LAYOUT Y UTILIDADES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-6);
}

.section { padding-block: var(--sp-24); }
.section-tight { padding-block: var(--sp-16); }

/* Seccion clara alterna: papel mas profundo */
.section-light {
  background: var(--c-paper-2);
  color: var(--c-text);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

/* Seccion oscura de tinta */
.section-ink {
  background: var(--c-ink);
  color: var(--c-ink-text);
}
.section-ink .section-title { color: var(--c-ink-text); }
.section-ink .section-lead { color: var(--c-ink-soft); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-yellow { color: var(--c-yellow-deep); }
.mt-4 { margin-top: var(--sp-4); }
.mt-8 { margin-top: var(--sp-8); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-8 { margin-bottom: var(--sp-8); }

/* Dato monoespaciado */
.mono { font-family: var(--font-mono); }

/* --------------------------------------------------------------------------
   4. TIPOGRAFIA
   -------------------------------------------------------------------------- */
/* Etiqueta tecnica: mono, mayusculas, marca amarilla */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-soft);
}
.eyebrow::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--c-blue-bright);
  flex-shrink: 0;
}
.section-ink .eyebrow,
.page-head .eyebrow,
.hero .eyebrow { color: var(--c-ink-soft); }
.section-ink .eyebrow::before,
.page-head .eyebrow::before,
.hero .eyebrow::before { background: var(--c-yellow); }

.display-1, .display-2, .section-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  color: inherit;
}
.display-1 { font-size: clamp(48px, 7.4vw, 104px); }
.display-2 { font-size: clamp(38px, 5.6vw, 74px); }
.section-title { font-size: clamp(30px, 4vw, 52px); letter-spacing: -0.012em; }

.display-1 .accent, .display-2 .accent, .section-title .accent { color: var(--c-yellow); }

.section-lead {
  max-width: 620px;
  margin-top: var(--sp-5);
  font-size: 17px;
  color: var(--c-text-soft);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-12);
}
.section-head > div { max-width: 760px; }
.section-head .section-title { margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   5. BOTONES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 13px 26px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast), box-shadow var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.btn-primary {
  background: var(--c-yellow);
  color: var(--c-yellow-ink);
  border-color: var(--c-yellow);
}
.btn-primary:hover {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-yellow);
}

.btn-secondary {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-border-strong);
}
.btn-secondary:hover {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: var(--c-ink-text);
}

.btn-ghost {
  background: transparent;
  color: var(--c-text-soft);
  border-color: transparent;
}
.btn-ghost:hover { color: var(--c-text); background: var(--c-surface-2); }

/* El contorno amarillo solo funciona sobre fondo OSCURO. En la barra blanca de la
   cabecera daba 1,5:1 de contraste -el minimo legible es 4,5:1- y era justamente
   el boton mas destacado del menu. Alli se invierte: amarillo de fondo y tinta
   oscura encima, que es lo que ya hacia al pasar el raton. */
.btn-outline-yellow {
  background: transparent;
  color: var(--c-yellow);
  border-color: var(--c-yellow);
}
.site-header .btn-outline-yellow,
.nav-cta .btn-outline-yellow {
  background: var(--c-yellow);
  color: var(--c-yellow-ink);
  border-color: var(--c-yellow);
}
.site-header .btn-outline-yellow:hover,
.nav-cta .btn-outline-yellow:hover {
  background: var(--c-yellow-deep);
  color: var(--c-yellow-ink);
}
.btn-outline-yellow:hover {
  background: var(--c-yellow);
  color: var(--c-yellow-ink);
}

.btn-danger-ghost { color: var(--c-danger); }
.btn-danger-ghost:hover { background: rgba(178, 58, 42, 0.1); color: var(--c-danger); }

.btn-lg { padding: 17px 34px; font-size: 19px; }
.btn-sm { padding: 8px 16px; font-size: 14px; letter-spacing: 0.1em; }
.btn-block { width: 100%; }

.btn-icon {
  padding: 10px;
  border-radius: var(--r-md);
  color: inherit;
  opacity: 0.75;
}
.btn-icon:hover { opacity: 1; }
.btn-icon svg { width: 22px; height: 22px; }

.btn[disabled], .btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   6. FORMULARIOS (contexto claro por defecto)
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-soft);
}
.field-hint { font-size: 13px; color: var(--c-text-mute); }
.field-error { font-size: 13px; color: var(--c-danger); }

.input, .select, .textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--c-card);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  color: var(--c-text);
  font-size: 15px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--c-text-mute); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-text-soft); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--c-ink);
  box-shadow: 0 0 0 3px rgba(255, 205, 30, 0.55);
}
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--c-danger); }
.textarea { min-height: 120px; resize: vertical; }

.select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23574f3f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.select:disabled { opacity: 0.5; cursor: not-allowed; }

/* Checkbox tipo casilla de parte de taller */
.check {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  padding: var(--sp-1) 0;
  font-size: 14px;
  color: var(--c-text-soft);
  transition: color var(--t-fast);
  user-select: none;
}
.check:hover { color: var(--c-text); }
.check input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.check-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  flex-shrink: 0;
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-card);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.check-box svg {
  width: 12px; height: 12px;
  stroke: var(--c-yellow-ink);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.check input:checked + .check-box {
  background: var(--c-yellow);
  border-color: var(--c-yellow-deep);
}
.check input:checked + .check-box svg { opacity: 1; transform: scale(1); }
.check input:focus-visible + .check-box {
  outline: 2px solid var(--c-yellow-deep);
  outline-offset: 2px;
}
.check-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--c-text-mute);
}

/* Switch */
.switch {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  font-size: 14px;
  color: var(--c-text-soft);
  user-select: none;
}
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track {
  width: 40px; height: 22px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--c-surface-3);
  border: 1px solid var(--c-border-strong);
  position: relative;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.switch-track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--c-text-soft);
  transition: transform var(--t-fast), background var(--t-fast);
}
.switch input:checked + .switch-track {
  background: var(--c-yellow);
  border-color: var(--c-yellow-deep);
}
.switch input:checked + .switch-track::after {
  transform: translateX(18px);
  background: var(--c-yellow-ink);
}
.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--c-yellow-deep);
  outline-offset: 2px;
}

/* Rango doble de precio */
.range-dual {
  position: relative;
  height: 24px;
  margin-top: var(--sp-2);
}
.range-dual input[type='range'] {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  appearance: none;
  background: transparent;
  pointer-events: none;
  z-index: 2;
}
.range-dual input[type='range']::-webkit-slider-thumb {
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 0;
  background: var(--c-yellow);
  border: 2px solid var(--c-ink);
  cursor: grab;
  pointer-events: auto;
  transition: transform var(--t-fast);
}
.range-dual input[type='range']::-webkit-slider-thumb:hover { transform: scale(1.12); }
.range-dual input[type='range']::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 0;
  background: var(--c-yellow);
  border: 2px solid var(--c-ink);
  cursor: grab;
  pointer-events: auto;
}
.range-track {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 3px;
  transform: translateY(-50%);
  background: var(--c-border);
  overflow: hidden;
}
.range-fill {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--c-ink);
}
.range-values {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-text-soft);
}

/* Cantidad (stepper) */
.qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-card);
}
.qty button {
  width: 42px;
  display: grid;
  place-items: center;
  color: var(--c-text-soft);
  font-size: 18px;
  transition: background var(--t-fast), color var(--t-fast);
}
.qty button:hover { background: var(--c-ink); color: var(--c-yellow); }
.qty input {
  width: 52px;
  text-align: center;
  background: transparent;
  border: none;
  border-inline: 1px solid var(--c-border);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-weight: 500;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.qty input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--c-yellow-deep); }
.qty-sm button { width: 34px; height: 34px; font-size: 15px; }
.qty-sm input { width: 40px; font-size: 13px; }

/* --------------------------------------------------------------------------
   7. HEADER (tinta)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-card);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow-xs);
}

/* Hueco reservado para la cabecera, que la pinta app.js.
   La cabecera esta en flujo (sticky, no fixed), asi que al inyectarse empujaba
   la pagina entera hacia abajo: el visitante veia el hero y, al llegar el JS,
   todo daba un salto de mas de 100 px. Eso es CLS puro, y en la portada ocurre
   siempre porque los <script> van al final del body.
   Las tres alturas estan MEDIDAS en Chrome sobre la cabecera ya montada, no
   deducidas de las variables: el <nav> cambia de una linea a dos segun el ancho
   y las cuentas a mano no salian. Si se toca el contenido de la cabecera hay que
   volver a medirlas (basta con leer .site-header.getBoundingClientRect().height
   en cada tramo).
     hasta 780 px  -> 116   (el nav se va a un panel lateral y no ocupa alto)
     781 a 1080 px -> 192.5 (el nav ocupa dos lineas)
     desde 1081 px -> 167.8 (el nav cabe en una) */
[data-chrome-header] { display: block; min-height: 116px; }
@media (min-width: 781px) { [data-chrome-header] { min-height: 192.5px; } }
@media (min-width: 1081px) { [data-chrome-header] { min-height: 167.8px; } }

/* Barra superior tecnica, azul de marca */
.topbar {
  background: var(--c-blue);
  border-bottom: 1px solid var(--c-blue-deep);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
  overflow: hidden;
  max-height: 40px;
  transition: max-height var(--t-med), opacity var(--t-med);
}
.site-header.is-scrolled .topbar { max-height: 0; opacity: 0; }
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: 40px;
}
.topbar-group { display: flex; align-items: center; gap: var(--sp-6); min-width: 0; }
.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
  transition: color var(--t-fast);
}
.topbar-item svg { width: 13px; height: 13px; color: var(--c-yellow); flex-shrink: 0; }
a.topbar-item:hover { color: #ffffff; }
.topbar .hide-sm { display: inline-flex; }

/* Barra principal */
.header-main {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  height: var(--header-h);
}

/* Logo de marca */
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-logo {
  height: 46px;
  width: auto;
  display: block;
  transition: transform var(--t-fast);
}
.brand:hover .brand-logo { transform: scale(1.02); }
/* En superficies oscuras (footer) el logo va sobre una placa blanca */
.footer-logo-chip {
  background: #ffffff;
  padding: 12px 18px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.footer-logo-chip .brand-logo { height: 52px; }
/* Compat: por si alguna pagina aun inyecta el wordmark textual */
.brand-top { display: none; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--c-blue);
}

/* Buscador del header */
.header-search {
  flex: 1;
  display: flex;
  max-width: 520px;
  position: relative;
}
.header-search .input {
  padding-right: 120px;
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  color: var(--c-text);
  font-size: 14px;
}
.header-search .input::placeholder { color: var(--c-text-mute); }
/* Desplegable del buscador de la cabecera. Solo tiene una fila -la pieza
   exacta, cuando lo tecleado identifica una-, asi que no necesita la maquinaria
   del autocompletado de la tienda. Cuelga del .header-search, que ya es
   position: relative. */
.header-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: 0 10px 28px rgba(16, 20, 48, 0.16);
  overflow: hidden;
}
.hsug-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 9px var(--sp-3);
  cursor: pointer;
  font-size: 14px;
  color: var(--c-text);
}
.hsug-row.is-active,
.hsug-row:hover { background: var(--c-plate); }
.hsug-row > span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hsug-row svg { width: 15px; height: 15px; color: var(--c-text-mute); flex-shrink: 0; }
.hsug-foto {
  width: 34px;
  height: 26px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 3px;
  background: var(--c-plate);
}
.hsug-precio {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  font-style: normal;
  color: var(--c-text);
}
.header-search .input:hover { border-color: var(--c-border-strong); }
.header-search .input:focus { border-color: var(--c-blue-bright); box-shadow: 0 0 0 3px rgba(75, 70, 214, 0.14); }
.header-search .btn {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  padding: 0 16px;
  font-size: 15px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
  flex-shrink: 0;
}
.header-action {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  color: var(--c-text-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color var(--t-fast);
}
.header-action svg { width: 22px; height: 22px; }
.header-action:hover { color: var(--c-blue-bright); }

.cart-badge {
  position: absolute;
  top: 0;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  background: var(--c-yellow);
  color: var(--c-yellow-ink);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  transform: scale(0);
  transition: transform var(--t-fast);
}
.cart-badge.is-visible { transform: scale(1); }
.cart-badge.bump { animation: badge-bump 400ms ease; }
@keyframes badge-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* Navegacion */
.site-nav { border-top: 1px solid var(--c-border); }
.nav-list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 13px var(--sp-4);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.nav-link svg { width: 14px; height: 14px; transition: transform var(--t-fast); }
.nav-link:hover, .nav-link.is-active {
  color: var(--c-blue);
  border-bottom-color: var(--c-blue-bright);
}
.nav-item { position: relative; }
/* El mega se ancla al contenedor del nav (no al item) para no salirse por
   la izquierda: el item "Recambios" queda a la izquierda y centrarlo sobre
   el desbordaba fuera de pantalla. */
.site-nav > .container { position: relative; }
.nav-item.has-mega { position: static; }
.nav-item.has-mega:hover .nav-link svg,
.nav-item.has-mega:focus-within .nav-link svg { transform: rotate(180deg); }

.nav-cta { margin-left: auto; }

/* Mega menu */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(8px);
  width: min(880px, calc(100vw - 40px));
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-blue-bright);
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med);
  z-index: 5;
}
.nav-item.has-mega:hover .mega,
.nav-item.has-mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-col-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--c-blue);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-border);
}
.mega-familias { display: flex; flex-direction: column; gap: 2px; }
.mega-familias a {
  padding: 6px var(--sp-2);
  font-size: 14px;
  color: var(--c-text-soft);
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast), padding-left var(--t-fast);
}
.mega-familias a:hover {
  color: var(--c-blue);
  background: var(--c-blue-soft);
  padding-left: var(--sp-3);
}
.mega-brands {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px var(--sp-3);
}
.mega-brands a {
  padding: 6px var(--sp-2);
  font-size: 13px;
  color: var(--c-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.mega-brands a:hover { color: var(--c-blue); background: var(--c-blue-soft); }
.mega-footer {
  grid-column: 1 / -1;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-text-mute);
}

/* Toggle movil */
.nav-toggle {
  display: none;
  padding: var(--sp-2);
  color: var(--c-text);
}
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle:hover { color: var(--c-blue-bright); }

/* --------------------------------------------------------------------------
   8. HERO DE VIDEO (home) Y CABECERAS FOTOGRAFICAS
   -------------------------------------------------------------------------- */
.vhero {
  position: relative;
  overflow: hidden;
  background: var(--c-ink);
  color: var(--c-ink-text);
  min-height: min(92vh, 880px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.vhero-media {
  position: absolute;
  inset: 0;
}
.vhero-media video,
.vhero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Oscurecido para legibilidad, mas denso abajo */
.vhero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(23, 19, 16, 0.55) 0%, rgba(23, 19, 16, 0.35) 40%, rgba(23, 19, 16, 0.86) 100%);
}
.vhero .container { position: relative; z-index: 2; }

.vhero-top {
  padding-top: var(--sp-16);
}
.vhero-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-6);
}
.vhero-kicker .tag-yellow {
  background: var(--c-yellow);
  color: var(--c-yellow-ink);
  padding: 3px 8px;
  font-weight: 600;
}
.vhero h1 { max-width: 1080px; }
.vhero-sub {
  max-width: 560px;
  margin-top: var(--sp-6);
  font-size: 17px;
  color: var(--c-ink-soft);
}

/* Franja de datos mono al pie del hero */
.vhero-data {
  position: relative;
  z-index: 2;
  margin-top: var(--sp-12);
  border-top: 1px solid var(--c-ink-line);
  background: rgba(23, 19, 16, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.vhero-data-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.vhero-datum {
  padding: var(--sp-5) var(--sp-5) var(--sp-6) 0;
  border-right: 1px solid var(--c-ink-line);
}
.vhero-datum:last-child { border-right: none; }
.vhero-datum + .vhero-datum { padding-left: var(--sp-5); }
.vhero-datum i {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  margin-bottom: var(--sp-2);
}
.vhero-datum b {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: var(--fw-display);
  line-height: 1;
  color: var(--c-ink-text);
}
.vhero-datum span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--c-ink-soft);
}

/* Hero legado (landings tasaciones, bajas, nosotros) y cabecera de pagina.
   Foto por pagina via --ph-img, tinta plana si no hay foto. */
.hero,
.page-head {
  position: relative;
  overflow: hidden;
  /* `overflow: hidden` recorta el desplegable del buscador, que cuelga por
     debajo del hero: la fila de la pieza salia cortada por la mitad. La clase
     de abajo lo libera solo donde hay buscador. */
  /* Navy profundo con brillo sutil arriba. El overlay oscuro
     solo aplica a paginas con foto (.page-hero), ver mas abajo. */
  background:
    radial-gradient(760px 300px at 50% 0%, rgba(75, 70, 214, 0.16), transparent 62%),
    linear-gradient(180deg, #0d1030 0%, #080a1e 100%);
  color: var(--c-ink-text);
  padding-block: var(--sp-10) var(--sp-10);
}
/* Cabecera que lleva buscador dentro (la tienda). El fondo no necesita el
   recorte: la foto va con background-size: cover y el velo oscuro es un
   ::before con inset: 0, asi que ninguno de los dos se sale del elemento.
   Lo unico que colgaba por fuera era el desplegable, y es lo que se quiere. */
.page-head--buscador {
  overflow: visible;
  /* Y ademas hay que elevar la CABECERA ENTERA, no el desplegable. .page-head
     tiene `isolation: isolate`, o sea que es un contexto de apilamiento propio:
     el z-index: 30 de la lista solo compite ahi dentro y no la saca por encima
     de .brand-strip, que viene despues en el documento. El sintoma era que los
     logos de las marcas se veian ATRAVESANDO la fila "Buscar la referencia",
     aunque la fila si recibia el clic -el apilado del pintado y el del
     hit-testing no tienen por que coincidir-.
     20 basta para pasar por delante de lo que va detras y se queda muy por
     debajo del 100 de la cabecera fija, que debe seguir tapando al hero. */
  z-index: 20;
}
/* La foto llega por background-image inline en cada pagina */
.page-hero,
.hero {
  background-size: cover;
  background-position: center;
}
.hero::before,
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 19, 16, 0.9) 0%, rgba(23, 19, 16, 0.68) 55%, rgba(23, 19, 16, 0.42) 100%);
}
.page-hero { padding-block: var(--sp-24) var(--sp-16); }
.hero { padding-block: var(--sp-24) var(--sp-16); }
.hero .container,
.page-head .container { position: relative; z-index: 1; }

.page-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: var(--fw-display);
  text-transform: uppercase;
  line-height: 1.05;
  margin-top: var(--sp-2);
  max-width: 900px;
}
/* En paginas con foto (hero) el titulo puede ser algo mayor */
.page-hero .page-title {
  font-size: clamp(34px, 4.8vw, 60px);
  line-height: 1;
}
/* Variante compacta (tienda): misma foto y jerarquia, bastante menos altura */
.page-hero--compact { padding-block: var(--sp-10) var(--sp-8); }
.page-hero--compact .page-title {
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.05;
}

/* Badges de datos bajo el titulo del hero (sustituyen a .page-head-note) */
.page-head-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.page-head-badges .badge {
  background: transparent;
  color: var(--c-ink-text);
  border-color: var(--c-ink-line-strong);
}
.page-head-badges .badge-yellow {
  background: var(--c-yellow);
  color: var(--c-yellow-ink);
  border-color: var(--c-yellow);
}

/* Nota tecnica de cabecera (mono, esquina) */
.page-head-note {
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

/* Cabecera compacta de paginas de utilidad (cuenta, carrito, checkout, legales).
   Sin banda de tinta: titulo en el flujo sobre papel, hairline inferior.
   Las paginas con foto siguen usando .page-head.page-hero. */
.util-head {
  background: linear-gradient(135deg, var(--c-ink-2) 0%, var(--c-ink) 70%);
  border-bottom: 1px solid var(--c-ink-3);
}
.util-head .container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  column-gap: var(--sp-4);
  row-gap: 2px;
  padding-block: var(--sp-5);
}
.util-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--c-ink-text);
}
.util-title::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 4px;
  background: var(--c-yellow);
  margin-right: 12px;
  vertical-align: 0.22em;
}
.util-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-6);
}
.hero-kicker .dot {
  width: 9px; height: 9px;
  background: var(--c-yellow);
}
.hero h1 { max-width: 900px; }
.hero h1 .accent { color: var(--c-yellow); }
.hero-sub {
  max-width: 620px;
  margin-top: var(--sp-5);
  font-size: 17px;
  color: var(--c-ink-soft);
}

/* Buscador de piezas del hero: ficha de papel sobre la foto */
.finder {
  margin-top: var(--sp-10);
  background: var(--c-card);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--c-yellow);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
  max-width: 1040px;
}
.finder-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--c-text-soft);
  margin-bottom: var(--sp-4);
}
.finder-title svg { width: 16px; height: 16px; color: var(--c-yellow-deep); }
.finder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 120px 1.5fr auto;
  gap: var(--sp-3);
}
.finder .btn { height: 100%; min-height: 47px; }
.finder-meta {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--c-text-mute);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
}
.finder-meta span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.finder-meta svg { width: 13px; height: 13px; color: var(--c-success); }

/* Datos del hero de landings (sobre foto) */
.hero-stats {
  margin-top: var(--sp-12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--c-ink-line);
  border-bottom: 1px solid var(--c-ink-line);
}
.hero-stat {
  padding: var(--sp-5) var(--sp-5) var(--sp-5) 0;
  border-right: 1px solid var(--c-ink-line);
}
.hero-stat + .hero-stat { padding-left: var(--sp-5); }
.hero-stat:last-child { border-right: none; }
.hero-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: var(--fw-display);
  line-height: 1;
  color: var(--c-yellow);
}
.hero-stat span {
  display: block;
  margin-top: var(--sp-1);
  font-size: 12.5px;
  color: var(--c-ink-soft);
}

/* Botones secundarios sobre foto o tinta */
.hero .btn-secondary,
.page-head .btn-secondary,
.section-ink .btn-secondary,
.photo-band .btn-secondary {
  color: var(--c-ink-text);
  border-color: var(--c-ink-line-strong);
}
.hero .btn-secondary:hover,
.page-head .btn-secondary:hover,
.section-ink .btn-secondary:hover,
.photo-band .btn-secondary:hover {
  background: var(--c-ink-text);
  border-color: var(--c-ink-text);
  color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   9. MARQUEE DE MARCAS
   -------------------------------------------------------------------------- */
.brand-marquee {
  overflow: hidden;
  background: var(--c-yellow);
  color: var(--c-yellow-ink);
  border-block: 1px solid var(--c-ink);
  padding-block: var(--sp-3);
  user-select: none;
}
.brand-marquee.on-ink {
  background: var(--c-ink);
  color: var(--c-ink-text);
  border-block: 1px solid var(--c-ink-line);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee-track span::after {
  content: '';
  width: 8px;
  height: 8px;
  background: currentColor;
  opacity: 0.55;
  transform: rotate(45deg);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   10. BANDAS FOTOGRAFICAS FULL BLEED
   -------------------------------------------------------------------------- */
.photo-band {
  position: relative;
  overflow: hidden;
  background-color: var(--c-ink);
  background-size: cover;
  background-position: center;
  color: var(--c-ink-text);
}
.photo-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 19, 16, 0.66), rgba(23, 19, 16, 0.5) 45%, rgba(23, 19, 16, 0.8));
}
.photo-band > .container { position: relative; z-index: 1; }
.photo-band-tall { padding-block: clamp(120px, 18vw, 240px); }

/* Cifras grandes sobre la foto */
.band-figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8);
  align-items: end;
}
.band-figure { border-left: 2px solid var(--c-yellow); padding-left: var(--sp-4); }
.band-figure b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(44px, 5.4vw, 84px);
  font-weight: var(--fw-display);
  line-height: 0.95;
}
.band-figure i {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-top: var(--sp-2);
}

/* --------------------------------------------------------------------------
   11. CARDS DE PRODUCTO (ficha de recambio)
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: var(--sp-5);
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-card-face);
  border: 1px solid var(--c-border);
  overflow: hidden;
  transition: border-color var(--t-med), box-shadow var(--t-med);
}
.product-card:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-md);
}

/* Foto de pieza en plato uniforme: fondo claro fijo, pieza entera y centrada.
   Aqui habia un `mix-blend-mode: multiply` para fundir los fondos blancos de
   las fotos con el plato. No hacia NADA: el plato es `--c-plate: #ffffff` y no
   hay tema oscuro en toda la hoja, y multiplicar por blanco deja el color tal
   cual. A cambio obligaba al navegador a sacar cada foto a su propia capa de
   composicion, en una rejilla de hasta 24. Si algun dia el plato deja de ser
   blanco, habra que volver a mirarlo. */
.product-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--c-plate);
  overflow: hidden;
}
.product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--sp-4);
  transition: transform var(--t-slow);
}
.product-card:hover .product-media img { transform: scale(1.045); }

.product-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  flex: 1;
  border-top: 2px solid var(--c-ink);
}
.product-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 20px;
}
.product-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-brand-logo {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  object-fit: contain;
  opacity: 0.8;
}
.product-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.product-stock i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.product-stock.is-in { color: var(--c-success); }
.product-stock.is-out { color: var(--c-danger); }
.product-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--c-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  min-height: 2.24em;
}
.product-card a.product-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}
.product-model {
  font-size: 13px;
  color: var(--c-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--c-text-mute);
}
.product-meta span { display: inline-flex; align-items: center; gap: 4px; }
.product-meta svg { width: 12px; height: 12px; }
.product-meta .product-ref {
  color: var(--c-text-soft);
  font-weight: 500;
  letter-spacing: 0.08em;
}

.product-foot {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.product-price {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1;
}
.product-price small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  color: var(--c-text-mute);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.product-add {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  padding: 0 var(--sp-4);
  background: var(--c-ink);
  color: var(--c-ink-text);
  border: 1px solid var(--c-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.product-add svg { width: 18px; height: 18px; flex-shrink: 0; }
.product-add:hover {
  background: var(--c-yellow);
  border-color: var(--c-yellow);
  color: var(--c-yellow-ink);
}
.product-add:active { transform: scale(0.96); }

/* --------------------------------------------------------------------------
   12. BADGES Y CHIPS (sello de almacen)
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  border: 1px solid currentColor;
  background: rgba(247, 243, 234, 0.92);
}
.badge svg { width: 11px; height: 11px; }
.badge-stock { color: var(--c-success); }
.badge-out { color: var(--c-danger); }
.badge-yellow { background: var(--c-yellow); color: var(--c-yellow-ink); border-color: var(--c-yellow); }
.badge-loc { color: var(--c-info); }
.badge-dark { background: rgba(23, 19, 16, 0.85); color: var(--c-ink-text); border-color: transparent; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 12px;
  background: var(--c-card-face);
  border: 1px solid var(--c-border-strong);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-text-soft);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.chip:hover { border-color: var(--c-ink); color: var(--c-text); }
.chip svg { width: 13px; height: 13px; }
.chip-x {
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  transition: color var(--t-fast);
}
.chip-x:hover { color: var(--c-danger); }

/* Fila de confianza */
.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--c-border);
  background: var(--c-card);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-right: 1px solid var(--c-border);
}
.trust-item:last-child { border-right: none; }
.trust-item svg {
  width: 24px; height: 24px;
  color: var(--c-yellow-deep);
  flex-shrink: 0;
}
.trust-item b { display: block; font-size: 13.5px; font-weight: 600; color: var(--c-text); }
.trust-item span { font-size: 12px; color: var(--c-text-mute); }

/* --------------------------------------------------------------------------
   13. FAMILIAS (foto) Y MARCAS
   -------------------------------------------------------------------------- */
/* Rejilla asimetrica: la primera familia manda */
.familia-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: var(--sp-3);
}
.familia-grid .familia-card:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.familia-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-5);
  background: var(--c-ink-2);
  color: var(--c-ink-text);
  overflow: hidden;
  isolation: isolate;
}
.familia-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) contrast(1.05);
  transition: transform var(--t-slow), filter var(--t-med);
}
.familia-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(23, 19, 16, 0.15) 30%, rgba(23, 19, 16, 0.82));
  transition: background var(--t-med);
}
.familia-card:hover img { transform: scale(1.05); filter: saturate(1) contrast(1.05); }
.familia-icon { display: none; }
.familia-name {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
}
.familia-grid .familia-card:first-child .familia-name { font-size: clamp(30px, 3.4vw, 44px); }
.familia-count {
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.familia-card::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--c-yellow);
  z-index: 1;
  transition: width var(--t-med);
}
.familia-card:hover::before { width: 100%; }

/* Marcas: listado tecnico con hairlines */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--c-border);
  border-left: 1px solid var(--c-border);
}
.brand-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-3);
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  text-align: center;
  position: relative;
  isolation: isolate;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-med);
}
.brand-tile .brand-logo {
  height: 46px;
  width: auto;
  max-width: 78%;
  object-fit: contain;
  /* Muro de marcas: gris sobrio en reposo, color de marca al enfocar (da firmeza sin recargar) */
  filter: grayscale(1) opacity(0.55);
  transition: filter var(--t-med), transform var(--t-med);
}
.brand-tile .brand-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  transition: color var(--t-fast);
}
.brand-tile:hover,
.brand-tile:focus-visible {
  background: var(--c-surface);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  z-index: 2;
}
.brand-tile:hover .brand-logo,
.brand-tile:focus-visible .brand-logo {
  filter: grayscale(0) opacity(1);
  transform: scale(1.05);
}
.brand-tile:hover .brand-name,
.brand-tile:focus-visible .brand-name {
  color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   14. SERVICIOS, POR QUE, CTA
   -------------------------------------------------------------------------- */
/* Servicios sobre foto (home): asimetrico 2 grandes + 2 menores */
.services-photo {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 240px;
  gap: var(--sp-3);
}
.service-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-6);
  overflow: hidden;
  color: var(--c-ink-text);
  isolation: isolate;
  grid-column: span 3;
}
.service-tile.is-wide { grid-column: span 3; grid-row: span 2; }
.service-tile.is-small { grid-column: span 3; }
.service-tile img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.75);
  transition: transform var(--t-slow), filter var(--t-med);
}
.service-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(23, 19, 16, 0.2) 25%, rgba(23, 19, 16, 0.88));
}
.service-tile:hover img { transform: scale(1.04); filter: saturate(1); }
.service-tile-num {
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-6);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--c-yellow);
}
.service-tile h3 {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.95;
}
.service-tile p {
  margin-top: var(--sp-2);
  max-width: 420px;
  font-size: 13.5px;
  color: var(--c-ink-soft);
}
.service-tile .service-link { margin-top: var(--sp-3); }

/* Card de servicio clasica (nosotros, landings) */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--c-border);
  background: var(--c-card);
}
.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-6);
  border-right: 1px solid var(--c-border);
  transition: background var(--t-med);
}
.service-card:last-child { border-right: none; }
.service-card:hover { background: var(--c-paper-2); }
.service-icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border: 1px solid var(--c-border-strong);
  color: var(--c-yellow-deep);
  background: transparent;
}
.service-icon svg { width: 26px; height: 26px; }
.service-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-text);
}
.service-card p { font-size: 14px; color: var(--c-text-soft); flex: 1; }
.service-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-yellow-deep);
  transition: gap var(--t-fast), color var(--t-fast);
}
.service-tile .service-link { color: var(--c-yellow); }
.service-link svg { width: 15px; height: 15px; }
.service-link:hover { gap: var(--sp-3); }

/* Por que El Rubio */
.why-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}
.why-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--c-border);
  background: var(--c-card);
}
.why-stat {
  padding: var(--sp-6);
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.why-stat:nth-child(2n) { border-right: none; }
.why-stat:nth-last-child(-n+2) { border-bottom: none; }
.why-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: var(--fw-display);
  color: var(--c-text);
  line-height: 1;
}
.why-stat span {
  display: block;
  margin-top: var(--sp-2);
  font-size: 13.5px;
  color: var(--c-text-soft);
}
.why-list { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-6); }
.why-item { display: flex; gap: var(--sp-4); }
.why-item svg {
  width: 22px; height: 22px;
  color: var(--c-yellow-deep);
  flex-shrink: 0;
  margin-top: 2px;
}
.why-item b { display: block; font-size: 15px; color: var(--c-text); }
.why-item p { font-size: 14px; color: var(--c-text-soft); }

/* Banda CTA amarilla, full bleed, sin florituras */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--c-yellow);
  border-block: 2px solid var(--c-ink);
  border-radius: 0;
  padding: var(--sp-16) var(--sp-10);
  color: var(--c-yellow-ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 14px;
  background: repeating-linear-gradient(
    -45deg,
    var(--c-ink) 0 14px,
    transparent 14px 28px
  );
  opacity: 0.9;
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.95;
  max-width: 640px;
}
.cta-band p { margin-top: var(--sp-3); font-size: 16px; max-width: 540px; opacity: 0.8; }
.cta-band .btn {
  background: var(--c-ink);
  color: var(--c-ink-text);
  border-color: var(--c-ink);
}
.cta-band .btn:hover {
  background: transparent;
  color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   15. NOTICIAS
   -------------------------------------------------------------------------- */
/* Editorial: primera noticia destacada, resto en filas con hairline */
.news-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--sp-10);
  align-items: start;
}
.news-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--c-border);
  transition: background var(--t-fast);
}
.news-grid .news-card:first-child {
  grid-row: 1 / span 3;
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--c-yellow);
  background: var(--c-card);
  padding: var(--sp-8);
}
.news-grid .news-card:first-child h3 { font-size: clamp(28px, 2.8vw, 42px); }
.news-grid .news-card:last-child { border-bottom: none; }
.news-tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-yellow-deep);
}
.news-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--c-text);
}
.news-card h3 a:hover { color: var(--c-yellow-deep); }
.news-card p { font-size: 14px; color: var(--c-text-soft); flex: 1; }
.news-date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--c-text-mute);
}

/* Blog: rejilla de cards clasica */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.blog-grid .news-card {
  border: 1px solid var(--c-border);
  background: var(--c-card);
  padding: var(--sp-6);
  transition: border-color var(--t-med), box-shadow var(--t-med);
}
.blog-grid .news-card:hover { border-color: var(--c-ink); box-shadow: var(--shadow-md); }
.blog-grid .news-card:first-child { grid-row: auto; border-top: 1px solid var(--c-border); padding: var(--sp-6); }
.blog-grid .news-card:first-child h3 { font-size: 24px; }

/* --------------------------------------------------------------------------
   16. TIENDA (catalogo)
   -------------------------------------------------------------------------- */
.shop-layout {
  display: grid;
  grid-template-columns: 272px 1fr;
  gap: var(--sp-10);
  align-items: start;
  padding-block: var(--sp-10) var(--sp-24);
}

/* Sidebar de filtros */
.filters {
  position: sticky;
  top: calc(var(--chrome-h, var(--header-h)) + var(--sp-4));
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-height: calc(100vh - var(--header-h) - var(--sp-8));
  overflow-y: auto;
  padding-right: var(--sp-2);
  scrollbar-width: thin;
  scrollbar-color: var(--c-border-strong) transparent;
}
.filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--c-ink);
  margin-bottom: var(--sp-2);
}
.filters-head h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.filter-group {
  border-bottom: 1px solid var(--c-border);
  padding-block: var(--sp-2);
}
.filter-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text);
  transition: color var(--t-fast);
}
.filter-toggle:hover { color: var(--c-yellow-deep); }
.filter-toggle svg {
  width: 15px; height: 15px;
  color: var(--c-text-mute);
  transition: transform var(--t-med);
}
.filter-group.is-open .filter-toggle svg { transform: rotate(180deg); }
.filter-body {
  display: none;
  padding: var(--sp-1) 0 var(--sp-3);
}
.filter-group.is-open .filter-body { display: block; }
.filter-scroll {
  max-height: 218px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-border-strong) transparent;
  padding-right: var(--sp-1);
}
.filter-search { margin-bottom: var(--sp-2); }
.filter-search .input { padding: 8px 12px; font-size: 13px; }

/* Barra de herramientas del catalogo */
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-card-face);
  border: 1px solid var(--c-border);
  margin-bottom: var(--sp-5);
}
.shop-count { font-family: var(--font-mono); font-size: 12px; color: var(--c-text-soft); }
.shop-count b { color: var(--c-text); font-weight: 600; }

/* Franja de confianza bajo la toolbar de la tienda */
.shop-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-5);
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-soft);
}
.shop-trust li { display: inline-flex; align-items: center; gap: 6px; }
.shop-trust svg { width: 13px; height: 13px; color: var(--c-yellow-deep); flex-shrink: 0; }
.shop-trust a { color: inherit; text-decoration: none; }
.shop-trust a:hover { color: var(--c-text); text-decoration: underline; }
.shop-order {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-mute);
}
.shop-order .select {
  width: auto;
  padding: 8px 36px 8px 12px;
  font-size: 13.5px;
}
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.active-filters-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  margin-right: var(--sp-1);
}
.chip-clear {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--c-text-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px var(--sp-2);
  transition: color var(--t-fast);
}
.chip-clear:hover { color: var(--c-danger); }
.filters-open-btn { display: none; }
/* El boton "Ver resultados" solo tiene sentido en el drawer movil */
#filters-apply-mobile { display: none; }
.filters-close { display: none; }

.load-more-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-10);
}
.load-progress {
  width: 200px;
  height: 2px;
  background: var(--c-border);
  overflow: hidden;
}
.load-progress span {
  display: block;
  height: 100%;
  background: var(--c-ink);
  transition: width var(--t-med);
}
.load-more-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}

/* --------------------------------------------------------------------------
   17. FICHA DE PRODUCTO
   -------------------------------------------------------------------------- */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-5);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-text-mute);
}
.breadcrumbs a { color: var(--c-text-soft); transition: color var(--t-fast); }
.breadcrumbs a:hover { color: var(--c-yellow-deep); }
.breadcrumbs svg { width: 12px; height: 12px; color: var(--c-text-mute); }
.breadcrumbs .current {
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-12);
  align-items: start;
  padding-bottom: var(--sp-20);
}

/* Galeria */
.gallery { position: sticky; top: calc(var(--chrome-h, var(--header-h)) + var(--sp-5)); }
.gallery-main {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--c-plate);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--sp-8);
  mix-blend-mode: multiply;
  transition: opacity var(--t-med);
}
.gallery-main img.is-fading { opacity: 0; }
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.gallery-thumb {
  aspect-ratio: 4 / 3;
  /* Ancla del `position:absolute` de la foto en baja resolucion: sin esto la
     miniatura se colocaba respecto a la galeria y salia fuera del boton. */
  position: relative;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-plate);
  padding: 0;
  transition: border-color var(--t-fast), opacity var(--t-fast);
  opacity: 0.6;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; padding: var(--sp-2); mix-blend-mode: multiply; }
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.is-active { border-color: var(--c-ink); border-bottom: 3px solid var(--c-yellow); opacity: 1; }
/* Abre el resto de la galeria cuando la pieza trae mas fotos de las que caben en
   dos filas. Mismo tono que "ver todos" de las compatibilidades: es el mismo
   gesto y no debe competir con los botones de compra. */
.gallery-more {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gallery-more:hover { color: var(--c-yellow-deep); }

/* Panel de compra */
.pdp-brand-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.pdp-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.96;
  /* El nombre lo pone el ERP y hay palabras que no caben en la columna a 46 px:
     ELECTROVENTILADOR es mas ancha que su hueco (pieza 163568). Sin esto la
     palabra no se parte, la columna se ensancha y el titulo acaba por debajo de
     la caja de compra, que lo tapa. `hyphens` lo parte con guion donde el
     navegador sabe hacerlo, y `overflow-wrap` es la red por debajo: no todos
     hifenan las palabras en mayusculas. */
  overflow-wrap: break-word;
  hyphens: auto;
}
.pdp-ref {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--c-text-mute);
}
.pdp-ref b { color: var(--c-text); font-weight: 600; }

.pdp-price-box {
  margin-top: var(--sp-6);
  padding: var(--sp-6);
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--c-yellow);
}
.pdp-price {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-text);
}
.pdp-price-note {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}
.pdp-buy-row {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.pdp-buy-row .btn { flex: 1; }

/* Ficha tecnica */
.pdp-specs { margin-top: var(--sp-6); }
.pdp-specs dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  border: 1px solid var(--c-border);
  background: var(--c-card);
  overflow: hidden;
}
.pdp-specs dt, .pdp-specs dd {
  padding: var(--sp-3) var(--sp-4);
  font-size: 14px;
  border-bottom: 1px solid var(--c-border);
}
.pdp-specs dt {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--c-text-mute);
  background: var(--c-paper-2);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  display: flex;
  align-items: center;
  min-width: 138px;
}
.pdp-specs dd { color: var(--c-text); }
.pdp-specs dt:nth-last-of-type(1), .pdp-specs dd:last-of-type { border-bottom: none; }

.pdp-note {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-left: 3px solid var(--c-yellow);
  background: var(--c-card);
  font-size: 13.5px;
  color: var(--c-text-soft);
}

.pdp-trust {
  margin-top: var(--sp-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--c-border);
  background: var(--c-card);
}
.pdp-trust .trust-item {
  padding: var(--sp-3);
  border: none;
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.pdp-trust .trust-item:nth-child(2n) { border-right: none; }
.pdp-trust .trust-item:nth-last-child(-n+2) { border-bottom: none; }

/* Estado vacio */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-24) var(--sp-5);
  text-align: center;
}
.empty-state svg {
  width: 60px; height: 60px;
  color: var(--c-text-mute);
}
.empty-state h2 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  text-transform: uppercase;
}
.empty-state p { color: var(--c-text-soft); max-width: 440px; }

/* --------------------------------------------------------------------------
   18. DRAWER DE CARRITO (tinta)
   -------------------------------------------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 19, 16, 0.66);
  z-index: calc(var(--z-drawer) - 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-med), visibility var(--t-med);
}
.overlay.is-visible { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(430px, 100vw);
  background: var(--c-ink);
  color: var(--c-ink-text);
  border-left: 3px solid var(--c-yellow);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  transition: transform var(--t-slow);
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--c-ink-line);
}
.cart-drawer-head h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.cart-drawer-head h2 span {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-yellow);
}

.cart-lines {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  scrollbar-width: thin;
  scrollbar-color: var(--c-ink-line-strong) transparent;
}
.cart-line {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-ink-line);
  animation: line-in 300ms ease both;
}
@keyframes line-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
.cart-line-img {
  width: 76px; height: 60px;
  overflow: hidden;
  background: var(--c-plate);
  border: 1px solid var(--c-ink-line);
}
.cart-line-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  mix-blend-mode: multiply;
}
.cart-line-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-ink-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-line-name:hover { color: var(--c-yellow); }
.cart-line-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--c-ink-mute);
  margin-top: 3px;
}
.cart-line-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-2);
}
.cart-line-price {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--c-ink-text);
}
.cart-line-remove {
  color: var(--c-ink-mute);
  padding: var(--sp-1);
  transition: color var(--t-fast);
}
.cart-line-remove svg { width: 16px; height: 16px; }
.cart-line-remove:hover { color: #e0705f; }

/* qty dentro del drawer, sobre tinta */
.cart-drawer .qty {
  background: var(--c-ink-2);
  border-color: var(--c-ink-line-strong);
}
.cart-drawer .qty button { color: var(--c-ink-soft); }
.cart-drawer .qty button:hover { background: var(--c-ink-3); color: var(--c-yellow); }
.cart-drawer .qty input {
  color: var(--c-ink-text);
  border-inline-color: var(--c-ink-line);
}

.cart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  text-align: center;
  padding: var(--sp-8);
  color: var(--c-ink-mute);
}
.cart-empty svg { width: 52px; height: 52px; }
.cart-empty p { font-size: 14px; max-width: 280px; color: var(--c-ink-soft); }

.cart-drawer-foot {
  padding: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--c-ink-line);
  background: var(--c-ink-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--c-ink-soft);
}
.cart-total-row b {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--c-yellow);
}
.cart-drawer-foot .fine {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--c-ink-mute);
  text-align: center;
}
.cart-drawer .btn-secondary {
  border-color: var(--c-ink-line-strong);
  color: var(--c-ink-text);
}
.cart-drawer .btn-secondary:hover {
  border-color: var(--c-ink-text);
  background: transparent;
  color: var(--c-yellow);
}

/* --------------------------------------------------------------------------
   19. TOASTS
   -------------------------------------------------------------------------- */
.toast-stack {
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  pointer-events: none;
  width: min(420px, calc(100vw - 32px));
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-ink);
  color: var(--c-ink-text);
  border: 1px solid var(--c-ink-3);
  border-left: 4px solid var(--c-yellow);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  pointer-events: auto;
  animation: toast-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.toast.is-leaving { animation: toast-out 240ms ease both; }
.toast svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--c-yellow); }
.toast-success { border-left-color: #4caf7d; }
.toast-success svg { color: #4caf7d; }
.toast-error { border-left-color: #e0705f; }
.toast-error svg { color: #e0705f; }
.toast a { color: var(--c-yellow); font-weight: 600; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  from { opacity: 1; }
  to { opacity: 0; transform: translateY(8px); }
}

/* --------------------------------------------------------------------------
   20. WHATSAPP FLOTANTE
   -------------------------------------------------------------------------- */
/* Tapaba cosas con las que hay que interactuar: el desplegable ORDENAR nada mas
   cargar el catalogo en movil, y enlaces del pie. Se le reserva sitio al final de
   la pagina (ver .site-footer) y se sube un poco en pantallas pequenyas. */
.wa-fab {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: calc(var(--z-header) - 1);
  display: flex;
  align-items: center;
  padding: 13px 13px 11px;
  border-radius: 0;
  background: var(--c-ink);
  color: var(--c-ink-text);
  border: 1px solid var(--c-ink-3);
  border-bottom: 3px solid var(--c-yellow);
  box-shadow: var(--shadow-md);
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.wa-fab svg { width: 22px; height: 22px; }
.wa-fab span {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: max-width var(--t-med), margin var(--t-med);
}
.wa-fab:hover {
  transform: translateY(-2px);
  background: var(--c-yellow);
  color: var(--c-yellow-ink);
}
/* El texto sale al pasar por encima; su separacion vive aqui y no en un gap
   del contenedor, que con el texto plegado descentraba el icono. */
.wa-fab:hover span { max-width: 140px; margin-left: var(--sp-2); }

/* --------------------------------------------------------------------------
   21. FOOTER (tinta)
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: var(--sp-20);
  background: var(--c-ink);
  color: var(--c-ink-text);
}
/* Cuando el marquee precede al footer, pega el bloque */
.brand-marquee + .site-footer { margin-top: 0; }

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--sp-10);
  padding-block: var(--sp-20) var(--sp-12);
}
.footer-brand p {
  margin-top: var(--sp-4);
  font-size: 14px;
  color: var(--c-ink-soft);
  max-width: 310px;
}
.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.site-footer .badge { background: transparent; }
.site-footer .badge-stock { color: #4caf7d; }
.site-footer .badge-loc { color: #7ea8c9; }
.site-footer .badge-yellow { background: var(--c-yellow); color: var(--c-yellow-ink); }

.footer-col h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-yellow);
  margin-bottom: var(--sp-5);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-col a {
  font-size: 14px;
  color: var(--c-ink-soft);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.footer-col a:hover { color: var(--c-ink-text); padding-left: var(--sp-1); }

.footer-contact li {
  display: flex;
  gap: var(--sp-3);
  font-size: 14px;
  color: var(--c-ink-soft);
  line-height: 1.5;
}
.footer-contact svg {
  width: 16px; height: 16px;
  color: var(--c-yellow);
  flex-shrink: 0;
  margin-top: 3px;
}
.footer-contact a:hover { color: var(--c-ink-text); }

.footer-social {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.footer-social a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--c-ink-line-strong);
  color: var(--c-ink-soft);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.footer-social a:hover {
  color: var(--c-yellow);
  border-color: var(--c-yellow);
}
.footer-social svg { width: 17px; height: 17px; }

/* Wordmark gigante de cierre */
.footer-mark {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(52px, 10.5vw, 168px);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-ink-line-strong);
  user-select: none;
  padding-top: var(--sp-8);
  white-space: nowrap;
  overflow: hidden;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--c-ink-line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--c-ink-mute);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer-bottom a { transition: color var(--t-fast); }
.footer-bottom a:hover { color: var(--c-yellow); }

/* Pie minimo para las paginas de dentro (cuenta/carrito/checkout): discreto,
   sin marquee ni columnas de marketing. Solo copyright + enlaces legales. */
.site-footer--min { margin-top: var(--sp-16); }
.site-footer--min .footer-bottom { border-top: none; }

/* --------------------------------------------------------------------------
   22. SKELETONS Y ANIMACIONES DE ENTRADA
   -------------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(100deg, var(--c-surface-2) 40%, var(--c-card) 50%, var(--c-surface-2) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
  border: 1px solid var(--c-border);
}
/* Alto de una tarjeta de producto de verdad, MEDIDO en Chrome con el catalogo
   ya pintado (antes ponia 396 px fijos, que no era el alto de nada: la seccion
   se estiraba al llegar los datos). Cambia por breakpoint porque cambia el
   ancho de columna, y con el la altura de la foto y las lineas de texto:
     hasta 400 px  -> 1 columna,  tarjeta de 525.5
     401 a 640 px  -> 2 columnas
     desde 641 px  -> auto-fill,  tarjeta de 508.7 en escritorio
   Si se toca la tarjeta hay que volver a medirlo. */
.skeleton-card { height: 509px; }
@media (max-width: 780px) { .skeleton-card { height: 552px; } }
@media (max-width: 400px) { .skeleton-card { height: 526px; } }
/* El primer hueco de familias ocupa 2x2, igual que la primera tarjeta real
   (.familia-grid .familia-card:first-child): sin esto la rejilla de esqueletos
   tenia otra forma que la de verdad y saltaba al rellenarse. */
.familia-grid .skeleton:first-child { grid-column: span 2; grid-row: span 2; }
@keyframes shimmer {
  from { background-position: 120% 0; }
  to { background-position: -80% 0; }
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------------------
   23. CUENTA, CARRITO, CHECKOUT, LANDINGS, CONTACTO, BLOG, LEGAL
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* Panel generico */
.panel {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  padding: var(--sp-8);
}

/* Tabs accesibles (cuenta) */
.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--c-border-strong);
  margin-bottom: var(--sp-6);
}
.tab-btn {
  padding: 11px var(--sp-3);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  transition: background var(--t-fast), color var(--t-fast);
}
.tab-btn + .tab-btn { border-left: 1px solid var(--c-border-strong); }
.tab-btn:hover { color: var(--c-text); }
.tab-btn[aria-selected='true'] { background: var(--c-ink); color: var(--c-yellow); }

/* Formularios apilados */
.form-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.form-link { font-size: 13px; color: var(--c-text-soft); text-decoration: underline; text-underline-offset: 3px; transition: color var(--t-fast); }
.form-link:hover { color: var(--c-text); }
.form-alert {
  display: none;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid rgba(178, 58, 42, 0.5);
  border-left: 4px solid var(--c-danger);
  background: rgba(178, 58, 42, 0.07);
  color: var(--c-danger);
  font-size: 14px;
}
.form-alert.is-visible { display: block; }

/* ---- Patron de formulario centrado (acceso, restablecer contrasena, pago) ----
   Estas reglas vivian DENTRO de cuenta.html, asi que cualquier otra pagina que
   reutilizara el mismo patron salia sin margenes: el titulo pegado al subtitulo,
   el campo pegado al boton y todo apelotonado. Aqui sirven a las tres. */
.auth-wrap { max-width: 480px; margin: 0 auto; }
.auth-panel { margin-bottom: var(--sp-4); }
.auth-panel h2 { margin: 0 0 4px; font-size: 22px; }
.auth-panel .auth-sub { margin: 0 0 18px; color: var(--c-text-soft); font-size: 14px; line-height: 1.5; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.form-actions .btn-block { flex: 1 1 100%; }

/* Cuenta */
.account-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--sp-8);
  align-items: start;
  padding-block: var(--sp-10) var(--sp-24);
}
.account-menu {
  position: sticky;
  top: calc(var(--chrome-h, var(--header-h)) + var(--sp-4));
  display: flex;
  flex-direction: column;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  overflow: hidden;
}
.account-menu button {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-soft);
  text-align: left;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--c-border);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.account-menu button:last-child { border-bottom: none; }
.account-menu button svg { width: 18px; height: 18px; flex-shrink: 0; }
.account-menu button:hover { color: var(--c-text); background: var(--c-paper-2); }
.account-menu button.is-active {
  color: var(--c-text);
  background: var(--c-paper-2);
  border-left-color: var(--c-yellow);
}
.account-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}
.account-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.account-card {
  padding: var(--sp-5);
  background: var(--c-paper-2);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-yellow);
}
.account-card b {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--c-text);
}
.account-card span { font-size: 13px; color: var(--c-text-soft); }
.account-stack, .orders-stack { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Pedidos */
.order-card { border: 1px solid var(--c-border); background: var(--c-card); overflow: hidden; }
.order-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-paper-2);
  border-bottom: 1px solid var(--c-border);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-text-soft);
}
.order-head b { color: var(--c-text); font-weight: 600; }
.order-head .badge { margin-left: auto; }
.order-lines { padding: var(--sp-3) var(--sp-5); display: flex; flex-direction: column; }
.order-line {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-2);
  font-size: 14px;
  color: var(--c-text-soft);
  border-bottom: 1px dashed var(--c-border);
}
.order-line:last-child { border-bottom: none; }
.order-line b { color: var(--c-text); white-space: nowrap; font-family: var(--font-mono); font-size: 13px; }
.order-total {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--c-border);
  font-size: 14px;
  color: var(--c-text-soft);
}
.order-total b {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--c-text);
}

/* Carrito y checkout */
.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--sp-10);
  align-items: start;
  padding-block: var(--sp-10) var(--sp-24);
}
.summary-box {
  position: sticky;
  top: calc(var(--chrome-h, var(--header-h)) + var(--sp-4));
  background: var(--c-card-face);
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--c-yellow);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.summary-box h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.summary-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 13px; color: var(--c-text-soft); }
.summary-row b { color: var(--c-text); font-weight: 600; }
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
}
.summary-total span { font-family: var(--font-mono); font-size: 13px; color: var(--c-text-soft); }
.summary-total b {
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--c-text);
}
.summary-fine { font-family: var(--font-mono); font-size: 11px; color: var(--c-text-mute); }
.summary-items { display: flex; flex-direction: column; }
.summary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  font-size: 13px;
  color: var(--c-text-soft);
  border-bottom: 1px dashed var(--c-border);
}
.summary-item b { color: var(--c-text); white-space: nowrap; font-family: var(--font-mono); font-size: 12.5px; margin-left: auto; }
.summary-thumb {
  width: 48px;
  height: 36px;
  flex-shrink: 0;
  background: var(--c-plate);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.summary-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
  mix-blend-mode: multiply;
}

/* Lineas del carrito en pagina: panel claro definido sobre el papel */
.cart-rows {
  display: flex;
  flex-direction: column;
  background: var(--c-card-face);
  border: 1px solid var(--c-border);
  border-radius: var(--r-asym-md);
  box-shadow: var(--shadow-xs);
  padding-inline: var(--sp-5);
}
.cart-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: center;
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--c-border);
}
.cart-row:last-child { border-bottom: none; }
.cart-row-img {
  width: 110px;
  height: 82px;
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-plate);
  display: block;
}
.cart-row-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  mix-blend-mode: multiply;
}
.cart-row-name { font-size: 14px; font-weight: 600; color: var(--c-text); line-height: 1.35; display: block; }
.cart-row-name:hover { color: var(--c-yellow-deep); }
.cart-row-meta { font-family: var(--font-mono); font-size: 11px; color: var(--c-text-mute); margin-top: var(--sp-1); }
.cart-row-unit { font-family: var(--font-mono); font-size: 12px; color: var(--c-text-soft); margin-top: var(--sp-1); }
.cart-row-actions { display: flex; align-items: center; gap: var(--sp-4); }
.cart-row-total {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
  min-width: 88px;
  text-align: right;
}

/* Checkout */
.checkout-section { margin-bottom: var(--sp-8); }
.checkout-section > h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}
.checkout-num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--c-ink);
  color: var(--c-yellow);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.pay-options { display: flex; flex-direction: column; gap: var(--sp-3); }
.pay-option {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--c-border-strong);
  background: var(--c-card);
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pay-option:hover { border-color: var(--c-text-soft); }
.pay-option.is-checked { border-color: var(--c-ink); box-shadow: 0 0 0 1px var(--c-ink); }
.pay-option .pay-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--c-plate);
  color: var(--c-text);
}
.pay-option.is-checked .pay-icono { background: var(--c-ink); color: #fff; }
.pay-texto { flex: 1; min-width: 0; }
/* "Al momento" separa de un vistazo lo que se cobra solo de lo que hay que
   confirmar a mano. Es el dato que decide para la mayoria. */
.pay-insignia {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 1px 8px;
  border-radius: 999px;
  background: #d8f0e2;
  color: #10553a;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: middle;
}
@media (max-width: 480px) {
  .pay-option .pay-icono { width: 34px; height: 34px; }
  .pay-insignia { margin-left: 0; margin-top: 4px; }
}
.pay-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pay-radio {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--c-border-strong);
  display: grid;
  place-items: center;
  transition: border-color var(--t-fast);
}
.pay-radio::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-ink);
  transform: scale(0);
  transition: transform var(--t-fast);
}
.pay-option.is-checked .pay-radio { border-color: var(--c-ink); }
.pay-option.is-checked .pay-radio::after { transform: scale(1); }
.pay-option b { display: block; font-size: 14px; color: var(--c-text); }
.pay-option p { font-size: 13px; color: var(--c-text-soft); margin-top: 2px; }
.pay-extra { display: none; margin-top: var(--sp-4); }
.pay-extra.is-visible { display: block; }

/* Confirmacion de pedido */
.confirm-box {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--sp-16) var(--sp-24);
}
.confirm-icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-inline: auto;
  border: 2px solid var(--c-success);
  color: var(--c-success);
  margin-bottom: var(--sp-6);
}
.confirm-icon svg { width: 40px; height: 40px; }
.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

/* Pasos numerados (landings) */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--c-border);
  background: var(--c-card);
}
.step-card {
  position: relative;
  padding: var(--sp-8) var(--sp-6);
  border-right: 1px solid var(--c-border);
  transition: background var(--t-med);
}
.step-card:last-child { border-right: none; }
.step-card:hover { background: var(--c-paper-2); }
.step-num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--c-yellow-ink);
  background: var(--c-yellow);
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
}
.step-card h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: var(--sp-4);
}
.step-card p { margin-top: var(--sp-2); font-size: 14px; color: var(--c-text-soft); }

/* Checklist de documentacion */
.check-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.check-list li { display: flex; gap: var(--sp-3); font-size: 15px; color: var(--c-text-soft); }
.check-list svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--c-success); margin-top: 2px; }
.check-list b { color: var(--c-text); }

/* Dropzone de imagenes */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-5);
  border: 2px dashed var(--c-border-strong);
  background: var(--c-card);
  color: var(--c-text-soft);
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.dropzone:hover, .dropzone.is-drag { border-color: var(--c-ink); background: var(--c-paper-2); }
.dropzone:focus-visible { outline: 2px solid var(--c-yellow-deep); outline-offset: 2px; }
.dropzone svg { width: 30px; height: 30px; color: var(--c-yellow-deep); }
.dropzone small { color: var(--c-text-mute); font-size: 12.5px; }
.dropzone-files { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }

/* Acordeon FAQ */
.accordion { border: 1px solid var(--c-border); background: var(--c-card); overflow: hidden; }
.acc-item { border-bottom: 1px solid var(--c-border); }
.acc-item:last-child { border-bottom: none; }
.acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
  text-align: left;
  transition: color var(--t-fast);
}
.acc-btn:hover { color: var(--c-yellow-deep); }
.acc-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--c-text-mute);
  transition: transform var(--t-med);
}
.acc-btn[aria-expanded='true'] svg { transform: rotate(180deg); }
.acc-panel {
  padding: 0 var(--sp-6) var(--sp-5);
  font-size: 14px;
  color: var(--c-text-soft);
}
.acc-panel[hidden] { display: none; }

/* Contacto */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-10);
  align-items: start;
  padding-block: var(--sp-10) var(--sp-4);
}
.contact-list { display: flex; flex-direction: column; gap: var(--sp-5); }
.contact-list li { display: flex; gap: var(--sp-4); }
.contact-list svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--c-yellow-deep); margin-top: 2px; }
.contact-list b {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  margin-bottom: 2px;
}
.contact-list a, .contact-list span, .contact-list address {
  font-size: 15px;
  color: var(--c-text-soft);
  line-height: 1.5;
}
.contact-list a { display: block; transition: color var(--t-fast); }
.contact-list a:hover { color: var(--c-text); }
/* ---- Mapa de "como llegar" -------------------------------------------
   Leaflet sobre teselas claras (CARTO Voyager, @2x en pantallas retina).
   El marco es la misma card del resto del sitio y encima flotan, en su
   propia capa, la chapa de identificacion, el aviso de zoom y los
   controles. .map-canvas lleva z-index para encerrar los z-index internos
   de Leaflet (llegan a 1000) y que no se coman a los sobrepuestos. */
.map-frame {
  position: relative;
  border: 1px solid var(--c-border);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  min-height: 320px;
  background: var(--c-surface-2);
  box-shadow: var(--shadow-sm);
  isolation: isolate;
}
.map-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--c-surface-2);
  font-family: var(--font-sans);
}
.map-canvas:focus-visible { outline: 2px solid var(--c-blue-bright); outline-offset: -3px; }

/* Chapa flotante con el nombre del desguace */
.map-tag {
  position: absolute;
  z-index: 2;
  top: var(--sp-4);
  left: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: calc(100% - var(--sp-8));
  padding: 9px var(--sp-4) 9px 9px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(16, 20, 48, 0.08);
  border-radius: var(--r-md) var(--r-md) var(--r-md) 0;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}
.map-tag-mark {
  display: grid;
  place-items: center;
  line-height: 0;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm) var(--r-sm) var(--r-sm) 0;
  background: var(--c-yellow);
  color: var(--c-ink);
}
.map-tag-mark svg { width: 19px; height: 19px; }
.map-tag-text { display: block; min-width: 0; }
.map-tag-text b {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--c-text);
}
.map-tag-text span {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}

/* Chincheta: gota amarilla con halo latiendo sobre la punta */
.map-pin {
  position: relative;
  display: block;
  width: 44px;
  height: 56px;
}
.map-pin::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 0;
  width: 30px;
  height: 30px;
  margin: 0 0 -15px -15px;
  border-radius: 50%;
  background: var(--c-yellow);
  opacity: 0.5;
  animation: map-pin-pulse 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.map-pin-body {
  fill: var(--c-yellow);
  stroke: var(--c-ink);
  stroke-width: 2.6;
  stroke-linejoin: round;
}
.map-pin-dot { fill: var(--c-ink); }
.map-pin svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 44px;
  height: 56px;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 7px 12px rgba(16, 20, 48, 0.3));
  animation: map-pin-drop 620ms cubic-bezier(0.22, 1.4, 0.36, 1) both;
}
@keyframes map-pin-pulse {
  0% { transform: scale(0.35); opacity: 0.55; }
  70% { transform: scale(2.5); opacity: 0; }
  100% { transform: scale(2.5); opacity: 0; }
}
@keyframes map-pin-drop {
  from { transform: translateY(-20px) scale(0.85); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Sin animacion, el halo se queda como cerco fijo en vez de como mancha */
@media (prefers-reduced-motion: reduce) {
  .map-pin::before { transform: scale(1); opacity: 0.3; }
}

/* Pildora de aviso: zoom con Ctrl en escritorio, desbloqueo al tocar en movil */
.map-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px 16px;
  background: rgba(16, 20, 48, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-text);
  box-shadow: var(--shadow-md);
}
.map-pill svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--c-yellow); }
.map-hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: var(--sp-6);
  transform: translate(-50%, 8px);
  max-width: calc(100% - var(--sp-8));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med), transform var(--t-med);
}
.map-hint.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Puerta tactil: en movil el mapa no roba el scroll hasta que se toca */
.map-gate {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: var(--sp-4) var(--sp-4) 46px;
  border: 0;
  background: rgba(16, 20, 48, 0.14);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--t-med);
}
.map-gate[hidden] { display: none; }
.map-gate.is-gone { opacity: 0; pointer-events: none; }

/* Respaldo si Leaflet no carga o no hay JavaScript */
.map-fallback {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6);
  text-align: center;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255, 205, 30, 0.16), transparent 60%),
    var(--c-surface-2);
}
.map-frame.is-live .map-fallback { display: none; }
.map-fallback b { font-family: var(--font-display); font-size: 19px; color: var(--c-text); }
.map-fallback span { font-size: 14px; color: var(--c-text-soft); }
.map-fallback-cta {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-yellow-deep);
  padding-bottom: 2px;
}

/* Controles de Leaflet vestidos con el sistema del sitio */
.map-canvas .leaflet-bar {
  border: 1px solid rgba(16, 20, 48, 0.08);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.map-canvas .leaflet-bar a {
  width: 34px;
  height: 34px;
  line-height: 34px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--c-border);
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  transition: background var(--t-fast), color var(--t-fast);
}
.map-canvas .leaflet-bar a:hover,
.map-canvas .leaflet-bar a:focus-visible {
  background: var(--c-yellow);
  color: var(--c-yellow-ink);
}
.map-canvas .leaflet-bar a.leaflet-disabled { background: rgba(255, 255, 255, 0.7); color: var(--c-text-mute); }
.map-canvas .leaflet-control-zoom-in { font-size: 19px; }
.map-recenter {
  margin-top: var(--sp-2) !important;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: opacity var(--t-med), transform var(--t-med);
}
.map-recenter.is-on { opacity: 1; transform: none; pointer-events: auto; }
.map-recenter a { display: grid !important; place-items: center; }
.map-recenter svg { width: 17px; height: 17px; }
.map-canvas .leaflet-control-attribution {
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--r-sm) 0 0 0;
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1.6;
  color: var(--c-text-mute);
}
.map-canvas .leaflet-control-attribution a { color: var(--c-text-soft); text-decoration: none; }
.map-canvas .leaflet-control-attribution a:hover { text-decoration: underline; }

/* Pie: como llegar y accesos directos a los navegadores */
.map-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.map-foot-note { flex: 1 1 260px; font-size: 13px; color: var(--c-text-mute); max-width: 52ch; }
.map-foot-note b { color: var(--c-text-soft); font-weight: 600; }
.map-foot-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.map-foot-actions .btn svg { width: 15px; height: 15px; }

@media (max-width: 980px) {
  .map-frame { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .map-frame { aspect-ratio: 4 / 5; min-height: 340px; }
  .map-tag { top: var(--sp-3); left: var(--sp-3); padding: 8px var(--sp-3) 8px 8px; }
  .map-tag-mark { width: 30px; height: 30px; }
  .map-tag b { font-size: 14px; }
  .map-foot { flex-direction: column; align-items: stretch; }
  .map-foot-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .map-foot-actions .btn:first-child { grid-column: 1 / -1; }
}

/* Documento legal */
.legal-doc {
  max-width: 800px;
  margin-inline: auto;
  padding-block: var(--sp-12) var(--sp-24);
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-text-soft);
}
.legal-updated {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c-text-mute);
  margin-bottom: var(--sp-8);
}
.legal-doc h2 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-text);
  margin: var(--sp-10) 0 var(--sp-3);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
}
.legal-doc h2:first-of-type { margin-top: 0; border-top: none; padding-top: 0; }
.legal-doc h3 { font-size: 16px; font-weight: 700; color: var(--c-text); margin: var(--sp-6) 0 var(--sp-2); }
.legal-doc p { margin-bottom: var(--sp-3); }
.legal-doc ul {
  list-style: none;
  margin: var(--sp-3) 0 var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.legal-doc ul li { position: relative; padding-left: var(--sp-5); }
.legal-doc ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 2px;
  background: var(--c-yellow-deep);
}
.legal-doc a { color: var(--c-text); text-decoration: underline; text-underline-offset: 3px; }
.legal-doc a:hover { color: var(--c-yellow-deep); }
/* La tabla de tarifas tiene cinco columnas y en movil la ultima quedaba fuera de
   pantalla, sin ninguna forma de alcanzarla: la pagina no desborda, asi que no
   habia scroll. Se le da su propio scroll horizontal a la tabla. */
.legal-doc table { width: 100%; border-collapse: collapse; font-size: 14px; margin: var(--sp-4) 0; }
@media (max-width: 720px) {
  .legal-doc table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 13px;
  }
  .legal-doc table th,
  .legal-doc table td { padding-inline: 10px; }
}
.legal-doc th, .legal-doc td { border: 1px solid var(--c-border); padding: var(--sp-3); text-align: left; }
.legal-doc th {
  background: var(--c-card);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Landing con formulario a dos columnas */
.landing-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-10);
  align-items: start;
}

/* --------------------------------------------------------------------------
   24. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .familia-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .services-grid, .news-grid, .trust-row { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(2n) { border-right: none; }
  .trust-item { border-bottom: 1px solid var(--c-border); }
  .trust-item:nth-last-child(-n+2) { border-bottom: none; }
  .service-card { border-bottom: 1px solid var(--c-border); }
  .service-card:nth-child(2n) { border-right: none; }
  .service-card:nth-last-child(-n+2) { border-bottom: none; }
  .brand-grid { grid-template-columns: repeat(4, 1fr); }
  .hero-stats { grid-template-columns: repeat(2, 1fr); border: none; }
  .hero-stat, .hero-stat + .hero-stat { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; border-right: none; border-top: 1px solid var(--c-ink-line); }
  .vhero-data-inner { grid-template-columns: repeat(2, 1fr); }
  .vhero-datum { border-bottom: 1px solid var(--c-ink-line); }
  .vhero-datum:nth-child(2n) { border-right: none; }
  .why-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  .finder-grid { grid-template-columns: 1fr 1fr; }
  .finder-grid .btn { grid-column: 1 / -1; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .pdp { grid-template-columns: 1fr; gap: var(--sp-8); }
  .gallery { position: static; }
  .news-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .news-grid .news-card:first-child { grid-row: auto; }
  .services-photo { grid-auto-rows: 210px; }
  .service-tile, .service-tile.is-wide, .service-tile.is-small { grid-column: span 6; grid-row: auto; }
  .band-figures { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
}

@media (max-width: 880px) {
  .shop-layout { grid-template-columns: 1fr; }
  .filters {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(340px, 88vw);
    max-height: none;
    background: var(--c-paper);
    border-right: 2px solid var(--c-ink);
    padding: var(--sp-5);
    z-index: var(--z-drawer);
    transform: translateX(-102%);
    transition: transform var(--t-slow);
    box-shadow: var(--shadow-lg);
  }
  .filters.is-open { transform: translateX(0); }
  .filters-open-btn { display: inline-flex; }
  #filters-apply-mobile {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    box-shadow: 0 -10px 18px var(--c-paper);
  }
  .filters-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--c-text-soft);
    transition: color var(--t-fast);
  }
  .filters-close:hover { color: var(--c-text); }
  .filters-head .btn { margin-left: auto; margin-right: var(--sp-2); }
  .header-search { display: none; }
  .header-search.is-mobile-visible {
    display: flex;
    position: absolute;
    left: var(--sp-5);
    right: var(--sp-5);
    top: calc(100% + 0px);
    max-width: none;
    padding: var(--sp-3) 0;
    background: transparent;
  }
}

@media (max-width: 780px) {
  .nav-toggle { display: inline-flex; }
  .site-nav .nav-list {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(320px, 86vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-8) var(--sp-5);
    background: var(--c-card);
    border-right: 3px solid var(--c-blue-bright);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-drawer);
    transform: translateX(-102%);
    transition: transform var(--t-slow);
    overflow-y: auto;
  }
  .site-nav .nav-list.is-open { transform: translateX(0); }
  .nav-link {
    padding: var(--sp-4) var(--sp-2);
    border-bottom: 1px solid var(--c-border);
    font-size: 19px;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 0;
  }
  .nav-cta { margin: var(--sp-5) 0 0; }
  .nav-cta .btn { width: 100%; }
  .mega { display: none; }
  .topbar .hide-sm { display: none; }
  .header-action span { display: none; }
  .brand-name { font-size: 26px; }
}

@media (max-width: 640px) {
  .container { padding-inline: var(--sp-4); }
  .section { padding-block: var(--sp-16); }
  .section-tight { padding-block: var(--sp-12); }
  .vhero { min-height: 86vh; }
  .vhero-top { padding-top: var(--sp-10); }
  .hero, .page-hero { padding-block: var(--sp-16) var(--sp-12); }
  .page-head { padding-block: var(--sp-6) var(--sp-6); }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .product-body { padding: var(--sp-3); }
  .product-media img { padding: var(--sp-3); }
  .product-title { font-size: 17px; }
  .product-add { width: 42px; padding: 0; }
  .product-add span { display: none; }
  .familia-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; }
  .familia-grid .familia-card:first-child { grid-column: span 2; }
  .familia-name { font-size: 19px; }
  .services-grid, .trust-row { grid-template-columns: 1fr; }
  .service-card, .trust-item { border-right: none; border-bottom: 1px solid var(--c-border); }
  .service-card:last-child, .trust-item:last-child { border-bottom: none; }
  .steps-grid { grid-template-columns: 1fr; }
  .step-card { border-right: none; border-bottom: 1px solid var(--c-border); }
  .step-card:last-child { border-bottom: none; }
  .brand-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-tile { padding: var(--sp-4) var(--sp-2); gap: var(--sp-2); }
  .brand-tile .brand-logo { height: 34px; }
  .brand-tile .brand-name { font-size: 10px; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .vhero-data-inner { grid-template-columns: 1fr 1fr; }
  .vhero-datum { padding: var(--sp-4) var(--sp-3) var(--sp-4) 0; }
  .finder { padding: var(--sp-4); }
  .finder-grid { grid-template-columns: 1fr; }
  .why-stats { grid-template-columns: 1fr 1fr; }
  .cta-band { padding: var(--sp-10) var(--sp-6); }
  .band-figures { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .photo-band-tall { padding-block: 100px; }
  .footer-top { grid-template-columns: 1fr; gap: var(--sp-8); }
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
  .pdp-buy-row { flex-direction: column; }
  .pdp-trust { grid-template-columns: 1fr; }
  .pdp-trust .trust-item { border-right: none; }
  .breadcrumbs .current { max-width: 180px; }
  .cart-drawer { width: 100vw; }
  .wa-fab { right: var(--sp-4); bottom: var(--sp-4); }
  .marquee-track span { font-size: 17px; }
  .display-1 { font-size: clamp(44px, 13vw, 72px); }
  .page-title { font-size: clamp(34px, 9.5vw, 52px); }
}

@media (max-width: 400px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* Responsive de paneles wave 2 */
@media (max-width: 980px) {
  .split-layout, .account-layout, .contact-layout, .landing-form-layout { grid-template-columns: 1fr; }
  .summary-box, .account-menu { position: static; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .account-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .panel { padding: var(--sp-5); }
  .form-grid-2 { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .cart-row { grid-template-columns: 84px minmax(0, 1fr); }
  .cart-row-img { width: 84px; height: 64px; }
  .cart-row-actions {
    grid-column: 1 / -1;
    justify-content: space-between;
  }
  .cart-row-total { text-align: left; min-width: 0; }
}

/* ==========================================================================
   25. REFINADO v2.1 "taller editorial"
   Capa de refinamiento sobre el sistema v2: geometria con intencion (radios
   asimetricos + biseles diagonales), escala de elevacion calida, voz
   tipografica editorial (Fraunces) y movimiento de scroll. No cambia ningun
   contrato de clase ni de atributo: solo refina lo existente.
   ========================================================================== */

/* --------------------------------------------------------------------------
   25.1 VOZ EDITORIAL (Fraunces): leads, citas y datos destacados
   -------------------------------------------------------------------------- */
.section-lead,
.hero-sub,
.vhero-sub {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 460;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.6;
  letter-spacing: 0.002em;
}

/* Cifras destacadas en serif: el dato se distingue del titular condensado */
.vhero-datum b,
.band-figure b,
.why-stat b,
.hero-stat b,
.account-card b {
  font-family: var(--font-editorial);
  font-style: normal;
  font-weight: 620;
  letter-spacing: -0.015em;
}
.vhero-datum b { font-size: clamp(23px, 2.5vw, 33px); }
.band-figure b { font-size: clamp(36px, 4.6vw, 68px); line-height: 1; }
.why-stat b { font-size: clamp(29px, 3.1vw, 44px); }
.hero-stat b { font-size: clamp(23px, 2.6vw, 34px); }
.account-card b { font-size: 29px; }

/* Precios en la misma voz de dato */
.product-price,
.pdp-price,
.cart-line-price,
.cart-row-total,
.cart-total-row b,
.summary-total b,
.order-total b {
  font-family: var(--font-editorial);
  font-weight: 620;
  letter-spacing: -0.01em;
}
.product-price { font-size: clamp(20px, 2vw, 23px); }
.pdp-price { font-size: clamp(40px, 4vw, 50px); }
.cart-total-row b { font-size: 26px; }
.summary-total b { font-size: 30px; }
.cart-line-price { font-size: 17px; }
.cart-row-total { font-size: 20px; }
.order-total b { font-size: 21px; }

/* --------------------------------------------------------------------------
   25.2 GEOMETRIA: radios asimetricos, biseles y cortes diagonales
   -------------------------------------------------------------------------- */
/* Firma visual: todo card o panel redondea 3 esquinas y deja recta la
   inferior izquierda. Dialoga con el corte diagonal de las bandas. */
.product-card,
.familia-card,
.service-tile { border-radius: var(--r-asym); }

.panel,
.order-card,
.account-menu,
.accordion,
.blog-grid .news-card,
.news-grid .news-card:first-child,
.shop-toolbar,
.map-frame,
.dropzone,
.pay-option,
.gallery-main,
.cta-band { border-radius: var(--r-asym-md); }

.trust-row,
.why-stats,
.services-grid,
.steps-grid,
.pdp-specs dl,
.pdp-trust {
  border-radius: var(--r-asym-md);
  overflow: hidden;
}

.gallery-thumb { border-radius: var(--r-sm); }
.cart-line-img, .cart-row-img { border-radius: var(--r-sm); }
.service-icon { border-radius: var(--r-sm); }
.confirm-icon { border-radius: var(--r-md) var(--r-md) var(--r-md) 0; }
.mega { border-radius: 0 0 var(--r-md) var(--r-md); }
.cart-drawer { border-radius: var(--r-lg) 0 0 0; }
.filters-open-btn { border-radius: var(--r-sm); }
.toast { border-radius: var(--r-sm) var(--r-sm) var(--r-sm) 0; }
.wa-fab { border-radius: var(--r-md) var(--r-md) var(--r-md) 4px; }
.cart-badge { border-radius: var(--r-full); }
.form-alert { border-radius: var(--r-sm); }
.pdp-note { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.skeleton { border-radius: var(--r-asym-md); }

/* Chips tecnicos en pastilla: contraste intencionado con las cards */
.chip { border-radius: var(--r-full); padding: 6px 14px; }

/* Bisel: esquina cortada en sellos y etiquetas (gesto 1) */
.badge,
.vhero-kicker .tag-yellow,
.step-num,
.checkout-num {
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}

/* Ticket de taller: esquina superior derecha doblada en amarillo (gesto 2) */
.finder,
.pdp-price-box,
.summary-box {
  position: relative;
  border-top: 1px solid var(--c-border);
  border-radius: var(--r-md) 0 var(--r-md) var(--r-md);
}
.finder::after,
.pdp-price-box::after,
.summary-box::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  background: linear-gradient(to bottom left, var(--c-yellow) 50%, transparent 50%);
  pointer-events: none;
}

/* Corte diagonal en bandas full bleed (gesto 3), eco de las franjas de peligro */
.photo-band {
  clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 calc(100% - var(--cut)));
}
.cta-band {
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
  padding-top: calc(var(--sp-16) + var(--cut));
  border-top: none;
}
@media (max-width: 640px) {
  .cta-band { padding-top: calc(var(--sp-10) + var(--cut)); }
}

/* La rejilla de producto es cuadricula limpia y alineada: la lectura de
   catalogo manda sobre el ritmo editorial en esta pagina. */

/* --------------------------------------------------------------------------
   25.3 ELEVACION: reposo, hover con lift y estado pulsado
   -------------------------------------------------------------------------- */
.btn {
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast), box-shadow var(--t-fast);
}
.btn-primary { box-shadow: var(--shadow-sm); }
.btn-primary:hover, .btn-secondary:hover { box-shadow: var(--shadow-md); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); box-shadow: var(--shadow-xs); }
.btn-ghost:hover, .btn-icon:hover { transform: none; box-shadow: none; }

.product-card {
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-med), box-shadow var(--t-med), transform var(--t-med);
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.product-add { border-radius: var(--r-sm) var(--r-sm) var(--r-sm) 0; }

.familia-card,
.service-tile { transition: transform var(--t-med), box-shadow var(--t-med); }
.familia-card:hover,
.service-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.blog-grid .news-card { box-shadow: var(--shadow-xs); }
.blog-grid .news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-grid .news-card { transition: border-color var(--t-med), box-shadow var(--t-med), transform var(--t-med); }
.news-grid .news-card:first-child { box-shadow: var(--shadow-sm); }

.panel, .order-card, .account-menu, .shop-toolbar { box-shadow: var(--shadow-xs); }
.pdp-price-box, .summary-box { box-shadow: var(--shadow-sm); }
.pay-option.is-checked { box-shadow: 0 0 0 1px var(--c-ink), var(--shadow-sm); }
.site-header.is-scrolled { box-shadow: 0 6px 22px rgba(16, 20, 48, 0.12); }

/* --------------------------------------------------------------------------
   28. SELECTOR DE IDIOMA + BANNER DE COOKIES
   -------------------------------------------------------------------------- */
.lang-switch-wrap { display: inline-flex; align-items: center; }
.lang-switch {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  cursor: pointer;
  transition: background var(--t-fast);
}
.lang-switch:hover { background: rgba(255, 255, 255, 0.22); }
.lang-switch:focus { outline: none; border-color: var(--c-yellow); }
.lang-switch option { color: var(--c-text); background: #fff; }

.cookie-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: var(--z-cookies);
  background: var(--c-card);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-blue-bright);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  animation: ck-in 0.4s ease;
}
.cookie-banner.is-gone { opacity: 0; transform: translateY(10px); transition: opacity 0.35s ease, transform 0.35s ease; }
@keyframes ck-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cookie-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex; gap: var(--sp-6);
  align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
}
.cookie-body { flex: 1; min-width: 280px; }
.cookie-body h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 4px; }
.cookie-body p { font-size: 0.9rem; color: var(--c-text-soft); margin: 0; }
.cookie-link { display: inline-block; margin-top: 6px; font-size: 0.82rem; color: var(--c-blue-bright); text-decoration: underline; }
.cookie-prefs { margin: var(--sp-3) 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.cookie-opt { display: flex; gap: 8px; align-items: flex-start; font-size: 0.85rem; }
.cookie-opt input { margin-top: 3px; }
.cookie-mut { color: var(--c-text-mute); font-size: 0.8rem; }
.cookie-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.cookie-btn {
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
  padding: 9px 16px; border-radius: var(--r-md); cursor: pointer; border: 1px solid transparent;
  transition: background var(--t-fast);
}
.cookie-btn.ghost { background: transparent; color: var(--c-text); border-color: var(--c-border-strong); }
.cookie-btn.ghost:hover { background: var(--c-paper); }
.cookie-btn.solid { background: var(--c-blue); color: #fff; }
.cookie-btn.solid:hover { background: var(--c-blue-bright); }
@media (max-width: 640px) { .cookie-actions { width: 100%; } .cookie-btn { flex: 1; } }

.legal-table { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0 var(--sp-4); font-size: 0.9rem; }
.legal-table th, .legal-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.legal-table th { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-blue); }
.legal-table td:first-child { font-family: var(--font-mono); font-size: 0.82rem; }

/* --------------------------------------------------------------------------
   25.4 LEGIBILIDAD SOBRE FOTO Y VIDEO (objetivo AA)
   -------------------------------------------------------------------------- */
.vhero::before {
  background: linear-gradient(180deg, rgba(23, 19, 16, 0.62) 0%, rgba(23, 19, 16, 0.44) 40%, rgba(23, 19, 16, 0.93) 100%);
}
.vhero h1, .vhero-sub, .vhero-kicker {
  text-shadow: 0 1px 2px rgba(10, 8, 6, 0.55), 0 2px 22px rgba(10, 8, 6, 0.4);
}
.vhero-data {
  background: rgba(23, 19, 16, 0.74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.hero::before,
.page-hero::before {
  background:
    linear-gradient(180deg, rgba(23, 19, 16, 0.2) 30%, rgba(23, 19, 16, 0.55) 100%),
    linear-gradient(90deg, rgba(23, 19, 16, 0.92) 0%, rgba(23, 19, 16, 0.72) 55%, rgba(23, 19, 16, 0.52) 100%);
}
.page-title, .hero h1, .hero-sub, .hero-kicker, .page-head-note,
.hero-stat b, .hero-stat span, .page-head .eyebrow, .hero .eyebrow {
  text-shadow: 0 1px 2px rgba(10, 8, 6, 0.5), 0 2px 18px rgba(10, 8, 6, 0.35);
}

.photo-band::before {
  background: linear-gradient(180deg, rgba(23, 19, 16, 0.72), rgba(23, 19, 16, 0.56) 45%, rgba(23, 19, 16, 0.86));
}
.photo-band .eyebrow { color: var(--c-ink-soft); }
.photo-band .eyebrow, .photo-band .display-2, .photo-band .display-1,
.band-figure b, .band-figure i {
  text-shadow: 0 1px 2px rgba(10, 8, 6, 0.5), 0 2px 20px rgba(10, 8, 6, 0.35);
}

.familia-card::after {
  background: linear-gradient(180deg, rgba(23, 19, 16, 0.2) 30%, rgba(23, 19, 16, 0.88));
}
.service-tile::after {
  background: linear-gradient(180deg, rgba(23, 19, 16, 0.28) 22%, rgba(23, 19, 16, 0.9));
}
.familia-name, .familia-count,
.service-tile h3, .service-tile p, .service-tile-num, .service-tile .service-link {
  text-shadow: 0 1px 3px rgba(10, 8, 6, 0.55);
}

/* La foto de producto va sobre plato claro uniforme, sin degradado encima
   (ver seccion 11): las piezas se presentan catalogadas y consistentes. */

/* --------------------------------------------------------------------------
   25.5 MOVIMIENTO DE SCROLL: parallax, stagger
   -------------------------------------------------------------------------- */
/* Capa de parallax que crea app.js en bandas y cabeceras con foto */
.photo-band, .page-hero, .hero { isolation: isolate; }
/* Caja que recorta la foto del parallax. La capa de dentro sobresale a
   proposito (top/bottom -12%): ese sobrante es lo que se mueve al hacer scroll.
   Antes la recortaba el `overflow: hidden` de la cabecera; ahora la cabecera de
   la tienda lo necesita `visible` -o corta el desplegable del buscador- asi que
   el recorte de la foto vive aqui, que es donde le toca. */
.parallax-caja {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
.parallax-caja .parallax-layer { z-index: auto; }

.parallax-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: -12%;
  bottom: -12%;
  z-index: -1;
  background-size: cover;
  background-position: center;
  will-change: transform;
  pointer-events: none;
}

/* Entrada escalonada por grupos (app.js asigna el delay por hijo) */
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
}
.stagger-item.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 640ms ease, transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .stagger-item { opacity: 1 !important; transform: none !important; }
  .parallax-layer { transform: none !important; }
  .btn:hover, .product-card:hover, .familia-card:hover, .service-tile:hover,
  .blog-grid .news-card:hover { transform: none !important; }
  .product-card:hover .product-media img { transform: none !important; }
}

/* --------------------------------------------------------------------------
   26. TIENDA Y FICHA, EXPERIENCIA DE COMPRA DENSA
   Vista de lista del catalogo con toggle, linea de entrega en card y ficha
   en 3 columnas con caja de compra fija y sellos de confianza reales.
   -------------------------------------------------------------------------- */

/* Toggle de vista cuadricula/lista en la toolbar */
.shop-view {
  display: inline-flex;
  border: 1px solid var(--c-border);
  background: var(--c-card-face);
}
.shop-view button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  color: var(--c-text-mute);
  transition: background var(--t-fast), color var(--t-fast);
}
.shop-view button + button { border-left: 1px solid var(--c-border); }
.shop-view button:hover { color: var(--c-text); }
.shop-view button.is-active {
  background: var(--c-yellow);
  color: var(--c-yellow-ink);
}
.shop-view svg { width: 16px; height: 16px; }

/* Linea de entrega en la card de producto */
.card-delivery {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--c-text-mute);
}
.card-delivery svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--c-success); }
.card-delivery b { color: var(--c-success); font-weight: 600; }

/* Vista LISTA densa: misma card, dispuesta en fila con plato de imagen fijo
   a la izquierda, cuerpo en el centro y columna de precio y accion a la
   derecha separada por hairline. */
.product-grid.is-list { grid-template-columns: 1fr; gap: var(--sp-3); }
.product-grid.is-list .product-card { flex-direction: row; align-items: stretch; }
.product-grid.is-list .product-media {
  width: 200px;
  min-width: 200px;
  min-height: 158px;
  aspect-ratio: auto;
  align-self: stretch;
}
.product-grid.is-list .product-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: var(--sp-6);
  row-gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-top: none;
  border-left: 2px solid var(--c-ink);
}
.product-grid.is-list .product-topline,
.product-grid.is-list .product-title,
.product-grid.is-list .product-model,
.product-grid.is-list .product-meta,
.product-grid.is-list .card-delivery { grid-column: 1; }
.product-grid.is-list .product-topline { justify-content: flex-start; gap: var(--sp-4); }
.product-grid.is-list .product-title { font-size: 23px; min-height: 0; }
.product-grid.is-list .product-foot {
  grid-column: 2;
  grid-row: 1 / 6;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--sp-3);
  margin-top: 0;
  padding-top: 0;
  padding-left: var(--sp-5);
  border-top: none;
  border-left: 1px solid var(--c-border);
}
.product-grid.is-list .product-price { font-size: 30px; }
.product-grid.is-list .product-add { width: 100%; }

/* En pantallas estrechas la lista colapsa a fila compacta y comoda */
@media (max-width: 760px) {
  .product-grid.is-list { gap: var(--sp-2); }
  .product-grid.is-list .product-media {
    width: 126px;
    min-width: 126px;
    min-height: 126px;
  }
  .product-grid.is-list .product-media img { padding: var(--sp-2); }
  .product-grid.is-list .product-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-3);
  }
  .product-grid.is-list .product-title { font-size: 16px; }
  .product-grid.is-list .product-foot {
    flex-direction: row;
    align-items: center;
    margin-top: auto;
    padding-top: var(--sp-2);
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--c-border);
  }
  .product-grid.is-list .product-price { font-size: 22px; }
  .product-grid.is-list .product-add { width: 42px; padding: 0; }
  .product-grid.is-list .product-add span { display: none; }
}

/* Ficha en 3 columnas: galeria, informacion central y caja de compra */
.pdp.pdp-cols {
  grid-template-columns: minmax(0, 44fr) minmax(0, 33fr) minmax(300px, 26fr);
  gap: var(--sp-8);
}
.pdp-cols .pdp-specs:first-child { margin-top: 0; }
/* Un elemento de rejilla no baja de su `min-content` por mucho que su pista sea
   `minmax(0, ...)`: la pista puede encoger, el elemento no. Es lo que dejaba que
   una palabra larga del titulo empujara la columna central sobre la caja de
   compra. */
.pdp-cols .pdp-main { min-width: 0; }

/* Caja de compra fija, estilo marketplace con piel de marca */
.pdp-buybox {
  position: sticky;
  top: calc(var(--chrome-h, var(--header-h)) + var(--sp-5));
  padding: var(--sp-5);
  background: var(--c-card-face);
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--c-yellow);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.pdp-buybox .pdp-price {
  display: flex;
  align-items: flex-start;
  font-family: var(--font-editorial);
  font-weight: 600;
  line-height: 1;
  color: var(--c-text);
}
.pdp-price-int { font-size: 46px; letter-spacing: -0.01em; }
.pdp-price-frac { font-size: 17px; margin: 5px 0 0 3px; }
.pdp-buybox .pdp-price-note { margin-top: var(--sp-2); }
.pdp-delivery {
  margin-top: var(--sp-4);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--c-text-soft);
}
.pdp-delivery svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--c-text-mute); }
.pdp-delivery b { color: var(--c-text); font-weight: 600; }
.pdp-stock {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-success);
}
.pdp-stock.is-out { color: var(--c-danger); }
.pdp-buy-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.pdp-buy-col .qty { align-self: flex-start; }
.btn-ink {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-ink-text);
}
.btn-ink:hover {
  background: var(--c-yellow);
  border-color: var(--c-yellow);
  color: var(--c-yellow-ink);
}
.pdp-seller {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  font-size: 12.5px;
  color: var(--c-text-mute);
}
.pdp-seller b { color: var(--c-text); font-weight: 600; }

/* Sellos de confianza: compactos, tipograficos, hechos reales del negocio */
.pdp-seals {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.pdp-seals li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-text-soft);
}
.pdp-seals svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--c-success); }

/* Tablet ancha: galeria e info a la izquierda, caja de compra a la derecha */
@media (max-width: 1240px) {
  .pdp.pdp-cols { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
  .pdp-cols .gallery { grid-column: 1; }
  .pdp-cols .pdp-main { grid-column: 1; }
  .pdp-cols .pdp-buybox { grid-column: 2; grid-row: 1 / 3; align-self: start; }
}

/* Movil: una columna, la caja de compra fluye bajo la galeria y deja de ser fija */
@media (max-width: 880px) {
  .pdp.pdp-cols { grid-template-columns: 1fr; gap: var(--sp-6); }
  .pdp-cols .gallery { grid-column: auto; order: 0; }
  .pdp-cols .pdp-buybox {
    grid-column: auto;
    grid-row: auto;
    position: static;
    order: 1;
  }
  .pdp-cols .pdp-main { grid-column: auto; order: 2; }
}

/* --------------------------------------------------------------------------
   26.5 CARRITO Y CHECKOUT, CIERRE DE COMPRA
   Barra de progreso hacia el envio gratis, resumen con recuento de piezas,
   entrega estimada y sellos compactos. Pasos del checkout con numeral en
   circulo y hairline entre secciones.
   -------------------------------------------------------------------------- */

/* Barra de progreso del envio gratis, en amarillo señal sobre plato */
.ship-progress {
  margin-bottom: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-card-face);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-yellow);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-xs);
}
.ship-progress-text {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--c-text-soft);
}
.ship-progress-text b { color: var(--c-text); font-weight: 600; }
.ship-progress-text svg { width: 15px; height: 15px; flex-shrink: 0; }
.ship-progress-bar {
  margin-top: var(--sp-3);
  height: 8px;
  background: var(--c-plate);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  overflow: hidden;
}
.ship-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--c-yellow);
  border-radius: inherit;
  transition: width 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ship-progress.is-free { border-left-color: var(--c-success); }
.ship-progress.is-free .ship-progress-text,
.ship-progress.is-free .ship-progress-text b { color: var(--c-success); }
.ship-progress.is-free .ship-progress-text svg { color: var(--c-success); }

/* Encabezado del resumen con recuento, lectura de marketplace */
.summary-head {
  font-size: 14.5px;
  color: var(--c-text-soft);
  line-height: 1.4;
}
.summary-head b {
  font-family: var(--font-editorial);
  font-size: 22px;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
}

/* Estimacion de entrega dentro del resumen */
.summary-delivery {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  color: var(--c-text-soft);
}
.summary-delivery svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--c-success); }
.summary-delivery b { color: var(--c-text); font-weight: 600; }

/* Sellos de confianza en fila compacta para los resumenes */
.pdp-seals.is-compact {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-border);
}
.pdp-seals.is-compact li { font-size: 10.5px; }
.pdp-seals.is-compact svg { width: 13px; height: 13px; }

/* El resumen queda fijo al hacer scroll en escritorio, como la caja de
   compra de la ficha (el gesto del ticket lo dejaba en relative) */
.split-layout .summary-box {
  position: sticky;
  top: calc(var(--chrome-h, var(--header-h)) + var(--sp-4));
}
@media (max-width: 980px) {
  .split-layout .summary-box { position: static; }
}

/* Pasos del checkout: numeral en circulo y hairline entre secciones */
.checkout-section {
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--c-border);
}
.checkout-section:last-of-type { padding-bottom: 0; border-bottom: none; }
.checkout-num {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  clip-path: none;
}

@media (prefers-reduced-motion: reduce) {
  .ship-progress-fill { transition: none; }
}

/* ==========================================================================
   27. PRELOADER, neumatico girando al cargar la pagina
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-5, 20px);
  background: var(--c-ink);
  transition: opacity 0.55s ease, visibility 0.55s ease;
}
.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-wheel {
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.55));
}
.preloader-wheel svg {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  animation: rubio-wheel-spin 0.82s linear infinite;
}
.preloader-cap {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.preloader-cap::after {
  content: "";
  animation: rubio-wheel-dots 1.4s steps(4, end) infinite;
}
@keyframes rubio-wheel-spin {
  to { transform: rotate(360deg); }
}
@keyframes rubio-wheel-dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}
@media (prefers-reduced-motion: reduce) {
  .preloader { transition: none; }
  .preloader-wheel svg { animation: none; }
  .preloader-cap::after { animation: none; content: ""; }
}

/* ---- Pieza unica (carrito y ficha) ---- */
.badge-unique {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 4px 10px;
}
.cart-row.is-sold { opacity: 0.75; }
.cart-row.is-sold .cart-row-img { filter: grayscale(1); }
.cart-row-sold { color: var(--c-danger); font-size: 13.5px; font-weight: 600; margin: 6px 0 0; }
.pdp-unique { color: var(--c-text-soft); font-size: 13.5px; margin: 4px 0 12px; }

/* Aviso de login en el checkout */
.ck-login-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fdf3cd;
  border: 1px solid #e8d48a;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.ck-login-notice svg { flex-shrink: 0; margin-top: 2px; }
.ck-login-notice a { font-weight: 700; }

/* ---- Checkout: boton de confirmar (compacto, con el total separado) ---- */
.ck-submit {
  font-size: 15px;
  letter-spacing: 0.05em;
  padding: 15px 18px;
  gap: 12px;
  white-space: normal;
}
.ck-submit-total {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  padding-left: 12px;
  border-left: 1px solid rgba(16, 20, 48, 0.22);
}

/* ---- Checkout: codigo de descuento (discreto) ---- */
.ck-coupon { margin-top: 2px; }
.ck-coupon-toggle {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-text-mute);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ck-coupon-toggle:hover { color: var(--c-text); }
.ck-coupon-box { display: flex; gap: 8px; margin-top: 8px; }
.ck-coupon-box .input {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-size: 13px;
  padding-block: 9px;
}
.ck-coupon-box .input.is-applied { background: #e2f4e9; border-color: #8fcfa8; }
.ck-coupon-box .btn { flex: 0 0 auto; }
.ck-coupon-msg { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; }
.ck-coupon-msg.is-ok { color: var(--c-success); }
.ck-coupon-msg.is-error { color: var(--c-danger); }
.ck-discount-row b { color: var(--c-success); }

/* --------------------------------------------------------------------------
   FOOTER PEGADO ABAJO Y RESUMEN DEL CHECKOUT SIEMPRE VISIBLE
   -------------------------------------------------------------------------- */
/* Paginas cortas (cuenta, carrito vacio, legales): el footer se apoya en el
   fondo de la ventana en vez de dejar una franja blanca debajo. */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > [data-chrome-footer],
body > .site-footer,
body > .brand-marquee { flex-shrink: 0; }
/* El hueco lo ponen ya los paddings del contenido: sin margen el footer no
   empuja la pagina mas alla del alto de la ventana. */
.site-footer,
.site-footer--min { margin-top: 0; }

/* Resumen del checkout: acompana al scroll y, si no cabe entero, hace scroll
   propio para que el boton de confirmar nunca quede fuera de pantalla. */
@media (min-width: 981px) {
  .split-layout .summary-box {
    position: sticky;
    top: calc(var(--chrome-h, var(--header-h)) + var(--sp-4));
    max-height: calc(100vh - var(--chrome-h, var(--header-h)) - var(--sp-8));
    max-height: calc(100dvh - var(--chrome-h, var(--header-h)) - var(--sp-8));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .split-layout .summary-box::-webkit-scrollbar { width: 6px; }
  .split-layout .summary-box::-webkit-scrollbar-thumb {
    background: var(--c-border);
    border-radius: 3px;
  }
}

/* Linea de producto del resumen: nombre legible (2 lineas maximo) y precio
   siempre alineado a la derecha, sin empujar el texto. */
.summary-item {
  align-items: flex-start;
  line-height: 1.35;
}
.summary-item > span:not(.summary-thumb) {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.summary-item b { align-self: flex-start; padding-top: 1px; }
.summary-thumb { margin-top: 1px; }

/* El scroll que hay DESPUES de la rejilla (padding + footer) es el que hace
   que el resumen se descuelgue al final y quede tapado por el header. Se
   recorta ese hueco para que el bloque siga anclado hasta el fondo. */
@media (min-width: 981px) {
  .split-layout { padding-bottom: var(--sp-6); }
}

/* ---- Fotos de catalogo en baja resolucion (miniaturas de 113x85 del ERP) ----
   El ERP solo guarda la miniatura: la original (`fichero_id`) devuelve 404 en
   todo el catalogo, asi que no hay mas pixeles que sacar. Estirarla al marco la
   dejaba borrosa (1,5x en la tarjeta y 2x en la ficha, el doble en pantallas
   retina), asi que se muestra a su TAMANO REAL -donde se ve nitida- y el hueco
   se llena con la misma foto ampliada y desenfocada de fondo.
   Nada de medidas fijas: `width:auto` respeta el tamano de cada foto, sea de
   113x85 o mayor. La clase la pone el JS solo si naturalWidth < 200, asi que el
   dia que el ERP publique las fotos buenas esto deja de aplicarse solo. */
.product-media img.is-lowres,
.gallery-main img.is-lowres,
.gallery-thumb img.is-lowres {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: auto;
  padding: 0;
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Sobre el fondo difuminado, el multiply del plato ensuciaria la foto */
  mix-blend-mode: normal;
}
.product-card:hover .product-media img.is-lowres { transform: none; }

/* Fondo: la MISMA foto ampliada y desenfocada. No inventa detalle, solo llena
   el marco para que la foto pequena no quede flotando en un hueco vacio.
   `--foto-lowres` la pone el JS al detectar la miniatura; el `scale` compensa
   los bordes que se come el blur. Las miniaturas de la galeria no lo llevan:
   ahi la foto ya ocupa casi todo el hueco. */
.product-media.has-lowres::before,
.gallery-main.has-lowres::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--foto-lowres);
  background-size: cover;
  background-position: center;
  /* Estas fotos son piezas recortadas SOBRE FONDO BLANCO, no encuadres llenos:
     difuminarlas de golpe dejaba un manchon gris alrededor de la pieza. Asi que
     el fondo va muy abierto y muy tenue -un tinte, no una copia borrosa- y se
     desvanece hacia los bordes para que no se vea donde acaba. */
  transform: scale(1.6);
  filter: blur(40px) saturate(0.6);
  opacity: 0.16;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
  pointer-events: none;
}
/* Mismo problema en la tarjeta: un marco de 4/3 (unos 300x225) con una foto de
   113x85 dentro es casi todo hueco.
   ACTUALIZADO: el ERP YA regenero sus miniaturas. Medidas de hoy sobre trece
   piezas repartidas por todo el catalogo (`thumbnail_id` 91338 a 915999): todas
   dan 400x300, asi que `naturalWidth < 200` -la condicion que pone la clase, en
   app.js- no se cumple ya con ninguna. Esto queda como red de seguridad por si
   apareciera una foto suelta pequenya, no como el caso normal que era.
   Y por eso se le quita el `height: 150px`: cambiaba el alto del marco DESPUES
   de cargar la foto, o sea recolocaba la rejilla entera con el visitante
   mirando. Basta con soltar la proporcion 4/3; el `min-height` mantiene el
   hueco reservado y ya no salta nada. */
.product-media.has-lowres {
  aspect-ratio: auto;
  min-height: 150px;
}
.product-grid.is-list .product-media.has-lowres {
  height: auto;   /* en vista lista manda el alto de la fila, no el de la foto */
}

/* Con una foto de 113x85, la galeria a ancho completo dejaba la principal MAS
   PEQUENA que sus propias miniaturas: sin jerarquia y con un marco medio vacio.
   Asi que el bloque entero se estrecha -principal y tira de miniaturas a la vez-
   y la foto vuelve a mandar sobre ellas. Solo pasa con fotos de miniatura: con
   una foto normal la galeria se queda como esta. */
.gallery.has-lowres .gallery-main {
  aspect-ratio: auto;
  max-width: 260px;
  height: 200px;
}
.gallery.has-lowres .gallery-thumbs {
  max-width: 260px;
}

/* La foto, a su tamano real, se lee como una foto colocada encima del plato:
   hairline + sombra corta. Sin esto el rectangulo blanco flota sin apoyo. */
.product-media.has-lowres img.is-lowres,
.gallery-main.has-lowres img.is-lowres {
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  box-shadow: 0 2px 12px rgba(15, 18, 45, 0.10);
  background: #fff;
}
/* El marcador "sin foto" (imagen de marca) ocupa toda la tarjeta */
.product-media img[data-ph="1"],
.gallery-main img[data-ph="1"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
  mix-blend-mode: normal;
}
.product-card:hover .product-media img[data-ph="1"] { transform: none; }

/* Menu de recambios: icono + nombre + numero de piezas */
.mega-familias a {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mega-familias a svg { flex-shrink: 0; color: var(--c-text-mute); transition: color var(--t-fast); }
.mega-familias a:hover svg { color: var(--c-blue); }
.mega-familias a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega-familias a em {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-style: normal;
  color: var(--c-text-mute);
}

/* Piezas sin vehiculo de origen en el ERP: valen para varios modelos */
.product-brand-generic { color: var(--c-text-mute); }

/* ==========================================================================
   TIENDA, FASE 2: buscador, filtros en horizontal y banda de marcas
   (bloque al final del archivo a proposito: se edita desde la sesion que
   lleva el catalogo, sin tocar reglas de otras paginas)
   ========================================================================== */

/* La tienda ya no tiene barra lateral: una sola columna */
.shop-layout { grid-template-columns: 1fr; }

/* ---- Buscador del hero ---- */
.shop-search {
  position: relative;
  margin-top: var(--sp-6);
  max-width: 720px;
}
.shop-search-box {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--c-card-face);
  border: 1px solid var(--c-border);
  padding: 6px 6px 6px var(--sp-4);
  box-shadow: var(--shadow-md);
}
.shop-search-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  color: var(--c-text-mute);
}
.shop-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 15.5px;
  color: var(--c-text);
  padding: 12px 0;
}
.shop-search-input:focus { outline: none; }
.shop-search-input::placeholder { color: var(--c-text-mute); }
.shop-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--c-text-mute);
}
.shop-search-clear svg { width: 15px; height: 15px; }
.shop-search-clear:hover { color: var(--c-text); }
.shop-search-btn { flex-shrink: 0; height: 42px; }

/* ---- Lista de sugerencias (combobox) ---- */
.shop-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 340px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--c-card-face);
  border: 1px solid var(--c-border-strong);
  box-shadow: var(--shadow-lg);
}
.sug-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-4);
  cursor: pointer;
  font-size: 14.5px;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
}
.sug-row:last-child { border-bottom: 0; }
/* Fila de pieza exacta: cuando lo tecleado identifica UN recambio concreto
   -su numero o su referencia- la primera fila es la pieza y no una busqueda.
   Se separa con una linea mas marcada para que se lea como "esto es lo que
   buscas" y no como una sugerencia mas de la lista. */
.sug-row.sug-pieza {
  border-bottom: 2px solid var(--c-border);
  background: var(--c-paper);
}
.sug-row.sug-pieza .sug-foto {
  width: 34px;
  height: 26px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 3px;
  background: var(--c-plate);
}
.sug-row.sug-pieza .sug-kind {
  font-weight: 700;
  color: var(--c-text);
}
.sug-row.is-active,
.sug-row:hover { background: var(--c-plate); }
.sug-row svg { width: 15px; height: 15px; color: var(--c-text-mute); flex-shrink: 0; }
.sug-row > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sug-logo { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.sug-kind {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  font-style: normal;
  flex-shrink: 0;
}
.sug-free { background: var(--c-plate); font-weight: 500; }
.sug-free b { font-weight: 600; }

/* ---- Banda de marcas ---- */
.brand-strip-wrap {
  background: var(--c-plate);
  border-bottom: 1px solid var(--c-border);
}
.brand-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
}
.brand-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  background: var(--c-card-face);
  border: 1px solid var(--c-border);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.brand-chip img {
  max-width: 52px;
  max-height: 26px;
  object-fit: contain;
  opacity: 0.72;
  transition: opacity var(--t-fast);
}
.brand-chip:hover { border-color: var(--c-border-strong); }
.brand-chip:hover img { opacity: 1; }
.brand-chip.is-active {
  border-color: var(--c-yellow-deep);
  box-shadow: inset 0 -3px 0 var(--c-yellow);
}
.brand-chip.is-active img { opacity: 1; }

/* ---- Barra de filtros en horizontal ---- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-card-face);
  border: 1px solid var(--c-border);
  margin-bottom: var(--sp-4);
}
.filter-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1 1 190px;
}
.filter-field label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}
.filter-field .select { width: 100%; }
.filter-field .select:disabled { opacity: 0.5; cursor: not-allowed; }
.filter-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 44px;
  font-size: 13.5px;
  color: var(--c-text-soft);
  white-space: nowrap;
  cursor: pointer;
}
.filter-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.filter-clear { flex-shrink: 0; height: 44px; }

@media (max-width: 880px) {
  /* La barra queda pegada bajo la cabecera al hacer scroll */
  .filter-bar {
    position: sticky;
    top: var(--chrome-h, 0px);
    z-index: 20;
    gap: var(--sp-2);
    padding: var(--sp-3);
  }
  .filter-field { flex: 1 1 calc(50% - var(--sp-2)); }
  .filter-switch, .filter-clear { flex: 1 1 100%; height: 38px; }
  .shop-search { margin-top: var(--sp-4); }
  .shop-search-btn { padding: 0 var(--sp-3); }
}

@media (max-width: 640px) {
  .shop-search-box { padding-left: var(--sp-3); }
  .shop-search-input { font-size: 16px; /* evita el zoom de iOS al enfocar */ }
  .shop-search-btn { padding: 0 var(--sp-3); font-size: 10.5px; }
  .brand-strip { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
  .brand-chip { height: 40px; }
}

/* ---- Ficha: compatibilidades y referencias equivalentes ---- */
.pdp-extra { margin-top: var(--sp-6); }
.pdp-extra-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  margin-bottom: var(--sp-3);
}
.pdp-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pdp-tag-list li {
  padding: 5px 10px;
  background: var(--c-plate);
  border: 1px solid var(--c-border);
  font-size: 12.5px;
  color: var(--c-text-soft);
}
/* Cada compatible pasa a ser coche + detalle (anyos, CV, codigo de motor), asi
   que la etiqueta deja de ser una linea suelta y se apila. El coche manda; el
   detalle es lo que mira un taller para decidir si le encaja. */
.pdp-tag-list li {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pdp-tag-list li b { color: var(--c-text); font-weight: 600; }
.compat-detalle {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-text-mute);
}
.pdp-tag-list.is-mono li {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.pdp-extra-more {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pdp-extra-more:hover { color: var(--c-yellow-deep); }
.pdp-extra-note { margin-top: var(--sp-2); font-size: 12.5px; color: var(--c-text-mute); }

/* Observaciones publicas de la pieza (el campo SIDEO del ERP). No son etiquetas
   sueltas como las compatibilidades: son frases del almacen, asi que van en
   lineas y no en pastillas. */
.pdp-obs-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pdp-obs-list li {
  position: relative;
  padding-left: 15px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-text-soft);
}
.pdp-obs-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 1px;
  background: var(--c-yellow-deep);
}

/* Correcciones de la revision de la Fase 2 ------------------------------- */

/* El resaltado del teclado en las sugerencias era blanco sobre blanco: sin el,
   navegar la lista con las flechas no se ve. */
.sug-row.is-active,
.sug-row:hover { background: var(--c-plate-2, #eef1f8); }
.sug-row.is-active {
  box-shadow: inset 3px 0 0 var(--c-yellow-deep);
  background: #eef1f8;
}

/* El buscador del hero anulaba el outline global sin poner nada en su sitio */
.shop-search-box:focus-within {
  border-color: var(--c-yellow-deep);
  box-shadow: 0 0 0 3px var(--c-yellow-glow);
}

/* Estado y foco de los logos: el amarillo solo no llega al contraste minimo
   para comunicar un estado, asi que se refuerza con el borde oscuro */
.brand-chip.is-active {
  border-color: var(--c-ink);
  box-shadow: inset 0 -3px 0 var(--c-yellow-deep);
}
.brand-chip:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 2px;
}

/* Paginacion con enlaces reales (debajo de "Cargar mas") --------------------
   Sirve a dos publicos: quien quiere saltar a una pagina concreta entre 1.479,
   y los buscadores, que no pueden pulsar un boton. */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin: var(--sp-6) 0 var(--sp-10);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
}
.pager-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px var(--sp-4);
  border: 1px solid var(--c-border-strong);
  background: var(--c-card-face);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.pager-link svg { width: 15px; height: 15px; }
.pager-link:hover {
  background: var(--c-yellow);
  border-color: var(--c-yellow);
  color: var(--c-yellow-ink);
}
.pager-status {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--c-text-mute);
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .pager { gap: var(--sp-2); }
  .pager-link { padding: 9px var(--sp-3); }
  .pager-status { font-size: 10.5px; }
}

/* Selector con buscador (Marca y Tipo de pieza) -----------------------------
   Sustituye a un <select> nativo que con 100 opciones era imposible de
   recorrer: se abre con un campo para filtrar y el numero de piezas de cada
   entrada. Los filtros cortos (precio, ubicacion, orden) siguen siendo select
   nativo, que en movil abre el selector del sistema y es mejor. */
.fsel { position: relative; }
.fsel-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  height: 44px;
  padding: 0 var(--sp-3);
  background: var(--c-card-face);
  border: 1px solid var(--c-border-strong);
  color: var(--c-text-mute);
  font-family: var(--font-sans);
  font-size: 14px;
  text-align: left;
}
.fsel-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.fsel-btn:hover { border-color: var(--c-ink); }
.fsel-btn.is-set { color: var(--c-text); font-weight: 500; }
.fsel-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fsel-panel {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--c-card-face);
  border: 1px solid var(--c-border-strong);
  box-shadow: var(--shadow-lg);
}
.fsel-q {
  width: 100%;
  height: 40px;
  padding: 0 var(--sp-3);
  border: 0;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-plate);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--c-text);
}
.fsel-q:focus { outline: 2px solid var(--c-yellow-deep); outline-offset: -2px; }
.fsel-list {
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fsel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 9px var(--sp-3);
  font-size: 13.5px;
  color: var(--c-text);
  cursor: pointer;
}
.fsel-item i {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10.5px;
  color: var(--c-text-mute);
  flex-shrink: 0;
}
.fsel-item.is-active,
.fsel-item:hover { background: #eef1f8; }
.fsel-item.is-sel {
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--c-yellow-deep);
}
.fsel-vacio {
  padding: var(--sp-4) var(--sp-3);
  margin: 0;
  font-size: 13px;
  color: var(--c-text-mute);
  text-align: center;
}
/* Salida cuando lo que se busca no esta en la lista del desplegable. Pasa con
   9.015 piezas del catalogo (el 25,4 %), porque el ERP solo publica 100 tipos:
   CAPO, por ejemplo, no esta y sin embargo hay 349 a la venta. */
.fsel-buscar {
  width: 100%;
  padding: var(--sp-3);
  border: 1px solid var(--c-border-strong);
  background: var(--c-plate);
  color: var(--c-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.fsel-buscar:hover { background: var(--c-surface-2); border-color: var(--c-ink); }

/* Boton para desplegar el resto de marcas (sustituye al scroll lateral) */
.brand-more {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 6px 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.brand-more:hover { color: var(--c-text); }

@media (max-width: 880px) {
  /* En movil el campo ocupa media columna: un panel de 160px no sirve para
     nombres como "COMPRESOR AIRE ACONDICIONADO". Pasa a hoja inferior a ancho
     completo, que ademas cae cerca del pulgar. */
  .fsel-panel {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    max-height: 72vh;
    border: 0;
    border-top: 2px solid var(--c-ink);
    box-shadow: 0 -10px 34px rgba(16, 20, 48, 0.22);
  }
  .fsel-q { height: 48px; font-size: 16px; /* sin zoom de iOS */ }
  .fsel-list { max-height: calc(72vh - 48px); }
  .fsel-item { padding: 13px var(--sp-4); font-size: 15px; }
}

/* Banda de cupon anunciado -------------------------------------------------
   La unica oferta que se puede anunciar sin inventar precios: no hay precio
   anterior en ninguna fuente, asi que un tachado seria falso. */
.promo-bar {
  background: var(--c-yellow);
  color: var(--c-yellow-ink);
  border-bottom: 1px solid var(--c-yellow-deep);
}
.promo-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  padding-block: 10px;
}
.promo-inner > svg { width: 17px; height: 17px; flex-shrink: 0; }
.promo-text { margin: 0; font-size: 14px; }
.promo-code {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  background: var(--c-yellow-ink);
  color: var(--c-yellow);
}
.promo-copy {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-yellow-ink);
  border: 1px solid rgba(26, 20, 0, 0.4);
  padding: 5px 10px;
  transition: background var(--t-fast);
}
.promo-copy:hover { background: rgba(26, 20, 0, 0.1); }
@media (max-width: 640px) {
  .promo-text { font-size: 13px; width: 100%; text-align: center; }
  .promo-inner { gap: var(--sp-2); }
}

/* Cupon en la caja de compra de la ficha */
.pdp-promo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 var(--sp-3);
  padding: 9px 11px;
  background: #fdf3cd;
  border: 1px solid var(--c-yellow-deep);
  font-size: 13px;
  color: var(--c-text);
}
.pdp-promo svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: var(--c-yellow-deep); }
.pdp-promo b {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

/* ---- Lo mas pedido (portada) ---- */
.pop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.pop-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-card-face);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.pop-card:hover {
  border-color: var(--c-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.pop-card svg { flex-shrink: 0; color: var(--c-text-mute); }
.pop-card:hover svg { color: var(--c-blue); }
.pop-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 15px;
  color: var(--c-text);
  line-height: 1.25;
}
.pop-brand {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--c-text-mute);
}
.pop-desde {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--c-text-soft);
  white-space: nowrap;
}
@media (max-width: 900px) { .pop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pop-grid { grid-template-columns: 1fr; } }

/* El panel del selector en movil es fixed dentro de .filter-bar (sticky), que
   crea contexto de apilamiento: sin elevar la barra, el aviso de cookies se
   quedaba por encima y se comia la mitad inferior de la hoja. */
.filter-bar.has-fsel-open { z-index: var(--z-fsel); }

@media (max-width: 640px) {
  /* El boton flotante de WhatsApp vive fijo en la esquina inferior derecha y se
     comia el control de vista en lista, que caia justo debajo nada mas entrar:
     se veia, pero el toque iba al boton flotante. Los controles se agrupan a la
     izquierda para no disputarle esa esquina. */
  .shop-toolbar { justify-content: flex-start; gap: var(--sp-3); }
  .shop-view { order: -1; }
}

/* El flotante de WhatsApp se aparta mientras se baja por el catalogo, para no
   quedar encima del boton "Anadir" de las tarjetas (en movil se solapan). */
.wa-fab {
  transition: transform var(--t-med), opacity var(--t-med);
  transform: translateY(var(--fab-y, 0px));
}
.wa-fab.is-away {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: opacity var(--t-fast); }
  .wa-fab.is-away { transform: none; }
}

/* Nada mas cargar el catalogo en movil -antes de que haya scroll que lo aparte-
   el flotante caia justo encima del desplegable ORDENAR: se pulsaba WhatsApp
   queriendo ordenar. Se hace compacto y se pega mas a la esquina; sigue estando a
   mano y deja de tapar un control. */
@media (max-width: 720px) {
  .wa-fab { padding: 10px; right: 12px; bottom: 12px; }
  .wa-fab svg { width: 20px; height: 20px; }

  /* Los botones llevan white-space:nowrap, que esta bien para los normales pero
     rompe los de ancho completo con texto largo: "Enviar solicitud de tasación"
     medía 425px en una pantalla de 360 y se salia 102px. Como el contenedor
     recorta, la pagina no desbordaba y no se veia venir: simplemente el boton
     aparecia cortado. Los de bloque pueden envolver. */
  .btn-block {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
}

/* El menu movil vive DENTRO de .site-header, que es sticky con --z-header: eso
   crea contexto de apilamiento y encierra a sus hijos. Por muy alto que sea el
   z-index del menu, hacia fuera compite con el 100 del header, asi que el
   overlay (que cuelga del body) se le ponia encima: la pagina se veia atenuada
   y los enlaces del menu no respondian al toque. Se eleva el header entero
   mientras el menu esta abierto, que es lo unico que saca al menu de ese
   encierro sin moverlo de sitio en el DOM. */
.site-header:has(.nav-list.is-open) { z-index: var(--z-drawer); }

/* El panel del menu arranca en top:0 y cubre la esquina donde esta su propio
   boton, asi que con el menu abierto no habia forma de cerrarlo desde ahi: solo
   tocando fuera, y sin ninguna X a la vista. Se eleva el boton por encima del
   panel para que siga siendo el interruptor que el visitante espera. */
@media (max-width: 780px) {
  .nav-toggle {
    position: relative;
    z-index: calc(var(--z-drawer) + 1);
  }
  /* El boton queda ahora sobre el panel, asi que el menu empieza por debajo de
     el: sin este hueco el icono se pintaba encima del primer enlace. Va con la
     misma especificidad que la regla que define el panel (.site-nav .nav-list),
     o pierde aunque este despues en el archivo. */
  .site-nav .nav-list { padding-top: 104px; }
}

/* Area tactil del boton de quitar pieza: se ve igual (24px) pero se puede
   tocar en 48x48, que es lo que necesita un dedo. Sin ::after el usuario falla
   el toque y acaba pulsando la fila, que lleva a la ficha. */
@media (max-width: 900px) {
  .cart-line-remove { position: relative; }
  .cart-line-remove::after {
    content: '';
    position: absolute;
    inset: -12px;
  }
}

/* Area tactil de los controles pequenos ------------------------------------
   Varios iconos de la tienda median menos que la yema de un dedo: el de quitar
   un filtro, 16x16. Se amplia el area sensible con un ::after invisible, sin
   tocar nada de lo que se ve: el icono sigue igual de discreto y el toque ya no
   depende de la punteria. Referencia: 44x44, que es lo que recomiendan tanto
   Apple como las guias de accesibilidad para objetivos tactiles. */
.chip-x,
.shop-search-clear,
.shop-view button,
.brand-more { position: relative; }

.chip-x::after,
.shop-search-clear::after,
.shop-view button::after,
.brand-more::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

/* El chip es pequeno: si su boton crece a 44px se sale por arriba y por abajo y
   se comeria el toque de los chips vecinos. Se limita a lo alto de la fila y se
   gana anchura, que es donde hay sitio. */
.chip-x::after { height: max(100%, 30px); width: max(100%, 34px); }

/* ---- Areas tactiles en movil ----
   Medido tocando a distancias crecientes del centro (getBoundingClientRect no
   sirve: no ve los ::after). Estos cuatro quedaban por debajo de 40px, y dos
   estan en el camino de compra: el "igual que la direccion de envio" del
   checkout y el "crea tu cuenta" del acceso. Se amplia la zona pulsable sin
   cambiar nada de lo que se ve. */
@media (max-width: 900px) {
  .check {
    min-height: 44px;
    align-items: center;
  }
  .form-link,
  .auth-panel a,
  .ck-consent a {
    position: relative;
    display: inline-block;
    padding-block: 11px;
    margin-block: -11px;
  }
  .lang-switch {
    min-height: 44px;
    padding-block: 10px;
  }
  /* 44px es el minimo para el dedo, pero la barra mide 40 y recorta lo que
     sobra: el chip de idioma salia cortado por arriba y por abajo. No basta con
     subir el max-height de .topbar: quien fija el alto de verdad es
     .topbar-inner, con height:40px. */
  .topbar { max-height: 64px; }
  .topbar-inner { height: auto; min-height: 52px; }
  .header-action {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Aviso del estado de envio al ERP, en el panel */
.bo-erp {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  font-size: 13.5px;
}

/* Datos para pagar por transferencia (checkout, confirmacion y Mi cuenta) ----
   Es la unica via por la que el cliente ve el IBAN y el concepto mientras el
   correo transaccional siga apagado, asi que se le da peso visual. */
.pay-info {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: #fdf3cd;
  border: 1px solid var(--c-yellow-deep);
  text-align: left;
}
.pay-info--done { margin: var(--sp-6) auto 0; max-width: 560px; }
.pay-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 var(--sp-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text);
}
.pay-title svg { width: 15px; height: 15px; }
.pay-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 0;
  border-bottom: 1px solid rgba(224, 170, 0, 0.3);
  font-size: 14px;
}
.pay-row:last-of-type { border-bottom: 0; }
.pay-label {
  flex: 0 0 74px;
  font-size: 12px;
  color: var(--c-text-soft);
}
.pay-value {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.pay-copy {
  flex-shrink: 0;
  padding: 5px 9px;
  border: 1px solid var(--c-yellow-deep);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text);
}
.pay-copy:hover { background: var(--c-yellow); }
.pay-nota { margin: var(--sp-3) 0 0; font-size: 12.5px; color: var(--c-text-soft); }
/* El aviso de pasarela y el de "sin datos" son la misma pieza: un icono y una
   frase en linea. Sin el flex, el SVG (que es display:block) se lleva su propia
   linea y el aviso queda partido en dos. */
.pay-sin-datos,
.pay-aviso {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 13.5px;
  color: var(--c-text);
}
.pay-sin-datos svg,
.pay-aviso svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
@media (max-width: 640px) {
  .pay-row { flex-wrap: wrap; }
  .pay-label { flex-basis: 100%; }
  .pay-value { flex: 1 1 auto; }
}

/* Confirmacion de que el pago llego, en el detalle del pedido */
.od-pagado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-success);
}
.od-pagado svg { width: 13px; height: 13px; }

/* Horario bajo la direccion de recogida, en el detalle del pedido */
.od-nota { display: inline-block; margin-top: 4px; font-size: 12.5px; color: var(--c-text-mute); }

/* Aviso del resumen del checkout: hoy solo lo usa el porte de una pieza
   voluminosa, que va por agencia y no entra en el envio gratis por importe. */
.summary-aviso {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3);
  background: var(--c-plate);
  border-left: 3px solid var(--c-yellow);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--c-text-soft);
}

/* Aviso del buscador: se muestra cuando el rescate ha tenido que buscar otra
   cosa (el ERP no sabe hacer "o": una palabra que no use tira la busqueda a
   cero) o cuando hay muchas mas piezas con otra forma de decirlo. */
.shop-aviso {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-plate);
  border-left: 3px solid var(--c-blue-bright, var(--c-yellow));
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-text-soft);
}
.shop-aviso b { color: var(--c-text); font-weight: 600; }
.shop-aviso a { color: var(--c-blue, inherit); text-decoration: underline; font-weight: 600; }

/* Cabecera de grupo dentro del desplegable de tipo de pieza. Los cien tipos que
   publica el ERP se reparten en doce zonas del coche; en lista plana no hay
   quien los recorra. */
.fsel-grupo {
  padding: var(--sp-3) var(--sp-3) 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  background: var(--c-plate);
  border-top: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.fsel-list > .fsel-grupo:first-child { border-top: 0; }

/* Los desplegables nativos de la barra de filtros (Modelo, y en modo estatico
   tambien Precio, Ubicacion y Orden) se ven igual que los propios de Marca y
   Tipo de pieza.
   Sin esto desentonaban: `.select` hereda `border-radius` de la regla que
   comparte con `.input`, y `.fsel-btn` tiene las esquinas rectas. Puestos uno al
   lado del otro en la misma barra, Modelo salia con las esquinas redondeadas y
   los otros dos cuadrados. Tambien se igualan alto, tipografia y fondo, que
   tampoco coincidian (44 px contra 12+15+12, y 14 px de letra contra 15). */
.filter-bar .select {
  height: 44px;
  padding: 0 40px 0 var(--sp-3);
  border-radius: 0;
  background-color: var(--c-card-face);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--c-text-mute);
  background-position: right var(--sp-3) center;
}

/* Caja de Modelo apagada mientras no hay marca elegida. Se deja a la vista, no
   se esconde: si apareciera y desapareciera movería de sitio los otros dos
   filtros cada vez que se elige o se quita una marca. */
.fsel-btn.is-disabled,
.fsel-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--c-surface-2);
}

/* Teselas de marcas sin logo propio: el SVG ya es el nombre, asi que ocupa el
   sitio del logo y de la etiqueta juntos, centrado. Sin esto quedaba el nombre
   arriba, la etiqueta con el mismo nombre debajo, y pinta de tesela rota. */
.brand-tile.is-wordmark { justify-content: center; }
.brand-tile.is-wordmark .brand-logo { height: 34px; }