/* ============================================================
   VoltiUY — hoja de estilos única
   Orden: tokens → reset → utilidades → componentes → responsive
   ============================================================ */

:root {
  /* Color */
  --bg:            #0b0b09;
  --surface:       #0e0e0c;
  --surface-2:     #15150f;
  --surface-3:     #1a1a16;
  --line:          #25251d;
  --line-soft:     #22221c;
  --ink:           #f5f1e8;
  --ink-dim:       #a9a99a;
  --ink-mute:      #7d7d70;
  --accent:        #c6f24e;
  --accent-hi:     #d6ff66;
  --on-accent:     #14160f;

  /* Tipografía */
  --font-sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Medidas */
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --radius: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Elevación */
  --shadow: 0 18px 48px rgba(0, 0, 0, .45);

  /* Movimiento (se anula con prefers-reduced-motion) */
  --t-fast: 140ms;
  --t: 220ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* El header es sticky: el ancla no queda tapada */
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Red de seguridad. La causa real se arregla con min-width:0 en grid/flex.
     `clip` en vez de `hidden`: no crea contenedor de scroll ni rompe position:sticky. */
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* Cualquier `display` de clase le gana al [hidden] del navegador.
   Sin esto, ocultar el panel o la grilla desde JS no tiene efecto. */
[hidden] { display: none !important; }

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Utilidades ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 100;
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 16px;
  border-radius: 0 0 10px 10px;
  font-weight: 700;
  transition: top var(--t) var(--ease);
}
.skip-link:focus { top: 0; }

/* El sprite no debe ocupar espacio ni ser leído */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  /* 44px mínimo de alto: objetivo táctil cómodo */
  min-height: 44px;
  padding: 11px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:active { transform: scale(.97); }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-ghost   { background: transparent; color: var(--ink); border: 1px solid #34342a; }
.btn-dark    { background: var(--on-accent); color: var(--accent); }

.btn-lg      { min-height: 52px; padding: 14px 26px; font-size: 16px; border-radius: 14px; }
.btn-block   { width: 100%; }

.link-btn {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-mute);
  text-decoration: underline;
  padding: 10px;
  min-height: 40px;
}

@media (hover: hover) {
  .btn-primary:hover { background: var(--accent-hi); }
  .btn-ghost:hover   { border-color: var(--accent); color: var(--accent); }
  .btn-dark:hover    { background: #1e2116; }
  .link-btn:hover    { color: var(--ink); }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(14, 14, 12, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding-block: 10px;
}

.brand { display: grid; line-height: 1; }
.brand-name { font-family: var(--font-serif); font-size: 28px; letter-spacing: -.01em; }
/* El 'UY' en lima: mismo verde que los detalles, para darle identidad
   y separar visualmente 'Volti' de 'UY' sin necesidad de un espacio. */
.brand-uy { color: var(--accent); }
.brand-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 5px;
}

.nav {
  display: flex;
  gap: 22px;
  margin-inline: auto;
  font-size: 14.5px;
  color: var(--ink-dim);
}
.nav a { padding: 8px 2px; }
@media (hover: hover) { .nav a:hover { color: var(--accent); } }

.header-actions { margin-left: auto; }

.btn-cart {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 14px;
  transition: background-color var(--t-fast) var(--ease);
}
@media (hover: hover) { .btn-cart:hover { background: var(--accent-hi); } }

.cart-count {
  min-width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 6px;
  border-radius: var(--radius-pill);
  background: var(--on-accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
}
.cart-count[data-empty="true"] { opacity: .45; }

/* Pulso al agregar un producto */
.cart-count.bump { animation: bump 320ms var(--ease); }
@keyframes bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ---------- Ticker ---------- */
.ticker {
  position: relative;
  overflow: hidden;
  background: var(--accent);
  color: var(--on-accent);
  border-block: 1px solid #0e0e0c;
}

.ticker-track {
  display: flex;
  align-items: center;
  /* Por defecto quieto: los avisos se reparten a lo ancho y se leen enteros.
     Mismo ancho y margenes que el resto del contenido, para que el primero
     quede alineado con el logo y el ultimo no toque el borde. */
  justify-content: space-between;
  gap: 18px;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 9px var(--gutter);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Sólo si no entran en pantalla (celulares angostos) el JS activa el desfile. */
.ticker.is-scrolling .ticker-track {
  /* En desfile mandan el ancho del contenido y el borde de la pantalla. */
  width: max-content;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  justify-content: flex-start;
  /* gap:0 a proposito: cada aviso lleva su propia separacion en el ::after.
     Asi el ancho total es exactamente 2 juegos y el bucle al -50% no salta. */
  gap: 0;
  animation: ticker var(--ticker-dur, 22s) linear infinite;
  will-change: transform;
}
.ticker.is-scrolling .ticker-item::after {
  content: '·';
  padding-inline: 18px;
  opacity: .5;
}

/* Degradado en los bordes: el texto se funde con la franja en vez de
   cortarse en seco, que es lo que hacia parecer que estaba roto. */
.ticker.is-scrolling::before,
.ticker.is-scrolling::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 34px;
  z-index: 1;
  pointer-events: none;
}
.ticker.is-scrolling::before { left: 0;  background: linear-gradient(90deg, var(--accent), rgba(198, 242, 78, 0)); }
.ticker.is-scrolling::after  { right: 0; background: linear-gradient(270deg, var(--accent), rgba(198, 242, 78, 0)); }

@keyframes ticker {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--surface); }

.hero-grid {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  padding-block: clamp(40px, 7vw, 82px);
  align-items: center;
}

/* Titular compacto y con el interlineado cerrado: el bloque de texto
   funciona como una pieza solida, no como tres renglones sueltos. */
.hero h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(46px, 8.4vw, 84px);
  line-height: .9;
  letter-spacing: -.025em;
}

