/* ============================================================
   NovaBerry — berries frescos y naturales
   Canvas: leaf-washed white · Ink: forest green · Action: field green
   ============================================================ */

:root{
  /* colour */
  --hoja:      #0C3B23;   /* deep forest green — ink, dark surfaces      */
  --hoja-2:    #14512F;   /* one step up — hovers on dark                */
  --hoja-3:    #072A17;   /* deepest — footer bar                        */
  --campo:     #1E9E3A;   /* bright field green — iconos y títulos grandes */
  /* Variantes oscuras: el verde vivo no alcanza 4.5:1 en texto chico.
     Estas sí — se usan en botones sólidos y en etiquetas pequeñas.       */
  --campo-btn: #17812F;   /* fondo de botón sólido — 4.98:1 con blanco   */
  --campo-btn-h:#126727;  /* hover / pressed                             */
  --campo-txt: #157A2E;   /* texto verde chico sobre claro — 5.04:1      */
  --papel:     #F4F7F0;   /* page canvas, green-cast white               */
  --papel-2:   #EAF0E4;   /* sunken tint                                 */
  --nieve:     #FFFFFF;   /* cards                                       */
  --frambuesa: #D81E4A;   /* raspberry — price emphasis, badges. rare    */
  --corteza:   #64755F;   /* sage grey — secondary text                  */
  --linea:     rgba(12,59,35,.13);
  --linea-2:   rgba(12,59,35,.06);

  /* the logo's own gradient — used in exactly one place: the fall meter */
  --grad: linear-gradient(90deg,#1B7A34 0%,#D81E4A 40%,#B0208C 70%,#2B1B8C 100%);

  /* type */
  --f-d: 'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-b: 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* metrics */
  --col:  1180px;
  --pad:  clamp(20px,4vw,40px);
  --sec:  clamp(76px,10vw,140px);
  --navh: 78px;
  --r:    20px;

  --shadow-1: 0 1px 2px rgba(12,59,35,.05), 0 8px 24px -12px rgba(12,59,35,.16);
  --shadow-2: 0 2px 6px rgba(12,59,35,.06), 0 26px 50px -22px rgba(12,59,35,.30);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ── reset ─────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
html:focus-within{ scroll-behavior:smooth }
body{
  margin:0; background:var(--papel); color:var(--hoja);
  font-family:var(--f-b); font-size:16.5px; line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100% }
img{ height:auto }
svg{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
h1,h2,h3{ margin:0; font-family:var(--f-d); font-weight:800; letter-spacing:-.025em; line-height:.94 }
p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
input{ font:inherit }

:focus-visible{ outline:2.5px solid var(--campo-txt); outline-offset:3px; border-radius:6px }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:fixed; top:10px; left:10px; z-index:200;
  padding:12px 18px; background:var(--hoja); color:var(--papel);
  border-radius:999px; font-weight:600; transform:translateY(-160%);
  transition:transform .2s var(--ease);
}
.skip:focus{ transform:none }

.wrap{ width:100%; max-width:var(--col); margin-inline:auto; padding-inline:var(--pad) }

/* ── the fall meter ────────────────────────────────────── */
.progress{
  position:fixed; inset:0 0 auto; height:3px; z-index:70;
  background:var(--linea-2); pointer-events:none;
}
.progress i{
  display:block; height:100%; width:0%;
  background:var(--grad); border-radius:0 3px 3px 0;
}

/* ── falling fruit ─────────────────────────────────────── */
.fall{
  position:fixed; inset:0; overflow:hidden; pointer-events:none;
  contain:layout paint; transition:opacity .3s var(--ease);
}
.fall--back { z-index:0 }
.fall--front{ z-index:3 }
/* con el carrito abierto la fruta se aparta */
body.is-cart .fall{ opacity:.12 }

.berry{ position:absolute; top:0; left:0; will-change:transform,opacity }
.berry img{ width:100%; height:auto }
.fall--front .berry img{ filter:drop-shadow(0 14px 20px rgba(12,59,35,.22)) }
/* la opacidad de esta capa la pone main.js (OP_FONDO): el estilo en línea
   que escribe la animación pisaría cualquier regla de acá */
.fall--back  .berry img { filter:blur(3.5px) saturate(.82) }

/* content sits between the two fall layers */
main > section,.ticker,.foot{ position:relative; z-index:1 }

/* ── nav ───────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto; z-index:60; height:var(--navh);
  display:flex; align-items:center;
  background:color-mix(in srgb,var(--papel) 78%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--linea); background:color-mix(in srgb,var(--papel) 92%,transparent) }
.nav__in{ display:flex; align-items:center; gap:clamp(16px,3vw,44px) }

.nav__logo img{ width:auto; height:38px }

.nav__links{ display:flex; align-items:center; gap:clamp(14px,2.2vw,30px); margin-right:auto }
.nav__links a{
  position:relative; font-size:15px; font-weight:500; color:var(--hoja);
  padding-block:6px; transition:color .18s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--campo); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease);
}
.nav__links a:hover{ color:var(--campo-txt) }
.nav__links a:hover::after,.nav__links a.is-active::after{ transform:scaleX(1) }
.nav__links a.is-active{ color:var(--campo-txt) }

.nav__actions{ display:flex; align-items:center; gap:10px }

.iconbtn{
  position:relative; display:grid; place-items:center;
  width:42px; height:42px; border-radius:50%; color:var(--hoja);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.iconbtn svg{ width:21px; height:21px }
.iconbtn:hover{ background:var(--papel-2); color:var(--campo) }
.iconbtn__count{
  position:absolute; top:2px; right:1px; min-width:19px; height:19px; padding:0 5px;
  display:grid; place-items:center; border-radius:999px;
  background:var(--frambuesa); color:#fff;
  font-family:var(--f-d); font-size:11px; font-weight:700; line-height:1;
  border:2px solid var(--papel);
  transition:transform .3s var(--ease);
}
.iconbtn__count[data-empty="true"]{ transform:scale(0) }
.iconbtn--menu{ display:none }

/* ── buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px; border-radius:999px;
  font-family:var(--f-d); font-size:14.5px; font-weight:600; letter-spacing:-.005em;
  white-space:nowrap; cursor:pointer;
  transition:transform .18s var(--ease),background .2s var(--ease),
             color .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.btn svg{ width:18px; height:18px; flex:none }
.btn:active{ transform:translateY(1px) }
.btn--lg{ padding:15px 28px; font-size:16px }
.btn--block{ width:100%; }

.btn--solid{ background:var(--campo-btn); color:#fff; box-shadow:0 10px 22px -12px rgba(23,129,47,.9) }
.btn--solid:hover{ background:var(--campo-btn-h); box-shadow:0 16px 28px -14px rgba(23,129,47,.95) }

.btn--ghost{ border:1.6px solid var(--linea); color:var(--hoja); background:transparent }
.btn--ghost:hover{ border-color:var(--hoja); background:var(--nieve) }

.btn--cream{ background:var(--papel); color:var(--hoja) }
.btn--cream:hover{ background:#fff }

/* acciones de la tarjeta: comprar directo + agregar al carrito */
.card__acciones{ display:flex; gap:7px; margin-top:14px }
.btn--buy{ flex:1; padding:11px 14px; font-size:14px }
.btn--icon{
  flex:none; width:42px; padding:0; border:1.5px solid var(--linea);
  color:var(--hoja); background:var(--nieve);
}
.btn--icon:hover{ border-color:var(--campo-btn); background:var(--campo-btn); color:#fff }
.btn--icon.is-done{ border-color:var(--campo-btn); background:var(--campo-btn); color:#fff }
.btn--icon svg{ width:19px; height:19px }

/* ── section furniture ─────────────────────────────────── */
.section{ padding-block:var(--sec) }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
  font-family:var(--f-d); font-size:12px; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:var(--campo-txt);
}
.eyebrow__leaf{ width:16px; height:16px }
.eyebrow--on-dark{ color:#8FD79F }

.sechead{ max-width:620px; margin-bottom:clamp(34px,5vw,56px) }
.sechead--center{ margin-inline:auto; text-align:center }
.sechead__title{
  font-size:clamp(2.1rem,5.2vw,3.9rem); line-height:.92;
  font-variation-settings:'wdth' 108;
}
.sechead__lead{ margin-top:18px; font-size:17.5px; color:var(--corteza); max-width:52ch }
.sechead--center .sechead__lead{ margin-inline:auto }

/* ── hero ──────────────────────────────────────────────── */
.hero{ padding-top:calc(var(--navh) + clamp(28px,5vw,64px)); padding-bottom:clamp(48px,7vw,96px) }
.hero__in{
  display:grid; grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);
  gap:clamp(20px,3vw,44px); align-items:center;
}
.hero__title{ margin:0 }
.hero__title-1,.hero__title-2{ display:block; text-transform:uppercase }
.hero__title-1{
  font-size:clamp(3.5rem,11.4vw,7.7rem); line-height:.82;
  letter-spacing:-.045em; color:var(--hoja);
  font-variation-settings:'wdth' 112;
}
.hero__title-2{
  font-size:clamp(1.3rem,4.1vw,2.72rem); line-height:1;
  letter-spacing:.01em; color:var(--campo); font-weight:700;
  margin-top:.14em; font-variation-settings:'wdth' 106;
}
.hero__lead{
  margin-top:26px; max-width:44ch; font-size:clamp(16.5px,1.5vw,18.5px);
  color:var(--corteza); line-height:1.62;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }

.trust{
  grid-column:1 / -1;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,3vw,40px); margin-top:clamp(30px,4vw,46px);
  padding-top:clamp(24px,3vw,32px); border-top:1px solid var(--linea);
}
.trust__item{ display:flex; gap:11px; align-items:flex-start }
.trust__item svg{ width:22px; height:22px; color:var(--campo); flex:none; margin-top:2px }
.trust__item b{ display:block; font-size:14.5px; font-weight:600; line-height:1.32 }
.trust__item span{ display:block; font-size:13.5px; color:var(--corteza); line-height:1.4; margin-top:2px }

.hero__art{ position:relative }
.hero__bowl{
  width:100%; filter:drop-shadow(0 42px 44px rgba(12,59,35,.24));
  animation:float 7s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-13px) } }

