/* =====================================================================
   JB Ferrekeys Distribuciones: sistema visual de la tienda.
   Mundo: negro del local, amarillo JB para la acción, oro de latón para
   líneas y medidas; tiquete blanco de mostrador con borde de dientes de llave.
   Colores en OKLCH (hex de partida y contraste en tools/tokens-color.mjs).
   ===================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo.woff2?v=1fbc307a") format("woff2-variations"), url("/fonts/archivo.woff2?v=1fbc307a") format("woff2");
  font-weight: 400 900;
  font-stretch: 62% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/fonts/martian-mono.woff2?v=1bc843fe") format("woff2-variations"), url("/fonts/martian-mono.woff2?v=1bc843fe") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* color */
  --negro: oklch(13.4% 0.005 262.3);
  --negro-2: oklch(18.6% 0.009 264.3);
  --negro-3: oklch(26.8% 0.012 264.4);
  --humo: oklch(74.7% 0.011 261.8);
  --amarillo: oklch(86.9% 0.176 92.4);
  --amarillo-2: oklch(82.7% 0.169 90.5);
  --oro: oklch(74.5% 0.126 85.7);
  --oro-texto: oklch(49.6% 0.097 82.8);
  --papel: oklch(96.7% 0.003 264.5);
  --blanco: oklch(100% 0 0);
  --tinta: oklch(20% 0.009 264.4);
  --tinta-2: oklch(41.5% 0.016 262.3);
  --tinta-3: oklch(52.2% 0.016 258.4);
  --linea: oklch(90.6% 0.008 260.7);
  --linea-suave: oklch(94% 0.005 260);
  --verde: oklch(49.5% 0.116 152.6);
  --rojo: oklch(50.1% 0.178 28.7);
  --papel-tiquete: oklch(99.4% 0.002 95);
  --laton: oklch(80% 0.11 86);
  --laton-2: oklch(70% 0.11 84);
  --acero: oklch(74% 0.008 264);
  --foco: var(--tinta);

  /* tipo */
  --f-texto: "Archivo", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* medidas */
  --cab-alto: 56px;
  --ancho: 1440px;
  --pad: clamp(16px, 3.4vw, 40px);
  --r-control: 10px;
  --r-card: 14px;
  --r-tiquete: 6px;

  /* profundidad */
  --sombra-1: 0 1px 2px oklch(20% 0.01 264 / 0.06), 0 4px 14px oklch(20% 0.01 264 / 0.06);
  --sombra-2: 0 2px 4px oklch(20% 0.01 264 / 0.08), 0 14px 32px oklch(20% 0.01 264 / 0.12);
  --sombra-hoja: 0 -10px 40px oklch(0% 0 0 / 0.22);

  /* capas */
  --z-cab: 30;
  --z-barra: 40;
  --z-velo: 50;
  --z-hoja: 60;
  --z-aviso: 70;

  /* movimiento */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-hoja: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (min-width: 1024px) {
  :root { --cab-alto: 68px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--cab-alto) + 16px);
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1rem;
  line-height: 1.55;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
html.bloqueo, html.bloqueo body { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, figure, fieldset { margin: 0; padding: 0; border: 0; }
legend { padding: 0; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 6px; }
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }
.mono { font-family: var(--f-mono); font-size: 0.875em; letter-spacing: -0.02em; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--amarillo); color: var(--negro); padding: 10px 16px; border-radius: var(--r-control);
  font-weight: 700; text-decoration: none; transition: top 160ms var(--ease-out);
}
.saltar:focus { top: 12px; }

.contenedor { width: min(100% - 2 * var(--pad), var(--ancho)); margin-inline: auto; }

/* ---------- tipografía ---------- */
.titulo-1 {
  font-size: clamp(2rem, 1.35rem + 2.4vw, 3.25rem);
  font-weight: 830;
  font-stretch: 70%;
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: 0.004em;
  text-wrap: balance;
}
.titulo-2 {
  font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem);
  font-weight: 820;
  font-stretch: 72%;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.titulo-2--claro { color: var(--blanco); }
.titulo-3 {
  font-size: 1.25rem;
  font-weight: 750;
  font-stretch: 92%;
  line-height: 1.2;
  text-wrap: balance;
}
.enlace-flecha {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 4px; text-decoration-color: var(--oro);
}
.enlace-flecha .ico { transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .enlace-flecha:hover .ico { transform: translateX(3px); }
}

