:root {
  --lila: #9b7edb;
  --rosa: #f2c6d8;
  --gris: #ccc;
  --texto: #444;
}

/* RESET */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: #ffffff;
  color: var(--texto);
}

body.modal-abierto { overflow: hidden; }

/* ================= HEADER ================= */
.header {
  position: sticky;
  top: 0;
  background: white;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #eee;
  z-index: 100;
}

.logo { height: 140px; }

.btn-carrito {
  position: absolute;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
}

/* ================= MAIN ================= */
main {
  padding: 2rem 1rem;
  max-width: 1200px;
  margin: auto;
}

h2 {
  font-family: 'Great Vibes', cursive;
  font-size: 48px;
  font-weight: normal;
  text-align: center;
  color: #9b7edb;
  margin: 30px 0;
}

/* ================= PRODUCTOS ================= */
.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.2rem;
}

.producto {
  background: white;
  border-radius: 16px;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  transition: transform .2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.producto:hover { transform: translateY(-4px); }

/* CONTENEDOR DE IMAGEN */
.producto-img {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  position: relative;
  z-index: 1;
}

/* IMAGEN */
.producto-img img {
  height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: 14px;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* DESTELLO VIOLETA */
@media (hover: hover) {
  .producto-img img:hover {
    transform: scale(1.08);
    box-shadow:
      0 0 0 3px rgba(155, 126, 219, 0.35),
      0 0 25px rgba(155, 126, 219, 0.65),
      0 15px 30px rgba(0, 0, 0, 0.2);
    filter: brightness(1.08);
  }
}

/* FIX: títulos largos no desalinean cards (3 líneas + …) */
.producto h3{
  margin: 12px 0 10px;
  line-height: 1.2;
  height: calc(1.2em * 3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* PRECIO */
.precio {
  font-weight: bold;
  color: var(--lila);
  margin-bottom: 10px;
}

/* STOCK (pill alineada y con altura fija) */
.stock{
  font-size: .9rem;
  margin: 10px 0 8px;
  text-align: center;
  width: 100%;
  padding: 6px 0;
  border-radius: 10px;
  background: #f3ecff;
  color: var(--texto);

  min-height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* si el stock está vacío, conserva espacio sin mostrar fondo */
.stock:empty{
  background: transparent;
  padding: 0;
}

/* BOTONES */
.btn-agregar,
.btn-elegir-tono {
  width: 100%;
  padding: .6rem;
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-weight: 600;
  margin-top: auto;
}

.btn-agregar {
  background: var(--lila);
}

.btn-elegir-tono {
  background: linear-gradient(135deg, #9b7edb, #7a5fc5);
  letter-spacing: .5px;
}

.btn-elegir-tono:hover {
  filter: brightness(1.1);
  transform: scale(1.03);
}


.btn-efectivo{
  display: block;
  width: 100%;
  padding: .7rem;
  border-radius: 10px;
  text-align: center;
  font-weight: 800;
  margin-top: .6rem;
  cursor: pointer;
  text-decoration: none;

  border: none;
  color: white;
  background: linear-gradient(135deg, #9b7edb, #25D366);
  box-shadow: 0 10px 22px rgba(18, 140, 126, .18);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.btn-efectivo:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(18, 140, 126, .22);
}

.btn-efectivo:active{
  transform: translateY(1px);
}

.btn-efectivo:disabled{
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;
}




/* SIN STOCK */
.producto.sin-stock { opacity: 0.5; }

.producto.sin-stock .btn-agregar,
.producto.sin-stock .btn-elegir-tono{
  background: var(--gris);
  cursor: not-allowed;
  transform: none;
}

/* ================= MODALES (TONOS + MP) ================= */
.modal-tonos {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}

.modal-tonos img {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 12px;
  margin-bottom: 15px;
}

.modal-contenido {
  background: linear-gradient(180deg, #ffffff, #faf7ff);
  padding: 22px;
  border-radius: 20px;
  width: 90%;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
  animation: modalEntrada .3s ease;
  position: relative;
}

.cerrar-tonos,
#cerrar-mp{
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  background: #f3ecff;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: var(--lila);
  cursor: pointer;
  transition: all .25s ease;
}

.cerrar-tonos:hover,
#cerrar-mp:hover{
  background: var(--lila);
  color: white;
  transform: rotate(90deg) scale(1.1);
}

.grid-tonos{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 15px;
}

.tono{
  padding: 14px;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  background: #f3ecff;
  font-weight: bold;
  transition: all .2s ease;
}

.tono:hover{
  border-color: var(--lila);
  background: white;
  transform: scale(1.05);
}

.tono:disabled{
  opacity: .35;
  cursor: not-allowed;
  transform: none;
}

.tono.activo {
  background: var(--lila);
  color: white;
}

#modal-mp h3 {
  color: #9b7edb;
  text-align: center;
}

/* =========================
   FOOTER QVER ESTÉTICO
========================= */

.footer-qver{
  width:100%;
  background: linear-gradient(135deg,#f6e9ff,#f1dfff,#ead4ff);
  margin-top:60px;
}

.footer-container{
  max-width:1200px;
  margin:auto;
  padding:50px 20px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:40px;
}

.footer-col{
  flex:1;
  min-width:240px;
}

.footer-logo{
  font-size:22px;
  color:#7a5fc5;
  margin:0 0 10px;
  font-weight:800;
}

.footer-col h4{
  color:#7a5fc5;
  margin:0 0 14px;
}

/* Links de contacto (wsp/mail/map) */
.footer-link{
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0;
  text-decoration:none;
  color:#555;
  font-size:14px;
  font-weight:600;
  transition: transform .15s ease, filter .15s ease;
}

.footer-link:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.footer-text{ line-height:1.2; }

.footer-icon{
  width:40px;
  height:40px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(155,126,219,.25);
  box-shadow: 0 10px 22px rgba(155,126,219,.12);
}

.footer-icon svg{
  width:22px;
  height:22px;
  display:block;
}

.footer-icon--mono{
  color:#9b7edb;
}

/* Botón Instagram tipo cápsula */
.footer-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  text-decoration:none;
  font-weight:800;
  color:#7a5fc5;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(155,126,219,.25);
  box-shadow: 0 10px 22px rgba(155,126,219,.12);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.footer-pill:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 14px 30px rgba(155,126,219,.18);
}

.pill-icon{
  width:38px;
  height:38px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(155,126,219,.18), rgba(242,198,216,.22));
  border: 1px solid rgba(155,126,219,.22);
}

.pill-icon svg{
  width:22px;
  height:22px;
  display:block;
}

/* Copy */
.footer-copy{
  text-align:center;
  padding:15px;
  font-size:13px;
  background:#e9d5ff;
  color:#555;
}


/* =========================
   CARRITO MODAL (QVER) - MISMO TAMAÑO, MEJOR LOOK
========================= */

.carrito-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;

  background: rgba(0,0,0,.55);
  display: none;                /* JS lo pone en flex */
  align-items: center;          /* CENTRAR */
  justify-content: center;      /* CENTRAR */
  z-index: 1000;

  backdrop-filter: blur(4px);
  padding: 16px;                /* para que no toque bordes en mobile */
}

.carrito {
  background: #ffffff;          /* mantenemos como antes */
  width: 92%;
  max-width: 420px;             /* MISMO que tu diseño */
  padding: 1.6rem;              /* MISMO que tu diseño */
  border-radius: 18px;          /* MISMO que tu diseño */
  box-shadow: 0 25px 50px rgba(0,0,0,.35);
  position: relative;
  animation: aparecer .25s ease;

  border: 1px solid rgba(155,126,219,.18); /* toque pro */
}

/* Título */
.carrito h3 {
  text-align: center;
  color: var(--lila);
  font-weight: 900;
  margin: 0 0 12px;
}

/* Botón cerrar (mismo tamaño, más lindo) */
#cerrar-carrito{
  position:absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  background: #f3ecff;
  color: #7a5fc5;
  border-radius: 50%;
  border: 1px solid rgba(155,126,219,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  font-weight: bold;
  cursor:pointer;
  transition: all .25s ease;
}

#cerrar-carrito:hover{
  background: #9b7edb;
  color: white;
  transform: rotate(90deg) scale(1.06);
}

/* Items (mantiene layout original, pero con “tarjetita”) */
.item-carrito {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: .6rem 0;

  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(155,126,219,.08);
  border: 1px solid rgba(155,126,219,.16);
}

.item-carrito p{
  margin: 0;
  font-weight: 700;
  color: #4b2fa4;
}

.item-carrito strong{
  color: #7a5fc5;
}

/* Eliminar: mismo botón pero prolijo */
.btn-eliminar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(244,67,54,.10);
  border: 1px solid rgba(244,67,54,.20);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.btn-eliminar:hover {
  transform: scale(1.07);
  background: rgba(244,67,54,.16);
}

/* Total (mismo texto pero con pill) */
.total {
  font-weight: 900;
  margin: 1rem 0;
  text-align: center;

  padding: 12px;
  border-radius: 14px;
  background: #f3ecff;
  border: 1px solid rgba(155,126,219,.18);
  color: #4b2fa4;
}

/* Botones (mantiene tamaños originales, solo más premium) */
.btn-wsp,
.btn-mp {
  display: block;
  width: 100%;
  padding: .7rem;
  border-radius: 10px;
  text-align: center;
  font-weight: 900;
  margin-top: .6rem;
  cursor: pointer;
  text-decoration: none;
}

.btn-wsp { background: #25D366; color: white; }

.btn-mp {
  background: #009ee3;
  color: white;
  border: none;
  box-shadow: 0 10px 22px rgba(0,158,227,.18);
  transition: transform .15s ease, filter .15s ease;
}

.btn-mp:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

/* Instagram: asegura que se vea como botón (en tu captura quedó como link) */
#btn-instagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: .7rem;
  margin-top: .6rem;
  border-radius: 10px;
  font-weight: 900;
  text-decoration: none;
  color: white;
  background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}

#btn-instagram:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

#btn-instagram:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
}

@keyframes aparecer {
  from { transform: translateY(40px) scale(.95); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes modalEntrada {
  from { transform: translateY(30px) scale(.95); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* =========================
   MEJORAS STOCK/TONOS (NUEVO)
   - no pisa tu estilo, solo suma
========================= */

/* Card gris linda cuando no hay stock */
.producto.sin-stock{
  opacity: 0.55;
  filter: grayscale(1);
}

/* TONOS: badge con stock */
.tono{
  position: relative; /* necesario para el badge */
}

.tono .stock-mini{
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.15);
  line-height: 1;
}

/* Si se acaba el tono */
.tono.is-out{
  opacity: 0.45;
  filter: grayscale(1);
}
/* =========================
   BOTONES WHATSAPP (NUEVO)
========================= */

#btn-enviar-wsp, 
#btn-abrir-wsp {
  width: 100%;
  padding: 14px 14px;
  border: none;
  border-radius: 14px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  margin-top: 12px;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

/* Botón principal: Enviar pedido */
#btn-enviar-wsp {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white;
  box-shadow: 0 10px 22px rgba(18, 140, 126, .25);
}

#btn-enviar-wsp:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

#btn-enviar-wsp:active {
  transform: translateY(1px);
}

#btn-enviar-wsp:disabled {
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Botón secundario: Abrir WhatsApp */
#btn-abrir-wsp {
  background: #f3ecff;
  color: #4b2fa4;
  border: 2px solid rgba(155,126,219,.35);
  box-shadow: 0 10px 22px rgba(155,126,219, .12);
}

#btn-abrir-wsp:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}
/* =========================
   BANNER FULL WIDTH
========================= */
.banner-qver{
  width: 100%;
  height: 240px;
  background-image: url("imagenes/banner.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  /* sin max-width, sin border-radius => full width */
}

.banner-qver__overlay{
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(155,126,219,.70),
    rgba(155,126,219,.20),
    rgba(255,255,255,.10)
  );
  display: flex;
  align-items: center;
}

.banner-qver__container{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
  color: #fff;
}

.banner-qver__container h1{
  font-family: 'Great Vibes', cursive;
  font-size: 64px;
  margin: 0;
  line-height: 1;
  text-shadow: 0 6px 22px rgba(0,0,0,.25);
}

.banner-qver__container p{
  margin: 8px 0 0;
  font-weight: 700;
  font-size: 16px;
  text-shadow: 0 6px 22px rgba(0,0,0,.20);
}

/* Responsive */
@media (max-width: 520px){
  .banner-qver{ height: 190px; }
  .banner-qver__container h1{ font-size: 48px; }
  .banner-qver__container p{ font-size: 14px; }
}

.ig-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 800;
  color: #7a5fc5;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(155,126,219,.25);
  box-shadow: 0 10px 22px rgba(155,126,219,.12);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.ig-pill:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 14px 30px rgba(155,126,219,.18);
}

