/* ==========================================================================
   MELU PELUCHES — Tienda pública
   Depende de base.css (tokens, botones, formularios).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BARRA SUPERIOR
   -------------------------------------------------------------------------- */

.franja-anuncio {
  background: linear-gradient(90deg, var(--marca-700), var(--marca-500));
  color: #fff;
  text-align: center;
  font-size: var(--txt-sm);
  font-weight: 600;
  padding: var(--e2) var(--e4);
}
.franja-anuncio a { color: #fff; }

.barra-superior {
  position: sticky;
  top: 0;
  z-index: var(--z-barra);
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  /* El respaldo translúcido sólo se aplica donde el navegador lo soporta;
     si no, queda el color sólido de arriba. */
  backdrop-filter: saturate(180%) blur(12px);
}

@supports (backdrop-filter: blur(1px)) {
  .barra-superior { background: color-mix(in srgb, var(--superficie) 88%, transparent); }
}

.barra-superior__contenido {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: var(--alto-barra);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-weight: 800;
  font-size: var(--txt-lg);
  color: var(--texto);
  text-decoration: none;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.logo__marca { color: var(--marca-texto); }
.logo img { height: 48px; width: auto; }

/* Buscador: en móvil ocupa toda una fila propia debajo del logo. */
.buscador {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.buscador__entrada {
  width: 100%;
  min-height: 42px;
  padding: var(--e2) var(--e4) var(--e2) var(--e10);
  font-size: var(--txt-md);
  background: var(--fondo-alterno);
  border: 1.5px solid transparent;
  border-radius: var(--radio-full);
  color: var(--texto);
}
.buscador__entrada:focus {
  outline: none;
  background: var(--superficie);
  border-color: var(--marca-500);
  box-shadow: 0 0 0 3px var(--marca-fondo-suave);
}
.buscador__icono {
  position: absolute;
  left: var(--e4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-tenue);
  pointer-events: none;
}

/* Sugerencias del autocompletado (RF-PRO-03): sin esto el buscador se percibe
   como un formulario, no como una búsqueda. */
.buscador__sugerencias {
  position: absolute;
  top: calc(100% + var(--e2));
  left: 0; right: 0;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
  overflow: hidden;
  z-index: var(--z-panel);
  max-height: 60vh;
  overflow-y: auto;
}
.buscador__sugerencias:empty { display: none; }

.sugerencia {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  text-decoration: none;
  color: var(--texto);
  border-bottom: 1px solid var(--borde);
}
.sugerencia:last-child { border-bottom: 0; }
.sugerencia:hover, .sugerencia.destacada { background: var(--superficie-hover); }
.sugerencia img {
  width: 42px; height: 42px;
  object-fit: cover;
  border-radius: var(--radio-xs);
  background: var(--fondo-alterno);
  flex-shrink: 0;
}
.sugerencia__nombre { font-weight: 600; font-size: var(--txt-sm); }
.sugerencia__detalle { font-size: var(--txt-xs); color: var(--texto-tenue); }

.acciones-barra { display: flex; align-items: center; gap: var(--e1); flex-shrink: 0; }

.accion-barra {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-width: var(--toque-min);
  min-height: var(--toque-min);
  padding: 0 var(--e2);
  border: 0;
  background: transparent;
  color: var(--texto);
  border-radius: var(--radio-sm);
  cursor: pointer;
  text-decoration: none;
  font-size: var(--txt-sm);
  font-weight: 600;
}
.accion-barra:hover { background: var(--superficie-hover); }

.accion-barra__contador {
  position: absolute;
  top: 4px; right: 2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--acento-600);
  color: #fff;
  border-radius: var(--radio-full);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Menú de categorías, sólo escritorio. */
.menu-categorias { display: none; }

@media (min-width: 1024px) {
  .menu-categorias {
    display: flex;
    align-items: center;
    gap: var(--e1);
    border-top: 1px solid var(--borde);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .menu-categorias::-webkit-scrollbar { display: none; }

  .menu-categorias__enlace {
    padding: var(--e3) var(--e4);
    font-size: var(--txt-sm);
    font-weight: 600;
    color: var(--texto-suave);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
  }
  .menu-categorias__enlace:hover,
  .menu-categorias__enlace.activo {
    color: var(--marca-texto);
    border-bottom-color: var(--marca-500);
  }
}

/* --------------------------------------------------------------------------
   2. BARRA INFERIOR (sólo móvil)
   Navegación alcanzable con el pulgar. Criterio de aceptación 12: el checkout
   se completa sin zoom y con los botones alcanzables con el pulgar.
   -------------------------------------------------------------------------- */

.barra-inferior {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--z-barra);
  display: flex;
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  /* Deja espacio para la barra de gestos de iOS. */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (min-width: 768px) { .barra-inferior { display: none; } }

body.con-barra-inferior { padding-bottom: var(--alto-barra-inferior); }
@media (min-width: 768px) { body.con-barra-inferior { padding-bottom: 0; } }

.barra-inferior__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--alto-barra-inferior);
  padding: var(--e2) var(--e1);
  /* --texto-suave y no --texto-tenue: a 12px, el tenue queda en 4.3:1 de
     contraste, por debajo del mínimo AA de 4.5:1 para texto chico. */
  color: var(--texto-suave);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.barra-inferior__item.activo { color: var(--marca-texto); font-weight: 700; }
.barra-inferior__item svg { width: 22px; height: 22px; }

.barra-inferior__contador {
  position: absolute;
  top: 6px;
  left: calc(50% + 6px);
  min-width: 17px; height: 17px;
  padding: 0 4px;
  background: var(--acento-600);
  color: #fff;
  border-radius: var(--radio-full);
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}

/* --------------------------------------------------------------------------
   3. PORTADA
   -------------------------------------------------------------------------- */

.heroe {
  position: relative;
  background: linear-gradient(135deg, var(--marca-700) 0%, var(--marca-500) 55%, var(--acento-500) 130%);
  color: #fff;
  border-radius: var(--radio-lg);
  padding: var(--e10) var(--e5);
  margin-block: var(--e5);
  overflow: hidden;
  text-align: center;
}

.heroe::after {
  /* Textura sutil: círculos difusos, no una imagen que haya que descargar. */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,.16), transparent 42%),
    radial-gradient(circle at 85% 75%, rgba(255,255,255,.12), transparent 45%);
  pointer-events: none;
}

.heroe > * { position: relative; z-index: 1; }

.heroe__titulo {
  font-size: var(--txt-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--e3);
}
.heroe__bajada {
  font-size: var(--txt-md);
  opacity: .95;
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--e6);
}
.heroe__acciones { display: flex; flex-direction: column; gap: var(--e3); }

