@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --negro: #12232c;
  --blanco: #ffffff;
  --gris-fondo: #eaf5fb;
  --gris-borde: #cfe6f0;
  --gris: #5c7a89;
  --gris-oscuro: #1c3d4f;
  --exito: #2e7d32;
  --peligro: #d1382b;
  --dorado: #1f8fd1;
  --dorado-oscuro: #11689e;
  --verde: #0ea5b7;
  --verde-oscuro: #0b7f8c;
  --azul: #29a8e0;
  --radio: 4px;
  --logo-alto: 48px;
}

* { box-sizing: border-box; }

/* Safari en iOS pinta los <button> sin "color" explicito con el azul de
   sistema en vez de heredar el color del texto de la pagina. Esta regla
   evita que ese bug aparezca en cualquier boton del sitio. */
button { color: inherit; font-family: inherit; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Inter', Arial, sans-serif;
  background: var(--blanco);
  color: var(--negro);
  overflow-anchor: none;
}
/* Footer siempre pegado abajo, aunque la pagina tenga poco contenido (el
   margin-top:auto real esta en la regla principal de .site-footer, mas abajo). */
body { display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; }

img { max-width: 100%; display: block; }

a { color: inherit; }

.contenedor {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Logo --- */
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.logo img { height: var(--logo-alto); width: auto; }
.logo.logo-grande { height: 64px; }
.logo.logo-grande img,
img.logo-grande { height: 64px; width: auto; }

/* el logo es a color (no negro sobre transparente): en fondos oscuros se apoya
   sobre una placa blanca redondeada para que se siga leyendo bien */
.site-footer .logo,
.sidebar .logo-mini {
  background: var(--blanco);
  border-radius: 10px;
  padding: 6px 12px;
}

/* --- Header --- */
/* --- Barra de anuncios (rotativa, arriba de todo) --- */
.barra-anuncio {
  display: none;
  background: var(--verde);
  color: var(--blanco);
  text-align: center;
  padding: 10px 24px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.barra-anuncio.visible { display: block; }
.barra-anuncio-texto { display: inline-block; transition: opacity 0.3s ease; }
.barra-anuncio-texto.cambiando { opacity: 0; }

/* --- Temporizador de liquidacion ---
   Ya no es una barra fija arriba de la pagina: se inserta en 3 lugares distintos
   (carrito, resumen del checkout, encima del titulo del producto), cada uno con su propia
   variante de estilo pero usando los mismos colores de marca (negro/dorado) en vez de rojo. */
.promo-timer-inline { display: none; }
.promo-timer-inline.visible { display: flex; }
.promo-timer-inline-cuenta { display: flex; align-items: baseline; gap: 4px; }

/* Variante "caja": carrito y resumen del checkout */
.promo-timer-caja {
  background: var(--negro);
  color: var(--dorado);
  border-radius: var(--radio);
  padding: 10px 14px;
  margin-bottom: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  text-align: center;
}
.promo-timer-caja .promo-timer-inline-titulo { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.3px; text-transform: uppercase; }
.promo-timer-caja .promo-timer-inline-cuenta span {
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 3px 6px;
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: 0.85rem;
}
.promo-timer-caja .promo-timer-inline-cuenta small { font-size: 0.56rem; text-transform: uppercase; opacity: 0.75; margin-left: 1px; }

/* Variante "sutil": una linea simple encima del titulo del producto, sin caja de fondo */
.promo-timer-sutil {
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--dorado-oscuro);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.promo-timer-sutil .promo-timer-inline-icono { display: none; }
.promo-timer-sutil .promo-timer-inline-cuenta { gap: 4px; }
.promo-timer-sutil .promo-timer-inline-cuenta span {
  background: var(--negro);
  color: var(--dorado);
  border-radius: 4px;
  padding: 3px 6px;
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: 0.78rem;
}
.promo-timer-sutil .promo-timer-inline-cuenta small { font-size: 0.55rem; text-transform: uppercase; opacity: 0.8; margin-left: 1px; }

.site-header {
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-borde);
  position: sticky;
  top: 0;
  z-index: 20;
  /* Evita que el navegador reajuste el scroll para "compensar" el cambio de
     tamaño del header (scroll anchoring): eso es lo que causaba el temblor. */
  overflow-anchor: none;
}
.site-header .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  transition: padding 0.25s ease;
}
.logo img { transition: height 0.25s ease; }
.site-header.compacto .contenedor { padding-top: 8px; padding-bottom: 8px; }
.site-header.compacto .logo img { height: calc(var(--logo-alto) * 0.62); }
.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.nav-links a:hover { color: var(--dorado-oscuro); opacity: 1; }

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--negro); transition: transform 0.2s ease, opacity 0.2s ease; }
.menu-toggle.activo span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.activo span:nth-child(2) { opacity: 0; }
.menu-toggle.activo span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.carrito-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  text-decoration: none;
}
.carrito-badge {
  background: var(--negro);
  color: var(--dorado);
  border-radius: 999px;
  font-size: 0.7rem;
  padding: 2px 7px;
  min-width: 18px;
  text-align: center;
  font-weight: 800;
}

