/* ============================================================
   PLANTESA — Sistema visual premium agrícola (tema único)
   HTML/CSS/JS vanilla · estático · Cloudflare Pages
   Tipografía: Spectral (display) + Manrope (UI)
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --bg:#FAF7EF; --fg:#15281C; --muted:#5d6b58;
  --brand:#0F2E1F; --brand-2:#1E4D33; --brand-3:#4F7D3A;
  --accent:#C29A45; --accent-2:#E3BE5C;
  --card:#FFFFFF; --cream:#F3EAD4; --border:#E7DEC8;
  --on-brand:#F3EAD4; --on-brand-mut:#bcae8e;
  --ink:#0B1A12;
  --shadow: 0 1px 2px rgba(20,30,20,.04), 0 18px 40px -24px rgba(20,40,25,.28);
  --shadow-sm: 0 1px 2px rgba(20,30,20,.05), 0 8px 20px -14px rgba(20,40,25,.25);
  --shadow-lg: 0 2px 6px rgba(20,30,20,.06), 0 40px 80px -40px rgba(15,40,25,.45);
  --radius: 18px; --radius-sm: 12px; --radius-lg: 28px;
  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 48px);
  --sectionY: clamp(64px, 9vw, 130px);
  --serif: "Spectral", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:90px; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.14; margin:0;
  letter-spacing:-.01em; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
::selection{ background:var(--accent); color:#1a1205; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ---------- Bilingüe: mostrar/ocultar bloques por idioma ---------- */
html[lang="en"] [data-lang="es"]{ display:none !important; }
html[lang="es"] [data-lang="en"]{ display:none !important; }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--sectionY); }
.eyebrow{
  font-family:var(--sans); font-weight:700; font-size:.74rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--brand-3);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:26px; height:1.5px; background:var(--accent); display:inline-block; }
.eyebrow.center::after{ content:""; width:26px; height:1.5px; background:var(--accent); display:inline-block; }
.lead{ color:var(--muted); font-size:1.075rem; max-width:62ch; }
.display{ font-size:clamp(2.2rem, 4.6vw, 3.6rem); }
h2.h2{ font-size:clamp(1.9rem, 4vw, 3rem); }
h3.h3{ font-size:clamp(1.25rem,2.2vw,1.6rem); }
.center{ text-align:center; }
.center .lead{ margin-inline:auto; }
.gold{ color:var(--accent); }
.emph{ color:var(--brand-3); font-style:italic; }
.skip-link{ position:absolute; left:-999px; top:0; z-index:200; background:var(--brand); color:var(--on-brand);
  padding:.8em 1.2em; border-radius:0 0 10px 0; font-weight:700; }
.skip-link:focus{ left:0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em; justify-content:center;
  font-family:var(--sans); font-weight:700; font-size:.96rem; letter-spacing:.01em;
  padding:.92em 1.5em; border-radius:999px; border:1.5px solid transparent;
  transition:transform .18s ease, background .2s ease, color .2s ease, box-shadow .2s ease, filter .2s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn .arr{ transition:transform .2s ease; }
.btn:hover .arr{ transform:translateX(4px); }
.btn-primary{ background:var(--brand); color:var(--on-brand); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--brand-2); transform:translateY(-2px); }
.btn-accent{ background:var(--accent); color:#231703; }
.btn-accent:hover{ filter:brightness(1.05); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--brand); border-color:color-mix(in srgb, var(--brand) 28%, transparent); }
.btn-ghost:hover{ background:color-mix(in srgb, var(--brand) 7%, transparent); }
.btn-wa{ background:#1FAE54; color:#fff; }
.btn-wa:hover{ background:#199549; transform:translateY(-2px); }
.btn-on-dark{ background:transparent; color:var(--on-brand); border-color:color-mix(in srgb, var(--on-brand) 40%, transparent); }
.btn-on-dark:hover{ background:color-mix(in srgb, var(--on-brand) 12%, transparent); }
.btn-lg{ padding:1.05em 1.8em; font-size:1.02rem; }
.btn svg{ width:1.1em; height:1.1em; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:var(--border);
}
.nav{
  display:grid; grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr);
  align-items:center; gap:clamp(1.25rem, 2.2vw, 2rem); height:84px;
  max-width:1440px; padding-inline:clamp(24px, 4vw, 56px);
}
.brand{ display:flex; align-items:center; gap:.65rem; justify-self:start; min-width:0; }
.brand img{ width:38px; height:38px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.brand b{ font-family:var(--serif); font-weight:600; font-size:1.24rem; letter-spacing:.02em; }
.brand small{ display:block; font-family:var(--sans); font-weight:600; font-size:.5rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brand-3); margin-top:1px; }
.nav nav{ justify-self:center; min-width:0; }
.nav-links{ display:flex; align-items:center; gap:clamp(.32rem, .7vw, .7rem); list-style:none; margin:0; padding:0; }
.nav-links a{
  font-family:var(--sans); font-weight:600; font-size:.84rem; color:var(--fg); white-space:nowrap;
  padding:.52em .54em; border-radius:8px; transition:color .15s, background .15s; opacity:.85; position:relative;
}
.nav-links a:hover{ opacity:1; color:var(--brand); background:color-mix(in srgb,var(--brand) 6%,transparent); }
.nav-links a.active{ opacity:1; color:var(--brand); }
.nav-links a.active::after{ content:""; position:absolute; left:.62em; right:.62em; bottom:.1em; height:2px;
  background:var(--accent); border-radius:2px; }
.nav-cta{ display:flex; align-items:center; justify-content:flex-end; gap:.7rem; justify-self:end; min-width:0; }
.nav-cta .btn-wa{ padding:.76em 1.16em; font-size:.9rem; }

/* Language toggle */
.lang-toggle{ display:inline-flex; align-items:center; border:1.5px solid var(--border); border-radius:999px;
  overflow:hidden; background:var(--card); }
.lang-toggle button{ border:0; background:transparent; font-family:var(--sans); font-weight:700; font-size:.78rem;
  letter-spacing:.04em; padding:.5em .8em; color:var(--muted); transition:background .2s, color .2s; }
.lang-toggle button[aria-pressed="true"]{ background:var(--brand); color:var(--on-brand); }

.burger{ display:none; width:44px; height:44px; border:1px solid var(--border);
  background:var(--card); border-radius:11px; align-items:center; justify-content:center; }
.burger span{ position:relative; width:18px; height:1.6px; background:var(--fg); transition:.25s; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:18px; height:1.6px; background:var(--fg); transition:.25s; }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger.open span{ background:transparent; }
.burger.open span::before{ top:0; transform:rotate(45deg); }
.burger.open span::after{ top:0; transform:rotate(-45deg); }

/* mobile menu */
.mobile-menu{
  position:fixed; inset:84px 0 auto 0; z-index:55;
  background:var(--bg); border-bottom:1px solid var(--border);
  padding:1rem var(--pad) 1.6rem; display:none; flex-direction:column; gap:.2rem;
  box-shadow:var(--shadow); max-height:calc(100vh - 84px); overflow-y:auto;
}
.mobile-menu.open{ display:flex; animation:slidedown .28s ease; }
@keyframes slidedown{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } }
.mobile-menu a:not(.btn){ font-family:var(--sans); font-weight:600; font-size:1.05rem; padding:.75em .2em;
  border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent); }
