/* ===== Base / tokens ===== */
:root{
  --brand:#198754; --brand-700:#145c32; --ink:#0f172a; --muted:#6b7280; --card:#fff;
  --nav-h:72px; --nav-h-sm:64px; --nav-h-open:112px;

  /* Alturas del hero (fallback si quieres limitar) */
  --hero-height: clamp(560px, 78vh, 940px);
  --hero-height-sm: clamp(460px, 64vh, 820px);

  /* Proporción real del banner (ajusta si no es 2048x738) */
  --hero-aspect-w: 2048;
  --hero-aspect-h: 738;

  /* Tamaños botellas — base (móvil OK) */
  --bottle-height-lg: clamp(72px, 9vmin, 140px);
  --bottle-height-sm: clamp(60px, 12vmin, 110px);

  --hero-zoom-lg: 1.02;
}

:root{scroll-behavior:smooth;}
section[id]{scroll-margin-top:84px;}
img{max-width:100%;height:auto;}
.py-6{padding-block:4rem;}

.btn-xxl{padding:1.05rem 1.9rem;font-size:1.125rem;border-radius:14px;}
.btn-glow{box-shadow:0 10px 30px rgba(25,135,84,.35);transition:transform .2s,box-shadow .2s;}
.btn-glow:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(25,135,84,.45);}
.btn-outline-glow:hover{box-shadow:0 12px 36px rgba(255,255,255,.2);transform:translateY(-2px);}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s;}
.reveal.in-view{opacity:1;transform:none;}

/* =========================================================
   HERO (imagen COMPLETA, sin recortes)
========================================================= */
.hero{
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
  isolation: isolate;
  background: transparent;
}
@media (min-width: 992px){
  .hero{ margin-top: calc(-1 * var(--nav-h)); }
}
@media (max-width: 991.98px){
  .hero{ margin-top: var(--nav-h-sm); }
}

.hero .hero-media{
  position: relative;
  width: 100%;
  aspect-ratio: var(--hero-aspect-w) / var(--hero-aspect-h);
  line-height: 0;
}
@media (max-width: 991.98px){
  .hero .hero-media{ aspect-ratio: auto; }
}

.hero .hero-bg{
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;          /* imagen completa siempre */
  object-position: center top;
  background: transparent;
}

/* =========================================================
   Botellas — fijas en esquina inferior derecha (sin animación)
========================================================= */
.bottles-strip{
  position: absolute;
  right: clamp(10px, 3vw, 36px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(8px, 2vw, 22px));
  left: auto; top: auto;
  z-index: 3;
  pointer-events: none;          /* no bloquea el hero */
}
.bottles-viewport{
  position: relative;
  width: min(42vw, 520px);       /* área que escala con viewport */
  pointer-events: auto;          /* enlaces clicables */
}
.bottles-row{
  display: flex;
  flex-wrap: wrap;               /* si llegan 3-4, que hagan segunda fila */
  align-items: flex-end;
  justify-content: flex-end;     /* pegadas a la derecha */
  gap: clamp(10px, 2.2vw, 18px);
}
.bottle-link{ display:block; flex:0 0 auto; text-decoration:none; }
.bottle-img{
  display:block;
  height: var(--bottle-height-lg);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 36px rgba(0,0,0,.24));
}

/* ===== Móvil (como ya te gusta) ===== */
@media (max-width: 991.98px){
  .bottle-img{ height: var(--bottle-height-sm); }  /* mantiene tamaño phone */
  .bottles-viewport{ width: min(64vw, 420px); }
}

/* ===== Escalado progresivo SOLO en pantallas grandes ===== */
@media (min-width: 992px){
  :root{ --bottle-height-lg: clamp(100px, 10vmin, 180px); }
  .bottles-viewport{ width: min(48vw, 600px); }
}
@media (min-width: 1200px){
  :root{ --bottle-height-lg: clamp(120px, 11vmin, 210px); }
  .bottles-viewport{ width: min(46vw, 660px); }
}
@media (min-width: 1400px){
  :root{ --bottle-height-lg: clamp(140px, 12vmin, 240px); }
  .bottles-viewport{ width: min(44vw, 720px); }
}
@media (min-width: 1600px){
  :root{ --bottle-height-lg: clamp(160px, 13vmin, 270px); }
  .bottles-viewport{ width: min(42vw, 780px); }
}

/* =========================================================
   Rail genérico
========================================================= */
.rail-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:85%;
  gap:16px; overflow:auto; scroll-snap-type:x mandatory; padding:8px 12px 16px;
  -webkit-overflow-scrolling:touch;
}
@media (min-width:576px){ .rail-track{grid-auto-columns:66%;} }
@media (min-width:992px){ .rail-track{grid-auto-columns:100%;} }
.rail-track::-webkit-scrollbar{height:8px;}
.rail-track::-webkit-scrollbar-thumb{border-radius:8px;}

/* =========================================================
   Cards / Quick-links / Stats
========================================================= */
.rail-card{
  border-radius:14px; overflow:hidden; text-decoration:none;
  display:flex; gap:12px; align-items:center; scroll-snap-align:center;
  border:1px solid #e5e7eb; transition:transform .25s, box-shadow .25s, border-color .25s; padding:10px;
}
.rail-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.12);border-color:#d1d5db;}
.rail-media{flex:0 0 92px;aspect-ratio:1/1;overflow:hidden;border-right:1px solid #eef2f7;border-radius:10px;}
.rail-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform .45s;}
.rail-card:hover .rail-media img{transform:scale(1.08);}
.rail-body{padding:6px 6px 6px 2px;}
.rail-body .badge{font-weight:600;}

.feature-card{
  background:var(--card); border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.06);
  transition:transform .3s, box-shadow .3s, border-color .3s; border:1px solid #e5e7eb;
}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.08);}
.quick-link{
  display:flex;align-items:center;gap:12px;background:var(--card);padding:18px 20px;
  border-radius:16px;border:1px solid #e5e7eb;text-decoration:none;color:#0f172a;
  transition:transform .25s,box-shadow .25s,border-color .25s,translate .25s;
}
.quick-link:hover{transform:translateY(-3px);translate:2px -2px;box-shadow:0 12px 28px rgba(0,0,0,.08);border-color:#d1d5db;}

.stat{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:26px 20px;}
.stat-num{font-size:2.4rem;line-height:1;font-weight:900;color:#198754;}
.stat-label{color:#6b7280;}

/* =========================================================
   Accesibilidad
========================================================= */
@media (prefers-reduced-motion:reduce){
  .reveal{ transition: none; }
}