/* Bloque lima solido, del mismo lenguaje que la franja y los botones.
   Reemplaza a la italica de color, que es el recurso mas trillado. */
.hero h1 .mark {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0 .16em .05em;
  border-radius: 8px;
  /* Devuelve el espacio que suma el padding, para que alinee a la izquierda */
  margin-left: -.14em;
}

.lede {
  margin-top: 24px;
  max-width: 40ch;
  font-size: clamp(16px, 2.4vw, 18.5px);
  color: var(--ink-dim);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 32px;
}

/* El segundo boton ("Ver catalogo") usa .btn-ghost: mismo tamano y misma forma
   que el de WhatsApp, pero vacio por dentro y solo con el borde. Asi se ve que
   es un boton de verdad y no compite con el verde, que sigue siendo la accion
   principal. Antes era texto subrayado, pero la flecha quedaba afuera de la
   raya y parecia roto. */

.hero-note {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .01em;
  color: var(--ink-mute);
}

/* ---------- Collage de fotos ---------- */
.hero-media {
  position: relative;
  /* Reserva el alto exacto: sin saltos de layout al cargar las fotos */
  aspect-ratio: 1 / 1;
  max-width: 460px;
  width: 100%;
  margin-inline: auto;
}

/* Las dos nitidas, apenas atenuadas para que no le ganen al titular. */
.hero-img {
  position: absolute;
  object-fit: cover;
  border-radius: var(--radius-lg);
  filter: brightness(.9) contrast(1.03);
}

.hero-img-a {
  top: 0;
  left: 20%;
  /* Ancho explicito, no 'right': en una <img> posicionada en absoluto el ancho
     lo manda el tamano intrinseco y el 'right' se ignora. */
  width: calc(80% - 16px);
  height: 82%;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* La chica lleva el acento lima y una inclinacion minima: es el unico
   elemento que rompe la grilla, y ahi entra el color de marca. */
.hero-img-b {
  left: 0;
  bottom: 0;
  width: 44%;
  height: 48%;
  border: 2px solid var(--accent);
  transform: rotate(-3deg);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .55);
}

/* ---------- Encabezados de sección ---------- */
.section-head { margin-bottom: 26px; }
.section-head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 5.5vw, 44px);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.section-head p {
  margin-top: 10px;
  color: var(--ink-dim);
  font-size: 15px;
  max-width: 52ch;
}
.section-head strong { color: var(--ink); }

/* ---------- Catálogo ---------- */
.catalog { padding-block: clamp(44px, 8vw, 84px); }

