/* =========================================================
   base.css — shell de tienda (promo bar + header + mega nav + footer)
   Diseño de e-commerce: alta densidad, foco en búsqueda y navegación.
   ========================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
}
/* ─── Nada de arrastrar la página de costado ──────────────
   Varias piezas se guardan FUERA de pantalla con translateX(100%): el panel de
   filtros de los listados, el carrito lateral (que se monta en todas las
   páginas al importarse) y el menú de categorías. Cada una estira el ancho
   scrolleable del sitio: en un celular de 390px la página llegó a medir 780 y
   se podía arrastrar a un costado hasta un vacío.

   Antes este freno vivía en el CSS de los listados y encima adentro de un
   @media(max-width:1024px), o sea que sólo cubría buscar/categoría/marca y ni
   siquiera en escritorio. Va acá, sin condiciones.

   `clip` y no `hidden` a propósito: `hidden` convierte al body en contenedor de
   scroll y rompe el header pegajoso; `clip` recorta y no toca el sticky. */
html, body { overflow-x: clip; }

/* Utility tabular-nums — usar en CUALQUIER número que se compare
   verticalmente entre cards/rows. Renata: hoy se aplica solo en
   2 lugares y los precios bailan en grids. */
.tnum, [data-num] { font-variant-numeric: tabular-nums; }
/* A11y: skip link visible solo al focus con keyboard */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 9999;
  background: var(--c-cyan-400);
  color: var(--c-blue-900);
  padding: 10px 18px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 8px;
  outline: 3px solid var(--c-mag-500);
  outline-offset: 2px;
}
/* Focus rings consistentes */
:focus-visible {
  outline: 2px solid var(--c-cyan-400);
  outline-offset: 2px;
  border-radius: 2px;
}
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--c-cyan-400);
  outline-offset: 2px;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* ═══ REVEAL ON SCROLL ═══════════════════════════════════
   IntersectionObserver agrega .is-revealed cuando el elemento
   entra en viewport. Antes de eso, queda invisible+desplazado.
   Aplicar a sections/cards selectos para crear sensación de vida
   sin abrumar. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 600ms cubic-bezier(0.2, 0.85, 0.25, 1),
    transform 600ms cubic-bezier(0.2, 0.85, 0.25, 1);
  will-change: opacity, transform;
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
  /* Liberar la capa de composición una vez animado: will-change permanente
     en muchas secciones mantiene capas vivas para siempre (memoria + costo
     de compositing en cada scroll). Tras el reveal ya no hace falta. */
  will-change: auto;
}
.reveal--delay-1 { transition-delay: 80ms; }
.reveal--delay-2 { transition-delay: 160ms; }
.reveal--delay-3 { transition-delay: 240ms; }
/* Reveal stagger por children — Mateo: cuando una section reveal,
   sus children tipo card pueden tener stagger basado en --idx para
   evitar el "todo entra en el mismo frame" feel.
   IMPORTANTE: animation usa `backwards` (no `forwards`) para que al
   terminar la entrada, el `transform` quede LIBRE y el :hover de la
   card pueda aplicar su scale/translate sin pelearse. */
.reveal.is-revealed > .p-card,
.reveal.is-revealed > .pg > .p-card,
.reveal.is-revealed > .scroller .p-card {
  animation: reveal-child 480ms cubic-bezier(0.2, 0.85, 0.25, 1) backwards;
  animation-delay: calc(var(--idx, 0) * 70ms);
}
@keyframes reveal-child {
from { opacity: 0; transform: translateY(16px); }
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.reveal.is-revealed > .p-card,
  .reveal.is-revealed > .pg > .p-card,
  .reveal.is-revealed > .scroller .p-card {
    opacity: 1; transform: none; animation: none;
  }
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
img { max-width: 100%; display: block; }
button,
a {
  font-family: inherit;
  color: inherit;
  text-decoration: none;
}
button { background: none; border: 0; cursor: pointer; padding: 0; }
input { font-family: inherit; }

/* ==== Botón base — COMPONENTE COMPARTIDO ====
   Vive acá (base.css se carga en TODAS las páginas) para que ninguna quede con
   los botones colapsados por el reset de arriba. Antes estaba DUPLICADO en
   carrito.css y reboot.css y faltaba en contacto/garantía/trade-in/etc. */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--rad-sm);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.btn--primary { background: var(--c-cyan-400); color: var(--c-blue-900); }
.btn--primary:hover { background: var(--c-cyan-500); color: var(--c-white); }
.btn--ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.btn--ghost:hover { border-color: var(--accent-text); color: var(--accent-text); }

/* ==== Breadcrumb — COMPONENTE COMPARTIDO ====
   Antes vivía en breadcrumb.css (solo en reboot) → 9 páginas en texto plano.
   Se auto-centra al ancho del contenido de su página vía --page-max (cada screen
   lo setea para alinear con su contenido). Rail cyan = firma de marca. */