.mobile-menu .btn{ margin-top:1rem; }
.mobile-menu .lang-toggle{ align-self:flex-start; margin-top:1rem; }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:min(700px, 100svh); display:flex; align-items:center;
  padding-top:112px; padding-bottom:48px;
  background:
    radial-gradient(120% 90% at 88% -10%, color-mix(in srgb,var(--accent) 15%, transparent), transparent 55%),
    radial-gradient(80% 70% at -10% 110%, color-mix(in srgb,var(--brand-3) 12%, transparent), transparent 60%),
    var(--bg);
  overflow:hidden;
}
.hero-veins{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; }
.hero-veins svg{ width:100%; height:100%; }
.hero-grid{ position:relative; z-index:2; width:100%; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(340px,.95fr);
  gap:clamp(28px,5vw,72px); align-items:center; }
.hero h1{ margin:.35em 0 .7em; }
.hero .lead{ font-size:1.16rem; max-width:48ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin-top:1.7rem; padding-top:1.3rem;
  border-top:1px solid var(--border); color:var(--muted); font-size:.84rem; font-weight:600; letter-spacing:.02em; }
.hero-trust span{ display:inline-flex; align-items:center; gap:.5em; }
.hero-trust span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.hero-media{ position:relative; height:clamp(500px, calc(100svh - 160px), 560px); }
.hero-media > img{ width:100%; height:100%; aspect-ratio:4/5; border-radius:var(--radius-lg);
  object-fit:cover; object-position:50% 52%; box-shadow:var(--shadow); border:1px solid var(--border); display:block; }
.hero-media .floatcard{
  position:absolute; right:6px; bottom:6px; z-index:3; background:var(--card); border:1px solid var(--border);
  border-radius:11px; padding:.42rem .52rem; box-shadow:var(--shadow-sm); display:flex; gap:.42rem; align-items:center; max-width:168px;
}
.hero-media .floatcard .badge{ width:24px; height:24px; border-radius:50%; flex:0 0 auto; }
.hero-media .floatcard small{ display:block; color:var(--muted); font-size:.52rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; }
.hero-media .floatcard b{ font-family:var(--sans); font-size:.68rem; font-weight:700; line-height:1.12; }
.leaf-tag{ position:absolute; top:18px; right:-10px; z-index:3; background:var(--brand); color:var(--on-brand);
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:.5em .9em; border-radius:999px; box-shadow:var(--shadow-sm); }

/* Hero entrance (solo desplazamiento/escala; el contenido NUNCA queda oculto) */
.hero-copy > *{ animation:heroIn .7s cubic-bezier(.2,.7,.2,1) both; }
.hero-copy > *:nth-child(1){ animation-delay:.04s; }
.hero-copy > *:nth-child(2){ animation-delay:.12s; }
.hero-copy > *:nth-child(3){ animation-delay:.2s; }
.hero-copy > *:nth-child(4){ animation-delay:.28s; }
.hero-copy > *:nth-child(5){ animation-delay:.36s; }
@keyframes heroIn{ from{ transform:translateY(18px); } to{ transform:none; } }
.hero-media{ animation:heroReveal 1s .2s cubic-bezier(.5,.1,.2,1) both; }
@keyframes heroReveal{ from{ transform:scale(1.04); } to{ transform:scale(1); } }

/* ---------- Strip ---------- */
.strip{ background:var(--brand); color:var(--on-brand); }
.strip .row{ display:flex; gap:2.5rem; align-items:center; padding-block:1rem; flex-wrap:wrap; justify-content:center; }
.strip .row span{ font-family:var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; opacity:.92; display:inline-flex; align-items:center; gap:.7em; }
.strip .row span .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); }

/* ---------- About ---------- */
#nosotros.section{ padding-block:clamp(48px, 6vw, 82px); }
.about-grid{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr); gap:clamp(28px,4vw,56px); align-items:center; }
.about-copy h2{ margin:.3em 0 .55em; }
.about-copy .lead{ max-width:58ch; }
.about-copy .cards-3{ margin-top:1.35rem !important; }
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.feat-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.5rem 1.35rem; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease; }
.feat-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.feat-card .ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--brand-3) 14%, transparent); color:var(--brand); margin-bottom:1rem; }
.feat-card .ic svg{ width:24px; height:24px; }
.feat-card h3{ font-family:var(--serif); font-size:1.18rem; margin-bottom:.4em; }
.feat-card p{ color:var(--muted); font-size:.96rem; }
.about-media{ position:relative; }
.about-media img{ width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow);
  height:clamp(520px, 48vw, 640px); max-height:calc(100svh - 150px);
  object-fit:cover; object-position:50% 48%; display:block; }
