/* =====================================================================
   VESTIGIO Perfumería — Sistema de diseño (premium / editorial)
   Fuente: Jost (sans-serif, display + UI + cuerpo)
   ===================================================================== */
:root{
  /* superficies */
  --bg:#0a0a0c; --bg-2:#0e0e12; --panel:#141419; --panel-2:#1b1b21;
  --line:rgba(201,162,75,.20); --line-soft:rgba(255,255,255,.06);
  /* oro */
  --gold:#c9a24b; --gold-2:#e9cd86; --gold-3:#f6e3ab; --gold-deep:#8a6d2f;
  --gold-grad:linear-gradient(135deg,#f6e3ab 0%,#d9b567 38%,#c9a24b 62%,#a07d38 100%);
  --gold-sheen:linear-gradient(180deg,#f7e6b0,#d3ab5e 55%,#b7913f);
  /* texto */
  --text:#f4efe6; --muted:#c3bbab; --muted-2:#938c7d; --white:#fff;
  /* forma */
  --radius:16px; --radius-sm:10px;
  --shadow:0 20px 50px -12px rgba(0,0,0,.7);
  --shadow-gold:0 14px 40px -10px rgba(201,162,75,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1240px; --gutter:6vw;
  --step: clamp(1rem, .92rem + .4vw, 1.06rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--text);font-family:"Jost",system-ui,"Segoe UI",sans-serif;
  font-size:var(--step);line-height:1.65;font-weight:300;letter-spacing:.005em;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(201,162,75,.10), transparent 60%),
    radial-gradient(900px 600px at 0% 12%, rgba(201,162,75,.06), transparent 55%),
    linear-gradient(180deg,#0a0a0c,#090909 40%,#0a0a0c);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* grano sutil para dar textura de material (evita el look plano) */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,.serif{font-family:"Jost",system-ui,sans-serif;font-weight:400;letter-spacing:.005em;line-height:1.16}
main{position:relative;z-index:2}

/* texto en oro con degradado metálico */
.gold-text{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold-2);
}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:16px var(--gutter);
  background:linear-gradient(180deg,rgba(9,9,11,.9),rgba(9,9,11,.62));
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line-soft);
}
.nav--scrolled{padding-top:11px;padding-bottom:11px;background:rgba(9,9,11,.94);border-bottom-color:var(--line)}
.nav__brand img{display:block;height:40px;width:auto;transition:height .35s var(--ease)}
.nav--scrolled .nav__brand img{height:34px}
.nav__links{display:flex;align-items:center;gap:30px;font-size:.86rem;letter-spacing:.06em}
.nav__links a{color:var(--muted);text-transform:uppercase;position:relative;transition:color .25s}
.nav__links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--gold-grad);transition:right .3s var(--ease)}
.nav__links a:not(.btn):hover{color:var(--gold-3)}
.nav__links a:not(.btn):hover::after{right:0}