/* ── ticker ────────────────────────────────────────────── */
.ticker{ background:var(--hoja); color:var(--papel); overflow:hidden; padding-block:13px }
.ticker__track{
  display:flex; width:max-content; gap:0;
  animation:slide 38s linear infinite;
}
.ticker span{
  display:inline-flex; align-items:center; gap:22px; padding-inline:22px;
  font-family:var(--f-d); font-size:12.5px; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; white-space:nowrap;
}
.ticker span::after{ content:''; width:5px; height:5px; border-radius:50%; background:var(--campo) }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ── tienda ────────────────────────────────────────────── */
.filters{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:clamp(26px,3.5vw,38px) }
.chip{
  padding:9px 18px; border-radius:999px; border:1.5px solid var(--linea);
  font-family:var(--f-d); font-size:13.5px; font-weight:600; color:var(--corteza);
  transition:all .2s var(--ease);
}
.chip:hover{ border-color:var(--hoja); color:var(--hoja) }
.chip.is-on{ background:var(--hoja); border-color:var(--hoja); color:var(--papel) }

.grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
}
.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--nieve); border:1px solid var(--linea-2); border-radius:var(--r);
  padding:16px 16px 18px; box-shadow:var(--shadow-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-2); border-color:var(--linea) }
.card.is-hidden{ display:none }

