/* ============================================================
   BOOZE — Landing v2 · "La vidriera de noche"
   Lenguaje: placa decó oficial (sunburst + doble marco dorado
   con corchetes + Playfair italic + Oswald tracking amplio)
   ============================================================ */
:root{
  --navy:#1E2D5A; --navy-d:#141E3E; --navy-dd:#0E1530;
  --red:#A1312D; --red-l:#C8443F;
  --cream:#ECEBE7; --cream-d:#DED9CD; --paper:#F5F2EA; --card:#FBF9F3;
  --gold:#C9A24B; --gold-l:#E0BE6E;
  --ink:#161b2e; --muted:#5b6274;
  --serif:'Playfair Display',Georgia,serif;
  --cond:'Oswald',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --maxw:1220px;
  --t:.28s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.6;
  overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;cursor:pointer}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* tipografía utilitaria */
.eyebrow{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.34em;font-size:.72rem;color:var(--gold);
  display:inline-flex;align-items:center;gap:.7em}
.eyebrow::before,.eyebrow::after{content:"";width:26px;height:1px;background:var(--gold);opacity:.6}
.stitle{font-family:var(--serif);font-weight:900;font-size:clamp(2rem,5vw,3.2rem);
  line-height:1.05;letter-spacing:-.01em}
.diamond{width:9px;height:9px;background:var(--gold);transform:rotate(45deg);
  display:inline-block;margin:0 auto}
.sep{display:flex;align-items:center;gap:14px;justify-content:center;margin:0 auto}
.sep::before,.sep::after{content:"";height:1px;width:min(120px,20vw);background:var(--gold);opacity:.55}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:.9rem;padding:.9em 1.7em;border-radius:2px;border:1.5px solid transparent;
  cursor:pointer;transition:var(--t)}
.btn svg{width:1.05em;height:1.05em}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 26px -10px rgba(161,49,45,.75)}
.btn-red:hover{background:var(--red-l);transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--navy-dd)}
.btn-gold:hover{background:var(--gold-l);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--cream);border-color:rgba(236,235,231,.4)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-l)}
.btn-line{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-line:hover{background:var(--navy);color:var(--cream)}

/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;transition:var(--t);
  padding:14px 0;background:linear-gradient(rgba(14,21,48,.85),rgba(14,21,48,0))}
.nav.solid{background:rgba(14,21,48,.94);backdrop-filter:blur(10px);padding:8px 0;
  border-bottom:1px solid rgba(201,162,75,.35)}
.nav-in{display:flex;align-items:center;justify-content:space-between}
.nav-logo{height:30px;width:auto}
.nav-links{display:flex;align-items:center;gap:.4rem}
.nav-links a{font-family:var(--cond);font-weight:500;text-transform:uppercase;
  letter-spacing:.12em;font-size:.76rem;color:rgba(236,235,231,.85);
  padding:.55em .8em;transition:var(--t)}
.nav-links a:hover{color:var(--gold-l)}
.nav-links .nav-cta{border:1.5px solid var(--gold);color:var(--gold-l);border-radius:2px;
  margin-left:.5rem}
.nav-links .nav-cta:hover{background:var(--gold);color:var(--navy-dd)}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:8px}
.nav-burger span{width:24px;height:2px;background:var(--cream);transition:var(--t)}

/* ============ HERO — la vidriera de noche ============ */
.hero{position:relative;min-height:100svh;background:var(--navy-dd);color:var(--cream);
  display:flex;flex-direction:column;overflow:hidden}
.hero-burst{position:absolute;inset:-40%;opacity:.55;pointer-events:none;
  animation:burst 240s linear infinite}
@keyframes burst{to{transform:rotate(360deg)}}
.hero-frame{position:absolute;inset:20px;border:1px solid rgba(201,162,75,.55);
  pointer-events:none;z-index:3}
.hero-frame::before{content:"";position:absolute;inset:6px;border:1px solid rgba(201,162,75,.28)}
.hero-frame i{position:absolute;width:26px;height:26px;border:2px solid var(--gold);font-style:normal}
.hero-frame i:nth-child(1){top:-2px;left:-2px;border-right:0;border-bottom:0}
.hero-frame i:nth-child(2){top:-2px;right:-2px;border-left:0;border-bottom:0}
.hero-frame i:nth-child(3){bottom:-2px;left:-2px;border-right:0;border-top:0}
.hero-frame i:nth-child(4){bottom:-2px;right:-2px;border-left:0;border-top:0}