/* ---------- BOTONES (minimalistas, finos, con contorno) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;
  padding:11px 24px;font-family:"Jost",sans-serif;font-weight:400;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer;border:1px solid transparent;transition:.35s var(--ease)}
/* primario: relleno dorado plano y sobrio */
.btn--gold{background:var(--gold);color:#1c1408;border-color:var(--gold)}
.btn--gold:hover{background:transparent;color:var(--gold-2);border-color:var(--gold)}
/* secundario y whatsapp: contorno fino (sin verde llamativo) */
.btn--ghost,.btn--wa{border:1px solid rgba(201,162,75,.45);color:var(--gold-2);background:transparent}
.btn--ghost:hover,.btn--wa:hover{border-color:var(--gold-2);color:var(--gold-3);background:rgba(201,162,75,.05)}
.btn--sm{padding:8px 16px;font-size:.64rem;letter-spacing:.16em}

/* ---------- divisor con rombo (motivo de marca) ---------- */
.divider{display:flex;align-items:center;justify-content:center;gap:16px;margin:22px auto}
.divider::before,.divider::after{content:"";height:1px;width:min(120px,18vw);background:linear-gradient(90deg,transparent,var(--gold-deep))}
.divider::after{background:linear-gradient(90deg,var(--gold-deep),transparent)}
.divider i{width:8px;height:8px;background:var(--gold-grad);transform:rotate(45deg);box-shadow:0 0 12px rgba(201,162,75,.6)}

/* ---------- HERO ---------- */
.hero{position:relative;text-align:center;padding:clamp(56px,9vw,110px) var(--gutter) clamp(48px,7vw,86px);overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.hero__logo{margin:0 auto 10px;max-height:clamp(200px,32vw,300px);width:auto;
  filter:drop-shadow(0 10px 34px rgba(201,162,75,.12))}
.hero__slogan{font-family:"Jost",system-ui,sans-serif;font-style:italic;font-weight:500;
  font-size:clamp(1.5rem,1.1rem+1.6vw,2.3rem);margin:4px 0 2px;letter-spacing:.02em}
.hero__sub{color:var(--muted);max-width:600px;margin:14px auto 30px;font-size:1.02rem}
.hero__cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* franja de estadísticas */
.strip{display:flex;gap:clamp(28px,6vw,72px);justify-content:center;flex-wrap:wrap;
  padding:30px var(--gutter);background:linear-gradient(180deg,var(--bg-2),transparent);
  border-bottom:1px solid var(--line-soft)}
.strip div{text-align:center}
.strip b{font-family:"Jost",system-ui,sans-serif;font-weight:400;font-size:clamp(1.8rem,1.3rem+1.3vw,2.4rem);display:block;line-height:1}
.strip span{color:var(--muted-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;margin-top:6px;display:block}

/* ---------- SECCIONES ---------- */
.section{padding:clamp(52px,8vw,96px) var(--gutter);max-width:var(--maxw);margin:0 auto}
.section--alt{background:linear-gradient(180deg,var(--bg-2),transparent);max-width:none;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.section--alt>*{max-width:var(--maxw);margin-inline:auto}
.section__head{text-align:center;margin-bottom:44px}
.section__eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.28em;font-size:.72rem;font-weight:500}
.section__head h2{font-size:clamp(2rem,1.5rem+1.8vw,3rem);margin:10px 0 0}
.section__head p.lead{color:var(--muted);max-width:620px;margin:12px auto 0}
.section__actions{text-align:center;margin-top:40px}

/* pasos "cómo comprar" */
.steps{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.step{background:linear-gradient(180deg,var(--panel),rgba(20,20,25,.4));border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:34px 28px;text-align:center;transition:.35s var(--ease)}
.step:hover{border-color:var(--line);transform:translateY(-4px);box-shadow:var(--shadow)}
.step__num{font-family:"Jost",system-ui,sans-serif;font-size:2.4rem;line-height:1}
.step h3{font-size:1.5rem;margin:8px 0 8px}
.step p{color:var(--muted);font-size:.95rem;margin:0}

/* ---------- GRID / CARDS ---------- */
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(224px,1fr))}
.card{position:relative;background:linear-gradient(180deg,var(--panel),rgba(17,17,21,.55));
  border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.card:hover{transform:translateY(-4px);border-color:var(--line)}
.card__imgwrap{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  padding:16px;background:#fff}
.card__imgwrap img{max-height:100%;width:auto;object-fit:contain;transition:transform .5s var(--ease)}
.card:hover .card__imgwrap img{transform:scale(1.06)}
.card--out .card__imgwrap{background:#eceae6}
.card--out .card__imgwrap img{filter:grayscale(.55);opacity:.72}
.card__badge{position:absolute;top:12px;left:12px;background:rgba(9,9,11,.86);color:var(--gold-2);
  font-size:.6rem;font-weight:500;letter-spacing:.14em;padding:6px 11px;border-radius:999px;
  border:1px solid var(--gold-deep);backdrop-filter:blur(4px);text-transform:uppercase}
.card__badge--star{left:auto;right:12px;background:var(--gold-grad);color:#241a06;border:none;box-shadow:0 4px 14px -4px rgba(201,162,75,.7)}
.card__body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.card__brand{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:500}
.card__name{font-family:"Jost",system-ui,sans-serif;font-size:1.12rem;font-weight:400;margin:0;line-height:1.25}
.card__name a{transition:color .25s}
.card__name a:hover{color:var(--gold-3)}
.card__meta{color:var(--muted-2);font-size:.78rem;letter-spacing:.04em;display:flex;gap:7px;align-items:center}
.card__meta .dot{opacity:.5}
.card__foot{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:11px;padding-top:12px;border-top:1px solid var(--line-soft)}
.card__foot .btn{width:100%;justify-content:center}
.card__price{font-family:"Jost",system-ui,sans-serif;font-weight:500;font-size:1.15rem;letter-spacing:.01em}

/* ---------- CATÁLOGO ---------- */
.catalog{display:grid;grid-template-columns:260px 1fr;gap:34px;padding:clamp(28px,5vw,52px) var(--gutter);max-width:1400px;margin:0 auto}
@media(min-width:900px){
  .catalog__main .grid{grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:18px}
}
.filters{background:linear-gradient(180deg,var(--panel),rgba(17,17,21,.5));border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:24px;align-self:start;position:sticky;top:92px}
.filters h4{margin:0;font-family:"Jost",system-ui,sans-serif;font-weight:400;font-size:1.25rem;color:var(--gold-2)}
.filters label{display:block;font-size:.68rem;color:var(--muted-2);margin:20px 0 7px;text-transform:uppercase;letter-spacing:.14em}
.filters input[type=text],.filters select{width:100%;padding:11px 12px;border-radius:var(--radius-sm);
  border:1px solid var(--line-soft);background:var(--panel-2);color:var(--text);font-family:inherit;font-size:.9rem;transition:.25s}
.filters input[type=text]:focus,.filters select:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(201,162,75,.12)}
.filters .check{display:flex;align-items:center;gap:9px;margin-top:18px;color:var(--text);font-size:.85rem;text-transform:none;letter-spacing:0}
.filters .check input{accent-color:var(--gold)}
.filters .actions{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.catalog__main .toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:26px;flex-wrap:wrap;border-bottom:1px solid var(--line-soft);padding-bottom:18px}
.catalog__main .toolbar h2{font-size:clamp(1.8rem,1.4rem+1vw,2.4rem);margin:0}
.catalog__main .count{color:var(--muted-2);font-size:.85rem;letter-spacing:.04em}

/* filtros en móvil */
.filters__toggle{display:none}

/* paginación */
.pager{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:46px 0 6px}
.pager a,.pager span{min-width:42px;text-align:center;padding:10px 12px;border-radius:var(--radius-sm);
  border:1px solid var(--line-soft);color:var(--muted);font-size:.85rem;transition:.25s}
.pager a:hover{border-color:var(--gold-deep);color:var(--gold-2)}
.pager .cur{background:var(--gold-grad);color:#241a06;border-color:transparent;font-weight:500}

/* ---------- FICHA PRODUCTO ---------- */
.back{display:inline-block;color:var(--muted-2);margin:26px var(--gutter) 0;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;transition:color .25s}
.back:hover{color:var(--gold-2)}
.detail{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,60px);padding:32px var(--gutter) 20px;max-width:var(--maxw);margin:0 auto}
.detail__img{position:relative;background:#fff;border-radius:var(--radius);
  padding:40px;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border:1px solid var(--line-soft);box-shadow:var(--shadow)}
.detail__img img{max-height:100%;width:auto;object-fit:contain}
.detail__info{align-self:center}
.detail__brand{color:var(--gold);letter-spacing:.22em;text-transform:uppercase;font-size:.78rem;font-weight:500}
.detail h1{font-size:clamp(2rem,1.6rem+1.6vw,3rem);margin:10px 0 6px}
.detail__price{font-family:"Jost",system-ui,sans-serif;font-size:1.9rem;font-weight:400;margin:16px 0 4px;letter-spacing:.01em}
.detail__specs{list-style:none;padding:0;margin:24px 0;border-top:1px solid var(--line-soft)}
.detail__specs li{display:flex;justify-content:space-between;padding:13px 2px;border-bottom:1px solid var(--line-soft);font-size:.95rem}
.detail__specs li span:first-child{color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;align-self:center}
.detail__specs li span:last-child{color:var(--text)}
.detail__note{color:var(--muted-2);margin-top:16px;font-size:.82rem}

/* ---------- FOOTER ---------- */
.footer{position:relative;z-index:2;text-align:center;padding:60px var(--gutter) 36px;
  background:linear-gradient(180deg,transparent,var(--bg-2));border-top:1px solid var(--line-soft);margin-top:20px}
.footer__icon{margin:0 auto 16px;height:66px;width:auto;opacity:.92;filter:drop-shadow(0 6px 18px rgba(201,162,75,.25))}
.footer__slogan{font-family:"Jost",system-ui,sans-serif;font-style:italic;font-size:1.4rem;margin:0 0 18px}
.footer__contact{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center;color:var(--muted)}
.footer__contact a{color:var(--muted);transition:color .25s;letter-spacing:.04em}
.footer__contact a:hover{color:var(--gold-2)}
.footer__contact .sep{opacity:.4}
.footer__copy{color:var(--muted-2);font-size:.74rem;letter-spacing:.08em;margin-top:24px;text-transform:uppercase}

/* ---------- ADMIN ---------- */
.admin-wrap{max-width:1200px;margin:0 auto;padding:28px var(--gutter);position:relative;z-index:2}
.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;flex-wrap:wrap;gap:14px}
.admin-top h1{font-size:1.8rem;margin:0}
.table{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:.88rem}
.table th{color:var(--gold);text-transform:uppercase;font-size:.66rem;letter-spacing:.12em;padding:6px 12px;text-align:left}
.table td{padding:10px 12px;background:var(--panel);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);vertical-align:middle}
.table td:first-child{border-left:1px solid var(--line-soft);border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.table td:last-child{border-right:1px solid var(--line-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.table tr:hover td{background:var(--panel-2)}
.table img{width:46px;height:46px;object-fit:contain;background:#fff;border-radius:8px}
.table td:nth-child(2){font-family:"Jost",system-ui,sans-serif;font-size:1.12rem}
.tag{font-size:.66rem;padding:3px 10px;border-radius:999px;border:1px solid var(--line-soft);letter-spacing:.06em}
.tag--ok{color:#7bd79a;border-color:rgba(123,215,154,.35)}
.tag--out{color:#e59a9a;border-color:rgba(229,154,154,.35)}
.form-card{background:linear-gradient(180deg,var(--panel),rgba(17,17,21,.5));border:1px solid var(--line-soft);border-radius:var(--radius);padding:30px;max-width:740px;margin:0 auto;box-shadow:var(--shadow)}
.form-row{margin-bottom:18px}
.form-row label{display:block;font-size:.7rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.1em;margin-bottom:7px}
.form-row input,.form-row select,.form-row textarea{width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--line-soft);background:var(--panel-2);color:var(--text);font-family:inherit;font-size:.95rem;transition:.25s}
.form-row input:focus,.form-row select:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(201,162,75,.12)}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.checkrow{display:flex;gap:26px;flex-wrap:wrap}
.checkrow label{display:flex;align-items:center;gap:10px;color:var(--text);text-transform:none;letter-spacing:0;font-size:.9rem;white-space:nowrap}
/* los checkboxes NO deben heredar width:100% del input de formulario */
.checkrow input[type=checkbox],.form-row input[type=checkbox]{width:18px;height:18px;min-width:18px;padding:0;margin:0;flex:0 0 auto;accent-color:var(--gold);cursor:pointer}
.login-box{max-width:380px;margin:11vh auto;text-align:center;position:relative;z-index:2}
.login-box img{margin:0 auto 22px;max-height:130px;filter:drop-shadow(0 10px 30px rgba(201,162,75,.2))}
.login-box h2{font-size:1.8rem;margin:0 0 20px}
.alert{background:rgba(90,25,25,.4);border:1px solid rgba(229,154,154,.35);color:#f0b4b4;padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:18px;font-size:.9rem}
.alert--ok{background:rgba(25,70,40,.35);border-color:rgba(123,215,154,.35);color:#a8e5bf}
.searchbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.searchbar input{flex:1;min-width:200px;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--line-soft);background:var(--panel-2);color:var(--text);font-family:inherit}

/* ---------- REVEAL AL SCROLL ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .catalog{grid-template-columns:1fr;gap:0}
  .filters{position:static;margin-bottom:22px}
  .filters__toggle{display:flex;justify-content:space-between;align-items:center;width:100%;cursor:pointer;
    background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:14px 16px;color:var(--gold-2);font-family:inherit;font-size:.9rem;letter-spacing:.06em}
  .filters__body{display:none;margin-top:16px}
  .filters[open] .filters__body,.filters--open .filters__body{display:block}
  .detail{grid-template-columns:1fr}
  .nav__links{gap:16px}
  .nav__links a:not(.btn){display:none}
}
@media(max-width:520px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .card__name{font-size:1.15rem}
  .card__foot{flex-direction:column;align-items:stretch;gap:10px}
  .card__foot .btn{justify-content:center;width:100%}
  .card__price{font-size:1.25rem}
  .form-2{grid-template-columns:1fr}
  .btn{padding:12px 20px}
}