/* ============ Header / Nav ============ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}
.site-header__logo img { height: 36px; width: auto; }

.nav-main { display: none; }
@media (min-width: 900px) {
  .nav-main { display: flex; align-items: center; gap: var(--space-6); }
}
.nav-main__list { display: flex; align-items: center; gap: var(--space-6); }
.nav-main__link {
  color: var(--color-neutral-700);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  padding: var(--space-2) 0;
}
.nav-main__link:hover { color: var(--color-primary-600); text-decoration: none; }

.nav-dropdown { position: relative; }
.nav-dropdown__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-neutral-700); font-weight: 600; font-size: var(--fs-body-sm);
  cursor: pointer; padding: var(--space-2) 0;
}
.nav-dropdown__panel {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
  min-width: 240px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-2);
  padding: var(--space-2);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel {
  opacity: 1; visibility: visible; transform: translate(-50%, 4px);
}
.nav-dropdown__panel a {
  display: block; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-neutral-700); font-weight: 500; font-size: var(--fs-body-sm);
}
.nav-dropdown__panel a:hover { background: var(--color-primary-50); color: var(--color-primary-700); text-decoration: none; }

.site-header__actions { display: flex; align-items: center; gap: var(--space-3); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-full);
  color: var(--color-neutral-700);
  transition: background var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.icon-btn:hover { background: var(--color-primary-50); }
.icon-btn:active { transform: scale(0.92); }

/* Nav mobile: antes era un panel oculto que abría un botón "hamburguesa"
   (dependía de un solo gesto no descubrible). Ahora es una franja siempre
   visible con scroll horizontal — todas las secciones quedan a un tap de
   distancia sin ocultar nada detrás de un ícono. */
.nav-mobile {
  display: flex; align-items: center; gap: var(--space-5);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.nav-mobile::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .nav-mobile { display: none; } }
.nav-mobile a { flex-shrink: 0; padding: var(--space-2) 0; font-weight: 600; font-size: var(--fs-body-sm); color: var(--color-neutral-600); white-space: nowrap; }
.nav-mobile a:hover { color: var(--color-primary-600); }

/* ============ Breadcrumb ============ */
.breadcrumb {
  padding-block: var(--space-4);
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary-600); }
.breadcrumb li[aria-current] { color: var(--color-neutral-700); font-weight: 600; }
.breadcrumb .sep { color: var(--color-neutral-300); }

/* ============ Buttons (con microinteracción táctil) ============ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-weight: 700; font-size: var(--fs-body-sm);
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.96); }

/* Ripple táctil */
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%);
  opacity: 0; transform: scale(0.4);
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-slow) var(--ease-emphasized);
  pointer-events: none;
}
.btn:active::after { opacity: 1; transform: scale(1.6); transition-duration: 0ms; }