.card__art{
  position:relative; border-radius:14px; overflow:hidden;
  background:radial-gradient(ellipse 62% 52% at 50% 62%,var(--papel-2),transparent 72%);
  aspect-ratio:1/1; display:grid; place-items:center;
}
.card__art img{
  width:88%; transition:transform .45s var(--ease);
  filter:drop-shadow(0 16px 18px rgba(12,59,35,.15));
}
.card:hover .card__art img{ transform:scale(1.055) rotate(-1.4deg) }

.card__body{ display:flex; flex-direction:column; flex:1; margin-top:14px }
.card__name{ font-size:19px; letter-spacing:-.02em; line-height:1.12 }
.card__note{ margin-top:6px; font-size:13.8px; line-height:1.45; color:var(--corteza) }
.card__meta{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-top:auto; padding-top:14px;
}
.card__unit{
  font-family:var(--f-d); font-size:11.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--corteza);
}
.card__price{
  font-family:var(--f-d); font-size:21px; font-weight:800;
  letter-spacing:-.02em; color:var(--hoja); font-variant-numeric:tabular-nums;
}
.tag{
  position:absolute; top:14px; left:14px; z-index:2;
  padding:5px 11px; border-radius:999px; background:var(--frambuesa); color:#fff;
  font-family:var(--f-d); font-size:10.5px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
}

/* ── packs ─────────────────────────────────────────────── */
/* Tarjeta horizontal a propósito: así no se confunde con una ficha
   suelta y queda espacio para listar lo que trae adentro.        */