.heroe .boton--secundario {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
.heroe .boton--secundario:hover { background: rgba(255,255,255,.26); }

@media (min-width: 768px) {
  .heroe { padding: var(--e16) var(--e12); text-align: left; }
  .heroe__titulo { font-size: var(--txt-3xl); }
  .heroe__bajada { margin-inline: 0; }
  .heroe__acciones { flex-direction: row; }
}

.seccion { margin-block: var(--e10); }

.seccion__encabezado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
  margin-bottom: var(--e5);
  flex-wrap: wrap;
}
.seccion__titulo { font-size: var(--txt-xl); font-weight: 800; letter-spacing: -0.02em; }
.seccion__bajada { color: var(--texto-suave); font-size: var(--txt-sm); margin-top: 2px; }

/* --------------------------------------------------------------------------
   4. GRILLA Y TARJETA DE PRODUCTO
   -------------------------------------------------------------------------- */

.grilla-productos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e3);
}

@media (min-width: 640px)  { .grilla-productos { grid-template-columns: repeat(3, 1fr); gap: var(--e4); } }
@media (min-width: 1024px) { .grilla-productos { grid-template-columns: repeat(4, 1fr); gap: var(--e5); } }
@media (min-width: 1280px) { .grilla-productos { grid-template-columns: repeat(5, 1fr); } }

/* Carrusel horizontal para las secciones de la portada. */
.carrusel-productos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 46%;
  gap: var(--e3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--e3);
  margin-inline: calc(var(--e4) * -1);
  padding-inline: var(--e4);
  scrollbar-width: thin;
}
.carrusel-productos > * { scroll-snap-align: start; }

@media (min-width: 640px)  { .carrusel-productos { grid-auto-columns: 30%; } }
@media (min-width: 1024px) { .carrusel-productos { grid-auto-columns: 22%; margin-inline: 0; padding-inline: 0; } }

.producto {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  transition: box-shadow var(--transicion), transform var(--transicion),
              border-color var(--transicion);
  position: relative;
}