.btn--primary { background: var(--color-primary-600); color: #fff; box-shadow: var(--elevation-1); }
.btn--primary:hover { background: var(--color-primary-700); box-shadow: var(--elevation-2); }

.btn--accent { background: var(--color-accent-500); color: #241400; box-shadow: var(--elevation-1); }
.btn--accent:hover { background: var(--color-accent-600); box-shadow: var(--elevation-2); }

.btn--secondary { background: transparent; color: var(--color-primary-700); border: 2px solid var(--color-primary-300); }
.btn--secondary:hover { background: var(--color-primary-50); border-color: var(--color-primary-500); }

.btn--ghost { background: transparent; color: var(--color-neutral-0); border: 1.5px solid rgba(255,255,255,0.6); }
.btn--ghost:hover { background: rgba(255,255,255,0.12); }

.btn--danger { background: transparent; color: var(--color-error); border: 2px solid color-mix(in srgb, var(--color-error) 45%, transparent); }
.btn--danger:hover { background: color-mix(in srgb, var(--color-error) 10%, transparent); border-color: var(--color-error); }

.btn--sm { padding: 0.55rem 1.1rem; font-size: var(--fs-caption); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ============ Badge ============ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.02em;
  padding: 0.3rem 0.65rem; border-radius: var(--radius-full);
}
/* [hidden] y .badge tienen la misma especificidad (0-1-0) — sin esto,
   .badge (que se declara después) le gana al [hidden] del navegador y el
   badge queda visible aunque JS le haya puesto hidden=true. Pasaba en la
   ficha de producto, donde los badges de "Sin stock"/"Disponible para
   reserva" se ocultan así en vez de sacarse del HTML. */
.badge[hidden] { display: none; }
.badge--in-stock { background: color-mix(in srgb, var(--color-success) 14%, white); color: var(--color-success); }
.badge--low-stock { background: color-mix(in srgb, var(--color-warning) 16%, white); color: var(--color-warning); }
.badge--out-of-stock { background: var(--color-neutral-100); color: var(--color-neutral-500); }
.badge--reserve { background: color-mix(in srgb, var(--color-warning) 16%, white); color: var(--color-warning); }
.badge--category { background: var(--color-primary-50); color: var(--color-primary-700); }

/* ============ Product Card ============ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-6);
}
.product-card {
  display: flex; flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--elevation-2); }
.product-card__media {
  aspect-ratio: 1 / 1;
  background: var(--color-neutral-50);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.product-card__media img { max-height: 100%; object-fit: contain; transition: transform var(--dur-slow) var(--ease-emphasized); }
.product-card:hover .product-card__media img { transform: scale(1.06); }
.product-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.product-card__title { font-size: var(--fs-body); font-weight: 700; color: var(--color-neutral-900); }
.product-card__price-ars, .product-card__price-usdt { display: block; }
.product-card__cta { margin-top: auto; }

/* ============ Precio original tachado (cuando hay descuento particular) ============ */
.price-old { display: block; text-decoration: line-through; color: var(--color-text-muted); font-size: var(--fs-body-sm); font-weight: 500; }
.pdp-price-old.price-old { font-size: var(--fs-body); }

/* ============ Precio primario/secundario (según toggle de moneda) ============ */
.price-primary { font-size: 1.25rem; font-weight: 800; color: var(--color-neutral-900); }
.price-secondary { font-size: var(--fs-body-sm); font-weight: 500; color: var(--color-text-muted); }
.pdp-price-ars.price-primary, .pdp-price-usdt.price-primary { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); }
.pdp-price-ars.price-secondary, .pdp-price-usdt.price-secondary { font-size: var(--fs-body); }

/* ============ Toggle de moneda (header) ============ */
.currency-toggle {
  display: inline-flex; background: var(--color-neutral-100);
  border-radius: var(--radius-full); padding: 3px; gap: 2px;
}
.currency-toggle__btn {
  padding: 0.4rem 0.85rem; border-radius: var(--radius-full);
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.02em;
  color: var(--color-neutral-500);
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.currency-toggle__btn:active { transform: scale(0.94); }
.currency-toggle__btn.is-active { background: var(--color-primary-600); color: #fff; }

/* ============ Selector de idioma (header, todas las páginas) ============ */
.lang-toggle { position: relative; }
.lang-toggle__btn { display: inline-flex; align-items: center; gap: 4px; width: auto; padding: 0 0.6rem; }
.lang-toggle__code { font-size: var(--fs-caption); font-weight: 800; letter-spacing: 0.02em; }
.lang-toggle__panel {
  position: absolute; top: 100%; left: 0; margin-top: 8px; z-index: 50;
  min-width: 160px; background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--elevation-2); padding: var(--space-2);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), visibility var(--dur-base);
}
.lang-toggle__panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-toggle__panel button {
  display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); font-size: var(--fs-body-sm); font-weight: 600; color: var(--color-neutral-700);
}
.lang-toggle__panel button:hover { background: var(--color-primary-50); color: var(--color-primary-700); }
.lang-toggle__panel button.is-active { color: var(--color-primary-600); font-weight: 800; }

/* ============ Hero ============ */
.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex; align-items: flex-end;
  color: #fff;
  overflow: hidden;
}
.hero__poster {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.hero__videos { position: absolute; inset: 0; z-index: 0; }
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--ease-standard);
}
.hero__video.is-active { opacity: 1; }
/* Mientras no haya ningún video activo (cargando, con error, o reduced-motion) queda el poster de foto real como fondo */
@media (prefers-reduced-motion: reduce) {
  .hero__videos { display: none; }
}

