/* ═══════════════════════════════════════════════════════════════════════════
   shopCELL — Tienda pública. Layout y composición sobre tokens.css + ui.css.
   Sin colores literales: todo se resuelve con tokens semánticos.
   ═══════════════════════════════════════════════════════════════════════════ */

.container { max-width: calc(var(--container-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
[x-cloak] { display: none !important; }

/* ── Barra de anuncio + Header ──────────────────────────────────────────── */
.anuncio-bar {
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs); text-align: center; padding: var(--space-2) var(--space-4);
}
.anuncio-bar .cuenta { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.anuncio-bar a { color: var(--color-text); }

.tienda-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--color-bg); border-bottom: 1px solid var(--color-border);
}
.tienda-header .container { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; flex-wrap: wrap; padding-block: var(--space-2); }
.logo { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); font-weight: var(--weight-semibold); text-decoration: none; color: var(--color-text); min-height: var(--target-min); }
.logo .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-action); }
.tienda-nav { display: flex; align-items: center; gap: var(--space-2); margin-right: auto; }
.tienda-nav a {
  display: inline-flex; align-items: center; min-height: var(--target-min);
  color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium);
  padding: 0 var(--space-3); border-radius: var(--radius-md);
}
.tienda-nav a:hover { color: var(--color-text); background: var(--color-surface-muted); }
.tienda-nav a[aria-current="page"] { color: var(--color-text); box-shadow: inset 0 -2px 0 var(--color-action); border-radius: 0; }
.buscador { position: relative; flex: 0 1 280px; min-width: 160px; }
.buscador .input { padding-left: var(--space-10); }
.buscador i { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
.carrito-btn { position: relative; }
.carrito-btn .badge {
  position: absolute; top: calc(var(--space-1) * -1); right: calc(var(--space-1) * -1); background: var(--color-action); color: var(--color-on-action);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); min-width: 20px; height: 20px;
  border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; padding: 0 var(--space-1);
}
.whatsapp-flotante {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: var(--z-floating);
  width: var(--fab-size); height: var(--fab-size); border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--color-action); color: var(--color-on-action); font-size: var(--text-xl); text-decoration: none;
  box-shadow: var(--shadow-md); transition: transform var(--duration-base, .2s), opacity var(--duration-base, .2s);
}
.whatsapp-flotante.oculto { transform: translateY(80px); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .whatsapp-flotante { transition: none; } }
@media (min-width: 1024px) { .whatsapp-flotante { right: var(--space-6); bottom: var(--space-6); } }
.tienda-footer { border-top: 1px solid var(--color-border); margin-top: var(--section-gap); padding: var(--space-8) 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.tienda-footer-contenido { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); }
.tienda-footer .acceso-personal { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); color: var(--color-text-muted); }
.tienda-footer .acceso-personal:hover { color: var(--color-text); }

/* ── Secciones genéricas ────────────────────────────────────────────────── */
.seccion { padding: calc(var(--section-gap) / 2) 0; }   /* dos secciones contiguas suman exactamente --section-gap */
.seccion-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-6); gap: var(--space-3); flex-wrap: wrap; }

/* ── Hero (carrusel accesible: pausable, sin autoavance si el usuario lo pide) ── */
.hero { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.hero-slide { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; padding: var(--space-12); }
.hero h1 { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-4); }
.hero-controles { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) 0 var(--space-4); }
.hero-dots { display: flex; }
.hero-dots button { border: 0; background: transparent; width: var(--target-min); height: var(--target-min); padding: 0; cursor: pointer; position: relative; }
.hero-dots button::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 6px; width: 12px; border-radius: var(--radius-full); background: var(--color-border-strong); }
.hero-dots button[aria-current="true"]::after { width: 28px; background: var(--color-action); }

/* ── Beneficios y categorías ────────────────────────────────────────────── */
.beneficios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.beneficio { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); padding: var(--space-4); }
.beneficio i { font-size: var(--text-lg); }
.categorias-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: var(--card-gap); list-style: none; padding: 0; margin: 0; }
.categoria-tile { min-height: 120px; justify-content: center; text-decoration: none; color: var(--color-text); }
.categoria-tile:hover { box-shadow: var(--shadow-md); }
.categoria-tile i { font-size: var(--text-2xl); }
.categoria-tile small { color: var(--color-text-muted); font-size: var(--text-xs); }