/* ---------- íconos ---------- */
.ico { width: 22px; height: 22px; flex: none; fill: currentColor; }
.ico--s { width: 18px; height: 18px; }
.ico--xs { width: 13px; height: 13px; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0 1.2em;
  border: 2px solid transparent; border-radius: var(--r-control);
  font-weight: 750; font-stretch: 92%; font-size: 1rem; line-height: 1.1; letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn .ico { width: 20px; height: 20px; }
.btn--primario { background: var(--amarillo); color: var(--negro); }
.btn--fantasma { border-color: oklch(100% 0 0 / 0.6); color: var(--blanco); }
.btn--oscuro { background: var(--negro); color: var(--blanco); }
.btn--borde { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.btn--wa { background: var(--negro); color: var(--blanco); }
.btn--bloque { width: 100%; }
.btn--chico { min-height: 40px; padding: 0 0.85em; font-size: 0.9375rem; }
@media (hover: hover) and (pointer: fine) {
  .btn--primario:hover { background: var(--amarillo-2); }
  .btn--fantasma:hover { background: oklch(100% 0 0 / 0.1); border-color: var(--blanco); }
  .btn--oscuro:hover, .btn--wa:hover { background: var(--negro-3); }
  .btn--borde:hover { background: oklch(20% 0.01 264 / 0.06); }
}
.btn-ico {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: var(--r-control); background: transparent; color: inherit; cursor: pointer;
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.btn-ico:active { transform: scale(0.94); }
.btn-ico--borde { border: 1.5px solid var(--linea); background: var(--blanco); }
.btn-ico--oscuro { background: oklch(100% 0 0 / 0.08); }
@media (hover: hover) and (pointer: fine) {
  .btn-ico:hover { background: oklch(50% 0 0 / 0.1); }
  .btn-ico--borde:hover { border-color: var(--tinta-3); background: var(--blanco); }
}
.btn-texto {
  background: none; border: 0; padding: 10px 6px; cursor: pointer;
  font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
.insignia {
  display: inline-block; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--amarillo); color: var(--negro);
  font: 700 0.6875rem/20px var(--f-mono); text-align: center;
}
.insignia--oscura { background: var(--negro); color: var(--amarillo); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1.5px solid var(--linea); border-radius: 999px; background: var(--blanco);
  font-weight: 600; font-size: 0.9375rem; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.chip:active { transform: scale(0.97); }
.chip__n { font: 500 0.75rem/1 var(--f-mono); color: var(--tinta-3); }
.chip[aria-pressed="true"] { background: var(--negro); border-color: var(--negro); color: var(--blanco); }
.chip[aria-pressed="true"] .chip__n { color: var(--amarillo); }
@media (hover: hover) and (pointer: fine) {
  .chip:hover { border-color: var(--tinta-3); }
}

/* ---------- cabecera ---------- */
.cab {
  position: sticky; top: 0; z-index: var(--z-cab);
  background: var(--negro); color: var(--blanco); --foco: var(--amarillo);
  border-bottom: 1px solid oklch(100% 0 0 / 0.07);
}
.cab__fila { display: flex; align-items: center; gap: 6px; height: var(--cab-alto); }
.cab__menu { margin-left: -8px; }
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; text-decoration: none; }
.marca__sello { width: 38px; height: auto; }
.marca__texto { display: grid; gap: 3px; }
.marca__nombre { font-size: 1.1875rem; font-weight: 860; font-stretch: 70%; line-height: 0.9; text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; }
/* 320 a 374 px: el nombre cabe en una línea entre el menú y los botones */
@media (max-width: 374px) { .marca { gap: 8px; } .marca__nombre { font-size: 1rem; } .marca__linea { letter-spacing: 0.1em; } }
@media (max-width: 339px) { .marca__sello { width: 34px; } }
.marca__linea { font-size: 0.625rem; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oro); line-height: 1; }
.cab__nav { display: none; }
.cab .buscador { display: none; }
.cab__wa { display: none; }
.cab__cot {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px;
  border-radius: var(--r-control); background: oklch(100% 0 0 / 0.08); color: var(--blanco);
  font-weight: 700; text-decoration: none; transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.cab__cot:active { transform: scale(0.97); }
.cab__cot-txt { display: none; }
.cab__cot .insignia { position: absolute; top: 3px; right: 1px; }
.cab__cot.latido .insignia { animation: latido 260ms var(--ease-out); }
@keyframes latido { 40% { transform: scale(1.28); } }
@media (hover: hover) and (pointer: fine) {
  .cab__cot:hover { background: oklch(100% 0 0 / 0.14); }
  .cab__enlace:hover { color: var(--blanco); background: oklch(100% 0 0 / 0.07); }
}
@media (min-width: 560px) {
  .cab__wa { display: inline-grid; }
}
@media (min-width: 1024px) {
  .cab__fila { gap: 10px; }
  .cab__buscar { display: none; }
  .marca__sello { width: 46px; }
  .marca__nombre { font-size: 1.375rem; }
  .marca { margin-right: 6px; flex-shrink: 0; }
  .marca__nombre, .cab__enlace { white-space: nowrap; }
  .cab__nav { display: block; flex-shrink: 0; }
  .cab__nav ul { display: flex; gap: 2px; }
  .cab__nav li:nth-child(n + 3) { display: none; }
  .cab .buscador { display: flex; flex: 1 1 auto; min-width: 0; max-width: 440px; margin-left: auto; }
  .cab__cot { padding: 0 14px 0 12px; }
  .cab__cot-txt { display: inline; }
  .cab__cot .insignia { position: static; }
}
/* los cuatro enlaces caben junto a un buscador usable desde 1360 px */
@media (min-width: 1360px) {
  .cab__nav li:nth-child(n + 3) { display: list-item; }
  /* con los cuatro enlaces a la vista ya no hace falta el menú: antes, Guía de medidas y Contacto viven en él */
  .cab__menu { display: none; }
}
.cab__enlace {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px;
  border: 0; border-radius: 8px; background: none; cursor: pointer;
  color: oklch(100% 0 0 / 0.84); font-weight: 600; font-stretch: 95%; font-size: 0.9375rem; text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease;
}
.cab__enlace[aria-expanded="true"] { color: var(--amarillo); }
.cab__enlace[aria-expanded="true"] .ico { transform: rotate(180deg); }
.cab__enlace .ico { transition: transform 200ms var(--ease-out); }

/* mega menú del catálogo */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--negro-2); border-bottom: 1px solid oklch(100% 0 0 / 0.08);
  box-shadow: 0 24px 48px oklch(0% 0 0 / 0.4);
  opacity: 0; transform: translateY(-6px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.mega.abierta { opacity: 1; transform: none; }
.mega__fila { display: grid; gap: 20px; padding-block: 24px 22px; }
.mega__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; }
.mega__titulo {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-weight: 800; font-stretch: 80%; text-transform: uppercase; font-size: 1.0625rem; letter-spacing: 0.01em; color: var(--blanco);
}
.mega__titulo .ico { color: var(--oro); }
.mega__subs { display: grid; gap: 2px; margin-top: 8px; padding-left: 32px; }
.mega__subs a { display: inline-block; padding: 3px 0; color: var(--humo); text-decoration: none; font-size: 0.9375rem; }
.mega__todo { display: inline-flex; align-items: center; gap: 8px; justify-self: start; color: var(--amarillo); font-weight: 700; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .mega__subs a:hover, .mega__titulo:hover { color: var(--amarillo); }
}

/* ---------- buscador ---------- */
.buscador { position: relative; display: flex; align-items: center; width: 100%; }
.buscador__lupa { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--tinta-3); pointer-events: none; }
.buscador__campo {
  width: 100%; height: 44px; padding: 0 40px 0 40px;
  border: 1.5px solid var(--linea); border-radius: var(--r-control); background: var(--blanco); color: var(--tinta);
  font-size: 1rem; outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.buscador__campo::placeholder { color: var(--tinta-3); }
.buscador__campo:focus { border-color: var(--tinta); box-shadow: 0 0 0 3px oklch(86.9% 0.176 92.4 / 0.55); }
.buscador__campo::-webkit-search-cancel-button { display: none; }
.cab .buscador__campo { border-color: transparent; }
.buscador__limpiar { position: absolute; right: 4px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; color: var(--tinta-2); cursor: pointer; border-radius: 8px; }
.buscador__panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 5;
  background: var(--blanco); color: var(--tinta); border-radius: var(--r-card); box-shadow: var(--sombra-2);
  max-height: min(70vh, 560px); overflow: auto; overscroll-behavior: contain; padding: 6px;
}
.buscador__lista { display: grid; }
.res {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px; border-radius: 10px; text-decoration: none; cursor: pointer;
}
.res[aria-selected="true"], .res:focus-visible { background: oklch(86.9% 0.176 92.4 / 0.28); outline: none; }
@media (hover: hover) and (pointer: fine) { .res:hover { background: var(--papel); } }
.res__foto { width: 48px; height: 48px; border-radius: 8px; background: var(--blanco); border: 1px solid var(--linea-suave); display: grid; place-items: center; overflow: hidden; }
.res__foto img { width: 100%; height: 100%; object-fit: contain; }
.res__foto .ico { color: var(--tinta-3); }
.res__nombre { display: block; font-weight: 700; font-size: 0.9375rem; line-height: 1.25; }
.res__meta { display: block; font-size: 0.8125rem; color: var(--tinta-3); }
.res__precio { font: 600 0.8125rem/1 var(--f-mono); letter-spacing: -0.02em; white-space: nowrap; }
.res mark { background: none; color: inherit; box-shadow: inset 0 -0.45em 0 oklch(86.9% 0.176 92.4 / 0.55); }
.buscador__pie { padding: 10px 8px 6px; font-size: 0.875rem; color: var(--tinta-2); }
.buscador__pie a { font-weight: 700; }
.buscador__pie:empty { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--negro); color: var(--blanco); --foco: var(--amarillo); overflow: hidden; }
/* celular vertical: la foto entera (su franja negra de arriba es el espacio del texto) */
.hero__foto img {
  width: 100%;
  height: 177.7vw;
  object-fit: cover;
  object-position: 50% 100%;
}
/* tableta vertical: la pantalla completa; el recorte sale sobre todo del negro de arriba y deja las llaves */
@media (min-width: 600px) and (max-width: 1023px) and (orientation: portrait) {
  .hero__foto img {
    height: min(177.7vw, calc(100svh - var(--cab-alto)));
    object-position: 50% 85%;
  }
}
.hero__capa { position: absolute; inset: 0; display: flex; align-items: flex-start; padding-top: clamp(22px, 6vw, 48px); }
.hero__texto { display: grid; gap: 14px; max-width: 34rem; }
.hero__titulo {
  font-size: clamp(2.2rem, 0.6rem + 3.2vw, 3.6rem);
  font-weight: 860;
  font-stretch: 68%;
  line-height: 0.94;
  text-transform: uppercase;
  letter-spacing: 0.004em;
  text-wrap: balance;
}
.hero__frase { color: oklch(100% 0 0 / 0.84); font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem); max-width: 31rem; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@media (max-width: 1023px) and (orientation: portrait) {
  .hero__titulo { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.4rem); font-stretch: 63%; }
}
@media (max-width: 479px) {
  .hero__acciones .btn { padding-inline: 0.95em; }
  .solo-ancho { display: none; }
}
@media (max-width: 360px) {
  .hero__titulo { font-size: 1.875rem; }
  .hero__frase { font-size: 0.9375rem; }
  .hero__texto { gap: 12px; }
  .hero__acciones { gap: 8px; }
  .hero__acciones .btn { padding-inline: 0.8em; gap: 0.4em; font-size: 0.9375rem; }
}
@media (min-width: 1024px), (orientation: landscape) {
  .hero__foto img {
    height: clamp(360px, min(56.25vw, calc(100svh - var(--cab-alto))), 980px);
    object-position: 100% 50%;
  }
  .hero__capa { align-items: center; padding-top: 0; }
  .hero__texto { max-width: min(48vw, 40rem); gap: 18px; }
}