.about-media .quotetag{ position:absolute; right:-14px; bottom:-14px; background:var(--accent);
  color:#231703; font-family:var(--serif); font-style:italic; font-size:1.05rem; font-weight:600;
  padding:1rem 1.2rem; border-radius:16px; max-width:240px; box-shadow:var(--shadow); line-height:1.25; }

/* ---------- Products ---------- */
#productos.section{ padding-block:clamp(54px, 7vw, 96px); }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
  margin-bottom:2.1rem; flex-wrap:wrap; }
.sec-head h2{ margin:.4em 0 .42em; }
.products{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.05rem; align-items:stretch;
  max-width:1080px; margin-inline:auto; }
.prod{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease; position:relative; }
.prod::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; z-index:2;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.prod:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.prod:hover::before{ transform:scaleX(1); }
.prod .ph{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--cream); }
.prod .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.prod:hover .ph img{ transform:scale(1.06); }
.prod .tagline{ position:absolute; top:.7rem; left:.7rem; background:color-mix(in srgb,var(--brand) 86%, transparent);
  color:var(--on-brand); font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.4em .7em; border-radius:999px; backdrop-filter:blur(4px); z-index:2; }
.prod .body{ padding:1.15rem 1.12rem 1.22rem; display:flex; flex-direction:column; flex:1; }
.prod h3{ font-family:var(--serif); font-size:1.25rem; margin-bottom:.25em; }
.prod p{ color:var(--muted); font-size:.89rem; }
.prod .btn{ width:100%; margin-top:.95rem; }

/* product accents */
.prod--chips .ph{ background:#EAF3D8; }
.prod--harina .ph{ background:#F1E9D6; }
.prod--coffee .ph{ background:#1c1a18; }

/* flavors as editorial list */
.flavors{ list-style:none; margin:.85rem 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.48rem .8rem; }
.flavors li{ display:flex; align-items:center; gap:.5em; font-size:.83rem; font-weight:600; color:var(--fg); }
.flavors li::before{ content:""; width:7px; height:7px; border-radius:2px; flex:0 0 auto;
  background:var(--brand-3); transform:rotate(45deg); }
.flavors li.maduro::before{ background:var(--accent); }

/* harina pending placeholder */
.ph-pending{ position:relative; aspect-ratio:1/1; display:grid; place-items:center; text-align:center;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb,var(--brand-3) 8%,transparent) 0 12px, transparent 12px 24px),
    var(--cream);
  color:var(--brand-2); padding:1.35rem; }
.ph-pending .lbl{ font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; opacity:.85; }
.ph-pending .mono{ font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:.72rem; margin-top:.6em;
  color:var(--muted); background:color-mix(in srgb,var(--card) 70%,transparent); padding:.3em .6em; border-radius:6px; }
.ph-pending svg{ width:54px; height:54px; opacity:.6; margin-bottom:.8rem; }

/* ---------- Editorial separator band (sostenibilidad/agua) ---------- */
.band{ position:relative; min-height:clamp(320px,46vw,560px); display:grid; place-items:center; overflow:hidden; isolation:isolate; }
.band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.band::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, rgba(8,22,14,.78), rgba(8,22,14,.32) 70%); }
.band .wrap{ width:100%; }
.band-copy{ max-width:620px; color:#fff; }
.band-copy .eyebrow{ color:var(--accent-2); }
.band-copy .eyebrow::before{ background:var(--accent); }
.band-copy h2{ color:#fff; font-size:clamp(1.8rem,3.6vw,2.8rem); margin:.4em 0 .5em; }
.band-copy p{ color:rgba(255,255,255,.86); font-size:1.08rem; max-width:48ch; }

/* ---------- Granja (dark immersive) ---------- */
.granja{ background:
   radial-gradient(90% 80% at 100% 0%, color-mix(in srgb,var(--brand-2) 55%, var(--brand)), var(--brand));
  color:var(--on-brand); position:relative; overflow:hidden; }
.granja::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(60% 50% at 12% 95%, color-mix(in srgb,var(--accent) 14%, transparent), transparent 60%);
  pointer-events:none; }
.granja .eyebrow{ color:var(--accent-2); }
.granja .eyebrow::before{ background:var(--accent); }
.granja-top{ display:grid; grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr); gap:clamp(30px,5vw,64px); align-items:center; position:relative; }
.granja-top h2{ font-size:clamp(2rem,4.4vw,3.3rem); margin:.4em 0 .58em; color:var(--on-brand); }
.granja-top .lead{ color:var(--on-brand-mut); }
.granja-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.7rem; }
.granja-media{ position:relative; height:clamp(500px, 43vw, 560px); }
.granja-media img{ width:100%; height:100%; border-radius:var(--radius-lg);
  object-fit:cover; object-position:50% 82%; box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  border:1px solid color-mix(in srgb,var(--on-brand) 14%,transparent); }
.pill-quote{ position:absolute; left:-16px; top:-16px; z-index:4; background:var(--accent); color:#231703;
  font-weight:700; font-size:.78rem; letter-spacing:.04em; padding:.6em 1em; border-radius:999px; box-shadow:var(--shadow); }