.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,18,32,0.35) 0%, rgba(11,18,32,0.55) 55%, rgba(11,18,32,0.92) 100%);
}
.hero__content { position: relative; z-index: 2; padding-block: var(--space-16); width: 100%; }
.hero h1 { color: #fff; font-size: var(--fs-display); max-width: 18ch; }
.hero p { color: rgba(255,255,255,0.88); font-size: var(--fs-body-lg); max-width: 52ch; margin-block: var(--space-4) var(--space-8); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ============ Section headers ============ */
.section-head { max-width: 62ch; margin-bottom: var(--space-8); }
.section-head--center { margin-inline: auto; text-align: center; }

/* ============ Footer ============ */
.site-footer { background: var(--color-neutral-900); color: var(--color-neutral-300); padding-block: var(--space-16) var(--space-8); }
.site-footer h3 { color: #fff; font-size: var(--fs-body); margin-bottom: var(--space-4); }
.site-footer a { color: var(--color-neutral-300); }
.site-footer a:hover { color: #fff; }
/* Breakpoints explícitos (en vez de auto-fit implícito) para que el número de
   columnas y su ancho sean siempre predecibles: 1 → 2 → 4 columnas. */
.footer-grid { display: grid; gap: var(--space-8) var(--space-6); grid-template-columns: 1fr; margin-bottom: var(--space-12); }
@media (min-width: 620px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-grid ul li { margin-bottom: var(--space-2); }
.footer-map { border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(255,255,255,0.12); }
.footer-map iframe { width: 100%; height: 220px; border: 0; display: block; }
.footer-contact-item {
  display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3);
  /* Blindaje: si un email/dirección es muy largo para la columna, corta de forma
     prolija en vez de desbordar por encima del bloque vecino. */
  overflow-wrap: anywhere;
}
.footer-contact-item > svg { flex-shrink: 0; margin-top: 2px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--space-6); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-caption); }

/* ============ TIBI widget ============ */
.tibi-launcher {
  position: fixed; right: 20px; z-index: 300;
  /* --footer-overlap la actualiza main.js: sube el botón cuando el footer
     entra en pantalla, para que nunca quede tapando texto del footer. */
  bottom: calc(20px + var(--footer-overlap, 0px));
  width: 64px; height: 64px; border-radius: var(--radius-full);
  background: var(--color-primary-600);
  box-shadow: var(--elevation-3);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease-standard), bottom var(--dur-base) var(--ease-standard);
}
.tibi-launcher:hover { transform: scale(1.06); }
.tibi-launcher:active { transform: scale(0.92); }
.tibi-drone { animation: tibi-float 3s ease-in-out infinite; }
@keyframes tibi-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.tibi-drone .propeller { transform-box: fill-box; transform-origin: center; animation: tibi-spin 0.6s linear infinite; }
@keyframes tibi-spin { to { transform: rotate(360deg); } }

.tibi-panel {
  position: fixed; right: 20px; z-index: 300;
  bottom: calc(96px + var(--footer-overlap, 0px));
  width: min(340px, calc(100vw - 40px));
  max-height: min(480px, calc(100vh - 140px));
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-3);
  display: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.tibi-panel.is-open { display: flex; }
.tibi-panel__header {
  background: var(--color-primary-700); color: #fff;
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
}
.tibi-panel__header strong { display: block; font-size: var(--fs-body-sm); }
.tibi-panel__header span { display: block; font-size: 0.7rem; color: rgba(255,255,255,0.75); }
.tibi-panel__close { margin-left: auto; color: #fff; width: 28px; height: 28px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; }
.tibi-panel__close:hover { background: rgba(255,255,255,0.15); }
.tibi-panel__body { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.tibi-msg { max-width: 88%; padding: var(--space-3); border-radius: var(--radius-md); font-size: var(--fs-body-sm); line-height: 1.5; }
.tibi-msg--bot { background: var(--color-neutral-100); align-self: flex-start; border-bottom-left-radius: 4px; }
.tibi-msg--user { background: var(--color-primary-600); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.tibi-quick-replies { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }
.tibi-chip {
  font-size: var(--fs-caption); font-weight: 600;
  padding: 0.45rem 0.8rem; border-radius: var(--radius-full);
  background: var(--color-primary-50); color: var(--color-primary-700);
  border: 1px solid var(--color-primary-200);
  transition: background var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.tibi-chip:hover { background: var(--color-primary-100); }
.tibi-chip:active { transform: scale(0.95); }

/* ============ Carrito ============ */
.cart-launcher { position: relative; }
.cart-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--color-accent-500); color: #241400;
  font-size: 0.65rem; font-weight: 800; line-height: 16px; text-align: center;
}
.cart-overlay {
  position: fixed; inset: 0; z-index: 350;
  background: rgba(11,18,32,0.45);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.cart-overlay.is-open { opacity: 1; visibility: visible; }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 351;
  width: min(400px, 100vw);
  background: var(--color-bg);
  box-shadow: var(--elevation-3);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-emphasized);
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.cart-drawer__header strong { font-size: var(--fs-h3); }
.cart-drawer__close { width: 32px; height: 32px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; }
.cart-drawer__close:hover { background: var(--color-neutral-100); }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-6); }
.cart-empty { color: var(--color-text-muted); padding-block: var(--space-8); text-align: center; }
.cart-item { display: flex; gap: var(--space-3); padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); align-items: center; }
.cart-item__img { width: 64px; height: 64px; object-fit: contain; background: var(--color-neutral-50); border-radius: var(--radius-sm); flex-shrink: 0; }
.cart-item__info { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cart-item__name { font-weight: 600; font-size: var(--fs-body-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-item__price { font-size: var(--fs-caption); color: var(--color-text-muted); }
.cart-item__qty { display: inline-flex; align-items: center; gap: var(--space-3); margin-top: 4px; }
.cart-item__qty button {
  width: 26px; height: 26px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.cart-item__qty button:hover { background: var(--color-primary-50); border-color: var(--color-primary-300); }
.cart-item__qty button:active { transform: scale(0.9); }
.cart-item__remove { width: 28px; height: 28px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--color-neutral-400); flex-shrink: 0; }
.cart-item__remove:hover { background: var(--color-neutral-100); color: var(--color-error); }
.cart-drawer__footer { padding: var(--space-4) var(--space-6) var(--space-6); border-top: 1px solid var(--color-border); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); font-size: var(--fs-body); }
.cart-total strong { font-size: 1.35rem; font-weight: 800; }
.cart-total--sub { color: var(--color-text-muted); font-size: var(--fs-body-sm); }
.cart-total--discount { color: var(--color-success); font-size: var(--fs-body-sm); font-weight: 600; }
.cart-clear { display: block; width: 100%; text-align: center; margin-top: var(--space-3); font-size: var(--fs-body-sm); color: var(--color-text-muted); }
.cart-clear:hover { color: var(--color-error); }

/* ============ Métodos de pago (checkout sin datos personales) ============ */
.payment-methods { display: flex; flex-direction: column; gap: var(--space-3); }
.payment-method {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-bg);
}
.payment-method__name { font-weight: 600; font-size: var(--fs-body-sm); color: var(--color-neutral-800); }
.payment-method__detail { font-size: var(--fs-caption); color: var(--color-text-muted); margin-top: 2px; }
.payment-method__amount { font-weight: 700; font-size: var(--fs-body-sm); color: var(--color-primary-600); white-space: nowrap; }

/* ============ Cupón de descuento ============ */
.coupon-box { margin-bottom: var(--space-4); }
.coupon-box__row { display: flex; gap: var(--space-2); }
.coupon-box__row input {
  flex: 1; padding: 0.6rem 0.85rem; border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm); text-transform: uppercase; font-size: var(--fs-body-sm);
}
.coupon-box__row input:focus { border-color: var(--color-primary-400); outline: none; }
.coupon-box__msg { font-size: var(--fs-caption); margin-top: var(--space-2); min-height: 1em; }
.coupon-box__msg.is-error { color: var(--color-error); }
.coupon-box__msg.is-success { color: var(--color-success); font-weight: 600; }