/* ---------- secciones del inicio ---------- */
.seccion { padding-block: clamp(48px, 6.5vw, 96px); }
.seccion__cab { display: grid; gap: 12px; margin-bottom: clamp(20px, 3vw, 32px); }
.seccion__cab--fila { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.seccion__intro { color: var(--tinta-2); max-width: 62ch; }
.seccion--destacados .seccion__intro { margin-bottom: 22px; }

/* categorías */
/* Cada tile: foto arriba (celular) o a la derecha (escritorio); todo el tile es el enlace a la categoría
   y las subcategorías quedan por encima como enlaces propios. */
.cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cat { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--blanco); border-radius: var(--r-card); box-shadow: var(--sombra-1); overflow: hidden; transition: box-shadow 200ms var(--ease-out); }
.cat__enlace { display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 14px; text-decoration: none; min-width: 0; }
.cat__enlace::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cat__foto { display: grid; place-items: center; aspect-ratio: 16 / 10; margin-bottom: 8px; min-width: 0; }
.cat__foto img { width: 100%; height: 100%; object-fit: contain; }
.cat__foto .sinfoto { width: 100%; height: 100%; }
.cat__nombre { font-weight: 820; font-stretch: 74%; text-transform: uppercase; font-size: 1.0625rem; line-height: 1.02; letter-spacing: 0.01em; overflow-wrap: break-word; }
.cat__cuenta { font: 500 0.75rem/1.4 var(--f-mono); color: var(--tinta-3); letter-spacing: -0.02em; }
.cat__subs { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cat:hover { box-shadow: var(--sombra-2); }
  .cat:hover .cat__nombre { text-decoration: underline; text-decoration-color: var(--oro); text-decoration-thickness: 3px; text-underline-offset: 4px; }
}
@media (min-width: 768px) {
  .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 1024px) {
  .cats { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .cat { min-height: 236px; padding: 20px; }
  .cat--1 { grid-column: span 5; } .cat--2 { grid-column: span 4; } .cat--3 { grid-column: span 3; }
  .cat--4 { grid-column: span 3; } .cat--5 { grid-column: span 4; } .cat--6 { grid-column: span 5; }
  .cat__enlace { position: static; padding: 0; max-width: 62%; }
  .cat__foto { position: absolute; right: 16px; bottom: 16px; width: 40%; height: 64%; margin: 0; aspect-ratio: auto; display: flex; align-items: flex-end; justify-content: flex-end; pointer-events: none; }
  .cat__foto img { width: 100%; height: 100%; object-fit: contain; object-position: 100% 100%; }
  .cat__nombre { font-size: 1.375rem; }
  .cat__subs { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-content: flex-end; gap: 2px 14px; margin-top: auto; padding-top: 16px; max-width: 58%; font-size: 0.875rem; }
  .cat__subs a { display: inline-block; padding: 3px 0; color: var(--tinta-2); text-decoration: none; }
  .cat__subs a:hover { color: var(--tinta); text-decoration: underline; }
  .cat--3 .cat__subs, .cat--4 .cat__subs { max-width: 56%; }
}

/* sin foto */
.sinfoto {
  display: grid; place-items: center; align-content: center; gap: 8px; width: 100%; height: 100%;
  background: var(--papel);
  color: var(--tinta-3); border-radius: 10px; font: 500 0.6875rem/1.2 var(--f-mono); text-align: center; letter-spacing: -0.01em;
}
.sinfoto .ico { width: 34%; height: auto; max-width: 64px; aspect-ratio: 1; color: var(--oro-texto); }

/* carrusel */
.carrusel {
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: max(var(--pad), calc((100% - var(--ancho)) / 2));
  scroll-padding-inline: max(var(--pad), calc((100% - var(--ancho)) / 2));
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel__pista { display: grid; grid-auto-flow: column; grid-auto-columns: min(62vw, 250px); gap: 12px; padding-bottom: 12px; }
.carrusel__pista > * { scroll-snap-align: start; }
.carrusel__flechas { display: none; gap: 8px; }
@media (min-width: 768px) {
  .carrusel__pista { grid-auto-columns: 250px; gap: 16px; }
  .carrusel__flechas { display: flex; }
}

/* tarjeta de producto */
.tarjeta {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--blanco); border-radius: var(--r-card); box-shadow: var(--sombra-1);
  transition: box-shadow 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.tarjeta__enlace { display: flex; flex-direction: column; flex: 1; text-decoration: none; border-radius: inherit; }
.tarjeta__foto { display: grid; place-items: center; aspect-ratio: 1; padding: 9%; border-bottom: 1px solid var(--linea-suave); }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: contain; }
.tarjeta__cuerpo { display: flex; flex-direction: column; gap: 3px; flex: 1; padding: 11px 12px 13px; }
.tarjeta__nombre {
  font-weight: 720; font-stretch: 92%; font-size: 0.9375rem; line-height: 1.24;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tarjeta__marca { font-size: 0.8125rem; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta__dato { font-size: 0.8125rem; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: auto; padding-top: 8px; }
.tarjeta__valor { font: 700 1rem/1.1 var(--f-mono); letter-spacing: -0.03em; }
.tarjeta__desde, .tarjeta__unidad { font-size: 0.75rem; color: var(--tinta-3); }
.tarjeta__desde { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta__nota { flex-basis: 100%; font-size: 0.75rem; color: var(--tinta-3); }
.tarjeta__precio--consulta { font-size: 0.8125rem; font-weight: 650; color: var(--tinta-2); }
.tarjeta__sumar {
  position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: var(--negro); color: var(--amarillo); cursor: pointer;
  box-shadow: 0 2px 6px oklch(0% 0 0 / 0.2); transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.tarjeta__sumar:active { transform: scale(0.92); }
.tarjeta__sumar .ico { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }
  .tarjeta:hover .tarjeta__nombre { text-decoration: underline; text-decoration-color: var(--oro); text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .tarjeta__sumar:hover { background: var(--negro-3); }
}
@media (min-width: 768px) {
  .tarjeta__cuerpo { padding: 14px 16px 16px; }
  .tarjeta__nombre { font-size: 1rem; }
  .tarjeta__valor { font-size: 1.0625rem; }
}

/* cotizar (demostración) */
.seccion--cotizar { background: var(--blanco); position: relative; isolation: isolate; overflow-x: clip; }
.cotizar { --cot-gap: 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cot-gap); align-items: start; }
.pasos { counter-reset: paso; display: grid; gap: 18px; margin: 26px 0 28px; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; }
.pasos li::before {
  content: counter(paso); grid-row: span 2; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; background: var(--negro); color: var(--blanco); font: 700 0.875rem/1 var(--f-mono);
}
.pasos__verbo { font-weight: 800; font-stretch: 80%; font-size: 1.1875rem; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.3; padding-top: 5px; }
.pasos p:not(.pasos__verbo) { color: var(--tinta-2); max-width: 52ch; }
/* el mostrador es una superficie a sangre, no un marco: franja negra de borde a borde en celular,
   mitad derecha de la sección hasta el borde de la pantalla en escritorio. El tiquete sale de la ranura. */
.cotizar__tiquete { margin-inline: calc(-1 * var(--pad)); padding: 36px var(--pad) 44px; background: var(--negro); }
.cotizar__tiquete > .tiquete { max-width: 460px; margin-inline: auto; }
.cotizar__tiquete > .tiquete::before {
  content: ""; position: absolute; left: -10px; right: -10px; top: -9px; height: 12px; border-radius: 6px;
  background: var(--negro-3); box-shadow: inset 0 -3px 0 oklch(0% 0 0 / 0.55);
}
@media (min-width: 1024px) {
  .cotizar { --cot-gap: clamp(56px, 7vw, 112px); grid-template-columns: minmax(0, 34rem) 460px; justify-content: center; }
  .cotizar__tiquete { margin: 0; padding: 12px 0 0; background: none; }
  .cotizar__tiquete::before {
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; width: 100vw;
    margin-left: calc(var(--cot-gap) / -2); background: var(--negro);
  }
}

/* banda de negocios */
.banda { position: relative; background: var(--negro); color: var(--humo); --foco: var(--amarillo); overflow: hidden; }
.banda__rejilla { display: grid; gap: 8px; padding-top: clamp(48px, 6.5vw, 88px); }
.banda__texto { display: grid; gap: 16px; align-content: start; max-width: 40rem; }
.banda__texto > p { color: oklch(100% 0 0 / 0.8); max-width: 60ch; }
.banda__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; margin: 6px 0; }
.banda__lista li { display: grid; }
.banda__lista a {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px;
  border: 1px solid var(--negro-3); border-radius: var(--r-control); color: var(--blanco); text-decoration: none;
  font-weight: 650; font-size: 0.9375rem; line-height: 1.2; transition: border-color 160ms ease, background-color 160ms ease;
}
.banda__lista .ico { color: var(--oro); }
@media (hover: hover) and (pointer: fine) {
  .banda__lista a:hover { border-color: var(--oro); background: var(--negro-2); }
}
.banda__nota { font-size: 0.9375rem; color: var(--humo); }
.banda__texto .btn { justify-self: start; margin-bottom: 8px; }
.banda__jb { display: flex; justify-content: center; align-items: flex-end; margin-top: 8px; }
.banda__jb img { width: min(78vw, 360px); margin-bottom: -2px; }
@media (min-width: 1024px) {
  .banda__rejilla { grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; }
  .banda__texto { padding-bottom: clamp(48px, 6.5vw, 88px); }
  .banda__jb { margin-top: 0; }
  .banda__jb img { width: 420px; }
  .banda__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* guía de medidas */
.seccion--guia { background: var(--papel); }
.pestanas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 18px; padding-bottom: 2px; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  flex: none; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--linea); border-radius: 999px; background: var(--blanco);
  font-weight: 700; font-stretch: 92%; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.pestana[aria-selected="true"] { background: var(--negro); border-color: var(--negro); color: var(--amarillo); }
.guia__panel { display: grid; background: var(--blanco); border-radius: var(--r-card); box-shadow: var(--sombra-1); overflow: hidden; }
.guia[data-js] .guia__panel[data-oculto] { display: none; }
.guia:not([data-js]) .guia__panel + .guia__panel { margin-top: 16px; }
.guia__figura { display: grid; place-items: center; align-content: center; background: oklch(94% 0.004 264); padding: clamp(18px, 3vw, 36px); }
.guia__texto { display: grid; gap: 16px; align-content: center; padding: clamp(18px, 3vw, 40px); }
.guia__puntos { display: grid; gap: 14px; }
.guia__puntos dt { font-weight: 800; font-stretch: 88%; }
.guia__puntos dd { color: var(--tinta-2); max-width: 58ch; }
.guia__texto .enlace-flecha { justify-self: start; }
@media (min-width: 900px) {
  .guia__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
}

/* diagramas */
.diagrama { width: 100%; max-width: 420px; height: auto; overflow: visible; }
.diagrama text { font-family: var(--f-mono); }
.d-cuerpo { fill: var(--laton); stroke: var(--tinta); stroke-width: 3; }
.d-cuerpo2 { fill: var(--laton-2); stroke: var(--tinta); stroke-width: 3; }
.d-arco { fill: none; stroke: var(--acero); stroke-width: 18; }
.d-ojo { fill: var(--tinta); }
.d-cota line { stroke: var(--oro-texto); stroke-width: 2; }
.d-guia { stroke: var(--oro-texto); stroke-width: 1.5; stroke-dasharray: 3 3; }
.d-burbuja circle { fill: var(--negro); }
.d-burbuja text { fill: var(--oro); font-size: 12px; font-weight: 700; text-anchor: middle; }
.d-hueco { fill: var(--tinta-2); }
.d-leva { fill: var(--acero); stroke: var(--tinta); stroke-width: 2; }
.d-agujero { fill: var(--blanco); stroke: var(--tinta); stroke-width: 2; }
.d-eje { stroke: var(--tinta-3); stroke-width: 1.5; stroke-dasharray: 6 4; }
.d-carcasa { fill: oklch(91% 0.006 264); stroke: var(--tinta); stroke-width: 2; }
.d-rotor { fill: var(--laton); stroke: var(--tinta); stroke-width: 2; }
.d-camara { fill: oklch(98% 0.003 264); }
.d-resorte { fill: none; stroke: var(--tinta-2); stroke-width: 2; stroke-linejoin: round; }
.d-contraguarda { fill: var(--acero); stroke: var(--tinta); stroke-width: 1.5; }
.d-guarda { fill: var(--laton-2); stroke: var(--tinta); stroke-width: 1.5; }
.d-llave { fill: oklch(84% 0.006 264); stroke: var(--tinta); stroke-width: 2; }
.d-corte { stroke: var(--rojo); stroke-width: 2; stroke-dasharray: 8 5; }
.d-cabeza, .d-espiga { fill: var(--laton); stroke: var(--tinta); stroke-width: 2.5; fill-rule: evenodd; }
.d-ranura { stroke: var(--laton-2); stroke-width: 4; stroke-linecap: round; }
.leyenda { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.875rem; color: var(--tinta-2); }
.leyenda li { display: inline-flex; align-items: center; gap: 8px; }
.leyenda i { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid var(--tinta); }
.guia__figura { gap: 14px; }
.leyenda__guarda { background: var(--laton-2); }
.leyenda__contraguarda { background: var(--acero); }
.leyenda__resorte { background: var(--blanco); border-style: dotted !important; }
.leyenda__corte { height: 0 !important; border: 0 !important; border-top: 2px dashed var(--rojo) !important; border-radius: 0 !important; }

/* contacto */
.seccion--contacto { background: var(--blanco); }
.contacto { display: grid; gap: 28px; }
.contacto__dir { display: grid; gap: 10px; align-content: start; }
.contacto__linea { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem); font-weight: 860; font-stretch: 66%; line-height: 1; text-transform: uppercase; margin-top: 10px; }
.contacto__barrio { font-size: 1.125rem; color: var(--tinta-2); margin-bottom: 12px; }
.contacto__dir .btn { justify-self: start; }
.contacto__canales { display: grid; gap: 10px; align-content: start; }
.canal {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 14px 16px;
  border: 1.5px solid var(--linea); border-radius: var(--r-card); text-decoration: none; transition: border-color 160ms ease, transform 160ms var(--ease-out);
}
.canal:active { transform: scale(0.98); }
.canal__ico { grid-row: span 2; width: 48px; height: 48px; padding: 12px; border-radius: 12px; background: var(--negro); color: var(--amarillo); }
.canal__nombre { font-size: 0.875rem; color: var(--tinta-3); }
.canal__dato { font: 700 1.125rem/1.2 var(--f-mono); letter-spacing: -0.03em; }
@media (hover: hover) and (pointer: fine) { .canal:hover { border-color: var(--tinta); } }
.contacto__nota { font-size: 0.9375rem; color: var(--tinta-2); padding: 4px 2px; }
.contacto__redes { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.contacto__redes a { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; text-decoration: none; padding: 6px 0; }
@media (hover: hover) and (pointer: fine) { .contacto__redes a:hover { text-decoration: underline; } }
@media (min-width: 900px) {
  .contacto { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
}

/* preguntas */
.faq { display: grid; gap: 20px; }
.faq__lista { display: grid; gap: 8px; }
.faq__item { background: var(--blanco); border-radius: var(--r-card); box-shadow: var(--sombra-1); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 18px;
  font-weight: 720; font-stretch: 94%; cursor: pointer; list-style: none; border-radius: inherit;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__ico { transition: transform 220ms var(--ease-out); color: var(--oro-texto); }
.faq__item[open] .faq__ico { transform: rotate(45deg); }
.faq__item p { padding: 0 18px 18px; color: var(--tinta-2); max-width: 70ch; }
@media (min-width: 1024px) {
  .faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 56px; align-items: start; }
  .faq .titulo-2 { position: sticky; top: calc(var(--cab-alto) + 24px); }
}

/* cierre */
.cierre { background: var(--negro); color: var(--blanco); --foco: var(--amarillo); border-top: 1px solid var(--negro-3); }
.cierre__fila { display: grid; gap: 22px; padding-block: clamp(44px, 6vw, 80px); }
.cierre__titulo { font-size: clamp(2.2rem, 1.2rem + 4vw, 4.75rem); font-weight: 870; font-stretch: 66%; line-height: 0.95; text-transform: uppercase; color: var(--blanco); text-wrap: balance; }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 1024px) {
  .cierre__fila { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; }
}

/* ---------- migas ---------- */
.migas { padding-block: 14px 6px; font-size: 0.8125rem; color: var(--tinta-3); overflow-x: auto; scrollbar-width: none; }
.migas::-webkit-scrollbar { display: none; }
.migas ol { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.migas li { display: inline-flex; align-items: center; gap: 6px; }
.migas a { color: var(--tinta-2); text-decoration: none; padding: 6px 0; }
.migas [aria-current] { color: var(--tinta); font-weight: 650; }
@media (hover: hover) and (pointer: fine) { .migas a:hover { text-decoration: underline; } }

/* ---------- tienda (catálogo y categorías) ---------- */
.tienda { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 16px; padding-bottom: 72px; }
.cab-cat { background: var(--negro); color: var(--blanco); --foco: var(--amarillo); padding-bottom: clamp(18px, 3vw, 28px); }
.tienda__cab { display: grid; gap: 10px; }
.tienda__intro { color: oklch(100% 0 0 / 0.78); max-width: 70ch; }
.cab-cat .migas { color: var(--humo); }
.cab-cat .migas a { color: var(--humo); }
.cab-cat .migas [aria-current] { color: var(--blanco); }
.cab-cat .chip { background: transparent; border-color: var(--negro-3); color: var(--blanco); }
.cab-cat .chip .ico { color: var(--oro); }
.cab-cat .chip__n { color: var(--humo); }
.cab-cat .chip[aria-pressed="true"] { background: var(--amarillo); border-color: var(--amarillo); color: var(--negro); }
.cab-cat .chip[aria-pressed="true"] .chip__n { color: var(--negro); }
@media (hover: hover) and (pointer: fine) { .cab-cat .chip:hover { border-color: var(--oro); } }
.subnav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding: 6px var(--pad) 4px; }
.subnav::-webkit-scrollbar { display: none; }
.subnav li { flex: none; }
.subnav .chip { flex: none; }

.resultados { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; }
.resultados__barra {
  position: sticky; top: var(--cab-alto); z-index: 5;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-inline: calc(var(--pad) * -1); padding: 10px var(--pad);
  background: oklch(96.7% 0.003 264.5 / 0.94); backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--linea);
}
.resultados__cuenta { margin-right: auto; font-size: 0.9375rem; color: var(--tinta-2); }
.resultados__cuenta strong { font-family: var(--f-mono); color: var(--tinta); }
.resultados__q { margin-left: 4px; }
@media (max-width: 599px) { .resultados__q { display: none; } } /* en celular la búsqueda se ve en su chip activo */
.resultados__filtrar .insignia { margin-left: 4px; }
.orden { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; }
.orden__txt { color: var(--tinta-2); display: none; }
.orden select {
  min-height: 40px; padding: 0 34px 0 12px; border: 1.5px solid var(--tinta); border-radius: var(--r-control);
  background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2314161a' d='M216.5 104.5l-80 80a12 12 0 0 1-17 0l-80-80a12 12 0 0 1 17-17L128 159l71.5-71.5a12 12 0 0 1 17 17Z'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
  font-weight: 650; font-size: 0.9375rem; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.resultados__nota { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--tinta-3); }
.resultados__nota .ico { color: var(--oro-texto); }
.activos { display: flex; flex-wrap: wrap; gap: 6px; }
.activo {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px 0 12px; border: 0; border-radius: 999px;
  background: var(--negro); color: var(--blanco); font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.activo .ico { color: var(--amarillo); }
.activo--limpiar { background: none; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rejilla > .tarjeta[data-oculta] { display: none; }
@media (min-width: 600px) { .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .orden__txt { display: inline; } }
@media (max-width: 599px) {
  .resultados__barra { gap: 8px; flex-wrap: nowrap; }
  .resultados__cuenta { font-size: 0.875rem; white-space: nowrap; }
  .resultados__filtrar { padding-inline: 0.7em; }
  .orden select { width: 128px; text-overflow: ellipsis; }
}

.vacio { display: grid; gap: 16px; align-items: center; padding: 28px 20px; background: var(--blanco); border-radius: var(--r-card); box-shadow: var(--sombra-1); }
.vacio img { width: 140px; justify-self: center; }
.vacio__titulo { font-weight: 800; font-stretch: 84%; font-size: 1.25rem; text-transform: uppercase; margin-bottom: 6px; }
.vacio p:not(.vacio__titulo) { color: var(--tinta-2); max-width: 52ch; }
.vacio__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
@media (min-width: 768px) { .vacio { grid-template-columns: 160px minmax(0, 1fr); padding: 28px 32px; } .vacio img { width: 160px; } }

.tienda__guia { margin-top: 28px; padding: clamp(18px, 3vw, 28px); background: var(--blanco); border-radius: var(--r-card); box-shadow: var(--sombra-1); display: grid; gap: 14px; }
.guia-cat { display: grid; gap: 12px; }
.guia-cat dt { font-weight: 800; font-stretch: 88%; }
.guia-cat dd { color: var(--tinta-2); max-width: 66ch; }
@media (min-width: 900px) { .guia-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; } }

/* filtros: hoja inferior en celular, columna en escritorio */
.filtros {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-hoja);
  display: flex; flex-direction: column; max-height: 86svh;
  background: var(--papel); border-radius: 18px 18px 0 0; box-shadow: var(--sombra-hoja);
  transform: translateY(105%); visibility: hidden;
  transition: transform 280ms var(--ease-hoja), visibility 0s linear 280ms;
}
.filtros.abierta { transform: none; visibility: visible; transition: transform 280ms var(--ease-hoja), visibility 0s; }
.filtros__cab { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 8px 20px; border-bottom: 1px solid var(--linea); }
.filtros__titulo { font-weight: 820; font-stretch: 80%; text-transform: uppercase; font-size: 1.125rem; }
.filtros__cuerpo { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 8px 20px 12px; display: grid; gap: 4px; align-content: start; }
.filtros__pie { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: var(--papel); }
.filtros__vacio { color: var(--tinta-3); font-size: 0.9375rem; padding: 12px 0; }
.filtro { padding: 14px 0; border-bottom: 1px solid var(--linea); }
.filtro:last-child { border-bottom: 0; }
.filtro__titulo { font-weight: 800; font-stretch: 88%; font-size: 0.9375rem; margin-bottom: 8px; }
.filtro__opciones { display: grid; gap: 2px; }
.filtro__opciones--largo:not(.expandido) li:nth-child(n + 8) { display: none; }
.filtro__mas { font-size: 0.875rem; padding: 8px 0 0; }
.opcion-f { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.opcion-f input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion-f__caja {
  width: 22px; height: 22px; display: grid; place-items: center; border: 1.5px solid var(--tinta-3); border-radius: 6px; background: var(--blanco);
  color: transparent; transition: background-color 140ms ease, border-color 140ms ease;
}
.opcion-f input[type="radio"] + .opcion-f__caja { border-radius: 50%; }
.opcion-f input:checked + .opcion-f__caja { background: var(--negro); border-color: var(--negro); color: var(--amarillo); }
.opcion-f input:focus-visible + .opcion-f__caja { outline: 3px solid var(--foco); outline-offset: 2px; }
.opcion-f__txt { font-size: 0.9375rem; line-height: 1.3; }
.opcion-f__n { font: 500 0.75rem/1 var(--f-mono); color: var(--tinta-3); }
.opcion-f.sin-resultados { opacity: 0.4; }

/* riel de cotización (pantallas anchas) */
.riel { display: none; }

@media (min-width: 1024px) {
  .tienda { grid-template-columns: 232px minmax(0, 1fr); grid-template-areas: "filtros res"; column-gap: 28px; row-gap: 18px; padding-top: 24px; }
  .subnav { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }
  .resultados { grid-area: res; }
  .resultados__barra { margin-inline: 0; padding-inline: 0; }
  .resultados__filtrar { display: none; }
  .filtros {
    grid-area: filtros; position: sticky; top: calc(var(--cab-alto) + 12px); bottom: auto; left: auto; right: auto; align-self: start; z-index: auto;
    max-height: calc(100svh - var(--cab-alto) - 24px); transform: none; visibility: visible; transition: none;
    background: none; box-shadow: none; border-radius: 0;
  }
  .filtros__cab { padding: 0 0 8px; }
  .filtros__cerrar, .filtros__pie .btn--primario { display: none; }
  .filtros__cuerpo { padding: 0 6px 0 0; }
  .filtros__pie { grid-template-columns: 1fr; padding: 12px 0 0; background: none; }
}
@media (min-width: 1280px) {
  .tienda { grid-template-columns: 224px minmax(0, 1fr) 300px; grid-template-areas: "filtros res riel"; column-gap: 24px; }
  .riel {
    display: block; grid-area: riel; position: sticky; top: calc(var(--cab-alto) + 16px); align-self: start;
    max-height: calc(100svh - var(--cab-alto) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    /* margen interno para que la sombra del tiquete y su borde de llave no se corten */
    padding: 14px 18px 44px; margin: -14px -18px 0;
  }
}

/* ---------- ficha de producto ---------- */
.ficha-rejilla { display: grid; gap: 28px; padding-bottom: 24px; }
.ficha { display: grid; gap: 20px; min-width: 0; }
.ficha__galeria { display: grid; gap: 10px; align-content: start; }
.galeria__principal { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 7%; background: var(--blanco); border-radius: var(--r-card); box-shadow: var(--sombra-1); overflow: hidden; }
.galeria__principal img { width: 100%; height: 100%; object-fit: contain; }
.galeria__principal img.entrando { animation: foto-in 220ms var(--ease-out); }
@keyframes foto-in { from { opacity: 0.2; filter: blur(3px); } }
.galeria__minis { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.galeria__mini { width: 64px; height: 64px; padding: 4px; border: 2px solid transparent; border-radius: 10px; background: var(--blanco); cursor: pointer; }
.galeria__mini img { width: 100%; height: 100%; object-fit: contain; }
.galeria__mini[aria-pressed="true"] { border-color: var(--negro); }
.galeria__nota { display: flex; align-items: flex-start; gap: 8px; font-size: 0.8125rem; color: var(--tinta-3); }
.galeria__nota .ico { color: var(--oro-texto); margin-top: 1px; }
.ficha__compra { display: grid; gap: 14px; align-content: start; min-width: 0; }
.ficha__titulo { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 830; font-stretch: 72%; line-height: 1; text-transform: uppercase; text-wrap: balance; }
.ficha__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.875rem; color: var(--tinta-2); margin-top: -4px; }
.ficha__marca { font-weight: 700; color: var(--tinta); }
.ficha__sku { color: var(--tinta-3); }
.ficha__resumen { color: var(--tinta-2); max-width: 60ch; }
.ficha__precio { display: grid; gap: 2px; padding: 14px 16px; background: var(--blanco); border-radius: var(--r-card); box-shadow: var(--sombra-1); }
.precio { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.precio__valor { font: 700 clamp(1.625rem, 1.3rem + 1vw, 2rem)/1.1 var(--f-mono); letter-spacing: -0.04em; }
.precio__valor--consulta { font-family: var(--f-texto); font-size: 1.25rem; font-weight: 750; letter-spacing: 0; }
.precio__unidad { font-size: 0.9375rem; color: var(--tinta-3); }
.precio__etiqueta { font-size: 0.8125rem; color: var(--tinta-3); }
.ficha__disp { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 650; margin-top: 6px; color: var(--tinta-2); }
.ficha__disp::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--oro); }
.ficha__disp--disponible { color: var(--verde); }
.ficha__disp--disponible::before { background: var(--verde); }
.ficha__disp--agotado { color: var(--rojo); }
.ficha__disp--agotado::before { background: var(--rojo); }
.ficha__unica { font-size: 0.9375rem; }
.ficha__unica-et { color: var(--tinta-3); margin-right: 4px; }
.selector { display: grid; gap: 10px; }
.selector + .selector { margin-top: 6px; }
.selector__titulo { font-weight: 800; font-stretch: 88%; font-size: 0.9375rem; }
.selector__titulo span { font-weight: 600; color: var(--tinta-2); }
.selector__opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { position: relative; }
.opcion input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.opcion span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--linea); border-radius: var(--r-control);
  background: var(--blanco); font-weight: 650; font-size: 0.9375rem; transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms var(--ease-out);
}
.opcion input:checked + span { background: var(--negro); border-color: var(--negro); color: var(--blanco); box-shadow: inset 0 -3px 0 var(--amarillo); }
.opcion input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }
.opcion input:active + span { transform: scale(0.97); }
.opcion input:disabled + span { opacity: 0.4; text-decoration: line-through; cursor: not-allowed; }
.opcion--otra input:not(:checked) + span { border-style: dashed; color: var(--tinta-3); }
@media (hover: hover) and (pointer: fine) { .opcion input:not(:checked):not(:disabled):hover + span { border-color: var(--tinta-3); } }
.ficha__pedido { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin-top: 4px; }
.ficha__agregar { min-height: 52px; }
.ficha__preguntar { min-height: 48px; }
.ficha__aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-control); background: var(--blanco); border: 1.5px solid var(--oro); color: var(--tinta); font-size: 0.875rem; }
.ficha__aviso .ico { color: var(--oro-texto); margin-top: 2px; }
.cantidad { display: grid; grid-template-columns: 44px 52px 44px; align-items: center; height: 52px; border: 1.5px solid var(--linea); border-radius: var(--r-control); background: var(--blanco); }
.cantidad__btn { height: 100%; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: var(--r-control); }
.cantidad__btn:active { transform: scale(0.92); }
.cantidad__campo { width: 100%; height: 100%; border: 0; background: none; text-align: center; font: 700 1rem/1 var(--f-mono); -moz-appearance: textfield; appearance: textfield; }
.cantidad__campo::-webkit-outer-spin-button, .cantidad__campo::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.detalle { display: grid; gap: 16px; padding-bottom: 56px; }
.detalle__bloque { display: grid; gap: 12px; padding: clamp(18px, 3vw, 28px); background: var(--blanco); border-radius: var(--r-card); box-shadow: var(--sombra-1); align-content: start; min-width: 0; }
.detalle__bloque > p { color: var(--tinta-2); max-width: 70ch; }
.detalle__contenido strong { color: var(--tinta); }
.detalle__vacio { color: var(--tinta-3); }
.usos { display: grid; gap: 8px; }
.usos li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; color: var(--tinta-2); }
.usos .ico { color: var(--oro-texto); margin-top: 3px; }
.specs { display: grid; column-gap: 40px; }
@media (min-width: 768px) { .detalle__bloque--ancho .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .detalle__bloque--ancho .specs > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; } }
.specs > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--linea); }
.specs > div:last-child { border-bottom: 0; }
.specs dt { color: var(--tinta-3); font-size: 0.9375rem; }
.specs dd { font-weight: 650; font-size: 0.9375rem; }
.tabla-envoltura { overflow-x: auto; border-radius: 10px; }
.tabla-var { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 520px; }
.tabla-var th, .tabla-var td { padding: 10px 12px; text-align: left; white-space: nowrap; }
.tabla-var thead th { font-size: 0.75rem; font-weight: 700; color: var(--tinta-3); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1.5px solid var(--tinta); }
.tabla-var tbody tr:nth-child(even) { background: var(--papel); }
.tabla-var tbody th { font-weight: 700; }
.tabla-var tr.actual th { font-weight: 850; }
.tabla-var tr.actual th::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--amarillo); box-shadow: 0 0 0 1.5px var(--negro); vertical-align: 1px; }
@media (max-width: 599px) {
  .tabla-var { min-width: 0; }
  .tabla-var thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-var tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 12px; }
  .tabla-var tbody th, .tabla-var tbody td { padding: 0; white-space: normal; }
  .tabla-var tbody th { grid-column: 1; }
  .tabla-var tbody td { grid-column: 1; font-size: 0.8125rem; color: var(--tinta-2); }
  .tabla-var tbody td.num { grid-column: 2; grid-row: 1; text-align: right; color: var(--tinta); font-size: 0.875rem; }
  .tabla-var tbody td[data-et]::before { content: attr(data-et) ": "; color: var(--tinta-3); font-family: var(--f-texto); }
}
.tabla-var__u { color: var(--tinta-3); font-size: 0.75rem; }
.seccion--relacionados { padding-block: 8px 72px; }
.seccion--relacionados .titulo-2 { margin-bottom: 18px; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); }