.ig-icon{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(155,126,219,.18), rgba(242,198,216,.22));
  border: 1px solid rgba(155,126,219,.22);
}

.ig-icon img{
  width: 22px;
  height: 22px;
  display: block;
}



/* ===== BOTÓN CARRITO QVER ===== */
/* ===== BOTÓN CARRITO (solo mejora visual, no cambia posición) ===== */
.header .btn-carrito{
  /* mantiene tu position:absolute right:1rem de tu CSS original */
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  cursor: pointer;

  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 8px 22px rgba(0,0,0,0.15);
  transition: transform .25s ease, box-shadow .25s ease;
}

.header .btn-carrito:hover{
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}

.header .carrito-icon svg{
  width: 22px;
  height: 22px;
  color: #8b6edb;
  transition: transform .25s ease, color .25s ease;
}

.header .btn-carrito:hover .carrito-icon svg{
  color: #6f54c4;
  transform: scale(1.1);
}

/* contador arriba a la derecha del botón */
.header #contador-carrito{
  position: absolute;
  top: -6px;
  right: -6px;

  min-width: 20px;
  height: 20px;
  padding: 0 6px;

  border-radius: 50px;
  font-size: 12px;
  font-weight: 800;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;

  background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  border: 2px solid #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

/* ===== IMPORTANTE: NO achicar logo ===== */
.header .logo{
  height: 250px; /* mantiene tu tamaño original */
  width: auto;
}