.toolbar {
  display: grid;
  /* minmax(0,1fr) y no 1fr: sin esto la columna se estira al contenido
     mas ancho (los chips) y desborda la pantalla en celulares. */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.field { position: relative; display: flex; align-items: center; min-width: 0; }

.search-field .ico-search {
  position: absolute;
  left: 16px;
  width: 18px; height: 18px;
  color: var(--ink-mute);
  pointer-events: none;
}
.search-field input {
  width: 100%;
  min-height: 48px;
  padding: 12px 44px;
  background: var(--surface-3);
  border: 1px solid #2b2b24;
  border-radius: var(--radius-pill);
  outline: none;
  font-size: 15px;
  transition: border-color var(--t-fast) var(--ease);
}
.search-field input::placeholder { color: #6f6f64; }
.search-field input:focus { border-color: var(--accent); }
/* Oculta la X nativa de Safari/Chrome: usamos la nuestra, consistente */
.search-field input::-webkit-search-cancel-button { display: none; }

.clear-search {
  position: absolute;
  right: 6px;
  /* 40px: objetivo tactil comodo sin agrandar el icono */
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 20px;
  color: var(--ink-mute);
}
@media (hover: hover) { .clear-search:hover { color: var(--ink); background: #26261f; } }

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.filter-label {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }

.chip {
  min-height: 38px;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid #2b2b22;
  background: #17170f;
  color: #c9c9ba;
  font-size: 13.5px;
  font-weight: 500;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
@media (hover: hover) {
  .chip:hover { border-color: var(--accent); color: var(--ink); }
  .chip[aria-pressed="true"]:hover { color: var(--on-accent); }
}

/* En pantallas táctiles los objetivos suben a 44px, la medida mínima
   recomendada para el dedo. En mouse se dejan compactos. */
@media (pointer: coarse) {
  .chip { min-height: 44px; }
  .price-row input[type="range"] { height: 44px; }
}

.price-row { gap: 12px; }
.price-row input[type="range"] {
  flex: 1;
  min-width: 140px;
  max-width: 260px;
  accent-color: var(--accent);
  height: 24px;
}
.price-out {
  font-family: var(--font-mono);
  font-size: 13px;
  min-width: 74px;
}
.reset-btn {
  margin-left: auto;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid #34342a;
  font-size: 13px;
  color: var(--ink-dim);
}
@media (hover: hover) { .reset-btn:hover { border-color: var(--accent); color: var(--accent); } }

.results {
  margin-block: 20px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--ink-mute);
}

/* ---------- Grilla de productos ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: clamp(12px, 2.5vw, 20px);
}

.card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
@media (hover: hover) {
  .card:hover { border-color: var(--accent); transform: translateY(-2px); }
}
/* El filtro sólo alterna esta clase: no se recrea DOM */
.card.is-hidden { display: none; }

.card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 80% at 50% 0%, #21211a 0%, #16160f 70%),
    repeating-linear-gradient(135deg, #1c1c15 0 8px, #191913 8px 16px);
}
/* display:contents hace que el <picture> no genere caja propia:
   la que se posiciona sigue siendo la <img>. */
picture { display: contents; }

.card-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  /* contain y no cover: con cover se recortaria el producto. Las fotos son
     cuadradas igual que la caja, asi que la llenan justo, sin sobrantes.
     Sin relleno: el relleno dejaba un marco oscuro alrededor y la foto
     parecia un recuadro pegado encima de la tarjeta. */
  object-fit: contain;
  /* Red de seguridad: si algun dia entra una foto que no sea cuadrada, lo
     que sobre se rellena con el mismo gris del fondo de las fotos en vez
     de mostrar el oscuro de atras. */
  background: #e7e7eb;
}
.card-icon {
  width: 38%;
  height: 38%;
  color: #3d3d31;
}
.card-tag {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(14, 14, 12, .88);
  border: 1px solid #2b2b22;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  padding: 5px 9px;
  border-radius: 6px;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 15px 15px 16px;
}
.card-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
}
.card-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.card-desc {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-dim);
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.card-more {
  font-size: 13px;
  color: var(--ink-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .card:hover .card-more { color: var(--accent); }
}

.card-compat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-mute);
  text-align: right;
}
.card-price {
  margin-top: auto;
  padding-top: 8px;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.card-actions { display: flex; gap: 8px; }
.card-wa { flex: 1; padding-inline: 12px; }
.btn-add {
  width: 46px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #33332a;
  border-radius: 12px;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
@media (hover: hover) { .btn-add:hover { border-color: var(--accent); color: var(--accent); } }
.btn-add:active { transform: scale(.92); }

/* ---------- Ficha del producto ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, .68);
  backdrop-filter: blur(3px);
  animation: fade var(--t) var(--ease);
}

.modal {
  position: fixed;
  z-index: 61;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(920px, calc(100vw - 2 * var(--gutter)));
  max-height: min(88vh, 720px);
  display: grid;
  grid-template-columns: 1fr;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  animation: modalIn var(--t) var(--ease);
}
@keyframes modalIn {
  from { opacity: 0; transform: translate(-50%, -48%) scale(.98); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.modal-close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(14, 14, 12, .8);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}
@media (hover: hover) { .modal-close:hover { background: var(--surface-3); color: var(--accent); } }

.modal-media { padding: var(--gutter) var(--gutter) 0; }

.modal-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 80% at 50% 0%, #21211a 0%, #16160f 70%),
    repeating-linear-gradient(135deg, #1c1c15 0 8px, #191913 8px 16px);
}
/* Sin relleno y con el gris de las fotos de fondo, por lo mismo que en las
   tarjetas: que la foto llene la caja y no parezca pegada encima.
   Va en posicion absoluta contra la caja porque en ventanas bajas (un celular
   acostado, por ejemplo) la caja se achata: sin esto la foto conservaba su
   alto cuadrado, se pasaba, y el recorte le cortaba el producto. */
.modal-photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #e7e7eb;
}
.modal-icon { width: 38%; height: 38%; color: #3d3d31; }

.modal-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.modal-thumbs::-webkit-scrollbar { display: none; }
.modal-thumb {
  flex: none;
  width: 68px; height: 68px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--surface-2);
}
.modal-thumb img { width: 100%; height: 100%; object-fit: contain; background: #e7e7eb; }
.modal-thumb[aria-current=true] { border-color: var(--accent); }
@media (hover: hover) { .modal-thumb:hover { border-color: #4a4a3c; } }

.modal-body {
  padding: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-cat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.modal h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.08;
}
.modal-desc { color: var(--ink-dim); font-size: 15px; }

.modal-specs { display: grid; gap: 0; }
.modal-specs li {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  font-size: 14.5px;
  border-bottom: 1px solid var(--line-soft);
}
.modal-specs li::before {
  content: '✓';
  color: var(--accent);
  font-weight: 700;
  flex: none;
}

.modal-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.modal-price { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.modal-compat {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-mute);
}

.modal-actions { display: grid; gap: 10px; margin-top: 4px; }
.modal-note {
  font-size: 12px;
  color: var(--ink-mute);
  text-align: center;
}

@media (min-width: 760px) {
  .modal { grid-template-columns: 1fr 1fr; }
  .modal-media { padding: var(--gutter); }
  .modal-body { padding-left: 4px; }
}

@media (max-width: 759px) {
  /* En el celular ocupa toda la pantalla: leer una ficha en una ventanita chica
     es incomodo, y asi el pulgar llega bien a los botones. */
  .modal {
    inset: 0;
    left: 0; top: 0;
    transform: none;
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    border: 0;
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation: modalUp var(--t) var(--ease);
  }
  @keyframes modalUp { from { transform: translateY(2%); opacity: 0; } to { transform: none; opacity: 1; } }
  .modal-photo { aspect-ratio: 4 / 3; }
}

/* ---------- Sin resultados ---------- */
.empty {
  padding: 44px 20px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-dim);
}
.empty-title { font-family: var(--font-serif); font-size: 24px; color: var(--ink); margin-bottom: 6px; }
.empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }

/* ---------- Pasos ---------- */
.steps {
  padding-block: clamp(44px, 8vw, 84px);
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
}
.step-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 16px;
}
.step {
  padding: 26px 22px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.step-n {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-weight: 500;
  margin-bottom: 16px;
}
.step h3 { font-family: var(--font-serif); font-weight: 400; font-size: 23px; margin-bottom: 8px; }
.step p { color: var(--ink-dim); font-size: 15px; }

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  padding: clamp(24px, 4vw, 34px);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-lg);
}
.cta-band h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 4vw, 32px); }
.cta-band p { font-size: 15px; opacity: .82; margin-top: 4px; }
.cta-band .btn-primary { background: var(--on-accent); color: var(--accent); }
@media (hover: hover) { .cta-band .btn-primary:hover { background: #1e2116; } }

/* Animación de entrada, sólo si el usuario no pidió menos movimiento */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; transition: opacity 520ms var(--ease), transform 520ms var(--ease); }

/* ---------- Footer ---------- */
.site-footer {
  padding-block: 34px;
  border-top: 1px solid var(--line-soft);
  /* Aire suficiente para que ni la barra de pedido ni el boton flotante
     de WhatsApp tapen la ultima linea del pie. */
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}
.footer-brand { font-family: var(--font-serif); font-size: 26px; }
.footer-brand .brand-uy { color: var(--accent); }
.footer-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--ink-mute);
  margin-top: 6px;
}
.footer-links { display: grid; gap: 4px; }
.footer-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--accent);
  min-height: 40px;
}
/* Fila inferior: aviso legal a la izquierda, firma a la derecha. */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 20px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.copyright,
.credit {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #5d5d53;
}
/* Firma en clave de codigo: los signos van en lima, el nombre en claro,
   y el cursor de terminal al final. */
