/* ==========================================================================
   ESTILOS PROPIOS DE CADA PÁGINA
   1. Inicio  2. Categoría  3. Producto  4. Carrito
   ========================================================================== */

/* =================================================================
   1. INICIO
   ================================================================= */

/* ---------- Carrusel principal (hero) ---------- */
.hero {
  padding-top: var(--esp-4);
}
.hero__carrusel {
  position: relative;
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: var(--color-texto);
  touch-action: pan-y;
}
.hero__pista {
  display: flex;
  transition: transform 520ms var(--ease-out);
}
.hero__slide {
  position: relative;
  flex: 0 0 100%;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  color: #fff;
}
.hero__imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Degradado para garantizar contraste del texto sobre la foto */
.hero__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(20, 8, 9, 0.88) 0%, rgba(20, 8, 9, 0.6) 45%, rgba(20, 8, 9, 0.05) 80%);
}
.hero__texto {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--esp-3);
  justify-items: start;
  padding: var(--esp-6) var(--esp-6) var(--esp-12);
  max-width: 560px;
}
.hero__etiqueta {
  background: var(--color-acento);
  color: var(--color-texto);
  font-size: var(--texto-xs);
  padding: var(--esp-1) var(--esp-3);
}
.hero__titulo {
  font-size: var(--texto-3xl);
  line-height: 1.05;
}
.hero__subtitulo {
  font-size: var(--texto-md);
  color: rgba(255, 255, 255, 0.92);
}
.hero__flecha {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: var(--radio-pildora);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-texto);
  display: none;
  place-items: center;
  box-shadow: var(--sombra-hover);
  transition: background-color var(--duracion-rapida) ease, transform var(--duracion-rapida) var(--ease-out);
}
.hero__flecha:hover { background: #fff; }
.hero__flecha:active { transform: translateY(-50%) scale(0.94); }
.hero__flecha--izq { left: var(--esp-4); }
.hero__flecha--der { right: var(--esp-4); }
.hero__controles {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: var(--esp-4);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--esp-2);
}
.hero__punto {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}
.hero__punto::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--radio-pildora);
  background: rgba(255, 255, 255, 0.55);
  transition: width var(--duracion-media) var(--ease-out), background-color var(--duracion-media) ease;
}
.hero__punto[aria-current="true"]::before {
  width: 28px;
  background: #fff;
}
.hero__pausa {
  width: 32px;
  height: 32px;
  border-radius: var(--radio-pildora);
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
}
.hero__pausa .icono { width: 14px; height: 14px; }
@media (min-width: 768px) {
  .hero__slide { min-height: 440px; align-items: center; }
  .hero__slide::before {
    background: linear-gradient(90deg, rgba(20, 8, 9, 0.88) 0%, rgba(20, 8, 9, 0.62) 40%, rgba(20, 8, 9, 0) 75%);
  }
  .hero__texto { padding: var(--esp-12) var(--esp-16); }
  .hero__titulo { font-size: var(--texto-4xl); }
  .hero__subtitulo { font-size: var(--texto-lg); }
}
@media (min-width: 1024px) {
  .hero__flecha { display: grid; }
}

/* ---------- Categorías destacadas ---------- */
.cat-destacadas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 104px;
  gap: var(--esp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--esp-2);
}
.cat-destacadas::-webkit-scrollbar { display: none; }
.cat-destacada {
  display: grid;
  justify-items: center;
  gap: var(--esp-2);
  text-align: center;
  font-size: var(--texto-sm);
  font-weight: var(--peso-bold);
  line-height: 1.25;
  scroll-snap-align: start;
}
.cat-destacada__circulo {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: var(--radio-pildora);
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--color-borde);
  transition: box-shadow var(--duracion-media) ease, transform var(--duracion-media) var(--ease-out);
}
.cat-destacada__circulo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cat-destacada:hover .cat-destacada__circulo {
  box-shadow: 0 0 0 3px var(--color-primario);
  transform: translateY(-3px);
}
.cat-destacada--oferta .cat-destacada__circulo { box-shadow: 0 0 0 2px var(--color-oferta); }
.cat-destacada--oferta { color: var(--color-oferta); }
@media (min-width: 1024px) {
  .cat-destacadas {
    grid-auto-flow: row;
    grid-template-columns: repeat(8, 1fr);
    overflow: visible;
  }
  .cat-destacada__circulo { width: 120px; height: 120px; }
}