@media (min-width: 768px) {
  .ficha { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .ficha__galeria { position: sticky; top: calc(var(--cab-alto) + 16px); }
  .detalle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detalle__bloque--ancho { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .ficha-rejilla { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
  .ficha-rejilla .riel { grid-area: auto; }
  .ficha { gap: 36px; }
}

/* barra inferior de la ficha (celular) */
.barra-ficha {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barra);
  display: flex; align-items: center; gap: 12px; padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background: var(--negro); color: var(--blanco); --foco: var(--amarillo);
  transform: translateY(110%); transition: transform 240ms var(--ease-out);
}
.barra-ficha.visible { transform: none; }
.barra-ficha__precio { display: grid; margin-right: auto; min-width: 0; }
.barra-ficha__valor { font: 700 1.125rem/1.1 var(--f-mono); letter-spacing: -0.03em; }
.barra-ficha__pres { font-size: 0.8125rem; color: var(--humo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-ficha .btn { min-width: 132px; }
@media (min-width: 1024px) { .barra-ficha { display: none; } }

/* ---------- barra de cotización (celular y tableta) ---------- */
.barra-cot {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: var(--z-barra);
  transform: translateY(calc(100% + 30px)); transition: transform 260ms var(--ease-out);
}
.barra-cot.visible { transform: none; }
.barra-cot__btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 16px;
  border: 0; border-radius: 14px; background: var(--negro); color: var(--blanco); cursor: pointer;
  box-shadow: 0 10px 30px oklch(0% 0 0 / 0.35); font-weight: 700; text-align: left;
  transition: transform 160ms var(--ease-out);
}
.barra-cot__btn:active { transform: scale(0.98); }
.barra-cot__ico { position: relative; display: grid; place-items: center; width: 34px; height: 34px; color: var(--amarillo); }
.barra-cot__ico .insignia { position: absolute; top: -6px; right: -8px; }
.barra-cot__txt { margin-right: auto; white-space: nowrap; }
.barra-cot__total { font: 700 1rem/1 var(--f-mono); color: var(--amarillo); letter-spacing: -0.03em; }
.barra-cot.latido .barra-cot__btn { animation: empuje 260ms var(--ease-out); }
@keyframes empuje { 40% { transform: translateY(-4px); } }
/* la barra acompaña hasta 1279 px; desde 1280 el tiquete está a la vista en el riel */
@media (min-width: 1280px) { .barra-cot { display: none; } }
@media (max-width: 1023px) { .barra-cot--escritorio { display: none; } }
@media (min-width: 1024px) { .barra-cot { left: auto; right: 24px; width: 380px; } }
.p--tienda .pie, .p--producto .pie { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
@media (min-width: 1280px) { .p--tienda .pie, .p--producto .pie { padding-bottom: 0; } }

/* ---------- tiquete de cotización ---------- */
.tiquete {
  --corte: 12px;
  position: relative; background: var(--papel-tiquete); color: var(--tinta);
  border-radius: var(--r-tiquete) var(--r-tiquete) 0 0; padding: 18px 16px 20px; margin-bottom: var(--corte);
  filter: drop-shadow(0 1px 1px oklch(20% 0.01 264 / 0.08)) drop-shadow(0 10px 18px oklch(20% 0.01 264 / 0.1));
  font-size: 0.875rem;
}
/* borde inferior con el perfil de una llave cortada */
.tiquete::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--corte); background: var(--papel-tiquete);
  clip-path: polygon(0 0, 100% 0, 100% 35%, 97% 35%, 95% 90%, 92% 90%, 90% 25%, 85% 25%, 83% 100%, 80% 100%, 78% 45%, 72% 45%, 70% 85%, 67% 85%, 65% 20%, 60% 20%, 58% 100%, 55% 100%, 53% 50%, 47% 50%, 45% 80%, 42% 80%, 40% 30%, 34% 30%, 32% 95%, 29% 95%, 27% 40%, 21% 40%, 19% 100%, 16% 100%, 14% 25%, 8% 25%, 6% 70%, 3% 70%, 1% 40%, 0 40%);
}
.tiquete--grande { font-size: 0.9375rem; padding: 24px 22px 26px; }
.tiq__cab { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1.5px dashed var(--linea); }
.tiq__cab img { grid-row: span 3; width: 34px; height: auto; background: var(--negro); border-radius: 50%; padding: 2px; }
.tiq__marca { font-weight: 860; font-stretch: 70%; text-transform: uppercase; font-size: 1rem; line-height: 1; letter-spacing: 0.02em; }
.tiq__sub { font: 500 0.6875rem/1.3 var(--f-mono); color: var(--tinta-3); letter-spacing: -0.02em; }
.tiq__ejemplo { justify-self: start; margin-top: 12px; padding: 3px 8px; border: 1.5px solid var(--oro-texto); border-radius: 6px; color: var(--oro-texto); font: 700 0.6875rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.tiq__lineas { display: grid; }
.tiq__linea { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 0; border-bottom: 1px dashed var(--linea); }
.tiq__linea.nueva { animation: imprimir 260ms var(--ease-out); }
@keyframes imprimir { from { clip-path: inset(0 0 100% 0); transform: translateY(-6px); } to { clip-path: inset(0 0 0 0); transform: none; } }
.tiq__nombre { font-weight: 700; line-height: 1.25; }
.tiq__nombre a { text-decoration: none; }
.tiq__nombre a:hover { text-decoration: underline; }
.tiq__pres { grid-column: 1; font: 500 0.75rem/1.35 var(--f-mono); color: var(--tinta-3); letter-spacing: -0.02em; }
.tiq__sub-total { grid-row: 1; grid-column: 2; font: 700 0.875rem/1.3 var(--f-mono); letter-spacing: -0.03em; text-align: right; }
.tiq__control { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.tiq__cant { display: grid; grid-template-columns: 36px 44px 36px; height: 36px; border: 1.5px solid var(--linea); border-radius: 8px; background: var(--blanco); }
.tiq__cant button { border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 8px; }
.tiq__cant button:active { transform: scale(0.9); }
.tiq__cant input { width: 100%; border: 0; background: none; text-align: center; font: 700 0.8125rem/1 var(--f-mono); -moz-appearance: textfield; appearance: textfield; }
.tiq__cant input::-webkit-outer-spin-button, .tiq__cant input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tiq__unit { grid-column: 1 / -1; font: 500 0.75rem/1.35 var(--f-mono); color: var(--tinta-3); letter-spacing: -0.02em; }
.tiq__control > :last-child { margin-left: auto; }
.tiq__quitar { width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; border-radius: 8px; color: var(--tinta-3); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .tiq__quitar:hover { color: var(--rojo); background: oklch(50% 0.178 28.7 / 0.08); } }
.tiq__total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding: 14px 0 4px; }
.tiq__total-et { white-space: nowrap; }
@media (pointer: coarse) {
  .tiq__cant { grid-template-columns: 44px 48px 44px; height: 44px; }
  .tiq__quitar { width: 44px; height: 44px; }
  /* PRODUCT.md: objetivos táctiles de 44 px en todo lo que se toca */
  .btn--chico, .chip, .orden select, .activo, .opcion-f { min-height: 44px; }
  .buscador__limpiar { width: 44px; height: 44px; right: 0; }
  .tarjeta__sumar { width: 44px; height: 44px; top: 6px; right: 6px; }
}
/* "Consultar" es una palabra, no un número: va en la letra de texto */
.tiq__sub-total.es-consulta, .barra-ficha__valor.es-consulta, .tabla-var td.es-consulta { font-family: var(--f-texto); font-weight: 650; letter-spacing: 0; font-size: 0.875rem; }
.tiq__total-et { font-weight: 800; font-stretch: 84%; text-transform: uppercase; font-size: 0.9375rem; }
.tiq__total-v { font: 700 1.375rem/1 var(--f-mono); letter-spacing: -0.04em; }
.tiq__total-v.cambio { animation: cambio 240ms var(--ease-out); }
.riel .tiq__total-v { font-size: 1.1875rem; }
.riel .tiq__total-et { font-size: 0.8125rem; }
@keyframes cambio { from { background: oklch(86.9% 0.176 92.4 / 0.6); } }
.tiq__nota { font-size: 0.75rem; color: var(--tinta-3); padding-bottom: 12px; border-bottom: 1.5px dashed var(--linea); }
.tiq__form { display: grid; gap: 12px; padding-top: 14px; }
.campo { display: grid; gap: 6px; }
.campo label, .campo legend { font-size: 0.8125rem; font-weight: 700; }
.campo__opc { font-weight: 500; color: var(--tinta-3); }
.campo input, .campo textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--linea); border-radius: 8px; background: var(--blanco);
  font-size: 1rem; line-height: 1.3; transition: border-color 140ms ease, box-shadow 140ms ease;
}
.campo textarea { resize: vertical; min-height: 64px; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px oklch(86.9% 0.176 92.4 / 0.5); }
.segmento { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.segmento label { position: relative; }
.segmento input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmento span { display: grid; place-items: center; min-height: 44px; padding: 0 8px; border: 1.5px solid var(--linea); border-radius: 8px; background: var(--blanco); font-size: 0.875rem; font-weight: 650; text-align: center; line-height: 1.2; }
.segmento input:checked + span { background: var(--negro); border-color: var(--negro); color: var(--blanco); }
.segmento input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }
.tiq__enviar { width: 100%; min-height: 52px; }
.tiq__demo-cta { margin-top: 14px; }
.tiq__vaciar { justify-self: center; font-size: 0.875rem; color: var(--tinta-2); }
.tiq__estado { padding: 12px 14px; border-radius: 10px; background: oklch(95% 0.05 150); color: var(--tinta); font-size: 0.875rem; }
.tiq__vacio { display: grid; justify-items: center; gap: 8px; padding: 18px 6px 8px; text-align: center; }
.tiq__vacio img { width: 92px; }
.tiq__vacio-t { font-weight: 800; font-stretch: 84%; text-transform: uppercase; }
.tiq__vacio p:not(.tiq__vacio-t) { color: var(--tinta-2); font-size: 0.875rem; max-width: 28ch; }
.tiq__vacio .btn { margin-top: 6px; }

/* página de cotización */
.cot-pagina { display: grid; gap: 28px; padding-block: 12px 72px; }
.cot-pagina__texto { display: grid; gap: 14px; align-content: start; max-width: 52ch; }
.cot-pagina__texto > p { color: var(--tinta-2); }
.cot-pagina__nota { display: flex; gap: 8px; align-items: flex-start; font-size: 0.9375rem; }
.cot-pagina__nota .ico { color: var(--oro-texto); margin-top: 3px; }
.cot-pagina__tiquete { width: 100%; max-width: 520px; }
@media (min-width: 1024px) { .cot-pagina { grid-template-columns: minmax(0, 1fr) 520px; gap: 64px; align-items: start; } .cot-pagina__texto { position: sticky; top: calc(var(--cab-alto) + 24px); } }

/* ---------- hojas (menú, búsqueda, cotización) ---------- */
.velo { position: fixed; inset: 0; z-index: var(--z-velo); background: oklch(0% 0 0 / 0.5); opacity: 0; transition: opacity 220ms ease; }
.velo.visible { opacity: 1; }
.hoja { position: fixed; inset: 0; z-index: var(--z-hoja); display: flex; pointer-events: none; }
.hoja__panel {
  pointer-events: auto; display: flex; flex-direction: column; background: var(--papel); color: var(--tinta);
  box-shadow: var(--sombra-hoja); transition: transform 280ms var(--ease-hoja), opacity 200ms ease;
}
.hoja__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 20px; border-bottom: 1px solid var(--linea); }
.hoja__titulo { font-weight: 830; font-stretch: 78%; text-transform: uppercase; font-size: 1.125rem; }
.hoja__cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); }
.hoja__asa { display: none; }
.hoja--izq .hoja__panel { width: min(88vw, 380px); height: 100%; transform: translateX(-102%); }
.hoja--der .hoja__panel { width: min(100vw, 440px); height: 100%; margin-left: auto; transform: translateX(102%); }
.hoja--arriba .hoja__panel { width: 100%; height: 100%; transform: translateY(-16px); opacity: 0; }
.hoja.abierta .hoja__panel { transform: none; opacity: 1; }
.hoja__panel--tiquete { background: var(--negro-2); }
.hoja__panel--tiquete .hoja__cab { border-color: var(--negro-3); color: var(--blanco); --foco: var(--amarillo); }
.hoja__panel--tiquete .hoja__cuerpo { padding-top: 18px; }
@media (max-width: 767px) {
  .hoja--der .hoja__panel { width: 100%; height: auto; max-height: 92svh; margin-top: auto; border-radius: 18px 18px 0 0; transform: translateY(102%); }
  .hoja--der .hoja__asa { display: block; width: 44px; height: 5px; margin: 8px auto 0; border-radius: 999px; background: var(--negro-3); }
  .hoja.arrastrando .hoja__panel { transition: none; }
}
.hoja__cab--busqueda { padding: 10px var(--pad); gap: 6px; }
.hoja__cab--busqueda .buscador { display: flex; }
.busqueda__titulo { font-weight: 800; font-stretch: 86%; margin-bottom: 12px; }
.hoja--arriba .buscador__panel { position: fixed; left: 0; right: 0; top: 64px; bottom: 0; border-radius: 0; box-shadow: none; max-height: none; padding: 8px var(--pad) calc(24px + env(safe-area-inset-bottom)); background: var(--papel); }

