/* =========================================================
   BALA FIT ENERGY — index.css
   Paleta cálida: crema / marrón café / terracota / oliva / miel
   ========================================================= */

:root{
  --cream:      #F4F6F9;
  --cream-2:    #EAEDF2;
  --coffee:     #111111;
  --coffee-70:  rgba(17,17,17,.7);
  --coffee-45:  rgba(17,17,17,.45);
  --terracotta: #2B5EA7;
  --terracotta-d: #1E4A8A;
  --olive:      #3A9E6B;
  --honey:      #3A9E6B;
  --white:      #FFFFFF;

  --font-display: "Fraunces", serif;
  --font-body: "Manrope", sans-serif;
  --font-data: "Space Grotesk", sans-serif;

  --container: 1180px;
  --radius: 18px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--coffee);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); margin:0; font-weight:600; letter-spacing:-.02em; }
p{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }
svg{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.icon{ width:20px; height:20px; flex:none; }

:focus-visible{ outline:3px solid var(--honey); outline-offset:3px; }

.eyebrow{
  font-family:var(--font-data);
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--terracotta-d);
  margin:0 0 10px;
}
.eyebrow--light{ color:var(--honey); }
.eyebrow.center{ text-align:center; }
.section-title{
  font-size:clamp(28px,4vw,44px);
  line-height:1.1;
  max-width:760px;
  margin:0 auto 56px;
}
.section-title.center{ text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-weight:700;
  border-radius:999px;
  padding:16px 30px;
  font-size:16px;
  letter-spacing:-.01em;
  transition:transform .35s var(--ease), background .3s ease, color .3s ease, box-shadow .3s ease;
  white-space:nowrap;
}
.btn--sm{ padding:10px 20px; font-size:14px; }
.btn--lg{ padding:18px 34px; font-size:17px; }
.btn--solid{ background:var(--terracotta); color:var(--white); box-shadow:0 10px 24px -10px rgba(43,94,167,.6); }
.btn--solid:hover{ background:var(--terracotta-d); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.6); }
.btn--ghost:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.btn--solid-invert{ background:var(--coffee); color:var(--cream); }
.btn--solid-invert:hover{ background:#222; transform:translateY(-2px); }
.btn--outline-invert{ border:1.5px solid var(--coffee-70); color:var(--coffee); }
.btn--outline-invert:hover{ background:var(--coffee); color:var(--cream); }

.link-underline{
  display:inline-block;
  font-weight:700;
  border-bottom:2px solid currentColor;
  padding-bottom:2px;
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:14px clamp(20px,4vw,48px);
  display:flex; align-items:center; gap:16px;
  max-width:var(--container);
  margin:0 auto;
}
.nav__brand{ flex:none; z-index:101; margin-right:4px; }
.nav__logo{ height:64px; width:auto; filter:brightness(0) drop-shadow(0 2px 6px rgba(0,0,0,.15)); }
.nav__inner{
  flex:1;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:10px 24px;
  border-radius:999px;
  background:rgba(244,246,249,.7);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 6px 24px -14px rgba(17,17,17,.25);
  transition:background .3s ease, box-shadow .3s ease;
}
/* La pone el JS al pasar de 40px de scroll. */
.nav__inner.is-scrolled{
  background:rgba(244,246,249,.92);
  box-shadow:0 10px 30px -16px rgba(17,17,17,.4);
}
.nav__brand-text{ font-family:var(--font-display); font-weight:600; font-size:20px; }

.nav__links{ display:flex; gap:28px; font-weight:600; font-size:15px; }
.nav__links a{ opacity:.8; transition:opacity .25s ease; }
.nav__links a:hover{ opacity:1; }

.nav__actions{ display:flex; align-items:center; gap:14px; }
.nav__toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; background:none; border:none; cursor:pointer;
}
.nav__toggle span{ display:block; height:2px; width:100%; background:var(--coffee); border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav__mobile{
  position:fixed; inset:0; z-index:99;
  background:var(--coffee);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
  transition:transform .5s var(--ease), opacity .4s ease;
}
.nav__mobile.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.nav__mobile a{ color:var(--cream); font-family:var(--font-display); font-size:28px; }
.nav__mobile a:last-child{ color:var(--coffee); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
  padding:140px clamp(20px,6vw,80px) 0;
}
.hero__bg{
  position:absolute; inset:0;
  background-image:url('images/hero.webp');
  background-size:cover; background-position:center;
  background-color:var(--coffee);
}
.hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(17,17,17,.45) 0%, rgba(17,17,17,.2) 40%, rgba(17,17,17,.7) 100%);
}
.hero__content{ position:relative; z-index:2; max-width:760px; margin-left:auto; text-align:right; }

