/* Parfum Dealer: catálogo al estilo Culturebrand. Marfil, negro y oro. */
:root{--fondo:#FBF9F5;--ink:#141414;--mute:#7a746b;--line:#ece4d6;--oro:#9A7B4F;--oro-l:#d8c7a6;--crema:#F4EFE6;
  --tit:"Jost",Inter,system-ui,sans-serif;--txt:Inter,system-ui,sans-serif;
  --suave:cubic-bezier(.22,1,.36,1);--apple:cubic-bezier(.28,.11,.32,1);--retraso:0s}
html.con-intro{--retraso:2.3s}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:150px}
body{margin:0;background:var(--fondo);color:var(--ink);font:15px/1.55 var(--txt);-webkit-font-smoothing:antialiased}
body.sin-scroll{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--tit);font-weight:300;margin:0}
::selection{background:var(--oro-l)}
.salto{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;z-index:300}.salto:focus{left:8px}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}

/* ---------- Pantalla de carga ---------- */
.intro{position:fixed;inset:0;z-index:1000;background:var(--fondo);display:grid;place-items:center;animation:intro-sube .9s var(--apple) 2s forwards}
.intro-in{display:flex;flex-direction:column;align-items:center;gap:22px}
.intro-logo{width:120px;height:auto;opacity:0;transform:translate3d(0,14px,0);will-change:opacity,transform;backface-visibility:hidden;animation:intro-logo 1.1s var(--suave) .15s forwards}
.intro-linea{width:0;height:1px;background:var(--oro);animation:intro-l .9s var(--suave) .9s forwards}
@keyframes intro-logo{to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes intro-l{to{width:160px}}
@keyframes intro-sube{to{transform:translateY(-100%)}}

/* ---------- Encabezado ---------- */
.top{position:sticky;top:0;z-index:60;display:flex;justify-content:center;align-items:center;gap:clamp(26px,3.4vw,52px);padding:10px clamp(16px,4vw,48px);background:rgba(251,249,245,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);transition:transform .55s var(--apple),box-shadow .4s}
.top.flota{box-shadow:0 1px 0 var(--line)}
.top.oculto{transform:translateY(-100%)}
.top nav{display:flex;gap:clamp(22px,3vw,44px)}
.top nav a{font-family:var(--tit);font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;position:relative;padding:6px 0}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--oro);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--suave)}
.top nav a:hover::after{transform:scaleX(1);transform-origin:left}
.top-logo img{height:52px;width:auto;transition:transform .6s var(--suave)}
.top-logo:hover img{transform:scale(1.05)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 28px;background:var(--ink);color:#fff;text-decoration:none;font-size:12px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--ink);transition:transform .5s var(--suave),background .3s,color .3s}
.btn i{font-style:normal;transition:transform .5s var(--suave)}
.btn:hover{transform:translateY(-2px)}.btn:hover i{transform:translateY(3px)}
.btn-o{background:transparent;color:var(--ink)}.btn-o:hover{background:var(--ink);color:#fff}

/* ---------- Portada (estilo Apple) ---------- */
.hero{--p:0;position:relative;min-height:calc(100svh - 72px);display:flex;align-items:center;padding:30px clamp(16px,4vw,48px) 80px;overflow:hidden}
.hero-in{max-width:1220px;margin:0 auto;width:100%;display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center;
  transform:scale(calc(1 - var(--p) * .1)) translateY(calc(var(--p) * -50px));opacity:calc(1 - var(--p) * 1.25);will-change:transform}
.kicker{margin:0 0 6px;color:var(--oro);font-family:var(--tit);font-size:clamp(13px,1.4vw,18px);letter-spacing:.55em;text-transform:uppercase}
.titulo{font-weight:200;font-size:clamp(56px,11.5vw,160px);line-height:.95;letter-spacing:.12em;white-space:nowrap;margin-left:-.05em}
.titulo span{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(12px);animation:letra 1.3s var(--suave) forwards;animation-delay:calc(var(--retraso) + .25s + var(--i) * 75ms)}
@keyframes letra{to{opacity:1;transform:none;filter:none}}
.sub{font-size:clamp(16px,1.6vw,20px);margin:24px 0 2px}
.frase{font-style:italic;color:var(--mute);margin:0 0 30px}
.hero-b{display:flex;flex-wrap:wrap;gap:12px}
.hero-sellos{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;padding:0;margin:28px 0 0;font-size:12px;color:var(--mute)}
.hero-sellos li::before{content:"✦ ";color:var(--oro)}
.kicker,.sub,.frase,.hero-b,.hero-sellos{opacity:0;animation:sube 1s var(--suave) forwards}
.kicker{animation-delay:calc(var(--retraso) + .1s)}.sub{animation-delay:calc(var(--retraso) + .9s)}.frase{animation-delay:calc(var(--retraso) + 1s)}.hero-b{animation-delay:calc(var(--retraso) + 1.15s)}.hero-sellos{animation-delay:calc(var(--retraso) + 1.3s)}
@keyframes sube{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-v{display:flex;align-items:flex-end;justify-content:center;gap:clamp(20px,4vw,52px);height:min(58vh,460px)}
.v{width:auto;mix-blend-mode:multiply;opacity:0;transform:translateY(70px);animation:frasco 1.5s var(--suave) forwards}
.v3{height:46%;animation-delay:calc(var(--retraso) + .6s)}.v5{height:62%;animation-delay:calc(var(--retraso) + .75s)}.v10{height:96%;animation-delay:calc(var(--retraso) + .9s)}
@keyframes frasco{to{opacity:1;transform:none}}
.hero .v3{translate:0 calc(var(--p) * -20px)}.hero .v5{translate:0 calc(var(--p) * -60px)}.hero .v10{translate:0 calc(var(--p) * -110px)}
.baja{position:absolute;left:50%;bottom:22px;width:1px;height:46px;background:var(--line);overflow:hidden;opacity:calc(1 - var(--p) * 4)}
.baja span{position:absolute;inset:0;background:var(--oro);animation:baja 2s var(--suave) infinite}
@keyframes baja{from{transform:translateY(-100%)}to{transform:translateY(100%)}}

/* ---------- Cinta de logos ---------- */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding:22px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-r{display:flex;width:max-content;align-items:center;animation:desliza 70s linear infinite}
.marquee:hover .marquee-r{animation-play-state:paused}
.mq-i{padding:0 34px;display:flex;align-items:center;height:44px}
.mq-i img{max-height:40px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.75}
@keyframes desliza{to{transform:translateX(-50%)}}
.marca-txt{font-family:var(--tit);letter-spacing:.14em;text-transform:uppercase;font-size:13px;white-space:nowrap}

/* ---------- Tamaños (pegado mientras bajas) ---------- */
.tam{--p:0;height:250vh;position:relative;background:var(--crema)}
.tam-pega{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:70px 20px 40px;gap:5vh}
.tam-h{text-align:center}.tam-h h2{font-size:clamp(34px,5vw,64px);margin-bottom:8px}.tam-h p{color:var(--mute);margin:0}
.tam-g{display:grid;grid-template-columns:repeat(3,minmax(0,220px));gap:clamp(16px,6vw,90px);align-items:end;text-align:center}
.tam-i{display:flex;flex-direction:column;align-items:center;opacity:.15;transform:translateY(50px) scale(.9);transition:opacity 1s var(--suave),transform 1.2s var(--suave)}
.tam[data-paso="0"] .tam-i:nth-child(1),.tam[data-paso="1"] .tam-i:nth-child(-n+2),.tam[data-paso="2"] .tam-i{opacity:1;transform:none}
.tam-v{height:clamp(170px,36vh,320px);display:flex;align-items:flex-end;margin-bottom:22px}
.tam-v img{height:100%;width:auto;mix-blend-mode:multiply}.tam-i:nth-child(1) .tam-v img{height:52%}.tam-i:nth-child(2) .tam-v img{height:66%}
.tam-i b{font-family:var(--tit);font-weight:300;font-size:clamp(30px,4vw,48px)}
.tam-i span{color:var(--oro);font-family:var(--tit);font-size:clamp(20px,2vw,26px);font-weight:300;font-variant-numeric:tabular-nums}
.tam-i small{color:var(--oro);font-size:11px;letter-spacing:.2em;text-transform:uppercase}

/* ---------- Catálogo ---------- */
.cat{max-width:1240px;margin:0 auto;padding:40px clamp(12px,3vw,32px) 60px}
.filtros{position:sticky;top:0;z-index:40;background:rgba(251,249,245,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);margin:0 calc(-1 * clamp(12px,3vw,32px));padding:10px clamp(12px,3vw,32px) 0}
.secs{display:flex;justify-content:center;gap:4px;margin-bottom:6px}
.secs button{background:none;border:0;padding:8px 16px;font-family:var(--tit);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);position:relative;transition:color .3s}
.secs button::after{content:"";position:absolute;left:16px;right:16px;bottom:2px;height:1px;background:var(--oro);transform:scaleX(0);transition:transform .5s var(--suave)}
.secs button[aria-selected=true]{color:var(--ink)}.secs button[aria-selected=true]::after{transform:scaleX(1)}
.logos{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:4px 0 10px;scroll-snap-type:x proximity}
.logos::-webkit-scrollbar{display:none}
.logo-b{flex:0 0 auto;height:54px;min-width:92px;padding:6px 14px;display:grid;place-items:center;background:none;border:0;border-bottom:2px solid transparent;scroll-snap-align:start;transition:border-color .4s,opacity .3s}
.logo-b img{max-height:36px;max-width:110px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.5;transition:opacity .4s,filter .4s,transform .5s var(--suave)}
.logo-b:hover img{opacity:.9;transform:scale(1.06)}
.logo-b[aria-pressed=true]{border-color:var(--oro)}.logo-b[aria-pressed=true] img{opacity:1;filter:none}
.logo-b.todas{font-family:var(--tit);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}.logo-b.todas[aria-pressed=true]{color:var(--ink)}
.cat-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:34px 0 18px}
.cat-h h2{font-size:clamp(26px,3.4vw,40px);letter-spacing:.06em}.cat-h span{color:var(--mute);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;transition:opacity .26s,transform .26s var(--suave)}
.grid.sale{opacity:0;transform:translateY(10px)}
.cargando{grid-column:1/-1;text-align:center;color:var(--mute);padding:60px 0}

.card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .7s var(--suave),box-shadow .7s var(--suave)}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 44px -26px rgba(60,45,20,.35)}
.card-im{position:relative;aspect-ratio:1/1;background:#fff;border:0;padding:18px;display:grid;place-items:center;overflow:hidden}
.card-im img{position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);object-fit:contain;transition:transform 1.3s var(--suave)}
.card:hover .card-im img{transform:scale(1.07) rotate(-1.5deg)}
.agot{position:absolute;left:0;right:0;top:50%;translate:0 -50%;background:rgba(20,20,20,.85);color:#fff;font-size:12px;letter-spacing:.35em;text-transform:uppercase;padding:9px 0;text-align:center}
.card-b{background:var(--crema);padding:14px 14px 14px;display:flex;flex-direction:column;flex:1}
.card-marca{height:24px;display:flex;align-items:center;margin-bottom:6px}
.card-marca img{max-height:20px;max-width:110px;width:auto;object-fit:contain;object-position:left}
.card-marca .marca-txt{font-size:10px}
.card h3{font-family:var(--txt);font-weight:800;font-size:15px;line-height:1.2;text-transform:uppercase;letter-spacing:.01em;margin-bottom:12px;min-height:2.4em}
.card h3 button{all:unset;cursor:pointer}
.precios{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);padding-top:10px;margin:auto 0 12px}
.precios span{display:flex;flex-direction:column;font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.precios span+span{border-left:1px solid var(--line);padding-left:10px}
.precios small{color:var(--oro);font-weight:400;font-size:11px}
.btn-pedir{width:100%;background:var(--ink);color:#fff;border:0;padding:13px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;transition:background .3s,transform .4s var(--suave)}
.btn-pedir:hover{background:#000}.btn-pedir:active{transform:scale(.98)}
.btn-pedir:disabled{background:#aaa;cursor:default}

/* Aparición suave */
.rv{opacity:0;transform:translateY(30px) scale(.985);filter:blur(4px);transition:opacity .9s var(--suave) var(--d,0ms),transform 1.05s var(--suave) var(--d,0ms),filter .9s var(--suave) var(--d,0ms),box-shadow .7s var(--suave)}
.rv.on{opacity:1;transform:none;filter:none}
.card.rv.on:hover{transform:translateY(-6px);transition-delay:0ms}

/* ---------- Frase que se ilumina ---------- */
.frase-g{padding:clamp(90px,18vh,190px) 20px}
.frase-g p{max-width:1000px;margin:0 auto;font-family:var(--tit);font-weight:300;font-size:clamp(28px,4.4vw,58px);line-height:1.2}
.w{color:#ddd5c8;transition:color .6s var(--suave)}.w.on{color:var(--ink)}

/* ---------- Cómo pedir ---------- */
.como{max-width:1100px;margin:0 auto 40px;padding:0 20px;text-align:center}
.como h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:34px}
.como ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
.como li{border-top:1px solid var(--oro);padding-top:16px;display:flex;flex-direction:column;gap:6px}
.como b{font-family:var(--tit);font-weight:300;font-size:30px;color:var(--oro)}

/* ---------- Pie ---------- */
.pie{text-align:center;padding:60px 20px 26px;border-top:1px solid var(--line);margin-top:70px;font-size:13px;color:var(--mute)}
.pie-logo{width:70px;height:auto;margin:0 auto 16px}
.pie a{color:var(--ink)}
.pie-legal{display:flex;justify-content:center;gap:18px;font-size:12px}
.fitted{display:inline-block;margin-top:22px;font-size:11px;letter-spacing:.08em;text-decoration:none;color:var(--mute)!important;opacity:.7;transition:opacity .3s}.fitted:hover{opacity:1}

/* ---------- Ficha (modal) ---------- */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-velo{position:absolute;inset:0;background:rgba(20,18,14,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .4s var(--suave)}
.modal-c{position:relative;width:min(1000px,100%);max-height:calc(100svh - 40px);overflow:auto;background:#fff;animation:modal .6s var(--suave)}
.modal.cierra .modal-velo{animation:fade .32s reverse forwards}.modal.cierra .modal-c{animation:modal .32s reverse forwards}
@keyframes fade{from{opacity:0}}
@keyframes modal{from{opacity:0;transform:translateY(30px) scale(.96)}}
.m-x{position:absolute;right:14px;top:14px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;transition:transform .4s var(--suave)}.m-x:hover{transform:rotate(90deg)}
.m-g{display:grid;grid-template-columns:1fr 1fr}
.m-foto{background:var(--crema);display:grid;place-items:center;padding:40px;min-height:420px}
.m-foto img{max-height:440px;object-fit:contain;mix-blend-mode:multiply;animation:foto 1s var(--suave)}
@keyframes foto{from{opacity:0;transform:scale(.92) translateY(14px)}}
.m-info{padding:38px 34px 30px;display:flex;flex-direction:column}
.m-info>*{animation:sube .8s var(--suave) both}.m-info>:nth-child(2){animation-delay:.05s}.m-info>:nth-child(3){animation-delay:.1s}.m-info>:nth-child(4){animation-delay:.15s}.m-info>:nth-child(n+5){animation-delay:.2s}
.m-marca{height:34px;display:flex;align-items:center}.m-marca img{max-height:30px;max-width:160px;width:auto;object-fit:contain}
.m-info h2{font-family:var(--txt);font-weight:800;text-transform:uppercase;font-size:clamp(24px,3vw,32px);line-height:1.1;margin:10px 0 4px}
.m-tipo{color:var(--mute);font-size:13px;margin:0 0 20px}
.m-tam{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.m-tam button{border:1px solid var(--line);background:#fff;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:border-color .3s,background .3s,transform .4s var(--suave)}
.m-tam button:hover{transform:translateY(-2px)}
.m-tam button[aria-checked=true]{border-color:var(--ink);background:var(--ink);color:#fff}
.m-tam b{font-family:var(--tit);font-weight:400;font-size:18px}.m-tam span{font-weight:700}.m-tam small{font-size:10px;opacity:.7;text-align:center}
.m-precio{display:flex;align-items:baseline;gap:10px;margin:20px 0 10px}
.m-precio span{font-weight:800;font-size:34px;font-variant-numeric:tabular-nums;display:inline-block}
.m-precio span.cambia{animation:sube .5s var(--suave)}
.m-precio small{color:var(--oro)}
.m-desc{color:#4a463f;font-size:14px;margin:0 0 14px}
.m-sellos{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:0;margin:0 0 22px;font-size:12px;color:var(--mute)}.m-sellos li::before{content:"✦ ";color:var(--oro)}
.m-pedir{margin-top:auto;padding:16px}
.m-nota{font-size:12px;color:var(--mute);text-align:center;margin:10px 0 0}
.m-mas{padding:26px 34px 30px;border-top:1px solid var(--line)}
.m-mas h3{font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:400;margin-bottom:14px}
.m-mas-r{display:flex;gap:10px;overflow-x:auto;scrollbar-width:thin}
.m-mas-r button{flex:0 0 120px;border:1px solid var(--line);background:#fff;padding:8px;display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;text-align:center;transition:transform .5s var(--suave)}
.m-mas-r button:hover{transform:translateY(-4px)}.m-mas-r img{aspect-ratio:1;object-fit:contain;width:100%}

.toast{position:fixed;left:50%;bottom:24px;z-index:300;translate:-50% 30px;opacity:0;background:var(--ink);color:#fff;padding:13px 20px;font-size:13px;max-width:calc(100% - 32px);transition:opacity .4s,translate .5s var(--suave);pointer-events:none}
.toast.on{opacity:1;translate:-50% 0}

/* ---------- Celular ---------- */
@media (max-width:900px){
  .top{gap:16px;padding:8px 14px}.top nav a{font-size:10px;letter-spacing:.14em}.top nav{gap:12px}
  .top-logo img{height:42px}
  .hero-in{grid-template-columns:1fr;text-align:center;gap:20px}
  .hero-v{height:30vh;order:-1}.hero-b,.hero-sellos{justify-content:center}
  .titulo{letter-spacing:.06em}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .card-b{padding:10px}.card h3{font-size:13px}.precios span{font-size:14px}.precios span+span{padding-left:6px}
  .m-g{grid-template-columns:1fr}.m-foto{min-height:0;padding:30px}.m-foto img{max-height:260px}.m-info{padding:24px 20px}
  .modal{padding:0;place-items:end center}.modal-c{max-height:94svh}
  .como ol{grid-template-columns:1fr}
  .tam{height:210vh}
}
@media (max-width:520px){.top nav a:nth-child(2){display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .intro{display:none}
  .titulo span,.kicker,.sub,.frase,.hero-b,.hero-sellos,.v{opacity:1;transform:none;filter:none}
  .hero-in{transform:none;opacity:1}.hero .v3,.hero .v5,.hero .v10{translate:none}
  .tam{height:auto}.tam-pega{position:static;height:auto}.tam-i{opacity:1;transform:none}
  .rv{opacity:1;transform:none;filter:none}.w{color:var(--ink)}
}