.hero-in{position:relative;z-index:4;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:96px 24px 0}
.hero-logo{width:clamp(240px,38vw,460px);height:auto;
  filter:drop-shadow(0 10px 40px rgba(0,0,0,.45))}
.hero-tag{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.5em;font-size:clamp(.7rem,1.6vw,.9rem);color:var(--gold);
  margin:1.6em 0 .4em;text-indent:.5em}
.hero-line{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.05rem,2.6vw,1.5rem);color:rgba(236,235,231,.88)}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;margin-top:2rem}

/* estante de botellas del hero */
.hero-shelf{position:relative;z-index:4;display:flex;align-items:flex-end;
  justify-content:center;gap:clamp(10px,3.5vw,44px);
  padding:0 34px 58px;margin-top:1.5rem}
.hero-shelf img{height:clamp(120px,22vh,220px);width:auto;
  filter:drop-shadow(0 22px 22px rgba(0,0,0,.55));
  opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.hero-shelf img:nth-child(2){height:clamp(140px,26vh,260px)}
.hero-shelf img:nth-child(3){height:clamp(150px,29vh,290px)}
.hero-shelf img:nth-child(4){height:clamp(140px,26vh,260px)}
.hero-shelf.in img{opacity:1;transform:none}
.hero-shelf img:nth-child(1){transition-delay:.05s}
.hero-shelf img:nth-child(2){transition-delay:.15s}
.hero-shelf img:nth-child(3){transition-delay:.25s}
.hero-shelf img:nth-child(4){transition-delay:.35s}
.hero-shelf img:nth-child(5){transition-delay:.45s}
.hero-shelf::after{content:"";position:absolute;left:8%;right:8%;bottom:50px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7}
.hero-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:5;
  color:var(--gold);opacity:.8;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateX(-50%) translateY(6px)}}

/* ============ CINTA DE BOTELLAS (marquee) ============ */
.shelfline{background:var(--paper);border-block:1px solid var(--cream-d);
  overflow:hidden;padding:26px 0 18px;position:relative}
.shelfline-track{display:inline-flex;align-items:flex-end;gap:clamp(28px,4vw,64px);
  animation:mq 60s linear infinite;will-change:transform;padding-inline:32px}
.shelfline:hover .shelfline-track{animation-play-state:paused}
.shelfline-track img{height:130px;width:auto;
  filter:drop-shadow(0 10px 10px rgba(20,30,62,.22));transition:transform var(--t)}
.shelfline-track img:hover{transform:translateY(-6px)}
.shelfline.rev .shelfline-track{animation:mqr 70s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes mqr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.shelfline::after{content:"";position:absolute;left:0;right:0;bottom:14px;height:1px;
  background:var(--cream-d)}

/* ============ CIFRAS decó ============ */
.stats{background:var(--paper);padding:2.6rem 0 2.2rem}
.stats-in{display:flex;justify-content:center;align-items:center;
  gap:clamp(1.4rem,6vw,4.5rem);flex-wrap:wrap}
.stat{text-align:center}
.stat b{font-family:var(--serif);font-weight:900;font-size:clamp(2rem,4.5vw,2.9rem);
  color:var(--navy);display:block;line-height:1}
.stat span{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.22em;font-size:.64rem;color:var(--gold)}
.stat-div{width:9px;height:9px;background:var(--gold);transform:rotate(45deg);opacity:.7}

/* ============ VINOTECAS — sobre la foto real ============ */
.locs{position:relative;color:var(--cream);overflow:hidden}
.locs-bg{position:absolute;inset:0;background:url('../img/v2/interior.webp') center 35%/cover no-repeat}
.locs-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,21,48,.93) 0%,rgba(14,21,48,.78) 45%,rgba(14,21,48,.93) 100%)}
.locs-in{position:relative;z-index:2;padding:clamp(3.5rem,8vw,6rem) 24px;text-align:center}
.locs .stitle{color:var(--cream)}
.locs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  max-width:1040px;margin:2.4rem auto 0}
.loc{border:1px solid rgba(201,162,75,.5);background:rgba(14,21,48,.6);
  backdrop-filter:blur(5px);padding:0 0 1.5rem;position:relative;transition:var(--t);
  overflow:hidden}
.loc:hover{transform:translateY(-5px);border-color:var(--gold);background:rgba(14,21,48,.8)}
.loc-photo{aspect-ratio:4/3;overflow:hidden;margin-bottom:1.2rem;
  border-bottom:1px solid rgba(201,162,75,.5)}