.granja-program{ position:relative; z-index:2; margin-top:clamp(36px,5vw,62px); }
.granja-features{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.9rem; }
.granja-feature{
  min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.85rem;
  text-align:center; padding:1.05rem .8rem; border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--brand-2) 78%, var(--brand)); color:var(--on-brand);
  border:1px solid color-mix(in srgb,var(--on-brand) 13%, transparent);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.granja-feature:hover{
  transform:translateY(-3px);
  background:color-mix(in srgb,var(--brand-2) 88%, var(--brand));
  border-color:color-mix(in srgb,var(--accent) 34%, transparent);
}
.granja-ico{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb,var(--brand-3) 52%, var(--brand));
  color:var(--accent-2); flex:0 0 auto;
}
.granja-ico svg{ width:24px; height:24px; }
.granja-feature h3{ font-family:var(--sans); font-size:.92rem; font-weight:700; line-height:1.25; color:var(--on-brand); }
.granja-blocks{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
.granja-block{
  background:color-mix(in srgb,var(--brand-2) 72%, var(--brand)); border:1px solid color-mix(in srgb,var(--on-brand) 14%, transparent);
  border-radius:var(--radius); padding:1.45rem; box-shadow:0 24px 50px -34px rgba(0,0,0,.68);
}
.granja-block h3{ font-size:clamp(1.35rem,2vw,1.75rem); color:var(--on-brand); margin-bottom:.75rem; }
.granja-block p{ color:var(--on-brand-mut); margin:.85rem 0 .8rem; }
.granja-tags{ display:flex; flex-wrap:wrap; gap:.45rem; }
.granja-tags span{
  display:inline-flex; align-items:center; border-radius:999px; padding:.38em .72em;
  border:1px solid color-mix(in srgb,var(--accent) 34%, transparent);
  color:var(--on-brand); background:color-mix(in srgb,var(--accent) 12%, transparent);
  font-size:.82rem; font-weight:700;
}
.granja-block ul{ margin:.6rem 0 0; padding:0; list-style:none; display:grid; gap:.5rem; }
.granja-block li{ color:var(--on-brand); display:flex; gap:.55rem; align-items:flex-start; }
.granja-block li::before{ content:""; width:7px; height:7px; border-radius:50%; margin-top:.55em; flex:0 0 auto; background:var(--accent); }

/* ---------- Pilares de impacto (timeline editorial) ---------- */
.impacto{ background:var(--bg); }
.impacto .wrap{ max-width:1080px; }
.impacto .sec-head{ flex-direction:column; align-items:flex-start; max-width:760px; margin-bottom:clamp(2.4rem,5vw,4.2rem); }
.impacto .sec-head h2{ max-width:680px; font-size:clamp(1.85rem,3.4vw,2.65rem); }
.impacto .sec-head .lead{ max-width:54ch; }
.pillars{ position:relative; max-width:960px; margin:0 auto; padding:8px 0 10px; --grow:0%; }
.pillars-line{ position:absolute; left:42px; top:18px; bottom:18px; width:2px;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 22%, transparent),
    color-mix(in srgb,var(--brand-3) 20%, transparent));
  border-radius:999px; overflow:hidden; }
.pillars-line::after{ content:""; position:absolute; inset:0 0 auto 0; height:var(--grow,0%);
  background:linear-gradient(180deg,var(--accent), color-mix(in srgb,var(--brand-3) 86%, var(--accent)));
  border-radius:999px; transition:height .22s ease-out; }
.pillar{
  position:relative; display:grid; grid-template-columns:84px minmax(0,1fr); gap:1.7rem;
  align-items:start; padding:0 0 clamp(2rem,4.2vw,3.4rem);
}
.pillar:last-child{ padding-bottom:0; }
.pillar .num{ position:relative; z-index:2; width:84px; height:84px; border-radius:50%;
  display:grid; place-items:center; background:var(--bg); border:2px solid var(--accent);
  box-shadow:0 0 0 8px var(--bg), 0 18px 32px -28px rgba(15,46,31,.55);
  font-family:var(--serif); font-size:1.62rem; font-weight:600; color:var(--brand);
  transition:transform .65s cubic-bezier(.2,.7,.2,1), background .22s ease, box-shadow .22s ease, color .22s ease;
}
.pillar-copy{
  position:relative; max-width:680px; padding:1.35rem 1.45rem 1.45rem;
  border:1px solid transparent; border-radius:var(--radius);
  background:linear-gradient(180deg, color-mix(in srgb,var(--card) 64%, transparent), color-mix(in srgb,var(--cream) 34%, transparent));
  transition:opacity .62s ease, transform .62s cubic-bezier(.2,.7,.2,1), border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.pillar-copy::before{
  content:""; position:absolute; left:0; top:1.35rem; width:3px; height:0;
  border-radius:999px; background:var(--accent); transition:height .5s .18s ease;
}
.pillar:nth-child(odd) .pillar-copy{ margin-left:0; }
.pillar:nth-child(even) .pillar-copy{ margin-left:clamp(1rem,5vw,4rem); }
.impact-mark{ position:absolute; right:1.25rem; top:1.2rem; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 9%, transparent); border:1px solid color-mix(in srgb,var(--accent) 24%, transparent);
}
.impact-mark svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.pillar h3{ font-family:var(--serif); font-size:clamp(1.18rem,2vw,1.55rem); margin:0 3rem .45em 0; color:var(--brand);
  transition:opacity .55s .1s ease, transform .55s .1s ease, color .2s ease; }
