* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* COMPENSAR EL NAV STICKY AL NAVEGAR POR ANCLAS */
section[id] {
  scroll-margin-top: 141px;
}

@media (max-width: 768px) {
  section[id] {
    scroll-margin-top: 86px;
  }
}

body {
  font-family: 'Poppins', sans-serif;
  color: #333;
  background: #fbfaf8;
}

/* NAVEGACIÓN */
nav {
  background-color: rgba(255,255,255,0.96);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 25px;
  box-shadow: 0 2px 16px rgba(30,24,27,0.08);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 125px;
  width: 125px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(182, 43, 93, 0.25);
}

.nav-links a {
  color: #333;
  text-decoration: none;
  margin-left: 16px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.nav-links a:not(.boton-nav-login):not(.favoritos-nav):not(.carrito):not(.menu-opcion) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.nav-icono {
  color: #8f2049;
  font-size: 17px;
  line-height: 1;
  filter: drop-shadow(0 2px 0 rgba(255, 218, 228, 0.85));
  transition: color 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}

.nav-links a:hover .nav-icono {
  color: #d33573;
  filter: drop-shadow(0 0 8px rgba(217, 47, 117, 0.34));
  transform: translateY(-1px);
}

.boton-nav-login i,
.favoritos-nav i,
.carrito i,
#modo-oscuro i,
.hamburguesa i {
  filter: drop-shadow(0 2px 0 rgba(255, 218, 228, 0.72));
}

.nav-links a:hover {
  color: #b62b5d;
}

.boton-nav-login {
  background-color: #b62b5d;
  color: white !important;
  padding: 8px 20px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.boton-nav-login:hover {
  background-color: #8f2049 !important;
  transform: scale(1.05);
}

.favoritos-nav {
  font-size: 18px;
  color: #b62b5d !important;
  font-weight: bold;
}

#contador-favoritos {
  background-color: #b62b5d;
  color: white;
  border-radius: 50%;
  padding: 2px 7px;
  font-size: 12px;
}

.carrito {
  font-size: 18px;
  color: #b62b5d !important;
  font-weight: bold;
}

#contador {
  background-color: #b62b5d;
  color: white;
  border-radius: 50%;
  padding: 2px 7px;
  font-size: 12px;
}

#modo-oscuro {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  margin-left: 10px;
  color: #b62b5d;
  padding: 7px 9px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

#modo-oscuro:hover {
  background: #f7edf1;
}

.mobile-nav-actions {
  display: none;
}

/* HERO CARRUSEL */
.hero-carrusel {
  position: relative;
  height: 550px;
  overflow: hidden;
}

.diapositiva {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.diapositiva.activa {
  opacity: 1;
}

.hero-contenido h1 {
  color: white;
  font-size: 55px;
  margin-bottom: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: 0 2px 20px rgba(0,0,0,0.15);
}

.hero-contenido p {
  color: white;
  font-size: 20px;
  margin-bottom: 30px;
}

.boton-hero {
  background-color: white;
  color: #b62b5d;
  padding: 15px 40px;
  text-decoration: none;
  border-radius: 30px;
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
  transition: all 0.3s ease;
}

.boton-hero:hover {
  background-color: #b62b5d;
  color: white;
  transform: scale(1.05);
}

.flecha-hero {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255,255,255,0.3);
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.flecha-hero:hover {
  background-color: rgba(255,255,255,0.6);
}

.flecha-hero.izquierda { left: 20px; }
.flecha-hero.derecha { right: 20px; }

.puntos-hero {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.punto-hero {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.punto-hero.activo {
  background-color: white;
  transform: scale(1.2);
}

/* BANNER INFO */
.banner-info {
  background-color: #2f2a2c;
  color: white;
  display: flex;
  justify-content: center;
  gap: 50px;
  padding: 15px;
  font-size: 14px;
  flex-wrap: wrap;
}

/* SECCIONES */
.seccion-blanca {
  padding: 60px 30px;
  text-align: center;
  background-color: white;
}

.seccion-rosada {
  padding: 60px 30px;
  text-align: center;
  background-color: #f8f3ef;
}

.contenedor {
  max-width: 1100px;
  margin: 0 auto;
}

h2 {
  color: #b62b5d;
  font-size: 35px;
  margin-bottom: 20px;
  font-weight: 700;
  letter-spacing: 0;
}

.seccion-blanca p, .seccion-rosada p {
  font-size: 16px;
  color: #555;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

/* CATEGORÍAS */
.categorias-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 700px;
  margin: 30px auto 0;
}

.categoria {
  flex: 0 0 160px;
  background-color: white;
  border-radius: 12px;
  padding: 25px 30px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(40,32,35,0.07);
  transition: all 0.3s ease;
}

.categoria:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(182,43,93,0.2);
}

.categoria-icono {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #d9a4b8, #b62b5d);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: white;
  font-size: 26px;
  box-shadow: 0 6px 18px rgba(182,43,93,0.3);
  transition: all 0.3s ease;
}

.categoria:hover .categoria-icono {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(182,43,93,0.45);
}

.categoria h3 {
  color: #b62b5d;
  font-size: 15px;
}

.categoria-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 14px;
  border: 3px solid #d98aa8;
  box-shadow: 0 6px 18px rgba(182,43,93,0.3);
  transition: all 0.3s ease;
}

.categoria-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.categoria:hover .categoria-img {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(182,43,93,0.45);
  border-color: #b62b5d;
}

/* PRODUCTOS */
.productos-grid {
  display: flex;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.producto {
  background-color: white;
  border-radius: 10px;
  width: 280px;
  box-shadow: 0 6px 18px rgba(40,32,35,0.08);
  overflow: hidden;
  border: 1px solid #eee7e2;
  transition: all 0.3s ease;
  position: relative;
}

.producto:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(182,43,93,0.2);
}

.producto-imagen {
  background-color: #f5f0eb;
  font-size: 70px;
  text-align: center;
  padding: 30px;
}

.producto-info {
  padding: 20px;
  text-align: left;
}

.producto-info h3 {
  font-size: 18px;
  margin-bottom: 5px;
}

.producto-info p {
  color: #777;
  font-size: 14px;
  margin-bottom: 10px;
}

.precio {
  color: #b62b5d;
  font-weight: bold;
  font-size: 20px;
  display: block;
  margin-bottom: 10px;
}

.boton-comprar {
  background-color: #b62b5d;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  display: inline-block;
  transition: all 0.3s ease;
}

.boton-comprar:hover {
  background-color: #8f2049;
  transform: scale(1.05);
}

.boton-favorito {
  background: white;
  border: none;
  font-size: 20px;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 1;
}

.boton-favorito:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(182,43,93,0.3);
}

/* RESEÑAS */
.resenas-section {
  padding-top: 44px;
  padding-bottom: 46px;
}

.resenas-contenedor {
  max-width: 1060px;
}

.resenas-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  text-align: left;
}

.resenas-eyebrow {
  color: #8f2049;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.resenas-header h2 {
  color: #2f2a2c;
  font-size: 30px;
  line-height: 1.15;
  margin: 4px 0 0;
}

.resenas-resumen {
  min-width: 150px;
  text-align: right;
  color: #5f5559;
  font-size: 13px;
}

.resenas-resumen strong {
  display: block;
  color: #2f2a2c;
  font-size: 28px;
  line-height: 1;
}

.resenas-resumen i,
.resena-card-estrellas i {
  color: #d8a21b;
}

.resenas-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: stretch;
}

.resenas-lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.resena-card {
  background: #fff;
  border: 1px solid #eee7e2;
  border-radius: 10px;
  padding: 18px;
  min-height: 174px;
  text-align: left;
  box-shadow: 0 10px 28px rgba(40,32,35,0.06);
}

.resena-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.resena-card-persona {
  display: flex;
  align-items: center;
  gap: 9px;
}

.resena-avatar {
  width: 34px;
  height: 34px;
  background: #f6e8ee;
  color: #9f2452;
  border: 1px solid #ead5de;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
}

.resena-card-nombre {
  color: #2f2a2c;
  display: block;
  font-size: 13px;
  font-weight: 700;
}

.resena-card-verificada {
  color: #8b7d82;
  display: block;
  font-size: 11px;
}

.resena-card-estrellas {
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 1px;
}

.resena-card p {
  color: #5f5559;
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.resena-formulario {
  background: #fff;
  border: 1px solid #eee7e2;
  border-radius: 10px;
  padding: 18px;
  text-align: left;
  box-shadow: 0 10px 28px rgba(40,32,35,0.06);
}

.resena-formulario h3 {
  color: #2f2a2c;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.3;
}

.form-resena-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.resena-formulario input,
.resena-formulario textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #ddd5d0;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  margin-bottom: 8px;
  transition: all 0.2s ease;
  font-family: 'Poppins', sans-serif;
  background: #fff;
}

.resena-formulario input:focus,
.resena-formulario textarea:focus {
  border-color: #b62b5d;
  box-shadow: 0 0 0 3px rgba(182,43,93,0.12);
}

.resena-formulario textarea {
  height: 68px;
  resize: none;
}

.estrellas-selector {
  display: flex;
  gap: 1px;
  margin-bottom: 8px;
}

.estrellas-selector span {
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  color: #ddd5d0;
  transition: all 0.2s ease;
}

.estrellas-selector span.activa,
.estrellas-selector span:hover {
  color: #d8a21b;
}

.resena-formulario button {
  width: 100%;
  padding: 10px 12px;
  background-color: #2f2a2c;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.resena-formulario button:hover {
  background-color: #b62b5d;
}

/* BANNER PROMO */
.banner-promo {
  background: linear-gradient(135deg, #b62b5d, #d98aa8);
  text-align: center;
  padding: 60px 30px;
  color: white;
}

.banner-promo h2 {
  color: white;
  font-size: 40px;
  margin-bottom: 10px;
}

.banner-promo p {
  font-size: 18px;
  margin-bottom: 25px;
  color: white;
}

/* INSTAGRAM */
.seccion-instagram {
  background-color: #fff;
  padding: 60px 30px;
}

.instagram-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 35px;
}

.instagram-header h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 2px;
}

.instagram-header p {
  color: #b62b5d;
  font-weight: 500;
  font-size: 16px;
}

.instagram-icono-grande {
  font-size: 45px;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  max-width: 700px;
  margin: 0 auto;
}

.instagram-foto {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  display: block;
}

.instagram-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.instagram-foto:hover img {
  transform: scale(1.08);
}

.instagram-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.instagram-overlay i {
  color: white;
  font-size: 28px;
}

.instagram-foto:hover .instagram-overlay {
  opacity: 1;
}

.boton-instagram-feed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 30px;
  border: 2px solid #b62b5d;
  color: #b62b5d;
  border-radius: 30px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.boton-instagram-feed:hover {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: white;
  border-color: transparent;
  transform: translateY(-2px);
}

/* CONTACTO */
.contacto-grid {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.contacto-item {
  background-color: #f7edf1;
  border-radius: 15px;
  padding: 30px;
  width: 220px;
  text-align: center;
  transition: all 0.3s ease;
}

.contacto-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(182,43,93,0.2);
}

.contacto-icono {
  width: 65px;
  height: 65px;
  background: linear-gradient(135deg, #d98aa8, #b62b5d);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  margin: 0 auto 14px;
  box-shadow: 0 5px 16px rgba(182,43,93,0.28);
}

.contacto-item h3 {
  color: #b62b5d;
  margin-bottom: 8px;
}

.contacto-item p {
  color: #555;
  font-size: 14px;
  margin-bottom: 6px;
}

.contacto-sub {
  font-size: 12px !important;
  color: #999 !important;
  margin-bottom: 14px !important;
}

.boton-whatsapp {
  background-color: #25d366;
  color: white;
  padding: 10px 22px;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  transition: all 0.3s ease;
}

.boton-whatsapp:hover {
  background-color: #1da851;
  transform: scale(1.05);
}

.boton-instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: white;
  padding: 10px 22px;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  transition: all 0.3s ease;
}

.boton-instagram:hover {
  opacity: 0.88;
  transform: scale(1.05);
}