/* ── Carruseles horizontales ────────────────────────────────────────────── */
.rail { display: flex; gap: var(--card-gap); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 0 var(--space-3); list-style: none; margin: 0; }
/* Sin barra de desplazamiento visible: se navega con flechas, teclado o deslizando. */
.rail { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: 0 0 auto; width: clamp(210px, 24vw, 232px); }

/* ── Tarjeta de producto: una sola acción primaria visible ───────────────── */
.tema-tienda .producto-card { position: relative; padding: var(--card-pad); color: var(--color-text); height: 100%; }
.producto-card:hover { box-shadow: var(--shadow-md); }
.producto-enlace { text-decoration: none; color: inherit; display: flex; flex-direction: column; flex: 1; }
.producto-enlace:focus-visible { outline-offset: 4px; }
.producto-visual { position: relative; border-radius: var(--radius-md); margin-bottom: var(--space-3); overflow: hidden; }
.producto-tags-top { position: absolute; top: var(--space-2); left: var(--space-2); right: var(--space-2); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); z-index: 1; }
.producto-tag-top { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.producto-tag-dcto { flex: none; margin-left: auto; }
.producto-tag-stock { position: absolute; bottom: var(--space-2); left: var(--space-2); }
.producto-marca { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0; font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; color: var(--color-text-muted); letter-spacing: var(--tracking-caps); line-height: var(--leading-normal); }
.producto-nombre { font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: 0; margin: var(--space-1) 0;
  /* Espacio fijo de 2 líneas: los precios de una fila quedan alineados aunque el nombre sea corto. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: calc(2 * var(--leading-tight) * 1em); }
.producto-specs { font-size: var(--text-sm); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--color-text-muted); margin-bottom: var(--space-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: calc(2 * var(--leading-normal) * 1em); }
.producto-precio { font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: 0; }
.producto-precio-antes { font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: line-through; margin-left: var(--space-2); }
.producto-acciones { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.producto-acciones .btn:not(.btn-icon) { flex: 1; }

/* ── Catálogo: filtros por divulgación progresiva ────────────────────────── */
.catalogo-layout { display: flex; gap: var(--space-8); align-items: flex-start; flex-wrap: wrap; }
.catalogo-sidebar { width: 240px; flex: 0 0 240px; display: flex; flex-direction: column; gap: var(--space-2); }
.catalogo-grid { flex: 1 1 480px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--card-gap); list-style: none; padding: 0; margin: 0; }
.filtro-grupo { border-bottom: 1px solid var(--color-border); padding: var(--space-3) 0; }
.filtro-grupo > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  min-height: var(--target-min); font-size: var(--text-sm); font-weight: var(--weight-semibold);
}
.filtro-grupo > summary::-webkit-details-marker { display: none; }
.filtro-grupo > summary::after { content: "+"; font-size: var(--text-lg); color: var(--color-text-muted); }
.filtro-grupo[open] > summary::after { content: "−"; }
.filtro-grupo fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.chip-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; min-height: var(--target-min); font-size: var(--text-sm); padding: 0 var(--space-4);
  border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); cursor: pointer; background: transparent; color: var(--color-text); font-family: inherit;
}
.chip[aria-pressed="true"], .chip.activo, .chip:has(input:checked) { background: var(--color-action); color: var(--color-on-action); border-color: var(--color-action); font-weight: var(--weight-semibold); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.check-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); min-height: var(--target-min); cursor: pointer; }
.check-row > span:first-child { display: inline-flex; align-items: center; gap: var(--space-3); }
.compare-bar {
  position: fixed; bottom: var(--space-4); left: var(--gutter); right: calc(var(--gutter) + var(--fab-size) + var(--space-4)); z-index: var(--z-floating);
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; flex-direction: row;
  padding: var(--space-3) var(--space-4); background: var(--color-surface-raised); box-shadow: var(--shadow-lg);
}