.credit-tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-dim);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.credit-tag span { color: var(--accent); opacity: .8; }

.credit-tag::after {
  content: '_';
  margin-left: 3px;
  color: var(--accent);
  opacity: .55;
  /* Para que parpadee como una terminal, descomentar:
     animation: caret 1.2s steps(2, start) infinite; */
}
@keyframes caret { 50% { opacity: 0; } }

@media (hover: hover) {
  .credit a:hover .credit-tag,
  .credit-tag:hover { color: var(--ink); }
  .credit-tag:hover span { opacity: 1; }
}

/* ---------- Barra de pedido ---------- */
.cart-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  background: var(--accent);
  color: var(--on-accent);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .4);
  animation: slideUp var(--t) var(--ease);
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: none; } }

.cart-bar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 11px;
}
.cart-bar-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  text-align: left;
  min-height: 44px;
  color: inherit;
}
.cart-bar-count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cart-bar-total { font-size: 21px; font-weight: 700; }
.cart-bar-see {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-decoration: underline;
  flex-basis: 100%;
}
#cartBarSend { margin-left: auto; flex: none; }

/* ---------- Panel de pedido ---------- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, .6);
  animation: fade var(--t) var(--ease);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.drawer {
  position: fixed;
  z-index: 51;
  right: 0; top: 0; bottom: 0;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  animation: slideIn var(--t) var(--ease);
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: none; } }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px var(--gutter);
  border-bottom: 1px solid var(--line-soft);
}
.drawer-head h2 { font-family: var(--font-serif); font-weight: 400; font-size: 27px; }
.drawer-close {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 26px;
  color: var(--ink-dim);
}
@media (hover: hover) { .drawer-close:hover { background: var(--surface-3); color: var(--ink); } }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px var(--gutter);
}

.cart-lines { display: grid; gap: 12px; }
.cart-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.cart-line-name { font-size: 14.5px; line-height: 1.3; }
.cart-line-price { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); margin-top: 3px; }
.qty {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #33332a;
  border-radius: var(--radius-pill);
  padding: 3px;
}
.qty button {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 18px;
  color: var(--ink);
}
@media (hover: hover) { .qty button:hover { background: var(--surface-3); color: var(--accent); } }
.qty-n { min-width: 24px; text-align: center; font-family: var(--font-mono); font-size: 14px; }

.cart-empty { color: var(--ink-dim); font-size: 14.5px; padding-block: 18px; }
.cart-empty strong { color: var(--accent); }

.drawer-foot {
  padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
  display: grid;
  gap: 10px;
}
.drawer-total { display: flex; justify-content: space-between; align-items: baseline; }
.drawer-total span { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.drawer-total strong { font-size: 25px; }
.drawer-note { font-size: 12px; color: var(--ink-mute); }
.drawer-foot .link-btn { justify-self: center; }

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-float {
  position: fixed;
  right: var(--gutter);
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 44;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 18px;
  border-radius: var(--radius-pill);
  background: #25d366;
  color: #08130b;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.wa-float .ico { width: 22px; height: 22px; }
@media (hover: hover) { .wa-float:hover { transform: translateY(-2px); } }

/* Con la barra de pedido visible, el flotante se corre para no solaparse */
body.cart-open-bar .wa-float { transform: translateY(-72px); }
/* Con el panel abierto se oculta: no compite con el CTA del panel */
body.drawer-open .wa-float { opacity: 0; pointer-events: none; }
body.drawer-open { overflow: hidden; }