/* ---------- Ofertas con contador ---------- */
.ofertas {
  background: linear-gradient(180deg, var(--color-primario-claro), #fff 70%);
}
.contador-regresivo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
}
.contador-regresivo__titulo {
  font-size: var(--texto-sm);
  font-weight: var(--peso-bold);
  color: var(--color-oferta);
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
}
.contador-regresivo__cajas {
  display: flex;
  gap: var(--esp-1);
}
.contador-regresivo__caja {
  display: grid;
  justify-items: center;
  min-width: 52px;
  padding: var(--esp-1) var(--esp-2);
  border-radius: var(--radio-sm);
  background: var(--color-oferta);
  color: #fff;
  line-height: 1.1;
}
.contador-regresivo__numero {
  font-size: var(--texto-xl);
  font-weight: var(--peso-black);
  font-variant-numeric: tabular-nums;
}
.contador-regresivo__unidad {
  font-size: 11px;
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Banners promocionales medianos ---------- */
.promos {
  display: grid;
  gap: var(--esp-4);
}
@media (min-width: 768px) {
  .promos { grid-template-columns: 1fr 1fr; gap: var(--esp-6); }
}
.promo {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 260px;
  border-radius: var(--radio-lg);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.promo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 600ms var(--ease-out);
}
.promo:hover img { transform: scale(1.04); }
.promo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(1, 60, 26, 0.92) 0%, rgba(1, 60, 26, 0.5) 55%, rgba(1, 60, 26, 0) 100%);
}
.promo--roja::before {
  background: linear-gradient(0deg, rgba(110, 7, 12, 0.92) 0%, rgba(110, 7, 12, 0.5) 55%, rgba(110, 7, 12, 0) 100%);
}
.promo__texto {
  display: grid;
  gap: var(--esp-2);
  justify-items: start;
  padding: var(--esp-6);
}
.promo__titulo { font-size: var(--texto-2xl); }
.promo__enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  font-weight: var(--peso-bold);
  border-bottom: 2px solid var(--color-acento);
  padding-bottom: 2px;
}
.promo__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ---------- Banner ventas institucionales ---------- */
.institucional {
  position: relative;
  display: grid;
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: var(--color-secundario);
  color: #fff;
}
.institucional__imagen {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.institucional__texto {
  display: grid;
  gap: var(--esp-4);
  padding: var(--esp-8) var(--esp-6);
  justify-items: start;
}
.institucional__titulo { font-size: var(--texto-2xl); }
.institucional__lista {
  display: grid;
  gap: var(--esp-2);
}
.institucional__lista li {
  display: flex;
  gap: var(--esp-2);
  align-items: center;
  font-weight: var(--peso-semi);
}
.institucional__lista .icono { color: var(--color-acento); }
@media (min-width: 768px) {
  .institucional { grid-template-columns: 1.1fr 1fr; }
  .institucional__imagen { height: 100%; min-height: 360px; order: 2; }
  .institucional__texto { padding: var(--esp-12); align-content: center; }
  .institucional__titulo { font-size: var(--texto-3xl); }
}

/* ---------- Compra por necesidad (bento) ---------- */
.bento {
  display: grid;
  gap: var(--esp-3);
  grid-template-columns: 1fr 1fr;
}
.bento__bloque {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 180px;
  border-radius: var(--radio-lg);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.bento__bloque img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 600ms var(--ease-out);
}
.bento__bloque:hover img { transform: scale(1.05); }
.bento__bloque::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(17, 22, 28, 0.85), rgba(17, 22, 28, 0.1) 70%);
}
.bento__texto {
  display: grid;
  gap: 2px;
  padding: var(--esp-4);
}
.bento__titulo { font-size: var(--texto-lg); }
.bento__detalle { font-size: var(--texto-sm); color: rgba(255, 255, 255, 0.9); }
.bento__bloque--grande { grid-column: 1 / -1; min-height: 240px; }
@media (min-width: 768px) {
  .bento {
    grid-template-columns: 1.3fr 1fr 1fr;
    grid-template-rows: 220px 220px;
    gap: var(--esp-4);
  }
  .bento__bloque--grande { grid-column: 1; grid-row: 1 / 3; }
  .bento__bloque--ancho { grid-column: 2 / 4; }
  .bento__titulo { font-size: var(--texto-xl); }
  .bento__texto { padding: var(--esp-6); }
}