/* ============ Destacados: grilla FIJA (sin flechas ni loop de giro) ============
   Antes había un carrusel infinito con flechas que se bugueaba. Se reemplazó
   por una grilla estática: el contenido (qué productos se muestran) rota
   solo cada 60-90s, pero la POSICIÓN de las tarjetas nunca gira ni se anima
   horizontalmente — elimina de raíz la clase de bug del carrusel anterior. */
.featured-grid {
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.featured-card {
  position: relative;
  /* Glow neón celeste MUY sutil — un halo, no un borde sólido */
  box-shadow: var(--elevation-1), 0 0 0 1px rgba(63, 166, 227, 0.10), 0 0 22px rgba(63, 166, 227, 0.14);
  animation: featured-float 5.5s ease-in-out infinite;
  will-change: transform; /* transform puro: no dispara reflow */
}
.featured-card:hover { box-shadow: var(--elevation-2), 0 0 0 1px rgba(63, 166, 227, 0.16), 0 0 28px rgba(63, 166, 227, 0.22); }
/* Delays negativos y duraciones ligeramente distintas por tarjeta: arrancan
   ya "en marcha" y en fases distintas entre sí, para que no se vea
   sincronizado (una sola @keyframes, desfasada por tarjeta). */
.featured-card:nth-child(1) { animation-duration: 5.2s; animation-delay: -0.4s; }
.featured-card:nth-child(2) { animation-duration: 6.1s; animation-delay: -2.1s; }
.featured-card:nth-child(3) { animation-duration: 5.6s; animation-delay: -3.6s; }
.featured-card:nth-child(4) { animation-duration: 6.4s; animation-delay: -1.2s; }
.featured-card:nth-child(5) { animation-duration: 5.9s; animation-delay: -4.4s; }
.featured-card:nth-child(6) { animation-duration: 5.4s; animation-delay: -0.9s; }
@keyframes featured-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .featured-card { animation: none; }
}
/* El contenido interno (imagen/título/precio) se reemplaza cada 60-90s con
   un fundido — la tarjeta en sí (y su animación de flotación) nunca se
   recrea, así el "floating" no se corta ni reinicia al rotar productos. */