.producto:hover {
  box-shadow: var(--sombra);
  border-color: var(--marca-300);
  transform: translateY(-2px);
}

.producto__figura {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--fondo-alterno);
  overflow: hidden;
}

.producto__figura img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transicion-lenta);
}
.producto:hover .producto__figura img { transform: scale(1.045); }

.producto__cintas {
  position: absolute;
  top: var(--e2); left: var(--e2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e1);
  z-index: 1;
}

.cinta {
  padding: 3px var(--e2);
  border-radius: var(--radio-xs);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  background: var(--marca-600);
  box-shadow: var(--sombra-sm);
}
.cinta--grua    { background: #0d9488; }
.cinta--nuevo   { background: var(--acento-600); }
.cinta--promo   { background: var(--error-500); }
.cinta--sin-stock { background: #64748b; }

.producto__favorito {
  position: absolute;
  top: var(--e2); right: var(--e2);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--superficie) 90%, transparent);
  border: 0;
  border-radius: var(--radio-full);
  cursor: pointer;
  color: var(--texto-suave);
  box-shadow: var(--sombra-sm);
  z-index: 1;
}
.producto__favorito.activo { color: var(--acento-600); }

.producto__cuerpo {
  padding: var(--e3);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  flex: 1;
}

.producto__nombre {
  font-size: var(--txt-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--texto);
  text-decoration: none;
  /* Dos líneas máximo: mantiene la grilla pareja sin cortar a media palabra. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.producto__nombre:hover { color: var(--marca-texto); }

/* La medida es el atributo de decisión principal (criterio 1.1): va visible
   en la tarjeta, no escondida en la ficha. */
.producto__medida {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  font-size: var(--txt-xs);
  font-weight: 700;
  color: var(--marca-texto);
  background: var(--marca-fondo-suave);
  padding: 2px var(--e2);
  border-radius: var(--radio-xs);
  align-self: flex-start;
}

.producto__precio-bloque { margin-top: auto; padding-top: var(--e2); }

.producto__precio {
  font-size: var(--txt-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--texto);
}
.producto__precio-anterior {
  font-size: var(--txt-sm);
  color: var(--texto-tenue);
  text-decoration: line-through;
  margin-right: var(--e2);
}
.producto__escalon {
  font-size: var(--txt-xs);
  color: var(--exito-700);
  font-weight: 600;
  margin-top: 2px;
}

/* Precio oculto: el visitante sin cuenta aprobada no ve ningún precio
   (decisión 1). En su lugar va la invitación a registrarse. */
.producto__precio-oculto {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  font-size: var(--txt-xs);
  font-weight: 700;
  color: var(--marca-texto);
  text-decoration: none;
  padding: var(--e2) 0;
}

.producto__vendidos {
  font-size: var(--txt-xs);
  color: var(--texto-tenue);
}

.producto__stock-bajo {
  font-size: var(--txt-xs);
  font-weight: 700;
  color: var(--aviso-700);
}

/* --------------------------------------------------------------------------
   5. CATÁLOGO: FILTROS
   -------------------------------------------------------------------------- */

.catalogo { display: grid; gap: var(--e5); }

@media (min-width: 1024px) {
  .catalogo { grid-template-columns: 260px 1fr; align-items: start; gap: var(--e8); }
}

/* En móvil los filtros viven en un panel deslizante; en escritorio, en columna. */
.filtros {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--superficie);
  transform: translateX(-100%);
  transition: transform var(--transicion-lenta);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.filtros.abierto { transform: translateX(0); }

@media (min-width: 1024px) {
  .filtros {
    position: sticky;
    top: calc(var(--alto-barra) + var(--e4));
    inset: auto;
    transform: none;
    background: transparent;
    max-height: calc(100dvh - var(--alto-barra) - var(--e8));
    overflow-y: auto;
  }
}

.filtros__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--e4);
  border-bottom: 1px solid var(--borde);
  flex-shrink: 0;
}
@media (min-width: 1024px) { .filtros__encabezado { display: none; } }

.filtros__cuerpo { flex: 1; overflow-y: auto; padding: var(--e4); }
@media (min-width: 1024px) { .filtros__cuerpo { padding: 0; } }

.filtros__pie {
  padding: var(--e4);
  border-top: 1px solid var(--borde);
  display: flex;
  gap: var(--e3);
  flex-shrink: 0;
}
@media (min-width: 1024px) { .filtros__pie { display: none; } }