/* ---------- Franja de beneficios en inicio ---------- */
.franja-beneficios {
  padding-block: var(--esp-8);
  border-block: 1px solid var(--color-borde);
}

/* ---------- Testimonios ---------- */
.testimonios {
  display: grid;
  gap: var(--esp-4);
}
@media (min-width: 768px) {
  .testimonios { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .testimonios { grid-template-columns: repeat(4, 1fr); }
}
.testimonio {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-6);
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-tarjeta);
}
.testimonio blockquote {
  flex: 1;
  color: var(--color-texto);
}
.testimonio__autor {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  font-size: var(--texto-sm);
}
.testimonio__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radio-pildora);
  background: var(--color-secundario-claro);
  color: var(--color-secundario);
  font-weight: var(--peso-black);
}
.testimonio__ciudad { display: block; color: var(--color-texto-suave); }

/* ---------- Boletín ---------- */
.boletin {
  display: grid;
  gap: var(--esp-6);
  padding: var(--esp-8) var(--esp-6);
  border-radius: var(--radio-lg);
  background: var(--color-primario);
  color: #fff;
}
.boletin__titulo { font-size: var(--texto-2xl); }
.boletin__texto { color: rgba(255, 255, 255, 0.92); margin-top: var(--esp-2); }
.boletin__form {
  display: grid;
  gap: var(--esp-3);
}
.boletin__fila {
  display: flex;
  gap: var(--esp-2);
  flex-wrap: wrap;
}
.boletin__fila .campo { flex: 1 1 220px; }
.boletin .campo__error { color: #fff; background: rgba(0, 0, 0, 0.25); padding: 2px var(--esp-2); border-radius: 4px; }
.boletin .casilla a { text-decoration: underline; }
.boletin .casilla input { accent-color: var(--color-acento); }
.boletin :focus-visible { outline-color: #fff; }
.boletin .mensaje-exito { background: #fff; }
@media (min-width: 1024px) {
  .boletin { grid-template-columns: 1fr 1.2fr; align-items: center; padding: var(--esp-12); }
  .boletin__titulo { font-size: var(--texto-3xl); }
}

/* ---------- Popup de bienvenida ---------- */
.bienvenida {
  display: grid;
  gap: var(--esp-4);
  text-align: center;
  justify-items: center;
}
.bienvenida__icono {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radio-pildora);
  background: var(--color-acento-claro);
  color: var(--color-primario);
}
.bienvenida__titulo {
  font-size: var(--texto-3xl);
}
.bienvenida__titulo span { color: var(--color-primario); }
.bienvenida form { width: 100%; text-align: left; }
.bienvenida__cupon {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border: 2px dashed var(--color-primario);
  border-radius: var(--radio-md);
  font-size: var(--texto-xl);
  font-weight: var(--peso-black);
  letter-spacing: 0.08em;
  color: var(--color-primario);
}
.bienvenida__no {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
  text-decoration: underline;
}

/* =================================================================
   2. CATEGORÍA
   ================================================================= */
.cat-banner {
  position: relative;
  display: grid;
  align-content: center;
  gap: var(--esp-2);
  min-height: 160px;
  padding: var(--esp-6);
  border-radius: var(--radio-lg);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  background: var(--color-secundario);
}
.cat-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.cat-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(1, 60, 26, 0.92), rgba(1, 60, 26, 0.55) 60%, rgba(1, 60, 26, 0.2));
}
.cat-banner--oferta::before {
  background: linear-gradient(90deg, rgba(110, 7, 12, 0.92), rgba(110, 7, 12, 0.55) 60%, rgba(110, 7, 12, 0.2));
}
.cat-banner__titulo { font-size: var(--texto-3xl); }
.cat-banner__texto { max-width: 52ch; color: rgba(255, 255, 255, 0.92); }