/* menú */
.menu__lista { display: grid; gap: 2px; }
.menu__cat summary {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 4px; cursor: pointer; list-style: none;
  font-weight: 780; font-stretch: 86%; font-size: 1.0625rem;
}
.menu__cat summary::-webkit-details-marker { display: none; }
.menu__cat summary .ico:first-child { color: var(--oro-texto); }
.menu__caret { margin-left: auto; transition: transform 200ms var(--ease-out); }
.menu__cat[open] .menu__caret { transform: rotate(180deg); }
.menu__cat ul { display: grid; padding: 0 0 10px 38px; }
.menu__cat a { display: block; padding: 9px 0; text-decoration: none; color: var(--tinta-2); }
.menu__enlaces { display: grid; margin: 12px 0 18px; padding-top: 12px; border-top: 1px solid var(--linea); }
.menu__enlaces a { display: block; padding: 12px 4px; font-weight: 650; text-decoration: none; }
.menu__dir { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; font-size: 0.875rem; color: var(--tinta-2); }

/* ---------- aviso ---------- */
.aviso {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: var(--z-aviso);
  width: max-content; max-width: min(92vw, 440px); padding: 12px 16px; border-radius: 12px; background: var(--negro); color: var(--blanco);
  box-shadow: 0 10px 30px oklch(0% 0 0 / 0.3); font-size: 0.9375rem; font-weight: 600;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: transform 220ms var(--ease-out), opacity 180ms ease;
}
.aviso.visible { transform: translate(-50%, 0); opacity: 1; }
.aviso { display: flex; align-items: center; gap: 12px; }
.aviso__accion { flex: none; padding: 6px 2px; color: var(--amarillo); pointer-events: auto; }
.tarjeta__sumar.hecho { background: var(--amarillo); color: var(--negro); }
.aviso:empty { display: none; }
@media (min-width: 1024px) { .aviso { bottom: 24px; } }