.filtro-grupo {
  border-bottom: 1px solid var(--borde);
  padding-bottom: var(--e4);
  margin-bottom: var(--e4);
}
.filtro-grupo:last-child { border-bottom: 0; }

.filtro-grupo__titulo {
  font-size: var(--txt-sm);
  font-weight: 700;
  margin-bottom: var(--e3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--texto);
  text-align: left;
}

.filtro-opcion {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) 0;
  min-height: 38px;
  font-size: var(--txt-sm);
  cursor: pointer;
  color: var(--texto-suave);
  text-decoration: none;
}
.filtro-opcion:hover { color: var(--texto); }
.filtro-opcion input { width: 18px; height: 18px; accent-color: var(--marca-600); }
.filtro-opcion.activo { color: var(--marca-texto); font-weight: 600; }

/* La cantidad de resultados por opción (RF-PRO-02): sin esto el usuario
   filtra a ciegas y llega a listados vacíos. */
.filtro-opcion__cantidad {
  margin-left: auto;
  font-size: var(--txt-xs);
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
}

.filtro-color {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
}
.filtro-color__muestra {
  width: 18px; height: 18px;
  border-radius: var(--radio-full);
  border: 1px solid var(--borde-fuerte);
  flex-shrink: 0;
}

/* Barra de herramientas del listado. */
.catalogo__barra {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e4);
  flex-wrap: wrap;
}

.chips-activos { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e4); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e1) var(--e3);
  background: var(--marca-fondo-suave);
  color: var(--marca-texto);
  border: 1px solid var(--marca-200);
  border-radius: var(--radio-full);
  font-size: var(--txt-xs);
  font-weight: 600;
  text-decoration: none;
}
.chip__quitar { font-size: 14px; line-height: 1; opacity: .7; }
.chip:hover .chip__quitar { opacity: 1; }

/* --------------------------------------------------------------------------
   6. FICHA DE PRODUCTO
   -------------------------------------------------------------------------- */

.ficha { display: grid; gap: var(--e6); margin-block: var(--e5); }

@media (min-width: 900px) {
  .ficha { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--e10); align-items: start; }
}

.galeria { display: flex; flex-direction: column; gap: var(--e3); }

.galeria__principal {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--fondo-alterno);
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--borde);
}
.galeria__principal img { width: 100%; height: 100%; object-fit: contain; }

.galeria__miniaturas {
  display: flex;
  gap: var(--e2);
  overflow-x: auto;
  padding-bottom: var(--e1);
  scrollbar-width: thin;
}

.miniatura {
  flex: 0 0 auto;
  width: 66px; height: 66px;
  border-radius: var(--radio-xs);
  overflow: hidden;
  border: 2px solid var(--borde);
  background: var(--fondo-alterno);
  cursor: pointer;
  padding: 0;
  position: relative;
}
.miniatura.activa { border-color: var(--marca-500); }
.miniatura img { width: 100%; height: 100%; object-fit: cover; }

/* La foto de escala tiene lugar propio y se identifica: en un catálogo donde
   todo se decide por tamaño, es la que más vende (criterio 4.2). */