.packs__list{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);
}
.pack{
  position:relative; display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  align-items:center; gap:clamp(10px,1.6vw,18px);
  background:var(--nieve); border:1px solid var(--linea-2); border-radius:var(--r);
  padding:16px; box-shadow:var(--shadow-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.pack:hover{ transform:translateY(-5px); box-shadow:var(--shadow-2); border-color:var(--linea) }

.pack__art{
  border-radius:14px; overflow:hidden; aspect-ratio:1/1;
  background:radial-gradient(ellipse 66% 56% at 50% 58%,var(--papel-2),transparent 72%);
  display:grid; place-items:center;
}
.pack__art img{
  width:96%; transition:transform .45s var(--ease);
  filter:drop-shadow(0 14px 17px rgba(12,59,35,.15));
}
.pack:hover .pack__art img{ transform:scale(1.05) rotate(-1.2deg) }

.pack__body{ display:flex; flex-direction:column; min-width:0 }
.pack__name{ font-size:20px; letter-spacing:-.025em; line-height:1.1 }
.pack__note{ margin-top:6px; font-size:13.6px; line-height:1.45; color:var(--corteza) }

.pack__lista{ display:grid; gap:5px; margin-top:12px }
.pack__lista li{
  display:flex; align-items:baseline; gap:9px;
  font-size:13.6px; line-height:1.35; color:var(--hoja);
}
.pack__lista li::before{
  content:''; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--campo); transform:translateY(-2px);
}

.pack__meta{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-top:auto; padding-top:14px;
}
.pack__unit{
  font-family:var(--f-d); font-size:11.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--corteza);
}
.pack__precios{ display:flex; align-items:baseline; gap:8px }
.pack__precios s{ font-size:13.5px; color:var(--corteza); text-decoration-thickness:1.4px }
.pack__precios b{
  font-family:var(--f-d); font-size:21px; font-weight:800;
  letter-spacing:-.02em; color:var(--hoja); font-variant-numeric:tabular-nums;
}
.pack__ahorro{
  position:absolute; top:14px; left:14px; z-index:2;
  padding:5px 11px; border-radius:999px; background:var(--frambuesa); color:#fff;
  font-family:var(--f-d); font-size:10.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
}

/* ── mayorista ─────────────────────────────────────────── */
.mayor__caja{
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  align-items:center; gap:clamp(16px,2.5vw,10px);
  background:var(--hoja); color:var(--papel);
  border-radius:clamp(20px,2.6vw,30px); overflow:hidden;
}
.mayor__art{ display:flex; align-items:center; justify-content:center; padding:clamp(22px,3.2vw,42px) }
.mayor__art img{ width:100%; max-width:340px; filter:drop-shadow(0 30px 34px rgba(0,0,0,.42)) }

.mayor__copy{ padding:clamp(28px,4vw,52px) clamp(28px,4vw,56px) clamp(28px,4vw,52px) 0 }
.mayor__title{
  font-size:clamp(1.6rem,3.3vw,2.4rem); line-height:1.02;
  font-variation-settings:'wdth' 106; text-wrap:balance; max-width:19ch;
}
.mayor__lead{ margin-top:15px; font-size:16px; color:rgba(244,247,240,.76); max-width:44ch }

/* lista en línea: el separador va pegado a su rubro, así nunca queda
   un "·" solitario abriendo la segunda línea.                        */
.mayor__quien{
  display:flex; flex-wrap:wrap; margin-top:14px;
  font-family:var(--f-d); font-size:12.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; line-height:1.7;
  color:rgba(244,247,240,.6);
}
.mayor__quien li::after{ content:'·'; margin-inline:7px; opacity:.55 }
.mayor__quien li:last-child::after{ content:none }

.mayor__acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:28px }

/* verde de WhatsApp con tinta oscura: sobre este verde el texto blanco
   se queda en 2:1 y no se lee. Así llega a 7,8:1.                     */