.contacto-icono-ig {
  background: linear-gradient(135deg, #f09433, #dc2743, #bc1888) !important;
}

.contacto-icono-hora {
  background: linear-gradient(135deg, #a78bfa, #b62b5d) !important;
}

.badge-disponible {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e8faf0;
  color: #1da851;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 20px;
  margin-top: 4px;
}

.badge-disponible i {
  font-size: 9px;
  animation: parpadeo 1.5s infinite;
}

@keyframes parpadeo {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* FOOTER */
footer {
  background-color: #2a2527;
  color: white;
  border-top: 4px solid #b62b5d;
}

.footer-contenido {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 40px;
  gap: 30px;
}

.footer-logo {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
  border: 2px solid #d98aa8;
  display: block;
}

.footer-columna h3 {
  color: #d98aa8;
  margin-bottom: 15px;
  font-size: 18px;
}

.footer-columna p {
  color: #aaa;
  font-size: 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-info-icono {
  font-size: 15px;
  flex-shrink: 0;
}
.footer-info-icono.wsp { color: #25d366; }
.footer-info-icono.ig  { color: #e1306c; }
.footer-info-icono.reloj { color: #d98aa8; }
.footer-info-icono.loc { color: #b62b5d; }

.footer-columna a {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #aaa;
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

.footer-columna a i {
  font-size: 11px;
  color: #b62b5d;
  transition: transform 0.3s ease;
}

.footer-columna a:hover {
  color: #d98aa8;
  padding-left: 4px;
}

.footer-redes {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.footer-red {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(217,138,168,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-decoration: none;
  transition: all 0.3s ease;
  color: #aaa;
}

.footer-red:hover {
  transform: translateY(-3px);
  color: white;
}

.footer-red i {
  color: inherit;
  font-size: 18px;
}

.footer-red-wsp:hover { background: #25d366; border-color: #25d366; }
.footer-red-ig:hover  { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color: transparent; }

.footer-bottom {
  background-color: #1a1a1a;
  text-align: center;
  padding: 18px;
  color: #888;
  font-size: 13px;
  border-top: 1px solid #333;
}

/* CARRITO */
.carrito-panel {
  position: fixed;
  top: 0;
  right: -100vw;
  width: min(390px, 100vw);
  height: 100%;
  background-color: white;
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  z-index: 1000;
  transition: all 0.3s ease;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.carrito-panel.abierto {
  right: 0;
}

.carrito-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 2px solid #f7edf1;
  padding-bottom: 15px;
}

.carrito-header h3 {
  color: #b62b5d;
  font-size: 20px;
}

.carrito-header button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #aaa;
}

.carrito-header button:hover {
  color: #b62b5d;
}

#carrito-items {
  flex: 1;
  overflow-y: auto;
}

.carrito-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  gap: 10px;
}

.carrito-icono {
  font-size: 17px;
  color: #b62b5d;
  min-width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carrito-item-info {
  flex: 1;
  padding: 0 10px;
}

.carrito-item-info p {
  font-size: 13px;
  margin-bottom: 5px;
  color: #333;
}

.carrito-cantidad {
  display: flex;
  align-items: center;
  gap: 8px;
}

.carrito-cantidad button {
  background-color: #b62b5d;
  color: white;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carrito-cantidad span {
  font-weight: bold;
  font-size: 14px;
}

.carrito-item-derecha {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.eliminar-item {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.eliminar-item:hover {
  opacity: 1;
  transform: scale(1.2);
}

.vaciar-btn {
  background: none;
  border: none;
  color: #aaa;
  font-size: 13px;
  cursor: pointer;
  margin-right: 10px;
  transition: all 0.3s ease;
}

.vaciar-btn:hover {
  color: #b62b5d;
}

.carrito-total {
  border-top: 2px solid #f7edf1;
  padding-top: 15px;
  text-align: center;
}

.carrito-total p {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.carrito-total span {
  color: #b62b5d;
}

#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  z-index: 999;
}

/* FAVORITOS */
.favoritos-panel {
  position: fixed;
  top: 0;
  right: -100vw;
  width: min(390px, 100vw);
  height: 100%;
  background-color: white;
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  z-index: 1000;
  transition: all 0.3s ease;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.favoritos-panel.abierto {
  right: 0;
}

.favorito-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.favorito-icono {
  font-size: 20px;
  color: #b62b5d;
  min-width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.favorito-info {
  flex: 1;
}

.favorito-info p {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.favorito-info span {
  font-size: 13px;
  color: #b62b5d;
  font-weight: bold;
}

#overlay-favoritos {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  z-index: 999;
}

/* BOTÓN SUBIR */
#boton-subir {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #b62b5d;
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  z-index: 999;
}

#boton-subir:hover {
  background-color: #8f2049;
  transform: scale(1.1);
}

/* NOTIFICACIÓN */
#notificacion {
  position: fixed;
  bottom: 90px;
  right: 30px;
  background-color: #b62b5d;
  color: white;
  padding: 15px 25px;
  border-radius: 10px;
  font-size: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  display: none;
  z-index: 999;
  animation: aparecer 0.3s ease;
}

body #notificacion {
  display: none !important;
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* MODO OSCURO */
body.oscuro {
  background-color: #1a1a1a;
  color: #f0f0f0;
}

body.oscuro nav {
  background-color: #2c2c2c;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

body.oscuro .nav-logo {
  color: #d98aa8;
}

body.oscuro .nav-links a {
  color: #f0f0f0;
}

body.oscuro .seccion-blanca {
  background-color: #2c2c2c;
}

body.oscuro .seccion-rosada {
  background-color: #1a1a1a;
}

body.oscuro .categoria {
  background-color: #3a3a3a;
}

body.oscuro .producto {
  background-color: #3a3a3a;
  border-color: #444;
}

body.oscuro .producto-info h3 {
  color: #f0f0f0;
}

body.oscuro .producto-info p {
  color: #aaa;
}

body.oscuro .banner-info {
  background-color: #4a0f2e;
}

body.oscuro .seccion-instagram {
  background-color: #2c2c2c;
}

body.oscuro .instagram-header h2 {
  color: #f0f0f0;
}

body.oscuro .contacto-item {
  background-color: #3a3a3a;
}

body.oscuro .contacto-item p {
  color: #aaa;
}

body.oscuro .carrito-panel {
  background-color: #2c2c2c;
  color: #f0f0f0;
}

body.oscuro .favoritos-panel {
  background-color: #2c2c2c;
  color: #f0f0f0;
}

body.oscuro .resena-card {
  background-color: #3a3a3a;
}

body.oscuro .resena-formulario {
  background-color: #3a3a3a;
}

body.oscuro .resena-formulario input,
body.oscuro .resena-formulario textarea {
  background-color: #2c2c2c;
  border-color: #555;
  color: #f0f0f0;
}

/* BOTÓN FLOTANTE WHATSAPP */
.boton-flotante-wsp {
  position: fixed;
  bottom: 90px;
  left: 30px;
  background-color: #25d366;
  color: white;
  text-decoration: none;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  box-shadow: 0 4px 15px rgba(37,211,102,0.4);
  transition: all 0.3s ease;
  z-index: 999;
}

.boton-flotante-wsp:hover {
  background-color: #1da851;
  transform: scale(1.05);
  color: white;
}

.wsp-icono {
  font-size: 22px;
  line-height: 1;
}

.wsp-texto {
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
}

/* MENÚ HAMBURGUESA */
.hamburguesa {
  display: none;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #b62b5d;
  padding: 7px 9px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.hamburguesa:hover {
  background: #f7edf1;
}

@media (max-width: 768px) {
  /* NAV */
  .hamburguesa { display: block; }
  nav { padding: 8px 15px; }
  .logo-img { height: 70px; width: 70px; }
  .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: white;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    gap: 10px;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .nav-links.abierto {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: all;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .nav-links a {
    margin-left: 0;
    font-size: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
  }
  .boton-nav-login { text-align: center; padding: 12px !important; }
  .menu-usuario {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  }

  /* HERO */
  .hero-carrusel { height: 380px; }
  .hero-contenido h1 { font-size: 24px; padding: 0 20px; }
  .hero-contenido p { font-size: 14px; padding: 0 20px; }
  .boton-hero { padding: 12px 28px; font-size: 15px; }
  .flecha-hero { width: 36px; height: 36px; font-size: 15px; }
  .flecha-hero.izquierda { left: 8px; }
  .flecha-hero.derecha { right: 8px; }

  /* BANNER INFO */
  .banner-info { flex-direction: column; gap: 8px; text-align: center; padding: 15px 20px; font-size: 13px; }

  /* SECCIONES */
  .seccion-blanca, .seccion-rosada { padding: 35px 15px; }
  h2 { font-size: 24px; }

  /* CATEGORÍAS */
  .categorias-grid { gap: 12px; }
  .categoria { flex: 0 0 130px; padding: 18px 15px; }
  .categoria-icono { width: 52px; height: 52px; font-size: 20px; }
  .categoria h3 { font-size: 13px; }

  /* ESTADÍSTICAS */
  .stats-section { gap: 30px; padding: 35px 20px; }
  .stat-numero { font-size: 38px; }
  .stat-sufijo { font-size: 22px; }

  /* MODAL */
  .modal-contenido { flex-direction: column; padding: 25px 20px; gap: 20px; }
  .modal-imagen { flex: none; }
  .modal-imagen img, .modal-img-placeholder { height: 230px; }
  .modal-boton-agregar { margin-top: 16px; }

  /* PRODUCTOS */
  .productos-grid { gap: 15px; }
  .producto { width: 100%; max-width: 350px; }

  /* RESEÑAS */
  .resenas-section { padding: 32px 0 34px; }
  .resenas-header { align-items: flex-start; margin-bottom: 14px; }
  .resenas-header h2 { font-size: 23px; }
  .resenas-resumen { min-width: auto; font-size: 12px; }
  .resenas-resumen strong { font-size: 23px; }
  .resenas-layout { display: block; }
  .resenas-lista {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 2px 2px 12px;
    margin: 0 -2px 8px;
  }
  .resenas-lista::-webkit-scrollbar { display: none; }
  .resena-card {
    flex: 0 0 82%;
    min-height: 152px;
    padding: 15px;
    scroll-snap-align: start;
  }
  .resena-card-top { align-items: flex-start; }
  .resena-card-estrellas { font-size: 11px; }
  .resena-formulario { padding: 15px; }
  .form-resena-grid { grid-template-columns: 1fr; gap: 0; }

  /* BANNER PROMO */
  .banner-promo { padding: 35px 20px; }
  .banner-promo h2 { font-size: 26px; }
  .banner-promo p { font-size: 15px; }

  /* INSTAGRAM */
  .seccion-instagram { padding: 35px 15px; }
  .instagram-header h2 { font-size: 22px; }
  .instagram-icono-grande { font-size: 35px; }
  .instagram-grid { gap: 3px; }
  .instagram-overlay i { font-size: 20px; }

  /* CONTACTO */
  .contacto-grid { gap: 15px; }
  .contacto-item { width: 100%; }

  /* FOOTER */
  .footer-contenido { flex-direction: column; text-align: center; padding: 30px 20px; gap: 20px; }

  /* CARRITO Y FAVORITOS */
  .carrito-panel, .favoritos-panel { width: 100%; right: -100%; }

  /* BOTONES FLOTANTES */
  .boton-flotante-wsp { bottom: 20px; left: 15px; padding: 10px 14px; }
  .wsp-texto { display: none; }
  #boton-subir { bottom: 20px; right: 15px; width: 42px; height: 42px; font-size: 18px; }
  #notificacion { bottom: 70px; right: 15px; font-size: 13px; padding: 12px 18px; }

  /* FILTROS Y BUSCADOR */
  .filtros { gap: 6px; }
  .filtro { padding: 6px 14px; font-size: 13px; }
  .buscador-contenedor { max-width: 100%; }
}

/* BUSCADOR */
.buscador-contenedor {
  margin: 20px auto;
  max-width: 420px;
}

.buscador-wrapper {
  position: relative;
}

.buscador-icono {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #bbb;
  font-size: 14px;
  pointer-events: none;
}

.buscador-contenedor input {
  width: 100%;
  padding: 13px 20px 13px 45px;
  border: 2px solid #f0f0f0;
  border-radius: 30px;
  font-size: 15px;
  outline: none;
  transition: all 0.3s ease;
  font-family: 'Poppins', sans-serif;
}

.buscador-contenedor input:focus {
  border-color: #b62b5d;
  box-shadow: 0 0 0 3px rgba(182,43,93,0.15);
}

.producto.oculto {
  display: none;
}

.sin-resultados {
  text-align: center;
  color: #aaa;
  font-size: 16px;
  padding: 30px;
  display: none;
  width: 100%;
}

/* FILTROS */
.filtros {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.filtro {
  background-color: white;
  color: #b62b5d;
  border: 2px solid #b62b5d;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Poppins', sans-serif;
}

.filtro:hover {
  background-color: #b62b5d;
  color: white;
  transform: scale(1.05);
}

.filtro.activo {
  background-color: #b62b5d;
  color: white;
}

/* MENÚ USUARIO */
.menu-usuario {
  position: absolute;
  top: 60px;
  right: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  padding: 15px;
  min-width: 220px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.97);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.menu-usuario.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.menu-usuario-nombre {
  font-weight: bold;
  font-size: 16px;
  color: #333;
  padding: 5px 10px;
}

.menu-usuario-correo {
  font-size: 13px;
  color: #888;
  padding: 0 10px 10px;
}

.menu-separador {
  border: none;
  border-top: 1px solid #eee;
  margin: 8px 0;
}

.menu-opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  transition: background 0.2s;
}

.menu-opcion i {
  width: 16px;
  color: #b62b5d;
  font-size: 14px;
}

.menu-opcion:hover {
  background: #f5f5f5;
}

.cerrar-sesion {
  color: #e74c3c !important;
}

.cerrar-sesion i {
  color: #e74c3c !important;
}

.cerrar-sesion:hover {
  background: #fff0f0 !important;
}

/* QUITAR BORDE AL HACER CLIC EN BOTONES */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ANIMACIONES DE ENTRADA AL HACER SCROLL */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* MODO OSCURO - MENÚ NAV MÓVIL */
@media (max-width: 768px) {
  body.oscuro .nav-links {
    background-color: #2c2c2c;
  }
  body.oscuro .nav-links a {
    border-bottom-color: #444;
  }
}

/* MODO OSCURO - MENÚ USUARIO */
body.oscuro .menu-usuario {
  background: #2c2c2c;
}
body.oscuro .menu-usuario-nombre {
  color: #f0f0f0;
}
body.oscuro .menu-opcion {
  color: #f0f0f0;
}
body.oscuro .menu-opcion:hover {
  background: #3a3a3a;
}
body.oscuro .menu-separador {
  border-color: #444;
}

body.oscuro .contacto-sub {
  color: #777 !important;
}

/* ESTADÍSTICAS */
.stats-section {
  background: linear-gradient(135deg, #b62b5d, #d98aa8);
  display: flex;
  justify-content: center;
  gap: 60px;
  padding: 55px 40px;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
  color: white;
}

.stat-numero-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  line-height: 1;
  margin-bottom: 8px;
}

.stat-numero {
  font-size: 52px;
  font-weight: 700;
}

.stat-sufijo {
  font-size: 30px;
  font-weight: 700;
}

.stat-label {
  font-size: 14px;
  opacity: 0.9;
  display: block;
}

/* SELECTOR DE TALLAS EN TARJETAS */
.tallas-selector {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}

.talla-btn {
  border: 2px solid #ddd;
  background: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  color: #555;
  font-family: 'Poppins', sans-serif;
}

.talla-btn:hover {
  border-color: #b62b5d;
  color: #b62b5d;
}

.talla-btn.activa {
  background: #b62b5d;
  border-color: #b62b5d;
  color: white;
}

/* MODAL PRODUCTO */
.modal-producto {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  padding: 20px;
}

.modal-producto.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

.modal-contenido {
  background: linear-gradient(145deg, #fffafc 0%, #ffffff 46%, #f8eef3 100%);
  border: 1px solid rgba(182, 43, 93, 0.12);
  border-radius: 24px;
  max-width: 920px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  gap: 34px;
  padding: 26px;
  position: relative;
  transform: scale(0.92);
  transition: transform 0.3s ease;
  box-shadow: 0 28px 80px rgba(47, 42, 44, 0.28);
}

.modal-producto.visible .modal-contenido {
  transform: scale(1);
}

.modal-cerrar {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  color: #6f5d64;
  z-index: 10;
  box-shadow: 0 10px 30px rgba(47, 42, 44, 0.14);
  backdrop-filter: blur(10px);
}

.modal-cerrar:hover {
  background: #f7edf1;
  color: #b62b5d;
}

.modal-imagen {
  flex: 0 0 380px;
  align-self: flex-start;
  background: #211a1d;
  border-radius: 18px;
  padding: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 42px rgba(47, 42, 44, 0.16);
}

.modal-imagen img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  border-radius: 13px;
  background: #f5edf0;
}

.modal-galeria {
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.modal-miniatura {
  border: 2px solid rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.92);
  border-radius: 12px;
  padding: 2px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
  opacity: 0.72;
  transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

.modal-miniatura:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.modal-miniatura.activa {
  border-color: #d92f75;
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(217, 47, 117, 0.2), 0 10px 22px rgba(0,0,0,0.22);
}

.modal-miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.modal-img-placeholder {
  width: 100%;
  height: 420px;
  background: #f5f0eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 70px;
  color: #b62b5d;
  opacity: 0.3;
  border-radius: 13px;
}

.modal-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 12px 8px 0;
}

.modal-info h2 {
  color: #b62b5d;
  font-size: 22px;
  margin-bottom: 4px;
  line-height: 1.3;
}

.modal-descripcion {
  color: #666;
  font-size: 14px;
  line-height: 1.7;
  margin: 8px 0 16px;
}

.modal-tallas-wrap {
  margin-bottom: 20px;
}

.modal-tallas-label {
  font-weight: 600;
  font-size: 14px;
  color: #333;
  display: block;
  margin-bottom: 10px;
}

.tallas-grupo {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.modal-boton-agregar {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  margin-top: auto;
  border-radius: 10px;
}

#overlay-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1099;
}

/* MODO OSCURO - MODAL Y STATS */
body.oscuro .modal-contenido {
  background: #2c2c2c;
}

body.oscuro .modal-info h2 {
  color: #d98aa8;
}

body.oscuro .modal-descripcion {
  color: #bbb;
}

body.oscuro .modal-tallas-label {
  color: #f0f0f0;
}

body.oscuro .talla-btn {
  background: #3a3a3a;
  border-color: #555;
  color: #ddd;
}

body.oscuro .talla-btn:hover {
  border-color: #d98aa8;
  color: #d98aa8;
}

body.oscuro .modal-cerrar {
  background: #3a3a3a;
  color: #ddd;
}

body.oscuro .modal-img-placeholder {
  background: #3a3a3a;
}

body.oscuro .badge-disponible {
  background: #1a3a28;
  color: #4ade80;
}

/* PREMIUM UI REFRESH */
:root {
  --premium-ink: #2f2a2c;
  --premium-muted: #756b70;
  --premium-soft: #fbfaf8;
  --premium-blush: #f7f1ee;
  --premium-line: #eadfda;
  --premium-brand: #b62b5d;
  --premium-brand-dark: #8f2049;
  --premium-gold: #c9a45c;
  --premium-shadow: 0 18px 45px rgba(47, 42, 44, 0.08);
  --premium-shadow-soft: 0 10px 28px rgba(47, 42, 44, 0.06);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--premium-soft);
  color: var(--premium-ink);
  line-height: 1.55;
}

body,
button,
input,
textarea {
  letter-spacing: 0;
}

nav {
  min-height: 74px;
  padding: 8px clamp(18px, 4vw, 58px);
  background: rgba(251, 250, 248, 0.92);
  border-bottom: 1px solid rgba(234, 223, 218, 0.85);
  box-shadow: 0 10px 30px rgba(47, 42, 44, 0.05);
  backdrop-filter: blur(18px);
}

.logo-img {
  width: 64px;
  height: 64px;
  border: 1px solid var(--premium-line);
  box-shadow: none;
}

.nav-links {
  display: flex;
  gap: 6px;
  align-items: center;
}

.nav-links a {
  color: var(--premium-ink);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 11px;
  border-radius: 8px;
}

.nav-links a:hover {
  background: #f3ebe7;
  color: var(--premium-brand-dark);
}

.favoritos-nav,
.carrito,
#modo-oscuro {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--premium-line);
  background: #fff;
  color: var(--premium-ink) !important;
  box-shadow: none;
}

.favoritos-nav span,
.carrito span {
  margin-left: 3px;
  font-size: 11px;
  color: var(--premium-brand);
}

.boton-nav-login {
  background: var(--premium-ink);
  color: #fff !important;
  border-radius: 8px;
  padding: 11px 15px !important;
  box-shadow: none;
}

.boton-nav-login:hover {
  background: var(--premium-brand-dark);
  transform: translateY(-1px);
}

.hamburguesa {
  color: var(--premium-ink);
}

.hero-carrusel {
  height: min(640px, calc(100vh - 74px));
  min-height: 520px;
  background: var(--premium-ink);
}

.hero-contenido {
  max-width: 760px;
  padding: 0 24px;
}

.hero-eyebrow,
.section-eyebrow,
.resenas-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--premium-gold);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.hero-contenido h1 {
  max-width: 760px;
  margin: 0 auto 16px;
  color: #fff;
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 700;
  line-height: 1.04;
  text-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.hero-contenido p {
  max-width: 610px;
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 400;
}

.boton-hero,
.boton-comprar,
.boton-instagram-feed,
.boton-whatsapp,
.boton-instagram {
  border-radius: 8px;
  font-weight: 700;
  box-shadow: none;
}

.boton-hero {
  background: #fff;
  color: var(--premium-ink);
  padding: 13px 24px;
}

.boton-hero:hover {
  background: var(--premium-brand);
  color: #fff;
  transform: translateY(-2px);
}

.flecha-hero {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: none;
  backdrop-filter: blur(12px);
}

.flecha-hero:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-50%) scale(1.03);
}

.puntos-hero {
  bottom: 22px;
}

.punto-hero {
  width: 7px;
  height: 7px;
  background: rgba(255, 255, 255, 0.5);
}

.punto-hero.activo {
  width: 22px;
  border-radius: 999px;
  background: #fff;
}

.punto-hero {
  border: 0;
  padding: 0;
  appearance: none;
  display: block;
  min-width: 0;
  min-height: 0;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}

.banner-info {
  background: var(--premium-ink);
  color: #fff;
  padding: 15px clamp(18px, 4vw, 54px);
  gap: 18px;
  font-size: 13px;
  font-weight: 600;
}

.banner-info span {
  color: rgba(255, 255, 255, 0.88);
}

.banner-info i {
  color: var(--premium-gold);
  margin-right: 7px;
}

.seccion-blanca,
.seccion-rosada {
  padding: 58px 20px;
}

.seccion-blanca {
  background: var(--premium-soft);
}

.seccion-rosada {
  background: var(--premium-blush);
}

.contenedor {
  max-width: 1120px;
}

.contenedor > h2,
.instagram-header h2,
.banner-promo h2,
.resenas-header h2 {
  color: var(--premium-ink);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.12;
  margin-bottom: 14px;
}

.section-intro,
.seccion-blanca .contenedor > p {
  max-width: 670px;
  margin: 0 auto 28px;
  color: var(--premium-muted);
  font-size: 16px;
}

.stats-section {
  background: #fff;
  border-block: 1px solid var(--premium-line);
  padding: 26px 20px;
  gap: clamp(18px, 5vw, 58px);
  box-shadow: none;
}

.stat-item {
  color: var(--premium-ink);
  min-width: 150px;
}

.stat-numero-wrap {
  color: var(--premium-brand-dark);
  font-size: 30px;
}

.stat-label {
  color: var(--premium-muted);
  font-size: 12px;
  font-weight: 600;
}

.categorias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  max-width: 980px;
  margin: 18px auto 0;
  gap: 14px;
}

.categoria {
  width: auto;
  min-height: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--premium-line);
  border-radius: 8px;
  box-shadow: none;
}

.categoria:hover {
  border-color: #d9c7c0;
  box-shadow: var(--premium-shadow-soft);
  transform: translateY(-3px);
}

.categoria-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}

.categoria-img img,
.producto-imagen img,
.instagram-foto img {
  transition: transform 0.45s ease;
}

.categoria:hover .categoria-img {
  transform: none;
}

.categoria:hover .categoria-img img {
  transform: scale(1.04);
}

.categoria h3 {
  margin: 11px 4px 3px;
  color: var(--premium-ink);
  font-size: 14px;
  font-weight: 700;
}

.filtros {
  margin: 22px auto 18px;
  gap: 8px;
}

.filtro {
  border: 1px solid var(--premium-line);
  background: #fff;
  color: var(--premium-muted);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  box-shadow: none;
}

.filtro.activo,
.filtro:hover {
  background: var(--premium-ink);
  border-color: var(--premium-ink);
  color: #fff;
}

.buscador-contenedor {
  margin-bottom: 26px;
}

.buscador-wrapper {
  max-width: 440px;
  border: 1px solid var(--premium-line);
  background: #fff;
  box-shadow: none;
}

#buscador {
  color: var(--premium-ink);
}

.buscador-icono {
  color: var(--premium-muted);
}

.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
}

.producto {
  width: auto;
  max-width: none;
  background: #fff;
  border: 1px solid var(--premium-line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none;
}

.producto:hover {
  box-shadow: var(--premium-shadow);
  transform: translateY(-4px);
}

.producto-imagen {
  height: 250px;
  background: #f5f0eb;
}

.producto:hover .producto-imagen img {
  transform: scale(1.035);
}

.producto-info {
  padding: 15px;
}

.producto-info h3 {
  color: var(--premium-ink);
  font-size: 15px;
  line-height: 1.35;
  margin-bottom: 6px;
}

.producto-info p {
  min-height: 42px;
  color: var(--premium-muted);
  font-size: 13px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.precio,
#modal-precio {
  color: var(--premium-brand-dark) !important;
  font-weight: 800;
}

.boton-comprar {
  background: var(--premium-ink);
  color: #fff;
}

.boton-comprar:hover {
  background: var(--premium-brand-dark);
  transform: translateY(-1px);
}

.boton-favorito {
  background: rgba(255, 255, 255, 0.92);
  color: var(--premium-brand);
  border: 1px solid var(--premium-line);
  box-shadow: 0 8px 18px rgba(47, 42, 44, 0.08);
}

.boton-favorito:hover {
  background: var(--premium-brand);
  color: #fff;
}

.banner-promo {
  background: linear-gradient(135deg, #2f2a2c 0%, #5a2738 100%);
  padding: 52px 20px;
  color: #fff;
  box-shadow: none;
}

.banner-promo h2 {
  color: #fff;
  margin-bottom: 10px;
}

.banner-promo p {
  max-width: 560px;
  margin: 0 auto 24px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
}

.banner-promo .section-eyebrow {
  color: var(--premium-gold);
}

.seccion-instagram {
  background: var(--premium-soft);
  padding: 54px 20px;
}

.instagram-header {
  gap: 14px;
  margin-bottom: 24px;
}

.instagram-icono-grande {
  color: var(--premium-brand);
  font-size: 34px;
}

.instagram-header p {
  color: var(--premium-muted);
}

.instagram-grid {
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.instagram-foto {
  border-radius: 8px;
  box-shadow: none;
}

.instagram-overlay {
  background: rgba(47, 42, 44, 0.42);
}

.boton-instagram-feed {
  background: var(--premium-ink);
  color: #fff;
}

.contacto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 960px;
  margin: 28px auto 0;
}

.contacto-item {
  background: #fff;
  border: 1px solid var(--premium-line);
  border-radius: 8px;
  padding: 24px 18px;
  box-shadow: none;
}

.contacto-item:hover {
  box-shadow: var(--premium-shadow-soft);
  transform: translateY(-3px);
}

.contacto-icono {
  background: #f2eee9;
  color: var(--premium-brand);
  box-shadow: none;
}

.contacto-item h3 {
  color: var(--premium-ink);
}

.contacto-item p,
.contacto-sub {
  color: var(--premium-muted);
}

.boton-whatsapp {
  background: #1f9d59;
}

.boton-instagram {
  background: var(--premium-brand);
}

footer {
  background: #241f21;
  padding-top: 8px;
}

.footer-contenido {
  max-width: 1120px;
  padding: 42px 20px 32px;
  gap: 36px;
}

.footer-columna h3 {
  color: #fff;
  font-size: 16px;
}

.footer-columna p,
.footer-columna a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.footer-columna a:hover {
  color: #fff;
  transform: translateX(3px);
}

.footer-logo {
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.62);
}

.modal-contenido {
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(47, 42, 44, 0.28);
}

.modal-imagen,
.modal-imagen img {
  border-radius: 18px;
}

.modal-info h2 {
  color: var(--premium-ink);
}

.modal-img-placeholder {
  background: #f5f0eb;
  color: var(--premium-brand);
}

#boton-subir {
  background: var(--premium-ink);
  box-shadow: 0 14px 26px rgba(47, 42, 44, 0.2);
}

.boton-flotante-wsp {
  left: 18px;
  bottom: 18px;
  padding: 11px 15px;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(31, 157, 89, 0.24);
}

body.oscuro {
  background: #1f1b1d;
  color: #f8f3ef;
}

body.oscuro nav,
body.oscuro .seccion-blanca,
body.oscuro .seccion-rosada,
body.oscuro .seccion-instagram {
  background: #1f1b1d;
}

body.oscuro .producto,
body.oscuro .categoria,
body.oscuro .contacto-item,
body.oscuro .resena-formulario,
body.oscuro .resena-card,
body.oscuro .buscador-wrapper,
body.oscuro .filtro,
body.oscuro .modal-contenido {
  background: #2a2527;
  border-color: #3d3438;
}

body.oscuro .contenedor > h2,
body.oscuro .resenas-header h2,
body.oscuro .instagram-header h2,
body.oscuro .producto-info h3,
body.oscuro .categoria h3,
body.oscuro .contacto-item h3,
body.oscuro .modal-info h2 {
  color: #fff;
}

body.oscuro .section-intro,
body.oscuro .seccion-blanca .contenedor > p,
body.oscuro .producto-info p,
body.oscuro .contacto-item p,
body.oscuro .instagram-header p {
  color: #cfc3c8;
}

@media (max-width: 900px) {
  nav {
    min-height: 66px;
  }

  .logo-img {
    width: 56px;
    height: 56px;
  }

  .nav-links {
    top: 66px;
    background: rgba(251, 250, 248, 0.98);
    border-bottom: 1px solid var(--premium-line);
    box-shadow: 0 18px 34px rgba(47, 42, 44, 0.1);
  }

  .nav-links a,
  .boton-nav-login {
    width: min(320px, 92%);
    justify-content: center;
  }

  .favoritos-nav,
  .carrito,
  #modo-oscuro {
    width: min(320px, 92%);
    min-width: 0;
    height: 42px;
  }

  .hero-carrusel {
    min-height: 470px;
    height: 520px;
  }

  .flecha-hero {
    display: none;
  }

  .seccion-blanca,
  .seccion-rosada,
  .seccion-instagram {
    padding: 44px 16px;
  }

  .banner-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    text-align: left;
  }

  .categorias-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .productos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .producto-imagen {
    height: 220px;
  }

  .instagram-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .contacto-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .hero-carrusel {
    min-height: 430px;
    height: 470px;
  }

  .hero-contenido h1 {
    font-size: 34px;
  }

  .hero-contenido p {
    font-size: 15px;
  }

  .banner-info {
    grid-template-columns: 1fr;
    padding: 14px 18px;
  }

  .stats-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .productos-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
  }

  .producto-imagen {
    height: 255px;
  }

  .instagram-grid {
    gap: 7px;
  }

  .banner-promo {
    padding: 42px 18px;
  }

  .boton-flotante-wsp {
    max-width: calc(100vw - 92px);
  }
}

/* HEADER OVERFLOW FIX */
body {
  overflow-x: hidden;
}

nav {
  width: 100%;
  max-width: 100vw;
  gap: clamp(14px, 2vw, 28px);
}

.nav-logo {
  flex: 0 0 auto;
}

.nav-links {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  margin-left: auto;
}

.nav-links a {
  margin-left: 0 !important;
  white-space: nowrap;
}

#modo-oscuro {
  margin-left: 0 !important;
}

.boton-nav-login {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favoritos-nav,
.carrito {
  position: relative;
  font-size: 15px;
}

#contador-favoritos,
#contador {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--premium-brand);
  color: #fff !important;
  border: 2px solid #fff;
  font-size: 10px;
  line-height: 1;
}

@media (min-width: 901px) and (max-width: 1180px) {
  nav {
    padding-inline: 16px;
    gap: 12px;
  }

  .logo-img {
    width: 58px;
    height: 58px;
  }

  .nav-links {
    gap: 4px;
  }

  .nav-links a {
    font-size: 12px;
    padding: 8px 9px;
  }

  .favoritos-nav,
  .carrito,
  #modo-oscuro {
    width: 36px;
    min-width: 36px;
    height: 36px;
  }

  .boton-nav-login {
    max-width: 118px;
  }
}

/* VISUAL QA PASS */
img {
  max-width: 100%;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(182, 43, 93, 0.35);
  outline-offset: 3px;
}

.hero-carrusel,
.banner-info,
.stats-section,
.banner-promo,
footer {
  width: 100%;
}

.diapositiva {
  background-position: center !important;
}

.producto-imagen {
  aspect-ratio: 4 / 5;
  height: auto !important;
  min-height: 0;
  overflow: hidden;
}

.producto-imagen img,
.producto-placeholder {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.producto-placeholder {
  background: #f5f0eb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--premium-brand);
}

.producto-placeholder i {
  font-size: 46px;
  opacity: 0.32;
}

.producto-acciones {
  display: grid;
  grid-template-columns: 1fr 42px;
  gap: 8px;
  margin-top: 12px;
  align-items: stretch;
}

.producto-acciones .boton-comprar,
.producto-acciones .boton-favorito {
  min-height: 42px;
}

.producto-acciones .boton-favorito {
  position: static;
  width: 42px;
  height: 42px;
}

.tallas-selector {
  min-height: 30px;
}

.resenas-section {
  padding: 50px 20px;
}

.resenas-layout {
  align-items: start;
}

.resena-card,
.resena-formulario {
  border: 1px solid var(--premium-line);
  border-radius: 8px;
}

.resena-card {
  min-width: 0;
}

.resena-card p {
  overflow-wrap: anywhere;
}

.resena-formulario input,
.resena-formulario textarea,
#buscador {
  min-width: 0;
}

.instagram-foto {
  aspect-ratio: 1 / 1;
}

.contacto-item {
  min-width: 0;
}

.contacto-item p {
  overflow-wrap: anywhere;
}

.carrito-panel,
.favoritos-panel {
  width: min(390px, 100vw);
  right: min(-390px, -100vw);
  border-left: 1px solid var(--premium-line);
  box-shadow: -18px 0 46px rgba(47, 42, 44, 0.16);
}

.carrito-panel.abierto,
.favoritos-panel.abierto {
  right: 0;
}

.carrito-header {
  border-bottom-color: var(--premium-line);
}

.carrito-header h3,
.carrito-total span,
.carrito-icono,
.favorito-icono {
  color: var(--premium-brand-dark);
}

.carrito-item-info {
  min-width: 0;
}

.carrito-item-info p,
.favorito-item p {
  overflow-wrap: anywhere;
}

.menu-usuario {
  right: 0;
  max-width: min(280px, calc(100vw - 24px));
}

#notificacion {
  max-width: min(360px, calc(100vw - 32px));
  border-radius: 8px;
}