.miniatura--escala::after {
  content: "escala";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ficha__info { display: flex; flex-direction: column; gap: var(--e4); }

.ficha__titulo {
  font-size: var(--txt-2xl);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.ficha__sku {
  font-family: var(--fuente-mono);
  font-size: var(--txt-xs);
  color: var(--texto-tenue);
}

.ficha__precio-bloque {
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e5);
}

.ficha__precio {
  font-size: var(--txt-3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.ficha__precio-iva { font-size: var(--txt-xs); color: var(--texto-tenue); }

.ficha__cuotas { font-size: var(--txt-sm); color: var(--exito-700); font-weight: 600; }

/* Tabla de escalones por cantidad (RF-PRE-02). El escalón visible empuja a
   subir el ticket: es una herramienta de venta, no sólo un dato. */
.escalones { margin-top: var(--e4); }
.escalones__titulo {
  font-size: var(--txt-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-suave);
  margin-bottom: var(--e2);
}
.escalon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e2) var(--e3);
  border-radius: var(--radio-xs);
  font-size: var(--txt-sm);
  border: 1px solid transparent;
}
.escalon:nth-child(odd) { background: var(--fondo-alterno); }
.escalon.es-actual {
  background: var(--exito-100);
  border-color: var(--exito-500);
  font-weight: 700;
  color: var(--exito-700);
}
.escalon__cantidad { color: var(--texto-suave); }
.escalon.es-actual .escalon__cantidad { color: inherit; }
.escalon__precio { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Selector de variante. */
.variantes { display: flex; flex-direction: column; gap: var(--e3); }
.variantes__titulo { font-size: var(--txt-sm); font-weight: 700; }
.variantes__opciones { display: flex; flex-wrap: wrap; gap: var(--e2); }

.variante-opcion {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--toque-min);
  padding: var(--e2) var(--e4);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  cursor: pointer;
  font-size: var(--txt-sm);
  font-weight: 600;
  transition: border-color var(--transicion), background var(--transicion);
}
.variante-opcion:hover { border-color: var(--marca-400); }
.variante-opcion.activa {
  border-color: var(--marca-600);
  background: var(--marca-fondo-suave);
  color: var(--marca-texto);
}
.variante-opcion.agotada {
  opacity: .45;
  cursor: not-allowed;
  text-decoration: line-through;
}
.variante-opcion__color {
  width: 16px; height: 16px;
  border-radius: var(--radio-full);
  border: 1px solid var(--borde-fuerte);
}

/* Cantidad. */
.cantidad {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  overflow: hidden;
  background: var(--superficie);
}
.cantidad__boton {
  width: var(--toque-min);
  height: var(--toque-min);
  border: 0;
  background: transparent;
  font-size: var(--txt-lg);
  font-weight: 700;
  cursor: pointer;
  color: var(--texto);
  display: flex; align-items: center; justify-content: center;
}
.cantidad__boton:hover:not(:disabled) { background: var(--superficie-hover); }
.cantidad__boton:disabled { opacity: .35; cursor: not-allowed; }
.cantidad__entrada {
  width: 56px;
  height: var(--toque-min);
  border: 0;
  border-inline: 1px solid var(--borde);
  text-align: center;
  font-size: var(--txt-md);
  font-weight: 700;
  background: transparent;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.cantidad__entrada::-webkit-outer-spin-button,
.cantidad__entrada::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Cotizador de envío en la ficha (RF-CAR-05). El costo sorpresa en el último
   paso es la principal causa de abandono. */
.cotizador {
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-sm);
  padding: var(--e4);
  background: var(--superficie);
}
.cotizador__titulo {
  font-size: var(--txt-sm);
  font-weight: 700;
  margin-bottom: var(--e3);
  display: flex;
  align-items: center;
  gap: var(--e2);
}
.cotizador__form { display: flex; gap: var(--e2); }
.cotizador__form .entrada { flex: 1; min-width: 0; }
.cotizador__resultado { margin-top: var(--e3); font-size: var(--txt-sm); }

/* Confianza junto al botón de compra (RF-CNF-03). */
.confianza { display: flex; flex-direction: column; gap: var(--e3); }
.confianza__item {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}
.confianza__icono {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radio-full);
  background: var(--marca-fondo-suave);
  color: var(--marca-texto);
}

/* Ficha técnica. */
.especificaciones { width: 100%; font-size: var(--txt-sm); }
.especificaciones tr { border-bottom: 1px solid var(--borde); }
.especificaciones tr:last-child { border-bottom: 0; }
.especificaciones th {
  text-align: left;
  padding: var(--e3) var(--e4) var(--e3) 0;
  color: var(--texto-suave);
  font-weight: 600;
  width: 42%;
}
.especificaciones td { padding: var(--e3) 0; font-weight: 600; }

/* Preguntas públicas (RF-CNF-02). */
.pregunta {
  border-bottom: 1px solid var(--borde);
  padding: var(--e4) 0;
}
.pregunta:last-child { border-bottom: 0; }
.pregunta__texto { font-weight: 600; margin-bottom: var(--e2); }
.pregunta__respuesta {
  display: flex;
  gap: var(--e3);
  padding-left: var(--e4);
  border-left: 3px solid var(--marca-300);
  color: var(--texto-suave);
  font-size: var(--txt-sm);
}
.pregunta__fecha { font-size: var(--txt-xs); color: var(--texto-tenue); }

/* Barra de compra fija en móvil: el botón principal no se pierde al hacer
   scroll por la descripción. */