/* ---------- pie ---------- */
.pie { background: var(--negro); color: var(--humo); --foco: var(--amarillo); font-size: 0.9375rem; }
.pie__rejilla { display: grid; gap: 32px; padding-block: 48px 32px; }
.pie__marca img { width: 88px; margin-bottom: 12px; }
.pie__nombre { color: var(--blanco); font-weight: 850; font-stretch: 72%; text-transform: uppercase; font-size: 1.25rem; line-height: 1.05; }
.pie__lema { color: var(--oro); margin-top: 4px; }
.pie__titulo { color: var(--blanco); font-weight: 780; font-stretch: 86%; margin-bottom: 10px; }
.pie__col ul { display: grid; gap: 2px; }
.pie__col a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; text-decoration: none; color: var(--humo); }
@media (hover: hover) and (pointer: fine) { .pie__col a:hover { color: var(--blanco); text-decoration: underline; } }
.pie__contacto .ico { color: var(--oro); }
.pie__col .pie__redes { display: flex; gap: 8px; margin-top: 12px; }
.pie__redes .btn-ico { color: var(--blanco); }
.pie__legal { display: grid; gap: 6px; padding-block: 18px 28px; border-top: 1px solid var(--negro-3); font-size: 0.8125rem; color: oklch(74.7% 0.011 261.8 / 0.9); }
@media (min-width: 768px) {
  .pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pie__rejilla { grid-template-columns: 1.3fr 1fr 0.9fr 1.3fr; gap: 40px; padding-block: 64px 40px; }
}