.btn--wa{ background:#25D366; color:#072A17; box-shadow:0 10px 22px -12px rgba(37,211,102,.9) }
.btn--wa:hover{ background:#1FBF5B; box-shadow:0 16px 28px -14px rgba(37,211,102,.95) }
.btn--wa svg{ width:20px; height:20px }

.mayor__mail{
  display:flex; align-items:center; gap:11px;
  padding:11px 20px 11px 17px; border-radius:999px;
  border:1.5px solid rgba(244,247,240,.26);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.mayor__mail:hover{ border-color:rgba(244,247,240,.55); background:rgba(244,247,240,.07) }
.mayor__mail svg{ width:21px; height:21px; flex:none; color:#8FD79F }
.mayor__mail b{
  display:block; font-family:var(--f-d); font-size:14.6px;
  font-weight:700; letter-spacing:-.01em; line-height:1.25;
}
.mayor__mail i{
  display:block; font-style:normal; font-size:12.6px;
  color:rgba(244,247,240,.64); line-height:1.35; margin-top:1px;
}

/* ── beneficios ────────────────────────────────────────── */
.benefits__list{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.4vw,34px) }
.ben{ padding-top:24px; border-top:2px solid var(--hoja) }
.ben__icon{ width:27px; height:27px; color:var(--campo); margin-bottom:16px }
.ben__title{ font-size:18.5px; line-height:1.16; letter-spacing:-.02em; min-height:2.32em }
.ben__text{ margin-top:9px; font-size:15px; color:var(--corteza); line-height:1.55 }

/* ── envíos ────────────────────────────────────────────── */
.ship{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center; gap:clamp(20px,3vw,10px);
  background:var(--hoja); color:var(--papel);
  border-radius:clamp(20px,2.6vw,30px); overflow:hidden;
}
.ship__copy{ padding:clamp(30px,4.4vw,60px) }
.ship__title{ font-size:clamp(1.85rem,4vw,2.95rem); line-height:.98; font-variation-settings:'wdth' 106 }
.ship__lead{ margin-top:16px; font-size:16.5px; color:rgba(244,247,240,.74); max-width:38ch }

.steps{ display:grid; gap:15px; margin:30px 0 32px }
.steps__item{ display:flex; gap:14px; align-items:flex-start }
.steps__n{
  flex:none; width:27px; height:27px; border-radius:50%;
  display:grid; place-items:center; background:var(--campo-btn); color:#fff;
  font-family:var(--f-d); font-size:13px; font-weight:700; line-height:1;
}
.steps__item b{ display:block; font-size:15.5px; font-weight:600 }
.steps__item span{ display:block; font-size:14.2px; color:rgba(244,247,240,.68); line-height:1.45; margin-top:2px }

.ship__art{ display:flex; align-items:center; justify-content:center; padding:clamp(20px,3vw,36px) clamp(16px,2vw,28px) }
.ship__art img{ width:100%; filter:drop-shadow(0 34px 36px rgba(0,0,0,.4)) }

/* ── el bowl (donde aterriza la fruta) ─────────────────── */
/* sin z-index propio: la fruta que cae (z-3) tiene que verse ENCIMA del bowl,
   si no el aterrizaje queda oculto detrás de la foto */
.landing{ text-align:center; overflow:hidden }
.landing__in{ display:flex; flex-direction:column; align-items:center }
.bowl{ position:relative; width:min(430px,68vw); margin-top:clamp(6px,2vw,20px) }
.bowl__img{
  position:relative; z-index:2; width:100%;
  transform-origin:50% 62%;
  filter:drop-shadow(0 30px 30px rgba(12,59,35,.20));
}
.bowl.is-catch .bowl__img{ animation:catch .42s var(--ease) }
@keyframes catch{
  0%{ transform:scale(1) }
  38%{ transform:scale(1.026,.978) }
  100%{ transform:scale(1) }
}
.bowl__shadow{
  position:absolute; left:50%; bottom:-4%; z-index:1;
  width:74%; height:9%; transform:translateX(-50%);
  background:rgba(12,59,35,.30); border-radius:50%; filter:blur(19px);
}
.landing__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:clamp(34px,4.5vw,52px) }

/* ── footer ────────────────────────────────────────────── */
.foot{ background:var(--hoja); color:var(--papel); padding-top:clamp(52px,6.5vw,84px) }
.foot__in{
  display:grid; grid-template-columns:1.55fr 1fr 1fr 1.35fr;
  gap:clamp(26px,3.4vw,48px); padding-bottom:clamp(40px,5vw,64px);
}
.foot__brand img{ width:auto; height:44px; margin-bottom:18px }
.foot__brand p{ font-size:14.6px; color:rgba(244,247,240,.68); line-height:1.6; max-width:34ch }
.foot__social{ display:flex; gap:9px; margin-top:22px }
.foot__social a{
  display:grid; place-items:center; width:39px; height:39px; border-radius:50%;
  border:1.4px solid rgba(244,247,240,.22); color:var(--papel);
  transition:all .2s var(--ease);
}
.foot__social a:hover{ background:var(--campo); border-color:var(--campo) }
.foot__social svg{ width:18px; height:18px }

.foot__col{ display:flex; flex-direction:column; align-items:flex-start; gap:11px }
.foot__col h3{
  margin-bottom:5px; font-size:12px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:#8FD79F;
}
.foot__col a,.foot__col span,.foot__col p{ font-size:14.6px; color:rgba(244,247,240,.72) }
.foot__col a{ transition:color .18s var(--ease) }
.foot__col a:hover{ color:#fff }
.foot__news p{ line-height:1.55; margin-bottom:4px }

.news{ display:flex; width:100%; max-width:320px; border-bottom:1.5px solid rgba(244,247,240,.3) }
.news input{
  flex:1; min-width:0; padding:10px 2px; border:0; background:transparent;
  color:var(--papel); font-size:15px;
}
.news input::placeholder{ color:rgba(244,247,240,.42) }
.news input:focus{ outline:none }
.news:focus-within{ border-bottom-color:var(--campo) }
.news__go{ display:grid; place-items:center; width:40px; color:var(--campo) }
.news__go svg{ width:20px; height:20px }
.news__msg{ min-height:18px; font-size:13.4px; color:#8FD79F }

.foot__bar{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  padding-block:20px; border-top:1px solid rgba(244,247,240,.14);
}
.foot__bar p{ font-size:13.2px; color:rgba(244,247,240,.55) }

/* ── carrito ───────────────────────────────────────────── */
.scrim{
  position:fixed; inset:0; z-index:80; background:rgba(7,42,23,.42);
  backdrop-filter:blur(3px); opacity:0; transition:opacity .3s var(--ease);
}
.scrim.is-on{ opacity:1 }

.cart{
  position:fixed; top:0; right:0; bottom:0; z-index:90;
  width:min(420px,100%); display:flex; flex-direction:column;
  background:var(--papel); box-shadow:-20px 0 60px rgba(7,42,23,.22);
  transform:translateX(102%); transition:transform .38s var(--ease);
  visibility:hidden;
}
.cart.is-on{ transform:none; visibility:visible }
.cart__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--pad); border-bottom:1px solid var(--linea);
}
.cart__head h2{ font-size:21px; letter-spacing:-.02em }
.cart__body{ flex:1; overflow-y:auto; padding:8px var(--pad) 20px }

.line{ display:flex; gap:13px; align-items:center; padding:16px 0; border-bottom:1px solid var(--linea-2) }
.line__art{
  flex:none; width:62px; height:62px; border-radius:12px; background:var(--nieve);
  display:grid; place-items:center; border:1px solid var(--linea-2);
}
.line__art img{ width:82% }
.line__mid{ flex:1; min-width:0 }
.line__name{ font-family:var(--f-d); font-size:15px; font-weight:700; letter-spacing:-.015em }
.line__unit{ font-size:12.8px; color:var(--corteza) }
.line__price{
  margin-top:3px; font-family:var(--f-d); font-size:14.5px; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.qty{ display:flex; align-items:center; gap:2px; border:1.4px solid var(--linea); border-radius:999px; padding:3px }
.qty button{ display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:var(--hoja) }
.qty button:hover{ background:var(--papel-2); color:var(--campo) }
.qty svg{ width:15px; height:15px }
.qty b{ min-width:20px; text-align:center; font-family:var(--f-d); font-size:14px; font-weight:700 }

.empty{ padding:56px 6px; text-align:center }
.empty svg{ width:44px; height:44px; margin:0 auto 16px; color:var(--corteza); opacity:.55 }
.empty b{ display:block; font-family:var(--f-d); font-size:18px; letter-spacing:-.02em }
.empty span{ display:block; margin-top:7px; font-size:15px; color:var(--corteza) }

.cart__foot{ padding:18px var(--pad) 22px; border-top:1px solid var(--linea); background:var(--nieve) }
.cart__sum{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px }
.cart__sum span{ font-size:15px; color:var(--corteza) }
.cart__sum b{ font-family:var(--f-d); font-size:25px; font-weight:800; letter-spacing:-.025em; font-variant-numeric:tabular-nums }
.cart__note{ font-size:12.8px; color:var(--corteza); margin-bottom:14px }

/* ── hablar por WhatsApp ───────────────────────────────────
   Verde propio de WhatsApp a propósito: así se distingue de los
   botones de compra y se lee como "hablar con una persona".
   La tinta va oscura, igual que en .btn--wa: sobre este verde el
   blanco se queda en 2:1 y la palabra "Escríbenos" no se leería. */
.wa{
  position:fixed; right:clamp(16px,2.4vw,26px); bottom:clamp(16px,2.4vw,26px);
  z-index:92; display:flex; align-items:center; gap:0;
  height:56px; padding:0 16px; border-radius:999px;
  background:#25D366; color:#072A17;
  box-shadow:0 8px 20px -6px rgba(37,211,102,.55), 0 3px 8px rgba(7,42,23,.22);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),
             gap .28s var(--ease),opacity .22s var(--ease);
}
.wa svg{ width:26px; height:26px; flex:none }
.wa__txt{
  max-width:0; overflow:hidden; white-space:nowrap;
  font-family:var(--f-d); font-size:15px; font-weight:600;
  transition:max-width .28s var(--ease);
}
.wa:hover,.wa:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 14px 26px -8px rgba(37,211,102,.6), 0 4px 10px rgba(7,42,23,.24);
  gap:10px;
}
.wa:hover .wa__txt,.wa:focus-visible .wa__txt{ max-width:140px }

/* con el carrito o el checkout abiertos se quita del medio */
body.is-cart .wa,body.is-co .wa{ opacity:0; pointer-events:none; transform:scale(.85) }

/* ── checkout ──────────────────────────────────────────── */
.co{
  position:fixed; inset:0; z-index:100; overflow-y:auto;
  background:var(--papel); visibility:hidden; opacity:0;
  transition:opacity .28s var(--ease),visibility .28s var(--ease);
}
.co.is-on{ visibility:visible; opacity:1 }

.co__head{ border-bottom:1px solid var(--linea); background:var(--papel); position:sticky; top:0; z-index:2 }
.co__headin{ display:flex; align-items:center; justify-content:space-between; padding-block:14px }
.co__headin img{ width:auto; height:34px }

.co__body{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px); align-items:start;
  padding-block:clamp(28px,4vw,52px) clamp(48px,7vw,90px);
}
.co__title{ font-size:clamp(1.7rem,3.4vw,2.5rem); margin-bottom:26px; letter-spacing:-.03em }