.hero__eyebrow{
  color:var(--honey);
  font-family:var(--font-data);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:13px;
  margin:0 0 18px;
}
.hero__title{
  font-family:"Changa One", var(--font-display);
  /* Changa One trae un solo grosor. Forzar 700 hace que el
     navegador la engorde a la fuerza y se deforma. */
  font-weight:400;
  color:var(--white);
  font-size:clamp(38px,7.2vw,84px);
  line-height:1.06;
  /* Es condensada de fábrica: el -.03em de Fraunces la apretaba
     hasta pegar las letras. */
  letter-spacing:-.005em;
}
/* Sus colas bajan más que las de Fraunces y el overflow:hidden
   de la línea las cortaba: la "p" de "peso" y la coma. */
.hero__line{ display:block; overflow:hidden; padding-bottom:.16em; }
.hero__accent{ color:var(--terracotta); font-weight:400; }

.hero__rotator{
  position:relative;
  /* Alto reservado: como las tres frases están fuera del flujo,
     el contenedor no tiene de dónde sacar su altura. Da para
     dos líneas del título más el espacio de las colas. */
  min-height:clamp(96px, 18vw, 210px);
}
/* Las tres van absolutas y en el mismo lugar. Antes la activa
   pasaba a position:relative y las otras quedaban en right:0:
   al cambiar de frase, la que salía saltaba de golpe al costado
   y se veía duplicada junto a la nueva. */
.hero__slide{
  position:absolute; top:0; left:0; right:0;
  opacity:0;
  transform:translateY(30px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events:none;
}
.hero__slide.is-active{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.hero__slide.is-exiting{
  opacity:0;
  transform:translateY(-30px);
}

/* Botón de pedido dentro del hero: solo aparece en celular,
   donde la barra de arriba queda con la hamburguesa sola. */
.hero__pedir{ display:none; }

.hero__subtitle{
  font-family:"Caveat", var(--font-body);
  /* Caveat es manuscrita y de ojo chico: al mismo tamaño que
     Manrope se leería mucho más pequeña, por eso sube bastante. */
  font-size:clamp(24px,2.7vw,32px);
  font-weight:600;
  color:rgba(244,246,249,.95);
  max-width:560px;
  margin:22px 0 0;
  line-height:1.28;
  letter-spacing:.01em;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; }
.hero__badges{
  display:flex; flex-wrap:wrap; gap:10px 22px;
  margin-top:30px;
  color:rgba(244,246,249,.75);
  font-size:13px; font-weight:600; letter-spacing:.02em;
}
.hero__badges li{ display:flex; align-items:center; gap:8px; }
.hero__badges li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--honey); }

.hero__scroll{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  z-index:2; width:26px; height:42px; border:2px solid rgba(244,246,249,.6); border-radius:20px;
}
.hero__scroll span{
  position:absolute; top:8px; left:50%; width:4px; height:8px; border-radius:2px;
  background:var(--honey); transform:translateX(-50%);
  animation:scrollDot 1.8s ease infinite;
}
@keyframes scrollDot{ 0%{ opacity:1; top:8px;} 70%{ opacity:0; top:22px;} 100%{ opacity:0; top:8px;} }

/* =========================================================
   PROOF + VINE (elemento firma)
   ========================================================= */
.proof{
  position:relative;
  max-width:var(--container);
  margin:0 auto;
  padding:120px clamp(20px,6vw,48px) 90px;
  overflow:hidden;
}

.proof__img{
  position:absolute;
  width:clamp(140px, 18vw, 240px);
  height:auto;
  z-index:2;
  object-fit:cover;
}
.proof__img--left{
  top:40px; left:clamp(10px, 3vw, 40px);
}
.proof__img--right{
  bottom:160px; right:clamp(10px, 3vw, 40px);
}

