/* ═══════════════════════════════════════════════════════════════
   TROPICAL PULP — hoja de estilos
   1. Variables · 2. Base · 3. Utilidades · 4. Botones
   5. Topbar/Header · 6. Hero · 7. Beneficios · 8. Ficha producto
   9. Catálogo · 10. Recetas · 11. Nosotros · 12. Negocios
   13. Testimonios · 14. FAQ · 15. CTA final · 16. Footer · 17. FAB
   18. Responsive
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────── 1. VARIABLES ─────────────── */
:root{
  --verde-900:#0d2d16;
  --verde-800:#14401f;
  --verde-700:#1a5228;
  --verde-600:#1f7a38;
  --verde-500:#25a049;
  --dorado:#f2a900;
  --dorado-claro:#ffc93c;
  --dorado-oscuro:#d18f00;
  --vino:#8e1b12;
  --crema:#faf6ec;
  --crema-2:#f2ebda;
  --texto:#22302a;
  --texto-suave:#5d6d63;
  --blanco:#fff;
  --linea:#e4dcc8;

  --wrap:1200px;
  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;
  --sombra:0 4px 18px rgba(13,45,22,.08);
  --sombra-md:0 10px 34px rgba(13,45,22,.13);
  --sombra-lg:0 24px 60px rgba(13,45,22,.20);

  --fuente:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --script:'Kaushan Script',cursive;

  --header-h:82px;
}

/* ─────────────── 2. BASE ─────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--fuente);
  font-size:16px;
  line-height:1.65;
  color:var(--texto);
  background:var(--blanco);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{margin:0;line-height:1.18;font-weight:800;letter-spacing:-.01em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:3px solid var(--dorado);outline-offset:3px;border-radius:4px}

/* ─────────────── 3. UTILIDADES ─────────────── */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.seccion{padding:86px 0}
.seccion--crema{background:var(--crema)}
.solo-desktop{display:inline}

/* Título de sección con hojitas doradas a los lados */
.titulo-sec{text-align:center;max-width:720px;margin:0 auto 54px}
.titulo-sec h2{
  font-size:clamp(1.6rem,3.4vw,2.2rem);
  color:var(--verde-800);
  text-transform:uppercase;
  letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;gap:18px;
}
.titulo-sec p{margin:14px 0 0;color:var(--texto-suave);font-size:1.02rem}
.hoja-izq,.hoja-der{
  flex:0 0 34px;height:22px;
  background:var(--dorado);
  -webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M2 20c8 4 18 2 24-4 4-4 6-10 6-14-6 2-13 3-18 7-4 3-7 7-8 11-2-3-4-5-6-6 1 2 2 4 2 6z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M2 20c8 4 18 2 24-4 4-4 6-10 6-14-6 2-13 3-18 7-4 3-7 7-8 11-2-3-4-5-6-6 1 2 2 4 2 6z'/%3E%3C/svg%3E");
}
.hoja-der{transform:scaleX(-1)}

.etiqueta{
  display:inline-block;
  background:var(--dorado);color:var(--verde-900);
  font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 14px;border-radius:100px;margin-bottom:16px;
}

/* ─────────────── 4. BOTONES ─────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 26px;border-radius:100px;
  font-size:.86rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:17px 34px;font-size:.92rem}
.btn--wa{background:var(--verde-600);color:#fff;box-shadow:0 6px 20px rgba(31,122,56,.32)}
.btn--wa:hover{background:var(--verde-500);box-shadow:0 10px 26px rgba(31,122,56,.42)}
.btn--verde{background:var(--verde-800);color:#fff;box-shadow:0 6px 20px rgba(20,64,31,.28)}
.btn--verde:hover{background:var(--verde-700)}
.btn--dorado{background:var(--dorado);color:var(--verde-900);box-shadow:0 6px 20px rgba(242,169,0,.36)}
.btn--dorado:hover{background:var(--dorado-claro)}
.btn svg{flex:0 0 auto}

/* ─────────────── 5. TOPBAR + HEADER ─────────────── */
.topbar{background:var(--verde-800);color:rgba(255,255,255,.9);font-size:.74rem;letter-spacing:.05em}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:38px}
.topbar__claims{display:flex;gap:26px;text-transform:uppercase;font-weight:600}
.topbar__claims li{display:flex;align-items:center;gap:8px}
.rombo{width:7px;height:7px;background:var(--dorado);transform:rotate(45deg);flex:0 0 auto}
.topbar__social{display:flex;align-items:center;gap:12px}
.topbar__social a{opacity:.85;transition:opacity .18s,color .18s}
.topbar__social a:hover{opacity:1;color:var(--dorado-claro)}

