:root{
  /* la medicina es blanca: el fondo manda claro, el verde manda la marca */
  --nieve:#FFFFFF;
  --hueso:#FBF9F5;
  --bruma:#F3F0E9;
  --arena:#EAE5DB;
  --verde:#5FAE2E;
  --verde-hondo:#2F6B18;
  --verde-claro:#EDF4E5;
  --tinta:#1E2A22;
  --humo:rgba(30,42,34,.6);
  --linea:rgba(30,42,34,.13);

  --display:"Bricolage Grotesque","Archivo","Helvetica Neue",Helvetica,sans-serif;
  --body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --gut:clamp(20px,5vw,84px);
  --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--nieve);color:var(--tinta);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--verde);color:#fff}

/* ── revelados ── */
.rv{opacity:0;transform:translateY(26px);transition:opacity .95s cubic-bezier(.22,.61,.36,1),transform .95s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.09s}.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}.rv[data-d="4"]{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation:none!important}
}

/* ── barra de ruta (progreso de scroll) ── */
.ruta{position:fixed;left:0;top:0;width:2px;height:100vh;z-index:50;background:var(--linea);pointer-events:none}
.ruta i{position:absolute;inset:0 0 auto 0;height:0;background:linear-gradient(180deg,var(--verde-hondo),var(--verde));display:block}
@media (max-width:720px){.ruta{display:none}}

/* ── nav ── */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gut);transition:background .5s ease,backdrop-filter .5s ease,border-color .5s ease;
  border-bottom:1px solid transparent}
.nav.pegada{background:rgba(251,249,245,.9);backdrop-filter:blur(16px);border-bottom-color:var(--linea)}
.marca{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:800;letter-spacing:-.02em}
.marca b{font-size:20px}
.marca .ene{width:36px;height:36px;display:block}
@media (max-width:620px){.marca .ene{width:30px;height:30px}}
.marca span{font-size:9.5px;letter-spacing:.34em;color:var(--humo);font-weight:500;font-family:var(--body)}
.nav .liga{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.nav .liga a{opacity:.66;transition:opacity .3s}
.nav .liga a:hover{opacity:1}
.bolsa{border:1px solid var(--linea);border-radius:999px;padding:8px 15px;display:inline-flex;gap:8px;align-items:center}
.bolsa em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--verde)}
@media (max-width:760px){.nav .liga a:not(.bolsa){display:none}}

/* ── portada ── */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden}
#red{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 38%,transparent 22%,rgba(252,250,247,.55) 66%,var(--nieve) 100%)}
.hero .in{position:relative;z-index:3;padding:120px var(--gut) 60px;width:100%}
.chip{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(95,174,46,.35);
  background:var(--verde-claro);color:var(--verde-hondo);border-radius:999px;padding:8px 16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;margin-bottom:26px}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--verde);animation:late 2.4s ease-in-out infinite}
@keyframes late{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
.hero h1{font-family:var(--display);font-weight:800;margin:0;
  font-size:clamp(40px,8.2vw,116px);line-height:1.0;letter-spacing:-.035em;text-transform:uppercase;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--verde-hondo)}
.hero p{margin:26px 0 0;max-width:46ch;font-size:clamp(15px,1.5vw,18px);color:var(--humo);line-height:1.7}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}

.btn{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;border-radius:999px;
  padding:15px 28px;font-family:var(--body);font-weight:500;font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;background:var(--verde);color:#fff;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 34px -14px rgba(95,174,46,.55)}
.btn:focus-visible{outline:2px solid var(--hueso);outline-offset:3px}
.btn.linea{background:transparent;color:var(--tinta);border:1px solid var(--linea)}
.btn.linea:hover{border-color:var(--verde);box-shadow:none}

/* ── marquesina ── */
.marq{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);overflow:hidden;padding:20px 0;background:var(--hueso)}
.marq div{display:flex;gap:44px;white-space:nowrap;width:max-content;animation:corre 34s linear infinite}
.marq span{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(20px,3vw,34px);opacity:.9}
.marq span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--verde)}
@keyframes corre{to{transform:translateX(-50%)}}

/* ── secciones ── */
section{position:relative}
.pad{padding:clamp(76px,12vh,150px) var(--gut)}
.ojo{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--verde-hondo);margin:0 0 20px}
h2{font-family:var(--display);font-weight:800;margin:0;text-transform:uppercase;
  font-size:clamp(30px,5.4vw,72px);line-height:.94;letter-spacing:-.03em;text-wrap:balance}
h2 em{font-style:normal;color:var(--verde-hondo)}
.lede{font-size:clamp(15px,1.4vw,17.5px);line-height:1.75;color:var(--humo);max-width:56ch;margin:22px 0 0}

/* ── cifras ── */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;margin-top:clamp(34px,5vw,60px)}
@media (max-width:820px){.cifras{grid-template-columns:1fr 1fr}}
.cifra{background:var(--nieve);padding:clamp(24px,3.4vw,40px)}
.cifra b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(38px,5.6vw,76px);
  line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.cifra small{display:block;margin-top:12px;font-size:12.5px;color:var(--humo);line-height:1.5}

/* ── el 50% ── */
.mitad{background:var(--hueso);border-radius:calc(var(--r) + 6px);padding:clamp(34px,6vw,84px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,70px);align-items:center}
@media (max-width:900px){.mitad{grid-template-columns:1fr}}
.precio{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1;
  font-size:clamp(52px,9vw,132px);display:flex;align-items:baseline;gap:.18em;flex-wrap:wrap}
