@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
  --negro: #2f352d;
  --blanco: #f9f7f3;
  --gris-fondo: #f1ede4;
  --gris-borde: #e3ddd0;
  --gris: #6d7268;
  --gris-oscuro: #464c42;
  --exito: #2e7d32;
  --peligro: #c0392b;
  --dorado: #6f8061;
  --dorado-oscuro: #4f5d45;
  --radio: 4px;
  --alto-barra-anuncio: 0px; /* la fija anuncio.js segun la altura real de la barra, para que el menu se pegue justo debajo */
}

* { 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: 'Work Sans', 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: 34px; width: auto; }
.logo.logo-grande { height: 64px; }
.logo.logo-grande img,
img.logo-grande { height: 64px; width: auto; }

/* el logo es dorado sobre transparente: se ve bien tanto en fondos claros como oscuros */
.site-footer .logo img,
.sidebar .logo-mini img {
  filter: none;
}

/* --- Header --- */
/* --- Barra de anuncios (rotativa, arriba de todo) --- */
.barra-anuncio {
  display: none;
  background: var(--negro);
  color: var(--blanco);
  text-align: center;
  padding: 10px 24px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.barra-anuncio.visible {
  display: block;
  /* Fija junto con el menu al bajar, en vez de desaparecer scrolleando hacia arriba. */
  position: sticky;
  top: 0;
  z-index: 21;
}
.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: 'Cormorant Garamond', Georgia, serif; 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: 'Cormorant Garamond', Georgia, serif;
  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: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  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; }

/* Variante "barra": dentro de la barra de anuncios negra, rotando junto con los demas mensajes.
   Colores invertidos a proposito respecto a las otras variantes (caja dorada, numeros negros)
   para que resalte sobre el fondo negro de la barra en vez de perderse. */
.promo-timer-barra {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--blanco);
}
.promo-timer-barra.visible { display: flex; }
.promo-timer-barra .promo-timer-inline-icono { display: none; }
.promo-timer-barra .promo-timer-inline-titulo { font-weight: 700; }
.promo-timer-barra .promo-timer-inline-cuenta span {
  background: var(--dorado);
  color: var(--negro);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 0.78rem;
}
.promo-timer-barra .promo-timer-inline-cuenta small { font-size: 0.55rem; text-transform: uppercase; opacity: 0.8; margin-left: 1px; }

@media (max-width: 640px) {
  /* En celular el titulo es largo y encima van los 4 cuadros del contador - sin achicar todo
     un poco, se amontonaba en 3 lineas. Con esto, entra en 1 o maximo 2. */
  .barra-anuncio { padding: 8px 10px; font-size: 0.68rem; }
  .promo-timer-barra { flex-wrap: wrap; gap: 3px 6px; row-gap: 2px; }
  .promo-timer-barra .promo-timer-inline-titulo { font-size: 0.68rem; }
  .promo-timer-barra .promo-timer-inline-cuenta { gap: 3px; }
  .promo-timer-barra .promo-timer-inline-cuenta span { font-size: 0.68rem; padding: 2px 4px; }
}

.site-header {
  background: var(--dorado);
  border-bottom: 2px solid var(--negro);
  position: sticky;
  top: var(--alto-barra-anuncio);
  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: 24px; }
.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.nav-links a:hover { color: var(--blanco); 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: 13px 30px;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  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(--negro); 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(--negro); 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; }

/* Botones de la ficha de producto: colores invertidos entre si a proposito (uno empieza
   blanco/negro y termina negro/dorado al pasar el cursor; el otro al reves), para que se note
   la diferencia entre "agregar" (accion secundaria) y "comprar ahora" (accion principal). */
.btn-agregar-carrito { background: var(--blanco); color: var(--negro); border-color: var(--negro); }
.btn-agregar-carrito:hover, .btn-agregar-carrito:active { background: var(--negro); color: var(--dorado); border-color: var(--dorado); }

.btn-comprar-ahora { background: var(--dorado); color: var(--negro); border-color: var(--dorado); }
.btn-comprar-ahora:hover, .btn-comprar-ahora:active { background: var(--negro); color: var(--dorado); border-color: var(--negro); }

/* Pequeña vibracion cada 3s para llamar la atencion sobre el boton de comprar (en la ficha de
   producto y en "Confirmar pedido" del checkout) - se desactiva sola mientras el boton este
   deshabilitado, para no vibrar un boton que el cliente no puede presionar todavia. */