.header{position:sticky;top:0;z-index:900;background:#fff;box-shadow:0 1px 0 var(--linea);transition:box-shadow .25s}
.header.is-fija{box-shadow:0 6px 26px rgba(13,45,22,.11)}
.header__in{display:flex;align-items:center;gap:24px;min-height:var(--header-h)}
.header__logo img{width:126px;height:auto}
.nav{display:flex;gap:26px;margin-left:auto}
.nav__link{
  position:relative;font-size:.79rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--verde-800);padding:6px 0;transition:color .18s;
  white-space:nowrap;
}
.nav__link::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2.5px;
  background:var(--dorado);transition:right .25s ease;
}
.nav__link:hover::after,.nav__link.is-active::after{right:0}
.header__cta{margin-left:auto;flex:0 0 auto}
.nav+.header__cta{margin-left:8px}
.burger{display:none;margin-left:auto;color:var(--verde-800);padding:6px}
.burger__cerrar{display:none}
.header.menu-abierto .burger__abrir{display:none}
.header.menu-abierto .burger__cerrar{display:block}

/* ─────────────── 6. HERO ─────────────── */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(660px,86vh);display:flex;align-items:center}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.72) 34%,rgba(255,255,255,.18) 56%,rgba(255,255,255,0) 72%);
}
.hero__in{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:30px;padding-block:52px}

/* "De" — arranca el titular y entra en el h1: se lee "De Nuestra Cosecha a tu
   vaso". No va en versalitas: en el arte del cliente es una palabra suelta y
   grande, ~0.7 del cuerpo de la script. */
.hero__ante{
  margin:0;font-size:clamp(1.9rem,4.4vw,3.1rem);font-weight:500;
  line-height:1;letter-spacing:.005em;color:var(--verde-800);
  text-shadow:0 3px 16px rgba(255,255,255,.7);
}
.hero__titulo{display:flex;flex-direction:column;margin:2px 0 0}
.script{
  font-family:var(--script);font-weight:400;
  font-size:clamp(3rem,7.4vw,5.2rem);line-height:1.02;
  color:var(--verde-700);letter-spacing:0;
  text-shadow:0 3px 16px rgba(255,255,255,.75);
}
.hero__post{
  font-size:clamp(1.1rem,2.4vw,1.6rem);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--verde-800);margin-top:2px;
}
.hero__sub{
  margin:20px 0 26px;font-size:clamp(1rem,1.5vw,1.1rem);
  color:#37493f;max-width:460px;text-shadow:0 1px 10px rgba(255,255,255,.8);
}
.hero__sub b{color:var(--verde-800)}

.sellos{display:flex;gap:0;margin-top:36px;max-width:470px}
.sellos li{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;padding:0 12px;color:var(--verde-800);
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;
}
.sellos li+li{border-left:1.5px solid rgba(20,64,31,.22)}
.sellos svg{color:var(--verde-700)}

.hero__producto{position:relative;display:flex;justify-content:center;align-items:flex-end}
.hero__bolsa{
  width:min(100%,392px);
  filter:drop-shadow(0 26px 40px rgba(13,45,22,.42));
  animation:flotar 6s ease-in-out infinite;
}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
.hero__fruta{
  position:absolute;left:-6%;bottom:-4%;width:44%;z-index:2;
  filter:drop-shadow(0 14px 22px rgba(13,45,22,.34));
  pointer-events:none;
}
@media(prefers-reduced-motion:reduce){.hero__bolsa{animation:none}}

/* ─────────────── 7. BENEFICIOS ─────────────── */
.beneficios{display:grid;grid-template-columns:repeat(4,1fr)}
.beneficios li{padding:8px 30px;text-align:center}
.beneficios li+li{border-left:1.5px solid var(--linea)}
.beneficios svg{color:var(--verde-700);margin:0 auto 18px;display:block}
.beneficios h3{
  font-size:.95rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--verde-800);margin-bottom:12px;
}
.beneficios p{color:var(--texto-suave);font-size:.92rem;line-height:1.7}

/* ─────────────── 8. FICHA DE PRODUCTO ─────────────── */
.ficha{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;align-items:center}

