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

/* Paleta OYRA: tomada del logo (serif marron/taupe sobre fondo crema). Los nombres de las
   variables (--negro, --acento, etc.) se conservan desde la version anterior de la plantilla
   para no tener que tocar cada regla, pero los valores son los de la marca OYRA. */
:root {
  --negro: #2b2420;
  --blanco: #fbf5ee;
  --gris-fondo: #f1e4d6;
  --gris-borde: #e4d2be;
  --gris: #9c8975;
  --gris-oscuro: #4a3c30;
  --exito: #5c7a5e;
  --peligro: #b0443e;
  --acento: #ad8868;
  --acento-oscuro: #8a6749;
  --fuente-titulos: 'Cormorant Garamond', 'Times New Roman', serif;
  --radio: 4px;
}

* { 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: 'Poppins', 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; }

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

a { color: inherit; }

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

/* --- Logo --- */
/* Wordmark en texto (no imagen): asi se ve nitido a cualquier tamano y hereda
   el color del contenedor sin necesitar variantes de archivo por fondo. */
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.logo-texto {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: 4px;
  color: var(--acento-oscuro);
  transition: font-size 0.25s ease;
}
.site-header.compacto .logo-texto { font-size: 1.3rem; }
.logo.logo-grande .logo-texto,
.logo-texto.logo-texto-grande { font-size: 2.2rem; }

/* El logo se ve claro sobre el footer (fondo oscuro). */
.site-footer .logo-texto { color: var(--acento); }

/* --- 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; }
.barra-anuncio-texto { display: inline-block; transition: opacity 0.3s ease; }
.barra-anuncio-texto.cambiando { opacity: 0; }

/* --- Temporizador de liquidacion --- */
.promo-timer { display: none; background: var(--peligro); color: var(--blanco); text-align: center; padding: 14px 20px; }
.promo-timer.visible { display: block; }
.promo-timer-contenido { max-width: 900px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
.promo-timer-titulo { font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.2px; }
.promo-timer-cuenta { display: flex; gap: 8px; }
.promo-timer-bloque { background: rgba(0, 0, 0, 0.22); border-radius: var(--radio); padding: 5px 10px; min-width: 44px; text-align: center; }
.promo-timer-bloque span { display: block; font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.15rem; line-height: 1; }
.promo-timer-bloque small { display: block; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.85; }
@media (max-width: 640px) {
  .promo-timer-titulo { font-size: 0.88rem; width: 100%; }
  .promo-timer-bloque { min-width: 38px; padding: 4px 8px; }
  .promo-timer-bloque span { font-size: 1rem; }
}

.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;
}
.site-header.compacto .contenedor { padding-top: 8px; padding-bottom: 8px; }
.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(--acento-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(--acento);
  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(--acento);
  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(--acento); color: var(--negro); border-color: var(--acento); }
.btn-primario:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }
.btn-outline { background: transparent; color: var(--negro); border-color: var(--negro); }
.btn-outline:hover { background: var(--negro); color: var(--acento); }
.btn-invertido { background: var(--acento); color: var(--negro); border-color: var(--acento); }
.btn-invertido:hover { background: var(--acento-oscuro); border-color: var(--acento-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 --- */
.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;
}
.portada-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center 20%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease;
  z-index: 2;
}
.portada-slide.activa { opacity: 1; visibility: visible; }
/* 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; }

.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(--acento); 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(--acento); }
.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(--acento);
}
.portada-texto h1 {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-style: italic;
  font-size: 3.4rem;
  line-height: 1.08;
  letter-spacing: 0.2px;
  margin: 14px 0 16px;
}
.portada-texto p { color: #f1e9e0; font-size: 1.02rem; line-height: 1.6; margin-bottom: 28px; max-width: 460px; }

/* --- Secciones genericas --- */
.seccion { padding: 64px 0; }
.seccion-titulo {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 2.1rem;
  letter-spacing: 0.2px;
  margin-bottom: 28px;
}
.seccion-titulo .acento { color: var(--acento-oscuro); }

/* --- Grid de productos --- */
.grid-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2px;
  background: var(--gris-borde);
  border: 1px solid var(--gris-borde);
}
/* "Nuestros destacados" del inicio: siempre 4 columnas fijas (8 productos = 2 filas de 4),
   a diferencia del catalogo completo que va ajustando columnas segun el ancho disponible. */