#boton-subir,
.boton-flotante-wsp {
  z-index: 950;
}

@media (max-width: 900px) {
  .hamburguesa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--premium-line);
    background: #fff;
  }

  nav {
    position: sticky;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  }

  .nav-links.abierto {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  .nav-links a,
  .boton-nav-login,
  .favoritos-nav,
  .carrito,
  #modo-oscuro {
    width: min(340px, 100%);
    max-width: min(340px, 100%);
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-bottom: 0;
  }

  #contador-favoritos,
  #contador {
    top: 8px;
    right: calc(50% - 36px);
  }

  .hero-contenido {
    padding-inline: 22px;
  }

  .hero-contenido h1,
  .hero-contenido p {
    padding-inline: 0;
  }

  .resenas-header {
    gap: 16px;
  }

  .carrito-panel,
  .favoritos-panel {
    width: min(420px, 100vw);
    right: -100vw;
  }
}

@media (max-width: 720px) {
  .contenedor > h2,
  .instagram-header h2,
  .banner-promo h2,
  .resenas-header h2 {
    font-size: 26px;
  }

  .section-intro,
  .seccion-blanca .contenedor > p {
    font-size: 14px;
  }

  .resenas-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .resenas-resumen {
    width: 100%;
    justify-content: space-between;
  }

  .contacto-grid,
  .productos-grid {
    width: 100%;
  }

  .footer-columna a:hover {
    transform: none;
  }
}

@media (max-width: 420px) {
  nav {
    padding-inline: 12px;
  }

  .logo-img {
    width: 52px;
    height: 52px;
  }

  .hero-carrusel {
    min-height: 410px;
    height: 430px;
  }

  .hero-contenido h1 {
    font-size: 30px;
  }

  .categorias-grid {
    gap: 10px;
  }

  .categoria {
    padding: 8px;
  }

  .producto-info {
    padding: 14px;
  }

  .stats-section {
    padding-inline: 14px;
  }

  .stat-item {
    min-width: 0;
  }

  .boton-flotante-wsp {
    width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
  }

  #boton-subir {
    width: 42px;
    height: 42px;
  }
}

/* HERO AND DESKTOP NAV POLISH */
@media (min-width: 901px) {
  nav {
    min-height: 86px;
    padding-block: 8px;
  }

  .nav-links {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

  .hero-carrusel {
    height: calc(100vh - 86px);
    min-height: 560px;
    max-height: 650px;
  }

  .hero-contenido {
    transform: translateY(-8px);
  }

  .hero-contenido h1 {
    max-width: 900px;
    font-size: clamp(44px, 4.6vw, 64px);
  }

  .hero-contenido p {
    margin-bottom: 24px;
  }
}

@media (min-width: 1500px) {
  nav {
    padding-inline: clamp(70px, 6vw, 118px);
  }
}

@media (min-width: 901px) and (max-height: 820px) {
  .hero-carrusel {
    min-height: 520px;
    max-height: 600px;
  }

  .hero-contenido h1 {
    font-size: clamp(40px, 4.2vw, 58px);
  }

  .hero-contenido p {
    font-size: 18px;
    margin-bottom: 20px;
  }
}

/* FINAL PREMIUM POLISH */
:root {
  --premium-radius: 10px;
  --premium-radius-sm: 8px;
  --premium-focus: rgba(143, 32, 73, 0.28);
}

html {
  font-size: 16px;
}

body {
  min-width: 320px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::selection {
  background: rgba(182, 43, 93, 0.18);
}

nav {
  isolation: isolate;
}

.logo-img,
.footer-logo {
  background: #fff;
}

.nav-links a,
#modo-oscuro,
.hamburguesa,
.boton-comprar,
.boton-hero,
.boton-whatsapp,
.boton-instagram,
.boton-instagram-feed,
.filtro,
.talla-btn,
.modal-cerrar,
.carrito-header button,
.boton-favorito {
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, opacity 0.22s ease;
}

.nav-links a,
.boton-nav-login {
  min-height: 38px;
}

.hero-carrusel::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  background: linear-gradient(to top, rgba(47, 42, 44, 0.42), transparent);
  pointer-events: none;
  z-index: 2;
}

.hero-contenido {
  position: relative;
  z-index: 3;
}

.flecha-hero {
  position: absolute;
  z-index: 3;
}

.puntos-hero {
  position: absolute;
  z-index: 3;
}

.hero-eyebrow,
.section-eyebrow,
.resenas-eyebrow {
  letter-spacing: 0.11em;
}

.seccion-blanca,
.seccion-rosada,
.seccion-instagram {
  overflow: hidden;
}

.contenedor > h2 {
  text-wrap: balance;
}

.section-intro,
.seccion-blanca .contenedor > p,
.banner-promo p,
.hero-contenido p {
  text-wrap: pretty;
}

.banner-info {
  align-items: center;
}

.banner-info span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  align-items: center;
}

.stat-item {
  padding: 4px 10px;
}

.categorias-grid,
.productos-grid,
.instagram-grid,
.contacto-grid,
.resenas-layout {
  align-items: stretch;
}

.categoria,
.producto,
.contacto-item,
.resena-card,
.resena-formulario,
.buscador-wrapper {
  border-radius: var(--premium-radius);
}

.categoria-img,
.producto-imagen,
.instagram-foto {
  border-radius: var(--premium-radius-sm);
}

.categoria,
.producto,
.contacto-item,
.resena-card,
.resena-formulario {
  will-change: transform;
}

.productos-grid {
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 20px;
}

.producto {
  display: flex;
  flex-direction: column;
}

.producto-imagen {
  position: relative;
  cursor: pointer;
  padding: 0;
  background: #f4eeea;
}

.producto-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.producto-info h3 {
  cursor: pointer;
  min-height: 41px;
  margin: 0;
}

.producto-info h3:hover {
  color: var(--premium-brand-dark);
}

.producto-info p {
  margin: 0;
}

.precio-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.precio-original {
  color: #9d9296;
  font-size: 13px;
  text-decoration: line-through;
}

.descuento-badge,
.agotado-badge {
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}

.descuento-badge {
  background: #2f2a2c;
  color: #fff;
  padding: 5px 8px;
}

.agotado-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(47, 42, 44, 0.82);
  color: #fff;
  padding: 7px 10px;
  backdrop-filter: blur(8px);
}

.tallas-selector,
.tallas-grupo {
  flex-wrap: wrap;
}

.talla-btn {
  min-width: 34px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--premium-line);
  background: #fff;
  color: var(--premium-ink);
  font-size: 12px;
  font-weight: 700;
}

.talla-btn:hover,
.talla-btn.seleccionada {
  background: var(--premium-ink);
  border-color: var(--premium-ink);
  color: #fff;
}

.producto-acciones {
  margin-top: auto;
}

.producto-acciones .boton-comprar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 0;
  cursor: pointer;
}

.producto-acciones .boton-favorito {
  flex-shrink: 0;
}

.buscador-wrapper {
  overflow: hidden;
}

#buscador {
  border: 0;
  background: transparent;
}

.filtros {
  max-width: 880px;
}

.filtro {
  cursor: pointer;
}

.resenas-lista {
  min-width: 0;
}

.resenas-resumen {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.resena-formulario button {
  border-radius: var(--premium-radius-sm);
}

.banner-promo {
  position: relative;
}

.banner-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 38%, rgba(201, 164, 92, 0.08));
  pointer-events: none;
}

.banner-promo > * {
  position: relative;
}

.instagram-header {
  justify-content: center;
  text-align: left;
}

.instagram-foto {
  background: #f4eeea;
}

.contacto-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contacto-item .boton-whatsapp,
.contacto-item .boton-instagram,
.badge-disponible {
  margin-top: auto;
}

.carrito-panel,
.favoritos-panel {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(18px);
}

.carrito-item,
.favorito-item {
  border-radius: var(--premium-radius-sm);
}

#boton-pedir-todo {
  min-height: 46px;
  border-radius: var(--premium-radius-sm) !important;
}

#notificacion {
  box-shadow: 0 16px 40px rgba(47, 42, 44, 0.2);
}

