@font-face { font-family:'Poppins'; font-weight:400; src:url(assets/fonts/Poppins-Regular.ttf) format('truetype'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:600; src:url(assets/fonts/Poppins-SemiBold.ttf) format('truetype'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:800; src:url(assets/fonts/Poppins-ExtraBold.ttf) format('truetype'); font-display:swap; }
@font-face { font-family:'Allura'; font-weight:400; src:url(assets/fonts/Allura-Regular.ttf) format('truetype'); font-display:swap; }

:root{
  --coral:#D9556A; --coral-soft:#FBDEE2; --coral-dark:#B93E52;
  --teal:#2E8C81; --teal-soft:#D9EEEA;
  --peach:#D98A3D; --peach-soft:#F7E4CC;
  --paper:#FFFAF5; --paper-raised:#FFFFFF;
  --ink:#3B2E2C; --ink-soft:#8A7570; --line:#EFE1D7;
  --shadow: 0 1px 2px rgba(59,46,44,.06), 0 10px 28px rgba(59,46,44,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Poppins','Segoe UI',system-ui,sans-serif; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
.script{font-family:'Allura'; font-weight:400; color:var(--coral)}
.kicker{ font-size:.76rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent, var(--coral)); margin:0 0 8px; }
h1,h2,h3,h4{font-family:'Poppins'; font-weight:800; text-wrap:balance; margin:0}
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--coral); color:#fff; font-weight:600; font-family:'Poppins';
  border:none; border-radius:99px; padding:13px 26px; font-size:.95rem;
  text-decoration:none; cursor:pointer; transition:background .15s ease, transform .1s ease;
}
.btn-primary:hover{ background:var(--coral-dark) }
.btn-primary:active{ transform:scale(.98) }
.btn-primary:disabled{ background:var(--ink-soft); cursor:not-allowed }
.btn-block{ width:100%; }
.btn-text{ background:none; border:none; color:var(--ink-soft); font-family:'Poppins'; font-size:.85rem; cursor:pointer; width:100%; padding:10px; text-decoration:underline; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:20; background:rgba(255,250,245,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1180px; margin:0 auto; padding:10px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; }
.brand-logo{ height:66px; width:auto; }
.main-nav{ display:flex; gap:26px; }
.main-nav a{ text-decoration:none; font-weight:600; font-size:.92rem; color:var(--ink); }
@media (max-width:640px){
  .brand-logo{ height:52px; }
  .main-nav{ gap:14px; }
  .main-nav a{ font-size:.82rem; }
  .btn-cart span:first-of-type{ display:none; }
}
.main-nav a:hover{ color:var(--coral); }
.btn-cart{
  display:flex; align-items:center; gap:8px; background:var(--paper-raised); border:1px solid var(--line);
  border-radius:99px; padding:9px 16px; font-family:'Poppins'; font-weight:600; font-size:.85rem;
  color:var(--ink); cursor:pointer;
}
.btn-cart:hover{ border-color:var(--coral); }
.cart-count{
  background:var(--coral); color:#fff; border-radius:99px; min-width:20px; height:20px;
  font-size:.72rem; display:flex; align-items:center; justify-content:center; padding:0 5px;
}

/* ---------- Hero ---------- */
.hero{
  max-width:1180px; margin:0 auto; padding:56px 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
.hero-lede{ color:var(--ink-soft); max-width:46ch; font-size:1.02rem; }
.hero h1{ font-size:2.5rem; line-height:1.15; margin:.2em 0 .35em; }
.hero-visual{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.hero-image{ width:100%; }
.hero-image img{ border-radius:22px; box-shadow:var(--shadow); width:100%; height:420px; object-fit:cover; }
.hero-brandname{
  display:flex; align-items:baseline; gap:8px; margin:0;
  background:var(--paper-raised); border:1px solid var(--line);
  padding:10px 26px; border-radius:99px; box-shadow:var(--shadow); white-space:nowrap;
}
.hero-brandname .bold{ font-family:'Poppins'; font-weight:800; font-size:1.5rem; color:var(--teal); letter-spacing:-.01em; }
.hero-brandname .script{ font-family:'Allura'; font-size:1.75rem; color:var(--teal); }
@media (max-width:860px){
  .hero{ grid-template-columns:1fr; padding-top:36px; }
  .hero-visual{ order:-1; }
  .hero-image img{ height:280px; }
  .hero h1{ font-size:2rem; }
}

/* ---------- Trust strip ---------- */
.trust-strip{
  display:flex; justify-content:center; gap:40px; flex-wrap:wrap;
  padding:22px 24px; background:var(--teal-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.trust-item{ font-weight:600; font-size:.88rem; color:var(--ink); display:flex; align-items:center; gap:8px; }
.trust-icon{ font-size:1.1rem; }

/* ---------- Catálogo ---------- */
.catalogo, .como-comprar, .contacto{ max-width:1180px; margin:0 auto; padding:64px 24px; }
.catalogo h2, .como-comprar h2, .contacto h2{ font-size:1.7rem; margin-bottom:22px; }

.filtros{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.filtro-pill{
  border:1px solid var(--line); background:var(--paper-raised); border-radius:99px; padding:8px 16px;
  font-size:.83rem; font-weight:600; cursor:pointer; font-family:'Poppins'; color:var(--ink);
}
.filtro-pill.activo{ background:var(--coral); border-color:var(--coral); color:#fff; }

.grid-productos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:22px; }
.cargando, .error-carga, .vacio{ color:var(--ink-soft); grid-column:1/-1; text-align:center; padding:40px 0; }

.card-producto{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow);
}
.card-foto{
  aspect-ratio:1/1; background:var(--coral-soft); display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.card-foto img{ width:100%; height:100%; object-fit:cover; }
.card-foto .sin-foto{ font-family:'Allura'; color:var(--coral); font-size:1.6rem; text-align:center; padding:0 16px; }
.card-foto.con-zoom{ cursor:zoom-in; }
.foto-dots{
  position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:6px; pointer-events:none;
}
.foto-dots .dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.6); box-shadow:0 0 0 1px rgba(59,46,44,.15); }
.foto-dots .dot.activo{ background:var(--paper-raised); width:16px; border-radius:99px; }

.zoom-hint{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(59,46,44,.28); color:#fff; font-weight:600; font-size:.82rem;
  opacity:0; transition:opacity .15s ease; pointer-events:none;
}
.card-foto.con-zoom:hover .zoom-hint{ opacity:1; }

/* ---------- Lightbox (ver foto en grande) ---------- */
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(59,46,44,.75); opacity:0; pointer-events:none;
  transition:opacity .2s ease; z-index:40;
}
.lightbox-overlay.abierto{ opacity:1; pointer-events:auto; }
.lightbox{
  position:fixed; inset:0; z-index:41; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease; padding:24px;
}
.lightbox.abierto{ opacity:1; pointer-events:auto; }
.lightbox img{
  max-width:min(90vw, 640px); max-height:80vh; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.4);
  background:var(--paper-raised);
}
.lightbox-close{
  position:absolute; top:22px; right:22px; width:40px; height:40px; border-radius:50%; border:none;
  background:var(--paper-raised); color:var(--ink); font-size:1.1rem; cursor:pointer; box-shadow:var(--shadow);
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:none;
  background:var(--paper-raised); color:var(--ink); font-size:1.6rem; cursor:pointer; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.lightbox-nav.prev{ left:16px; }
.lightbox-nav.next{ right:16px; }
.lightbox-dots{
  position:absolute; bottom:24px; left:0; right:0; display:flex; justify-content:center; gap:8px;
}
.lightbox-dots .dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.5); }
.lightbox-dots .dot.activo{ background:#fff; width:20px; border-radius:99px; }
@media (max-width:640px){
  .lightbox-nav{ width:38px; height:38px; font-size:1.3rem; }
  .lightbox-nav.prev{ left:8px; }
  .lightbox-nav.next{ right:8px; }
}
.card-info{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card-linea{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--teal); font-weight:700; }
.card-nombre{ font-weight:600; font-size:1rem; margin:0; }
.card-desc{ font-size:.85rem; color:var(--ink-soft); flex:1; margin:0; }
.card-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; gap:10px; }
.card-precio{ font-weight:800; font-size:1.05rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.card-agotado{ font-size:.78rem; color:var(--ink-soft); font-weight:600; }
.btn-agregar{
  background:var(--teal); color:#fff; border:none; border-radius:99px; padding:8px 16px;
  font-family:'Poppins'; font-weight:600; font-size:.82rem; cursor:pointer;
}
.btn-agregar:hover{ background:#256b62; }
.btn-agregar:disabled{ background:var(--line); color:var(--ink-soft); cursor:not-allowed; }

/* ---------- Cómo comprar ---------- */
.pasos{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:44px; }
@media (max-width:760px){ .pasos{ grid-template-columns:1fr; } }
.paso{ background:var(--paper-raised); border:1px solid var(--line); border-radius:14px; padding:20px; }
.paso-n{
  display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%;
  background:var(--coral-soft); color:var(--coral-dark); font-weight:800; font-size:.85rem; margin-bottom:10px;
}
.paso h3{ font-size:1rem; margin-bottom:4px; }
.paso p{ font-size:.86rem; color:var(--ink-soft); margin:0; }

.medios-title{ font-size:1.1rem; margin-bottom:14px; }
.medios-pago{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:16px; }
.medio-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:14px; padding:18px; text-align:center; }
.medio-qr{ width:120px; height:120px; margin:0 auto 12px; border-radius:10px; background:var(--peach-soft); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.medio-qr img{ width:100%; height:100%; object-fit:contain; }
.medio-qr span{ font-size:.72rem; color:var(--ink-soft); padding:0 10px; }
.medio-nombre{ font-weight:700; margin-bottom:2px; }
.medio-detalle{ font-size:.82rem; color:var(--ink-soft); }
.nota-pago{ margin-top:20px; font-size:.88rem; color:var(--ink-soft); max-width:65ch; }

/* ---------- Redes ---------- */
.redes{ display:flex; gap:14px; flex-wrap:wrap; }
.red-link{
  display:flex; align-items:center; gap:10px; background:var(--paper-raised); border:1px solid var(--line);
  border-radius:99px; padding:12px 22px; text-decoration:none; font-weight:600; color:var(--ink); font-size:.92rem;
}
.red-link:hover{ border-color:var(--coral); color:var(--coral); }

/* ---------- Footer ---------- */
.site-footer{
  text-align:center; padding:40px 24px 56px; border-top:1px solid var(--line); background:var(--paper-raised);
}
.footer-logo{ height:78px; margin:0 auto 12px; }
.site-footer p{ color:var(--ink-soft); font-size:.85rem; }

/* ---------- WhatsApp float ---------- */
.whatsapp-float{
  position:fixed; right:20px; bottom:20px; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.2); z-index:25; text-decoration:none;
}

/* ---------- Drawer (carrito / pedido) ---------- */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(59,46,44,.35); opacity:0; pointer-events:none;
  transition:opacity .2s ease; z-index:30;
}
.drawer-overlay.abierto{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px, 100%); background:var(--paper);
  box-shadow:-10px 0 30px rgba(0,0,0,.15); transform:translateX(100%); transition:transform .25s ease;
  z-index:31; display:flex; flex-direction:column;
}
.drawer.abierto{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
.drawer-head h3{ font-size:1.1rem; }
.drawer-close{ background:none; border:none; font-size:1.1rem; cursor:pointer; color:var(--ink-soft); }
.drawer-body{ padding:22px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:14px; }

.item-carrito{ display:flex; gap:12px; align-items:center; border-bottom:1px solid var(--line); padding-bottom:12px; }
.item-carrito .info{ flex:1; }
.item-carrito .nombre{ font-weight:600; font-size:.9rem; }
.item-carrito .precio{ font-size:.8rem; color:var(--ink-soft); }
.item-qty{ display:flex; align-items:center; gap:8px; }
.item-qty button{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:var(--paper-raised); cursor:pointer; font-weight:700; }
.item-quitar{ background:none; border:none; color:var(--coral); font-size:.78rem; cursor:pointer; text-decoration:underline; }

.carrito-vacio{ text-align:center; color:var(--ink-soft); padding:30px 0; }
.carrito-total{ display:flex; justify-content:space-between; align-items:center; font-size:1.05rem; padding-top:8px; }

.drawer-body label{ display:flex; flex-direction:column; gap:6px; font-size:.85rem; font-weight:600; color:var(--ink); }
.drawer-body input, .drawer-body textarea{
  font-family:'Poppins'; font-size:.92rem; padding:10px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--paper-raised); color:var(--ink);
}
.drawer-body input:focus, .drawer-body textarea:focus{ outline:2px solid var(--coral); outline-offset:1px; }

.ok-icon{
  width:56px; height:56px; border-radius:50%; background:var(--teal); color:#fff; font-size:1.5rem;
  display:flex; align-items:center; justify-content:center; margin:0 auto;
}
#drawer-step-ok{ text-align:center; }
#drawer-step-ok h4{ font-size:1.2rem; }
#drawer-step-ok p{ color:var(--ink-soft); font-size:.9rem; }

.form-error{ color:var(--coral-dark); font-size:.82rem; }

@media (prefers-reduced-motion:no-preference){
  .btn-primary, a{ transition:background .15s ease, color .15s ease; }
}