/* bartender.agency — back-bar hero (home: night spotlight · botellero: daylight contrabarra)
   One continuous frame: nav, intro and shelves share the same wall. */

.bar-hero{
  --wall-a:#F4EDE2;--wall-b:#E8DBC8;--wall-glow:rgba(255,240,212,.95);--glow-at:50% 62%;--panel:rgba(28,24,20,.035);
  --plank-top:#EAD8B8;--plank:#BC9B72;--plank-d:#8F7050;
  --text:var(--ink);--text-soft:rgba(28,24,20,.68);--text-faint:rgba(28,24,20,.48);
  --em:var(--accent);--rule:rgba(143,112,80,.5);--fade-to:var(--paper);
  --shelf-h:clamp(58px,6.6vw,94px);
  --light-r:280px;
  position:relative;z-index:1;overflow:hidden;isolation:isolate;color:var(--text);
  opacity:0;animation:heroIn .8s cubic-bezier(.22,1,.36,1) .05s forwards
}
@keyframes heroIn{to{opacity:1;transform:none}}

.bar-wall{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 48% at var(--glow-at),var(--wall-glow),transparent 72%),
    repeating-linear-gradient(90deg,transparent 0 139px,var(--panel) 139px 140px),
    linear-gradient(180deg,var(--wall-a),var(--wall-b))
}
/* soft landing into the page — no hard edge */
.bar-hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:96px;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--fade-to))
}

.bar-top{position:relative;z-index:5;max-width:1120px;margin:0 auto;padding:0 28px}
.bar-top .site-nav{border-bottom:none}
#explorar{scroll-margin-top:24px}

/* Intro — centred above the shelves */
.bar-intro{position:relative;z-index:4;max-width:780px;margin:0 auto;padding:0 24px;text-align:center}
.bar-hero .hero-kicker{
  display:inline-flex;align-items:center;gap:14px;margin-bottom:16px;
  font-size:.68rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--text-faint)
}
.bar-hero .hero-kicker::before,.bar-hero .hero-kicker::after{content:'';width:28px;height:1px;background:var(--rule)}
.bar-hero .hero-h1{
  margin:0 0 18px;color:var(--text);
  font-family:'Fraunces','Shippori Mincho',Georgia,serif;font-optical-sizing:auto;
  font-variation-settings:'SOFT' 100,'WONK' 0;font-weight:350;
  font-size:clamp(2.6rem,5.4vw,4.5rem);line-height:1;letter-spacing:-.028em;text-wrap:balance
}
.bar-hero .hero-h1 em{font-style:italic;font-weight:320;color:var(--em)}
.bar-hero .hero-sub{
  max-width:520px;margin:0 auto 26px;font-size:1rem;line-height:1.65;color:var(--text-soft);text-wrap:pretty
}
.bar-hero .hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.bar-hero .btn-secondary{color:var(--text);border-color:var(--rule)}
.bar-hero .btn-secondary:hover{border-color:var(--text)}

/* Shelves */
.bar-shelves{position:relative;z-index:1;display:flex;flex-direction:column;gap:22px;padding:34px 0 22px}
.shelf{position:relative;margin:0 -60px;will-change:transform}
.shelf-row{
  display:flex;align-items:flex-end;justify-content:center;gap:clamp(6px,1vw,14px);
  height:calc(var(--shelf-h) * 1.08);padding:0 60px;
  animation:rowIn .9s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.25s + var(--i,0) * .12s)
}
@keyframes rowIn{from{opacity:0;transform:translateY(-12px)}}
.shelf-plank{
  position:relative;height:11px;margin-top:-3px;
  background:linear-gradient(180deg,var(--plank-top) 0 3px,var(--plank) 3px,var(--plank-d));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 22px -10px rgba(60,40,20,.35)
}
.shelf-plank::after{
  content:'';position:absolute;left:0;right:0;top:100%;height:26px;pointer-events:none;
  background:linear-gradient(180deg,rgba(60,40,20,.12),transparent)
}

/* Bottles */
.bb[hidden]{display:none}
.bb{
  position:relative;display:block;flex:none;
  height:calc(var(--shelf-h) * var(--s,1) * var(--row-fit,1));
  width:calc(var(--shelf-h) * var(--s,1) * var(--row-fit,1) * var(--r,.32));
  transform-origin:bottom center;transition:transform .35s cubic-bezier(.22,1,.36,1)
}
.bb img{display:block;width:100%;height:100%;filter:drop-shadow(0 6px 5px rgba(40,26,14,.28))}
.bb::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  -webkit-mask:var(--src) center/100% 100% no-repeat;mask:var(--src) center/100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.8) 50%,transparent 62%) 130% 0/300% 100% no-repeat
}
.bb.glint::after{animation:glint 1.2s ease-out}
@keyframes glint{
  0%{opacity:1;background-position:130% 0}
  100%{opacity:1;background-position:-30% 0}
}
.bb:hover{transform:translateY(-6px) scale(1.05)}
.bb-label{
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);
  white-space:nowrap;background:var(--ink);color:var(--paper);
  font-size:.66rem;font-weight:700;letter-spacing:.03em;padding:5px 10px;border-radius:100px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s
}
.bb:hover .bb-label{opacity:1;transform:translate(-50%,0)}