#boton-subir {
  right: 18px;
  bottom: 18px;
}

.boton-flotante-wsp {
  max-width: calc(100vw - 92px);
}

@media (hover: hover) {
  .producto:hover .boton-comprar,
  .contacto-item:hover a,
  .banner-promo .boton-hero:hover {
    transform: translateY(-1px);
  }
}

@media (max-width: 900px) {
  nav {
    min-height: 66px;
    padding-block: 7px;
  }

  .nav-links {
    background: rgba(251, 250, 248, 0.98);
    border-bottom: 1px solid var(--premium-line);
    box-shadow: 0 18px 36px rgba(47, 42, 44, 0.12);
    backdrop-filter: blur(18px);
  }

  .nav-links a,
  .boton-nav-login,
  .favoritos-nav,
  .carrito,
  #modo-oscuro {
    border: 1px solid var(--premium-line);
    border-radius: var(--premium-radius-sm);
    background: #fff;
  }

  .hero-carrusel {
    height: 500px;
    min-height: 500px;
  }

  .flecha-hero {
    display: none;
  }

  .stats-section {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }

  .productos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .producto-info h3 {
    min-height: 38px;
  }
}

@media (max-width: 620px) {
  .seccion-blanca,
  .seccion-rosada,
  .seccion-instagram {
    padding-block: 40px;
  }

  .hero-carrusel {
    height: 450px;
    min-height: 450px;
  }

  .hero-contenido h1 {
    font-size: 32px;
  }

  .hero-contenido p {
    font-size: 15px;
  }

  .banner-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    text-align: left;
  }

  .categorias-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .productos-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
  }

  .producto-imagen {
    aspect-ratio: 4 / 4.7;
  }

  .instagram-header {
    justify-content: flex-start;
  }

  .instagram-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .modal-contenido {
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }

  .boton-flotante-wsp {
    left: 14px;
    bottom: 14px;
  }

  #boton-subir {
    right: 14px;
    bottom: 14px;
  }
}

@media (max-width: 420px) {
  .banner-info {
    grid-template-columns: 1fr;
  }

  .stats-section {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .stat-numero-wrap {
    font-size: 26px;
  }
}

/* Mobile product modal polish */
body.modal-abierto .mobile-nav-actions,
body.modal-abierto .boton-flotante-wsp,
body.modal-abierto #boton-subir {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

@media (max-width: 700px) {
  .modal-producto {
    z-index: 1500;
    align-items: center;
    justify-content: center;
    padding: 10px;
  }

  #overlay-modal {
    z-index: 1490;
  }

  .modal-contenido {
    width: min(100%, 430px);
    max-height: calc(100svh - 20px);
    padding: 12px;
    gap: 14px;
    border-radius: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .modal-cerrar {
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    background: rgba(47, 42, 44, 0.78);
    color: #fff;
  }

  .modal-imagen {
    width: 100%;
    flex: none;
    padding: 0;
    background: transparent;
    border-radius: 16px;
    box-shadow: none;
  }

  .modal-imagen > img,
  .modal-img-placeholder {
    height: clamp(245px, 42svh, 360px);
    border-radius: 14px;
  }

  .modal-galeria {
    grid-template-columns: none;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: none;
  }

  .modal-galeria[style*="grid"] {
    display: flex !important;
  }

  .modal-galeria::-webkit-scrollbar {
    display: none;
  }

  .modal-miniatura {
    flex: 0 0 64px;
    width: 64px;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.16);
  }

  .modal-info {
    padding: 0 4px 4px;
  }

  .modal-info h2 {
    font-size: 24px;
    line-height: 1.16;
    margin-bottom: 6px;
  }

  #modal-precio {
    margin-bottom: 6px;
  }

  .modal-descripcion {
    margin: 6px 0 12px;
    font-size: 14px;
    line-height: 1.5;
  }

  .modal-tallas-wrap {
    margin-bottom: 12px;
  }

  .modal-boton-agregar {
    position: sticky;
    bottom: 0;
    width: 100%;
    margin-top: 8px;
    padding: 13px 14px;
    border-radius: 12px;
    box-shadow: 0 -10px 24px rgba(47, 42, 44, 0.12);
  }
}

@media (max-width: 380px) {
  .modal-contenido {
    padding: 10px;
    border-radius: 18px;
  }

  .modal-imagen > img,
  .modal-img-placeholder {
    height: clamp(215px, 39svh, 310px);
  }

  .modal-miniatura {
    flex-basis: 58px;
    width: 58px;
  }

  .modal-info h2 {
    font-size: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* NAV ICON BADGES FIX */
.nav-links .favoritos-nav,
.nav-links .carrito {
  position: relative;
  width: 46px;
  min-width: 46px;
  height: 46px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border: 1px solid rgba(143, 32, 73, 0.2);
  border-radius: 16px;
  background: rgba(255, 250, 252, 0.9);
  box-shadow: 0 8px 18px rgba(182, 43, 93, 0.08);
}

.nav-links .favoritos-nav i,
.nav-links .carrito i {
  display: block;
  color: #8f2049;
  font-size: 19px;
  line-height: 1;
}

.nav-links #contador-favoritos,
.nav-links #contador {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--premium-brand);
  color: #fff !important;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  transform: none;
}

@media (min-width: 901px) and (max-width: 1180px) {
  .nav-links .favoritos-nav,
  .nav-links .carrito {
    width: 42px;
    min-width: 42px;
    height: 42px;
  }
}

@media (max-width: 900px) {
  .nav-links .favoritos-nav,
  .nav-links .carrito {
    width: min(340px, 100%);
    max-width: min(340px, 100%);
    height: 42px;
    gap: 8px;
  }

  .nav-links #contador-favoritos,
  .nav-links #contador {
    top: 8px;
    right: calc(50% - 32px);
  }
}

/* MOBILE PREMIUM PASS */
@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  section[id] {
    scroll-margin-top: 74px;
  }

  nav {
    min-height: 64px;
    padding: 6px 14px;
    gap: 8px;
  }

  .mobile-nav-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  .mobile-modo-oscuro,
  .mobile-favoritos-nav,
  .mobile-carrito-nav {
    position: relative;
    width: 42px;
    height: 42px;
    min-width: 42px;
    border: 1px solid var(--premium-line);
    border-radius: 10px;
    background: #fff;
    color: var(--premium-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(47, 42, 44, 0.06);
  }

  .mobile-modo-oscuro {
    cursor: pointer;
    font-family: inherit;
  }

  .mobile-modo-oscuro i,
  .mobile-favoritos-nav i,
  .mobile-carrito-nav i {
    font-size: 17px;
    line-height: 1;
  }

  .contador-favoritos-mobile,
  .contador-carrito-mobile {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--premium-brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
  }

  .logo-img {
    width: 52px;
    height: 52px;
    box-shadow: 0 6px 18px rgba(47, 42, 44, 0.12);
  }

  .hamburguesa {
    flex: 0 0 42px;
    border-radius: 10px;
    color: var(--premium-ink);
  }

  .nav-links {
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    padding: 14px;
  }

  .nav-links .favoritos-nav,
  .nav-links .carrito {
    display: none;
  }

  .nav-links a,
  .nav-links .boton-nav-login,
  .nav-links #modo-oscuro {
    width: 100%;
    max-width: 360px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 700;
  }

  .menu-usuario {
    position: static;
    width: min(360px, 100%);
    max-width: 360px;
    margin: 2px auto 0;
    box-shadow: none;
  }

  .hero-carrusel {
    height: min(520px, calc(100svh - 64px));
    min-height: 430px;
  }

  .diapositiva {
    align-items: flex-end;
    padding: 0 16px 66px;
  }

  .hero-contenido {
    width: min(100%, 540px);
    transform: none;
  }

  .hero-eyebrow,
  .section-eyebrow,
  .resenas-eyebrow {
    font-size: 11px;
  }

  .hero-contenido h1 {
    max-width: 11ch;
    margin-inline: auto;
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1.02;
  }

  .hero-contenido p {
    max-width: 32ch;
    margin: 10px auto 22px;
    font-size: 15px;
    line-height: 1.55;
  }

  .boton-hero,
  .boton-instagram-feed,
  .boton-whatsapp,
  .boton-instagram,
  .boton-comprar {
    min-height: 44px;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 14px;
  }

  .puntos-hero {
    bottom: 22px;
  }

  .punto-hero {
    width: 9px;
    height: 9px;
  }

  .seccion-blanca,
  .seccion-rosada,
  .seccion-instagram,
  .resenas-section {
    padding: 38px 16px;
  }

  .contenedor > h2,
  .instagram-header h2,
  .banner-promo h2,
  .resenas-header h2 {
    max-width: 18ch;
    margin-inline: auto;
    font-size: clamp(25px, 7vw, 32px);
    line-height: 1.12;
  }

  .section-intro,
  .seccion-blanca .contenedor > p,
  .seccion-rosada .contenedor > p,
  .banner-promo p {
    max-width: 36ch;
    font-size: 14px;
    line-height: 1.65;
  }

  .banner-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
  }

  .banner-info span {
    min-height: 44px;
    padding: 10px 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 12px;
    line-height: 1.35;
  }

  .stats-section {
    padding: 20px 14px;
  }

  .stat-item {
    min-width: 0;
    padding: 14px 8px;
  }

  .stat-label {
    max-width: 13ch;
    margin-inline: auto;
    font-size: 12px;
    line-height: 1.35;
  }

  .categorias-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 460px;
    gap: 12px;
  }

  .categoria {
    width: auto;
    min-width: 0;
    padding: 14px 10px;
  }

  .categoria-img,
  .categoria-icono {
    width: 62px;
    height: 62px;
    margin-bottom: 10px;
  }

  .categoria h3 {
    font-size: 13px;
    line-height: 1.25;
  }

  .filtros {
    justify-content: flex-start;
    width: calc(100% + 32px);
    max-width: none;
    margin: 20px -16px 16px;
    padding: 0 16px 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .filtros::-webkit-scrollbar {
    display: none;
  }

  .filtro {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 9px 14px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .buscador-contenedor {
    margin-bottom: 18px;
  }

  .buscador-wrapper {
    width: 100%;
    max-width: 420px;
  }

  #buscador {
    height: 46px;
    font-size: 15px;
  }

  .productos-grid {
    display: grid;
    width: 100%;
    max-width: 640px;
    margin: 22px auto 0;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 300px));
    justify-content: center;
  }

  .producto {
    width: 100%;
    max-width: 300px;
  }

  .producto-imagen {
    aspect-ratio: 1 / 1;
  }

  .producto-info {
    padding: 12px;
  }

  .producto-info h3 {
    min-height: 0;
    font-size: 15px;
    line-height: 1.28;
  }

  .producto-info p {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .producto-info p:empty {
    display: none;
  }

  .precio {
    font-size: 17px;
  }

  .tallas-selector {
    gap: 7px;
  }

  .talla-btn {
    min-width: 38px;
    height: 34px;
  }

  .producto-acciones {
    grid-template-columns: 1fr 44px;
    gap: 9px;
  }

  .producto-acciones .boton-favorito {
    width: 44px;
    height: 44px;
  }

  .resenas-layout,
  .resenas-lista {
    display: grid;
    grid-template-columns: 1fr;
  }

  .resenas-header,
  .resenas-resumen {
    text-align: left;
  }

  .resenas-resumen {
    align-items: flex-start;
  }

  .resena-card,
  .resena-formulario {
    padding: 16px;
  }

  .form-resena-grid {
    grid-template-columns: 1fr;
  }

  .estrellas-selector span {
    min-width: 30px;
    font-size: 22px;
  }

  .instagram-header {
    gap: 12px;
    max-width: 360px;
    margin-inline: auto;
  }

  .instagram-icono-grande {
    font-size: 36px;
  }

  .instagram-grid {
    max-width: 420px;
    gap: 6px;
  }

  .contacto-grid {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 390px;
    gap: 14px;
  }

  .contacto-item {
    width: 100%;
    padding: 22px 18px;
  }

  .footer-contenido {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 30px 20px 24px;
    text-align: center;
  }

  .footer-logo {
    width: 62px;
    height: 62px;
    margin: 0 auto 10px;
  }

  .footer-columna {
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
  }

  .footer-columna h3 {
    margin-bottom: 10px;
    font-size: 16px;
  }

  .footer-columna p,
  .footer-columna a {
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
  }

  .footer-columna p,
  .footer-columna a {
    align-items: center;
    line-height: 1.5;
  }

  .footer-redes {
    justify-content: center;
    margin-top: 14px;
    gap: 10px;
  }

  .footer-red {
    width: 44px;
    height: 44px;
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
  }

  .footer-red i,
  .footer-columna .footer-red i {
    color: inherit;
    font-size: 19px;
  }

  .footer-info-icono,
  .footer-columna a i {
    flex: 0 0 auto;
  }

  .footer-bottom {
    padding: 14px 18px 82px;
    font-size: 12px;
    line-height: 1.55;
  }

  .modal-producto {
    padding: 12px;
    align-items: flex-end;
  }

  .modal-contenido {
    width: 100%;
    max-height: calc(100svh - 24px);
    padding: 12px;
    gap: 16px;
    border-radius: 22px 22px 12px 12px;
  }

  .modal-cerrar {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
  }

  .modal-imagen img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(58svh, 430px);
    margin: 0 auto;
  }

  .modal-img-placeholder {
    height: clamp(250px, 72vw, 390px);
  }

  .modal-imagen {
    width: 100%;
    flex: none;
    padding: 8px;
    border-radius: 16px;
  }

  .modal-imagen img,
  .modal-img-placeholder {
    border-radius: 11px;
  }

  .modal-imagen img {
    object-fit: contain;
    background: transparent;
  }

  .modal-galeria {
    grid-template-columns: none;
    display: flex !important;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: none;
  }

  .modal-galeria::-webkit-scrollbar {
    display: none;
  }

  .modal-miniatura {
    flex: 0 0 64px;
    width: 64px;
    border-radius: 10px;
  }

  .modal-info {
    padding: 0 4px 2px;
  }

  .modal-info h2 {
    font-size: 23px;
    line-height: 1.18;
  }

  .modal-descripcion {
    font-size: 14px;
    line-height: 1.55;
  }

  .modal-boton-agregar {
    width: 100%;
  }

  .carrito-panel,
  .favoritos-panel {
    top: 0;
    width: min(390px, calc(100vw - 10px));
    height: 100svh;
    max-height: 100svh;
    padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
    border-radius: 14px 0 0 14px;
    z-index: 1200;
  }

  #overlay,
  #overlay-favoritos {
    z-index: 1190;
    background: rgba(47, 42, 44, 0.42);
    backdrop-filter: blur(3px);
  }

  body.panel-abierto {
    overflow: hidden;
    touch-action: none;
  }

  #carrito-items,
  #favoritos-items {
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
    -webkit-overflow-scrolling: touch;
  }

  .carrito-header {
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
  }

  .carrito-header h3 {
    font-size: 18px;
  }

  .carrito-header button {
    min-width: 38px;
    min-height: 38px;
  }

  .vaciar-btn {
    padding-inline: 10px;
  }

  .carrito-item,
  .favorito-item {
    gap: 10px;
    padding: 11px 0;
    align-items: center;
  }

  .carrito-item img,
  .favorito-item img {
    width: 48px !important;
    height: 48px !important;
  }

  .carrito-item-info {
    padding: 0 4px;
  }

  .carrito-item-info p,
  .favorito-info p {
    font-size: 13px;
    line-height: 1.35;
  }

  .carrito-item-derecha {
    min-width: 74px;
    font-size: 13px;
  }

  .carrito-cantidad button {
    width: 28px;
    height: 28px;
  }

  .carrito-total {
    padding-top: 12px;
  }

  .carrito-total p {
    margin-bottom: 10px;
    font-size: 16px;
  }

  .boton-flotante-wsp {
    left: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    min-height: 46px;
  }

  #boton-subir {
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 620px) {
  .hero-carrusel {
    height: min(500px, calc(100svh - 64px));
    min-height: 410px;
  }

  .diapositiva {
    padding-bottom: 58px;
  }

  .banner-info {
    grid-template-columns: 1fr 1fr;
  }

  .productos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 430px;
    gap: 12px;
  }

  .producto {
    max-width: none;
  }

  .producto-imagen {
    aspect-ratio: 1 / 1;
  }

  .producto-info {
    gap: 6px;
    padding: 10px;
  }

  .producto-info h3 {
    font-size: 13px;
    line-height: 1.25;
  }

  .precio-wrap {
    gap: 5px;
  }

  .precio {
    font-size: 15px;
  }

  .precio-original {
    font-size: 12px;
  }

  .descuento-badge {
    padding: 4px 6px;
    font-size: 9px;
  }

  .talla-btn {
    min-width: 32px;
    height: 32px;
    font-size: 11px;
  }

  .producto-acciones {
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 7px;
  }

  .producto-acciones .boton-comprar,
  .producto-acciones .boton-favorito {
    min-height: 38px;
  }

  .producto-acciones .boton-comprar {
    padding: 9px 8px;
    font-size: 12px;
  }

  .producto-acciones .boton-favorito {
    width: 38px;
    height: 38px;
    font-size: 17px;
  }

  .banner-promo {
    padding: 40px 18px;
  }

  .banner-promo h2 {
    font-size: 28px;
  }
}

@media (max-width: 440px) {
  .hero-contenido h1 {
    font-size: 30px;
  }

  .hero-contenido p {
    font-size: 14px;
  }

  .banner-info {
    grid-template-columns: 1fr;
  }

  .stats-section {
    gap: 10px;
  }

  .stat-numero-wrap {
    font-size: 24px;
  }

  .categorias-grid {
    gap: 10px;
  }

  .categoria-img,
  .categoria-icono {
    width: 56px;
    height: 56px;
  }

  .producto-info {
    padding: 10px;
  }

  .instagram-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-contenido {
    padding-inline: 18px;
  }

  .boton-flotante-wsp {
    width: 46px;
    max-width: 46px;
    padding: 0;
  }

  .boton-flotante-wsp .wsp-texto {
    display: none;
  }
}

@media (max-width: 360px) {
  nav {
    padding-inline: 10px;
  }

  .hero-contenido h1 {
    font-size: 28px;
  }

  .contenedor > h2,
  .instagram-header h2,
  .banner-promo h2,
  .resenas-header h2 {
    font-size: 24px;
  }

  .categorias-grid,
  .productos-grid {
    grid-template-columns: 1fr;
  }

  .productos-grid {
    max-width: 310px;
  }
}

/* HOME GENDER-NEUTRAL REFRESH */
.hero-carrusel .diapositiva {
  background-position: center;
}