.fs{ border:0; padding:0; margin:0 0 26px }
.fs__leg{
  padding:0 0 12px; font-family:var(--f-d); font-size:12px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--campo-txt);
}
.fld{ margin-bottom:14px }
.fld__row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.fld label{ display:block; margin-bottom:6px; font-size:14px; font-weight:500 }
.fld__opt{ color:var(--corteza); font-weight:400 }
.fld input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1.5px solid var(--linea); background:var(--nieve); color:var(--hoja);
  transition:border-color .18s var(--ease);
}
.fld input:focus{ outline:none; border-color:var(--campo-btn); box-shadow:0 0 0 3px rgba(23,129,47,.14) }
.fld input[aria-invalid="true"]{ border-color:var(--frambuesa) }
.fld__err{ min-height:0; margin-top:5px; font-size:13px; color:var(--frambuesa) }
.fld__err:empty{ margin-top:0 }

.opts{ display:grid; gap:9px; margin-bottom:16px }
.opt{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:13px 15px; border-radius:14px;
  border:1.5px solid var(--linea); background:var(--nieve);
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.opt:hover{ border-color:var(--corteza) }
.opt:has(input:checked){ border-color:var(--campo-btn); background:#F2FAF3 }
.opt:has(input:focus-visible){ box-shadow:0 0 0 3px rgba(23,129,47,.2) }
.opt input{ accent-color:var(--campo-btn); width:18px; height:18px; flex:none; margin:0 }
.opt__txt{ flex:1; min-width:0 }
.opt__txt b{ display:block; font-size:15px; font-weight:600; line-height:1.3 }
.opt__txt span{ display:block; font-size:13.4px; color:var(--corteza); line-height:1.4 }
.opt__precio{ font-family:var(--f-d); font-weight:700; font-variant-numeric:tabular-nums }
.opt__marca{
  font-family:var(--f-d); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--corteza);
}

.pago{
  display:flex; align-items:center; gap:13px;
  padding:15px 16px; border-radius:14px;
  border:1.5px solid var(--linea); background:var(--nieve);
}
.pago__ico{ width:24px; height:24px; flex:none; color:var(--campo-txt) }
.pago__txt{ flex:1; min-width:0 }
.pago__txt b{ display:block; font-size:15px; font-weight:600; line-height:1.3 }
.pago__txt span{ display:block; margin-top:2px; font-size:13.4px; color:var(--corteza); line-height:1.45 }
.pago__marca{
  flex:none; align-self:flex-start;
  font-family:var(--f-d); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--corteza);
}