/* ── Detalle de producto ────────────────────────────────────────────────── */
.detalle-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--space-8); }
.miniatura { width: 72px; height: 72px; border-radius: var(--radius-md); cursor: pointer; border: 2px solid transparent; padding: 0; }
.miniatura[aria-pressed="true"] { border-color: var(--color-action); }
.precio-grande { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.color-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: var(--space-2); border: 1px solid var(--color-border-strong); }
.qty-control { display: inline-flex; align-items: center; gap: var(--space-1); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }
.qty-control button { border: 0; background: transparent; color: var(--color-text); cursor: pointer; font-size: var(--text-lg); width: var(--target-min); height: var(--target-min); }
.qty-control output { min-width: 28px; text-align: center; font-weight: var(--weight-semibold); }
.specs-table th { text-transform: none; letter-spacing: 0; font-size: var(--text-sm); font-weight: var(--weight-regular); width: 40%; }

/* ── Carrito ────────────────────────────────────────────────────────────── */
.carrito-item { display: grid; grid-template-columns: 76px 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-4) 0; }
.carrito-resumen { position: sticky; top: 96px; }
.linea-resumen { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); padding: var(--space-1) 0; }
.linea-resumen.total { font-size: var(--text-lg); font-weight: var(--weight-semibold); border-top: 1px solid var(--color-border-strong); margin-top: var(--space-3); padding-top: var(--space-3); }
.metodos-mini { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }

/* ── Checkout: una decisión por paso ────────────────────────────────────── */
.checkout-pasos { display: flex; gap: var(--space-6); margin: 0 0 var(--space-8); padding: 0; list-style: none; flex-wrap: wrap; }
.checkout-paso { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.checkout-paso .num { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--color-border-strong); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.checkout-paso[aria-current="step"] { color: var(--color-text); font-weight: var(--weight-semibold); }
.checkout-paso[aria-current="step"] .num { border-color: var(--color-action); background: var(--color-action); color: var(--color-on-action); }
.checkout-paso.hecho { color: var(--color-text); }
.checkout-paso.hecho .num { border-color: var(--color-action); }
.checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-8); align-items: flex-start; }
.metodo-opcion {
  display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); cursor: pointer; margin-bottom: var(--space-3); position: relative;
}
.metodo-opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.metodo-opcion:has(input:checked) { border-color: var(--color-action); box-shadow: inset 0 0 0 2px var(--color-action); }
.metodo-opcion:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.metodo-opcion i { font-size: var(--text-lg); }

/* ── Comparador ─────────────────────────────────────────────────────────── */
.comparador-mejor { color: var(--color-text); font-weight: var(--weight-semibold); background: var(--color-action-subtle); }

/* ── Seguimiento ────────────────────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; }
.timeline-paso { display: flex; gap: var(--space-4); position: relative; padding-bottom: var(--space-8); }
.timeline-paso:last-child { padding-bottom: 0; }
.timeline-paso::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--color-border-strong); }
.timeline-paso:last-child::before { display: none; }
.timeline-dot { width: 28px; height: 28px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-border-strong); font-size: var(--text-xs); z-index: 1; background: var(--color-bg); }
.timeline-paso.completo .timeline-dot { background: var(--color-action); border-color: var(--color-action); color: var(--color-on-action); }
.timeline-paso.completo::before { background: var(--color-action); }
.timeline-paso.actual .timeline-dot { border-color: var(--color-action); box-shadow: 0 0 0 4px var(--color-action-subtle); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* Puntos de quiebre: 640 · 768 · 1024 · 1280. Móvil = menos de 768px. */
@media (max-width: 767.98px) {
  /* Encabezado: logo + carrito arriba, cuenta, buscador y menú debajo. Deja de ser fijo para no comerse la pantalla. */
  .tienda-header { position: static; }
  .logo { order: 1; }
  .tienda-header .container > .carrito-btn { order: 1; margin-left: auto; }
  .tienda-header .container > .btn:not(.carrito-btn), .tienda-header .container > form:not(.buscador) { order: 2; }
  .buscador { order: 3; flex: 1 1 100%; min-width: 0; }
  .tienda-nav { order: 4; width: 100%; justify-content: flex-start; margin-right: 0; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .tienda-nav::-webkit-scrollbar { display: none; }
  .tienda-nav a { white-space: nowrap; flex: none; scroll-snap-align: start; }
  .hero-slide { grid-template-columns: 1fr; padding: var(--space-6); }
  .catalogo-layout { flex-direction: column; align-items: stretch; }
  .catalogo-sidebar { width: 100%; flex-basis: auto; }
  .catalogo-grid { flex: 0 0 auto; width: 100%; }
  .catalogo-layout > .catalogo-resultados { flex: 0 0 auto !important; width: 100%; }
  main#contenido { padding-bottom: var(--space-20); }
}
@media (min-width: 768px) and (max-width: 1279.98px) { .tienda-nav a { padding-inline: var(--space-1); } .tienda-nav { gap: var(--space-2); } .buscador { flex-basis: 200px; } }   /* cabe en una fila desde 1024px */
@media (max-width: 639.98px) { .tienda-header .logo { flex: 1 0 calc(100% - var(--target-min) - var(--space-3)); } }   /* teléfonos: logo + carrito llenan la primera fila y la cuenta pasa a la segunda */
@media (max-width: 1023.98px) { .checkout-layout { grid-template-columns: 1fr; } }

/* Botón de quitar dentro de etiquetas (área táctil ampliada sin agrandar la etiqueta) */
.btn-quitar { border: 0; background: transparent; color: inherit; cursor: pointer; padding: var(--space-1); line-height: 1; border-radius: var(--radius-sm); }

/* Titular principal del hero (un único nivel "display" por pantalla) */
.display { font-size: var(--text-display); font-weight: var(--weight-semibold); line-height: var(--leading-display); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4); }
.entrega-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-6); }
.rail:focus-visible { outline-offset: 4px; }