.listado {
  display: grid;
  gap: var(--esp-6);
  margin-top: var(--esp-6);
}
@media (min-width: 1024px) {
  .listado { grid-template-columns: 264px 1fr; gap: var(--esp-8); }
}

/* Barra de herramientas: resultados, ordenar, vista */
.herramientas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
}
.herramientas__resultados {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}
.herramientas__resultados strong { color: var(--color-texto); }
.herramientas__derecha {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
}
.herramientas__ordenar {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-bold);
}
.herramientas__ordenar .select { min-height: 40px; width: auto; padding-right: var(--esp-8); }
.vista-botones {
  display: none;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  overflow: hidden;
}
.vista-botones button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 38px;
  color: var(--color-texto-suave);
}
.vista-botones button[aria-pressed="true"] {
  background: var(--color-texto);
  color: #fff;
}
.boton-filtrar { display: inline-flex; }
@media (min-width: 768px) {
  .vista-botones { display: flex; }
}
@media (min-width: 1024px) {
  .boton-filtrar { display: none; }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-bottom: var(--esp-4);
}
.chips:empty { display: none; }
.chips__limpiar {
  font-size: var(--texto-sm);
  font-weight: var(--peso-bold);
  color: var(--color-primario);
  text-decoration: underline;
  padding-inline: var(--esp-2);
}

/* Filtros: en escritorio barra lateral, en celular dentro de un drawer */
.filtros__bloque {
  border-bottom: 1px solid var(--color-borde);
  padding-block: var(--esp-2) var(--esp-4);
}
.filtros__bloque:first-child { padding-top: 0; }
.filtros__titulo {
  font-size: var(--texto-md);
}
.filtros__lista {
  display: grid;
  gap: var(--esp-2);
}
.filtros__lista .casilla { justify-content: space-between; }
.filtros__lista .casilla span:first-of-type { flex: 1; }
.filtros__conteo { color: var(--color-texto-suave); font-size: var(--texto-xs); }
.filtros__precio {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--esp-2);
}
.filtros__precio .input { min-height: 40px; padding: var(--esp-1) var(--esp-2); }
.filtros__precio-ayuda { font-size: var(--texto-xs); color: var(--color-texto-suave); margin-top: var(--esp-2); }
.filtros__radio {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
  cursor: pointer;
}
.filtros__radio input { accent-color: var(--color-secundario); width: 18px; height: 18px; }
.filtros__lateral { display: none; }
.filtros__lateral .filtros__acciones { margin-top: var(--esp-4); }
@media (min-width: 1024px) {
  .filtros__lateral {
    display: block;
    position: sticky;
    top: 180px;
    align-self: start;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding-right: var(--esp-2);
  }
}
.cat-vacio {
  border: 1px dashed var(--color-borde-fuerte);
  border-radius: var(--radio-lg);
}
.cat-vacio__sugerencias {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-2);
}

/* =================================================================
   3. PRODUCTO
   ================================================================= */