.pillar p{ color:var(--muted); font-size:1rem; max-width:62ch; transition:opacity .55s .2s ease, transform .55s .2s ease; }
body.ready .pillar:not(.in) .num{ transform:scale(.92); }
body.ready .pillar:not(.in) .pillar-copy{ opacity:0; transform:translateY(10px); }
body.ready .pillar:not(.in) h3, body.ready .pillar:not(.in) p{ opacity:0; transform:translateY(8px); }
.pillar.in .num{ transform:scale(1); background:color-mix(in srgb,var(--accent) 12%, var(--bg)); box-shadow:0 0 0 8px var(--bg), 0 22px 42px -30px rgba(15,46,31,.7); }
.pillar.in .pillar-copy, .pillar.in h3, .pillar.in p{ opacity:1; transform:none; }
.pillar.in .pillar-copy{ border-color:color-mix(in srgb,var(--accent) 20%, transparent); }
.pillar.in .pillar-copy::before{ height:32px; }
.pillar:hover .num{ background:color-mix(in srgb,var(--accent) 20%, var(--bg)); }
.pillar:hover h3{ color:var(--brand-2); }
.pillar:hover .pillar-copy{ border-color:color-mix(in srgb,var(--accent) 28%, transparent); box-shadow:0 20px 46px -38px rgba(15,46,31,.45); }
.pillar.is-active .pillar-copy{ background:linear-gradient(180deg, color-mix(in srgb,var(--card) 82%, transparent), color-mix(in srgb,var(--accent) 7%, var(--cream))); }

/* ---------- Vivero / variedades ---------- */
.varieties{ margin-top:clamp(48px,6vw,84px); display:grid; grid-template-columns:.95fr 1.05fr;
  gap:clamp(28px,4vw,56px); align-items:center; }
.var-copy h3{ font-family:var(--serif); font-size:clamp(1.8rem,3.4vw,2.6rem); margin:.3em 0 .5em; }
.var-copy .big{ font-family:var(--serif); font-size:clamp(2.6rem,6vw,4rem); color:var(--accent); line-height:1; display:block; }
.var-copy p{ color:var(--muted); margin-bottom:1.4rem; }
.var-gallery{
  display:grid; grid-template-columns:1.15fr .85fr; grid-template-rows:1fr 1fr .72fr;
  gap:.85rem; height:clamp(560px, 56vw, 650px);
}
.var-tile{
  position:relative; margin:0; min-width:0; overflow:hidden; border-radius:var(--radius);
  background:var(--brand); box-shadow:var(--shadow-sm);
  opacity:0; transform:translateY(12px);
  transition:opacity .56s ease, transform .56s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease;
}
.var-gallery.in .var-tile{ opacity:1; transform:none; }
.var-gallery.in .var-tile:nth-child(2){ transition-delay:.08s; }
.var-gallery.in .var-tile:nth-child(3){ transition-delay:.16s; }
.var-gallery.in .var-tile:nth-child(4){ transition-delay:.24s; }
.var-gallery.in .var-tile:nth-child(5){ transition-delay:.32s; }
.var-tile--main{ grid-row:1 / 3; }
.var-tile--tall{ grid-column:2; grid-row:1 / 2; }
.var-tile:nth-child(3){ grid-column:2; grid-row:2 / 3; }
.var-tile:nth-child(4){ grid-column:1; grid-row:3; }
.var-tile:nth-child(5){ grid-column:2; grid-row:3; }
.var-tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease; }
.var-tile:hover img{ transform:scale(1.035); }
.var-tile figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(.85rem,1.6vw,1.2rem);
  background:linear-gradient(180deg, transparent, rgba(11,26,18,.72));
  color:var(--on-brand); font-family:var(--serif); font-size:clamp(.95rem,1.55vw,1.16rem);
  font-weight:600; line-height:1.18;
}

/* ---------- Puntos de venta ---------- */
.pos-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.82fr); gap:clamp(26px,4vw,48px); align-items:start; }
.pos-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; }
.pos{
  position:relative; min-width:0; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:1.05rem 1.1rem 1.12rem 3.65rem; box-shadow:var(--shadow-sm);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .2s, border-color .2s;
}
body.ready .pos-cards:not(.in) .pos{ opacity:0; transform:translateY(14px); }
.pos-cards.in .pos{ opacity:1; transform:none; }
.pos-cards.in .pos:nth-child(2){ transition-delay:.06s; }
.pos-cards.in .pos:nth-child(3){ transition-delay:.12s; }
.pos-cards.in .pos:nth-child(4){ transition-delay:.18s; }
.pos-cards.in .pos:nth-child(5){ transition-delay:.24s; }
.pos-cards.in .pos:nth-child(6){ transition-delay:.3s; }
.pos::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:linear-gradient(var(--accent), var(--brand-3)); opacity:.75; }
.pos:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--accent) 28%, var(--border)); }
.pos-ic{
  position:absolute; left:1rem; top:1.05rem; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; color:var(--accent); background:color-mix(in srgb,var(--brand-3) 12%, transparent);
  border:1px solid color-mix(in srgb,var(--brand-3) 20%, transparent);
}
.pos-ic svg{ width:18px; height:18px; stroke-linecap:round; stroke-linejoin:round; }
.pos .top{ display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; margin-bottom:.35rem; }
.pos h3{ font-family:var(--serif); font-size:1.16rem; line-height:1.15; color:var(--brand); }
.pos .city{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand-3); background:color-mix(in srgb,var(--brand-3) 12%, transparent);
  padding:.4em .7em; border-radius:999px; white-space:nowrap; }