.proof__text{ position:relative; z-index:1; }
.proof__pills{ position:relative; z-index:1; }
.proof__text{ text-align:center; max-width:700px; margin:0 auto; }
.proof__text h2{
  font-size:clamp(30px,5vw,52px);
  line-height:1.15;
  margin:0 0 18px;
}
.proof__number{
  font-family:var(--font-data);
  color:var(--terracotta);
  font-weight:700;
}
.proof__plus{
  font-family:var(--font-data);
  color:var(--terracotta);
  font-weight:700;
}
.proof__desc{ color:var(--coffee-70); font-size:17px; max-width:520px; margin:0 auto; }

.vine{ position:relative; margin:70px 0 30px; }
.vine__svg{ width:100%; height:auto; overflow:visible; }
.vine__path{
  fill:none;
  stroke:var(--olive);
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.8s var(--ease);
}
.vine.is-inview .vine__path{ stroke-dashoffset:0; }
.vine__leaf{
  fill:var(--honey);
  stroke:none;
  opacity:0;
  transform-origin:center;
  transform:scale(0);
  transition:opacity .5s ease, transform .5s var(--ease);
}
.vine.is-inview .vine__leaf{ opacity:1; transform:scale(1); }
.vine.is-inview .vine__leaves circle:nth-child(1){ transition-delay:.5s; }
.vine.is-inview .vine__leaves circle:nth-child(2){ transition-delay:.9s; }
.vine.is-inview .vine__leaves circle:nth-child(3){ transition-delay:1.3s; }
.vine.is-inview .vine__leaves circle:nth-child(4){ transition-delay:1.7s; }

.vine__milestones{
  display:flex; justify-content:space-between;
  font-family:var(--font-data);
  font-weight:600; font-size:13px; color:var(--coffee-70);
  margin-top:10px;
}
.vine__milestones span:nth-child(2){ margin-right:16%; }
.vine__milestones span:nth-child(3){ margin-left:6%; }

.proof__pills{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  margin-top:50px;
}
.proof__pills li{
  background:var(--white);
  border:1px solid rgba(17,17,17,.08);
  border-radius:999px;
  padding:10px 20px;
  font-size:14px;
  box-shadow:0 8px 20px -14px rgba(17,17,17,.3);
}
.proof__pills strong{ color:var(--terracotta-d); }

/* =========================================================
   MISSION (texto + imagen de fondo)
   ========================================================= */
.mission{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  overflow:hidden;
  padding:100px clamp(20px,6vw,80px);
}
.mission__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  background:var(--coffee);
}
.mission__overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(17,17,17,.88) 0%, rgba(17,17,17,.55) 55%, rgba(17,17,17,.25) 100%);
}
.mission__content{ position:relative; z-index:2; max-width:560px; color:var(--cream); }
.mission__content h2{ font-size:clamp(30px,4.5vw,46px); line-height:1.1; margin:0 0 20px; }
.mission__content p{ color:rgba(244,246,249,.85); font-size:17px; line-height:1.6; margin-bottom:24px; }
.mission__content .link-underline{ color:var(--honey); }

/* =========================================================
   BENEFITS / INGREDIENTES
   ========================================================= */
.benefits{ max-width:var(--container); margin:0 auto; padding:120px clamp(20px,6vw,48px); }
/* =========================================================
   STEPS
   ========================================================= */
/* =========================================================
   CASOS DE ÉXITO
   ========================================================= */
.success{ max-width:var(--container); margin:0 auto; padding:120px clamp(20px,6vw,48px); }
.success__carousel{ position:relative; max-width:920px; margin:0 auto; }
.success__carousel[hidden]{ display:none; }
.success__viewport{
  overflow:hidden;
  border-radius:var(--radius);
  box-shadow:0 30px 70px -40px rgba(17,17,17,.55);
  background:var(--cream-2);
}
.success__track{ display:flex; transition:transform .6s var(--ease); }
.success__slide{
  flex:0 0 100%;
  margin:0;
  aspect-ratio:4/3;
  background:var(--cream-2);
}
.success__slide img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.success__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; border:none;
  background:rgba(255,255,255,.92); color:var(--coffee);
  font-size:26px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px -10px rgba(17,17,17,.5);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.success__nav:hover{ background:var(--white); transform:translateY(-50%) scale(1.08); }