@keyframes vibrar-boton {
  0%, 85%, 100% { transform: translateX(0); }
  87% { transform: translateX(-4px); }
  89% { transform: translateX(4px); }
  91% { transform: translateX(-3px); }
  93% { transform: translateX(3px); }
  95% { transform: translateX(0); }
}
.btn-vibrar:not([disabled]) { animation: vibrar-boton 3s ease-in-out infinite; }

/* "Confirmar pedido" en checkout, cuando el metodo elegido es contra entrega: pasa a verde
   WhatsApp con su logo, porque confirmar ese pedido en realidad es mandar un WhatsApp. */
.btn-whatsapp, .btn-whatsapp:hover { background: #25D366; border-color: #25D366; color: var(--blanco); }

/* --- Hero --- */
.portada {
  position: relative;
  color: var(--blanco);
  height: clamp(560px, 42vw, 780px);
  min-height: clamp(560px, 42vw, 780px);
  flex-shrink: 0;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}
/* La "pista" es la fila horizontal de todos los slides uno al lado del otro; avanzar un slide
   es simplemente desplazarla con transform, en vez del crossfade de antes - asi, en computador,
   siempre se alcanzan a ver 2 al tiempo y al avanzar uno "se va" mientras el otro se corre, en
   vez de que los dos cambien de golpe. */
.portada-pista {
  display: flex;
  height: 100%;
  transition: transform 0.6s ease;
}
.portada-pista.sin-transicion { transition: none; }
.portada-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center 20%;
}
@media (min-width: 901px) {
  .portada-slide { flex-basis: 50%; }
}
/* Oscurece un poco la foto (de por si, y mas hacia abajo para que el texto se lea bien). */
.portada-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20,16,8,0.88) 0%, rgba(20,16,8,0.45) 55%, rgba(20,16,8,0.22) 100%);
  pointer-events: none;
}
.portada .contenedor { position: relative; padding-bottom: 56px; padding-top: 56px; width: 100%; }
.portada-texto { max-width: 560px; }
@media (min-width: 901px) {
  /* Con 2 banners a la vez, el titulo grande no cabe igual - se achica un poco para que no se
     desborde ni se vea amontonado, pero sigue siendo un titulo protagonico. */
  .portada-slide .portada-texto h1 { font-size: 1.9rem; }
  .portada-slide .portada-texto { max-width: 90%; }
}

.portada-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.portada-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.45);
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.portada-dot:hover { background: rgba(255,255,255,0.75); }
.portada-dot.activa { background: var(--dorado); transform: scale(1.3); }

.portada-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.85);
  font-size: 1.3rem;
  line-height: 1;
  padding: 10px 6px;
  cursor: pointer;
  z-index: 3;
  text-shadow: 0 1px 5px rgba(0,0,0,0.5);
  transition: color 0.15s ease;
}
.portada-flecha:hover { color: var(--dorado); }
.portada-flecha-izq { left: 4px; }
.portada-flecha-der { right: 4px; }
.portada-texto .eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--dorado);
}
.portada-texto h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 3rem;
  line-height: 1.02;
  letter-spacing: 0.5px;
  margin: 14px 0 16px;
  text-transform: uppercase;
}
.portada-texto p { color: #e6e6e6; font-size: 1.02rem; line-height: 1.6; margin-bottom: 28px; max-width: 460px; }

/* --- Secciones genericas --- */
.seccion { padding: 64px 0; }
.seccion-titulo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  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); }

/* --- 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;
  /* Sin esto, la cuadricula estira la columna de la foto para igualar la altura de la
     columna de texto (comportamiento por defecto de grid) - en productos con descripcion
     larga o varios estampados (ej. Barcelona), la columna de texto es mas alta y eso
     agrandaba/recortaba la foto de mas sin que tuviera nada que ver con la foto en si. */
  align-items: start;
}
/* En anchos intermedios (ventana no maximizada, tablet apaisada) 2 columnas no alcanzaban a
   darle suficiente espacio a la derecha: el titulo se partia en 2-3 lineas y el temporizador
   se encimaba con la categoria, pareciendo "desconfigurado". Pasa a 1 columna antes de que
   eso pase. */
@media (max-width: 1024px) { .ficha-producto { grid-template-columns: 1fr; } }

.galeria-principal {
  background: var(--gris-fondo);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  position: relative;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; }
