/* ============================================================
   Notta Decants — Catálogo público
   Tema: claro y elegante (fondo blanco + acento dorado), mobile-first
   ============================================================ */

:root{
  --color-fondo: #ffffff;
  --color-fondo-alt: #f8f7f4;
  --color-borde: #e4e0d6;
  --color-acento: #c9a24b;
  --gradiente-acento: linear-gradient(110deg, #fbbf24, #f59e0b);
  --color-texto: #17171a;
  --color-texto-tenue: #767671;
  --color-error: #c0392b;
  --color-ok: #2f9e52;
  --color-topbar-borde: rgba(255,255,255,.1);
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --radio: 10px;
  --sombra: 0 8px 24px rgba(0,0,0,.08);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3{ font-family: var(--font-serif); font-weight: 600; margin: 0 0 .5em; }
button{ font-family: inherit; }

.contenido{ max-width: 1200px; margin: 0 auto; padding: 0 16px 60px; }

/* ---------- Topbar ---------- */
.topbar{
  position: sticky; top: 0; z-index: 40;
  background: rgba(17,17,20,.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-topbar-borde);
}
.topbar-inner{
  max-width: 1200px; margin: 0 auto; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.marca-nombre{ font-family: var(--font-serif); font-size: 1.3rem; color: var(--color-acento); letter-spacing: .03em; }
.marca-logo{ max-height: 40px; }
.btn-carrito{
  background: transparent; border: 1px solid rgba(255,255,255,.25); color: #ffffff;
  border-radius: 999px; padding: 8px 14px; font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
.carrito-count{
  background: var(--color-acento); color: #14120a; font-weight: 700; font-size: .75rem;
  border-radius: 999px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}

/* ---------- Buscador / filtros ---------- */
.buscador-filtros{
  margin: 20px 0; display: flex; flex-direction: column; gap: 10px;
}
.buscador{
  width: 100%; padding: 12px 16px; border-radius: var(--radio); border: 1px solid var(--color-borde);
  background: var(--color-fondo-alt); color: var(--color-texto); font-size: 1rem;
}
.filtros-row{ display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.filtros-row select{
  flex: 0 0 auto; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--color-borde);
  background: var(--color-fondo-alt); color: var(--color-texto); font-size: .85rem;
}

/* ---------- Carrusel destacados/ofertas ---------- */
.carousel{ position: relative; margin: 18px 0 28px; border-radius: var(--radio); overflow: hidden; }
.carousel-track{
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: var(--radio);
}
.carousel-track::-webkit-scrollbar{ display: none; }
.carousel-slide{
  flex: 0 0 100%; scroll-snap-align: start; position: relative; aspect-ratio: 16/10;
  background: var(--color-fondo-alt);
}
.carousel-slide img{ width: 100%; height: 100%; object-fit: cover; }
.carousel-caption{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
}
.carousel-caption h3{ font-size: 1.2rem; margin-bottom: 4px; color: #ffffff; }
.precio-anterior{ text-decoration: line-through; color: rgba(255,255,255,.65); margin-right: 8px; font-size: .9rem; }
.precio-actual{ color: var(--color-acento); font-weight: 700; font-size: 1.1rem; }
.carousel-dots{ display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.carousel-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--color-borde); border: none; padding: 0; cursor: pointer; }
.carousel-dot.activo{ background: var(--color-acento); }

/* ---------- Secciones y filas horizontales ---------- */
.seccion-titulo{
  font-size: 1.3rem; margin: 30px 0 14px; color: var(--color-texto);
  position: relative; padding-bottom: 12px;
}
.seccion-titulo::after{
  content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px;
  background: var(--gradiente-acento); border-radius: 2px;
}
.fila-productos{
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity;
}
.fila-productos .producto-card{ flex: 0 0 190px; scroll-snap-align: start; }

/* ---------- Grilla general ---------- */
.grid-productos{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 10px;
}
@media (min-width: 640px){ .grid-productos{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px){ .grid-productos{ grid-template-columns: repeat(4, 1fr); } }

/* ---------- Card de producto ---------- */
.producto-card{
  background: var(--color-fondo-alt); border: 1px solid var(--color-borde); border-radius: var(--radio);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.producto-card-imagen{ aspect-ratio: 1/1; background: var(--color-fondo-alt); position: relative; overflow: hidden; }
.producto-card-imagen img{ width: 100%; height: 100%; object-fit: cover; }
.producto-card-body{ padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.producto-marca{ font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-texto-tenue); }
.producto-nombre{ font-family: var(--font-serif); font-size: 1rem; line-height: 1.25; }
.producto-inspirado{ font-size: .78rem; color: var(--color-texto-tenue); font-style: italic; }
.producto-precio-desde{ margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--color-texto); }
.producto-precio-desde small{ font-weight: 400; color: var(--color-texto-tenue); }

.badges{ position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.badge{
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px; color: #14120a;
}
.badge-nuevo{ background: #7bc98f; }
.badge-oferta{ background: var(--color-acento); }
.badge-ultimas{ background: #e0a95f; }
.badge-sinstock{ background: #555; color: #ddd; }

/* ---------- Estado vacío ---------- */
.sin-resultados{ text-align: center; padding: 40px 10px; color: var(--color-texto-tenue); }

/* ---------- Ficha de producto ---------- */
.producto-detalle{ display: grid; gap: 24px; margin-top: 20px; }
@media (min-width: 800px){ .producto-detalle{ grid-template-columns: 1fr 1fr; align-items: start; } }

.galeria-principal{
  aspect-ratio: 1/1; background: var(--color-fondo-alt); border-radius: var(--radio); overflow: hidden;
  border: 1px solid var(--color-borde);
}
.galeria-principal img{ width: 100%; height: 100%; object-fit: cover; }
.galeria-thumbs{ display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.galeria-thumbs img{
  width: 64px; height: 64px; object-fit: cover; border-radius: 6px; cursor: pointer;
  border: 2px solid transparent; opacity: .7;
}
.galeria-thumbs img.activo{ border-color: var(--color-acento); opacity: 1; }

.detalle-marca{ font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-texto-tenue); }
.detalle-nombre{ font-size: 1.8rem; margin: 4px 0 8px; }
.detalle-inspirado{ display: inline-block; font-style: italic; color: var(--color-texto-tenue); margin-bottom: 10px; font-size: .9rem; }
.detalle-badges{ display: flex; gap: 6px; margin-bottom: 14px; }

.ficha-tecnica{
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: .85rem;
  background: var(--color-fondo-alt); border: 1px solid var(--color-borde); border-radius: var(--radio);
  padding: 14px; margin: 16px 0;
}
.ficha-tecnica dt{ color: var(--color-texto-tenue); }
.ficha-tecnica dd{ margin: 0 0 6px; }

.descripcion{ color: var(--color-texto); margin: 14px 0; font-size: .95rem; }

.tamanos-selector{ display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.tamano-opcion{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 10px 14px; cursor: pointer;
}
.tamano-opcion input{ margin-right: 10px; }
.tamano-opcion.seleccionado{ border-color: var(--color-acento); background: rgba(212,175,55,.08); }
.tamano-precio-anterior{ text-decoration: line-through; color: var(--color-texto-tenue); font-size: .8rem; margin-right: 6px; }

.cantidad-selector{ display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.cantidad-selector button{
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--color-borde);
  background: var(--color-fondo-alt); color: var(--color-texto); font-size: 1.1rem; cursor: pointer;
}
.cantidad-selector input{
  width: 44px; text-align: center; background: transparent; border: none; color: var(--color-texto); font-size: 1rem;
}

.botones-accion{ display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px; border-radius: var(--radio); border: 1px solid var(--color-borde);
  font-weight: 600; cursor: pointer; font-size: .95rem; background: transparent; color: var(--color-texto);
}
.btn-primario{ background: var(--gradiente-acento); color: #14120a; border-color: #f59e0b; }
.btn-whatsapp{ background: #25d366; color: #06210f; border-color: #25d366; }
.btn-secundario{ background: transparent; }

/* ---------- Reseñas ---------- */
.resenas{ margin: 30px 0; }
.resena-card{
  background: var(--color-fondo-alt); border: 1px solid var(--color-borde); border-radius: var(--radio);
  padding: 14px 16px; margin-bottom: 10px;
}
.resena-estrellas{ color: var(--color-acento); letter-spacing: 2px; margin-bottom: 4px; }
.resena-nombre{ font-weight: 600; margin-top: 6px; font-size: .85rem; color: var(--color-texto-tenue); }

/* ---------- Carrito (drawer) ---------- */
.carrito-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50;
}
.carrito-drawer{
  position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 400px;
  background: var(--color-fondo-alt); border-left: 1px solid var(--color-borde);
  z-index: 60; transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column;
}
.carrito-drawer.abierto{ transform: translateX(0); }
.carrito-drawer-head{
  display: flex; align-items: center; justify-content: space-between; padding: 16px;
  border-bottom: 1px solid var(--color-borde);
}
.btn-cerrar{ background: none; border: none; color: var(--color-texto); font-size: 1.3rem; cursor: pointer; }
.carrito-lista{ flex: 1; overflow-y: auto; padding: 12px 16px; }
.carrito-item{
  display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-borde);
}
.carrito-item img{ width: 52px; height: 52px; object-fit: cover; border-radius: 6px; background: var(--color-fondo-alt); }
.carrito-item-info{ flex: 1; }
.carrito-item-nombre{ font-size: .9rem; font-weight: 600; }
.carrito-item-detalle{ font-size: .78rem; color: var(--color-texto-tenue); }
.carrito-item-controles{ display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.carrito-item-controles button{
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--color-borde); background: transparent;
  color: var(--color-texto); cursor: pointer; font-size: .85rem; line-height: 1;
}
.carrito-item-quitar{ font-size: .75rem; color: var(--color-error); background: none; border: none; cursor: pointer; margin-left: auto; }
.carrito-vacio{ text-align: center; color: var(--color-texto-tenue); padding: 40px 10px; }

.carrito-resumen{ padding: 16px; border-top: 1px solid var(--color-borde); }
.carrito-total-row{ display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 1.1rem; }
.carrito-total-row strong{ color: var(--color-acento); }
.form-checkout label{ font-size: .8rem; color: var(--color-texto-tenue); display: block; margin: 8px 0 4px; }
.form-checkout input, .form-checkout textarea{
  width: 100%; padding: 9px 10px; border-radius: 6px; border: 1px solid var(--color-borde);
  background: var(--color-fondo); color: var(--color-texto); font-family: inherit;
}
.form-checkout textarea{ min-height: 60px; resize: vertical; }
.form-checkout button{ width: 100%; margin-top: 12px; }

/* ---------- WhatsApp flotante ---------- */
.whatsapp-flotante{
  position: fixed; bottom: 18px; right: 18px; z-index: 45; width: 56px; height: 56px;
  background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; box-shadow: var(--sombra);
}

/* ---------- Footer ---------- */
.footer{ background: var(--color-fondo-alt); border-top: 1px solid var(--color-borde); margin-top: 50px; padding: 30px 16px 16px; }
.footer-inner{ max-width: 1200px; margin: 0 auto; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px){ .footer-inner{ grid-template-columns: repeat(3, 1fr); } }
.footer-bloque h3{ color: var(--color-acento); font-size: 1rem; }
.footer-bloque a{ display: inline-block; margin-right: 10px; color: var(--color-texto-tenue); }
.footer-copy{ text-align: center; color: var(--color-texto-tenue); font-size: .78rem; margin: 24px 0 0; }

/* ---------- Utilidades ---------- */
.hidden{ display: none !important; }
.toast{
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: var(--color-acento); color: #14120a; padding: 10px 18px; border-radius: 999px;
  font-size: .85rem; font-weight: 600; z-index: 80; box-shadow: var(--sombra);
}
/* Boutique marfil — capa de presentación */
:root{
  --color-fondo-alt:#fffdf9; --color-borde:#e5ded2; --color-texto:#302c26;
  --color-texto-tenue:#70685c; --radio:16px;
  --gradiente-acento:linear-gradient(110deg,var(--color-acento),var(--color-acento));
}
.contenido{max-width:1240px;padding:0 28px 72px}
.topbar{background:var(--color-fondo);border-bottom:1px solid var(--color-borde);backdrop-filter:none}
.topbar-inner{max-width:1240px;padding:22px 28px}
.marca-nombre{color:var(--color-texto);font-size:1.55rem;letter-spacing:.025em}
.btn-carrito{color:var(--color-texto);border-color:var(--color-borde);padding:10px 16px;font-size:.85rem}
.boutique-intro{padding:64px 0 44px;max-width:780px}
.boutique-kicker{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--color-texto-tenue);margin:0 0 16px}
.boutique-intro h1{font-size:clamp(2.3rem,5vw,4.25rem);line-height:1.1;letter-spacing:-.035em;margin-bottom:22px}
.boutique-intro p:not(.boutique-kicker){max-width:540px;color:var(--color-texto-tenue);font-size:1rem;line-height:1.8}
.boutique-link{display:inline-block;margin-top:12px;padding-bottom:6px;border-bottom:1px solid var(--color-texto);font-size:.9rem;font-weight:600}
.buscador-filtros{margin:20px 0 32px;gap:14px;scroll-margin-top:100px}
.buscador{background:var(--color-fondo-alt);padding:16px 18px}
.filtros-row{gap:10px}.filtros-row select{padding:11px 15px;background:transparent}
.carousel{margin:28px 0 48px}.carousel-slide{aspect-ratio:3/1;background:#eae2d5}
.carousel-slide img{object-fit:contain;padding:24px;height:100%}
.carousel-caption{padding:24px 28px;background:linear-gradient(to top,rgba(35,30,23,.88),transparent)}
.carousel-caption h3{font-size:1.45rem}.precio-actual{color:#ffe6a8}
.seccion-titulo{font-size:1.8rem;margin:52px 0 24px;padding-bottom:0;letter-spacing:-.025em}
.seccion-titulo::after{display:none}
.fila-productos{gap:24px;padding-bottom:16px}.fila-productos .producto-card{flex:0 0 245px}
.grid-productos{gap:32px 24px}
.producto-card{background:transparent;border:0;border-radius:0;box-shadow:none}
.producto-card-imagen{background:#eee8de;border:1px solid var(--color-borde);border-radius:var(--radio);aspect-ratio:4/5}
.producto-card-imagen img{object-fit:contain;padding:22px;transition:transform .25s ease}
.producto-card:hover .producto-card-imagen img{transform:scale(1.035)}
.producto-card-body{padding:18px 2px 8px;gap:8px}.producto-marca{font-size:.7rem;letter-spacing:.12em}
.producto-nombre{font-size:1.2rem;line-height:1.35}.producto-inspirado{font-size:.8rem;line-height:1.5}
.producto-precio-desde{padding-top:8px;font-size:1rem}.producto-precio-desde small{font-size:.78rem}
.badges{top:12px;left:12px}.badge{font-size:.6rem;padding:5px 9px}.badge-nuevo{background:#dbe3cf}.badge-ultimas{background:#e6d1ad}
.producto-detalle{gap:48px;margin-top:32px}.galeria-principal{background:#eee8de;border:0}.galeria-principal img{object-fit:contain;padding:32px}
.detalle-nombre{font-size:clamp(2rem,4vw,3rem);line-height:1.12;margin:12px 0 18px}
.ficha-tecnica{padding:22px;gap:12px 20px}.tamano-opcion{padding:15px 18px;background:var(--color-fondo-alt)}
.btn-primario{background:var(--color-texto);color:#fffdf9;border-color:var(--color-texto)}
.btn{min-height:48px}.form-checkout button{padding:14px;border:0;border-radius:10px;font:inherit;font-weight:600;cursor:pointer}
.resenas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.resena-card{padding:24px;margin:0;line-height:1.8}
.footer{padding-top:44px}.footer-bloque h3{color:var(--color-texto)}
:focus-visible{outline:3px solid #8b6936;outline-offset:4px}
@media(max-width:700px){
 .contenido{padding:0 18px 48px}.topbar-inner{padding:18px}.marca-nombre{font-size:1.25rem}
 .boutique-intro{padding:40px 0 28px}.boutique-intro h1{font-size:2.55rem}.boutique-intro p:not(.boutique-kicker){font-size:.93rem}
 .carousel-slide{aspect-ratio:4/3}.carousel-caption{padding:20px}.carousel-caption h3{font-size:1.15rem}
 .grid-productos{gap:28px 16px}.fila-productos{gap:16px}.fila-productos .producto-card{flex-basis:190px}
 .producto-card-imagen img{padding:14px}.producto-nombre{font-size:1.08rem}.producto-card-body{padding-top:14px}
 .seccion-titulo{font-size:1.55rem;margin-top:38px}.resenas{grid-template-columns:1fr}.producto-detalle{gap:28px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

.galeria-principal,
.producto-card-imagen {
  background: #fff !important;
}

/* Fondo blanco: actualizaci?n puntual */
:root { --color-fondo: #fff !important; --color-fondo-alt: #fff; }
body, .topbar, .carousel-slide, .producto-card-imagen, .galeria-principal {
  background: #fff !important;
}