.featured-card__content { transition: opacity 0.35s var(--ease-standard); }
.featured-card__content.is-swapping { opacity: 0; }

/* ============ Tienda: tabs + buscador + filtro ============ */
.tienda-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-4); margin-bottom: var(--space-6);
}
.tienda-tabs { display: flex; gap: var(--space-6); }
.tienda-tab {
  padding-bottom: var(--space-3); margin-bottom: calc(var(--space-4) * -1 - 1px);
  font-weight: 700; color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
}
.tienda-tab.is-active { color: var(--color-primary-700); border-bottom-color: var(--color-primary-600); }
.tienda-toolbar__actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.search-input {
  display: flex; align-items: center; gap: var(--space-2);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-full);
  padding: 0.55rem 1rem; min-width: 220px;
  color: var(--color-neutral-400);
  transition: border-color var(--dur-base) var(--ease-standard);
}
.search-input:focus-within { border-color: var(--color-primary-400); }
.search-input input {
  border: none; outline: none; flex: 1; font-size: var(--fs-body-sm); color: var(--color-neutral-900); background: transparent;
}
.filter-panel {
  display: grid; gap: var(--space-6); grid-template-columns: 1fr;
  background: var(--color-neutral-50); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-6);
}
@media (min-width: 700px) { .filter-panel { grid-template-columns: 1fr 1fr auto; align-items: end; } }
.filter-panel__group h3 { font-size: var(--fs-body-sm); margin-bottom: var(--space-3); }
/* Categoría: antes la lista de checkboxes quedaba siempre expandida dentro del
   grid del panel, y como esa columna era mucho más alta que "Precio"/"Aplicar
   filtros", con align-items:end esas dos quedaban pegadas abajo dejando un
   hueco en blanco arriba. Ahora es un <details> colapsado por defecto cuyo
   panel abierto flota ABSOLUTO por encima del resto — la fila del grid nunca
   cambia de alto, así que no hay desalineación posible. */
.filter-category-dropdown { position: relative; }
.filter-category-dropdown__summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  list-style: none; cursor: pointer; user-select: none;
  padding: 0.65rem 1rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm); font-weight: 600; color: var(--color-neutral-700);
  background: var(--color-bg);
}
.filter-category-dropdown__summary::-webkit-details-marker { display: none; }
.filter-category-dropdown__summary svg { transition: transform var(--dur-base) var(--ease-standard); flex-shrink: 0; }
.filter-category-dropdown[open] .filter-category-dropdown__summary svg { transform: rotate(180deg); }
.filter-category-dropdown[open] .filter-category-dropdown__summary { border-color: var(--color-primary-400); }
.filter-category-dropdown__panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 5;
  min-width: 220px; background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--elevation-2); padding: var(--space-3);
}
.filter-checkbox { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-body-sm); margin-bottom: var(--space-2); cursor: pointer; }
.filter-checkbox:last-child { margin-bottom: 0; }
.filter-panel__price { display: flex; align-items: center; gap: var(--space-2); }
.filter-panel__price input {
  width: 100px; padding: 0.5rem 0.75rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
}
.filter-panel__actions { display: flex; gap: var(--space-2); }