/* ── Composición de vistas de la tienda ─────────────────────────────────── */
.checkout-paso button.btn { padding: 0 var(--space-3); }
.carrito-acciones { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); }
.cupon-form { display: flex; gap: var(--space-3); align-items: stretch; margin-top: var(--space-3); }
.fila-cantidad { display: flex; align-items: center; gap: var(--space-6); margin-bottom: var(--space-6); flex-wrap: wrap; }
.acciones-compra { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.acciones-compra .btn-primary { flex: 1 1 200px; }
.buscar-pedido { display: flex; gap: var(--space-4); align-items: flex-end; max-width: 460px; margin-bottom: var(--space-8); }
.buscar-pedido .btn { margin-bottom: var(--space-4); }
.paginacion { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-8); }
.tabla-comparador { min-width: 560px; }
.tabla-comparador thead th { vertical-align: top; text-transform: none; letter-spacing: 0; font-size: var(--text-sm); color: var(--color-text); }
.tabla-comparador a { font-weight: var(--weight-semibold); }
.fila-etiqueta { white-space: nowrap; }

/* ── Fotos de producto (subidas desde el panel) ───────────────────────────── */
.miniaturas { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.miniaturas button { width: 72px; height: auto; aspect-ratio: 1 / 1; padding: var(--space-1); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-foto-fondo); cursor: pointer; min-width: var(--target-min); min-height: var(--target-min); }
.miniaturas button[aria-pressed="true"] { border: 2px solid var(--color-action); }
.miniaturas img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── Mi cuenta (cliente) ─────────────────────────────────────────────── */
.cuenta-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-6); padding: 0; list-style: none; border-bottom: 1px solid var(--color-border); }
.cuenta-nav a { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); color: var(--color-text-muted); text-decoration: none; min-height: var(--target-min); }
.cuenta-nav a:hover { color: var(--color-text); }
.cuenta-nav a[aria-current="page"] { color: var(--color-text); box-shadow: inset 0 -2px 0 var(--color-action); }
.cuenta-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--card-gap); margin: 0 0 var(--space-6); }
.cuenta-stat { padding: var(--card-pad); }
.cuenta-stat dd { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.cuenta-stat dt { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.cuenta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-6); align-items: flex-start; }
.cuenta-lista > li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.direccion-card { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.auth-tienda { max-width: 440px; margin-inline: auto; }
.btn-favorito[aria-pressed="true"] { color: var(--color-danger-fg); }

.anuncio-bar { position: relative; }
.anuncio-cerrar { position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: inherit; cursor: pointer; min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md, 6px); }
.anuncio-cerrar:hover, .anuncio-cerrar:focus-visible { background: var(--color-surface-muted); }
.btn-cuenta .cuenta-nombre { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Teléfonos: dos productos por fila y márgenes más justos */
@media (max-width: 639.98px) {
  .catalogo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .categorias-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.filtros-cuerpo { display: flex; flex-direction: column; gap: var(--space-2); }

/* ── Fotos de producto ────────────────────────────────────────────────────────
   Fondo neutro claro en cualquier tema (las fotos con fondo blanco no se cortan contra el
   tema oscuro), proporción fija (no hay saltos de diseño) y recuadro con ícono + nombre
   cuando el producto no tiene foto o ésta no carga. */
.foto-producto { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-foto-fondo); color: var(--color-foto-texto); border-radius: var(--radius-md); }
.foto-producto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: var(--space-3); background: var(--color-foto-fondo); }
.foto-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4); text-align: center; max-width: 100%; }
.foto-placeholder .ph { font-size: var(--text-4xl); line-height: 1; }
.foto-placeholder-nombre { font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.foto-mini { border-radius: var(--radius-md); }
.foto-mini .foto-placeholder { padding: 0; }
.foto-mini .foto-placeholder .ph { font-size: var(--text-2xl); }
.foto-hero { aspect-ratio: 4 / 3; width: min(100%, 440px); margin-inline: auto; border-radius: var(--radius-lg); }
.foto-hero .foto-placeholder .ph { font-size: var(--text-5xl); }
.foto-hero .foto-placeholder-nombre { font-size: var(--text-base); }
.detalle-visual { position: relative; overflow: hidden; background: var(--color-foto-fondo); aspect-ratio: 1 / 1; width: min(100%, 560px); border-radius: var(--radius-lg); margin-bottom: var(--space-4); }
.detalle-visual .foto-placeholder .ph { font-size: var(--text-6xl); }
.detalle-visual .foto-placeholder-nombre { font-size: var(--text-lg); }
.detalle-foto { width: 100%; height: 100%; object-fit: contain; padding: var(--space-6); display: block; background: var(--color-foto-fondo); }
.carrito-thumb { width: 76px; height: auto; aspect-ratio: 1 / 1; }
.comparador-visual { width: 128px; max-width: 100%; aspect-ratio: 4 / 3; margin-bottom: var(--space-3); }
/* Etiquetas sobre la foto: siempre píldora oscura (el fondo de la foto es claro). */
.foto-producto .tag { background: var(--color-foto-etiqueta-bg); color: var(--color-foto-etiqueta-fg); border-color: var(--color-foto-etiqueta-bg); z-index: 1; }
.foto-producto .tag-warning { background: var(--color-warning-bg); color: var(--color-warning-fg); border-color: var(--color-warning-bg); }
.hero-visual:not(.foto-producto) { aspect-ratio: 4 / 3; width: min(100%, 440px); margin-inline: auto; border-radius: var(--radius-lg); background: var(--color-surface-sunken); }

/* ── Tarjetas de categoría: misma altura ───────────────────────────────── */
.categorias-grid > li { display: flex; }
.categorias-grid > li > .categoria-tile { flex: 1; width: 100%; height: auto; }

/* ── Flechas de los carruseles ─────────────────────────────────────────── */
.rail-wrap { position: relative; }
.rail-flecha {
  position: absolute; top: 40%; transform: translateY(-50%); z-index: 2;
  width: var(--target-min); height: var(--target-min); border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--color-action); color: var(--color-on-action); border: 0; box-shadow: var(--shadow-lg); font-size: var(--text-lg);
}
.rail-flecha:hover { background: var(--color-action-hover); }
.rail-flecha-ant { left: -12px; }
.rail-flecha-sig { right: -12px; }
@media (max-width: 767.98px), (pointer: coarse) { .rail-flecha { display: none !important; } }