.ficha__marco{
  background:linear-gradient(160deg,var(--crema) 0%,var(--crema-2) 100%);
  border-radius:var(--r-lg);padding:34px;display:grid;place-items:center;
  min-height:430px;border:1px solid var(--linea);
}
.ficha__marco img{max-height:400px;width:auto;filter:drop-shadow(0 18px 30px rgba(13,45,22,.24))}
.ficha__miniaturas{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.mini{
  background:var(--crema);border:2px solid var(--linea);border-radius:var(--r-md);
  padding:8px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;
  transition:border-color .18s,transform .18s;
}
.mini img{max-height:100%;width:auto;object-fit:contain}
.mini:hover{transform:translateY(-3px)}
.mini.is-activa{border-color:var(--dorado);background:#fff}

.ficha__info h2{font-size:clamp(1.75rem,3.6vw,2.5rem);color:var(--verde-800);margin-bottom:18px}
.ficha__info h2 small{font-size:.52em;font-weight:600;color:var(--texto-suave);letter-spacing:.01em}
.ficha__desc{color:var(--texto-suave);font-size:1rem;line-height:1.78}
.ficha__desc b{color:var(--verde-800)}

.ficha__specs{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  margin:26px 0;border:1px solid var(--linea);border-radius:var(--r-md);overflow:hidden;
}
.ficha__specs li{padding:13px 18px;background:var(--crema);border-bottom:1px solid var(--linea)}
.ficha__specs li:nth-child(odd){border-right:1px solid var(--linea)}
.ficha__specs li:nth-last-child(-n+2){border-bottom:0}
.ficha__specs b{
  display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--texto-suave);font-weight:700;margin-bottom:2px;
}
.ficha__specs span{font-size:.92rem;font-weight:600;color:var(--verde-800)}

.ficha__ventajas{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:28px}
.ficha__ventajas li{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:var(--verde-800)}
.ficha__ventajas svg{color:var(--verde-500);flex:0 0 auto}

/* Tabla nutricional — plegada por defecto para no alargar la ficha */
.nutri{
  background:var(--crema);border:1px solid var(--linea);
  border-radius:var(--r-md);overflow:hidden;margin-bottom:26px;
  transition:border-color .2s,box-shadow .2s;
}
.nutri[open]{border-color:var(--dorado);box-shadow:var(--sombra);background:#fff}
.nutri summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:15px 20px;cursor:pointer;list-style:none;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;
  font-weight:700;color:var(--verde-800);
}
.nutri summary::-webkit-details-marker{display:none}
.nutri summary svg{flex:0 0 auto;color:var(--dorado-oscuro);transition:transform .25s}
.nutri[open] summary svg{transform:rotate(180deg)}
.nutri__cuerpo{padding:0 20px 18px}
.nutri__porcion{font-size:.82rem;font-weight:700;color:var(--verde-800);margin-bottom:10px}
.nutri__tabla{width:100%;border-collapse:collapse;font-size:.84rem}
.nutri__tabla th,.nutri__tabla td{
  padding:6px 4px;text-align:right;border-bottom:1px solid var(--linea);font-weight:600;
}
.nutri__tabla thead th{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--texto-suave);border-bottom-width:2px;
}
.nutri__tabla tbody th{text-align:left;font-weight:600;color:var(--texto)}
.nutri__tabla tbody th.es-sub{padding-left:16px;font-weight:500;color:var(--texto-suave)}
.nutri__tabla tbody tr:last-child th,.nutri__tabla tbody tr:last-child td{border-bottom:0}
.nutri__pie{font-size:.72rem;line-height:1.6;color:var(--texto-suave);margin:12px 0 0}

.ficha__acciones{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ficha__nota{
  display:flex;align-items:flex-start;gap:8px;margin:0;
  font-size:.87rem;color:var(--texto-suave);line-height:1.5;
}
.ficha__nota svg{color:var(--dorado-oscuro);flex:0 0 auto;margin-top:4px}
.ficha__nota a{color:var(--verde-600);font-weight:700;border-bottom:1.5px solid var(--dorado)}

/* ─────────────── 9. CATÁLOGO (multi-producto) ─────────────── */
.catalogo{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:26px}
.producto{
  background:#fff;border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:22px 18px;text-align:center;transition:transform .22s,box-shadow .22s;
  display:flex;flex-direction:column;
}
.producto:hover{transform:translateY(-6px);box-shadow:var(--sombra-md)}
.producto__img{height:190px;display:grid;place-items:center;margin-bottom:16px}
.producto__img img{max-height:100%;width:auto;filter:drop-shadow(0 10px 18px rgba(13,45,22,.18))}
.producto h3{font-size:1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--verde-800);margin-bottom:6px}
.producto p{font-size:.85rem;color:var(--texto-suave);margin-bottom:16px}
.producto .btn{margin-top:auto;width:100%}
.producto--pronto{opacity:.62}
.producto--pronto .etiqueta{background:var(--linea);color:var(--texto-suave)}