.precio .antes{position:relative;color:var(--humo)}
.precio .antes::after{content:"";position:absolute;left:-2%;top:52%;height:5px;width:0;background:var(--verde);
  border-radius:3px;transition:width .9s cubic-bezier(.22,.61,.36,1) .25s}
.mitad.in .precio .antes::after{width:104%}
.precio .ahora{color:var(--verde-hondo);opacity:0;transform:translateY(14px);
  transition:opacity .7s ease .9s,transform .7s cubic-bezier(.22,.61,.36,1) .9s}
.mitad.in .precio .ahora{opacity:1;transform:none}
.mitad .nota{font-family:var(--mono);font-size:12px;color:var(--humo);margin-top:22px;letter-spacing:.04em}

/* ── colección ── */
.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);margin-top:clamp(34px,5vw,58px)}
@media (max-width:1000px){.rejilla{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.rejilla{grid-template-columns:1fr}}
.pieza{display:block;border-radius:var(--r);overflow:hidden;background:var(--bruma);position:relative}
.pieza .ph{position:relative;overflow:hidden;aspect-ratio:4/5}
.pieza .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,.61,.36,1),filter .6s ease}
.pieza:hover .ph img{transform:scale(1.05)}
.pieza .barra{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--verde);transition:width .6s cubic-bezier(.22,.61,.36,1)}
.pieza:hover .barra{width:100%}
.pieza .txt{padding:20px clamp(16px,1.6vw,24px) 24px;display:flex;flex-direction:column;gap:6px}
.pieza .lin{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--verde-hondo)}
.pieza .nom{font-family:var(--display);font-weight:800;font-size:clamp(18px,2vw,24px);letter-spacing:-.02em;text-transform:uppercase}
.pieza .des{font-size:13.5px;color:var(--humo);line-height:1.55}
.pieza .pre{display:flex;align-items:baseline;gap:12px;margin-top:10px;font-variant-numeric:tabular-nums}
.pieza .pre b{font-size:19px;color:var(--verde-hondo);font-weight:600}
.pieza .pre s{font-size:13.5px;color:var(--humo);text-decoration-thickness:1px}
.pieza .pre i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  border:1px solid var(--linea);border-radius:999px;padding:4px 9px;color:var(--humo);margin-left:auto}

/* ── líneas (conceptos) ── */
.lineas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;margin-top:clamp(34px,5vw,58px)}
@media (max-width:900px){.lineas{grid-template-columns:1fr}}
.linea-c{background:var(--nieve);padding:clamp(26px,3.4vw,44px);transition:background .5s ease}
.linea-c:hover{background:var(--hueso)}
.linea-c b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(22px,2.6vw,32px);
  text-transform:uppercase;letter-spacing:-.02em;margin-bottom:14px}
.linea-c p{margin:0;font-size:14.5px;color:var(--humo);line-height:1.7}
.linea-c .n{font-family:var(--mono);font-size:11px;color:var(--verde-hondo);letter-spacing:.2em;display:block;margin-bottom:20px}

/* ── banda editorial ── */
.banda{position:relative;min-height:78svh;display:grid;place-items:center;overflow:hidden}
.banda img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banda::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(251,249,245,.58),rgba(251,249,245,.9))}
.banda blockquote{position:relative;z-index:2;margin:0;padding:0 var(--gut);text-align:center;
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(28px,5.2vw,72px);line-height:.98;max-width:18ch;text-wrap:balance;color:var(--tinta)}
.banda cite{position:relative;z-index:2;display:block;text-align:center;margin-top:22px;font-style:normal;
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--verde-hondo)}

/* ── pie ── */
footer{border-top:1px solid var(--linea);padding:clamp(50px,7vw,80px) var(--gut) 40px;background:var(--nieve)}
.pie{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start}
.pie .col{display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--humo)}
.pie .col b{color:var(--tinta);font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px}
.pie .col a:hover{color:var(--verde)}
.legal{margin-top:44px;padding-top:22px;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;font-size:11.5px;color:var(--humo)}

/* ── fondo de portada: modo foto ── */
body[data-fondo="foto"] .hero{background:var(--hueso)}
body[data-fondo="foto"] .hero .foto{position:absolute;inset:0;display:block}
body[data-fondo="foto"] .hero .foto img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
body[data-fondo="foto"] .hero::after{
  background:linear-gradient(100deg,rgba(251,249,245,.96) 0%,rgba(251,249,245,.9) 38%,rgba(251,249,245,.25) 72%,rgba(251,249,245,.05) 100%)}
.hero .foto{display:none}

/* ── selector de prueba ── */
.probador{position:fixed;right:16px;bottom:16px;z-index:80;display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1px solid var(--linea);
  border-radius:999px;padding:6px 8px 6px 14px;box-shadow:0 10px 30px -18px rgba(30,42,34,.5)}
.probador b{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--humo);margin-right:4px}
.probador button{border:0;cursor:pointer;background:transparent;border-radius:999px;padding:7px 13px;
  font-family:var(--body);font-size:11.5px;letter-spacing:.06em;color:var(--tinta);transition:all .25s ease}
.probador button:hover{background:var(--verde-claro)}
.probador button.on{background:var(--verde);color:#fff}
@media (max-width:620px){.probador{right:10px;bottom:10px;padding:5px 6px 5px 11px}.probador button{padding:6px 10px;font-size:11px}}