.pos address{ font-style:normal; color:var(--muted); font-size:.9rem; line-height:1.45; margin-bottom:.8rem; }
.pos .pending-loc{ display:inline-flex; margin-bottom:.85rem; color:var(--brand-2); background:color-mix(in srgb,var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb,var(--accent) 24%, transparent); border-radius:999px; padding:.32em .7em; font-size:.78rem; font-weight:700; }
.pos .acts{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.pos .acts .btn{ font-size:.8rem; padding:.62em .95em; }
body.ready .pos-media:not(.in){ opacity:0; transform:translateY(12px); }
.pos-media{ position:sticky; top:96px; transition:opacity .6s ease, transform .6s ease; }
.pos-media.in{ opacity:1; transform:none; }
.pos-media img{ width:100%; height:clamp(420px, 46vw, 560px); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  object-fit:cover; object-position:center; display:block; }
.pos-cta{ grid-column:1 / -1; margin-top:.2rem; background:var(--cream); border:1px dashed color-mix(in srgb,var(--brand-3) 40%,transparent);
  border-radius:var(--radius-sm); padding:1rem 1.15rem; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; }
.pos-cta b{ font-family:var(--serif); font-size:1.08rem; }

/* ---------- Alianzas ---------- */
.alianzas{ position:relative; color:var(--on-brand); background:var(--brand); overflow:hidden; }
.alianzas .bg{ position:absolute; inset:0; object-fit:cover; width:100%; height:100%; opacity:.2; }
.alianzas::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, color-mix(in srgb,var(--brand) 82%,transparent), color-mix(in srgb,var(--brand) 93%,transparent)); }
.alianzas .wrap{ position:relative; z-index:2; }
.alianzas .eyebrow{ color:var(--accent-2); }
.alianzas .eyebrow::before{ background:var(--accent); }
.alianzas h2{ color:var(--on-brand); }
.alianzas .lead{ color:var(--on-brand-mut); }
.ally-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:.8rem; margin:2.4rem 0; }
.ally{ background:color-mix(in srgb,var(--on-brand) 6%, transparent); border:1px solid color-mix(in srgb,var(--on-brand) 16%,transparent);
  border-radius:16px; padding:1.4rem 1.1rem; transition:transform .2s, background .2s; }
.ally:hover{ transform:translateY(-4px); background:color-mix(in srgb,var(--on-brand) 11%, transparent); }
.ally .ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; margin-bottom:.9rem;
  background:color-mix(in srgb,var(--accent) 20%,transparent); color:var(--accent-2); }
.ally .ic svg{ width:22px; height:22px; }
.ally b{ font-family:var(--sans); font-weight:700; font-size:.96rem; line-height:1.25; display:block; }

/* ---------- Contacto / Form ---------- */
.contact-grid{ display:grid; grid-template-columns:1.25fr .85fr; gap:clamp(30px,5vw,64px); align-items:start; }
.form{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:clamp(1.4rem,3vw,2.4rem); box-shadow:var(--shadow); }
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:.82rem; font-weight:700; letter-spacing:.02em; color:var(--fg); }
.field label .opt{ color:var(--muted); font-weight:500; }
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:.98rem; color:var(--fg); background:var(--bg);
  border:1.5px solid var(--border); border-radius:12px; padding:.8em .9em; transition:border .15s, box-shadow .15s;
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none;
  border-color:var(--brand-3); box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-3) 14%, transparent); }
.consent{ grid-column:1/-1; display:flex; gap:.7rem; align-items:flex-start; margin-top:.2rem;
  font-size:.86rem; color:var(--muted); }
.consent input{ width:20px; height:20px; margin-top:2px; flex:0 0 auto; accent-color:var(--brand); }
.consent a{ color:var(--brand-2); font-weight:700; text-decoration:underline; }
.form .btn-primary{ width:100%; margin-top:1.4rem; }
.form-note{ font-size:.8rem; color:var(--muted); margin-top:.9rem; text-align:center; }

.contact-aside{ display:flex; flex-direction:column; gap:1.1rem; }
.contact-aside .ci{ display:flex; gap:.9rem; align-items:flex-start; padding:1.1rem 1.2rem;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.contact-aside .ci .ic{ width:40px; height:40px; flex:0 0 auto; border-radius:11px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--brand-3) 13%, transparent); color:var(--brand); }
.contact-aside .ci .ic svg{ width:20px; height:20px; }
.contact-aside .ci small{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.15em; }
.contact-aside .ci b{ font-family:var(--sans); font-weight:600; font-size:1rem; word-break:break-word; }
.contact-aside .ci a{ color:var(--brand-2); }

/* ---------- Footer ---------- */
.footer{ background:var(--brand); color:var(--on-brand); padding-top:clamp(54px,7vw,90px); }
.footer .grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:2.2rem; padding-bottom:2.6rem; }
.footer .brand-col img{ width:58px; height:58px; border-radius:50%; margin-bottom:1rem; }
.footer .brand-col p{ color:var(--on-brand-mut); font-family:var(--serif); font-style:italic;
  font-size:1.08rem; max-width:32ch; }
.footer h4{ font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-2); margin-bottom:1.1rem; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.footer ul a, .footer ul li{ color:var(--on-brand-mut); font-size:.95rem; transition:color .15s; }
.footer ul a:hover{ color:var(--on-brand); }
.footer .social{ display:flex; gap:.6rem; margin-top:1.2rem; }
.footer .social a{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  border:1px solid color-mix(in srgb,var(--on-brand) 20%,transparent); color:var(--on-brand); transition:.2s; }
.footer .social a:hover{ background:color-mix(in srgb,var(--on-brand) 12%,transparent); border-color:transparent; }
.footer .social a svg{ width:19px; height:19px; }
.footer-legal{ border-top:1px solid color-mix(in srgb,var(--on-brand) 16%, transparent); padding:1.5rem 0;
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; }
.footer-legal a, .footer-legal button{ color:var(--on-brand-mut); font-size:.84rem; font-weight:600;
  background:none; border:0; padding:0; transition:color .15s; }
.footer-legal a:hover, .footer-legal button:hover{ color:var(--on-brand); text-decoration:underline; }
.footer-bottom{ border-top:1px solid color-mix(in srgb,var(--on-brand) 16%, transparent);
  padding:1.4rem 0 2rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  color:var(--on-brand-mut); font-size:.82rem; }

/* ---------- WhatsApp float ---------- */
.wa-float{ position:fixed; right:20px; bottom:20px; z-index:70; display:flex; align-items:center; gap:.6rem; }
.wa-float .tip{ background:var(--card); color:var(--fg); font-weight:700; font-size:.85rem;
  padding:.6em 1em; border-radius:999px; box-shadow:var(--shadow); border:1px solid var(--border);
  opacity:0; transform:translateX(8px); transition:.25s; pointer-events:none; }