.breadcrumb {
  position: relative;
  /* padding sup/inf como vars → el rail cyan se centra en la caja de CONTENIDO
     (no en la caja con padding), así queda alineado al texto con cualquier padding. */
  --bc-pt: var(--sp-4);
  --bc-pb: var(--sp-2);
  max-width: var(--page-max, var(--max-content));
  margin: 0 auto;
  padding: var(--bc-pt) var(--app-px) var(--bc-pb);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  /* Chico/liviano/apretado (match del mock _ficha-swiper que el dueño prefirió,
     aplicado a TODA la tienda jul 2026). Valores literales, NO los tokens
     --fs-micro/--ls-mono-base (compartidos con otro micro-texto). */
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.breadcrumb::-webkit-scrollbar { display: none; }
/* Rail cyan retirado — breadcrumb unificado sin la barra (jul 2026). */
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--fg-mute);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
.breadcrumb a:hover { color: var(--accent-text); }
/* Separador: span vacío + chevron dibujado por CSS (--icon-chevron-right, tokens.css).
   Antes cada página traía su propio <svg> inline repetido — ahora es 1 sola fuente. */
.breadcrumb__sep {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--fg-dim);
  opacity: 0.55;
}
.breadcrumb__sep::before { content: '/'; }
.breadcrumb [aria-current="page"],
.breadcrumb__current {
  flex: 0 0 auto;
  color: var(--accent-text);
}
/* ── Variantes según el fondo ──
   Por defecto (fondo claro) el acento es el AZUL de marca — el cyan sobre
   blanco tira a verde. Sobre el azul del stage se usa --on-dark (cyan).
   --flush = el breadcrumb ya está anidado en un contenedor con ancho
   (ej. .stage__in) → no necesita max-width/margin/padding propios. */
.breadcrumb--flush {
  max-width: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  overflow: visible;
  white-space: normal;
  flex-wrap: wrap;
}
.breadcrumb--on-dark { color: rgba(255, 255, 255, 0.4); }
.breadcrumb--on-dark a { color: rgba(255, 255, 255, 0.55); }
.breadcrumb--on-dark a:hover { color: var(--c-cyan-400); }
.breadcrumb--on-dark .breadcrumb__sep { color: rgba(255, 255, 255, 0.4); }
.breadcrumb--on-dark [aria-current="page"],
.breadcrumb--on-dark .breadcrumb__current { color: var(--c-cyan-400); }
/* ==== Highlight mark (solo para micro-énfasis en headings) ==== */
.mark { background: var(--c-cyan-400); color: var(--c-blue-900); padding: 0.04em 0.22em; }
.mark--magenta { background: var(--c-mag-500); color: var(--c-white); }
/* Hover lift unificado — translateY -3px + accent border + shadow.
   Solo en cards "interactivas" (links). FAQs y tiles pasivos quedan
   excluidos del lift. */
:where(
  a.p-card,
  a.cat-tile-lg,
  a.cat-chip,
  a.persona-tile,
  a.brand-chip,
  a.service-card,
  a.banner--reboot-mini,
  a.banner--builder
):hover {
  transform: translateY(-3px);
  border-color: var(--accent-text);
  box-shadow: var(--shadow-md);
}
/* =========================================================
   PROMO BAR — sticky top, countdown real al cierre del día
   ========================================================= */