.hero-carrusel .diapositiva::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(90deg, rgba(20, 18, 16, 0.34), rgba(20, 18, 16, 0.06), rgba(20, 18, 16, 0.36));
  pointer-events: none;
}

.hero-eyebrow {
  color: #d6b15f;
}

.boton-hero {
  color: #24201d;
  border-radius: 8px;
}

.boton-hero:hover {
  background-color: #d6b15f;
  color: #191613;
}

.punto-hero.activo {
  background-color: #d6b15f;
}

body.oscuro .nav-icono,
body.oscuro .favoritos-nav,
body.oscuro .carrito,
body.oscuro #modo-oscuro,
body.oscuro .footer-info-icono.loc,
body.oscuro .footer-info-icono.ig {
  color: #d6b15f !important;
}

body.oscuro .nav-links a:hover .nav-icono {
  color: #f0cc78 !important;
  filter: drop-shadow(0 0 8px rgba(214, 177, 95, 0.28));
}

body.oscuro #contador,
body.oscuro #contador-favoritos,
body.oscuro .boton-nav-login {
  background: #d6b15f;
  color: #191613 !important;
}

body.oscuro .favoritos-nav,
body.oscuro .carrito,
body.oscuro #modo-oscuro {
  border-color: rgba(214, 177, 95, 0.36) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

/* MOBILE COMMERCE UX PASS */
@media (max-width: 900px) {
  body {
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }

  nav {
    z-index: 1100;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid rgba(234, 223, 218, 0.86);
    backdrop-filter: blur(16px);
  }

  .mobile-nav-actions {
    position: fixed;
    right: 14px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    transform: none;
    z-index: 1300;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 9px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .mobile-modo-oscuro,
  .mobile-favoritos-nav,
  .mobile-carrito-nav {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 999px;
    border-color: rgba(234, 223, 218, 0.95);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(47, 42, 44, 0.18);
    backdrop-filter: blur(16px);
  }

  .mobile-modo-oscuro {
    cursor: pointer;
    font-family: inherit;
  }

  .mobile-modo-oscuro i,
  .mobile-favoritos-nav i,
  .mobile-carrito-nav i {
    font-size: 19px;
    line-height: 1;
  }

  .mobile-modo-oscuro:active,
  .mobile-favoritos-nav:active,
  .mobile-carrito-nav:active {
    transform: scale(0.96);
  }

  .contador-favoritos-mobile,
  .contador-carrito-mobile {
    top: -4px;
    right: -4px;
  }

  .boton-flotante-wsp {
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 1140;
  }

  #boton-subir {
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 1140;
  }

  .nav-links {
    top: calc(100% + 1px);
    padding: 14px 14px 18px;
    gap: 9px;
    border-radius: 0 0 18px 18px;
    background: rgba(251, 250, 248, 0.98);
    box-shadow: 0 22px 42px rgba(47, 42, 44, 0.14);
  }

  .nav-links a,
  .nav-links .boton-nav-login,
  .nav-links #modo-oscuro {
    max-width: 380px;
    min-height: 46px;
    border-radius: 11px;
    font-size: 14px;
  }

  .nav-links a:not(.boton-nav-login):not(.menu-opcion) {
    justify-content: flex-start;
    padding-inline: 16px;
  }

  .nav-links .boton-nav-login {
    color: #fff !important;
    background: var(--premium-ink);
    border-color: var(--premium-ink);
  }

  .nav-links #modo-oscuro {
    color: var(--premium-ink);
    background: #fff;
  }

  .menu-usuario.visible {
    display: block;
    border-radius: 12px;
    border: 1px solid var(--premium-line);
    background: #fff;
    padding: 12px;
  }

  .menu-usuario-nombre,
  .menu-usuario-correo {
    color: var(--premium-ink);
  }

  .carrito-panel,
  .favoritos-panel {
    width: min(400px, calc(100vw - 8px));
    background: rgba(255, 255, 255, 0.985);
  }

  .carrito-header h3,
  .favorito-info p,
  .carrito-item-info p,
  .carrito-total p {
    color: var(--premium-ink);
  }

  .carrito-header button,
  .eliminar-item {
    color: var(--premium-muted);
  }

  #notificacion {
    right: 14px;
    bottom: calc(142px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 28px);
  }
}

@media (max-width: 900px) {
  body.oscuro {
    background: #1f1b1d;
    color: #f8f3ef;
  }

  body.oscuro nav,
  body.oscuro .nav-links {
    background: rgba(31, 27, 29, 0.98);
    border-color: #3d3438;
  }

  body.oscuro .mobile-modo-oscuro,
  body.oscuro .mobile-favoritos-nav,
  body.oscuro .mobile-carrito-nav,
  body.oscuro .nav-links a,
  body.oscuro .nav-links #modo-oscuro,
  body.oscuro .menu-usuario,
  body.oscuro .carrito-panel,
  body.oscuro .favoritos-panel {
    background: rgba(42, 37, 39, 0.98);
    border-color: #463b40;
    color: #f8f3ef;
  }

  body.oscuro .nav-links a,
  body.oscuro .nav-links #modo-oscuro,
  body.oscuro .mobile-modo-oscuro,
  body.oscuro .mobile-favoritos-nav,
  body.oscuro .mobile-carrito-nav {
    color: #f8f3ef !important;
  }

  body.oscuro .nav-links .boton-nav-login {
    background: #f8f3ef;
    border-color: #f8f3ef;
    color: #2f2a2c !important;
  }

  body.oscuro .menu-usuario-nombre,
  body.oscuro .menu-usuario-correo,
  body.oscuro .carrito-header h3,
  body.oscuro .carrito-item-info p,
  body.oscuro .favorito-info p,
  body.oscuro .carrito-total p,
  body.oscuro .producto-info h3,
  body.oscuro .modal-info h2 {
    color: #fff;
  }

  body.oscuro .producto-info p,
  body.oscuro .favorito-info span,
  body.oscuro .modal-descripcion,
  body.oscuro .section-intro,
  body.oscuro .seccion-blanca .contenedor > p,
  body.oscuro .seccion-rosada .contenedor > p,
  body.oscuro .footer-columna p,
  body.oscuro .footer-columna a {
    color: #d8cfd3;
  }

  body.oscuro .producto,
  body.oscuro .categoria,
  body.oscuro .resena-card,
  body.oscuro .resena-formulario,
  body.oscuro .contacto-item,
  body.oscuro .buscador-wrapper,
  body.oscuro .modal-contenido {
    background: #2a2527;
    border-color: #463b40;
  }

  body.oscuro .filtro,
  body.oscuro .talla-btn,
  body.oscuro .campo input,
  body.oscuro .resena-formulario input,
  body.oscuro .resena-formulario textarea {
    background: #211d1f;
    border-color: #463b40;
    color: #f8f3ef;
  }

  body.oscuro .filtro.activo,
  body.oscuro .talla-btn.seleccionada {
    background: #f8f3ef;
    border-color: #f8f3ef;
    color: #2f2a2c;
  }

  body.oscuro #overlay,
  body.oscuro #overlay-favoritos,
  body.oscuro #overlay-modal {
    background: rgba(0, 0, 0, 0.58);
  }
}

@media (max-width: 420px) {
  .mobile-nav-actions {
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    gap: 8px;
  }

  .mobile-modo-oscuro {
    right: 12px !important;
    bottom: calc(192px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-modo-oscuro,
  .mobile-favoritos-nav,
  .mobile-carrito-nav {
    width: 50px;
    height: 50px;
    min-width: 50px;
  }

  .boton-flotante-wsp,
  #boton-subir {
    bottom: calc(18px + env(safe-area-inset-bottom));
  }
}

/* DARK MODE PREMIUM ACCESSIBILITY PASS */
body.oscuro {
  --premium-dark-bg: #181315;
  --premium-dark-section: #1f191c;
  --premium-dark-surface: #2a2327;
  --premium-dark-surface-2: #332a2f;
  --premium-dark-elevated: #3a3036;
  --premium-dark-line: rgba(255, 232, 241, 0.18);
  --premium-dark-line-strong: rgba(255, 232, 241, 0.3);
  --premium-dark-text: #fff8fb;
  --premium-dark-text-soft: #eee1e7;
  --premium-dark-muted: #d0c0c8;
  --premium-dark-subtle: #b8a8b0;
  --premium-dark-brand: #ff78aa;
  --premium-dark-brand-soft: #f5a6c4;
  --premium-dark-gold: #f0bd3c;
  --premium-dark-focus: rgba(255, 120, 170, 0.36);
  --premium-dark-shadow: 0 22px 48px rgba(0, 0, 0, 0.34);
  --premium-dark-shadow-soft: 0 14px 32px rgba(0, 0, 0, 0.24);
  background: var(--premium-dark-bg);
  color: var(--premium-dark-text);
}

body.oscuro,
body.oscuro .seccion-blanca,
body.oscuro .seccion-rosada,
body.oscuro .seccion-instagram {
  background: var(--premium-dark-bg);
}

body.oscuro .seccion-rosada,
body.oscuro .resenas-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(0, 0, 0, 0.04)),
    var(--premium-dark-section);
}

body.oscuro nav {
  background: rgba(24, 19, 21, 0.94);
  border-bottom: 1px solid var(--premium-dark-line-strong);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(18px);
}

body.oscuro .nav-links a:not(.boton-nav-login):not(.favoritos-nav):not(.carrito):not(.menu-opcion),
body.oscuro .hamburguesa {
  color: var(--premium-dark-text-soft) !important;
}

body.oscuro .nav-icono,
body.oscuro .favoritos-nav i,
body.oscuro .carrito i,
body.oscuro #modo-oscuro i,
body.oscuro .hamburguesa i {
  color: #ffd0dc;
  filter: drop-shadow(0 0 7px rgba(255, 130, 170, 0.58));
}

body.oscuro .nav-links a:not(.boton-nav-login):not(.favoritos-nav):not(.carrito):not(.menu-opcion):hover,
body.oscuro .hamburguesa:hover {
  color: var(--premium-dark-brand-soft) !important;
  background: rgba(255, 120, 170, 0.1);
}

body.oscuro .favoritos-nav,
body.oscuro .carrito,
body.oscuro #modo-oscuro,
body.oscuro .mobile-modo-oscuro,
body.oscuro .mobile-favoritos-nav,
body.oscuro .mobile-carrito-nav {
  background: rgba(35, 26, 31, 0.92);
  border-color: rgba(255, 192, 213, 0.42);
  color: #ffd0dc !important;
  box-shadow: 0 0 20px rgba(255, 120, 170, 0.18), 0 14px 30px rgba(0, 0, 0, 0.28);
}

body.oscuro .favoritos-nav:hover,
body.oscuro .carrito:hover,
body.oscuro #modo-oscuro:hover,
body.oscuro .mobile-modo-oscuro:hover,
body.oscuro .mobile-favoritos-nav:hover,
body.oscuro .mobile-carrito-nav:hover {
  background: rgba(58, 39, 48, 0.96);
  border-color: rgba(255, 192, 213, 0.68);
  color: #fff4f8 !important;
}

body.oscuro #contador,
body.oscuro #contador-favoritos,
body.oscuro .contador-carrito-mobile,
body.oscuro .contador-favoritos-mobile {
  background: #d33573;
  border-color: var(--premium-dark-bg);
  color: #fff !important;
}

body.oscuro .boton-nav-login,
body.oscuro .boton-comprar,
body.oscuro .resena-formulario button,
body.oscuro .boton-instagram-feed,
body.oscuro #boton-subir {
  background: linear-gradient(135deg, rgba(49, 34, 42, 0.96), rgba(34, 25, 30, 0.96));
  border-color: rgba(255, 192, 213, 0.36);
  color: #fff4f8 !important;
  box-shadow: 0 0 20px rgba(255, 120, 170, 0.16), 0 14px 30px rgba(0, 0, 0, 0.24);
}

body.oscuro .boton-nav-login:hover,
body.oscuro .boton-comprar:hover,
body.oscuro .resena-formulario button:hover,
body.oscuro .boton-instagram-feed:hover,
body.oscuro #boton-subir:hover {
  background: linear-gradient(135deg, var(--premium-dark-brand), #f2a5c2);
  color: #241f21 !important;
  transform: translateY(-2px);
}

body.oscuro .banner-info,
body.oscuro .stats-section,
body.oscuro footer {
  background: #211b1e;
  border-color: var(--premium-dark-line);
  color: var(--premium-dark-text-soft);
}

body.oscuro .banner-info span,
body.oscuro .stat-label,
body.oscuro .footer-columna p,
body.oscuro .footer-columna a,
body.oscuro .footer-bottom {
  color: var(--premium-dark-muted);
}

body.oscuro .stat-numero,
body.oscuro .stat-sufijo,
body.oscuro .footer-columna h3,
body.oscuro .contenedor > h2,
body.oscuro .section-eyebrow + h2,
body.oscuro .resenas-header h2,
body.oscuro .instagram-header h2,
body.oscuro .producto-info h3,
body.oscuro .categoria h3,
body.oscuro .contacto-item h3,
body.oscuro .modal-info h2,
body.oscuro .resena-formulario h3,
body.oscuro .resena-card-nombre,
body.oscuro .menu-usuario-nombre {
  color: var(--premium-dark-text) !important;
}

body.oscuro .section-eyebrow,
body.oscuro .resenas-eyebrow {
  color: #efbd63;
}

body.oscuro .section-intro,
body.oscuro .seccion-blanca .contenedor > p,
body.oscuro .seccion-rosada .contenedor > p,
body.oscuro .producto-info p,
body.oscuro .contacto-item p,
body.oscuro .instagram-header p,
body.oscuro .modal-descripcion,
body.oscuro .resena-card p,
body.oscuro .resena-card-verificada,
body.oscuro .menu-usuario-correo,
body.oscuro .favorito-info span,
body.oscuro .contacto-sub {
  color: var(--premium-dark-muted) !important;
}

body.oscuro .producto,
body.oscuro .categoria,
body.oscuro .contacto-item,
body.oscuro .resena-card,
body.oscuro .resena-formulario,
body.oscuro .modal-contenido,
body.oscuro .menu-usuario,
body.oscuro .carrito-panel,
body.oscuro .favoritos-panel {
  background: linear-gradient(180deg, var(--premium-dark-surface-2), var(--premium-dark-surface));
  border: 1px solid var(--premium-dark-line);
  box-shadow: var(--premium-dark-shadow-soft);
}

body.oscuro .producto:hover,
body.oscuro .categoria:hover,
body.oscuro .contacto-item:hover,
body.oscuro .resena-card:hover,
body.oscuro .resena-formulario:hover {
  border-color: var(--premium-dark-line-strong);
  box-shadow: var(--premium-dark-shadow);
}

body.oscuro .producto-imagen,
body.oscuro .categoria-img,
body.oscuro .modal-imagen,
body.oscuro .modal-img-placeholder {
  background: #211b1e;
  border-color: var(--premium-dark-line);
}

body.oscuro .producto-placeholder,
body.oscuro .modal-img-placeholder,
body.oscuro .carrito-icono,
body.oscuro .favorito-icono {
  color: var(--premium-dark-brand);
  opacity: 1;
}

body.oscuro .precio,
body.oscuro #modal-precio,
body.oscuro .carrito-total span,
body.oscuro .carrito-header h3,
body.oscuro .favoritos-panel .carrito-header h3 {
  color: var(--premium-dark-brand) !important;
}

body.oscuro .filtro,
body.oscuro .talla-btn,
body.oscuro .buscador-wrapper,
body.oscuro .resena-formulario input,
body.oscuro .resena-formulario textarea,
body.oscuro #buscador {
  background: #211b1e;
  border-color: var(--premium-dark-line-strong);
  color: var(--premium-dark-text);
  box-shadow: none;
}

body.oscuro .filtro {
  color: var(--premium-dark-text-soft);
}

body.oscuro .filtro:hover,
body.oscuro .filtro.activo,
body.oscuro .talla-btn:hover,
body.oscuro .talla-btn.seleccionada {
  background: rgba(255, 120, 170, 0.16);
  border-color: var(--premium-dark-brand);
  color: var(--premium-dark-text) !important;
  box-shadow: 0 0 0 1px rgba(255, 120, 170, 0.1);
}

body.oscuro input::placeholder,
body.oscuro textarea::placeholder,
body.oscuro #buscador::placeholder {
  color: #bdaeb6;
  opacity: 1;
}

body.oscuro .buscador-icono,
body.oscuro .carrito-header button,
body.oscuro .vaciar-btn,
body.oscuro .eliminar-item,
body.oscuro .modal-cerrar {
  color: var(--premium-dark-muted);
}

body.oscuro .carrito-header button:hover,
body.oscuro .vaciar-btn:hover,
body.oscuro .eliminar-item:hover,
body.oscuro .modal-cerrar:hover {
  color: var(--premium-dark-brand);
  background: rgba(255, 120, 170, 0.1);
}

body.oscuro .resenas-resumen,
body.oscuro .resenas-resumen span {
  color: var(--premium-dark-muted);
}

body.oscuro .resenas-resumen strong {
  color: var(--premium-dark-text) !important;
}

body.oscuro .resenas-resumen i,
body.oscuro .resena-card-estrellas i,
body.oscuro .estrellas-selector span.activa,
body.oscuro .estrellas-selector span:hover {
  color: var(--premium-dark-gold);
}

body.oscuro .estrellas-selector span {
  color: #b8a8b0;
}

body.oscuro .resena-avatar {
  background: rgba(255, 120, 170, 0.16);
  border-color: rgba(255, 120, 170, 0.32);
  color: var(--premium-dark-brand);
}

body.oscuro .perfil-caja,
body.oscuro .config-caja,
body.oscuro .pedido-caja,
body.oscuro .sin-pedidos,
body.oscuro .sin-favoritos,
body.oscuro .favorito-card {
  background: linear-gradient(180deg, var(--premium-dark-surface-2), var(--premium-dark-surface));
  border: 1px solid var(--premium-dark-line);
  box-shadow: var(--premium-dark-shadow-soft);
}

body.oscuro .pedido-caja:hover,
body.oscuro .favorito-card:hover {
  border-color: var(--premium-dark-line-strong);
  box-shadow: var(--premium-dark-shadow);
}

body.oscuro .perfil-info h2,
body.oscuro .perfil-caja h3,
body.oscuro .pedidos-header h2,
body.oscuro .pedido-numero,
body.oscuro .pedido-total,
body.oscuro .sin-pedidos h3,
body.oscuro .favoritos-header h2,
body.oscuro .favorito-nombre,
body.oscuro .sin-favoritos h3,
body.oscuro .config-header h2,
body.oscuro .config-caja h3 {
  color: var(--premium-dark-text) !important;
}