/* ─────────────── 10. RECETAS ─────────────── */
.recetas{position:relative;background:var(--dorado);padding:64px 0;overflow:hidden}
.recetas__fruta{
  position:absolute;left:-72px;top:50%;transform:translateY(-50%);
  width:270px;opacity:.95;pointer-events:none;
  filter:drop-shadow(0 12px 22px rgba(120,80,0,.25));
}
.recetas__in{display:grid;grid-template-columns:.85fr 2fr;gap:44px;align-items:center;position:relative}
.recetas__texto{padding-left:62px}
.recetas__texto h2{
  font-size:clamp(1.6rem,3.4vw,2.15rem);color:var(--verde-800);
  text-transform:uppercase;letter-spacing:-.01em;margin-bottom:14px;
}
.recetas__texto p{color:#6b4e00;font-size:.95rem;margin-bottom:16px;font-weight:500}
.recetas__pista{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.55);border:1.5px dashed rgba(20,64,31,.35);
  border-radius:100px;padding:9px 17px;
  font-size:.79rem;font-weight:700;color:var(--verde-800);margin:0;
}
.recetas__pista svg{flex:0 0 auto;color:var(--verde-700)}

.recetas__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.recetas__grid li{display:flex}
.receta-card{
  position:relative;width:100%;border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--sombra-md);aspect-ratio:1;padding:0;display:block;
  transition:transform .22s,box-shadow .22s;
}
.receta-card:hover,.receta-card:focus-visible{transform:translateY(-5px);box-shadow:var(--sombra-lg)}
.receta-card img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.receta-card:hover img{transform:scale(1.07)}
.receta-card__nombre{
  position:absolute;left:0;right:0;bottom:0;padding:26px 12px 11px;
  background:linear-gradient(to top,rgba(13,45,22,.9),transparent);
  color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;text-align:center;
}
.receta-card__ver{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(13,45,22,.62);color:#fff;
  font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  opacity:0;transition:opacity .25s ease;
}
.receta-card:hover .receta-card__ver,
.receta-card:focus-visible .receta-card__ver{opacity:1}
/* En táctil no hay hover: la pista se muestra siempre, discreta */
@media(hover:none){
  .receta-card__ver{
    inset:auto 8px auto auto;top:8px;left:auto;
    background:rgba(13,45,22,.78);border-radius:100px;padding:6px 12px;
    opacity:1;font-size:.66rem;
  }
}

/* ─────────────── 10b. MODAL DE RECETA ─────────────── */
.modal{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;padding:24px;
  opacity:0;transition:opacity .28s ease;
}
/* OBLIGATORIO: `display:grid` gana al display:none que trae [hidden] por defecto.
   Sin esta línea el modal cerrado sigue ocupando la pantalla completa y,
   aunque sea invisible, se traga todos los clics de la página. */
.modal[hidden]{display:none}
.modal.is-abierto{opacity:1}
.modal__fondo{position:absolute;inset:0;background:rgba(7,26,13,.72);backdrop-filter:blur(3px)}
.modal__caja{
  position:relative;z-index:2;
  width:min(100%,940px);max-height:min(88vh,860px);
  background:#fff;border-radius:var(--r-lg);overflow:auto;overscroll-behavior:contain;
  box-shadow:0 34px 80px rgba(0,0,0,.42);
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  transform:translateY(22px) scale(.97);transition:transform .3s cubic-bezier(.2,.9,.3,1);
}
.modal.is-abierto .modal__caja{transform:none}