.co__aviso{ font-size:14.5px; line-height:1.5; color:var(--frambuesa) }
.co__aviso:empty{ display:none }
.co__aviso.is-info{ color:var(--corteza) }

.co__resumen{
  position:sticky; top:96px; padding:clamp(20px,2.4vw,28px);
  border-radius:var(--r); background:var(--nieve);
  border:1px solid var(--linea-2); box-shadow:var(--shadow-1);
}
.co__resumen h3{ font-size:19px; margin-bottom:16px; letter-spacing:-.02em }
.res__items{ display:grid; gap:12px; margin-bottom:16px }
.res__item{ display:flex; gap:11px; align-items:center }
.res__item img{ width:46px; height:46px; object-fit:contain; flex:none }
.res__item div{ flex:1; min-width:0 }
.res__item b{ display:block; font-size:14.4px; font-weight:600; line-height:1.3 }
.res__item span{ font-size:12.8px; color:var(--corteza) }
.res__item i{ font-style:normal; font-family:var(--f-d); font-weight:700; font-size:14px; font-variant-numeric:tabular-nums }

.res__tot{ margin:0 0 18px; padding-top:14px; border-top:1px solid var(--linea) }
.res__tot div{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px }
.res__tot dt{ font-size:14.6px; color:var(--corteza) }
.res__tot dd{ margin:0; font-family:var(--f-d); font-weight:700; font-size:15px; font-variant-numeric:tabular-nums }
.res__grand{ padding-top:10px; border-top:1px solid var(--linea) }
.res__grand dt{ font-size:16px; color:var(--hoja); font-weight:600 }
.res__grand dd{ font-size:25px; font-weight:800; letter-spacing:-.025em }