.barra-compra {
  position: fixed;
  bottom: var(--alto-barra-inferior);
  left: 0; right: 0;
  z-index: calc(var(--z-barra) - 1);
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  padding: var(--e3) var(--e4);
  display: flex;
  align-items: center;
  gap: var(--e3);
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}
@media (min-width: 900px) { .barra-compra { display: none; } }

/* --------------------------------------------------------------------------
   7. CARRITO Y CHECKOUT
   -------------------------------------------------------------------------- */

.carrito { display: grid; gap: var(--e6); margin-block: var(--e5); }

@media (min-width: 1024px) {
  .carrito { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: var(--e8); }
}

.linea-carrito {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: var(--e3);
  padding: var(--e4) 0;
  border-bottom: 1px solid var(--borde);
}
.linea-carrito:last-child { border-bottom: 0; }

.linea-carrito__figura {
  width: 76px; height: 76px;
  border-radius: var(--radio-sm);
  overflow: hidden;
  background: var(--fondo-alterno);
}
.linea-carrito__figura img { width: 100%; height: 100%; object-fit: cover; }

.linea-carrito__cuerpo { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.linea-carrito__nombre { font-weight: 600; font-size: var(--txt-sm); line-height: 1.35; }
.linea-carrito__variante { font-size: var(--txt-xs); color: var(--texto-tenue); }
.linea-carrito__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.linea-carrito__precio { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Aviso de escalón aplicado (RF-CAR-02): si el precio bajó por cantidad, hay
   que decirlo explícitamente. */
.linea-carrito__escalon {
  font-size: var(--txt-xs);
  color: var(--exito-700);
  font-weight: 600;
}

.resumen {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e5);
  position: sticky;
  top: calc(var(--alto-barra) + var(--e4));
}

.resumen__linea {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e2) 0;
  font-size: var(--txt-sm);
}
.resumen__linea--total {
  border-top: 1px solid var(--borde);
  margin-top: var(--e3);
  padding-top: var(--e3);
  font-size: var(--txt-lg);
  font-weight: 800;
}
.resumen__valor { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Barra de progreso hacia el mínimo de compra o el envío gratis.
   RF-CAR-04: se informa el faltante exacto, no un mensaje genérico. */
.progreso-minimo {
  background: var(--aviso-100);
  border: 1px solid var(--aviso-500);
  border-radius: var(--radio-sm);
  padding: var(--e3) var(--e4);
  font-size: var(--txt-sm);
  color: var(--aviso-700);
  margin-bottom: var(--e4);
}
.progreso-minimo.cumplido {
  background: var(--exito-100);
  border-color: var(--exito-500);
  color: var(--exito-700);
}
.progreso-barra {
  height: 6px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  border-radius: var(--radio-full);
  overflow: hidden;
  margin-top: var(--e2);
}
.progreso-barra__relleno {
  height: 100%;
  background: currentColor;
  border-radius: var(--radio-full);
  transition: width var(--transicion-lenta);
}

/* Pasos del checkout (RF-CHK-01): un solo camino, en pasos visibles. */
.pasos {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e6);
  overflow-x: auto;
  padding-bottom: var(--e2);
  scrollbar-width: none;
}
.pasos::-webkit-scrollbar { display: none; }

.paso {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--txt-xs);
  font-weight: 700;
  color: var(--texto-tenue);
  white-space: nowrap;
}
.paso__numero {
  width: 26px; height: 26px;
  border-radius: var(--radio-full);
  background: var(--fondo-alterno);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--txt-xs);
  flex-shrink: 0;
}
.paso.activo { color: var(--marca-texto); }
.paso.activo .paso__numero { background: var(--marca-600); color: #fff; }
.paso.completo { color: var(--exito-700); }
.paso.completo .paso__numero { background: var(--exito-500); color: #fff; }
.paso__separador { width: 20px; height: 1px; background: var(--borde-fuerte); flex-shrink: 0; }

/* Opciones seleccionables grandes (entrega, medio de pago). */
.opcion-tarjeta {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e4);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
  margin-bottom: var(--e3);
}
.opcion-tarjeta:hover { border-color: var(--marca-400); }
.opcion-tarjeta:has(input:checked) {
  border-color: var(--marca-600);
  background: var(--marca-fondo-suave);
}
.opcion-tarjeta input { margin-top: 3px; width: 20px; height: 20px; accent-color: var(--marca-600); flex-shrink: 0; }
.opcion-tarjeta__titulo { font-weight: 700; font-size: var(--txt-sm); }
.opcion-tarjeta__detalle { font-size: var(--txt-xs); color: var(--texto-suave); margin-top: 2px; }
.opcion-tarjeta__precio { margin-left: auto; font-weight: 700; white-space: nowrap; }

/* --------------------------------------------------------------------------
   8. LÍNEA DE TIEMPO DEL PEDIDO (RF-PED-02)
   Evita la consulta "¿en qué anda mi pedido?", que es la que más satura la
   atención por WhatsApp.
   -------------------------------------------------------------------------- */

.linea-tiempo { display: flex; flex-direction: column; gap: 0; }

.hito {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--e3);
  position: relative;
  padding-bottom: var(--e5);
}
.hito:last-child { padding-bottom: 0; }