.modal__cerrar{
  position:absolute;top:14px;right:14px;z-index:5;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--verde-800);
  display:grid;place-items:center;box-shadow:0 3px 12px rgba(0,0,0,.2);
  transition:background .18s,transform .18s;
}
.modal__cerrar:hover{background:#fff;transform:rotate(90deg)}

.modal__media{position:sticky;top:0;align-self:start;height:100%;min-height:300px;background:var(--crema-2)}
.modal__media img{width:100%;height:100%;object-fit:cover;min-height:300px}

.modal__cuerpo{padding:34px 34px 30px}
.modal__cuerpo h3{font-size:clamp(1.4rem,2.6vw,1.85rem);color:var(--verde-800);margin-bottom:10px}
.modal__intro{color:var(--texto-suave);font-size:.95rem;line-height:1.7;margin-bottom:20px}

.modal__meta{
  display:flex;gap:0;margin-bottom:26px;
  background:var(--crema);border:1px solid var(--linea);border-radius:var(--r-md);overflow:hidden;
}
.modal__meta li{
  flex:1;display:flex;align-items:center;gap:9px;padding:12px 14px;min-width:0;
}
.modal__meta li+li{border-left:1px solid var(--linea)}
.modal__meta svg{color:var(--dorado-oscuro);flex:0 0 auto}
/* El <span> lleva el estilo de la ETIQUETA ("tiempo", "rinde"…) y el <b> de dentro
   lo revierte para el valor — de ahí el text-transform:none, o saldría "15 MIN + 4 H". */
.modal__meta span{
  display:flex;flex-direction:column;line-height:1.3;min-width:0;
  font-size:.66rem;color:var(--texto-suave);text-transform:uppercase;letter-spacing:.06em;
}
.modal__meta b{
  font-size:.82rem;color:var(--verde-800);font-weight:700;
  text-transform:none;letter-spacing:0;
}

.modal__cols{display:grid;grid-template-columns:1fr;gap:26px}
.modal__bloque h4{
  font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--dorado-oscuro);margin-bottom:14px;
  padding-bottom:9px;border-bottom:2px solid var(--crema-2);
}
.modal__ingredientes li{
  position:relative;padding-left:22px;margin-bottom:9px;
  font-size:.92rem;color:var(--texto);line-height:1.55;
}
.modal__ingredientes li::before{
  content:"";position:absolute;left:3px;top:.55em;
  width:7px;height:7px;border-radius:50%;background:var(--dorado);
}
.modal__pasos{counter-reset:paso;padding:0;margin:0;list-style:none}
.modal__pasos li{
  counter-increment:paso;position:relative;padding-left:38px;margin-bottom:14px;
  font-size:.92rem;color:var(--texto-suave);line-height:1.65;
}
.modal__pasos li::before{
  content:counter(paso);position:absolute;left:0;top:-1px;
  width:25px;height:25px;border-radius:50%;
  background:var(--verde-700);color:#fff;
  display:grid;place-items:center;font-size:.74rem;font-weight:800;
}
.modal__tip{
  margin:24px 0 0;padding:15px 18px;
  background:var(--crema);border-left:4px solid var(--dorado);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.89rem;color:var(--texto-suave);line-height:1.6;font-style:italic;
}
.modal__tip::before{content:"Tip · ";font-style:normal;font-weight:800;color:var(--verde-800)}
.modal__cta{margin-top:24px;width:100%}

@media(prefers-reduced-motion:reduce){
  .modal,.modal__caja{transition:none}
  .receta-card img{transition:none}
}

/* ─────────────── 11. NOSOTROS ─────────────── */
.nosotros{display:grid;grid-template-columns:1fr 1fr;background:var(--crema)}
.nosotros__texto{display:flex;align-items:center;justify-content:flex-end;padding:76px 56px 76px 24px}
.nosotros__cont{max-width:520px}
.nosotros__cont h2{
  font-size:clamp(1.6rem,3.4vw,2.15rem);color:var(--verde-800);
  text-transform:uppercase;margin-bottom:20px;
}
.nosotros__cont p{color:var(--texto-suave);line-height:1.8;margin-bottom:16px}
.nosotros__cont .btn{margin-top:10px}
.nosotros__img img{width:100%;height:100%;object-fit:cover;min-height:420px}