/* ---------- error ---------- */
.error { display: grid; gap: 24px; align-items: center; padding-block: 32px 72px; }
.error__jb { width: min(60vw, 280px); justify-self: center; }
.error__texto { display: grid; gap: 16px; max-width: 40rem; }
.error__texto > p { color: var(--tinta-2); }
.error__cats { display: flex; flex-wrap: wrap; gap: 8px; }
.error .buscador { max-width: 460px; }
.error .btn { justify-self: start; }
@media (min-width: 900px) { .error { grid-template-columns: 320px minmax(0, 1fr); gap: 56px; } .error__jb { width: 320px; } }

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .hoja__panel, .filtros, .barra-cot, .barra-ficha, .mega, .aviso, .tarjeta { transition-property: opacity !important; }
  .hoja--izq .hoja__panel, .hoja--der .hoja__panel, .hoja--arriba .hoja__panel, .filtros, .barra-cot, .barra-ficha { transform: none; }
  .hoja:not(.abierta) .hoja__panel { opacity: 0; }
  .filtros:not(.abierta) { opacity: 0; }
  .barra-cot:not(.visible), .barra-ficha:not(.visible) { opacity: 0; pointer-events: none; }
  .tarjeta:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .filtros:not(.abierta) { opacity: 1; }
}

/* ---------- medidas de la presentación elegida ---------- */
/* como el panel de la guía: la figura ocupa su mitad a sangre, sin tarjeta dentro de la tarjeta */
.detalle__bloque.medidas { padding: 0; gap: 0; overflow: hidden; align-content: stretch; }
.medidas__texto { display: grid; gap: 14px; align-content: center; padding: clamp(18px, 3vw, 28px); }
.medidas__figura { display: grid; place-items: center; background: oklch(94% 0.004 264); padding: clamp(18px, 3vw, 32px); }
.medidas__figura .diagrama { max-width: 300px; }
.medidas__lista { display: grid; gap: 10px; }
.medidas__lista > div { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--linea); }
.medidas__lista > div:last-child { border-bottom: 0; }
.medidas__letra { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--negro); color: var(--oro); font: 700 0.75rem/1 var(--f-mono); }
.medidas__lista dt { color: var(--tinta-2); font-size: 0.9375rem; }
.medidas__lista dd { font: 700 1rem/1.2 var(--f-mono); letter-spacing: -0.03em; text-align: right; }
.medidas__lista dd.sin-dato { font-family: var(--f-texto); font-weight: 500; font-size: 0.8125rem; color: var(--tinta-3); letter-spacing: 0; }
.medidas__nota { font-size: 0.8125rem; color: var(--tinta-3); }
@media (min-width: 768px) {
  .detalle__bloque.medidas { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .medidas__figura { order: -1; }
}