.hito__marca {
  width: 26px; height: 26px;
  border-radius: var(--radio-full);
  background: var(--fondo-alterno);
  border: 2px solid var(--borde-fuerte);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  z-index: 1;
  flex-shrink: 0;
}
.hito.completo .hito__marca { background: var(--exito-500); border-color: var(--exito-500); color: #fff; }
.hito.actual .hito__marca {
  background: var(--marca-600);
  border-color: var(--marca-600);
  color: #fff;
  box-shadow: 0 0 0 4px var(--marca-fondo-suave);
}

/* La línea que une los hitos. */
.hito:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 26px;
  bottom: 0;
  width: 2px;
  background: var(--borde-fuerte);
}
.hito.completo:not(:last-child)::before { background: var(--exito-500); }

.hito__titulo { font-weight: 700; font-size: var(--txt-sm); }
.hito__fecha { font-size: var(--txt-xs); color: var(--texto-tenue); }
.hito__detalle { font-size: var(--txt-sm); color: var(--texto-suave); margin-top: var(--e1); }

/* --------------------------------------------------------------------------
   9. WHATSAPP FLOTANTE (5.6)
   -------------------------------------------------------------------------- */

.boton-whatsapp {
  position: fixed;
  right: var(--e4);
  bottom: calc(var(--alto-barra-inferior) + var(--e4));
  z-index: var(--z-panel);
  width: 54px; height: 54px;
  border-radius: var(--radio-full);
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-lg);
  text-decoration: none;
  transition: transform var(--transicion);
}
.boton-whatsapp:hover { transform: scale(1.06); }

@media (min-width: 768px) {
  .boton-whatsapp { bottom: var(--e6); right: var(--e6); }
}

/* --------------------------------------------------------------------------
   10. PIE
   -------------------------------------------------------------------------- */

.pie {
  margin-top: auto;
  background: var(--fondo-alterno);
  border-top: 1px solid var(--borde);
  padding-block: var(--e10) var(--e6);
}

.pie__grilla {
  display: grid;
  gap: var(--e8);
  margin-bottom: var(--e8);
}
@media (min-width: 640px)  { .pie__grilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pie__grilla { grid-template-columns: 1.4fr repeat(3, 1fr); } }

.pie__titulo {
  font-size: var(--txt-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
  margin-bottom: var(--e3);
}
.pie__lista { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--e2); }
.pie__lista a {
  color: var(--texto-suave);
  text-decoration: none;
  font-size: var(--txt-sm);
  display: inline-block;
  padding: var(--e1) 0;
}
.pie__lista a:hover { color: var(--marca-texto); text-decoration: underline; }

.pie__legal {
  border-top: 1px solid var(--borde);
  padding-top: var(--e5);
  font-size: var(--txt-xs);
  color: var(--texto-tenue);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}
@media (min-width: 768px) {
  .pie__legal { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* Botones obligatorios de comercio electrónico (Res. 424/2020 — RF-DEV-01/02).
   Van visibles y no enterrados: su ausencia es sancionable. */
.botones-legales { display: flex; flex-wrap: wrap; gap: var(--e3); }

.boton-legal {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e4);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--txt-xs);
  font-weight: 700;
  text-decoration: none;
  min-height: 38px;
}
.boton-legal:hover { border-color: var(--marca-500); color: var(--marca-texto); }

/* Franja legal fija en el primer pliegue de la portada: la resolución exige
   que el botón de arrepentimiento esté accesible desde el inicio. */
.franja-legal-inicio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  justify-content: center;
  padding: var(--e3) 0;
  font-size: var(--txt-xs);
}