.wa-float:hover .tip{ opacity:1; transform:none; }
.wa-btn{ position:relative; width:58px; height:58px; border-radius:50%; background:#1FAE54; color:#fff;
  display:grid; place-items:center; box-shadow:0 10px 26px -8px rgba(31,174,84,.6); transition:transform .2s; }
.wa-btn:hover{ transform:scale(1.06); }
.wa-btn svg{ width:30px; height:30px; }

/* ---------- Cookie banner + modal ---------- */
.cookie-banner{ position:fixed; left:16px; right:16px; bottom:16px; z-index:90; max-width:560px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:1.3rem 1.4rem; display:none; }
.cookie-banner.show{ display:block; animation:slideup .35s ease; }
@keyframes slideup{ from{ transform:translateY(16px); } to{ transform:none; } }
.cookie-banner h3{ font-family:var(--serif); font-size:1.15rem; margin-bottom:.4em; }
.cookie-banner p{ color:var(--muted); font-size:.9rem; }
.cookie-banner p a{ color:var(--brand-2); font-weight:700; text-decoration:underline; }
.cookie-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem; }
.cookie-actions .btn{ font-size:.86rem; padding:.7em 1.2em; flex:1 1 auto; }

.cookie-modal{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(8,18,12,.5); backdrop-filter:blur(3px); }
.cookie-modal.show{ display:flex; }
.cookie-modal .dialog{ background:var(--card); border-radius:var(--radius-lg); max-width:580px; width:100%;
  max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-lg); padding:clamp(1.4rem,3vw,2.2rem); }