/* ============================================================
   Responsive
   ============================================================ */

/* Tablet en adelante */
@media (min-width: 720px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
  .cart-bar-see { flex-basis: auto; }
  .cart-line { grid-template-columns: 1fr auto auto; }
}

/* Escritorio */
@media (min-width: 1000px) {
  .toolbar {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    align-items: center;
    padding: 20px 22px;
  }
  .search-field { grid-row: span 3; align-self: start; }
}

/* Móvil: la navegación central estorba, el header se compacta */
@media (max-width: 719px) {
  html { scroll-padding-top: 72px; }
  .nav { display: none; }
  .header-inner { min-height: 60px; }
  .brand-name { font-size: 23px; }
  .brand-sub { font-size: 9.5px; }
  .btn-cart { padding: 10px 14px; font-size: 13.5px; }

  .hero-media { max-width: 400px; }
  .hero-cta .btn { flex: 1 1 100%; }

  .toolbar { padding: 14px; }
  .filter-row { gap: 8px; }
  .reset-btn { margin-left: 0; width: 100%; }

  .price-row input[type="range"] { max-width: none; }

  .cart-bar-inner { padding-block: 9px; }
  .cart-bar-total { font-size: 19px; }
  #cartBarSend { padding-inline: 16px; }

  .wa-float { padding: 13px; }
  .wa-float-text { display: none; }

  .cta-band { text-align: left; }
  .cta-band .btn { width: 100%; }
}