.loc-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.loc:hover .loc-photo img{transform:scale(1.06)}
.loc-num{position:absolute;top:10px;left:12px;font-family:var(--cond);font-weight:600;
  font-size:.66rem;letter-spacing:.2em;color:var(--cream);opacity:.95;z-index:2;
  background:rgba(14,21,48,.75);padding:.3em .7em;border:1px solid rgba(201,162,75,.6)}
.loc-city{font-family:var(--serif);font-weight:900;font-size:clamp(1.3rem,2.4vw,1.7rem);
  line-height:1.05;margin-bottom:.15em}
.loc-dir{font-size:.8rem;color:rgba(236,235,231,.75);margin-bottom:1.1em}
.loc-btns{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.loc-btns .btn{font-size:.7rem;padding:.6em 1em}
.locs-dep{margin-top:1.6rem;font-family:var(--cond);font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;font-size:.66rem;color:rgba(236,235,231,.55)}

/* ============ EL DESPACHO — vidriera viva ============ */
.despacho{background:var(--paper);padding:clamp(3.5rem,8vw,6rem) 0;overflow:hidden}
.despacho-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center}
.despacho-visual{position:relative;min-height:420px;display:grid;place-items:center}
.despacho-panel{position:absolute;inset:0;background:var(--navy-dd);overflow:hidden}
.despacho-panel .burst{position:absolute;inset:-45%;opacity:.5}
.despacho-panel::after{content:"";position:absolute;inset:12px;
  border:1px solid rgba(201,162,75,.55);pointer-events:none}
.despacho-bottles{position:relative;z-index:2;display:flex;align-items:flex-end;
  gap:clamp(12px,2.4vw,26px);padding-bottom:12px}
.despacho-bottles img{height:clamp(150px,20vw,230px);width:auto;
  filter:drop-shadow(0 20px 18px rgba(0,0,0,.55));transition:transform var(--t)}
.despacho-bottles img:nth-child(2){height:clamp(180px,24vw,275px)}
.despacho-visual:hover .despacho-bottles img{transform:translateY(-6px)}
.despacho-price{position:absolute;z-index:3;right:clamp(8px,3vw,26px);top:clamp(10px,3vw,26px);
  background:var(--red);color:#fff;font-family:var(--cond);font-weight:600;
  letter-spacing:.1em;font-size:.7rem;text-transform:uppercase;
  padding:.55em .95em;transform:rotate(3deg);box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.despacho-copy .stitle em{font-style:normal;color:var(--red)}
.despacho-steps{display:flex;gap:clamp(1.2rem,3vw,2.4rem);margin:1.5rem 0 1.9rem;flex-wrap:wrap}
.dstep{display:flex;flex-direction:column;gap:.12em}
.dstep i{color:var(--gold);font-style:normal;font-size:.7rem}
.dstep b{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.86rem;color:var(--navy)}
.dstep span{font-size:.76rem;color:var(--muted)}

/* ============ EL CLUB ============ */
.club{position:relative;background:var(--navy-dd);color:var(--cream);overflow:hidden;
  padding:clamp(3.5rem,8vw,6rem) 0}
.club .burst{position:absolute;inset:-45%;opacity:.5;pointer-events:none;
  animation:burst 240s linear infinite}
.club-in{position:relative;z-index:2;display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(2rem,5vw,4rem);align-items:center}
.club-visual{display:grid;place-items:center;position:relative;padding:2.2rem 1rem}
.club-visual::before{content:"";position:absolute;inset:0;border:1px solid rgba(201,162,75,.55)}
.club-visual::after{content:"";position:absolute;inset:7px;border:1px solid rgba(201,162,75,.26)}
.club-visual img{width:clamp(190px,24vw,290px);height:auto;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.5))}
.club-copy .stitle{color:var(--cream)}
.club-33{display:flex;align-items:center;gap:1rem;margin:1.4rem 0 1.6rem}
.club-33 b{font-family:var(--serif);font-weight:900;font-size:2.8rem;color:var(--gold-l);
  line-height:1;border:1.5px solid var(--gold);padding:.15em .32em}
.club-33 span{font-size:.85rem;color:rgba(236,235,231,.8);max-width:34ch}
.club-birthday{font-family:var(--cond);font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;font-size:.74rem;color:var(--gold-l);margin-bottom:1.6rem}