body.oscuro .perfil-info p,
body.oscuro .pedidos-header p,
body.oscuro .pedido-fecha,
body.oscuro .pedido-item,
body.oscuro .sin-pedidos p,
body.oscuro .favoritos-header p,
body.oscuro .sin-favoritos p,
body.oscuro .config-header p,
body.oscuro .config-caja p,
body.oscuro .campo label {
  color: var(--premium-dark-muted) !important;
}

body.oscuro .campo input {
  background: #211b1e;
  border-color: var(--premium-dark-line-strong);
  color: var(--premium-dark-text);
}

body.oscuro .campo input:focus {
  border-color: var(--premium-dark-brand);
  box-shadow: 0 0 0 4px var(--premium-dark-focus);
}

body.oscuro .volver,
body.oscuro .favorito-precio {
  color: var(--premium-dark-brand) !important;
}

body.oscuro .favorito-imagen,
body.oscuro .campo input:disabled {
  background: #211b1e;
  color: var(--premium-dark-subtle);
}

body.oscuro .pedido-productos,
body.oscuro .pedido-total {
  border-color: var(--premium-dark-line-strong);
}

body.oscuro .estado-entregado {
  background: rgba(74, 222, 128, 0.16);
  color: #8df0ad;
}

body.oscuro .estado-enviado {
  background: rgba(96, 165, 250, 0.18);
  color: #a8cdff;
}

body.oscuro .estado-pendiente {
  background: rgba(240, 189, 60, 0.18);
  color: #ffd77a;
}

body.oscuro .estado-cancelado,
body.oscuro .favorito-quitar,
body.oscuro .boton-peligro {
  background: rgba(248, 113, 113, 0.14);
  border-color: rgba(248, 113, 113, 0.34);
  color: #ffb4b4;
}

body.oscuro .favorito-quitar:hover,
body.oscuro .boton-peligro:hover {
  background: #f87171;
  color: #241f21;
}

body.oscuro .carrito-header,
body.oscuro .carrito-total,
body.oscuro .menu-separador {
  border-color: var(--premium-dark-line-strong);
}

body.oscuro .carrito-item,
body.oscuro .favorito-item {
  border-bottom: 1px solid var(--premium-dark-line-strong);
}

body.oscuro .carrito-item-info p,
body.oscuro .favorito-info p,
body.oscuro .carrito-cantidad span,
body.oscuro .carrito-item-derecha span,
body.oscuro .carrito-total p {
  color: var(--premium-dark-text) !important;
}

body.oscuro .carrito-cantidad button {
  background: #d33573;
  color: #fff;
  box-shadow: 0 8px 18px rgba(211, 53, 115, 0.28);
}

body.oscuro .menu-opcion {
  color: var(--premium-dark-text-soft) !important;
}

body.oscuro .menu-opcion:hover {
  background: rgba(255, 120, 170, 0.12);
  color: var(--premium-dark-text) !important;
}

body.oscuro .boton-favorito {
  background: rgba(255, 248, 251, 0.96);
  border-color: rgba(255, 255, 255, 0.68);
  color: #b62b5d;
}

body.oscuro .boton-favorito:hover {
  background: var(--premium-dark-brand);
  color: #241f21;
}

body.oscuro .badge-disponible {
  background: rgba(74, 222, 128, 0.16);
  border: 1px solid rgba(74, 222, 128, 0.32);
  color: #8df0ad;
}

body.oscuro .descuento-badge,
body.oscuro .agotado-badge {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32);
}

body.oscuro .banner-promo {
  background:
    linear-gradient(135deg, rgba(143, 32, 73, 0.78), rgba(42, 35, 39, 0.96)),
    #211b1e;
  border-block: 1px solid var(--premium-dark-line);
}

body.oscuro .banner-promo p {
  color: var(--premium-dark-text-soft);
}

body.oscuro footer {
  border-top-color: var(--premium-dark-brand);
}

body.oscuro .footer-bottom {
  background: #151113;
  border-top-color: var(--premium-dark-line);
}

body.oscuro #overlay,
body.oscuro #overlay-favoritos,
body.oscuro #overlay-modal {
  background: rgba(0, 0, 0, 0.64);
  backdrop-filter: blur(2px);
}

body.oscuro :where(a, button, input, textarea, [role="button"]):focus-visible {
  outline: 3px solid var(--premium-dark-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--premium-dark-brand);
}

body.oscuro .resena-formulario input:focus,
body.oscuro .resena-formulario textarea:focus,
body.oscuro #buscador:focus {
  border-color: var(--premium-dark-brand);
  box-shadow: 0 0 0 4px var(--premium-dark-focus);
}

@media (max-width: 900px) {
  .mobile-nav-actions {
    position: fixed !important;
    right: 14px !important;
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    z-index: 1300 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 9px !important;
  }

  #modo-oscuro,
  #modo-oscuro.modo-oscuro-flotante {
    position: fixed !important;
    right: 14px !important;
    bottom: calc(200px + env(safe-area-inset-bottom)) !important;
    z-index: 1400 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    padding: 0 !important;
    border: 1px solid rgba(234, 223, 218, 0.95) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--premium-ink) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: 0 14px 34px rgba(47, 42, 44, 0.18) !important;
    backdrop-filter: blur(16px);
  }

  #modo-oscuro i,
  #modo-oscuro.modo-oscuro-flotante i {
    display: block !important;
    font-size: 19px !important;
    line-height: 1 !important;
  }

  body.oscuro .nav-links {
    background: rgba(24, 19, 21, 0.98);
    border-color: var(--premium-dark-line-strong);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.34);
  }

  body.oscuro .nav-links a,
  body.oscuro .nav-links #modo-oscuro,
  body.oscuro .hamburguesa {
    border-color: var(--premium-dark-line);
  }

  body.oscuro .carrito-panel,
  body.oscuro .favoritos-panel {
    background: var(--premium-dark-surface);
  }

  body.oscuro #modo-oscuro,
  body.oscuro #modo-oscuro.modo-oscuro-flotante {
    background: rgba(35, 26, 31, 0.92) !important;
    border-color: rgba(255, 192, 213, 0.42) !important;
    color: #ffd0dc !important;
  }
}

@media (max-width: 420px) {
  #modo-oscuro,
  #modo-oscuro.modo-oscuro-flotante {
    right: 12px !important;
    bottom: calc(192px + env(safe-area-inset-bottom)) !important;
  }
}

/* MOBILE HEADER DARK MODE BUTTON */
@media (max-width: 900px) {
  body {
    padding-top: 64px !important;
  }

  nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1400 !important;
  }

  .nav-logo {
    margin-right: auto;
  }

  nav .hamburguesa {
    order: 3;
  }

  nav #modo-oscuro {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    order: 2;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    max-width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(234, 223, 218, 0.95) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: #2f2a2c !important;
    box-shadow: 0 8px 18px rgba(47, 42, 44, 0.08) !important;
    transform: none !important;
  }

  nav #modo-oscuro i {
    display: block !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  body.oscuro nav #modo-oscuro,
  body.oscuro #modo-oscuro {
    background: rgba(35, 26, 31, 0.92) !important;
    border-color: rgba(255, 192, 213, 0.42) !important;
    color: #ffd0dc !important;
    box-shadow: 0 0 20px rgba(255, 120, 170, 0.18), 0 14px 30px rgba(0, 0, 0, 0.28) !important;
  }
}

@media (max-width: 420px) {
  nav #modo-oscuro {
    flex-basis: 42px !important;
    width: 42px !important;
    max-width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin-right: 8px !important;
  }
}

/* MOBILE NAV STABLE LAYOUT */
@media (max-width: 900px) {
  body {
    padding-top: 0 !important;
    overflow-x: hidden;
  }

  body.menu-abierto {
    overflow: hidden;
  }

  nav {
    position: sticky !important;
    top: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 14px !important;
    overflow: visible !important;
    z-index: 3000 !important;
  }

  .nav-logo {
    order: 1 !important;
    min-width: 0;
    margin-right: auto !important;
    display: flex !important;
    align-items: center !important;
    z-index: 2;
  }

  .logo-img {
    width: 56px !important;
    height: 56px !important;
  }

  nav #modo-oscuro,
  nav .hamburguesa {
    order: 2 !important;
    position: static !important;
    inset: auto !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
    border: 1px solid rgba(234, 223, 218, 0.95) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: #2f2a2c !important;
    box-shadow: 0 8px 18px rgba(47, 42, 44, 0.08) !important;
    transform: none !important;
  }

  nav #modo-oscuro {
    order: 2 !important;
  }

  nav .hamburguesa {
    order: 3 !important;
  }

  .nav-links {
    order: 4 !important;
    flex: 0 0 auto !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(251, 250, 248, 0.98) !important;
    box-shadow: 0 24px 44px rgba(47, 42, 44, 0.18) !important;
    transform: none !important;
    z-index: 2990 !important;
    backdrop-filter: blur(18px);
    transition: none !important;
  }

  .nav-links.abierto {
    display: flex !important;
    max-height: none !important;
    padding: 14px 14px calc(18px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: none !important;
  }

  .nav-links .favoritos-nav,
  .nav-links .carrito {
    display: none !important;
  }

  .nav-links a:not(.menu-opcion) {
    width: 100% !important;
    max-width: none !important;
    min-height: 54px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    border: 1px solid rgba(143, 32, 73, 0.13) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #2f2a2c !important;
    box-shadow: 0 8px 18px rgba(47, 42, 44, 0.06) !important;
    font-size: clamp(14px, 4vw, 16px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: left !important;
  }

  .nav-links a:not(.menu-opcion) i,
  .nav-links .boton-nav-login i {
    flex: 0 0 22px;
    width: 22px;
    min-width: 22px;
    text-align: center;
    margin: 0 !important;
    font-size: 19px;
  }

  .nav-links a.favoritos-nav,
  .nav-links a.carrito {
    display: none !important;
  }

  .nav-links a.favoritos-nav *,
  .nav-links a.carrito * {
    display: none !important;
  }

  .nav-links .boton-nav-login {
    justify-content: flex-start !important;
    color: #fff4f8 !important;
    background: #2f2a2c !important;
    border-color: #2f2a2c !important;
  }

  .menu-usuario {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: -2px 0 2px !important;
    padding: 12px !important;
    border: 1px solid rgba(143, 32, 73, 0.13) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 8px 18px rgba(47, 42, 44, 0.06) !important;
    transform: none !important;
  }

  .menu-usuario.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .menu-opcion {
    min-height: 42px;
    gap: 12px;
    padding: 10px 12px;
  }

  .menu-opcion i {
    flex: 0 0 18px;
    width: 18px;
    min-width: 18px;
    text-align: center;
  }

  .mobile-nav-actions {
    z-index: 1200 !important;
  }

  .carrito-panel,
  .favoritos-panel {
    top: 0 !important;
    height: 100svh !important;
    max-height: 100svh !important;
    z-index: 2600 !important;
  }

  #overlay,
  #overlay-favoritos {
    top: 0 !important;
    height: 100svh !important;
    z-index: 2500 !important;
  }

  body.oscuro .nav-links a:not(.menu-opcion) {
    background: rgba(35, 26, 31, 0.94) !important;
    border-color: rgba(255, 192, 213, 0.24) !important;
    color: #fff4f8 !important;
    box-shadow: 0 0 18px rgba(255, 120, 170, 0.08), 0 10px 22px rgba(0, 0, 0, 0.24) !important;
  }

  body.oscuro .nav-links {
    background: rgba(18, 16, 17, 0.98) !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.44) !important;
  }

  body.oscuro .nav-links .boton-nav-login {
    background: linear-gradient(135deg, rgba(56, 37, 47, 0.98), rgba(35, 26, 31, 0.98)) !important;
    border-color: rgba(255, 192, 213, 0.32) !important;
    color: #fff4f8 !important;
  }

  body.oscuro .menu-usuario {
    background: rgba(35, 26, 31, 0.96) !important;
    border-color: rgba(255, 192, 213, 0.24) !important;
    box-shadow: 0 0 18px rgba(255, 120, 170, 0.08), 0 10px 22px rgba(0, 0, 0, 0.24) !important;
  }

  body.oscuro .menu-opcion {
    color: #fff4f8 !important;
  }

  body.oscuro nav #modo-oscuro,
  body.oscuro nav .hamburguesa {
    background: rgba(35, 26, 31, 0.92) !important;
    border-color: rgba(255, 192, 213, 0.42) !important;
    color: #ffd0dc !important;
    box-shadow: 0 0 20px rgba(255, 120, 170, 0.18), 0 14px 30px rgba(0, 0, 0, 0.28) !important;
  }
}

@media (max-width: 360px) {
  nav {
    gap: 8px !important;
    padding-inline: 10px !important;
  }

  .logo-img {
    width: 50px !important;
    height: 50px !important;
  }

  nav #modo-oscuro,
  nav .hamburguesa {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .nav-links a:not(.menu-opcion) {
    min-height: 50px !important;
    padding-inline: 14px !important;
    gap: 10px !important;
  }

  .nav-links {
    padding-inline: 10px !important;
  }

  .nav-links.abierto {
    padding: 12px 10px calc(16px + env(safe-area-inset-bottom)) !important;
  }
}

/* FINAL HOME NEUTRAL OVERRIDES */
.hero-eyebrow {
  color: #d6b15f;
}

.punto-hero.activo {
  background-color: #d6b15f;
}

body.oscuro .nav-icono,
body.oscuro .favoritos-nav,
body.oscuro .favoritos-nav i,
body.oscuro .carrito,
body.oscuro .carrito i,
body.oscuro #modo-oscuro,
body.oscuro #modo-oscuro i {
  color: #d6b15f !important;
  filter: drop-shadow(0 0 7px rgba(214, 177, 95, 0.34)) !important;
}

body.oscuro .favoritos-nav,
body.oscuro .carrito,
body.oscuro #modo-oscuro {
  background: rgba(32, 27, 23, 0.94) !important;
  border-color: rgba(214, 177, 95, 0.42) !important;
  box-shadow: 0 0 18px rgba(214, 177, 95, 0.12), 0 14px 30px rgba(0, 0, 0, 0.28) !important;
}

body.oscuro #contador,
body.oscuro #contador-favoritos {
  background: #d6b15f !important;
  color: #191613 !important;
}

body.oscuro .boton-nav-login {
  background: linear-gradient(135deg, #d6b15f, #b89245) !important;
  border-color: rgba(246, 220, 151, 0.55) !important;
  color: #191613 !important;
}

/* FINAL NEUTRAL BRAND PASS */
:root {
  --premium-brand: #302b2b;
  --premium-brand-dark: #1f1b1b;
  --premium-gold: #f4f0ec;
  --neutral-price: #302b2b;
  --neutral-badge-bg: #3d3838;
  --neutral-badge-text: #f4f0ec;
}

body.oscuro {
  --neutral-price: #f4f0ec;
  --neutral-badge-bg: #3d3838;
  --neutral-badge-text: #f4f0ec;
}

.hero-eyebrow,
.section-eyebrow,
.resenas-eyebrow {
  color: #302b2b !important;
}

.hero-eyebrow {
  color: #f4f0ec !important;
}

.punto-hero.activo {
  background-color: #f4f0ec !important;
}

.nav-icono,
.favoritos-nav,
.favoritos-nav i,
.carrito,
.carrito i,
#modo-oscuro,
#modo-oscuro i {
  color: #302b2b !important;
  filter: drop-shadow(0 0 7px rgba(48, 43, 43, 0.14)) !important;
}

.boton-nav-login,
.boton-comprar,
.filtro.activo,
.boton-instagram-feed,
.resena-formulario button {
  background: #f4f0ec !important;
  border-color: rgba(244, 240, 236, 0.48) !important;
  color: #1f1b1b !important;
}

.boton-comprar:hover,
.boton-nav-login:hover,
.filtro:hover,
.boton-instagram-feed:hover,
.resena-formulario button:hover {
  background: #ded8d1 !important;
  color: #1f1b1b !important;
}

.precio,
.precio-wrap .precio,
.modal-precio,
.favorito-info span,
.carrito-total span,
.carrito-item-derecha span {
  color: #302b2b !important;
}

.precio-original {
  color: rgba(48, 43, 43, 0.42) !important;
}

.descuento-badge,
.agotado-badge {
  background: #3d3838 !important;
  color: #f4f0ec !important;
}

.boton-favorito {
  color: #302b2b !important;
  border-color: rgba(48, 43, 43, 0.16) !important;
}

.boton-favorito:hover,
.boton-favorito.activo {
  background: #f4f0ec !important;
  color: #1f1b1b !important;
}

body.oscuro .hero-eyebrow,
body.oscuro .section-eyebrow,
body.oscuro .resenas-eyebrow,
body.oscuro .nav-icono,
body.oscuro .favoritos-nav,
body.oscuro .favoritos-nav i,
body.oscuro .carrito,
body.oscuro .carrito i,
body.oscuro #modo-oscuro,
body.oscuro #modo-oscuro i {
  color: #f4f0ec !important;
  filter: drop-shadow(0 0 7px rgba(244, 240, 236, 0.18)) !important;
}

body.oscuro .favoritos-nav,
body.oscuro .carrito,
body.oscuro #modo-oscuro {
  background: rgba(29, 25, 25, 0.94) !important;
  border-color: rgba(244, 240, 236, 0.24) !important;
  box-shadow: 0 0 18px rgba(244, 240, 236, 0.07), 0 14px 30px rgba(0, 0, 0, 0.28) !important;
}

body.oscuro #contador,
body.oscuro #contador-favoritos,
body.oscuro .contador-carrito-mobile,
body.oscuro .contador-favoritos-mobile {
  background: #f4f0ec !important;
  color: #1f1b1b !important;
}

body.oscuro .boton-nav-login,
body.oscuro .boton-comprar,
body.oscuro .filtro.activo,
body.oscuro .boton-instagram-feed,
body.oscuro .resena-formulario button {
  background: #f4f0ec !important;
  border-color: rgba(244, 240, 236, 0.34) !important;
  color: #1f1b1b !important;
}

body.oscuro .precio,
body.oscuro .precio-wrap .precio,
body.oscuro .modal-precio,
body.oscuro .favorito-info span,
body.oscuro .carrito-total span,
body.oscuro .carrito-item-derecha span {
  color: #f4f0ec !important;
}

.menu-opcion i,
body.oscuro .menu-opcion i {
  color: #302b2b !important;
}

.cerrar-sesion {
  background: #f4f0ec !important;
  color: #302b2b !important;
}

.cerrar-sesion i {
  color: #302b2b !important;
}

.cerrar-sesion:hover {
  background: #e8e1da !important;
}

body.oscuro .cerrar-sesion {
  background: rgba(244, 240, 236, 0.1) !important;
  color: #f4f0ec !important;
}