/* Icono de carrito propio para movil, siempre visible (no queda escondido dentro
   del menu hamburguesa). En escritorio se usa el link "Carrito" normal del menu. */
.carrito-movil {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--negro);
  text-decoration: none;
}
.carrito-movil .carrito-badge {
  position: absolute;
  top: -2px;
  right: -6px;
}
.carrito-movil.rebote, .carrito-link.rebote { animation: rebote-carrito 0.35s ease; }
@keyframes rebote-carrito {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.25); }
}

/* --- Buscador --- */
.buscador-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: var(--negro);
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  margin-right: 20px;
}

.buscador-panel {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 16, 0.55);
  z-index: 50;
  padding: 90px 20px 20px;
  overflow-y: auto;
}
.buscador-panel.abierto { display: block; }
.buscador-modal {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: var(--blanco);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  padding: 18px;
}
.buscador-caja {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--negro);
  border-radius: var(--radio);
  padding: 10px 14px;
  background: var(--blanco);
}
.buscador-caja svg { flex-shrink: 0; color: var(--gris); }
.buscador-caja input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  font-family: inherit;
  background: none;
  color: var(--negro);
}
#buscador-cerrar {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--gris);
  padding: 0 2px;
}

.buscador-resultados { margin-top: 16px; max-height: 60vh; overflow-y: auto; }
.buscador-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 6px;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radio);
}
.buscador-item:hover { background: var(--gris-fondo); }
.buscador-item img { width: 50px; height: 50px; object-fit: cover; border-radius: var(--radio); flex-shrink: 0; }
.buscador-item-info { flex: 1; min-width: 0; }
.buscador-item-info strong { display: block; font-size: 0.92rem; }
.buscador-item-info span { display: block; font-size: 0.82rem; color: var(--gris); margin-top: 2px; }
.buscador-item-precio { font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.buscador-mensaje { padding: 16px 6px; color: var(--gris); text-align: center; }

/* Circulo con la foto del producto que "vuela" hacia el carrito al agregar. */
.vuelo-carrito {
  position: fixed;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  z-index: 999;
  pointer-events: none;
  border: 2px solid var(--dorado);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transform: translate(0, 0) scale(1);
  opacity: 1;
  transition: transform 0.7s cubic-bezier(0.35, 0, 0.65, 1), opacity 0.7s ease;
}

/* --- Botones --- */
.btn {
  display: inline-block;
  border: 1.5px solid var(--negro);
  border-radius: 999px;
  padding: 15px 32px;
  font-family: 'Poppins', Inter, sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform 0.1s ease, opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
  background: var(--negro);
  color: var(--blanco);
}
.btn:active { transform: scale(0.97); }
.btn-primario { background: var(--dorado); color: var(--blanco); border-color: var(--dorado); }
.btn-primario:hover { background: var(--dorado-oscuro); border-color: var(--dorado-oscuro); }
.btn-outline { background: transparent; color: var(--negro); border-color: var(--negro); }
.btn-outline:hover { background: var(--negro); color: var(--dorado); }
.btn-invertido { background: var(--dorado); color: var(--blanco); border-color: var(--dorado); }
.btn-invertido:hover { background: var(--dorado-oscuro); border-color: var(--dorado-oscuro); }
.btn-bloque { display: block; width: 100%; }
.btn[disabled], .btn.disabled { opacity: 0.35; cursor: not-allowed; }
.btn-peligro { background: var(--peligro); color: var(--blanco); border-color: var(--peligro); }
.btn-pequeno { padding: 9px 18px; font-size: 0.72rem; }

/* --- Hero --- */
/* --- Hero de producto unico (pantalla completa, sin carrusel) --- */
.hero-producto {
  position: relative;
  min-height: calc(100svh - 67px);
  /* Es hijo directo de <body>, que es un flex container en columna: sin esto, el
     "automatic minimum size" de flexbox (que da 0 en vez del alto del contenido
     cuando overflow no es "visible") lo colapsa casi a 0 en movil. */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  background: linear-gradient(160deg, #eaf7fc 0%, var(--blanco) 55%);
  overflow: hidden;
}
.hero-producto::before {
  content: '';
  position: absolute;
  top: -180px;
  right: -180px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31,143,209,0.16) 0%, rgba(31,143,209,0) 70%);
  pointer-events: none;
}
.hero-producto .contenedor { padding-top: 40px; padding-bottom: 40px; width: 100%; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  position: relative;
}
.hero-texto .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--dorado-oscuro);
  background: var(--gris-fondo);
  border-radius: 999px;
  padding: 7px 14px;
}
.hero-texto h1 {
  font-family: 'Poppins', Impact, sans-serif;
  font-weight: 900;
  font-size: 3.1rem;
  line-height: 1.05;
  letter-spacing: 0.2px;
  margin: 18px 0 16px;
  text-transform: uppercase;
  color: var(--negro);
}
.hero-texto h1 .acento { color: var(--dorado-oscuro); }
.hero-texto p.hero-sub { color: var(--gris); font-size: 1.06rem; line-height: 1.65; margin-bottom: 28px; max-width: 480px; }
.hero-cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.hero-cta-row .btn { padding: 17px 36px; font-size: 0.9rem; }
.hero-rating { display: flex; flex-direction: column; gap: 2px; }
.hero-rating .estrellas { font-size: 1rem; }
.hero-rating small { color: var(--gris); font-weight: 600; font-size: 0.78rem; }
.hero-trust-row { display: flex; flex-wrap: wrap; gap: 14px 26px; }
.hero-trust-item { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 700; color: var(--gris-oscuro); }
.hero-trust-item svg { flex-shrink: 0; color: var(--dorado-oscuro); }