.cookie-modal h2{ font-family:var(--serif); font-size:1.5rem; margin-bottom:.3em; }
.cookie-modal .intro{ color:var(--muted); font-size:.94rem; margin-bottom:1.4rem; }
.ck-cat{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:1.1rem 1.2rem; margin-bottom:.9rem; }
.ck-cat .ck-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.ck-cat h4{ font-family:var(--sans); font-weight:700; font-size:1rem; }
.ck-cat p{ color:var(--muted); font-size:.86rem; margin-top:.5em; }
.ck-cat .fixed{ font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-3); }
/* switch */
.switch{ position:relative; width:46px; height:26px; flex:0 0 auto; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch .track{ position:absolute; inset:0; background:var(--border); border-radius:999px; transition:background .2s; }
.switch .track::before{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
.switch input:checked + .track{ background:var(--brand-3); }
.switch input:checked + .track::before{ transform:translateX(20px); }
.switch input:disabled + .track{ background:var(--brand-3); opacity:.5; }
.cookie-modal .modal-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }
.cookie-modal .modal-actions .btn{ flex:1 1 auto; font-size:.88rem; }

/* ---------- Reveal (solo desplazamiento; opacidad siempre 1 para no depender del reloj de animación) ---------- */
.reveal{ transform:translateY(22px); transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }

/* ============================================================
   PÁGINAS LEGALES / INSTITUCIONALES
   ============================================================ */
.legal-hero{ padding:120px 0 clamp(36px,5vw,60px);
  background:radial-gradient(120% 90% at 85% -20%, color-mix(in srgb,var(--accent) 13%, transparent), transparent 55%), var(--bg);
  border-bottom:1px solid var(--border); }
.legal-hero .eyebrow{ margin-bottom:.8em; }
.legal-hero h1{ font-size:clamp(2rem,4.4vw,3rem); max-width:18ch; }
.legal-hero .updated{ margin-top:1.2rem; color:var(--muted); font-size:.88rem; font-weight:600; }
.legal-hero .updated .pending{ color:#b1442f; }
.legal-layout{ display:grid; grid-template-columns:240px 1fr; gap:clamp(28px,4vw,56px);
  max-width:var(--maxw); margin-inline:auto; padding:clamp(40px,6vw,72px) var(--pad); align-items:start; }
.legal-toc{ position:sticky; top:96px; }
.legal-toc h4{ font-family:var(--sans); font-weight:700; font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:1rem; }
.legal-toc ul{ list-style:none; margin:0; padding:0; display:grid; gap:.2rem; border-left:2px solid var(--border); }
.legal-toc a{ display:block; padding:.5em .9em; font-size:.9rem; font-weight:600; color:var(--muted);
  border-left:2px solid transparent; margin-left:-2px; transition:color .15s, border-color .15s; }
.legal-toc a:hover, .legal-toc a.active{ color:var(--brand); border-color:var(--accent); }
.legal-body{ max-width:72ch; }
.legal-body section{ margin-bottom:2.6rem; scroll-margin-top:96px; }
.legal-body h2{ font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,1.7rem); margin-bottom:.6em;
  display:flex; gap:.5em; align-items:baseline; }
.legal-body h2 .sn{ font-size:.85em; color:var(--accent); font-weight:600; }
.legal-body h3{ font-family:var(--sans); font-weight:700; font-size:1.02rem; margin:1.4rem 0 .5em; }
.legal-body p, .legal-body li{ color:var(--fg); opacity:.92; margin-bottom:.8rem; font-size:1rem; }
.legal-body ul, .legal-body ol{ padding-left:1.3rem; margin-bottom:1rem; }
.legal-body li{ margin-bottom:.5rem; }
.legal-body a{ color:var(--brand-2); font-weight:600; text-decoration:underline; }
.legal-note{ background:var(--cream); border:1px solid var(--border); border-left:4px solid var(--accent);
  border-radius:var(--radius-sm); padding:1.1rem 1.3rem; margin:1.6rem 0; font-size:.94rem; color:var(--brand-2); }
.pending{ background:color-mix(in srgb,#d8742c 18%, transparent); color:#9a4416; font-weight:700;
  padding:.1em .45em; border-radius:5px; font-size:.92em; white-space:nowrap; }
.legal-back{ margin-top:2rem; }

/* ---------- Responsive ---------- */
@media (max-width:1240px){
  .nav{
    grid-template-columns:minmax(0,1fr) auto;
    height:78px; gap:1rem; padding-inline:clamp(20px, 4vw, 36px);
  }
  .nav nav, .nav-links{ display:none; }
  .nav-cta .btn-wa{ display:none; }
  .burger{ display:flex; }
  .mobile-menu{
    top:78px; max-height:calc(100vh - 78px);
    padding-inline:clamp(20px, 4vw, 36px);
  }
}
@media (max-width:1040px){
  .ally-grid{ grid-template-columns:repeat(3,1fr); }
  .products{ grid-template-columns:repeat(3,1fr); }
  .granja-features{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .hero{ min-height:0; display:block; padding-top:112px; padding-bottom:56px; }
  .hero-grid{ gap:2rem; }
  .hero-media{
    width:min(100%, 430px); height:auto; aspect-ratio:4/5; max-height:520px;
    margin-inline:auto;
  }
  .hero-grid, .about-grid, .granja-top, .pos-grid, .contact-grid{ grid-template-columns:1fr; }
  .varieties{ grid-template-columns:1fr; }
  .var-gallery{ grid-template-columns:1fr 1fr; grid-template-rows:none; height:auto; }
  .var-tile, .var-tile--main, .var-tile--tall, .var-tile:nth-child(3), .var-tile:nth-child(4), .var-tile:nth-child(5){
    grid-column:auto; grid-row:auto; aspect-ratio:4/3;
  }
  .var-tile--main{ grid-column:1 / -1; aspect-ratio:16/10; }
  .about-media{ order:0; max-width:560px; margin-inline:auto; }
  .about-media img{ height:min(420px, 75vw); aspect-ratio:4/3; max-height:420px; }
  .about-media .quotetag{ right:12px; bottom:12px; }
  .granja-media{ width:min(100%, 360px); height:min(460px, 118vw); margin-inline:auto; }
  .granja-media img{ object-position:50% 72%; }
  .granja-media .pill-quote{ left:12px; top:12px; }
  .granja-program{ margin-top:2rem; }
  .footer .grid{ grid-template-columns:1fr 1fr; gap:2rem; }
  .pos-media{ position:static; }
  .pos-media img{ height:min(420px, 62vw); }
  .legal-layout{ grid-template-columns:1fr; }
  .legal-toc{ position:static; }
  .legal-toc ul{ display:flex; flex-wrap:wrap; border-left:0; gap:.4rem; }
  .legal-toc a{ border:1px solid var(--border); border-radius:999px; margin:0; }
  .impacto .sec-head{ margin-bottom:2.4rem; }
  .pillars{ max-width:760px; }
  .pillar{ grid-template-columns:72px minmax(0,1fr); gap:1.25rem; padding-bottom:2.4rem; }
  .pillars-line{ left:36px; }
  .pillar .num{ width:72px; height:72px; font-size:1.38rem; }
  .pillar:nth-child(even) .pillar-copy{ margin-left:0; }
  .pillar-copy{ padding:1.2rem 1.25rem 1.3rem; }
  .pillar h3{ font-size:clamp(1.12rem,3vw,1.36rem); }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .cards-3{ grid-template-columns:1fr; }
  .products{ grid-template-columns:1fr; }
  .pos-cards{ grid-template-columns:1fr; }
  .pos{ padding:1rem 1rem 1.08rem 3.45rem; }
  .pos .top{ flex-direction:column; align-items:flex-start; gap:.45rem; }
  .pos .acts .btn{ flex:1 1 auto; min-width:min(100%, 132px); }
  .pos-media img{ height:min(360px, 78vw); }
  .ally-grid{ grid-template-columns:1fr 1fr; }
  .field-grid{ grid-template-columns:1fr; }
  .footer .grid{ grid-template-columns:1fr; }
  .var-gallery{ gap:.7rem; }
  .var-tile figcaption{ font-size:.92rem; padding:.8rem; }
  .hero-media .floatcard{ right:6px; bottom:6px; max-width:168px; }
  .sec-head{ align-items:flex-start; }
  .wa-float .tip{ display:none; }
  .flavors{ grid-template-columns:1fr; }
  .granja-features{ grid-template-columns:repeat(2,1fr); gap:.75rem; }
  .granja-feature{ min-height:132px; padding:.9rem .65rem; }
  .granja-blocks{ grid-template-columns:1fr; }
  .granja-block{ padding:1.2rem; }
  .pillars{ padding-left:0; }
  .pillars-line{ left:27px; top:14px; bottom:14px; }
  .pillar{ grid-template-columns:54px minmax(0,1fr); gap:1rem; padding-bottom:2rem; }
  .pillar .num{ width:54px; height:54px; font-size:1.08rem; box-shadow:0 0 0 6px var(--bg); }
  .pillar.in .num{ box-shadow:0 0 0 6px var(--bg), 0 18px 34px -28px rgba(15,46,31,.7); }
  .pillar-copy{ padding:1rem 1rem 1.1rem; border-radius:var(--radius-sm); }
  .impact-mark{ position:static; width:32px; height:32px; margin-bottom:.65rem; }
  .pillar h3{ margin-right:0; }
  .pillar p{ font-size:.95rem; }
  .cookie-actions{ flex-direction:column; }
  .cookie-actions .btn{ width:100%; }
}
@media (max-width:430px){
  .granja-features{ grid-template-columns:1fr; }
  .var-gallery{ grid-template-columns:1fr; }
  .var-tile--main{ grid-column:auto; aspect-ratio:4/3; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ transform:none; }
  .hero-copy > *, .hero-media{ transform:none; }
  .pillars{ --grow:100%; }
  .pillar .num, .pillar-copy, .pillar h3, .pillar p{ opacity:1; transform:none; }
  .var-tile{ opacity:1; transform:none; }
  .pos, .pos-media{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}