.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; }
}
/* Una sola fila horizontal (nunca se acumulan hacia abajo): si no caben todas, se
   deslizan de izquierda a derecha en vez de pasar a una segunda fila. Igual en
   celular (con el dedo) y en computador (con el mouse, arrastrando o con rueda). */
.columna-galeria { min-width: 0; }
.galeria-miniaturas {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Sin esto, un grid/flex item no se encoge mas alla del ancho que pida su contenido: con
     varias fotos en una sola fila (nowrap), eso significa que esta fila -y toda la columna de
     la foto completa, incluida la foto principal- se estiraba para caber todas las miniaturas
     sin encoger, desbordando la pantalla en vez de simplemente scrollear. Por eso se notaba mas
     en productos con mas fotos (ej. Barcelona con 10) que en los que tienen pocas. */
  min-width: 0;
}
.galeria-miniaturas::-webkit-scrollbar { display: none; }
.galeria-miniaturas img {
  width: 64px; height: 64px; object-fit: cover; cursor: pointer;
  border: 1.5px solid transparent; opacity: 0.6;
  flex-shrink: 0;
}
.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: 'Cormorant Garamond', Georgia, serif; font-weight: 600; text-transform: uppercase; font-size: 1.7rem; margin: 10px 0 14px; }
.ficha-detalle .precios { display: flex; gap: 12px; align-items: baseline; margin-bottom: 20px; }
.ficha-detalle .precios .precio { font-size: 1.5rem; }
.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; }

.guia-tallas-boton {
  background: none;
  border: none;
  padding: 0;
  margin-left: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--dorado-oscuro);
  text-decoration: underline;
  cursor: pointer;
}

.guia-tallas-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 300;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 16px;
  overflow-y: auto;
}
.guia-tallas-overlay.abierta { display: flex; }
.guia-tallas-caja {
  background: var(--blanco);
  border-radius: 8px;
  width: 100%;
  max-width: 440px;
  padding: 24px;
  position: relative;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.guia-tallas-caja h3 { margin: 0 0 4px; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; text-transform: uppercase; }
.guia-tallas-nota { color: var(--gris); font-size: 0.8rem; margin: 0 0 16px; }
.guia-tallas-cerrar { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--gris); }
.guia-tallas-tabla { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.guia-tallas-tabla th, .guia-tallas-tabla td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--gris-borde); }
.guia-tallas-tabla th { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.3px; color: var(--gris); }
.guia-tallas-tabla td:first-child, .guia-tallas-tabla th:first-child { text-align: left; font-weight: 700; }

.contador-pago {
  display: inline-block;
  background: var(--negro);
  color: var(--dorado);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.tallas-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.talla-opcion { position: relative; }
.badge-recargo {
  position: absolute;
  top: -10px;
  right: -8px;
  background: var(--negro);
  color: var(--dorado);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
  text-transform: none;
}
.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; }

.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); }
.viendo-ahora { font-size: 0.82rem; margin: 2px 0 16px; color: var(--gris); display: flex; align-items: center; gap: 6px; }
.stock-disponible { display: inline; text-transform: none; font-weight: 700; font-size: 0.8rem; letter-spacing: normal; color: var(--peligro); margin-left: 6px; }

/* --- Reseñas --- */
.resenas-resumen { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.resenas-resumen .promedio { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 2.4rem; }
.estrellas { color: var(--dorado); font-size: 1.05rem; letter-spacing: 2px; }
.resena {
  background: var(--gris-fondo);
  padding: 20px 22px;
  margin-bottom: 12px;
}
.resena .cabecera-resena { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.resena .autor { font-weight: 700; }
.resena .fecha { color: var(--gris); font-size: 0.8rem; }
.resena p { margin: 8px 0 0; line-height: 1.5; }
.resena img { margin-top: 10px; max-width: 160px; }

.formulario-resena {
  border: 1px solid var(--gris-borde);
  padding: 26px;
  margin-top: 32px;
}
.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; }
  /* En celular, el resumen del pedido va primero: asi el cliente ve que compro antes de
     llenar el formulario, en vez de tener que bajar toda la pantalla para confirmarlo. */
  .grid-checkout > .resumen-carrito { order: -1; }
}

.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; }