#grid-destacados { grid-template-columns: repeat(4, 1fr); }
.tarjeta-producto {
  background: var(--blanco);
  text-decoration: none;
  color: var(--negro);
  display: flex;
  flex-direction: column;
}
.tarjeta-producto .foto {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--gris-fondo);
}
.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(--acento); }
.tarjeta-producto .foto-flecha-izq { left: 2px; }
.tarjeta-producto .foto-flecha-der { right: 2px; }
.tarjeta-producto .info { padding: 18px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.tarjeta-producto .categoria { font-size: 0.68rem; text-transform: uppercase; color: var(--gris); letter-spacing: 0.8px; font-weight: 600; }
.tarjeta-producto .nombre { font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
.tarjeta-producto .precios { margin-top: auto; display: flex; align-items: baseline; gap: 8px; padding-top: 10px; }
.precio { font-weight: 800; font-size: 1.02rem; }
.precio-tachado { text-decoration: line-through; color: var(--gris); font-size: 0.82rem; }

/* Swatches de color en la tarjeta de producto: dejan cambiar la foto principal (a la del
   color elegido) sin entrar a la ficha del producto. */
.swatch-nombre-actual { font-size: 0.72rem; color: var(--gris); font-weight: 600; }
.swatches-color { display: flex; gap: 7px; flex-wrap: wrap; padding-top: 4px; }
.swatch-color {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--gris-borde);
  background-size: cover;
  background-position: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.swatch-color:hover { border-color: var(--acento-oscuro); }
.swatch-color.seleccionado { border-color: var(--acento-oscuro); box-shadow: 0 0 0 1.5px var(--acento-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(--acento); 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;
}
@media (max-width: 800px) { .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: zoom-out; transform: scale(2.2); }
.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: var(--fuente-titulos); font-weight: 600; font-size: 2.2rem; 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; }
.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(--acento); color: var(--negro); border-color: var(--acento); }
.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); }

/* --- Reseñas --- */
.resenas-resumen { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.resenas-resumen .promedio { font-family: var(--fuente-titulos); font-weight: 600; font-size: 2.6rem; }
.estrellas { color: var(--acento); 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(--acento); }
.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(--acento);
  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(--acento-oscuro); }
.metodo-pago.seleccionado {
  border-color: var(--acento-oscuro);
  background: #fbf1dd;
  box-shadow: 0 0 0 2px var(--acento-oscuro);
}
.metodo-pago.seleccionado strong { color: var(--acento-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(--acento-oscuro); width: 19px; height: 19px; margin-top: 2px; flex-shrink: 0; }

/* --- Agenda de visita (OYRA BAG) --- */
.chip-fecha, .chip-franja {
  border: 2px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 10px 16px;
  background: var(--blanco);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.chip-fecha:hover, .chip-franja:not(.ocupada):hover { border-color: var(--acento-oscuro); }
/* Seleccionado = relleno solido, no solo un borde: se tiene que notar de un vistazo cual
   dia/hora quedo elegido. */
.chip-fecha.seleccionada, .chip-franja.seleccionada {
  background: var(--acento-oscuro);
  border-color: var(--acento-oscuro);
  color: var(--blanco);
  box-shadow: 0 0 0 2px var(--acento-oscuro);
}
.chip-franja.ocupada { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }
.chip-franja small { display: block; text-decoration: none; font-weight: 600; color: var(--peligro); text-transform: uppercase; letter-spacing: 0.4px; font-size: 0.7rem; margin-top: 3px; }
.chip-franja.seleccionada small { color: var(--blanco); }
.chips-franja { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }

/* Franja de fechas: barra horizontal deslizable (carrusel), distinta a la cuadricula de
   horas de abajo, con flechas a los lados para desplazarse sin depender del scroll tactil. */
.franja-fecha-wrap { display: flex; align-items: center; gap: 8px; background: var(--gris-fondo); border-radius: 999px; padding: 8px; }
.chips-fecha {
  display: flex;
  flex: 1 1 0%;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 2px;
}
.chips-fecha::-webkit-scrollbar { display: none; }
.chip-fecha {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--blanco);
}
.franja-flecha {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--blanco);
  color: var(--negro);
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.franja-flecha:hover { background: var(--acento-oscuro); color: var(--blanco); }
.franja-flecha:disabled { opacity: 0.35; cursor: not-allowed; background: var(--blanco); color: var(--negro); }

.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(--acento);
  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 --- */
.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(--acento); }
.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(--acento); }
.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(--acento); }

/* --- 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 20px rgba(43, 36, 32, 0.08);
  }
  .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); margin: 0 -24px; border-left: none; border-right: none; }
  #grid-destacados { 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; }
}