.hero-imagen { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-imagen-marco {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  border-radius: 32px;
  background: var(--blanco);
  box-shadow: 0 30px 70px -20px rgba(20,23,20,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-imagen-marco img { width: 84%; height: 84%; object-fit: contain; }
.hero-badge-descuento {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--dorado);
  color: var(--blanco);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  box-shadow: 0 10px 24px -8px rgba(17,104,158,0.55);
  transform: rotate(8deg);
}
.hero-badge-descuento span:first-child { font-size: 1.5rem; }
.hero-badge-descuento span:last-child { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.5px; }
.hero-scroll {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--gris);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  animation: hero-scroll-bounce 1.8s ease-in-out infinite;
}
@keyframes hero-scroll-bounce {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.6; }
  50% { transform: translate(-50%, 6px); opacity: 1; }
}
@media (max-width: 860px) {
  .hero-producto { min-height: auto; padding-top: 8px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .hero-texto h1 { font-size: 2.2rem; }
  .hero-texto p.hero-sub { margin-left: auto; margin-right: auto; }
  .hero-cta-row { justify-content: center; }
  .hero-trust-row { justify-content: center; }
  .hero-imagen-marco { max-width: 320px; }
  .hero-scroll { display: none; }
}

/* --- Secciones genericas --- */
.seccion { padding: 64px 0; }
.seccion-titulo {
  font-family: 'Poppins', Impact, sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.seccion-titulo .acento { color: var(--dorado-oscuro); }

/* --- Grid de productos --- */
/* Ancho completo de la pantalla (no del ".contenedor" que lo envuelve): el truco de
   left:50%/margin -50vw hace que este grid se salga del max-width del contenedor y llegue
   hasta el borde real del viewport, tanto en celular como en computador. */
.grid-productos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 16px;
  background: var(--blanco);
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 0 16px;
}
.tarjeta-producto {
  background: var(--blanco);
  text-decoration: none;
  color: var(--negro);
  display: flex;
  flex-direction: column;
}
.tarjeta-producto .foto {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--blanco);
}
.tarjeta-producto .foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.tarjeta-producto:hover .foto img { transform: scale(1.04); }
.tarjeta-producto .foto-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.85);
  font-size: 1.1rem;
  line-height: 1;
  padding: 8px 5px;
  cursor: pointer;
  z-index: 2;
  text-shadow: 0 1px 5px rgba(0,0,0,0.5);
  transition: color 0.15s ease;
}
.tarjeta-producto .foto-flecha:hover { color: var(--dorado); }
.tarjeta-producto .foto-flecha-izq { left: 2px; }
.tarjeta-producto .foto-flecha-der { right: 2px; }
.tarjeta-producto .info { padding: 14px 10px; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.tarjeta-producto .categoria { font-size: 0.62rem; text-transform: uppercase; color: var(--gris); letter-spacing: 0.8px; font-weight: 600; }
.tarjeta-producto .nombre { font-weight: 600; font-size: 0.8rem; line-height: 1.3; }
.tarjeta-producto .precios { margin-top: auto; display: flex; align-items: baseline; justify-content: center; gap: 8px; padding-top: 8px; }
.precio { font-weight: 700; font-size: 0.85rem; }
.precio-tachado { text-decoration: line-through; color: var(--gris); font-size: 0.72rem; }

/* Puntos de previsualizacion de estampados (solo en productos con "Mostrar dots" activado
   desde el admin): cada punto es una miniatura circular de la foto de ese estampado. */
.dots-estampados {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 0 0;
}
.dot-estampado {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px var(--gris-borde);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.dot-estampado:hover { box-shadow: 0 0 0 1px var(--negro); }
.dot-estampado.activo { border-color: var(--dorado-oscuro); box-shadow: 0 0 0 1px var(--dorado-oscuro); }

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.chip {
  border: 1.5px solid var(--negro);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  background: transparent;
}
.chip.activo { background: var(--negro); color: var(--dorado); border-color: var(--negro); }

/* --- Infografias del inicio --- */
.infografia-intro { max-width: 620px; margin: 0 auto 40px; text-align: center; }
.infografia-intro .seccion-titulo { margin-bottom: 10px; }
.infografia-intro p { color: var(--gris); font-size: 1rem; line-height: 1.6; }

/* Comparacion de dos columnas (grifo tradicional vs con adaptador / que prefieres) */
.duo-comparacion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
}
.duo-col {
  border-radius: 18px;
  padding: 30px 28px;
  border: 2px solid var(--gris-borde);
}
.duo-col-mal { background: #fdf4f2; border-color: #f3d7d0; }
.duo-col-bien { background: #e6f7f8; border-color: #bfe3e6; }
.duo-col-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 18px;
}
.duo-col-mal .duo-col-titulo { color: var(--peligro); }
.duo-col-bien .duo-col-titulo { color: var(--verde-oscuro); }
.duo-col-icono {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanco);
  font-size: 0.95rem;
  flex-shrink: 0;
}
.duo-col-mal .duo-col-icono { background: var(--peligro); }
.duo-col-bien .duo-col-icono { background: var(--verde); }
.duo-lista { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.duo-lista li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.94rem; line-height: 1.4; color: var(--gris-oscuro); }
.duo-lista li strong { display: block; color: var(--negro); }
.duo-lista li::before { flex-shrink: 0; font-weight: 800; font-size: 0.9rem; line-height: 1.4; }
.duo-col-mal .duo-lista li::before { content: '\2715'; color: var(--peligro); }
.duo-col-bien .duo-lista li::before { content: '\2713'; color: var(--verde-oscuro); }

/* Visual decorativo del chorro de agua (ancho/descontrolado vs fino/controlado) */
.chorro-visual { display: flex; align-items: flex-end; justify-content: center; gap: 7px; height: 84px; margin: 4px 0 22px; }
.chorro-visual span { border-radius: 3px 3px 8px 8px; }
.chorro-ancho span { width: 15px; background: linear-gradient(180deg, #f6c9bd, var(--peligro)); opacity: 0.85; }
.chorro-ancho span:nth-child(1) { height: 58%; }
.chorro-ancho span:nth-child(2) { height: 92%; }
.chorro-ancho span:nth-child(3) { height: 70%; }
.chorro-ancho span:nth-child(4) { height: 100%; }
.chorro-ancho span:nth-child(5) { height: 66%; }
.chorro-fino span { width: 9px; background: linear-gradient(180deg, #cdeaf9, var(--azul)); }
.chorro-fino span:nth-child(1) { height: 40%; }
.chorro-fino span:nth-child(2) { height: 62%; }
.chorro-fino span:nth-child(3) { height: 46%; }

/* Antes / despues con flecha central */
.antes-despues {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
  max-width: 900px;
  margin: 0 auto;
}
.ad-panel { border-radius: 18px; padding: 32px 26px; text-align: center; }
.ad-antes { background: #fdf4f2; border: 2px solid #f3d7d0; }
.ad-despues { background: #e6f7f8; border: 2px solid #bfe3e6; }
.ad-emoji { font-size: 1.7rem; letter-spacing: 4px; margin-bottom: 14px; }
.ad-etiqueta {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.ad-antes .ad-etiqueta { background: var(--peligro); color: var(--blanco); }
.ad-despues .ad-etiqueta { background: var(--verde); color: var(--blanco); }
.ad-panel p { color: var(--gris-oscuro); font-weight: 600; font-size: 0.95rem; margin: 0; }
.ad-flecha { color: var(--dorado-oscuro); font-size: 1.8rem; }

/* Agua vs dinero: dos flujos verticales */
.flujo-dinero { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 700px; margin: 40px auto 0; }
.flujo-card { border-radius: 18px; padding: 26px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.flujo-card-mal { background: #fdf4f2; border: 2px solid #f3d7d0; }
.flujo-card-bien { background: #e6f7f8; border: 2px solid #bfe3e6; }
.flujo-icono { font-size: 2rem; }
.flujo-flecha { font-size: 1.2rem; color: var(--gris); }
.flujo-card-mal .flujo-flecha { color: var(--peligro); }
.flujo-card-bien .flujo-flecha { color: var(--verde-oscuro); }
.flujo-texto { font-weight: 700; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.4px; }
.flujo-card-mal .flujo-texto:last-child { color: var(--peligro); }
.flujo-card-bien .flujo-texto:last-child { color: var(--verde-oscuro); }

@media (max-width: 760px) {
  .duo-comparacion { grid-template-columns: 1fr; }
  .antes-despues { grid-template-columns: 1fr; }
  .ad-flecha { transform: rotate(90deg); margin: 0 auto; }
  .flujo-dinero { grid-template-columns: 1fr; max-width: 320px; }
}

/* --- Seccion "foto + texto" (ej. ahorro en la factura) --- */
.split-feature { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 52px; align-items: center; }
.split-feature-imagen {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 50px -18px rgba(18,35,44,0.35);
  max-width: 380px;
  margin: 0 auto;
}
.split-feature-imagen img { width: 100%; display: block; }
.split-feature-texto .eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--verde-oscuro);
  margin-bottom: 8px;
}
.split-feature-texto h2 {
  font-family: 'Poppins', Impact, sans-serif;
  font-weight: 900;
  font-size: 2.3rem;
  line-height: 1.12;
  text-transform: uppercase;
  margin: 0 0 20px;
  color: var(--negro);
}
.split-feature-texto h2 .acento { color: var(--dorado-oscuro); }
.split-feature-texto p { color: var(--gris-oscuro); font-size: 1rem; line-height: 1.7; margin: 0 0 16px; max-width: 520px; }
.split-feature-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; }

@media (max-width: 800px) {
  .split-feature { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .split-feature-texto h2 { font-size: 1.9rem; }
  .split-feature-texto p { margin-left: auto; margin-right: auto; }
  .split-feature-cta { justify-content: center; }
}

/* --- Ficha de producto --- */
.seccion-producto { padding-top: 24px; }
@media (max-width: 640px) { .seccion-producto { padding-top: 14px; padding-bottom: 40px; } }

.ficha-producto {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
}
@media (max-width: 800px) { .ficha-producto { grid-template-columns: 1fr; } }

.galeria-principal {
  background: var(--gris-fondo);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  position: relative;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.galeria-principal img { width: 100%; height: 100%; object-fit: contain; }
.galeria-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  color: var(--negro);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: background 0.15s ease;
}
.galeria-flecha:hover { background: var(--blanco); }
.galeria-flecha-anterior { left: 12px; }
.galeria-flecha-siguiente { right: 12px; }
.lente-zoom {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 3px solid var(--blanco);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35), 0 0 0 1.5px rgba(0,0,0,0.25);
  background-repeat: no-repeat;
  background-color: var(--blanco);
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
  z-index: 5;
}
.lente-zoom.activa { opacity: 1; }
.lupa-boton {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--gris-borde);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* --- Lightbox de imagen --- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.lightbox-overlay.activo { opacity: 1; visibility: visible; }
.lightbox-overlay img {
  max-width: 88vw;
  max-height: 88vh;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 0.25s ease;
  touch-action: none;
}
.lightbox-overlay img.acercada { cursor: grab; touch-action: none; }
.lightbox-overlay img.acercada:active { cursor: grabbing; }
.lightbox-cerrar {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: var(--blanco);
  font-size: 1.3rem;
  cursor: pointer;
}
.lightbox-cerrar:hover { background: rgba(255,255,255,0.22); }
.lightbox-ayuda {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #bdbdbd;
  font-size: 0.78rem;
}
@media (max-width: 640px) {
  .lente-zoom { display: none; }
}
.galeria-miniaturas { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.galeria-miniaturas img {
  width: 64px; height: 64px; object-fit: cover; cursor: pointer;
  border: 1.5px solid transparent; opacity: 0.6;
}
.galeria-miniaturas img.activa { border-color: var(--negro); opacity: 1; }

.ficha-detalle .categoria { color: var(--gris); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.8px; font-weight: 600; }
.ficha-detalle h1 { font-family: 'Poppins', Impact, sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.7rem; margin: 10px 0 14px; }
.ficha-detalle .precios { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.precio-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 0.85rem;
}
.precio-pill-antes { background: var(--gris-fondo); color: var(--gris); }
.precio-pill-antes .precio-tachado { color: var(--gris); text-decoration: line-through; font-size: 0.85rem; }
.precio-pill-hoy { background: var(--dorado); color: var(--blanco); }
.precio-pill-hoy .precio { color: var(--blanco); font-size: 1.05rem; font-weight: 800; }
.ficha-detalle .descripcion { line-height: 1.7; color: var(--gris-oscuro); margin-bottom: 26px; }

.selector-grupo { margin-bottom: 22px; }
.selector-grupo label { display: block; font-weight: 700; margin-bottom: 10px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
.tallas-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.talla-opcion {
  border: 1.5px solid var(--negro);
  padding: 10px 18px;
  font-weight: 700;
  cursor: pointer;
  background: var(--blanco);
}
.talla-opcion.seleccionada { background: var(--dorado); color: var(--negro); border-color: var(--dorado); }
.talla-opcion.agotada { opacity: 0.3; text-decoration: line-through; cursor: not-allowed; }

/* --- Paquetes (bundle) de la ficha de producto --- */
.paquetes-opciones { display: flex; flex-direction: column; gap: 16px; }
.paquete-opcion {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  column-gap: 14px;
  border: 2px dashed var(--gris-borde);
  border-radius: 10px;
  padding: 16px;
  background: var(--blanco);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.paquete-opcion:hover { border-color: var(--dorado); }
.paquete-opcion.seleccionada { border-color: var(--dorado-oscuro); border-style: solid; background: #e8f4fb; }
.paquete-radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--gris-borde);
  flex-shrink: 0;
  position: relative;
}
.paquete-opcion.seleccionada .paquete-radio { border-color: var(--dorado-oscuro); }
.paquete-opcion.seleccionada .paquete-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--dorado-oscuro);
}
.paquete-cantidad { font-weight: 800; font-size: 0.95rem; }
.paquete-precios { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.paquete-precio { font-weight: 800; font-size: 1rem; color: var(--negro); white-space: nowrap; }
.paquete-tachado { text-decoration: line-through; color: var(--gris); font-size: 0.76rem; white-space: nowrap; }
.paquete-thumb { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
/* Etiqueta ("MAS ELEGIDO"/"MEJOR AHORRO") como cinta flotante dentro del boton,
   en vez de un texto suelto al lado que en celular dejaba el boton angosto. */
.paquete-etiqueta {
  position: absolute;
  top: -11px;
  right: 16px;
  background: var(--dorado-oscuro);
  color: var(--blanco);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.paquete-ahorro {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: var(--verde-oscuro);
  font-weight: 700;
  margin-top: 4px;
  padding-left: 36px;
}
@media (max-width: 460px) {
  .paquete-thumb { display: none; }
}

.selector-cantidad { display: inline-flex; align-items: center; border: 1.5px solid var(--negro); overflow: hidden; }
.selector-cantidad button { background: none; border: none; width: 40px; height: 42px; font-size: 1.2rem; cursor: pointer; }
.selector-cantidad input { width: 46px; border: none; text-align: center; font-weight: 700; font-size: 1rem; }

.acciones-producto { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.acciones-producto .btn { width: 100%; }
.mensaje-stock { font-size: 0.82rem; margin-top: 10px; color: var(--gris); }

/* --- Reseñas --- */
.resenas-resumen { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 4px; }
.resenas-resumen .promedio { font-family: 'Poppins', Impact, sans-serif; font-weight: 800; font-size: 2.4rem; }
.resenas-resumen > div { text-align: left; }
.estrellas { color: var(--dorado); font-size: 1.05rem; letter-spacing: 2px; }

/* Reseñas de la ficha de producto: misma grilla y ancho que el resto de la pagina,
   en vez del bloque angosto de una sola columna que se veia desconectado. */
#lista-resenas.resenas-grid { margin-top: 40px; margin-bottom: 40px; }
.resena {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-top: 3px solid var(--dorado);
  border-radius: 10px;
  padding: 22px;
}
.resena .cabecera-resena { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 10px; }
.resena .autor { font-weight: 700; }
.resena .fecha { color: var(--gris); font-size: 0.8rem; white-space: nowrap; }
.resena p { margin: 8px 0 0; line-height: 1.5; }
.resena img { margin-top: 10px; max-width: 160px; border-radius: 6px; }

.formulario-resena {
  max-width: 640px;
  margin: 0 auto;
  background: var(--gris-fondo);
  border: 1px solid var(--gris-borde);
  border-radius: 12px;
  padding: 30px;
}
.formulario-resena h3 { margin-top: 0; text-transform: uppercase; font-size: 1rem; letter-spacing: 0.5px; }
.selector-estrellas { display: flex; gap: 4px; font-size: 1.6rem; cursor: pointer; color: var(--gris-borde); margin-bottom: 16px; }
.selector-estrellas span.activa { color: var(--dorado); }
.resena-foto-previa-img { width: 90px; height: 90px; object-fit: cover; margin-top: 10px; border-radius: 4px; }

/* --- Formularios --- */
.campo { margin-bottom: 18px; }
.campo label { display: block; font-weight: 600; margin-bottom: 7px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.4px; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--gris-borde);
  border-radius: 2px;
  font-size: 0.95rem;
  font-family: inherit;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--negro);
}
/* Sin esto, iOS/Safari pinta el <select> con su estilo nativo (texto azul de sistema,
   sin caja) en vez de la misma caja que los demas campos del formulario. */
.campo select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: var(--negro);
  background-color: var(--blanco);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a1610' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 36px;
}
.campo select:disabled {
  background-color: var(--gris-fondo);
  color: var(--gris);
}
.fila-campos { display: flex; gap: 16px; flex-wrap: wrap; }
.fila-campos .campo { flex: 1 1 200px; }

.alerta { padding: 12px 16px; border-radius: 2px; font-size: 0.9rem; margin-bottom: 16px; }
.alerta-error { background: #fdecea; color: var(--peligro); }
.alerta-exito { background: #e9f7ec; color: var(--exito); }

/* --- Rastrear pedido --- */
.tarjeta { background: var(--blanco); border: 1px solid var(--gris-borde); padding: 20px; }
.tarjeta .linea { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.92rem; }
.tarjeta .linea.total { font-size: 1.1rem; font-weight: 800; border-top: 1px solid var(--gris-borde); padding-top: 12px; margin-top: 12px; }
.badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--gris-fondo); color: var(--gris-oscuro); }
.badge-PENDIENTE { background: #fff3cd; color: #8a6d00; }
.badge-PAGADO { background: #d6f5db; color: var(--exito); }
.badge-POR_PREPARAR { background: #ffe4cf; color: #a5480a; }
.badge-PREPARADO { background: #e3d9ff; color: #5b30c9; }
.badge-EN_CAMINO { background: #dbe9ff; color: #1b5bbf; }
.badge-ENTREGADO { background: #e0e0e0; color: #333; }
.badge-CANCELADO { background: #fdecea; color: var(--peligro); }

/* --- Carrito --- */
.grid-checkout, .grid-carrito {
  display: grid;
  gap: 40px;
  align-items: start;
}
.grid-checkout { grid-template-columns: 1.5fr 1fr; }
.grid-carrito { grid-template-columns: 1.6fr 1fr; }
@media (max-width: 800px) {
  .grid-checkout, .grid-carrito { grid-template-columns: 1fr; gap: 28px; }
}

.fila-carrito {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--gris-borde);
}
.fila-carrito img { width: 84px; height: 84px; object-fit: cover; }
.fila-carrito-acciones { display: flex; align-items: center; gap: 16px; }
.fila-carrito .quitar { background: none; border: none; color: var(--peligro); cursor: pointer; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; }
@media (max-width: 560px) {
  .fila-carrito { grid-template-columns: 64px 1fr; column-gap: 12px; }
  .fila-carrito img { width: 64px; height: 64px; }
  .fila-carrito-acciones {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 6px;
  }
  .fila-carrito-precio { font-weight: 700; }
}
.resumen-carrito {
  background: var(--gris-fondo);
  padding: 26px;
}
.resumen-carrito .linea { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.92rem; }
.resumen-carrito .total { font-size: 1.25rem; font-weight: 800; border-top: 1px solid var(--gris-borde); padding-top: 14px; margin-top: 14px; }

.resumen-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gris-borde); }
.resumen-item:first-child { padding-top: 0; }
.resumen-item-foto { position: relative; width: 54px; height: 54px; flex-shrink: 0; }
.resumen-item-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; border: 1px solid var(--gris-borde); background: var(--blanco); }
.resumen-item-cantidad {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--negro);
  color: var(--dorado);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.resumen-item-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resumen-item-info strong { font-size: 0.86rem; line-height: 1.3; }
.resumen-item-info small { color: var(--gris); font-size: 0.76rem; }
.resumen-item-precio { font-weight: 700; font-size: 0.88rem; white-space: nowrap; }

/* --- Checkout --- */
.metodos-pago { display: grid; gap: 12px; margin-bottom: 26px; }
.metodo-pago {
  border: 2px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 16px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--blanco);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.metodo-pago:hover { border-color: var(--dorado-oscuro); }
.metodo-pago.seleccionado {
  border-color: var(--dorado-oscuro);
  background: var(--gris-fondo);
  box-shadow: 0 0 0 2px var(--dorado-oscuro);
}
.metodo-pago.seleccionado strong { color: var(--dorado-oscuro); }
.metodo-pago strong { display: block; margin-bottom: 4px; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.4px; }
.metodo-pago small { color: var(--gris); }
.metodo-pago[data-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.metodo-pago input[type="radio"] { accent-color: var(--dorado-oscuro); width: 19px; height: 19px; margin-top: 2px; flex-shrink: 0; }

.seccion-gris { background: var(--gris-fondo); }

/* --- Teaser de reseñas (home) --- */
.reviews-teaser-cabecera { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.reviews-teaser-cabecera .seccion-titulo { margin-bottom: 0; }
.ver-todas { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; }
.ver-todas:hover { opacity: 0.6; }
.reviews-teaser {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  min-height: 60px;
  align-items: center;
}
.reviews-teaser::-webkit-scrollbar { display: none; }
.reviews-teaser .vacio { flex: 1 1 100%; padding: 40px 20px; }
.review-card {
  flex: 0 1 300px;
  max-width: 100%;
  scroll-snap-align: start;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-top: 3px solid var(--dorado);
  border-radius: 10px;
  padding: 22px;
}
.review-card p { line-height: 1.55; margin: 12px 0; }
.review-card-foto { width: 100%; height: 170px; object-fit: cover; margin-bottom: 14px; border-radius: 6px; }
.review-card-autor { display: flex; flex-direction: column; font-size: 0.85rem; }
.review-card-autor span { color: var(--gris); font-size: 0.78rem; }

@media (max-width: 640px) {
  .reviews-teaser { flex-wrap: nowrap; justify-content: flex-start; }
  .review-card { flex: 0 0 82%; }
}

/* --- Reseñas de toda la tienda --- */
.resenas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 30px; }
.resena-tarjeta { background: var(--gris-fondo); padding: 20px 22px; }
.resena-tarjeta p { line-height: 1.5; margin: 10px 0; }
.resena-producto { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 10px; }
.resena-producto img { width: 40px; height: 40px; object-fit: cover; flex-shrink: 0; }
.resena-producto span { font-weight: 700; font-size: 0.82rem; }
.resena-foto { max-width: 140px; margin-bottom: 10px; }

/* --- Videos / TikToks / Reels --- */
.videos-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.video-tarjeta {
  position: relative;
  width: 260px;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 10px;
  background: var(--negro);
}
.video-tarjeta video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-boton {
  position: absolute;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.45);
  color: var(--blanco);
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
}
.video-boton-play { top: 10px; }
.video-boton-mute { top: 50px; }
.video-placeholder {
  width: 260px;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--gris-fondo);
  border: 1.5px dashed var(--gris-borde);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: var(--gris);
  padding: 16px;
}
.video-placeholder-icono {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--negro); color: var(--blanco);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.video-placeholder p { font-size: 0.8rem; margin: 0; }

@media (max-width: 640px) {
  /* En movil, la seccion de videos se vuelve un carrusel deslizable con snap,
     mostrando un "vistazo" de la siguiente tarjeta como en apps de video corto. */
  .videos-grid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -24px;
    padding: 4px 24px 8px;
  }
  .videos-grid::-webkit-scrollbar { display: none; }
  .video-tarjeta, .video-placeholder {
    flex: 0 0 78%;
    width: auto;
    scroll-snap-align: center;
  }
}

/* --- Footer --- */
.site-footer { background: var(--negro); color: #bdbdbd; padding: 48px 0; margin-top: auto; border-top: 3px solid var(--dorado); }
.site-footer p { font-size: 0.85rem; line-height: 1.6; }
.site-footer .logo { margin-bottom: 16px; }
.footer-social { display: flex; gap: 14px; margin: 18px 0; }
.footer-social a { color: #bdbdbd; display: inline-flex; }
.footer-social a:hover { color: var(--dorado); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 18px; padding-top: 18px; border-top: 1px solid #262626; }
.footer-links a { font-size: 0.78rem; text-decoration: none; color: var(--dorado); font-weight: 600; }
.footer-links a:hover { color: var(--blanco); }

/* --- Paginas legales --- */
.pagina-legal { max-width: 760px; }
.pagina-legal h3 { margin-top: 32px; margin-bottom: 8px; font-size: 1.05rem; }
.pagina-legal p { line-height: 1.7; color: var(--gris-oscuro); }
.pagina-legal .nota-legal { color: var(--gris); font-size: 0.8rem; margin-top: 36px; }
.lista-contacto { margin-top: 24px; }
.acciones-contacto { display: flex; flex-wrap: wrap; gap: 12px; }

.vacio { text-align: center; padding: 70px 20px; color: var(--gris); }

@media (max-width: 640px) {
  .buscador-toggle { margin-right: 8px; }
  .buscador-panel { padding: 70px 12px 12px; }
  .buscador-modal { padding: 14px; border-radius: 8px; }
  .buscador-item img { width: 42px; height: 42px; }
  .carrito-movil { display: inline-flex; order: 3; margin-right: 16px; }
  .menu-toggle { display: flex; order: 4; }
  .site-header nav { order: 5; }
  .site-header .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--blanco);
    border-top: 1px solid var(--gris-borde);
    border-bottom: 1px solid var(--gris-borde);
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
  }
  .site-header .nav-links.abierto { display: flex; }
  .site-header .nav-links li { border-bottom: 1px solid var(--gris-borde); }
  .site-header .nav-links li:last-child { border-bottom: none; }
  .site-header .nav-links a { display: block; padding: 16px 24px; }

  .grid-productos { grid-template-columns: repeat(2, 1fr); }
  .tarjeta-producto .info { padding: 12px; gap: 4px; }
  .tarjeta-producto .nombre { font-size: 0.82rem; }
  .tarjeta-producto .precio { font-size: 0.9rem; }
  .tarjeta-producto .precio-tachado { font-size: 0.72rem; }
}