/* ============ Category Banner (carrusel de fondo por categoría) ============ */
.category-banner {
  position: relative; overflow: hidden;
  min-height: 320px; display: flex; align-items: flex-end;
  border-radius: var(--radius-lg); color: #fff;
  margin-top: var(--space-4);
}
.category-banner__slides { position: absolute; inset: 0; z-index: 0; }
.category-banner__slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  animation: cb-fade 15s infinite;
}
.category-banner__slide:nth-child(1) { animation-delay: 0s; }
.category-banner__slide:nth-child(2) { animation-delay: 5s; }
.category-banner__slide:nth-child(3) { animation-delay: 10s; }
@keyframes cb-fade {
  0%, 3% { opacity: 0; transform: scale(1.04); }
  8%, 28% { opacity: 1; transform: scale(1); }
  33%, 100% { opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .category-banner__slide { animation: none; opacity: 0; }
  .category-banner__slide:first-child { opacity: 1; }
}
.category-banner__content {
  position: relative; z-index: 1; width: 100%;
  padding: var(--space-6);
  /* Misma placa sólida semi-opaca de .category-tile__body: contraste garantizado
     sin importar el brillo de la foto de fondo (fotos de producto sobre blanco). */
  background: rgba(9, 15, 26, 0.78);
}
.category-banner h1 { color: #fff; margin: 0; }
.category-banner p { color: rgba(255,255,255,0.85); margin-top: var(--space-2); max-width: 60ch; }

/* ============ Panel de acceso administrativo (prototipo, no seguro — ver admin-panel.js) ============ */
.form-error { color: var(--color-error); font-size: var(--fs-body-sm); font-weight: 600; margin-top: .75rem; }

.admin-modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(11,18,32,0.6);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.admin-modal {
  background: var(--color-bg); border-radius: var(--radius-lg);
  padding: var(--space-6); max-width: 360px; width: 100%;
  box-shadow: var(--elevation-3);
}
.admin-modal h3 { margin-bottom: var(--space-2); }
.admin-modal p { color: var(--color-text-muted); font-size: var(--fs-body-sm); margin-bottom: var(--space-4); }
.admin-modal input {
  width: 100%; padding: 0.75rem 1rem; border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm); margin-bottom: var(--space-3);
}
.admin-modal__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.admin-edit-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 400;
  background: var(--color-accent-500); color: #241400;
  padding: var(--space-3) var(--space-4);
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between;
  font-size: var(--fs-body-sm); font-weight: 600;
}
.admin-edit-banner button {
  background: rgba(0,0,0,0.15); border-radius: var(--radius-sm);
  padding: 0.4rem 0.9rem; font-weight: 700; font-size: var(--fs-caption);
}
.admin-edit-banner button:hover { background: rgba(0,0,0,0.25); }
.admin-edit-banner span[data-edit-banner-status] { flex: 1 1 auto; }
.admin-edit-banner span[data-edit-banner-status].is-error { color: var(--color-error); font-weight: 800; }
.admin-edit-banner button[data-edit-save] { background: #241400; color: var(--color-accent-500); }
.admin-edit-banner button[data-edit-save]:hover { background: #1a0e00; }
html.tdr-edit-mode [contenteditable="true"]:hover { outline: 1.5px dashed var(--color-primary-400); outline-offset: 2px; cursor: text; }
html.tdr-edit-mode .tdr-editable-img { cursor: pointer; transition: outline var(--dur-fast) var(--ease-standard); }
html.tdr-edit-mode .tdr-editable-img:hover { outline: 2px dashed var(--color-accent-500); outline-offset: 2px; }
html.tdr-edit-mode .tdr-editable-price { cursor: pointer; border-radius: 4px; transition: background var(--dur-fast) var(--ease-standard); }
html.tdr-edit-mode .tdr-editable-price:hover { background: color-mix(in srgb, var(--color-accent-500) 18%, transparent); outline: 1.5px dashed var(--color-accent-500); }
.admin-modal input[type="file"] { width: 100%; font-size: var(--fs-body-sm); }
.admin-hero-edit-btn {
  position: absolute; top: var(--space-4); right: var(--space-4); z-index: 3;
  background: rgba(9,15,26,0.75); color: #fff; font-size: var(--fs-caption); font-weight: 700;
  padding: 0.5rem 0.9rem; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,0.3);
}
.admin-hero-edit-btn:hover { background: rgba(9,15,26,0.9); }
.price-edit-label { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: var(--fs-body-sm); margin-bottom: 4px; }
.price-edit-source { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-accent-600); background: color-mix(in srgb, var(--color-accent-500) 18%, white); padding: 2px 6px; border-radius: var(--radius-full); }
.admin-modal input.is-source-field { border-color: var(--color-accent-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-500) 20%, transparent); }