/* En pantallas angostas el rótulo "Categoría" pasa arriba y las categorías
   se quedan con la fila entera. Al costado les robaba unos 80 px, que era
   justo lo que faltaba para que entraran todas en un renglón.
   La fila de precio no se toca: ahí el rótulo, la barra y el monto tienen
   que leerse juntos en una línea. */
@media (max-width: 719px) {
  .filter-row:not(.price-row) {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

/* Aun con el rotulo arriba, las cuatro categorias juntas piden unos 384 px y en
   un celular hay menos. Antes se acomodaban solas y quedaban tres arriba y
   "Auriculares" sola abajo, que se veia como un error. Aca se reparten en dos
   columnas parejas: dos y dos. Si algun dia se agrega una quinta categoria, la
   ultima ocupa el ancho entero en vez de quedar a medias. */
@media (max-width: 519px) {
  .chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Pantallas muy angostas: una sola columna.
   La foto se deja cuadrada, igual que en el resto de los tamaños. Antes acá
   se achataba a 16/10 para que la tarjeta ocupara menos alto, pero como las
   fotos son cuadradas quedaban chicas y con dos franjas oscuras al costado. */
@media (max-width: 400px) {
  .grid { grid-template-columns: 1fr; }
}

/* ---------- Preferencias del sistema ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }

  /* Sin desfile, el degradado de los bordes solo taparia la primera palabra,
     asi que se quita y se devuelve el margen lateral. */
  .ticker-track,
  .ticker.is-scrolling .ticker-track { animation: none; padding-inline: var(--gutter); }
  .ticker.is-scrolling::before,
  .ticker.is-scrolling::after { display: none; }
}

@media (prefers-contrast: more) {
  :root { --ink-dim: #d8d4c8; --ink-mute: #b6b6a6; --line: #454539; }
}

/* ---------- Impresión ---------- */
@media print {
  .site-header, .cart-bar, .wa-float, .drawer, .drawer-backdrop, .toolbar, .ticker { display: none !important; }
  body { background: #fff; color: #000; }
  .card { border-color: #ccc; break-inside: avoid; }
}