/* ─────────────── 12. NEGOCIOS ─────────────── */
.negocios{background:var(--verde-800);color:#fff;padding:76px 0}
.negocios__in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.negocios__img img{border-radius:var(--r-lg);box-shadow:var(--sombra-lg);width:100%;height:100%;object-fit:cover;max-height:400px}
.negocios__icono{color:var(--dorado);margin-bottom:18px}
.negocios__texto h2{font-size:clamp(1.6rem,3.4vw,2.15rem);text-transform:uppercase;margin-bottom:18px}
.negocios__texto p{color:rgba(255,255,255,.82);line-height:1.8;margin-bottom:22px}
.negocios__texto p b{color:var(--dorado-claro)}
.negocios__lista{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:28px}
.negocios__lista li{display:flex;align-items:center;gap:9px;font-size:.9rem;font-weight:600}
.negocios__lista svg{color:var(--dorado);flex:0 0 auto}

/* ─────────────── 13. TESTIMONIOS ─────────────── */
.testimonios-sec{position:relative;overflow:hidden}
.testimonios-sec__deco{
  position:absolute;right:-130px;top:-90px;width:340px;
  opacity:.13;transform:rotate(14deg);pointer-events:none;user-select:none;
}
.testimonios-sec>.wrap{position:relative}
.testimonios{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.testimonio{
  position:relative;background:#fff;border:1px solid var(--linea);
  border-radius:var(--r-lg);padding:32px 28px 26px;box-shadow:var(--sombra);
  display:flex;flex-direction:column;
}
.testimonio__comillas{position:absolute;top:20px;right:22px;color:var(--crema-2)}
.estrellas{display:flex;gap:3px;color:var(--dorado);margin-bottom:14px}
.testimonio p{color:var(--texto-suave);font-size:.95rem;line-height:1.75;font-style:italic;margin-bottom:22px}
.testimonio footer{display:flex;align-items:center;gap:13px;margin-top:auto;padding-top:18px;border-top:1px solid var(--linea)}
.testimonio__ini{
  flex:0 0 44px;height:44px;border-radius:50%;
  background:var(--verde-700);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.86rem;letter-spacing:.03em;
}
.testimonio footer b{display:block;font-size:.92rem;color:var(--verde-800)}
.testimonio footer small{color:var(--texto-suave);font-size:.8rem}

/* ─────────────── 14. FAQ ─────────────── */
.faq{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq__item{
  background:var(--crema);border:1px solid var(--linea);
  border-radius:var(--r-md);overflow:hidden;transition:border-color .2s,box-shadow .2s;
}
.faq__item[open]{border-color:var(--dorado);box-shadow:var(--sombra);background:#fff}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 24px;cursor:pointer;list-style:none;
  font-weight:700;font-size:.98rem;color:var(--verde-800);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary svg{flex:0 0 auto;color:var(--dorado-oscuro);transition:transform .25s}
.faq__item[open] summary svg{transform:rotate(180deg)}
.faq__cuerpo{padding:0 24px 22px}
.faq__cuerpo p{color:var(--texto-suave);line-height:1.78;font-size:.95rem}
.faq__cuerpo a{color:var(--verde-600);font-weight:700;border-bottom:1.5px solid var(--dorado)}

/* ─────────────── 15. CTA FINAL ─────────────── */
.cta-final{position:relative;background:var(--verde-800);padding:76px 0;overflow:hidden;text-align:center}
.cta-final::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 120%,rgba(242,169,0,.20),transparent 62%);
}
.cta-final__splash{
  position:absolute;right:-90px;top:-70px;width:390px;opacity:.16;
  transform:rotate(-16deg);pointer-events:none;
}
.cta-final__in{position:relative;z-index:2}
.cta-final h2{font-size:clamp(1.6rem,3.6vw,2.35rem);color:#fff;margin-bottom:14px}
.cta-final p{color:rgba(255,255,255,.8);margin-bottom:30px}

/* ─────────────── 16. FOOTER ─────────────── */
.footer{background:var(--verde-900);color:rgba(255,255,255,.76);font-size:.92rem}
.footer__in{
  display:grid;grid-template-columns:1.15fr .8fr .95fr 1.1fr;
  gap:44px;padding-block:60px 46px;
}
.footer__marca img{width:170px;margin-bottom:16px}
.footer__marca p{font-size:.88rem;line-height:1.7}
.footer__social{display:flex;gap:12px;margin-top:18px}
.footer__social a{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.09);display:grid;place-items:center;
  transition:background .2s,color .2s,transform .2s;
}
.footer__social a:hover{background:var(--dorado);color:var(--verde-900);transform:translateY(-2px)}
.footer__col h3{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--dorado);margin-bottom:20px;
}
.footer__col ul{display:flex;flex-direction:column;gap:11px}
.footer__col a{transition:color .18s,padding-left .18s}
.footer__col a:hover{color:var(--dorado-claro)}
.footer__col nav a:hover,.footer__col ul a:hover{padding-left:4px}
.footer__contacto li{display:flex;align-items:flex-start;gap:11px}
.footer__contacto svg{color:var(--dorado);flex:0 0 auto;margin-top:3px}
.footer__escribenos p{font-size:.88rem;line-height:1.7;margin-bottom:20px}
.footer__legal{border-top:1px solid rgba(255,255,255,.1);padding:20px 0}
.footer__legal p{margin:0;font-size:.82rem;text-align:center;color:rgba(255,255,255,.5)}

/* ─────────────── 17. BOTÓN FLOTANTE ─────────────── */
/* Oculto sobre el hero: allí ya hay un CTA de WhatsApp y en móvil se solapaban.
   Aparece al pasar la primera pantalla (lo activa main.js). */
.fab{
  position:fixed;right:22px;bottom:22px;z-index:950;
  display:flex;align-items:center;gap:0;
  height:60px;padding:0 15px;border-radius:100px;
  background:var(--verde-500);color:#fff;
  box-shadow:0 10px 30px rgba(37,160,73,.46);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);pointer-events:none;
  transition:gap .3s ease,padding .3s ease,transform .28s ease,background .2s,opacity .28s ease,visibility .28s;
}
.fab.is-visible{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.fab span{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-size:.86rem;font-weight:700;transition:max-width .35s ease;
}
.fab.is-visible:hover{gap:11px;padding-right:22px;background:var(--verde-600);transform:translateY(-3px)}
.fab:hover span{max-width:200px}

/* ═══════════════ 18. RESPONSIVE ═══════════════ */

@media(max-width:1080px){
  .nav{gap:17px}
  .nav__link{font-size:.72rem}
  .header__cta{padding:11px 18px;font-size:.75rem}
  .recetas__texto{padding-left:44px}
  .recetas__fruta{width:210px;left:-72px}
}

@media(max-width:940px){
  :root{--header-h:70px}
  .seccion{padding:64px 0}

  /* Menú móvil */
  .burger{display:block}
  .header__cta{display:none}
  /* absolute + top:100% se ancla al alto REAL del header.
     Con `fixed` + top:var(--header-h) el panel tapaba el logo cuando el
     header crecía por encima de esa medida. */
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;margin:0;
    background:#fff;padding:8px 24px 24px;
    box-shadow:0 18px 34px rgba(13,45,22,.16);
    transform:translateY(-130%);transition:transform .32s cubic-bezier(.4,0,.2,1);
    max-height:calc(100vh - var(--header-h));overflow-y:auto;
    z-index:-1;
  }
  .header.menu-abierto .nav{z-index:1}
  .header.menu-abierto .nav{transform:translateY(0)}
  .nav__link{padding:15px 0;border-bottom:1px solid var(--linea);font-size:.86rem}
  .nav__link::after{display:none}
  .nav__link.is-active{color:var(--dorado-oscuro)}

  .topbar__claims li:nth-child(n+2){display:none}

  /* Hero: el empaque va SOBRE la playa a plena vista y el velo blanco solo
     entra donde empieza el texto. Los cortes van en px y no en %: el punto
     donde tiene que aparecer el blanco lo marca el alto del empaque, no el
     alto total del hero (que cambia con el largo del texto). */
  .hero{min-height:0}
  .hero__bg img{object-position:56% 58%}
  .hero::before{
    background:linear-gradient(to bottom,
      rgba(255,255,255,0)    0px,
      rgba(255,255,255,.08)  360px,
      rgba(255,255,255,.34)  470px,
      rgba(255,255,255,.88)  548px,
      var(--blanco)          600px);
  }
  .hero__in{grid-template-columns:1fr;text-align:center;gap:8px;padding-block:44px 30px}
  .hero__titulo{align-items:center}
  .hero__sub{margin-inline:auto}
  .sellos{margin-inline:auto}
  .hero__producto{order:-1;margin-bottom:6px}
  .hero__bolsa{width:min(74%,280px)}
  .hero__fruta{width:36%;left:2%;bottom:-2%}

  /* Beneficios */
  .beneficios{grid-template-columns:repeat(2,1fr);gap:34px 0}
  .beneficios li{padding:0 20px}
  .beneficios li:nth-child(odd){border-left:0}
  .beneficios li:nth-child(3){border-left:0}

  /* Ficha */
  .ficha{grid-template-columns:1fr;gap:40px}
  .ficha__marco{min-height:0;padding:26px}
  .ficha__marco img{max-height:330px}

  /* Recetas */
  .recetas__in{grid-template-columns:1fr;gap:30px}
  .recetas__texto{padding-left:0;text-align:center}
  .recetas__fruta{display:none}
  .recetas__grid{grid-template-columns:repeat(2,1fr)}

  /* Modal: la foto pasa arriba y el contenido debajo.
     Aquí va FLEX y no grid a propósito: con grid, la fila de la imagen se
     resolvía a 0px y la foto se salía de su fila, quedando debajo del texto. */
  .modal{padding:0}
  .modal__caja{
    display:flex;flex-direction:column;
    width:100%;max-width:none;
    height:100dvh;max-height:100dvh;border-radius:0;
  }
  .modal__media{position:static;height:auto;min-height:0;flex:0 0 auto}
  .modal__media img{height:210px;min-height:0;object-position:center 55%}
  .modal__cuerpo{padding:24px 22px 36px;flex:1 1 auto}

  /* Nosotros */
  .nosotros{grid-template-columns:1fr}
  .nosotros__texto{padding:56px 24px;justify-content:center}
  .nosotros__cont{max-width:none;text-align:center}
  .nosotros__img{order:-1}
  .nosotros__img img{min-height:260px;max-height:300px}

  /* Negocios */
  .negocios__in{grid-template-columns:1fr;gap:36px}
  .negocios__img{order:-1}
  .negocios__lista{justify-content:flex-start}

  /* Testimonios */
  .testimonios{grid-template-columns:1fr;max-width:560px;margin-inline:auto}

  /* Footer */
  .footer__in{grid-template-columns:repeat(2,1fr);gap:36px}
}

