/* ===== Paleta ===== */
:root{
  --bg:#F6F1EC;
  --surface:#FFF8F4;
  --surface-2:#F0E7E3;
  --text:#3D2E2E;
  --muted:#776565;
  --brand:#B97B7B;
  --brand-dark:#8F5F5F;
  --brand-soft:#D8A9A9;
}

/* Base */
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 "Nunito Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial}
h1,h2,h3{font-family:"Poppins",system-ui}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}

/* Topbar & Header */
.topbar{background:var(--surface-2);color:var(--muted);text-align:center;padding:.45rem .75rem;font-size:.92rem;border-bottom:1px solid rgba(0,0,0,.05)}
.header{position:sticky;top:0;z-index:40;background:#fffaf7cc;backdrop-filter:saturate(1.1) blur(8px);border-bottom:1px solid rgba(0,0,0,.06)}
.nav{max-width:1200px;margin:auto;padding:.75rem 1rem;display:flex;align-items:center;gap:1rem}
.logo{height:64px;width:auto;object-fit:contain}
.brand{display:flex;align-items:center;gap:1rem;text-decoration:none}
.brand-text{display:grid;line-height:1}
.brand-name{font-weight:700}
.brand-sub{font-size:.85rem;color:var(--muted)}
.nav-links{margin-left:auto;display:flex;gap:.9rem;align-items:center}
.nav-links a{padding:.45rem .7rem;border-radius:.5rem;text-decoration:none;color:#574848}
.nav-links a:hover{background:var(--surface-2)}
.cart-btn{display:flex;align-items:center;gap:.45rem;background:var(--surface-2);border:1px solid rgba(0,0,0,.06);padding:.45rem .7rem;border-radius:.6rem;cursor:pointer}
.cart-badge{min-width:22px;height:22px;border-radius:999px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.8rem}

/* Hero */
.hero{background:linear-gradient(180deg,var(--brand) 0%,var(--brand-dark) 100%);color:#fff}
.hero-inner{max-width:1200px;margin:auto;padding:3.2rem 1rem 2.6rem;display:grid;grid-template-columns:1.05fr .95fr;gap:1.2rem;align-items:center}
@media (max-width:940px){.hero-inner{grid-template-columns:1fr}}
.hero-copy h1{font-size:clamp(1.9rem,4.4vw,3.2rem);margin:.2rem 0}
.hero-copy p{color:#f7eaea;margin:.2rem 0 1.1rem}
.cta{display:flex;gap:.6rem;flex-wrap:wrap}
.btn{--bg:var(--surface-2);--fg:var(--text);display:inline-block;padding:.75rem 1rem;border-radius:.7rem;border:1px solid rgba(0,0,0,.06);background:var(--bg);color:var(--fg);text-decoration:none;cursor:pointer;transition:.2s transform}
.btn:hover{transform:translateY(-1px)}
.btn.primary{--bg:#fff;--fg:var(--brand-dark);border-color:#fff6}
.btn.ghost{--bg:transparent;--fg:#fff;border-color:#fff6;color:#fff}

/* Carrusel en rectángulo */
.hero-art{min-height:280px;display:grid;place-items:center}
.hero-frame{
  width:min(420px,92%); aspect-ratio:3/5; border-radius:28px;
  position:relative; overflow:hidden; display:grid; place-items:center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.2)),
    linear-gradient(180deg, var(--brand-soft), var(--brand));
  box-shadow:0 30px 60px rgba(185,123,123,.22), inset 0 0 0 1.2px rgba(255,255,255,.35);
}
.slides{position:absolute; inset:0; margin:0; padding:0; list-style:none}
.slide{position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity .5s ease}
.slide.is-active{opacity:1}
.slide img{max-width:74%; height:auto; object-fit:contain; pointer-events:none; filter:drop-shadow(0 12px 28px rgba(0,0,0,.18))}
.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:36px; height:36px; border-radius:999px; border:0; cursor:pointer;
  display:grid; place-items:center; color:var(--brand-dark); background:rgba(255,255,255,.75);
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.hero-nav:hover{ background:#fff; }
.hero-nav.prev{ left:10px } .hero-nav.next{ right:10px }
.dots{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:2 }
.dots button{ width:8px; height:8px; border-radius:999px; border:0; cursor:pointer; background:rgba(255,255,255,.55) }
.dots button[aria-selected="true"]{ background:#fff; width:18px; height:8px; border-radius:8px }

/* Layout */
.container{max-width:1200px;margin:auto;padding:2rem 1rem}
.section-title{display:flex;justify-content:space-between;align-items:end;margin:1.6rem 0 .9rem}
.section-title h2{margin:0}
.small{font-size:.92rem;color:var(--muted)}

/* Filtros */
.filters{display:grid;grid-template-columns:1fr auto auto;gap:.6rem;align-items:center;margin-bottom:.4rem}
@media (max-width:900px){.filters{grid-template-columns:1fr 1fr}}
.search input,.select,.sort{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:.6rem;padding:.6rem .75rem;color:var(--text)}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin:.4rem 0 1rem}
.chip{padding:.25rem .6rem;border:1px solid rgba(0,0,0,.12);border-radius:999px;background:#fff;color:#674e4e;cursor:pointer}
.chip.active{background:var(--brand);border-color:transparent;color:#fff}

/* Grid productos */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.card{border:1px solid rgba(0,0,0,.08);border-radius:.9rem;overflow:hidden;background:var(--surface)}
.thumb{aspect-ratio:4/3;display:grid;place-items:center;position:relative;overflow:hidden;background:linear-gradient(180deg,#ffffff,#fff0)}
.thumb::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 70% 30%,rgba(255,255,255,.45),transparent 55%)}
.prod-img{max-width:72%;height:auto;object-fit:contain;z-index:1;filter:drop-shadow(0 8px 20px rgba(0,0,0,.10))}
.info{padding:.9rem}
.info h3{margin:.1rem 0 .35rem;font-size:1.05rem;font-weight:600}
.meta{color:var(--muted);font-size:.9rem;margin-bottom:.5rem}
.price{display:flex;gap:.45rem;align-items:baseline}
.actions{display:flex;gap:.5rem;align-items:center;margin-top:.6rem}
.qty{display:flex;align-items:center;border:1px solid rgba(0,0,0,.12);border-radius:.6rem;background:#fff}
.qty button{background:transparent;border:0;padding:.45rem .6rem;cursor:pointer}
.qty input{width:42px;text-align:center;background:transparent;border:0}
.btn.primary.add{background:var(--brand);color:#fff;border-color:transparent}

/* Carrito */
.cart{position:fixed;inset:0 0 0 auto;width:min(420px,100%);background:var(--surface);border-left:1px solid rgba(0,0,0,.08);
  transform:translateX(100%);transition:transform .25s ease;z-index:100;display:grid;grid-template-rows:auto 1fr auto}
.cart.open{transform:none}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid rgba(0,0,0,.08)}
.cart-body{overflow:auto}
.cart-empty{color:var(--muted);padding:1rem;text-align:center}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:.6rem;padding:1rem;border-bottom:1px solid rgba(0,0,0,.06)}
.line img{width:64px;height:64px;object-fit:contain;border-radius:.4rem;background:#fff}
.line h4{margin:.1rem 0 .2rem;font-size:.98rem}
.l-meta{color:var(--muted);font-size:.9rem}
.l-qty{display:flex;gap:.35rem;align-items:center;margin-top:.35rem}
.l-qty input{width:44px;text-align:center;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:.4rem;padding:.15rem .25rem}
.remove{background:transparent;border:0;color:#b33939;cursor:pointer}
.cart-foot{padding:1rem;border-top:1px solid rgba(0,0,0,.08);display:grid;gap:.7rem}
.ship{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:.6rem;padding:.6rem}
.ship-row{display:flex;justify-content:space-between;gap:.6rem;align-items:center}
.totals{display:grid;gap:.25rem;color:var(--muted)}
.totals .row{display:flex;justify-content:space-between}
.total{font-size:1.15rem;color:var(--text);font-weight:700}
.checkout{display:flex;gap:.5rem;justify-content:flex-end}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;place-items:center;z-index:120}
.modal.open{display:grid}
.modal-card{width:min(680px,92%);background:var(--surface);border:1px solid rgba(0,0,0,.08);border-radius:.9rem;overflow:hidden}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid rgba(0,0,0,.08)}
.modal-body{padding:1rem;display:grid;gap:.9rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media (max-width:720px){.grid-2{grid-template-columns:1fr}}
.input{display:grid;gap:.25rem}
.input input,.input select,.input textarea{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:.6rem;padding:.55rem .6rem}
.note{color:var(--muted);font-size:.9rem}
.actions-end{display:flex;justify-content:flex-end;gap:.6rem}

/* Footer */
.footer{margin-top:3rem;border-top:1px solid rgba(0,0,0,.12);padding:2rem 1rem;color:var(--muted);text-align:center}
.footer a{text-decoration:none;color:var(--text)}

/* Efectos suaves */
.soft-enter{opacity:0;transform:translateY(8px);will-change:transform,opacity}
body.is-ready .soft-enter{opacity:1;transform:none;transition:opacity .45s ease-out, transform .45s ease-out}
.d150{transition-delay:.15s}.d250{transition-delay:.25s}

@keyframes softUp{to{opacity:1;transform:none}}
.grid .card{opacity:0;transform:translateY(8px)}
body.is-ready .grid .card{animation:softUp .45s ease-out forwards;animation-delay:var(--d,0ms)}

.reveal{opacity:0;transform:translateY(8px)}
.reveal.in{opacity:1;transform:none;transition:opacity .45s ease-out, transform .45s ease-out}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* Badge "Agotado" (delicado) */
.badge-out{
  position:absolute;
  top:10px;
  right:10px;
  padding:.24rem .6rem;
  font-weight:800;
  font-size:.72rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--brand-dark);
  background:rgba(255,255,255,.95);
  border:1px solid rgba(185,123,123,.35);
  border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  z-index:2;
  pointer-events:none;
}

/* Badge "Último disponible" */
.badge-low{
  position:absolute;
  top:10px;
  left:auto;  
  right:10px;            /* si lo querés a la derecha: right:10px; left:auto; */
  padding:.24rem .6rem;
  font-weight:800;
  font-size:.72rem;
  letter-spacing:.02em;
  color:var(--brand-dark);
  background:#fff;
  border:1px solid var(--brand);
  border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  z-index:2;
  pointer-events:none;
}

/* Asegurar posicionamiento y sin overlays raros */
.card .thumb{ position:relative; }
.card .thumb::before,
.card .thumb::after{ background:none !important; }

/* Deshabilitar acciones solo en agotados */
.card.is-out .actions,
.card.is-out .actions *{
  pointer-events:none;
  cursor:not-allowed;
  opacity:.55;
}

/* Estado deshabilitado del botón + */
.qty button:disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* ====== Fix header en mobile ====== */

/* Que los bloques no desborden en flex */
.nav, .brand, .nav-links { min-width: 0; }

/* Mobile básico: achicar y ocultar subtítulo */
@media (max-width: 640px){
  .logo{ height: 44px }                 /* antes estaba en 64px */
  .brand-sub{ display: none }           /* oculta "Fragancias & Body Care" */
  .brand-name{ font-size: 1.05rem }     /* un toque más chico */
  .nav{ padding: .6rem .75rem; gap:.6rem }
  .nav-links{ gap: .6rem }
  .nav-links a{ padding: .4rem .55rem; font-size: .95rem; white-space: nowrap; }
}

/* Muy angosto: poner los links en segunda fila, debajo de la marca */
@media (max-width: 420px){
  .header .nav{
    display: grid;
    grid-template-columns: 1fr auto;    /* marca a la izq., carrito a la der. si lo tenés */
    align-items: center;
    row-gap: .35rem;
  }
  .nav-links{
    grid-column: 1 / -1;                /* ocupa toda la fila de abajo */
    justify-content: flex-start;
    margin-left: 0;
    gap: .5rem;
  }
}

/* === Hero con movimiento (solo CSS) === */
.hero{
  /* asegura que el efecto quede bajo el contenido */
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* degradado base + “respiración” del color */
  background:
    radial-gradient(120% 150% at 20% -10%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(135deg, #B97B7B 0%, #8F5F5F 50%, #B97B7B 100%);
  background-size:
    100% 100%,
    300% 300%;
  background-position:
    0 0,
    0% 50%;
  animation: heroGradient 18s ease-in-out infinite;
}

/* burbujas/bokeh muy suaves que se mueven */
.hero::before{
  content:"";
  position:absolute; inset:-20% -15%;
  z-index:0; pointer-events:none;
  background:
    radial-gradient(45% 55% at 18% 28%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(40% 50% at 82% 68%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(55% 55% at 62% 12%, rgba(255,255,255,.08), transparent 62%);
  filter: blur(22px);
  animation: heroBlobs 26s ease-in-out infinite;
}

/* barrido de luz esporádico */
.hero::after{
  content:"";
  position:absolute; inset:-30% -60%;
  z-index:0; pointer-events:none;
  background: linear-gradient(115deg,
    transparent 40%,
    rgba(255,255,255,.14) 50%,
    transparent 60%);
  filter: blur(10px);
  animation: heroSweep 8s linear infinite;
}

/* contenido por encima de los efectos */
.hero > *{ position: relative; z-index:1; }

/* animaciones */
@keyframes heroGradient{
  0%   { background-position: 0 0,   0% 50%; }
  50%  { background-position: 0 0, 100% 50%; }
  100% { background-position: 0 0,   0% 50%; }
}
@keyframes heroBlobs{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%    { transform:translate3d(2%,-2%,0) scale(1.03); }
}
@keyframes heroSweep{
  0%   { transform:translateX(-45%); opacity:0; }
  5%   { opacity:1; }
  15%  { transform:translateX(45%);  opacity:1; }
  20%  { opacity:0; }
  100% { transform:translateX(45%);  opacity:0; }
}

/* accesibilidad */
@media (prefers-reduced-motion: reduce){
  .hero, .hero::before, .hero::after{ animation:none; }
}

.pill{
  display:inline-block; padding:.8rem 1.2rem; border-radius:12px;
  background:#f3ebe7; border:1px solid #e4d9d3; color:#6b5a55; text-decoration:none;
}
.pill:hover{ filter:brightness(0.98); }