body.oscuro .cerrar-sesion i {
  color: #f4f0ec !important;
}

/* ACCESSIBLE THEME CONTRAST PASS */
:root {
  --theme-bg: #fbfaf8;
  --theme-surface: #ffffff;
  --theme-surface-soft: #f3efeb;
  --theme-border: #e4ddd7;
  --theme-text: #241f1f;
  --theme-text-muted: #625a57;
  --theme-accent: #302b2b;
  --theme-accent-contrast: #ffffff;
  --theme-hero-text: #ffffff;
  --theme-hero-shadow: 0 3px 22px rgba(0, 0, 0, 0.48);
}

body.oscuro {
  --theme-bg: #141011;
  --theme-surface: #211b1e;
  --theme-surface-soft: #2b2427;
  --theme-border: #463b40;
  --theme-text: #fff7f3;
  --theme-text-muted: #d8cbc5;
  --theme-accent: #f4f0ec;
  --theme-accent-contrast: #191514;
  --theme-hero-text: #ffffff;
  --theme-hero-shadow: 0 4px 26px rgba(0, 0, 0, 0.62);
}

nav {
  background: rgba(251, 250, 248, 0.94) !important;
  border-bottom-color: var(--theme-border) !important;
}

body.oscuro nav {
  background: rgba(20, 16, 17, 0.96) !important;
  border-bottom-color: var(--theme-border) !important;
}

.nav-links a:not(.boton-nav-login):not(.favoritos-nav):not(.carrito):not(.menu-opcion) {
  color: var(--theme-text) !important;
}

.nav-icono,
.favoritos-nav,
.favoritos-nav i,
.carrito,
.carrito i,
#modo-oscuro,
#modo-oscuro i,
.hamburguesa,
.hamburguesa i {
  color: var(--theme-accent) !important;
  filter: none !important;
}

.favoritos-nav,
.carrito,
#modo-oscuro,
.mobile-favoritos-nav,
.mobile-carrito-nav,
.mobile-modo-oscuro {
  background: var(--theme-surface) !important;
  border: 1px solid var(--theme-border) !important;
  color: var(--theme-accent) !important;
  box-shadow: 0 10px 26px rgba(36, 31, 31, 0.08) !important;
}

body.oscuro .favoritos-nav,
body.oscuro .carrito,
body.oscuro #modo-oscuro,
body.oscuro .mobile-favoritos-nav,
body.oscuro .mobile-carrito-nav,
body.oscuro .mobile-modo-oscuro {
  background: rgba(33, 27, 30, 0.96) !important;
  border-color: var(--theme-border) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32) !important;
}

.boton-nav-login {
  background: var(--theme-accent) !important;
  border: 1px solid var(--theme-accent) !important;
  color: var(--theme-accent-contrast) !important;
}

.boton-nav-login i {
  color: inherit !important;
  filter: none !important;
}

.boton-nav-login:hover {
  background: var(--theme-text) !important;
  color: var(--theme-surface) !important;
}

#contador,
#contador-favoritos,
.contador-carrito-mobile,
.contador-favoritos-mobile {
  background: var(--theme-text) !important;
  color: var(--theme-surface) !important;
  border: 1px solid var(--theme-surface) !important;
}

body.oscuro #contador,
body.oscuro #contador-favoritos,
body.oscuro .contador-carrito-mobile,
body.oscuro .contador-favoritos-mobile {
  background: var(--theme-accent) !important;
  color: var(--theme-accent-contrast) !important;
  border-color: var(--theme-surface) !important;
}

.hero-carrusel .diapositiva::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.44)),
    radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.42) 70%) !important;
}

.hero-contenido h1,
.hero-contenido p,
.hero-eyebrow {
  color: var(--theme-hero-text) !important;
  text-shadow: var(--theme-hero-shadow) !important;
}

.hero-eyebrow {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 999px;
  display: inline-block;
  padding: 5px 12px;
}

.boton-hero {
  background: #ffffff !important;
  color: #191514 !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
}

.boton-hero:hover {
  background: #e8e1da !important;
  color: #191514 !important;
}

.carrito-panel,
.favoritos-panel {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-left: 1px solid var(--theme-border) !important;
}

.carrito-header,
.carrito-total {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
}

.carrito-header h3,
.carrito-total p,
.carrito-total span {
  color: var(--theme-text) !important;
}

.carrito-item,
.favorito-item {
  background: var(--theme-surface-soft) !important;
  border-color: var(--theme-border) !important;
}

.carrito-item-info p,
.favorito-info p,
.carrito-cantidad span,
.carrito-item-derecha span {
  color: var(--theme-text) !important;
}

.carrito-item-info small,
.favorito-info small,
.carrito-item-info .item-detalle,
.carrito-item-info .item-talla,
.carrito-total small {
  color: var(--theme-text-muted) !important;
}

.eliminar-item,
.vaciar-btn,
.carrito-header button {
  color: var(--theme-text) !important;
  background: transparent !important;
}

.carrito-cantidad button {
  background: var(--theme-accent) !important;
  color: var(--theme-accent-contrast) !important;
}

/* USER MENU DARK MODE CONTRAST FIX */
.menu-usuario {
  background: var(--theme-surface) !important;
  border: 1px solid var(--theme-border) !important;
  color: var(--theme-text) !important;
  box-shadow: 0 18px 46px rgba(36, 31, 31, 0.14) !important;
}

.menu-usuario-nombre,
.menu-opcion {
  color: var(--theme-text) !important;
}

.menu-usuario-correo {
  color: var(--theme-text-muted) !important;
}

.menu-separador {
  border-top-color: var(--theme-border) !important;
}

.menu-opcion {
  background: transparent !important;
}

.menu-opcion i {
  color: var(--theme-text) !important;
  opacity: 0.92;
}

.menu-opcion:hover,
.menu-opcion:focus-visible {
  background: var(--theme-surface-soft) !important;
  color: var(--theme-text) !important;
}

.cerrar-sesion {
  background: var(--theme-surface-soft) !important;
  color: var(--theme-text) !important;
}

.cerrar-sesion i {
  color: var(--theme-text) !important;
}

.cerrar-sesion:hover,
.cerrar-sesion:focus-visible {
  background: #e8e1da !important;
}

body.oscuro .menu-usuario {
  background: #241e21 !important;
  border-color: #5b4d52 !important;
  color: #fff7f3 !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.44) !important;
}

body.oscuro .menu-usuario-nombre,
body.oscuro .menu-opcion,
body.oscuro .menu-opcion i {
  color: #fff7f3 !important;
}

body.oscuro .menu-usuario-correo {
  color: #d8cbc5 !important;
}

body.oscuro .menu-separador {
  border-top-color: #5b4d52 !important;
}

body.oscuro .menu-opcion {
  background: transparent !important;
}

body.oscuro .menu-opcion:hover,
body.oscuro .menu-opcion:focus-visible {
  background: #332a2e !important;
  color: #fff7f3 !important;
}

body.oscuro .cerrar-sesion {
  background: #3a3135 !important;
  color: #fff7f3 !important;
}

body.oscuro .cerrar-sesion i {
  color: #fff7f3 !important;
}

body.oscuro .cerrar-sesion:hover,
body.oscuro .cerrar-sesion:focus-visible {
  background: #4a3f44 !important;
}

/* CART AND FAVORITES PANEL NEUTRALIZATION */
.carrito-panel .carrito-header h3,
.favoritos-panel .carrito-header h3,
.carrito-panel .carrito-header h3 i,
.favoritos-panel .carrito-header h3 i,
.carrito-icono,
.favorito-icono {
  color: var(--theme-text) !important;
}

.panel-vacio {
  margin-top: 20px;
  text-align: center;
  color: var(--theme-text-muted) !important;
}

.carrito-panel .vaciar-btn,
.favoritos-panel .vaciar-btn,
.carrito-panel .carrito-header button,
.favoritos-panel .carrito-header button,
.carrito-panel .eliminar-item,
.favoritos-panel .eliminar-item {
  color: var(--theme-text) !important;
  opacity: 0.95;
}

body.oscuro .carrito-panel,
body.oscuro .favoritos-panel,
body.oscuro .carrito-panel .carrito-header,
body.oscuro .favoritos-panel .carrito-header,
body.oscuro .carrito-total {
  background: #211b1e !important;
  border-color: #5b4d52 !important;
}

body.oscuro .carrito-panel .carrito-header h3,
body.oscuro .favoritos-panel .carrito-header h3,
body.oscuro .carrito-panel .carrito-header h3 i,
body.oscuro .favoritos-panel .carrito-header h3 i,
body.oscuro .carrito-icono,
body.oscuro .favorito-icono {
  color: #fff7f3 !important;
}

body.oscuro .panel-vacio {
  color: #d8cbc5 !important;
}

body.oscuro .carrito-panel .vaciar-btn,
body.oscuro .favoritos-panel .vaciar-btn,
body.oscuro .carrito-panel .carrito-header button,
body.oscuro .favoritos-panel .carrito-header button,
body.oscuro .carrito-panel .eliminar-item,
body.oscuro .favoritos-panel .eliminar-item {
  color: #fff7f3 !important;
}

/* DARK NAV ICON FINAL OVERRIDE */
body.oscuro .nav-links a:not(.boton-nav-login):not(.favoritos-nav):not(.carrito):not(.menu-opcion),
body.oscuro .nav-links a:not(.boton-nav-login):not(.favoritos-nav):not(.carrito):not(.menu-opcion):hover,
body.oscuro .nav-links a:not(.boton-nav-login):not(.favoritos-nav):not(.carrito):not(.menu-opcion).activo {
  color: #f4f0ec !important;
}

body.oscuro .nav-links a .nav-icono,
body.oscuro .nav-links a:hover .nav-icono,
body.oscuro .nav-links a.activo .nav-icono {
  color: #f4f0ec !important;
  filter: none !important;
}

body.oscuro .nav-links a.activo,
body.oscuro .nav-links a:hover {
  background: rgba(244, 240, 236, 0.08) !important;
}

/* DARK SESSION BUTTON CONTRAST FIX */
body.oscuro .boton-nav-login,
body.oscuro .nav-links .boton-nav-login,
body.oscuro #boton-sesion {
  background: #f4f0ec !important;
  border-color: #f4f0ec !important;
  color: #191514 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26) !important;
}

body.oscuro .boton-nav-login i,
body.oscuro .nav-links .boton-nav-login i,
body.oscuro #boton-sesion i {
  color: #191514 !important;
  filter: none !important;
}

body.oscuro .boton-nav-login:hover,
body.oscuro .nav-links .boton-nav-login:hover,
body.oscuro #boton-sesion:hover {
  background: #e8e1da !important;
  border-color: #e8e1da !important;
  color: #191514 !important;
}

/* PRODUCT PRICE DISCOUNT ALIGNMENT */
.producto .precio-wrap {
  display: grid !important;
  grid-template-columns: max-content max-content max-content;
  align-items: center;
  justify-content: start;
  column-gap: 8px;
  min-height: 34px;
  width: 100%;
  margin: 6px 0 2px;
}

.producto .precio-original {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 13px !important;
  line-height: 1;
  color: rgba(48, 43, 43, 0.42) !important;
  white-space: nowrap;
}

.producto .precio-wrap .precio {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-size: clamp(20px, 1.5vw, 24px) !important;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.producto .descuento-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 24px;
  padding: 0 9px !important;
  border-radius: 999px;
  font-size: 10px !important;
  line-height: 1;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transform: translateY(1px);
}

@media (max-width: 520px) {
  .producto .precio-wrap {
    column-gap: 6px;
  }

  .producto .precio-original {
    font-size: 12px !important;
  }

  .producto .precio-wrap .precio {
    font-size: 19px !important;
  }

  .producto .descuento-badge {
    min-width: 52px;
    padding-inline: 7px !important;
    font-size: 9px !important;
  }
}

/* PRODUCT CARD PRICE BLOCK REBALANCE */
.producto {
  display: flex;
  flex-direction: column;
}

.producto-info {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.producto-info h3 {
  min-height: 42px;
}

.producto-info p {
  min-height: 44px;
}

.producto .precio-wrap {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  min-height: 54px;
  margin: auto 0 10px;
}

.producto .precio-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
}

.producto .precio-original {
  min-height: auto;
  font-size: 13px !important;
}

.producto .precio-wrap .precio {
  min-height: auto;
  font-size: 24px !important;
}

.producto .descuento-badge {
  min-width: 62px;
  min-height: 22px;
  transform: none;
}

.producto .precio-wrap-simple .precio-meta {
  visibility: hidden;
}

.producto-acciones {
  margin-top: 0 !important;
}

@media (max-width: 520px) {
  .producto-info h3 {
    min-height: 38px;
  }

  .producto-info p {
    min-height: 40px;
  }

  .producto .precio-wrap {
    min-height: 50px;
  }

  .producto .precio-wrap .precio {
    font-size: 21px !important;
  }

  .producto .descuento-badge {
    min-width: 56px;
  }
}

/* PRODUCT CARD VISUAL AUDIT NORMALIZATION */
.productos-grid {
  align-items: stretch;
}

.producto {
  display: grid !important;
  grid-template-rows: auto 1fr;
  height: 100%;
}

.producto-imagen {
  aspect-ratio: 1 / 1;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.producto-imagen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.producto-info {
  display: grid !important;
  grid-template-rows: 44px 48px 62px 38px 52px;
  gap: 10px;
  padding: 16px !important;
}

.producto-info h3 {
  min-height: 0 !important;
  margin: 0 !important;
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.producto-info p {
  min-height: 0 !important;
  margin: 0 !important;
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.producto .precio-wrap {
  align-self: center;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-height: 0 !important;
  margin: 0 !important;
  text-align: center;
}

.producto .precio-meta {
  justify-content: center;
  min-height: 22px;
  width: 100%;
}

.producto .precio-wrap .precio {
  font-size: 24px !important;
  line-height: 1.05;
}

.producto .tallas-selector {
  align-self: center;
  min-height: 38px;
  margin: 0 !important;
}

.producto .tallas-selector.sin-tallas {
  visibility: hidden;
  pointer-events: none;
}

.producto-acciones {
  align-self: end;
  grid-template-columns: minmax(0, 1fr) 46px !important;
  gap: 10px !important;
  margin: 0 !important;
}

.producto-acciones .boton-comprar,
.producto-acciones .boton-favorito {
  min-height: 52px !important;
}

.producto-acciones .boton-favorito {
  width: 46px !important;
  height: 52px !important;
}

@media (max-width: 520px) {
  .producto-info {
    grid-template-rows: 40px 44px 58px 36px 48px;
    gap: 8px;
    padding: 13px !important;
  }

  .producto .precio-wrap .precio {
    font-size: 21px !important;
  }

  .producto-acciones {
    grid-template-columns: minmax(0, 1fr) 42px !important;
  }

  .producto-acciones .boton-comprar,
  .producto-acciones .boton-favorito {
    min-height: 48px !important;
  }

  .producto-acciones .boton-favorito {
    width: 42px !important;
    height: 48px !important;
  }
}

/* DARK PRODUCT OLD PRICE CONTRAST */
body.oscuro .producto .precio-original {
  color: #cfc3bd !important;
  opacity: 1 !important;
}

body.oscuro .producto .precio-original::selection {
  color: #191514;
  background: #f4f0ec;
}

/* MOBILE PRODUCT EXPERIENCE FIX */
@media (max-width: 700px) {
  body {
    padding-bottom: 96px;
  }

  .productos-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 430px !important;
    width: 100% !important;
    gap: 20px !important;
    padding-inline: 14px;
  }

  .producto {
    width: 100% !important;
    max-width: none !important;
    border-radius: 12px;
  }

  .producto-info {
    grid-template-rows: 46px 46px 58px 38px 50px !important;
    gap: 9px !important;
    padding: 16px !important;
  }

  .producto-info h3 {
    font-size: 18px !important;
  }

  .producto-info p {
    font-size: 15px !important;
  }

  .producto .precio-wrap .precio {
    font-size: 26px !important;
  }

  .producto-acciones {
    grid-template-columns: minmax(0, 1fr) 54px !important;
  }

  .producto-acciones .boton-comprar,
  .producto-acciones .boton-favorito {
    min-height: 50px !important;
  }

  .producto-acciones .boton-favorito {
    width: 54px !important;
    height: 50px !important;
  }

  .mobile-nav-actions {
    right: 12px !important;
    bottom: 78px !important;
    gap: 8px !important;
    z-index: 1200 !important;
  }

  .mobile-favoritos-nav,
  .mobile-carrito-nav {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 50% !important;
    font-size: 20px !important;
  }

  .boton-whatsapp {
    left: 12px !important;
    bottom: 18px !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    z-index: 1201 !important;
  }

  .boton-whatsapp i {
    font-size: 28px !important;
    margin: 0 !important;
  }

  #boton-subir {
    right: 12px !important;
    bottom: 18px !important;
    width: 52px !important;
    height: 52px !important;
    z-index: 1200 !important;
  }
}

/* MOBILE TWO-COLUMN PRODUCT GRID RESTORE */
@media (max-width: 700px) {
  .productos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: none !important;
    gap: 12px !important;
    padding-inline: 10px !important;
  }

  .producto {
    min-width: 0 !important;
    border-radius: 10px !important;
  }

  .producto-info {
    grid-template-rows: 44px 54px 54px 76px 46px !important;
    gap: 7px !important;
    padding: 12px !important;
  }

  .producto-info h3 {
    font-size: 15px !important;
    line-height: 1.28 !important;
  }

  .producto-info p {
    font-size: 13px !important;
    line-height: 1.42 !important;
  }

  .producto .precio-meta {
    gap: 6px !important;
  }

  .producto .precio-original {
    font-size: 11px !important;
  }

  .producto .descuento-badge {
    min-width: 50px !important;
    min-height: 20px !important;
    padding-inline: 6px !important;
    font-size: 8px !important;
  }

  .producto .precio-wrap .precio {
    font-size: 20px !important;
  }

  .producto .tallas-selector {
    align-content: start;
    align-self: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 7px !important;
    min-height: 76px !important;
  }

  .producto .talla-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    font-size: 12px !important;
  }

  .producto-acciones {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 8px !important;
  }

  .producto-acciones .boton-comprar,
  .producto-acciones .boton-favorito {
    min-height: 46px !important;
  }

  .producto-acciones .boton-comprar {
    padding-inline: 8px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }

  .producto-acciones .boton-favorito {
    width: 44px !important;
    height: 46px !important;
    font-size: 20px !important;
  }

  .mobile-nav-actions {
    right: 8px !important;
    bottom: 92px !important;
  }

  .mobile-favoritos-nav,
  .mobile-carrito-nav {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    font-size: 18px !important;
  }
}