.producto {
  display: grid;
  gap: var(--esp-8);
}
@media (min-width: 1024px) {
  .producto { grid-template-columns: 1.05fr 1fr; gap: var(--esp-12); align-items: start; }
}
.galeria {
  display: grid;
  gap: var(--esp-3);
}
@media (min-width: 1024px) {
  .galeria { position: sticky; top: 180px; }
}
.galeria__principal {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: #fff;
  cursor: zoom-in;
}
.galeria__principal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--duracion-media) var(--ease-out);
}
.galeria__principal.con-zoom img {
  transform: scale(2);
}
.galeria__principal .tarjeta__etiquetas { top: var(--esp-4); left: var(--esp-4); }
.galeria__ayuda {
  position: absolute;
  bottom: var(--esp-3);
  right: var(--esp-3);
  font-size: var(--texto-xs);
  background: rgba(255, 255, 255, 0.92);
  padding: 2px var(--esp-2);
  border-radius: var(--radio-pildora);
  pointer-events: none;
}
.galeria__miniaturas {
  display: flex;
  gap: var(--esp-2);
  overflow-x: auto;
}
.galeria__miniatura {
  flex: 0 0 76px;
  height: 76px;
  border: 2px solid var(--color-borde);
  border-radius: var(--radio-sm);
  overflow: hidden;
  background: #fff;
}
.galeria__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.galeria__miniatura[aria-current="true"] { border-color: var(--color-primario); }

.ficha {
  display: grid;
  gap: var(--esp-4);
  align-content: start;
}
.ficha__marca {
  font-size: var(--texto-sm);
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-secundario);
}
.ficha__nombre { font-size: var(--texto-2xl); }
@media (min-width: 768px) { .ficha__nombre { font-size: var(--texto-3xl); } }
.ficha__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  align-items: center;
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}
.ficha__meta .estrellas { font-size: var(--texto-sm); }
.ficha__meta .estrellas__fila svg { width: 18px; height: 18px; }
.ficha__precio .precio__actual { font-size: var(--texto-3xl); }
.ficha__precio .precio__anterior { font-size: var(--texto-md); }
.ficha__ahorro {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-bold);
  color: var(--color-oferta);
  margin-top: var(--esp-1);
}
.ficha__disponible {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-weight: var(--peso-bold);
  font-size: var(--texto-sm);
  color: var(--color-exito);
}
.ficha__disponible--pocas { color: #a35d00; }
.ficha__disponible--agotado { color: var(--color-oferta); }
.ficha__disponible::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.ficha__compra {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-3);
}
.ficha__compra .boton--verde { grid-column: 1 / -1; }
.ficha__secundarias {
  display: flex;
  gap: var(--esp-2);
  flex-wrap: wrap;
}
.ficha__secundarias .boton[aria-pressed="true"] { color: var(--color-primario); border-color: var(--color-primario); }
.ficha__secundarias .boton[aria-pressed="true"] svg { fill: currentColor; }
.confianza {
  display: grid;
  gap: var(--esp-3);
  padding: var(--esp-4);
  border-radius: var(--radio-md);
  background: var(--color-fondo-alterno);
  font-size: var(--texto-sm);
}
.confianza li {
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
}
.confianza .icono { color: var(--color-secundario); margin-top: 1px; }
.confianza strong { display: block; }
.confianza button { color: var(--color-primario); font-weight: var(--peso-bold); text-decoration: underline; }

/* Pestañas de información */
.info-producto { margin-top: var(--esp-12); }
.info-producto__panel {
  padding-block: var(--esp-6);
  max-width: 860px;
}
.info-producto__panel p + p { margin-top: var(--esp-3); }
.lista-check { display: grid; gap: var(--esp-2); }
.lista-check li { display: flex; gap: var(--esp-2); align-items: flex-start; }
.lista-check .icono { color: var(--color-secundario); margin-top: 3px; }
.tabla-specs {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-sm);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  overflow: hidden;
}
.tabla-specs th,
.tabla-specs td {
  text-align: left;
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--color-borde);
  vertical-align: top;
}
.tabla-specs th { width: 40%; background: var(--color-fondo-alterno); font-weight: var(--peso-bold); }
.tabla-specs tr:last-child th,
.tabla-specs tr:last-child td { border-bottom: 0; }