.resumen-item-controles { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.selector-cantidad-mini { height: 26px; }
.selector-cantidad-mini button { width: 24px; height: 24px; font-size: 0.9rem; }
.selector-cantidad-mini span { display: inline-block; min-width: 18px; text-align: center; font-weight: 700; font-size: 0.78rem; padding: 0 2px; }
.resumen-item-quitar { background: none; border: none; color: var(--peligro); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; cursor: pointer; padding: 0; }
.resumen-agregar-mas { display: inline-block; margin: 10px 0 16px; font-size: 0.82rem; font-weight: 700; color: var(--dorado-oscuro); text-decoration: underline; }

/* --- Checkout --- */
.metodos-pago { display: grid; gap: 12px; margin-bottom: 26px; }
.metodo-pago {
  position: relative;
  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-badge {
  position: absolute;
  top: -11px;
  right: 16px;
  background: var(--negro);
  color: var(--dorado);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.metodo-pago-badge:empty { display: none; }
.metodo-pago:hover { border-color: var(--dorado-oscuro); }
.metodo-pago.seleccionado {
  border-color: var(--dorado-oscuro);
  background: #fbf1dd;
  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;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.reviews-teaser::-webkit-scrollbar { display: none; }
.review-card {
  flex: 0 0 300px;
  max-width: 100%;
  scroll-snap-align: start;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-top: 3px solid var(--dorado);
  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; }
.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) {
  .review-card { flex-basis: 82%; }
}

/* --- Reseñas de toda la tienda --- */
/* Ancho completo de la pantalla, igual que el grid de productos (mismo truco de
   left:50%/-50vw): asi la pagina de reseñas se ve tan organizada y aprovecha el
   mismo espacio que el resto del sitio en computador, en vez de quedar angosta y
   amontonada dentro del ".contenedor". */
.resenas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 16px;
  margin-top: 30px;
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 0 24px;
}
.resena-tarjeta { display: flex; flex-direction: column; background: var(--gris-fondo); padding: 20px 22px; border-radius: 8px; }
.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; }
.resena-tarjeta .cabecera-resena { margin-top: auto; padding-top: 10px; }

@media (max-width: 1000px) {
  .resenas-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .resenas-grid { grid-template-columns: 1fr; padding: 0 16px; gap: 16px; }
}

/* --- 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: #9a9a9a; }
.footer-links a:hover { color: var(--dorado); }

/* --- 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(--dorado);
    border-top: 1px solid var(--negro);
    border-bottom: 1px solid var(--negro);
  }
  .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; }
  .portada-texto h1 { font-size: 2.1rem; }
  .portada { height: 420px; min-height: 420px; }

  .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; }
}

/* --- Diapositivas del producto (debajo de la ficha, a ancho completo) --- */
#diapositivas-producto { width: 100%; }
.diapositiva {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
  border-top: 1px solid var(--gris-borde);
}
.diapositiva:nth-child(even) .diapositiva-texto { background: var(--gris-fondo); }
.diapositiva-foto { background: var(--gris-fondo); overflow: hidden; }
.diapositiva-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.diapositiva-texto { padding: 64px clamp(28px, 6vw, 96px); display: flex; flex-direction: column; justify-content: center; }
.diapositiva-texto h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; text-transform: uppercase; font-size: 2rem; margin: 0 0 18px; }
.diapositiva-texto p { line-height: 1.7; margin: 0 0 14px; font-size: 1rem; color: var(--gris-oscuro); max-width: 520px; }
@media (max-width: 800px) {
  .diapositiva { grid-template-columns: 1fr; min-height: 0; }
  .diapositiva-foto { aspect-ratio: 4 / 5; }
  .diapositiva-texto { padding: 36px 20px; }
  .diapositiva-texto h2 { font-size: 1.6rem; }
}
.diapositiva-texto .acento { color: var(--dorado-oscuro); }
.diapositiva-foto--contener { background: var(--blanco); display: flex; align-items: center; }
.diapositiva-foto--contener img { object-fit: contain; padding: 28px; box-sizing: border-box; }

/* --- Ajustes: diapositivas con aire, alternadas y mas grandes --- */
#diapositivas-producto { margin-top: 72px; }
.diapositiva {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 24px;
  gap: 56px;
  min-height: 0;
  align-items: center;
  border-top: none;
}
.diapositiva-foto {
  width: 100%;
  max-width: 480px;
  justify-self: center;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
}
.diapositiva--invertida .diapositiva-foto { order: 2; }
.diapositiva:nth-child(even) .diapositiva-texto { background: none; }
.diapositiva-texto { padding: 24px 8px; }
.diapositiva-texto h2 { font-size: 2.4rem; }
.diapositiva-texto p { font-size: 1.2rem; line-height: 1.75; max-width: 560px; }
.diapositiva-foto--contener img { padding: 36px; }