.res__seguro{
  display:flex; gap:8px; margin-top:14px;
  font-size:12.6px; line-height:1.45; color:var(--corteza);
}
.res__seguro svg{ width:16px; height:16px; flex:none; color:var(--campo-txt); margin-top:1px }

@media (max-width:900px){
  .co__body{ grid-template-columns:1fr }
  .co__resumen{ position:static; order:-1 }
}
@media (max-width:520px){
  .fld__row{ grid-template-columns:1fr }
}

/* ── toast ─────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:26px; z-index:95;
  display:flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:999px;
  background:var(--hoja); color:var(--papel);
  font-family:var(--f-d); font-size:14.5px; font-weight:600;
  box-shadow:0 18px 40px -14px rgba(7,42,23,.6);
  transform:translate(-50%,150%); opacity:0; pointer-events:none;
  transition:transform .4s var(--ease),opacity .3s var(--ease);
}
.toast.is-on{ transform:translate(-50%,0); opacity:1 }
.toast svg{ width:18px; height:18px; color:#8FD79F }

/* ── scroll reveal ─────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease),transform .7s var(--ease) }
.reveal.is-in{ opacity:1; transform:none }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s }
.reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }

/* ── responsive ────────────────────────────────────────── */
@media (max-width:1080px){
  .grid{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .benefits__list{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .foot__in{ grid-template-columns:1fr 1fr; gap:36px }
  .packs__list{ grid-template-columns:1fr }
  .pack{ grid-template-columns:minmax(0,.6fr) minmax(0,1fr) }
  /* en una sola columna el botón se estiraba media pantalla */
  .pack .card__acciones{ max-width:370px }
}

@media (max-width:900px){
  :root{ --navh:66px }
  .nav__links{
    position:fixed; inset:var(--navh) 0 auto; flex-direction:column; align-items:stretch;
    gap:0; padding:8px var(--pad) 20px; background:var(--papel);
    border-bottom:1px solid var(--linea); box-shadow:var(--shadow-1);
    transform:translateY(-135%); transition:transform .34s var(--ease); z-index:-1;
  }
  .nav.is-open .nav__links{ transform:none }
  .nav__links a{ padding:14px 0; border-bottom:1px solid var(--linea-2); font-size:17px }
  .nav__links a::after{ display:none }
  .nav__actions{ margin-left:auto }
  .nav__cta{ display:none }
  .iconbtn--menu{ display:grid }
  .nav__logo img{ height:33px }

  .hero__in{ grid-template-columns:1fr; gap:8px }
  .hero__art{ order:-1; max-width:440px; margin-inline:auto }
  .hero__copy{ text-align:left }
  .trust{ grid-template-columns:1fr; gap:14px }

  .ship{ grid-template-columns:1fr }
  .ship__art{ order:-1; padding:26px 20px 0 }
  .ship__art img{ width:100% }

  .mayor__caja{ grid-template-columns:1fr }
  .mayor__art{ padding:28px 20px 0 }
  .mayor__art img{ max-width:250px }
  .mayor__copy{ padding:clamp(26px,4vw,40px) }
}

@media (max-width:700px){
  body{ font-size:16px }
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
  .card{ padding:12px 12px 14px }
  .card__name{ font-size:16.5px }
  .card__note{ display:none }
  .card__price{ font-size:18px }
  .btn--add{ padding:10px 12px; font-size:13px }
  .btn--add svg{ display:none }
  .benefits__list{ grid-template-columns:1fr; gap:0 }
  .ben{ padding-block:22px; border-top:1px solid var(--linea) }
  .ben:first-child{ border-top:2px solid var(--hoja) }
  .ben__icon{ margin-bottom:11px }
  .foot__in{ grid-template-columns:1fr; gap:34px }
  .landing__cta .btn{ flex:1 1 100% }

  /* el pack se apila: la foto arriba y el contenido debajo */
  .pack{ grid-template-columns:1fr; gap:14px; padding:12px 12px 16px }
  .pack__art{ aspect-ratio:16/10 }
  .pack__art img{ width:74% }
  .pack__name{ font-size:18px }
  .pack__note{ display:none }
  .pack__ahorro{ top:12px; left:12px }

  .mayor__acciones{ gap:10px }
  .mayor__acciones .btn--wa,.mayor__mail{ flex:1 1 100%; justify-content:center }
  /* el aviso sube para no chocar con el botón de WhatsApp */
  .toast{ bottom:88px }
  .wa{ height:52px; padding:0 13px }
  .wa svg{ width:24px; height:24px }
}

@media (max-width:359px){
  .grid{ grid-template-columns:1fr }
  .card__note{ display:block }
}

/* ── reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html:focus-within{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none }
  .fall{ display:none }
  .hero__bowl{ animation:none }
}