.success__nav[hidden]{ display:none; }
.success__nav--prev{ left:14px; padding-right:3px; }
.success__nav--next{ right:14px; padding-left:3px; }
.success__dots{ display:flex; justify-content:center; gap:8px; margin-top:26px; }
.success__dots[hidden]{ display:none; }
.success__dots button{
  width:9px; height:9px; border-radius:50%; border:none;
  background:rgba(17,17,17,.2); cursor:pointer; padding:0;
  transition:background .3s ease, transform .3s ease;
}
.success__dots button.is-active{ background:var(--terracotta); transform:scale(1.2); }
.success__empty{
  max-width:920px; margin:0 auto;
  text-align:center;
  color:var(--coffee-45);
  font-size:16px;
  padding:60px 20px;
  border:2px dashed rgba(17,17,17,.12);
  border-radius:var(--radius);
}

@media (max-width:760px){
  .success__slide{ aspect-ratio:3/4; }
  .success__nav{ width:38px; height:38px; font-size:22px; }
  .success__nav--prev{ left:8px; }
  .success__nav--next{ right:8px; }
}

/* =========================================================
   STEPS
   ========================================================= */
/* La sección es solo la infografía, a todo el ancho como
   estaba el fondo anterior. El azul de reserva evita el
   parpadeo blanco mientras la imagen carga. */