/* =========================
   LIGHTBOX QVER (IMAGEN EN GRANDE)
   - No pisa nada, son clases nuevas
========================= */

.qver-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  backdrop-filter: blur(6px);
  padding: 18px;
}

.qver-lightbox.is-open{
  display: flex;
}

.qver-lightbox img{
  max-width: min(980px, 92vw);
  max-height: 86vh;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 25px 60px rgba(0,0,0,.55);
  animation: qverZoomIn .22s ease;
}

.qver-lightbox-close{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
  font-size: 18px;

  background: rgba(255,255,255,.85);
  color: #7a5fc5;
  border: 1px solid rgba(155,126,219,.25);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);

  transition: transform .15s ease, filter .15s ease;
}

.qver-lightbox-close:hover{
  transform: rotate(90deg) scale(1.05);
  filter: brightness(1.02);
}

@keyframes qverZoomIn{
  from { transform: scale(.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ===== ICONO LUPA QVER ===== */

.producto-img{
  position: relative;
  cursor: pointer;
}

.producto-img::before{
  content: "🔍";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.7);
  font-size: 28px;

  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);

  width: 48px;
  height: 48px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transition: all .25s ease;

  box-shadow: 0 10px 25px rgba(155,126,219,.35);
  color: #9b7edb; /* lila QVER */
}

.producto-img:hover::before{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}


.producto-img{
  position: relative;
}

.producto-img::after{
  content: "Ver";
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;

  background: rgba(155,126,219,.9);
  color: white;

  opacity: 0;
  transition: opacity .25s ease;
}

.producto-img:hover::after{
  opacity: 1;
}




.modal-tonos .modal-contenido > img{
  transition: transform .2s ease;
}

.modal-tonos .modal-contenido > img:hover{
  transform: scale(1.02);
}


/* Cursor manito en carta de tonos */
.modal-tonos .modal-contenido > img{
  cursor: pointer;
}