/* ============ Cards genéricas (servicio técnico, contacto) ============ */
.info-card {
  background: var(--color-neutral-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.icon-tile {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: var(--color-primary-50); color: var(--color-primary-700);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}

/* ============ Formulario ============ */
.form-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-field label { font-weight: 600; font-size: var(--fs-body-sm); }
.form-field input, .form-field textarea {
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-base) var(--ease-standard);
}
.form-field input:focus, .form-field textarea:focus { border-color: var(--color-primary-400); }

/* ============ Utilidades de grid ============ */
.grid-3 { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
@media (min-width: 800px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-2 { display: grid; gap: var(--space-12); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 800px) { .grid-2 { grid-template-columns: 1.1fr 1fr; } }

.category-tile {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4/5; color: #fff; display: flex; align-items: flex-end;
  transition: transform var(--dur-base) var(--ease-standard);
}
.category-tile:hover { transform: translateY(-4px); }
.category-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.category-tile::before {
  /* Degradado decorativo sobre toda la foto (profundidad visual) — el contraste
     REAL del texto no depende de esto, ver .category-tile__body más abajo. */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,18,32,0.05) 30%, rgba(11,18,32,0.55) 100%);
}
.category-tile__body {
  position: relative; padding: var(--space-6); width: 100%;
  /* Placa sólida y semi-opaca detrás del texto: garantiza contraste sin
     importar el brillo de la foto de fondo (muchas son fotos de producto
     sobre fondo blanco, donde un degradado solo no alcanza). */
  background: rgba(9, 15, 26, 0.78);
  backdrop-filter: blur(2px);
}
.category-tile h3 { color: var(--color-primary-100); margin-bottom: var(--space-2); }

.badge--discount {
  background: var(--color-error); color: #fff; font-weight: 800;
  display: inline-block; margin-bottom: var(--space-2);
}
.badge--discount:empty { display: none; }

/* ============ Reseñas (resenas.html) ============ */
/* El padding-block por defecto de <section> (--section-y, hasta 7rem) está
   pensado para secciones con bloques de contenido largos (texto + imagen,
   pasos, etc.). En Reseñas el contenido de cada sección es corto (una barra
   de stats, tarjetas de reseña, una grilla de fotos), así que ese mismo
   padding generaba franjas de espacio en blanco desproporcionadas entre
   secciones. Achicamos solo acá, sin tocar el resto del sitio. */
.section--compact { padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); }
.reviews-stats {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-8);
  background: var(--color-neutral-50); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8);
}
.reviews-stats__score { display: flex; align-items: center; gap: var(--space-3); }
.reviews-stats__item { text-align: center; }
.reviews-stats__number { display: block; font-size: 2rem; font-weight: 800; color: var(--color-primary-600); line-height: 1; }
.reviews-stats__label { font-size: var(--fs-body-sm); color: var(--color-text-muted); }
.reviews-stats__divider { width: 1px; height: 48px; background: var(--color-border); }
.reviews-stars { color: #F5A623; font-size: 1.15rem; letter-spacing: 2px; }
.reviews-stars--sm { font-size: 0.85rem; letter-spacing: 1px; }

.reviews-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: var(--space-6); }
.review-card {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--elevation-1);
}
.review-card__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.review-card__avatar {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background: var(--color-primary-600); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.review-card__head > div:nth-child(2) { flex: 1; }
.review-card__google { flex-shrink: 0; }
.review-card p { color: var(--color-neutral-700); font-size: var(--fs-body-sm); line-height: 1.6; }

.category-tile a { color: var(--color-primary-50); font-weight: 700; font-size: var(--fs-body-sm); display: inline-flex; align-items: center; gap: 6px; }