.steps{ background:#1F4FA8; line-height:0; }
.steps picture{ display:block; }
.steps__img{
  width:100%; height:auto; display:block;
}

/* =========================================================
   RESEÑAS (estilo Google reviews)
   ========================================================= */
.reviews{ max-width:var(--container); margin:0 auto; padding:120px clamp(20px,6vw,48px); }

/* ---------- Resumen: promedio + cantidad ---------- */
.reviews__summary{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:12px;
  margin:0 0 44px;
}
.reviews__summary[hidden]{ display:none; }
.reviews__avg{
  font-family:var(--font-data); font-size:38px; font-weight:700;
  line-height:1;
}
.reviews__stars{ color:#F2A93B; font-size:20px; letter-spacing:2px; }
.reviews__count{ color:var(--coffee-45); font-size:14px; width:100%; text-align:center; }

/* ---------- Fila de tarjetas ---------- */
/* El scroll-snap es CSS puro: sin JS la fila igual se desliza. */
.reviews__viewport{
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  margin:0 -8px;
  padding:8px;
}
.reviews__viewport::-webkit-scrollbar{ display:none; }

.reviews__track{ display:flex; gap:22px; }

.review{
  flex:0 0 clamp(272px, 78vw, 348px);
  scroll-snap-align:center;
  display:flex; flex-direction:column; gap:14px;
  background:var(--white);
  border-radius:var(--radius);
  padding:26px 26px 30px;
  box-shadow:0 20px 50px -34px rgba(17,17,17,.45);
}
.review__head{ display:flex; align-items:center; gap:13px; }
.review__avatar{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  object-fit:cover;
  background:var(--olive); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-data); font-weight:700; font-size:16px;
}
.review__meta{ min-width:0; }
.review__name{
  font-weight:700; font-size:15px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.review__date{ color:var(--coffee-45); font-size:13px; }
.review__stars{ color:#F2A93B; font-size:15px; letter-spacing:2px; }
.review__text{
  color:var(--coffee-70); font-size:15px; line-height:1.65;
}

/* ---------- Puntitos ---------- */
.reviews__dots{ display:flex; justify-content:center; gap:8px; margin-top:32px; }
.reviews__dots[hidden]{ display:none; }
.reviews__dots button{
  width:9px; height:9px; border-radius:50%; border:none;
  background:rgba(17,17,17,.2); cursor:pointer; padding:0;
  transition:background .3s ease, transform .3s ease;
}
.reviews__dots button.is-active{ background:var(--terracotta); transform:scale(1.2); }

@media (max-width:760px){
  .reviews{ padding:90px clamp(20px,6vw,48px); }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--cream-2); padding:70px clamp(20px,6vw,48px) 30px; }
.footer__top{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
  padding-bottom:44px; border-bottom:1px solid rgba(17,17,17,.1);
}
.footer__logo{ height:32px; margin-bottom:12px; }
.footer__brand-text{ font-family:var(--font-display); font-size:20px; font-weight:600; }
.footer__brand p{ color:var(--coffee-70); font-size:14px; margin-top:10px; }
.footer__links{ display:flex; flex-direction:column; gap:12px; font-weight:600; font-size:14px; }
.footer__links a:hover{ color:var(--terracotta-d); }
.footer__social{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.footer__social > p{ font-weight:700; font-size:14px; margin-bottom:2px; }
.footer__social a{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; }
.footer__social a:hover{ color:var(--terracotta-d); }

.footer__bottom{
  max-width:var(--container); margin:0 auto;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  padding-top:22px; font-size:12.5px; color:var(--coffee-45);
}
.footer__legal{ max-width:420px; }

/* =========================================================
   BOTONES FLOTANTES (WhatsApp + Instagram)
   ========================================================= */
.floats{
  position:fixed; right:20px; bottom:20px; z-index:200;
  display:flex; flex-direction:column; gap:12px;
}
.float{
  width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--white);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.4);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.float:hover{ transform:scale(1.08); box-shadow:0 10px 24px -8px rgba(0,0,0,.5); }

/* Cada SVG trae distinto margen interno, así que el tamaño se
   calcula sobre la tinta real: la cámara ocupa 78%% de su caja
   y la burbuja 84%%. Estos valores dejan a las dos al ~60-72%%
   del círculo, la proporción de los íconos oficiales. */
.float__icon{ width:40px; height:40px; display:block; }
.float--wa .float__icon{ width:46px; height:46px; }

/* Verde oficial de WhatsApp. */
.float--wa{ background:#25D366; }

/* Degradado del ícono de Instagram: arranca abajo a la
   izquierda en amarillo y termina en azul arriba a la derecha. */
.float--ig{
  background:radial-gradient(circle farthest-corner at 33% 100%,
    #FED373 4%, #F15245 30%, #D92E7F 62%, #9B36B7 85%, #515ECF 100%);
}

@media (max-width:600px){
  .floats{ right:14px; bottom:14px; gap:10px; }
  .float{ width:48px; height:48px; }
  .float__icon{ width:37px; height:37px; }
  .float--wa .float__icon{ width:41px; height:41px; }
}

/* =========================================================
   BENEFITS CTA
   ========================================================= */
.benefits__cta{ text-align:center; margin-top:48px; }

/* =========================================================
   MODAL INGREDIENTES
   ========================================================= */
.modal{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
}
.modal.is-open{ opacity:1; pointer-events:auto; }

.modal__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.modal__container{
  position:relative; z-index:1;
  width:min(96vw, 1100px);
  height:min(96vh, 800px);
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
  transform:translateY(30px) scale(.96);
  transition:transform .4s var(--ease);
}
.modal.is-open .modal__container{ transform:translateY(0) scale(1); }

.modal__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 32px 18px;
  border-bottom:1px solid rgba(17,17,17,.08);
  flex:none;
}
.modal__header h2{
  font-size:24px;
  color:var(--coffee);
}
.modal__close{
  width:36px; height:36px; border:none; background:var(--cream);
  border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--coffee);
  transition:background .2s ease;
}
.modal__close:hover{ background:var(--cream-2); }

.modal__body{
  flex:1;
  padding:20px 32px 24px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0 32px;
  overflow:hidden;
}

.ingr{
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 0;
  border-bottom:1px solid rgba(17,17,17,.06);
}
.ingr:nth-last-child(-n+2){ border-bottom:none; }

.ingr__icon{
  flex:none;
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  background:var(--cream);
  border-radius:10px;
}
.ingr h3{
  font-size:16px;
  margin-bottom:3px;
  color:var(--terracotta);
}
.ingr p{
  font-size:13px;
  line-height:1.5;
  color:var(--coffee-70);
}

@media (max-width:760px){
  .modal__body{ grid-template-columns:1fr; overflow-y:auto; }
  .modal__container{ height:96vh; }
}

/* =========================================================
   REVEAL ON SCROLL (utilidad genérica)
   ========================================================= */
.reveal-up{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-up.is-visible{ opacity:1; transform:translateY(0); }

.reveal-left{
  opacity:0; transform:translateX(-80px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-right{
  opacity:0; transform:translateX(80px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-left.is-visible,
.reveal-right.is-visible{ opacity:1; transform:translateX(0); }
.reveal-up[data-delay="1"]{ transition-delay:.05s; }
.reveal-up[data-delay="2"]{ transition-delay:.12s; }
.reveal-up[data-delay="3"]{ transition-delay:.19s; }
.reveal-up[data-delay="4"]{ transition-delay:.26s; }
.reveal-up[data-delay="5"]{ transition-delay:.33s; }
.reveal-up[data-delay="6"]{ transition-delay:.4s; }
.reveal-up[data-delay="7"]{ transition-delay:.47s; }
.reveal-up[data-delay="8"]{ transition-delay:.54s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1/-1; }
}

@media (max-width:760px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }
  /* En celular la barra desaparece: quedan solo el logo a la
     izquierda y las tres rayitas a la derecha. */
  .nav__inner,
  .nav__inner.is-scrolled{
    justify-content:flex-end;
    padding:0;
    background:none;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  /* ---------- Hero en celular ----------
     Foto vertical a pantalla completa con el texto encima,
     apoyado abajo: en esa zona la foto es piso y sombra, así
     que el título no se le monta al frasco. */
  .hero__bg{
    background-image:url('images/header_vertical.webp');
    background-position:center;
  }
  .hero{
    justify-content:flex-end;
    padding:118px clamp(20px,6vw,80px) 54px;
  }
  .hero__content{
    max-width:none;
    margin:0;
    text-align:center;
  }
  .hero__subtitle{ margin:16px auto 0; }
  /* Arriba queda solo la hamburguesa. */
  .nav__pedir{ display:none; }
  .hero__pedir{ display:inline-block; margin-top:26px; }
  /* Oscuro abajo, que es donde ahora vive el texto. */
  .hero__overlay{
    background:linear-gradient(180deg,
      rgba(17,17,17,.42) 0%,
      rgba(17,17,17,.12) 34%,
      rgba(17,17,17,.55) 66%,
      rgba(17,17,17,.86) 100%);
  }
  /* La flecha chocaría con el texto que ahora está abajo. */
  .hero__scroll{ display:none; }
  .footer__top{ grid-template-columns:1fr; }
  .vine__milestones span{ font-size:11px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
/* =========================================================
   POWERED BY — CODEFY LAB
   ========================================================= */
.footer__powered{
  max-width:var(--container); margin:0 auto;
  display:flex; justify-content:center;
  padding-top:26px; margin-top:22px;
  border-top:1px solid rgba(17,17,17,.08);
}
.footer__powered a{
  display:inline-flex; align-items:center; gap:10px;
  opacity:.5;
  transition:opacity .3s var(--ease);
}
.footer__powered a:hover{ opacity:1; }
.footer__powered span{
  font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--coffee-45);
}
/* La marca es cuadrada: se fija el alto y el ancho sale solo. */
.footer__powered img{
  height:34px; width:auto; display:block;
}

/* =========================================================
   FRASCO FLOTANTE
   Bloque autocontenido: para quitar el efecto, borrá esta
   sección, el bloque del HTML y el de index.js.
   ========================================================= */

/* ---------- Escritorio ancho: uno fijo que cruza ---------- */
.frasco{
  position:fixed; top:50%; left:50%;
  width:clamp(84px, 7vw, 124px);
  z-index:5;
  opacity:0;
  pointer-events:none;              /* nunca bloquea un clic */
  display:none;                     /* solo se enciende con espacio de sobra */
  filter:drop-shadow(0 22px 26px rgba(17,17,17,.32));
  /* Solo transform y opacity: van por GPU, sin reflow. */
  transition:transform 1.15s var(--ease), opacity .7s ease;
}
.frasco img{ width:100%; height:auto; display:block; }

/* Se planta en el margen: 95px desde el borde de la pantalla,
   fuera de la caja de contenido de 1180px. */
.frasco.is-izq{
  transform:translate(-50%,-50%) translateX(calc(-50vw + 95px)) rotate(-9deg);
}
.frasco.is-der{
  transform:translate(-50%,-50%) translateX(calc(50vw - 95px)) rotate(9deg);
}
.frasco.is-visible{ opacity:1; }

/* Debajo de 1280px los márgenes ya no alcanzan y taparía texto. */
@media (min-width:1280px){
  .frasco{ display:block; }
}

/* ---------- Pantallas angostas: uno chico por sección ---------- */
/* overflow oculto a propósito: la decoración asoma con
   right/left negativos y, sin esto, en celular empujaba la
   página hacia el costado y aparecía scroll horizontal. */
[data-frasco]{ position:relative; overflow:hidden; }

.frasco-deco{
  position:absolute;
  /* Arranca por debajo del encabezado: a 38px se montaba sobre
     el eyebrow y el título de la sección. */
  top:clamp(205px, 48vw, 285px);
  width:clamp(76px, 20vw, 116px);
  opacity:.58;
  pointer-events:none;
  z-index:0;
}
.frasco-deco img{ width:100%; height:auto; display:block; }

/* Asoman desde el borde, con parte del cuerpo fuera de cuadro. */
/* Se corre menos hacia afuera: antes salía media pieza de
   cuadro y quedaba irreconocible. Ahora asoma un ~75%. */
.frasco-deco--der{ right:-20px; transform:rotate(11deg); }
.frasco-deco--izq{ left:-20px;  transform:rotate(-11deg); }

@media (min-width:1280px){
  .frasco-deco{ display:none; }
}

/* El reveal base mueve en X; acá se conserva la inclinación. */
.frasco-deco.reveal-right.is-visible{ transform:rotate(11deg); }
.frasco-deco.reveal-left.is-visible{ transform:rotate(-11deg); }

/* ---------- Menos movimiento: se queda quieto ---------- */
@media (prefers-reduced-motion:reduce){
  .frasco{ transition:none; }
}

/* =========================================================
   ENVÍOS
   ========================================================= */
.envios{
  /* Del crema del sitio al azul de marca. El texto vive en la
     parte clara y el camión, que es blanco, cae sobre el azul
     y ahí es donde más resalta. */
  background:linear-gradient(180deg,
    var(--cream) 0%,
    #DCE6F4 34%,
    #4E7FC4 72%,
    var(--terracotta) 100%);
  padding:104px clamp(20px,6vw,48px) 0;
  overflow:hidden;
}
.envios__texto{ max-width:720px; margin:0 auto; text-align:center; }
.envios__cta{ margin-top:30px; }
.envios__img{
  display:block;
  width:100%; max-width:760px; height:auto;
  margin:0 auto;
  /* Sin margen inferior: el camión se apoya en el borde de
     la sección, donde el degradado ya es azul pleno. */
}

@media (max-width:760px){
  .envios{ padding-top:78px; }
  .envios__cta{ margin-top:24px; }
}

/* =========================================================
   TITULAR TIPO AFICHE (solo la sección de beneficios)
   Anton, en mayúsculas, alternando líneas chicas y grandes.
   ========================================================= */
.afiche{
  font-family:"Anton", var(--font-body);
  font-weight:400;                 /* Anton trae un solo grosor */
  text-transform:uppercase;
  text-align:center;
  max-width:900px;
  margin:0 auto 56px;
  /* Anton es condensada y de trazo alto: apretar el interlineado
     es lo que le da el aspecto de afiche apilado. */
  line-height:.92;
}
.afiche span{ display:block; }

.afiche__sm{
  font-size:clamp(14px, 2vw, 23px);
  letter-spacing:.13em;
  color:var(--coffee-70);
  margin-bottom:4px;
}
.afiche__lg{
  font-size:clamp(42px, 8.2vw, 88px);
  letter-spacing:.005em;
  margin-bottom:14px;
}
.afiche__lg--color{ color:var(--terracotta); }

/* La última línea no arrastra margen. */
.afiche span:last-child{ margin-bottom:0; }

/* El "que" suelto respira un poco más arriba. */
.afiche__sm + .afiche__lg{ margin-top:2px; }

/* Separador punteado con el punto al centro, como el afiche. */
.afiche__linea{
  position:relative;
  width:min(260px, 55%);
  height:1px;
  margin:16px auto 18px;
  background:repeating-linear-gradient(90deg,
    var(--coffee-45) 0 7px, transparent 7px 14px);
}
.afiche__linea::after{
  content:"";
  position:absolute; top:50%; left:50%;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:var(--terracotta);
}

@media (max-width:760px){
  .afiche{ margin-bottom:44px; }
  .afiche__sm{ letter-spacing:.1em; }
}

/* =========================================================
   ÓRBITA DE BENEFICIOS
   Los seis íconos giran alrededor del frasco; el texto del
   activo aparece quieto debajo para poder leerlo.
   ========================================================= */
.orbita{
  --radio:clamp(106px, 23vw, 232px);   /* del centro al ícono */
  --ancho:clamp(98px, 21vw, 158px);    /* ancho de cada punto */
  max-width:var(--container);
  margin:0 auto;
}

/* El ruedo suma el ancho de un punto, porque los rótulos
   sobresalen del círculo por los cuatro costados. */
.orbita__ruedo{
  position:relative;
  width:calc(var(--radio) * 2 + var(--ancho));
  height:calc(var(--radio) * 2 + var(--ancho));
  margin:0 auto;
}

/* ---------- Cada punto: ícono + su título ---------- */
.orbita__item{
  position:absolute; top:50%; left:50%;
  width:var(--ancho);
  border:none; background:none; padding:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  /* Se ubica girando el radio, se endereza con el giro inverso
     —para que nunca quede de costado— y recién ahí se centra
     sobre su punto de la órbita. */
  transform:rotate(var(--a))
            translateY(calc(var(--radio) * -1))
            rotate(calc(var(--a) * -1))
            translate(-50%, -50%);
  transition:transform 1s var(--ease), opacity .5s ease;
  opacity:.45;
}
.orbita__item:hover{ opacity:.8; }

.orbita__ico{
  width:clamp(50px, 11vw, 70px);
  aspect-ratio:1;
  border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  background:var(--color);
  box-shadow:0 14px 28px -14px rgba(17,17,17,.5);
  transition:box-shadow .4s ease, transform .4s var(--ease);
}
.orbita__ico svg{
  width:46%; height:46%;
  stroke:var(--white); fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

.orbita__rotulo{
  font-family:var(--font-body);
  font-size:clamp(11px, 1.5vw, 13.5px);
  font-weight:700;
  line-height:1.3;
  text-align:center;
  color:var(--coffee-70);
  /* Los títulos largos no deben empujar el ancho del punto. */
  overflow-wrap:anywhere;
}

/* El activo es el que quedó arriba. */
.orbita__item.is-activo{ opacity:1; }
.orbita__item.is-activo .orbita__ico{
  box-shadow:0 18px 40px -12px var(--color);
  transform:scale(1.08);
}
.orbita__item.is-activo .orbita__rotulo{ color:var(--coffee); }

/* En pantallas muy chicas el rótulo no tiene dónde caer:
   quedan los íconos y el texto se lee en el panel de abajo. */
@media (max-width:560px){
  .orbita{ --ancho:clamp(56px, 15vw, 74px); }
  .orbita__rotulo{ display:none; }
}

/* El activo es el que quedó arriba. */
.orbita__item.is-activo{
  opacity:1;
  box-shadow:0 18px 40px -12px var(--color);
}

/* ---------- Frasco al centro ---------- */
.orbita__frasco{
  position:absolute; top:50%; left:50%;
  width:clamp(88px, 19vw, 168px);
  height:auto;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 20px 26px rgba(17,17,17,.3));
  animation:orbitaFlota 4.5s ease-in-out infinite;
}
@keyframes orbitaFlota{
  0%,100%{ transform:translate(-50%,-50%) translateY(0); }
  50%    { transform:translate(-50%,-50%) translateY(-13px); }
}

/* ---------- Texto del beneficio activo ---------- */
.orbita__panel{
  position:relative;
  max-width:520px;
  margin:44px auto 0;
  text-align:center;
  /* Alto reservado para el texto más largo: sin esto la página
     da un salto cada vez que cambia el beneficio. */
  min-height:104px;
}
.orbita__info{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transform:translateY(10px);
  transition:opacity .45s ease, transform .45s var(--ease), visibility .45s;
}
.orbita__info.is-activa{
  opacity:1; visibility:visible;
  transform:translateY(0);
}
/* El título ya viaja con el ícono, así que acá sobra: queda
   solo para lectores de pantalla. Vuelve a la vista abajo de
   560px, donde el rótulo giratorio no entra. */
.orbita__info h3{
  position:absolute;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.orbita__info p{
  color:var(--coffee-70);
  font-size:16px; line-height:1.65;
}

@media (max-width:560px){
  .orbita__panel{ min-height:186px; margin-top:30px; }

  /* Sin rótulo girando, el título vuelve al panel. */
  .orbita__info h3{
    position:static;
    width:auto; height:auto; margin:0 0 12px; padding:0;
    overflow:visible; clip:auto; white-space:normal;
    font-family:var(--font-display);
    font-size:clamp(20px, 5vw, 25px);
  }
}

/* Menos movimiento: el frasco deja de flotar. El giro lo apaga el JS. */
@media (prefers-reduced-motion:reduce){
  .orbita__frasco{ animation:none; }
  .orbita__item{ transition:opacity .3s ease; }
}