/* Foot line under the shelves */
.bar-foot{
  position:relative;z-index:4;text-align:center;padding:6px 24px 76px;
  font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint)
}
.bar-foot span{display:inline-block}
.bar-foot span+span::before{content:'·';margin:0 12px;color:var(--rule)}

.bar-dark{display:none}

/* ——— Night mode (home) ——— */
.bar-hero[data-mode="night"]{
  --wall-a:#1B1612;--wall-b:#0F0C09;--wall-glow:rgba(150,90,40,.2);--panel:rgba(255,220,170,.03);
  --plank-top:#6E5739;--plank:#403223;--plank-d:#281F15;
  --text:#F4EFE6;--text-soft:rgba(244,239,230,.7);--text-faint:rgba(244,239,230,.5);
  --em:#E8906E;--rule:rgba(234,203,146,.38)
}
[data-mode="night"] .bb img{filter:drop-shadow(0 6px 6px rgba(0,0,0,.6))}
[data-mode="night"] .shelf-plank::after{background:linear-gradient(180deg,rgba(0,0,0,.35),transparent)}
[data-mode="night"] .bb-label{background:var(--paper);color:var(--ink)}
[data-mode="night"] .bar-dark{
  display:block;position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--dark,1);
  background:radial-gradient(circle var(--light-r) at var(--lx,50%) var(--ly,70%),
    rgba(255,186,110,.12) 0,rgba(12,9,7,.1) 34%,rgba(12,9,7,.84) 80%,rgba(12,9,7,.94) 100%)
}
[data-mode="night"] .btn-primary:hover{box-shadow:0 10px 28px rgba(226,125,92,.25)}
[data-mode="night"] .bar-top .logo{color:var(--paper)}
[data-mode="night"] .bar-top .nav-link{color:rgba(244,239,230,.62)}
[data-mode="night"] .bar-top .nav-link:hover{color:var(--paper);background:rgba(255,255,255,.07)}
[data-mode="night"] .bar-top .nav-cta{background:var(--paper);color:var(--ink)}
[data-mode="night"] .bar-top .nav-cta:hover{background:var(--accent);color:var(--paper)}

/* Desktop: headline on one line */
@media(min-width:701px){
  .bar-intro{max-width:1040px}
  .bar-hero .hero-h1{font-size:clamp(2.6rem,4.6vw,4.1rem)}
  .bar-shelves{padding-top:26px}
  .bar-foot{padding-bottom:60px}
}

@media(max-width:700px){
  .bar-hero{--shelf-h:62px;--light-r:170px}
  .bar-top{padding:0 22px}
  .bar-intro{padding:0 22px}
  .bar-hero .hero-kicker{gap:10px;letter-spacing:.2em}
  .bar-hero .hero-kicker::before,.bar-hero .hero-kicker::after{display:none}
  .bar-shelves{gap:16px;padding:28px 0 16px}
  .bar-foot{font-size:.6rem;letter-spacing:.12em;line-height:2;padding-top:14px;padding-bottom:64px}
  .bar-foot span+span::before{margin:0 7px}
}
@media(max-width:480px){
  .bar-top .site-nav{flex-wrap:nowrap;gap:10px}
  .bar-top .logo{font-size:.95rem}
  .bar-top .nav-links{gap:2px;flex-wrap:nowrap}
  .bar-top .nav-link{padding:8px 10px}
  .bar-top .nav-link.active{display:none}
  .bar-top .nav-cta{padding:9px 14px;white-space:nowrap}
  .nav-cta-more{display:none}
}

@media(prefers-reduced-motion:reduce){
  .bar-hero,.shelf-row{animation:none!important;opacity:1!important;transform:none!important}
  .bb{transition:none}
}

/* the nav wordmark gives way to the brand mark on phones (loaded after site.css, so it wins) */
@media(max-width:560px){
  .bar-top .logo{font-size:0}
  .bar-top .brand-mark{width:30px;height:30px;margin-right:0}
}

/* ——— Botellero hero · B (night back-bar, big serif headline, CTAs over the shelves) ——— */
.bar-hero--b .bar-intro{padding-top:clamp(28px,6vh,64px)}
.bar-hero--b .hero-kicker{font-weight:700;letter-spacing:.22em;color:#E2714B;margin-bottom:20px}
.bar-hero--b .hero-kicker::before,.bar-hero--b .hero-kicker::after{display:none}
.bar-hero--b .hero-h1{font-weight:380;font-size:clamp(2.9rem,6.6vw,5.6rem);line-height:.96;letter-spacing:-.04em;margin-bottom:20px}
.bar-hero--b .hero-h1 em{color:#E2714B;font-weight:340}
.bar-hero--b .hero-sub{font-size:1.04rem}
.bar-hero--b .hero-actions .btn{padding:15px 26px;font-size:.92rem}
.bar-hero--b .hero-actions .btn-secondary{color:#F4EFE6;border-color:rgba(244,239,230,.28)}
.bar-hero--b .hero-actions .btn-secondary:hover{border-color:#F4EFE6}
.bar-hero--b .bar-foot{position:relative;z-index:4}
[data-mode="night"] .bar-top .nav-link.active{color:var(--paper);background:rgba(255,255,255,.1)}
@media(max-width:640px){.bar-hero--b .hero-actions .btn{flex:1 1 auto}}