/* ============ LA CASA — feed real ============ */
.feed{background:var(--cream);padding:clamp(3.2rem,7vw,5.5rem) 0;
  border-block:1px solid var(--cream-d)}
.feed-head{text-align:center;margin-bottom:2.2rem}
.feed-head .stitle{color:var(--navy)}
.feed-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.feed-item{display:block;overflow:hidden;position:relative;border:1px solid var(--cream-d);
  background:#fff;transition:var(--t)}
.feed-item img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;
  transition:transform .6s ease}
.feed-item:hover{box-shadow:0 18px 40px -18px rgba(20,30,62,.4);transform:translateY(-4px)}
.feed-item:hover img{transform:scale(1.05)}
.feed-cta{text-align:center;margin-top:2rem}
@media(max-width:900px){.feed-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:540px){.feed-grid{grid-template-columns:repeat(2,1fr)}
  .feed-grid .feed-item:nth-child(n+5){display:none}}

/* ============ DISTRIBUIDORA ============ */
.dist{position:relative;background:var(--paper);overflow:hidden;
  padding:clamp(3.2rem,7vw,5.2rem) 0}
.dist-sello{position:absolute;right:-70px;top:50%;transform:translateY(-50%);
  width:min(380px,42vw);opacity:.1;pointer-events:none}
.dist-in{position:relative;z-index:2;text-align:center;max-width:640px;margin:0 auto}
.dist-logo{width:min(300px,60vw);margin:0 auto 1.2rem}
.dist-line{color:var(--muted);font-size:.95rem;margin-bottom:1.7rem}

/* ============ FOOTER ============ */
.footer{background:var(--navy-dd);color:var(--cream);position:relative;overflow:hidden}
.footer-in{position:relative;z-index:2;text-align:center;
  padding:3.2rem 24px 2.4rem}
.footer-sello{width:74px;margin:0 auto 1.2rem;opacity:.9}
.footer-logo{height:34px;width:auto;margin:0 auto 1rem}
.footer-cities{font-family:var(--cond);font-weight:500;text-transform:uppercase;
  letter-spacing:.24em;font-size:.68rem;color:var(--gold)}
.footer-links{display:flex;justify-content:center;gap:1.6rem;margin:1.4rem 0 1rem;flex-wrap:wrap}
.footer-links a{font-family:var(--cond);font-weight:500;text-transform:uppercase;
  letter-spacing:.12em;font-size:.7rem;color:rgba(236,235,231,.65);transition:var(--t)}
.footer-links a:hover{color:var(--gold-l)}
.footer-copy{font-size:.7rem;color:rgba(236,235,231,.4)}

/* FAB WhatsApp */
.fab{position:fixed;right:18px;bottom:18px;z-index:90;width:54px;height:54px;
  border-radius:50%;background:#25D366;display:grid;place-items:center;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.45);transition:var(--t)}
.fab:hover{transform:scale(1.08)}
.fab svg{width:28px;height:28px;fill:#fff}

/* sunburst compartido (rayos cónicos, cero imágenes) */
.burst-bg{background:repeating-conic-gradient(from 0deg at 50% 50%,
  rgba(236,235,231,.045) 0deg 3.6deg, transparent 3.6deg 7.2deg)}

/* ============ REVEAL / MOTION ============ */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal,.hero-shelf img{opacity:1!important;transform:none!important}
}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .locs-grid{grid-template-columns:1fr;max-width:420px}
  .despacho-in,.club-in{grid-template-columns:1fr}
  .despacho-visual{min-height:340px;order:-1}
  .club-visual{max-width:380px;margin:0 auto}
}
@media(max-width:760px){
  .nav-links{position:fixed;inset:0 0 auto 0;top:0;background:rgba(14,21,48,.98);
    flex-direction:column;align-items:center;gap:.4rem;padding:80px 0 30px;
    transform:translateY(-102%);transition:transform .3s ease}
  .nav-links.open{transform:none}
  .nav-burger{display:flex;z-index:85}
  .hero-frame{inset:12px}
  .hero-shelf img{height:clamp(100px,17vh,160px)}
  .hero-shelf img:nth-child(3){height:clamp(120px,21vh,190px)}
  .shelfline-track img{height:100px}
  .despacho-bottles img{height:clamp(130px,26vw,180px)}
  .despacho-bottles img:nth-child(2){height:clamp(155px,31vw,215px)}
}