.resenas { display: grid; gap: var(--esp-8); }
@media (min-width: 768px) { .resenas { grid-template-columns: 260px 1fr; } }
.resenas__resumen { display: grid; gap: var(--esp-3); align-content: start; }
.resenas__nota { font-size: var(--texto-4xl); font-weight: var(--peso-black); line-height: 1; }
.resenas__barras { display: grid; gap: var(--esp-2); font-size: var(--texto-sm); }
.resenas__barra {
  display: grid;
  grid-template-columns: 52px 1fr 36px;
  align-items: center;
  gap: var(--esp-2);
}
.resenas__pista { height: 8px; border-radius: var(--radio-pildora); background: var(--color-borde); overflow: hidden; }
.resenas__relleno { height: 100%; width: 100%; background: #f2a900; transform-origin: left; }
.resenas__lista { display: grid; gap: var(--esp-4); }
.resena {
  padding: var(--esp-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  display: grid;
  gap: var(--esp-2);
}
.resena__cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--esp-2); font-size: var(--texto-sm); }
.resena__fecha { color: var(--color-texto-suave); }
.resena__titulo { font-size: var(--texto-md); }
.resena__verificada { font-size: var(--texto-xs); color: var(--color-exito); font-weight: var(--peso-bold); display: inline-flex; gap: 4px; align-items: center; }

.no-encontrado { max-width: 560px; margin-inline: auto; }

/* Barra fija inferior en celular */
.barra-compra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-flotante) + 5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--margen-lateral);
  background: #fff;
  border-top: 1px solid var(--color-borde);
  box-shadow: 0 -6px 20px rgba(17, 22, 28, 0.08);
  transform: translateY(110%);
  transition: transform var(--duracion-lenta) var(--ease-out);
}
.barra-compra.esta-visible { transform: none; }
.barra-compra__precio { display: grid; line-height: 1.15; }
.barra-compra__precio .precio__actual { font-size: var(--texto-lg); }
.barra-compra__nombre { font-size: var(--texto-xs); color: var(--color-texto-suave); max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-compra .boton { flex-shrink: 0; }
.pagina-producto .whatsapp-flotante,
.pagina-producto .volver-arriba { bottom: 92px; }
.pagina-producto .volver-arriba { bottom: 160px; }
@media (min-width: 1024px) {
  .barra-compra { display: none; }
  .pagina-producto .whatsapp-flotante { bottom: var(--esp-4); }
  .pagina-producto .volver-arriba { bottom: 84px; }
}

/* =================================================================
   4. CARRITO
   ================================================================= */
.carrito-titulo { font-size: var(--texto-3xl); margin-bottom: var(--esp-6); }
.carrito-titulo span { font-size: var(--texto-lg); color: var(--color-texto-suave); font-weight: var(--peso-semi); }
.carrito-pagina {
  display: grid;
  gap: var(--esp-6);
}
@media (min-width: 1024px) {
  .carrito-pagina { grid-template-columns: 1fr 380px; gap: var(--esp-8); align-items: start; }
}
.carrito-pagina .progreso-envio {
  margin-bottom: var(--esp-4);
}
.tabla-carrito {
  width: 100%;
  border-collapse: collapse;
}
.tabla-carrito thead { display: none; }
.tabla-carrito tr {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  grid-template-areas:
    "img info eliminar"
    "img cant total";
  gap: var(--esp-2) var(--esp-3);
  padding-block: var(--esp-4);
  border-bottom: 1px solid var(--color-borde);
}
.tabla-carrito td { padding: 0; }
.tabla-carrito__img { grid-area: img; }
.tabla-carrito__img img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  background: #fff;
}
.tabla-carrito__info { grid-area: info; display: grid; gap: 2px; align-content: start; }
.tabla-carrito__info a { font-weight: var(--peso-bold); line-height: 1.3; }
.tabla-carrito__info a:hover { color: var(--color-primario); }
.tabla-carrito__marca { font-size: var(--texto-xs); color: var(--color-texto-suave); text-transform: uppercase; font-weight: var(--peso-bold); letter-spacing: 0.05em; }
.tabla-carrito__unitario { font-size: var(--texto-sm); color: var(--color-texto-suave); }
.tabla-carrito__cant { grid-area: cant; }
.tabla-carrito__total { grid-area: total; font-weight: var(--peso-black); align-self: center; text-align: right; }
.tabla-carrito__eliminar { grid-area: eliminar; justify-self: end; }
.tabla-carrito__eliminar .boton-icono { color: var(--color-texto-suave); }
.tabla-carrito__eliminar .boton-icono:hover { color: var(--color-oferta); background: var(--color-primario-claro); }
@media (min-width: 768px) {
  .tabla-carrito thead { display: table-header-group; }
  .tabla-carrito tr { display: table-row; }
  .tabla-carrito th {
    text-align: left;
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-texto-suave);
    padding: 0 var(--esp-2) var(--esp-3);
    border-bottom: 1px solid var(--color-borde);
  }
  .tabla-carrito td { padding: var(--esp-4) var(--esp-2); border-bottom: 1px solid var(--color-borde); vertical-align: middle; }
  .tabla-carrito__img { width: 104px; }
  .tabla-carrito__info .tabla-carrito__unitario { display: none; }
}
.tabla-carrito__col-unitario { display: none; }
@media (min-width: 768px) {
  .tabla-carrito__col-unitario { display: table-cell; white-space: nowrap; }
}
.carrito-acciones {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-top: var(--esp-4);
}
.resumen {
  display: grid;
  gap: var(--esp-4);
  padding: var(--esp-6);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  background: #fff;
  box-shadow: var(--sombra-tarjeta);
}
@media (min-width: 1024px) {
  .resumen { position: sticky; top: 180px; }
}
.resumen__titulo { font-size: var(--texto-xl); }
.resumen__filas { display: grid; gap: var(--esp-2); }
.resumen__fila { display: flex; justify-content: space-between; gap: var(--esp-2); }
.resumen__fila--descuento { color: var(--color-exito); font-weight: var(--peso-bold); }
.resumen__fila--total {
  font-size: var(--texto-xl);
  font-weight: var(--peso-black);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--color-borde);
}
.resumen__nota { font-size: var(--texto-xs); color: var(--color-texto-suave); }
.cupon { display: grid; gap: var(--esp-2); }
.cupon__fila { display: flex; gap: var(--esp-2); }
.cupon__fila .input { text-transform: uppercase; }
.cupon__aplicado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  background: var(--color-secundario-claro);
  color: var(--color-secundario-oscuro);
  border-radius: var(--radio-sm);
  font-size: var(--texto-sm);
  font-weight: var(--peso-bold);
}
.cupon__aplicado button { text-decoration: underline; }
.resumen__pagos { display: flex; flex-wrap: wrap; gap: var(--esp-1); }
.resumen__pagos .pago { font-size: 10px; }