/* ── Entrega: una sola tarjeta, Lima y Provincia con la misma estructura ── */
.entrega-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; flex-direction: row; }
.entrega-col { padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--space-4); }
.entrega-col + .entrega-col { border-left: 1px solid var(--color-border); }
.entrega-lista { grid-template-columns: 1fr; gap: var(--space-3); flex: 1; align-content: start; }
@media (max-width: 767.98px) {
  .entrega-card { grid-template-columns: 1fr; }
  .entrega-col + .entrega-col { border-left: 0; border-top: 1px solid var(--color-border); }
}

/* ── Pie de página (4 columnas) ───────────────────────────────────────────── */
.tienda-footer { padding: var(--space-12) 0 var(--space-6); }
.footer-columnas { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1.5fr; gap: var(--space-12) var(--space-8); }
.footer-titulo { font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-text); margin: 0 0 var(--space-4); }
.footer-columnas p { margin: 0 0 var(--space-4); }
.footer-lista { display: flex; flex-direction: column; }   /* filas de 44px contiguas, como una lista nativa */
.footer-lista a, .footer-datos a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); color: var(--color-text-muted); }
.footer-lista a:hover, .footer-datos a:hover { color: var(--color-text); }
.footer-reclamaciones { color: var(--color-text) !important; font-weight: var(--weight-semibold); }
.footer-datos { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-datos dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-text-subtle); }
.footer-datos dd { margin: 0; color: var(--color-text); overflow-wrap: anywhere; }
.footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
@media (max-width: 1023.98px) { .footer-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .footer-columnas { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ── Páginas legales y Libro de Reclamaciones ─────────────────────────────── */
.legal-pagina { max-width: 860px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-6); }
.legal-pagina h1, .legal-pagina p { margin: 0; }
.legal-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.legal-nav a { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-6); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); color: var(--color-text); text-decoration: none; font-size: var(--text-sm); }
.legal-nav a:hover { background: var(--color-surface-muted); }
.legal-nav a[aria-current="page"] { background: var(--color-action); color: var(--color-on-action); border-color: var(--color-action); font-weight: var(--weight-semibold); }
.legal-seccion h2 { font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.legal-seccion p, .legal-seccion li { line-height: var(--leading-normal); }
.legal-seccion ul, .legal-seccion ol { margin: 0 0 var(--space-3); padding-left: var(--space-8); display: flex; flex-direction: column; gap: var(--space-2); }
.legal-acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.fieldset-card { min-width: 0; }
.fieldset-card > legend { float: none; padding: 0; margin-bottom: var(--space-3); }
.reclamo-constancia h2 { display: flex; align-items: center; gap: var(--space-3); color: var(--color-success-fg); margin: 0; }
.reclamo-numero { font-size: var(--text-lg); }
@media print { .tienda-header, .tienda-footer, .anuncio-bar, .whatsapp-flotante, .no-imprimir, .skip-link { display: none !important; } body { background: Canvas; color: CanvasText; } }
.legal-pagina .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); column-gap: var(--space-6); }
.fieldset-card { border: 0; margin: 0; }
.legal-pagina form { display: flex; flex-direction: column; gap: var(--space-6); }
.fieldset-card > legend { float: left; width: 100%; margin-bottom: var(--space-3); }
.fieldset-card > legend + * { clear: both; }