/* Video tipo reel al final de la pagina del producto */
.reel-producto {
  max-width: 1240px;
  margin: 56px auto 0;
  padding: 40px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.reel-texto h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; text-transform: uppercase; font-size: 2.6rem; margin: 0 0 12px; }
.reel-texto p { font-size: 1.15rem; color: var(--gris-oscuro); margin: 0; }
.reel-video {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 9 / 16;
  height: auto;
  object-fit: cover;
  border-radius: 16px;
  background: #000;
  justify-self: center;
}
@media (max-width: 800px) {
  .reel-producto { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 28px; }
  .diapositiva-texto p { font-size: 1.05rem; }
  .diapositiva-texto h2 { font-size: 1.9rem; }
}

/* Los botones de compra siguen al cliente al bajar (solo en computador: en celular no tapan el texto) */


/* --- Pagina de producto: seccion de diapositivas mas ordenada --- */
.beneficios-producto {
  max-width: 1680px;
  margin: 72px auto 0;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.beneficio {
  background: var(--blanco);
  border: 1.5px solid var(--negro);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.beneficio strong { font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; }
.beneficio span { font-size: 0.95rem; color: var(--gris-oscuro); font-weight: 500; }

#diapositivas-producto { margin-top: 56px; }
.diapositiva {
  max-width: 1680px;
  padding: 56px 32px;
  gap: 72px;
  align-items: center;
}
.diapositiva-foto { max-width: 620px; border-radius: 12px; }
.diapositiva-texto { padding: 16px 8px; }
.diapositiva-texto h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 2.6rem;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin: 0 0 22px;
}
.diapositiva-texto p { font-size: 1.3rem; font-weight: 500; line-height: 1.7; max-width: 620px; margin-bottom: 22px; }
.lista-caracteristicas { list-style: none; padding: 0; margin: 0; max-width: 620px; }
.lista-caracteristicas li {
  position: relative;
  padding: 10px 0 10px 32px;
  border-bottom: 1px solid var(--gris-borde);
  font-size: 1.15rem;
  font-weight: 700;
}
.lista-caracteristicas li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 9px;
  color: var(--dorado-oscuro);
  font-weight: 800;
}
.diapositiva-foto--contener { border: 1.5px solid var(--gris-borde); }

@media (max-width: 800px) {
  .beneficios-producto { grid-template-columns: 1fr 1fr; padding: 0 16px; margin-top: 40px; gap: 10px; }
  .beneficio { padding: 14px; }
  .beneficio strong { font-size: 0.9rem; }
  .beneficio span { font-size: 0.82rem; }
  .diapositiva { padding: 28px 16px; gap: 24px; }
  .diapositiva-foto { max-width: none; width: 100%; aspect-ratio: 4 / 5; }
  .diapositiva-foto--contener { aspect-ratio: auto; }
  .diapositiva-foto--contener img { padding: 12px; height: auto; object-fit: contain; }
  .diapositiva-texto { padding: 0; }
  .diapositiva-texto h2 { font-size: 1.9rem; margin-bottom: 14px; }
  .diapositiva-texto p { font-size: 1.1rem; margin-bottom: 14px; }
  .lista-caracteristicas li { font-size: 1.02rem; }
}

/* Calificacion promedio debajo del titulo de la ficha */
.rating-producto { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; font-size: 0.9rem; }
.rating-producto:empty { display: none; }
.rating-numero { font-weight: 700; color: var(--gris-oscuro); }

/* Boton de comprar flotante: aparece al bajar y sigue al cliente */
.btn-comprar-flotante {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 60;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.btn-comprar-flotante.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (min-width: 900px) {
  .btn-comprar-flotante { left: auto; right: 32px; width: 300px; }
}
.beneficio-emoji { font-size: 1.6rem; line-height: 1; margin-bottom: 4px; }
.beneficio { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.beneficio-texto { display: flex; flex-direction: column; gap: 4px; }
.beneficio-emoji { font-size: 2.6rem; line-height: 1; flex-shrink: 0; }
@media (max-width: 800px) { .beneficio-emoji { font-size: 1.9rem; } }