/* Pestañas "Modo de uso" y "Preguntas frecuentes" de la ficha */
.info-producto__panel p + p { margin-top: var(--esp-3); }
.info-producto__subtitulo {
  font-size: var(--texto-lg);
  margin: 0 0 var(--esp-3);
}
.info-producto__subtitulo:not(:first-child) { margin-top: var(--esp-6); }
.lista-pasos {
  display: grid;
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.lista-pasos li {
  position: relative;
  padding-left: 40px;
  min-height: 28px;
  line-height: 1.5;
  counter-increment: paso;
}
.lista-pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: -1px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primario-claro);
  color: var(--color-primario-oscuro);
  font-size: var(--texto-sm);
  font-weight: var(--peso-black);
}
.preguntas {
  display: grid;
  gap: var(--esp-3);
  margin: 0;
}
.pregunta {
  padding: var(--esp-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  background: #fff;
}
.pregunta dt {
  font-weight: var(--peso-bold);
  margin-bottom: var(--esp-1);
}
.pregunta dd {
  margin: 0;
  color: var(--color-texto-suave);
  line-height: 1.55;
}
.preguntas__mas {
  margin-top: var(--esp-4);
  font-size: var(--texto-sm);
}
.preguntas__mas a { color: var(--color-primario); font-weight: var(--peso-bold); text-decoration: underline; }