/* Mismo corte que el <source> del hero: de aquí para abajo entra la playa
   VERTICAL. El fondo se ancla ARRIBA con alto fijo en vez de estirarse a todo
   el hero. Si cubriera el hero entero —que es más alto que 9:16 porque lleva
   el texto dentro— la imagen se amplía para tapar y la orilla se va por debajo
   del velo blanco: se ven mar y palmeras, pero la arena desaparece.

   🪤 520 px y no 700: por encima de ~520 la 9:16 vuelve a ampliarse de más
   (a 700 px solo quedaban las palmeras). 520 cubre cualquier teléfono — el más
   ancho ronda los 430 — y de ahí para arriba sigue mandando el fondo apaisado. */
@media(max-width:520px){
  .hero__bg{inset:0 0 auto 0;height:660px}
  .hero__bg img{object-position:center top}
}

@media(max-width:620px){
  .wrap{padding-inline:18px}
  .seccion{padding:52px 0}
  .solo-desktop{display:none}

  .topbar__claims li{font-size:.68rem}
  .topbar__social span{display:none}

  /* Los títulos deben caber en UNA línea: si el texto envuelve, el h2 flex
     empuja las hojitas a los extremos y quedan sueltas del título. */
  .titulo-sec{margin-bottom:38px}
  .titulo-sec h2{gap:9px;font-size:1.12rem;letter-spacing:0}
  .hoja-izq,.hoja-der{flex-basis:20px;height:14px}

  .hero__ante{font-size:clamp(1.9rem,9.6vw,2.7rem)}
  .hero__post{font-size:1.06rem;letter-spacing:.14em}
  .script{font-size:clamp(2.6rem,13vw,3.4rem)}
  .hero__sub{font-size:.96rem}
  /* En pantallas estrechas el texto del botón debe poder partirse:
     con nowrap, "Consultar precio y disponibilidad" desbordaba el viewport. */
  .btn{white-space:normal;text-align:center;line-height:1.35}
  .btn--lg{padding:15px 24px;font-size:.82rem}
  .sellos li{font-size:.62rem;padding:0 7px}
  .sellos svg{width:22px;height:22px}

  .beneficios{grid-template-columns:1fr;gap:30px}
  .beneficios li{border-left:0 !important;padding:0}

  .ficha__specs{grid-template-columns:1fr}
  .ficha__specs li{border-right:0 !important}
  .ficha__specs li:nth-last-child(2){border-bottom:1px solid var(--linea)}
  .ficha__miniaturas{gap:9px}

  .recetas__grid{gap:12px}
  .recetas__grid span{font-size:.64rem;padding:20px 6px 9px}

  .footer__in{grid-template-columns:1fr;gap:32px;text-align:center;padding-block:46px 34px}
  .footer__marca img{margin-inline:auto}
  .footer__social{justify-content:center}
  .footer__contacto li{justify-content:center}
  .footer__col ul{align-items:center}

  .fab{height:54px;right:16px;bottom:16px}
  .fab span{display:none}
  .cta-final__splash{width:250px;right:-70px}
  .testimonios-sec__deco{width:220px;right:-100px;top:-60px}
}