/* ── Componentes compartidos (ui.css / base.css) con la escala completa de 4px ──
   ui.css y base.css se comparten con el área de gestión, que conserva su densidad; por eso los ajustes
   de la tienda viven aquí, acotados a .tema-tienda. */
.tema-tienda .card { padding: var(--card-pad); gap: var(--space-2); }
/* Botones: compacto 40 · estándar 44 · principal 56. Relleno horizontal ≥16px (24px en los primarios). */
.tema-tienda .btn { gap: var(--space-2); min-height: var(--btn-h); padding-inline: var(--space-4); }
.tema-tienda .btn-primary { padding-inline: var(--space-6); }
.tema-tienda .btn-sm { min-height: var(--btn-h-sm); padding-inline: var(--space-4); }
.tema-tienda .btn-lg { min-height: var(--btn-h-lg); padding-inline: var(--space-6); font-size: var(--text-base); }
.tema-tienda .btn-icon { width: var(--target-min); min-width: var(--target-min); padding: 0; }
/* Un control visualmente más pequeño que 44px conserva un área táctil de 44px (pseudo-elemento invisible). */
.tema-tienda .btn-sm, .btn-quitar, .anuncio-cerrar { position: relative; }
.tema-tienda .btn-sm::after, .btn-quitar::after, .anuncio-cerrar::after { content: ""; position: absolute; inset: min(0px, calc((100% - var(--target-min)) / 2)); }
.acciones-terciarias { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.tema-tienda .field { gap: var(--space-2); }
.tema-tienda .field-error { gap: var(--space-2); }
.tema-tienda .radio { gap: var(--space-3); }
.tema-tienda .seg-opt { gap: var(--space-2); padding-inline: var(--space-4); }
.tema-tienda .tag { gap: var(--space-1); padding: var(--space-1) var(--space-2); }
.tema-tienda .leyenda-serie { gap: var(--space-2); }
.tema-tienda input[type="checkbox"], .tema-tienda input[type="radio"] { margin: 0; }
@media (min-width: 1024px) { .tema-tienda .producto-card { padding: var(--space-5); } }   /* tarjetas de 4 por fila: 20px (rango 20–24) para no ahogar el contenido */

/* ── Fase 2: áreas táctiles ───────────────────────────────────────────────── */
.tema-tienda input[type="range"] { width: 100%; height: var(--target-min); margin: 0; }
.filtro-grupo .btn-sm { margin-top: var(--space-2); }
/* Enlaces dentro de una frase: se amplía el área táctil a 44px de alto sin mover el texto. */
.tema-tienda :is(.legal-seccion p, .legal-seccion li, .legal-pagina > p, .entrega-lista li, .auth-tienda p, .field label, .field-hint, .radio) a:not(.btn) { position: relative; }
.tema-tienda :is(.legal-seccion p, .legal-seccion li, .legal-pagina > p, .entrega-lista li, .auth-tienda p, .field label, .field-hint, .radio) a:not(.btn)::after { content: ""; position: absolute; inset: calc((var(--target-min) - 1lh) / -2) calc(var(--space-1) * -1); }


/* ── Fase 3: tipografía ───────────────────────────────────────────────────────
   Escala en tokens.css (razón 1,25). ui.css y base.css se comparten con el área de gestión, por eso
   los ajustes de la tienda van aquí, acotados a .tema-tienda. */
.tema-tienda h1, .tema-tienda h2, .tema-tienda h3 { letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.tema-tienda h4, .tema-tienda h5, .tema-tienda .h4, .tema-tienda .h5 { letter-spacing: 0; line-height: var(--leading-tight); }
.tema-tienda h1 { font-size: var(--text-2xl); line-height: var(--leading-display); }
.tema-tienda .h2 { letter-spacing: var(--tracking-tight); line-height: var(--leading-display); }
.tema-tienda h6, .tema-tienda .kicker, .tema-tienda .card-kicker, .tema-tienda .table th { letter-spacing: var(--tracking-caps); }
.tema-tienda .card-title { line-height: var(--leading-tight); }
/* Texto legible: nunca por debajo de 14px. */
.tema-tienda small, .tema-tienda .text-small, .tema-tienda .field-hint, .tema-tienda .field-error, .tema-tienda .table caption, .tema-tienda .notice { font-size: var(--text-sm); }
.tema-tienda .table td { font-size: var(--text-sm); }
/* En los campos, 16px: evita el zoom automático de iOS al enfocar y respeta el cuerpo mínimo. */
.tema-tienda .input, .tema-tienda select.input, .tema-tienda textarea.input { font-size: var(--text-base); }
/* Longitud de línea de lectura: 45–75 caracteres. */
.tema-tienda p, .tema-tienda .legal-seccion li { max-width: var(--measure); }
.tema-tienda .estado-vacio p { margin-inline: auto; }
.tema-tienda .tabular { font-feature-settings: "tnum"; }
.tema-tienda .footer-titulo { letter-spacing: var(--tracking-caps); line-height: var(--leading-normal); }
.tema-tienda .producto-precio-antes { white-space: nowrap; display: inline-block; }
@media (max-width: 359.98px) { .producto-acciones .btn > i { display: none; } }   /* a 320px el icono no cabe junto al texto con relleno de 16px */

/* ── Fase 4: estados que no dependen solo del color ───────────────────────────
   hover: borde que se engrosa (anillo interior) o subrayado · active: el control se "hunde" ·
   disabled: opacidad + borde discontinuo · seleccionado: relleno + negrita (ya estaba) ·
   foco: contorno de 3px (ver base.css). */
.tema-tienda .btn:hover:not(:disabled):not([aria-disabled="true"]) { box-shadow: inset 0 0 0 1px currentColor; }
.tema-tienda .btn-ghost:hover:not(:disabled) { box-shadow: none; }                 /* ya engrosa el subrayado */
.tema-tienda .btn:active:not(:disabled):not([aria-disabled="true"]), .tema-tienda .chip:active, .tema-tienda .seg-opt:active { transform: scale(.98); }
.tema-tienda .btn:disabled, .tema-tienda .btn[aria-disabled="true"] { border-style: dashed; box-shadow: none; }
.tema-tienda .btn-primary:disabled { border-color: var(--color-on-action); }
.tema-tienda .input:disabled { opacity: .55; border-style: dashed; cursor: not-allowed; }
.tema-tienda .input:hover:not(:disabled):not(:focus-visible) { box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.tema-tienda .tienda-nav a:not([aria-current="page"]):hover, .tema-tienda .cuenta-nav a:not([aria-current="page"]):hover,
.tema-tienda .legal-nav a:not([aria-current="page"]):hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.tema-tienda .chip:hover:not([aria-pressed="true"]):not(.activo):not(:has(input:checked)) { box-shadow: inset 0 0 0 1px currentColor; }
.tema-tienda .seg-opt:not(:has(input:checked)):hover { text-decoration: underline; text-underline-offset: 4px; }
.tema-tienda .metodo-opcion:hover:not(:has(input:checked)) { box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.tema-tienda .rail-flecha:hover { transform: translateY(-50%) scale(1.08); }
.tema-tienda .producto-card:hover .producto-nombre { text-decoration: underline; text-underline-offset: 3px; }
.tema-tienda .footer-lista a:hover, .tema-tienda .footer-datos a:hover { text-decoration-thickness: 2px; }
/* Foco sobre un relleno claro: el anillo usa el color del texto sobre la acción (18,9:1) y no el del propio relleno (1:1). */
.tema-tienda .seg-opt:has(input:checked):has(input:focus-visible) { outline-color: var(--color-on-action); outline-offset: -6px; }   /* anillo oscuro rodeado de relleno claro: se distingue por ambos lados */
/* El botón de WhatsApp oculto sale también del orden de tabulación (antes recibía foco sin verse). */
.tema-tienda .whatsapp-flotante.oculto { visibility: hidden; transition: transform var(--duration-base), opacity var(--duration-base), visibility 0s linear var(--duration-base); }
@media (prefers-reduced-motion: reduce) { .tema-tienda .btn:active:not(:disabled), .tema-tienda .chip:active, .tema-tienda .seg-opt:active, .tema-tienda .rail-flecha:hover { transform: none; } }


/* ── Fase 5: tarjetas de producto ─────────────────────────────────────────────
   Orden: foto → marca/condición → nombre (2 líneas) → especificaciones (2 líneas) → precio → acción.
   La tarjeta es una columna flexible: el bloque del enlace crece y la acción queda siempre al pie,
   y en rejillas/carruseles todas las tarjetas de una fila se estiran a la misma altura. */
.tema-tienda .producto-card { display: flex; flex-direction: column; gap: 0; }
.producto-precio-linea { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); row-gap: 0; max-width: none; }
.producto-precio-linea .producto-precio-antes { margin-left: 0; }
.tema-tienda .producto-acciones { margin-top: var(--space-3); }
.catalogo-grid, .categorias-grid { align-items: stretch; }
.catalogo-grid > li, .rail > li { display: flex; }
.catalogo-grid > li > .producto-card, .rail > li > .producto-card { width: 100%; height: auto; }
.rail { align-items: stretch; }
/* Insignias: una sola medida (24px de alto, 8px de relleno lateral, esquinas de 4px) y tres posiciones fijas. */
.tema-tienda .tag { display: inline-flex; align-items: center; box-sizing: border-box; height: var(--tag-h); padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1; letter-spacing: 0; }
.tema-tienda .tag-outline { border-color: var(--color-border-strong); }
.foto-producto .tag-outline { border-color: var(--color-foto-etiqueta-bg); }