@keyframes promo-shine {
0%   { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
[data-role="promo-cutoff"] b { color: var(--c-cyan-400); }
/* =========================================================
   CONTACT STRIP — datos concretos UY (dirección, horarios, WhatsApp)
   ========================================================= */
.contact-strip {
  background: var(--c-blue-700);
  color: var(--c-white);
  padding: 6px var(--app-px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.contact-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.85);
}
.contact-strip__item b { color: var(--c-white); font-weight: 800; }
.contact-strip__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--c-cyan-400);
  font-weight: 900;
  letter-spacing: 0;
  font-size: 0.85rem;
}
.contact-strip__wa {
  color: var(--c-white);
  padding: 2px 8px;
  border: 1px solid var(--c-cyan-400);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.contact-strip__wa:hover { background: var(--c-cyan-400); color: var(--c-blue-900); }
.contact-strip__wa:hover .contact-strip__ico { color: var(--c-blue-900); }
.contact-strip__extra { color: rgba(255,255,255,0.7); }
.contact-strip__extra b { color: var(--c-cyan-400); }
@media (max-width: 760px) {
.contact-strip {
    gap: var(--sp-2);
    font-size: 0.6rem;
    padding: 6px var(--sp-3);
  }
.contact-strip__extra { display: none; }
}
/* =========================================================
   HEADER — 2 filas: brand+search+cart, luego mega-nav
   ========================================================= */
/* Header edge-to-edge: brand al extremo izquierdo, carrito al
   extremo derecho del viewport. Patrón Amazon/MercadoLibre/B&H —
   el contenido debajo (main, mega-panel) sí queda constrained
   con max-content, pero el chrome respira full-width. */
/* (regla anterior de compact mega-nav eliminada — rompía el padding/font-size
   de los nuevos .mega-nav__special al activarse .is-compact) */
/* ==== Search prominente en el centro ==== */
/* Input sobre fondo blanco — proporcionado, no exagerado */
@keyframes modal-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modal-pop-in {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
@keyframes ccy-flip {
0%   { transform: translateY(0);    opacity: 1; }
40%  { transform: translateY(-8px); opacity: 0; }
60%  { transform: translateY(8px);  opacity: 0; }
100% { transform: translateY(0);    opacity: 1; }
}
/* Light theme: overrides para .mega-nav__list/__more/__all removidos —
   esos elementos no existen en el HTML actual (estructura nueva usa
   solo .mega-nav__special). */
/* Cart magenta queda igual (alto contraste sobre blanco — patrón ML) */
/* Estructura .mega-nav__list / __all / __more eliminada — la nueva
   barra usa solo .mega-nav__special (accesos directos, sin lista de
   departamentos ni dropdown "Más"). */
/* ─────────────────────────────────────────────────────────
   Ícono de marca Reboot (las dos flechas interconectadas) como
   máscara recoloreable: se pinta con `color` (background-color:
   currentColor) y escala con font-size. Aspect 530.68:314 ≈ 1.69:1.
   Reemplaza el carácter "↻" genérico en toda la tienda.
   ───────────────────────────────────────────────────────── */
.rb-ico {
  display: inline-block;
  width: 1.69em; height: 1em;
  vertical-align: -0.12em;
  background-color: currentColor;
  -webkit-mask: url(/assets/reboot-icon.svg) center / contain no-repeat;
          mask: url(/assets/reboot-icon.svg) center / contain no-repeat;
}
/* mega-panel removido */
/* =========================================================
   SHOP MAIN WRAPPER
   ========================================================= */
.shop-main { flex: 1; position: relative; }
/* =========================================================
   TRUST STRIP — cifras concretas después del header
   ========================================================= */
.trust-strip {
  background: var(--c-blue-950);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 10px var(--app-px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-white-80);
}
.trust-strip b { color: var(--c-cyan-400); font-weight: 800; }
.trust-strip__item { display: inline-flex; align-items: center; gap: 6px; }
.trust-strip__urgency {
  background: var(--c-mag-500);
  color: var(--c-white);
  padding: 4px 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.trust-strip__urgency b { color: var(--c-white); font-weight: 900; }
@media (max-width: 760px) {
body { padding-bottom: 70px; }
}

/* Salida cuando el rubro elegido no tiene stock: en vez de dejar al cliente
   con "no hay productos" y un botón de volver al inicio, se le ofrecen los
   rubros que sí tienen. */
.listing-empty__alt {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 2px solid var(--line);
  text-align: left;
}
.listing-empty__alt > p {
  margin: 0 0 var(--sp-3);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.listing-empty__alt ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.listing-empty__alt a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 2px solid var(--line);
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}
.listing-empty__alt a:hover { border-color: var(--accent); color: var(--accent-text, var(--accent)); }
.listing-empty__alt a span { color: var(--fg-mute); font-weight: 700; font-size: 0.78rem; }

/* Aviso de que el catálogo viene del archivo y no de la base. */
.listing-nota-origen {
  margin: 32px 0 0;
  font-size: 12px;
  color: var(--fg-dim);
}

/* ─── Notas al pie de un bloque ────────────────────────
   Estaban escritas como `style={{ color: var(--fg-mute) }}` en seis
   pantallas distintas. Un color repetido a mano seis veces es un color
   que el día que cambie va a quedar mal en cinco. */
.nota-suave {
  color: var(--fg-mute);
  font-size: 0.88rem;
  line-height: 1.65;
}
.nota-alerta {
  color: var(--c-mag-600);
  line-height: 1.65;
}
/* El cartel de "esto todavía es un borrador". Tiene que verse: una
   página legal sin revisar que parece definitiva es peor que no
   tenerla. */
.aviso-borrador {
  border: 2px solid var(--c-mag-500);
  padding: 16px;
  margin-bottom: 32px;
  line-height: 1.7;
}
.contacto-numero { font-size: 1.2rem; }

/* Botón chico. Vivía en cuenta.css, así que en cualquier otra
   pantalla que lo usara no hacía nada. Es un tamaño de botón: va
   con los botones.*/
.btn--sm {
  padding: 6px 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
}