@media (max-width: 360px) {
  .productos-grid {
    gap: 10px !important;
    padding-inline: 8px !important;
  }

  .producto-info {
    padding: 10px !important;
  }

  .producto-acciones .boton-comprar span {
    display: none;
  }
}

/* MOBILE PRODUCT BUGFIX PASS */
@media (max-width: 700px) {
  .productos-grid {
    align-items: start !important;
    padding-right: 72px !important;
  }

  .producto {
    display: flex !important;
    flex-direction: column;
    height: auto !important;
    align-self: start !important;
  }

  .producto-info {
    display: flex !important;
    flex-direction: column;
    min-height: 340px;
  }

  .producto-info h3 {
    min-height: 42px !important;
    max-height: 42px;
  }

  .producto-info p {
    min-height: 40px !important;
    max-height: 40px;
  }

  .producto .precio-wrap {
    min-height: 58px !important;
    margin: 0 !important;
  }

  .producto .tallas-selector {
    min-height: 78px !important;
    max-height: 78px;
    overflow: hidden;
  }

  .producto-acciones {
    margin-top: auto !important;
  }

  .mobile-nav-actions {
    right: 6px !important;
    bottom: 132px !important;
  }

  #boton-subir {
    right: 10px !important;
    bottom: 70px !important;
  }
}

@media (max-width: 390px) {
  .productos-grid {
    padding-right: 64px !important;
  }

  .producto-info {
    min-height: 326px;
    padding: 10px !important;
  }

  .producto-info h3 {
    font-size: 14px !important;
  }

  .producto-info p {
    font-size: 12px !important;
  }

  .producto .precio-wrap .precio {
    font-size: 19px !important;
  }

  .producto .talla-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
  }

  .producto-acciones {
    grid-template-columns: minmax(0, 1fr) 40px !important;
    gap: 6px !important;
  }

  .producto-acciones .boton-comprar,
  .producto-acciones .boton-favorito {
    min-height: 44px !important;
  }

  .producto-acciones .boton-comprar {
    font-size: 12px !important;
  }

  .producto-acciones .boton-favorito {
    width: 40px !important;
    height: 44px !important;
  }

  .mobile-favoritos-nav,
  .mobile-carrito-nav,
  #boton-subir {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
}

/* FINAL MOBILE PRODUCT LAYOUT RESET */
@media (max-width: 700px) {
  body {
    padding-bottom: 84px !important;
  }

  .productos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
    padding: 0 12px !important;
    margin-inline: auto !important;
    align-items: start !important;
  }

  .producto {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    align-self: start !important;
    overflow: hidden !important;
  }

  .producto-info {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 12px !important;
    gap: 9px !important;
  }

  .producto-info h3 {
    min-height: 40px !important;
    max-height: 40px !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  .producto-info p {
    min-height: 40px !important;
    max-height: 40px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .producto .precio-wrap {
    min-height: 56px !important;
    margin: 0 !important;
  }

  .producto .precio-meta {
    gap: 6px !important;
  }

  .producto .precio-original {
    font-size: 11px !important;
  }

  .producto .descuento-badge {
    min-width: 50px !important;
    min-height: 20px !important;
    padding: 0 6px !important;
    font-size: 8px !important;
  }

  .producto .precio-wrap .precio {
    font-size: 20px !important;
  }

  .producto .tallas-selector {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    gap: 7px !important;
    min-height: 38px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .producto .tallas-selector.sin-tallas {
    display: block !important;
    min-height: 38px !important;
  }

  .producto .talla-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    font-size: 12px !important;
  }

  .producto-acciones {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    gap: 7px !important;
    margin-top: 2px !important;
  }

  .producto-acciones .boton-comprar,
  .producto-acciones .boton-favorito {
    min-height: 44px !important;
    height: 44px !important;
  }

  .producto-acciones .boton-comprar {
    min-width: 0 !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  .producto-acciones .boton-comprar i {
    margin-right: 4px !important;
  }

  .producto-acciones .boton-favorito {
    width: 42px !important;
    min-width: 42px !important;
    height: 44px !important;
    font-size: 20px !important;
  }

  .mobile-nav-actions {
    display: none !important;
  }

  .boton-whatsapp {
    left: 12px !important;
    bottom: 14px !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
  }

  #boton-subir {
    right: 12px !important;
    bottom: 14px !important;
    width: 50px !important;
    height: 50px !important;
  }
}

@media (max-width: 360px) {
  .productos-grid {
    gap: 10px !important;
    padding-inline: 9px !important;
  }

  .producto-info {
    padding: 10px !important;
    gap: 8px !important;
  }

  .producto-info h3 {
    font-size: 14px !important;
  }

  .producto-info p {
    font-size: 12px !important;
  }

  .producto-acciones {
    grid-template-columns: minmax(0, 1fr) 40px !important;
    gap: 6px !important;
  }

  .producto-acciones .boton-favorito {
    width: 40px !important;
    min-width: 40px !important;
  }
}

/* MOBILE PRODUCT GRID FINAL STABILIZATION */
@media (max-width: 700px) {
  .seccion-blanca,
  .seccion-rosada {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .productos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 0 10px 110px !important;
    align-items: stretch !important;
  }

  .producto {
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    height: 100% !important;
  }

  .producto-info {
    display: grid !important;
    grid-template-rows: 42px 42px 58px 44px 48px !important;
    min-height: 0 !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  .producto-info h3,
  .producto-info p {
    min-height: 0 !important;
    max-height: none !important;
  }

  .producto .precio-wrap {
    min-height: 0 !important;
    align-self: center !important;
  }

  .producto .tallas-selector {
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    align-self: start !important;
  }

  .producto .talla-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
  }

  .producto-acciones {
    align-self: end !important;
    margin-top: 0 !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    gap: 7px !important;
  }

  .producto-acciones .boton-comprar {
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 6px !important;
    font-size: 12px !important;
  }

  .producto-acciones .boton-favorito {
    width: 42px !important;
    min-width: 42px !important;
    height: 46px !important;
    min-height: 46px !important;
  }

  .mobile-nav-actions,
  #boton-subir {
    display: none !important;
  }

  .boton-whatsapp {
    position: fixed !important;
    left: 10px !important;
    bottom: 10px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 12px !important;
    opacity: 0.94;
  }
}

@media (max-width: 380px) {
  .productos-grid {
    gap: 10px !important;
    padding-inline: 8px !important;
  }

  .producto-info {
    grid-template-rows: 40px 40px 56px 42px 46px !important;
    gap: 7px !important;
    padding: 10px !important;
  }

  .producto-info h3 {
    font-size: 14px !important;
  }

  .producto-info p {
    font-size: 12px !important;
  }

  .producto .precio-wrap .precio {
    font-size: 19px !important;
  }

  .producto-acciones {
    grid-template-columns: minmax(0, 1fr) 40px !important;
    gap: 6px !important;
  }

  .producto-acciones .boton-favorito {
    width: 40px !important;
    min-width: 40px !important;
  }
}

/* MOBILE CATALOG CARD REDESIGN */
@media (max-width: 700px) {
  .productos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 0 12px 96px !important;
    align-items: start !important;
  }

  .producto {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .producto-imagen {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }

  .producto-info {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 10px !important;
    gap: 8px !important;
  }

  .producto-info h3 {
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.28 !important;
    -webkit-line-clamp: 2 !important;
  }

  .producto-info p {
    display: none !important;
  }

  .producto .precio-wrap {
    min-height: 50px !important;
    margin: 0 !important;
    gap: 4px !important;
  }

  .producto .precio-meta {
    min-height: 18px !important;
    gap: 5px !important;
  }

  .producto .precio-original {
    font-size: 11px !important;
  }

  .producto .descuento-badge {
    min-width: 48px !important;
    min-height: 18px !important;
    padding: 0 5px !important;
    font-size: 8px !important;
  }

  .producto .precio-wrap .precio {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .producto .tallas-selector {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    min-height: 32px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 1px !important;
    scrollbar-width: none;
  }

  .producto .tallas-selector::-webkit-scrollbar {
    display: none;
  }

  .producto .tallas-selector.sin-tallas {
    display: none !important;
  }

  .producto .talla-btn {
    flex: 0 0 auto;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
  }

  .producto-acciones {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px !important;
    gap: 7px !important;
    margin-top: 0 !important;
  }

  .producto-acciones .boton-comprar,
  .producto-acciones .boton-favorito {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 10px !important;
  }

  .producto-acciones .boton-comprar {
    padding: 0 6px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .producto-acciones .boton-favorito {
    width: 40px !important;
    min-width: 40px !important;
    font-size: 19px !important;
  }

  .mobile-nav-actions,
  #boton-subir {
    display: none !important;
  }

  .boton-whatsapp {
    left: 10px !important;
    bottom: 10px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 360px) {
  .productos-grid {
    gap: 10px !important;
    padding-inline: 8px !important;
  }

  .producto-info {
    padding: 9px !important;
    gap: 7px !important;
  }

  .producto-info h3 {
    font-size: 13px !important;
  }

  .producto .precio-wrap .precio {
    font-size: 18px !important;
  }

  .producto-acciones {
    grid-template-columns: minmax(0, 1fr) 38px !important;
    gap: 6px !important;
  }

  .producto-acciones .boton-comprar {
    font-size: 11px !important;
  }

  .producto-acciones .boton-favorito {
    width: 38px !important;
    min-width: 38px !important;
  }
}

/* MOBILE DOMAIN FIX: floating actions + aligned product cards */
#boton-subir.visible {
  display: flex !important;
}

@media (max-width: 700px) {
  body {
    padding-bottom: 110px !important;
  }

  .mobile-nav-actions {
    position: fixed !important;
    right: 10px !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 1210 !important;
  }

  .mobile-favoritos-nav,
  .mobile-carrito-nav {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid #eee7e2 !important;
    color: #2f2a2c !important;
    box-shadow: 0 10px 26px rgba(40, 32, 35, 0.16) !important;
    text-decoration: none !important;
  }

  .contador-carrito-mobile,
  .contador-favoritos-mobile {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  #boton-subir {
    right: 10px !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1210 !important;
  }

  #boton-subir:not(.visible) {
    display: none !important;
  }

  .boton-whatsapp {
    left: 10px !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }

  .productos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 0 10px 110px !important;
  }

  .producto {
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .producto-info {
    display: grid !important;
    grid-template-rows: 38px 50px 34px 42px !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .producto-info h3 {
    min-height: 0 !important;
    max-height: 38px !important;
  }

  .producto-info p {
    display: none !important;
  }

  .producto .precio-wrap {
    min-height: 0 !important;
  }

  .producto .tallas-selector,
  .producto .tallas-selector.sin-tallas {
    display: flex !important;
    min-height: 34px !important;
    max-height: 34px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .producto .tallas-selector.sin-tallas {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .producto-acciones {
    align-self: end !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px !important;
    gap: 7px !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 380px) {
  .producto-info {
    grid-template-rows: 36px 48px 32px 40px !important;
    gap: 7px !important;
    padding: 9px !important;
  }

  .producto .precio-wrap .precio {
    font-size: 18px !important;
  }

  .producto-acciones {
    grid-template-columns: minmax(0, 1fr) 38px !important;
    gap: 6px !important;
  }

  .producto-acciones .boton-comprar,
  .producto-acciones .boton-favorito {
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* Mobile cart/favorites panel final layout fix */
.carrito-panel,
.favoritos-panel {
  box-sizing: border-box;
}

.carrito-item,
.favorito-item {
  min-width: 0;
}

.carrito-item-info,
.favorito-info {
  min-width: 0;
}

.carrito-item-info p,
.favorito-info p {
  margin-top: 0;
}

.carrito-total #boton-pedir-todo {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 48px !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  text-align: center !important;
  z-index: auto !important;
}

.carrito-total #boton-pedir-todo i {
  font-size: 20px !important;
  margin: 0 !important;
  flex: 0 0 auto;
}

@media (max-width: 520px) {
  .carrito-panel,
  .favoritos-panel {
    left: 8px;
    right: auto;
    width: calc(100vw - 16px) !important;
    padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)) !important;
    border-radius: 14px !important;
  }

  .carrito-panel:not(.abierto),
  .favoritos-panel:not(.abierto) {
    transform: translateX(calc(100vw + 24px));
  }

  .carrito-panel.abierto,
  .favoritos-panel.abierto {
    right: auto !important;
    transform: translateX(0);
  }

  .carrito-header {
    gap: 8px !important;
  }

  .carrito-header h3 {
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.1;
  }

  .carrito-header > div {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }

  .carrito-header button {
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 4px !important;
  }

  .vaciar-btn {
    width: auto !important;
    min-width: 0 !important;
    gap: 5px;
    font-size: 16px !important;
    white-space: nowrap;
  }

  #carrito-items,
  #favoritos-items {
    padding-bottom: 10px;
  }

  .carrito-item,
  .favorito-item {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 10px !important;
  }

  .carrito-item img,
  .favorito-item img {
    width: 64px !important;
    height: 64px !important;
  }

  .carrito-item-info {
    padding: 0 !important;
  }

  .carrito-item-info p,
  .favorito-info p {
    font-size: clamp(16px, 4.3vw, 22px) !important;
    line-height: 1.18 !important;
  }

  .favorito-info span,
  .carrito-item-derecha span {
    font-size: clamp(15px, 4vw, 20px) !important;
  }

  .carrito-cantidad {
    gap: 10px !important;
  }

  .carrito-cantidad button {
    width: 40px !important;
    height: 40px !important;
    font-size: 24px !important;
  }

  .carrito-cantidad span {
    font-size: 18px !important;
  }

  .carrito-item-derecha {
    min-width: 74px !important;
    align-self: stretch;
    justify-content: space-between;
  }

  .favorito-item .eliminar-item {
    align-self: center;
  }
}

@media (max-width: 380px) {
  .carrito-item,
  .favorito-item {
    grid-template-columns: 60px minmax(0, 1fr) auto;
    padding-inline: 8px !important;
  }

  .carrito-item img,
  .favorito-item img {
    width: 54px !important;
    height: 54px !important;
  }

  .carrito-cantidad button {
    width: 34px !important;
    height: 34px !important;
  }
}

/* Mobile fixed nav + panel offset fix */
@media (max-width: 900px) {
  :root {
    --mobile-nav-offset: 84px;
  }

  body {
    padding-top: var(--mobile-nav-offset) !important;
  }

  nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 3000 !important;
  }

  .carrito-panel,
  .favoritos-panel {
    top: var(--mobile-nav-offset) !important;
    height: calc(100svh - var(--mobile-nav-offset)) !important;
    max-height: calc(100svh - var(--mobile-nav-offset)) !important;
  }

  #overlay,
  #overlay-favoritos {
    top: var(--mobile-nav-offset) !important;
    height: calc(100svh - var(--mobile-nav-offset)) !important;
  }
}

@media (max-width: 420px) {
  :root {
    --mobile-nav-offset: 80px;
  }
}

/* Mobile product modal and scroll-arrow visual fix */
@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .modal-producto {
    top: var(--mobile-nav-offset, 80px) !important;
    bottom: 0 !important;
    height: auto !important;
    padding: 8px 10px max(14px, env(safe-area-inset-bottom)) !important;
    align-items: flex-start !important;
    overflow-y: auto;
  }

  #overlay-modal {
    top: var(--mobile-nav-offset, 80px) !important;
    height: calc(100svh - var(--mobile-nav-offset, 80px)) !important;
  }

  .modal-contenido {
    max-height: calc(100svh - var(--mobile-nav-offset, 80px) - max(20px, env(safe-area-inset-bottom))) !important;
    padding: 10px 10px 14px !important;
    gap: 10px !important;
    overflow-y: auto;
  }

  .modal-imagen > img,
  .modal-img-placeholder {
    height: clamp(210px, 36svh, 320px) !important;
  }

  .modal-galeria {
    margin-top: 8px !important;
    padding-bottom: 4px !important;
  }

  .modal-miniatura {
    flex-basis: 56px !important;
    width: 56px !important;
  }

  .modal-info {
    padding: 0 2px !important;
  }

  .modal-info h2 {
    font-size: clamp(21px, 7vw, 28px) !important;
    margin-bottom: 4px !important;
  }

  #modal-precio {
    margin-bottom: 4px !important;
  }

  .modal-descripcion {
    margin: 4px 0 8px !important;
  }

  .modal-tallas-wrap {
    margin: 0 0 10px !important;
  }

  .modal-boton-agregar {
    position: static !important;
    bottom: auto !important;
    margin-top: 4px !important;
    box-shadow: none !important;
  }

  #boton-subir {
    position: fixed !important;
    right: max(16px, env(safe-area-inset-right)) !important;
    bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    left: auto !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    z-index: 1210 !important;
  }
}

@media (max-width: 380px) {
  .modal-imagen > img,
  .modal-img-placeholder {
    height: clamp(190px, 34svh, 280px) !important;
  }

  .modal-miniatura {
    flex-basis: 50px !important;
    width: 50px !important;
  }
}

/* Scroll-to-top button icon alignment */
#boton-subir,
#boton-subir.visible {
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

#boton-subir i {
  display: block;
  line-height: 1 !important;
  margin: 0 !important;
  transform: translateY(-1px);
}

/* Final filter visibility guard */
.producto.oculto {
  display: none !important;
}

/* Ordered mobile floating actions */
@media (max-width: 700px) {
  :root {
    --mobile-float-edge: 16px;
    --mobile-float-size: 52px;
    --mobile-float-gap: 12px;
    --mobile-float-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  .mobile-nav-actions {
    right: var(--mobile-float-edge) !important;
    bottom: calc(var(--mobile-float-bottom) + var(--mobile-float-size) + var(--mobile-float-gap)) !important;
    gap: var(--mobile-float-gap) !important;
    align-items: center !important;
  }

  .mobile-favoritos-nav,
  .mobile-carrito-nav,
  #boton-subir {
    width: var(--mobile-float-size) !important;
    min-width: var(--mobile-float-size) !important;
    height: var(--mobile-float-size) !important;
    min-height: var(--mobile-float-size) !important;
    border-radius: 50% !important;
    box-shadow: 0 12px 30px rgba(40, 32, 35, 0.18) !important;
  }

  #boton-subir {
    right: var(--mobile-float-edge) !important;
    bottom: var(--mobile-float-bottom) !important;
  }

  .contador-carrito-mobile,
  .contador-favoritos-mobile {
    top: -6px !important;
    right: -6px !important;
  }

  .boton-flotante-wsp {
    left: var(--mobile-float-edge) !important;
    bottom: var(--mobile-float-bottom) !important;
    min-height: var(--mobile-float-size) !important;
  }
}