/* ============================================================
   AGROTHECA — layout: hero, sections, library, article
   ============================================================ */

/* ---------------- top bar / nav ---------------- */
.topbar{ position:relative; z-index:6; display:flex; justify-content:space-between; align-items:center; gap:20px; }
/* full-bleed cream header bar so the logo (cream ground) blends instead of looking pasted */
.topbar-bg{ position:absolute; z-index:0;
  top:-26px; bottom:-15px;
  left:calc(-1 * clamp(20px,4vw,64px)); right:calc(-1 * clamp(20px,4vw,64px));
  background:var(--cream); border-bottom:1px solid var(--ink-20); pointer-events:none; }
.topbar > .brand-corner, .topbar > .nav, .topbar > .menu-btn{ position:relative; z-index:1; }
.topbar .nav a{ color:var(--ink-60); }
.topbar .nav a:hover{ color:var(--green); }
.topbar .menu-btn span{ background:var(--green); }
.nav{ display:flex; align-items:center; gap:30px; }
.nav a{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--hmuted); transition:color .3s var(--ease); position:relative; }
.nav a:hover{ color:var(--hfg); }
.nav a::after{ content:''; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:currentColor; transition:width .35s var(--ease); }
.nav a:hover::after{ width:100%; }
.menu-btn{ display:none; flex-direction:column; gap:6px; background:none; border:0; padding:6px; }
.menu-btn span{ width:26px; height:1.5px; background:var(--hfg); transition:all .3s var(--ease); }
.mobile-menu{ position:relative; z-index:6; display:flex; flex-direction:column; gap:18px; margin-top:22px;
  padding:22px 4px; border-top:1px solid var(--hfaint); border-bottom:1px solid var(--hfaint); }
.mobile-menu a{ font-family:var(--font-mono); font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--hfg); }

/* ---------------- HERO shell ---------------- */
.hero{
  --hfg:var(--green); --hmuted:var(--ink-60); --hfaint:var(--ink-20);
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  padding:26px clamp(20px,4vw,64px) 36px; overflow:hidden; color:var(--hfg);
  background:var(--cream);
}
.hero--cinematico{ --hfg:var(--cream); --hmuted:var(--on-dark-60); --hfaint:var(--on-dark-35); }

.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.08);
  transition:opacity 1.6s var(--ease); }
.hero-bg.show img{ opacity:1; animation:kenburns 26s ease-out 0.2s forwards; }
.hero-bg .veil{ position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(18,33,26,0.78) 0%, rgba(18,33,26,0.35) 42%, rgba(18,33,26,0.15) 70%, rgba(18,33,26,0.55) 100%),
    linear-gradient(to top, rgba(18,33,26,0.65), rgba(18,33,26,0) 38%); }

/* animated hero media (video / still + generative "invisible science" canvas) */
.hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-media .hm-video, .hero-media .hm-img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transform:scale(1.08); animation:kenburns 26s ease-out .2s forwards; }
.hero-media .hm-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1;
  mix-blend-mode:screen; }
.hero-media .veil{ position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(to right, rgba(var(--veil-rgb),0.82) 0%, rgba(var(--veil-rgb),0.52) 42%, rgba(var(--veil-rgb),0.28) 72%, rgba(var(--veil-rgb),0.55) 100%),
    linear-gradient(to top, rgba(var(--veil-rgb),0.66), rgba(var(--veil-rgb),0.04) 46%); }

/* parallax offset applied to the headline column */
.hero-left{ transform:translate3d(var(--px,0),var(--py,0),0); transition:transform .05s linear; }
@keyframes kenburns{ from{ transform:scale(1.08) translateY(0) } to{ transform:scale(1.16) translateY(-1.5%) } }

.subnav{ position:relative; z-index:5; display:flex; gap:clamp(18px,4vw,60px); margin-top:34px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--hmuted); }
.subnav .col-stack b{ display:block; color:var(--hfg); font-weight:500; line-height:1.9; }
.subnav .col-mid{ max-width:340px; line-height:1.9; }
.subnav .col-mid em{ font-style:normal; color:var(--hfg); }

.hero-body{ position:relative; z-index:5; flex:1; display:flex; justify-content:space-between;
  align-items:flex-start; gap:48px; margin-top:clamp(36px,7vh,90px); }

.hero-left{ max-width:560px; }
.hero-idx{ display:flex; align-items:center; gap:14px; color:var(--hmuted); margin-bottom:26px; }
.hero-idx .ln{ width:60px; height:1px; background:var(--hfaint); }

.hero-h{ color:var(--hfg); margin:0 0 26px; }
/* continuous gentle float so big titles never feel fully static */
@media (prefers-reduced-motion:no-preference){
  .hero--cinematico .hero-h, .hero--editorial .hero-h{ animation:titleFloat 7s ease-in-out 1.6s infinite; }
}
@keyframes titleFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }

/* animated gold sheen sweeping across the word "invisible" */
.shimmer{ background:linear-gradient(100deg,
    var(--gold) 0%, var(--gold) 38%, #F4ECD2 50%, var(--gold) 62%, var(--gold) 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; animation:sheen 4.5s ease-in-out infinite; }
@keyframes sheen{ 0%{ background-position:160% 0 } 55%,100%{ background-position:-60% 0 } }
@media (prefers-reduced-motion:reduce){ .shimmer{ animation:none; } }

/* rotating word in the hero headline */
.rot-word{ position:relative; display:inline-grid; vertical-align:bottom; }
.rot-ghost{ visibility:hidden; }            /* reserves width = widest word */
.rot-cur{ position:absolute; left:0; top:0; white-space:nowrap; will-change:transform,opacity,filter; }
.rot-mega{ color:var(--gold); }             /* uppercase mega variant */

/* rotating whole PHRASE (wraps, reserves height of tallest) */
.rot-phrase{ display:grid; width:100%; }
.rot-phrase > .rot-line{ grid-area:1 / 1; min-width:0; will-change:transform,opacity,filter; }
.rot-line.rot-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.hero-tail{ display:block; }
.hero-lead{ display:block; }
/* rotating word on its own headline line (block), reserves widest-word size */
.rot-word.rot-block{ display:grid; width:max-content; max-width:100%; vertical-align:baseline; }
.rot-word.rot-block .rot-ghost{ display:block; }
.hl{ color:var(--gold); }
.hero--editorial .hl{ font-style:italic; }
@media (prefers-reduced-motion:no-preference){
  .rot-line.rot-in{ animation:rotIn .55s var(--ease) both; }
  .rot-line.rot-out{ animation:rotOut .5s var(--ease) both; }
}
@media (prefers-reduced-motion:no-preference){
  .rot-in{ animation:rotIn .52s var(--ease) both; }
  .rot-out{ animation:rotOut .5s var(--ease) both; }
}
@keyframes rotIn{
  0%{ opacity:0; transform:translateY(0.28em); filter:blur(5px); }
  100%{ opacity:1; transform:translateY(0); filter:blur(0); }
}
@keyframes rotOut{
  0%{ opacity:1; transform:translateY(0); filter:blur(0); }
  100%{ opacity:0; transform:translateY(-0.28em); filter:blur(5px); }
}
.hero--cinematico .hero-h{ font-size:clamp(3.2rem,9vw,8.5rem); text-transform:uppercase; }
.hero--editorial .hero-h{ font-family:var(--font-display); font-weight:400; letter-spacing:-0.02em;
  font-size:clamp(3rem,8vw,7rem); line-height:0.98; }
.hero--dividido .hero-h{ font-size:clamp(2.8rem,6vw,5.6rem); text-transform:uppercase; }

.hero-desc{ color:var(--hmuted); max-width:330px; line-height:1.65; font-size:15px; margin:0 0 30px; }
.hero--editorial .hero-desc{ font-family:var(--font-display); font-size:18px; max-width:380px; }

/* Theo card */
.theo{ width:210px; color:var(--hfg); }
.theo .lab{ color:var(--hmuted); }
.theo h4{ margin:6px 0 8px; font-size:11px; }
.theo p{ color:var(--hmuted); font-size:13px; line-height:1.6; margin:0 0 22px; }
.theo .stat{ display:flex; justify-content:space-between; align-items:baseline; padding:11px 0; border-top:1px solid var(--hfaint); }
.theo .stat .k{ color:var(--hmuted); font-size:10px; }
.theo .stat .v{ font-size:13px; font-weight:500; }

/* editorial framed image */
.hero-frame{ width:min(34vw,420px); aspect-ratio:4/5; border-radius:4px; overflow:hidden; position:relative;
  box-shadow:0 30px 70px -30px rgba(18,33,26,0.5); }
.hero-frame img{ width:100%; height:100%; object-fit:cover; animation:kenburns 30s ease-out forwards; }
.hero-frame .cap{ position:absolute; left:14px; bottom:12px; z-index:2; color:var(--cream);
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.18em; text-transform:uppercase; }
.hero-frame::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(18,33,26,0.5),transparent 45%); }

/* dividido split panel */
.hero--dividido{ padding-right:0; }
.hero-split-img{ position:absolute; top:0; right:0; width:42vw; height:100%; z-index:1; overflow:hidden; }
.hero-split-img img{ width:100%; height:100%; object-fit:cover; animation:kenburns 30s ease-out forwards; }
.hero-split-img::before{ content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(to right,var(--cream),rgba(244,241,222,0) 22%); }

.scroll-ind{ position:absolute; right:clamp(20px,4vw,64px); bottom:28px; z-index:5;
  display:flex; align-items:center; gap:14px; color:var(--hmuted); }
.scroll-ind .dot{ width:46px; height:46px; border-radius:999px; border:1px solid var(--hfaint);
  display:grid; place-items:center; }
.scroll-ind .bars{ display:flex; gap:4px; }
.scroll-ind .bars i{ width:1px; height:13px; background:currentColor; display:block; animation:breathe 2.4s ease-in-out infinite; }
.scroll-ind .bars i:nth-child(2){ animation-delay:.3s; }
@keyframes breathe{ 0%,100%{ transform:scaleY(.6); opacity:.5 } 50%{ transform:scaleY(1); opacity:1 } }

/* ---------------- SECTION 2 — Explore ---------------- */
.sec{ position:relative; }
.sec-explore{ background:var(--cream); padding:clamp(80px,12vh,150px) clamp(20px,4vw,64px) clamp(60px,9vh,110px);
  display:flex; flex-direction:column; align-items:center; text-align:center; }
.sec-explore .big{ max-width:1100px; margin:30px auto 0; }
.sec-explore .big.sans{ font-size:clamp(2rem,5.2vw,4.4rem); font-weight:500; letter-spacing:-0.03em; line-height:1.06; }
.sec-explore .big.serif{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.1rem,5.4vw,4.6rem); line-height:1.08; letter-spacing:-0.015em; }
.sec-explore .big em{ font-family:var(--font-display); font-style:italic; color:var(--gold); }
.pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:46px; max-width:880px; }
.sec-explore .explore-sub{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--ink-40); margin:22px 0 0; }

/* ---------------- SECTION 3 — Library (dark) ---------------- */
.lib{ position:relative; background:var(--green-deep); color:var(--on-dark); z-index:3;
  padding-top:clamp(60px,12vh,130px); overflow:hidden; }
.lib-leaf{ position:absolute; top:0; left:50%; transform:translate(calc(-50% + var(--px,0px)), calc(-46% + var(--py,0px))); width:min(120vw,1100px);
  z-index:0; pointer-events:none; opacity:0; transition:opacity 1.4s var(--ease); }
.lib-leaf.in{ opacity:0.5; transform:translate(calc(-50% + var(--px,0px)), calc(-52% + var(--py,0px))); }
/* animated roots-from-a-book backdrop for the Biblioteca intro */
.roots-bg{ position:absolute; top:0; left:0; right:0; height:min(72vh,720px);
  z-index:0; pointer-events:none; opacity:0; transition:opacity 1.6s var(--ease);
  transform:translate(var(--px,0px), var(--py,0px)); }
.roots-bg.in{ opacity:0.92; }
.roots-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.lib-head{ position:relative; z-index:2; padding:0 clamp(20px,4vw,64px) clamp(40px,7vh,90px);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; align-items:flex-end; }

/* striking centered intro for the Biblioteca section */
.lib-intro{ flex-direction:column; align-items:center; text-align:center; justify-content:center;
  padding-top:clamp(20px,5vh,60px); gap:0; }
.lib-eyebrow{ display:flex; align-items:center; gap:16px; color:var(--gold); margin-bottom:26px; }
.lib-eyebrow .ln{ width:clamp(20px,5vw,54px); height:1px; background:currentColor; opacity:.5; }
.lib-eyebrow .mono{ font-size:11px; letter-spacing:0.22em; }
.lib-title{ display:flex; flex-direction:column; align-items:center; gap:0.02em;
  font-weight:500; letter-spacing:-0.03em; line-height:0.92; color:var(--on-dark);
  font-size:clamp(3rem,9vw,7.5rem); margin:0; text-transform:uppercase; }
.lib-title.serif{ font-family:var(--font-display); font-weight:400; text-transform:none; letter-spacing:-0.02em; }
.agt-la{ display:block; font-size:0.5em; opacity:.85; }
.lib-title.serif .agt-la{ font-style:italic; }
.lib-title .hl{ color:var(--gold); }
/* interactive AGROTHECA — travelling shimmer wave + hover lift per letter */
.agt{ display:inline-flex; }
.agt-l{ display:inline-block; color:var(--gold); cursor:default; will-change:transform;
  transition:transform .35s var(--ease), color .35s var(--ease), text-shadow .35s var(--ease); }
@media (prefers-reduced-motion:no-preference){
  .agt-l{ animation:agtWave 2.8s ease-in-out infinite; }
}
@keyframes agtWave{
  0%,100%{ transform:translateY(0); color:var(--gold); text-shadow:none; }
  50%{ transform:translateY(-0.07em); color:var(--gold-soft); text-shadow:0 6px 22px rgba(214,164,94,0.35); }
}
.agt-l:hover{ animation-play-state:paused; transform:translateY(-0.16em) scale(1.06);
  color:#F4ECD2; text-shadow:0 10px 30px rgba(214,164,94,0.5); }
.lib-intro-p{ max-width:62ch; margin:30px auto 0; color:var(--on-dark-60);
  font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.7; }
.lib-intro-p { font-family:var(--font-sans); }
.lib-qualities{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px;
  margin-top:34px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.04em;
  color:var(--on-dark-60); text-transform:uppercase; }
.lib-qualities b{ color:var(--on-dark); font-weight:500; }
.lib-qualities .sep{ width:5px; height:5px; border-radius:999px; background:var(--gold); opacity:.7; }
@media (max-width:760px){
  .lib-qualities{ flex-direction:column; gap:10px; }
  .lib-qualities .sep{ display:none; }
}
.lib-h{ max-width:840px; font-weight:500; letter-spacing:-0.025em; line-height:1.12;
  font-size:clamp(1.8rem,4.4vw,3.9rem); color:var(--on-dark); }
.lib-h.serif{ font-family:var(--font-display); font-weight:400; }
.lib-h .ico-inline{ display:inline-flex; gap:10px; vertical-align:middle; margin:0 10px; transform:translateY(-4px); }
.lib-h .ico-inline .round-ico{ width:clamp(40px,4vw,56px); height:clamp(40px,4vw,56px); }
.lib-tag{ max-width:320px; }
.lib-tag .t{ color:var(--on-dark-60); line-height:1.9; margin-bottom:18px; }
.lib-tag .t b{ color:var(--on-dark); font-weight:500; }
.lib-tag-kicker{ display:block; font-size:10px; letter-spacing:0.22em; color:var(--gold); margin-bottom:16px; }
.approach{ list-style:none; margin:0; padding:0; }
.approach li{ display:flex; flex-direction:column; gap:3px; padding:13px 0; border-top:1px solid var(--on-dark-35); }
.approach li:last-child{ border-bottom:1px solid var(--on-dark-35); }
.approach li b{ font-family:var(--font-display); font-weight:500; font-size:1.15rem; color:var(--on-dark); line-height:1; }
.approach li span{ font-size:12.5px; color:var(--on-dark-60); line-height:1.4; }

/* two-column chapter panel */
.lib-panel{ position:relative; z-index:2; display:grid; grid-template-columns:38% 62%;
  border-top:1px solid var(--on-dark-35); align-items:stretch; }
.lib-col-l{ border-right:1px solid var(--on-dark-35); min-height:540px; display:flex; flex-direction:column; }
.sec-cover{ position:relative; }
.sec-cover .frame{ width:100%; aspect-ratio:16/9; }
.sec-cover::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(18,33,26,0.55), transparent 55%); }
.sec-count{ position:absolute; left:16px; bottom:14px; z-index:2; color:var(--cream); font-size:10px;
  background:rgba(18,33,26,0.55); border:1px solid var(--on-dark-35); padding:6px 11px; border-radius:999px; backdrop-filter:blur(4px); }
.sec-ico{ position:absolute; right:16px; top:16px; z-index:2; width:38px; height:38px; border-radius:999px;
  display:grid; place-items:center; color:var(--cream); background:rgba(18,33,26,0.5); border:1px solid var(--on-dark-35); backdrop-filter:blur(4px); }
.sec-info{ padding:20px 30px 4px; }
.sec-kicker{ display:block; color:var(--gold); font-size:10px; }
.sec-name{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.6rem,2.6vw,2.1rem);
  color:var(--on-dark); margin:12px 0 10px; line-height:1.05; }
.sec-blurb{ color:var(--on-dark-60); font-size:14px; line-height:1.6; margin:0; max-width:46ch; }
.sec-articles{ padding:12px 30px 22px; display:flex; flex-direction:column; animation:fadeSoft .5s var(--ease); }
.art-row{ display:flex; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--on-dark-35);
  color:var(--on-dark-60); transition:color .3s var(--ease), padding-left .3s var(--ease); }
.art-row:last-child{ border-bottom:1px solid var(--on-dark-35); }
.art-row:hover{ color:var(--cream); padding-left:8px; }
.art-row .r{ font-size:10px; color:var(--on-dark-35); width:18px; flex:none; }
.art-row .t{ flex:1; font-size:15px; line-height:1.35; }
.art-row .rt{ font-size:10px; color:var(--on-dark-35); flex:none; }
.art-row .arr{ color:var(--gold); opacity:0; transform:translate(-4px,4px); transition:all .3s var(--ease); flex:none; }
.art-row:hover .arr{ opacity:.85; transform:none; }
.sec-name-link{ display:block; }
.sec-name-link:hover .sec-name{ color:var(--gold); }
.sec-name{ transition:color .3s var(--ease); }
.sec-viewall{ display:inline-flex; align-items:center; gap:9px; margin-top:14px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gold); transition:gap .3s var(--ease); }
.sec-viewall:hover{ gap:15px; }
.sec-viewall svg{ width:15px; height:15px; }
@keyframes fadeSoft{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

.lib-col-r{ display:flex; flex-direction:column; }
.lib-col-r .top{ display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--on-dark-35); padding:26px 34px; color:var(--on-dark-60); }
.chap{ display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:clamp(20px,3vh,30px) 34px; border-bottom:1px solid var(--on-dark-35);
  cursor:pointer; color:var(--on-dark-35); transition:color .4s var(--ease), padding-left .4s var(--ease); background:none; border-left:0; border-right:0; border-top:0; width:100%; text-align:left; }
.chap .nm{ font-size:clamp(1.3rem,2.4vw,2rem); font-weight:500; letter-spacing:-0.02em; }
.chap .meta{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; opacity:0; transition:opacity .4s; }
.chap:hover{ color:var(--on-dark-60); padding-left:42px; }
.chap.active{ color:var(--on-dark); padding-left:34px; }
.chap.active .meta{ opacity:.7; }
.chap .arr{ opacity:0; transform:translate(-6px,6px); transition:all .4s var(--ease); color:var(--gold); }
.chap.active .arr{ opacity:1; transform:none; }

.lib-foot{ position:relative; z-index:2; border-top:1px solid var(--on-dark-35);
  padding:28px clamp(20px,4vw,64px); color:var(--on-dark-35); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; }

@keyframes numRise{ from{ transform:translateY(100%); opacity:0 } to{ transform:translateY(0); opacity:1 } }

/* ============================================================
   SECTION 4 — El Lab (light, tool grid)
   ============================================================ */
.sec-lab{ background:var(--cream); position:relative; z-index:4;
  padding:clamp(70px,11vh,140px) clamp(20px,4vw,64px) clamp(70px,11vh,130px); }
.sec-lab::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--ink-20); }
.lab-head{ max-width:1100px; margin:0 auto clamp(44px,6vh,72px); }
.lab-h{ font-weight:500; letter-spacing:-0.03em; line-height:1.02; color:var(--green);
  font-size:clamp(2.2rem,5.2vw,4.2rem); margin:24px 0 0; }
.lab-h.serif{ font-family:var(--font-display); font-weight:400; letter-spacing:-0.015em; }
.lab-h em{ font-family:var(--font-display); font-style:italic; color:var(--gold); }
.lab-sub{ max-width:54ch; margin:22px 0 0; color:var(--ink-60); font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.6; }

.lab-grid{ max-width:1100px; margin:0 auto; display:grid; gap:18px;
  grid-template-columns:repeat(3,1fr); }
.tool-card{ position:relative; display:flex; flex-direction:column; justify-content:space-between;
  min-height:240px; padding:24px; border-radius:14px; background:var(--cream-2);
  border:1px solid var(--ink-20); overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease); }
.tool-card::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.tool-card:hover{ transform:translateY(-5px); border-color:var(--green); background:#fff;
  box-shadow:0 26px 50px -28px rgba(26,47,37,0.42); }
.tool-card:hover::after{ transform:scaleX(1); }

.tool-top{ display:flex; align-items:center; justify-content:space-between; }
.tool-ico{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
  background:var(--green); color:var(--cream); transition:transform .5s var(--ease), background .4s; }
.tool-card:hover .tool-ico{ transform:rotate(-6deg) scale(1.05); background:var(--gold); color:var(--green-deep); }
.tool-soon{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold); border-radius:999px; padding:5px 10px; }
.tool-body{ margin-top:22px; }
.tool-kicker{ font-size:10px; letter-spacing:0.2em; color:var(--ink-40); }
.tool-name{ font-family:var(--font-display); font-weight:500; font-size:1.45rem; color:var(--green);
  margin:8px 0 8px; line-height:1.1; }
.tool-desc{ color:var(--ink-60); font-size:14px; line-height:1.5; margin:0; }
.tool-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:20px;
  padding-top:16px; border-top:1px solid var(--ink-20); }
.tool-foot .mono{ font-size:11px; color:var(--ink-40); }
.tool-cta{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:500; color:var(--green);
  opacity:0; transform:translateX(-6px); transition:opacity .4s var(--ease), transform .4s var(--ease); }
.tool-cta svg{ transition:transform .4s var(--ease); }
.tool-card:hover .tool-cta{ opacity:1; transform:none; }
.tool-card:hover .tool-cta svg{ transform:translateX(4px); }

/* ghost "suggest a tool" card */
.tool-card--ghost{ background:transparent; border:1px dashed var(--ink-40); align-items:center; text-align:center; }
.tool-card--ghost:hover{ background:transparent; border-color:var(--green); box-shadow:none; transform:translateY(-3px); }
.tool-card--ghost::after{ display:none; }
.ghost-inner{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.tool-ico.ghost{ background:transparent; border:1px solid var(--ink-40); color:var(--green); }
.tool-card--ghost:hover .tool-ico.ghost{ transform:rotate(90deg); background:var(--green); color:var(--cream); border-color:var(--green); }
.tool-card--ghost .tool-desc{ max-width:24ch; }

@media (max-width:900px){ .lab-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .lab-grid{ grid-template-columns:1fr; } .tool-card{ min-height:auto; } }

/* live tool cards (clickable buttons) */
.tool-card--live{ cursor:pointer; text-align:left; font:inherit; color:inherit; width:100%; }
.tool-live{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--green-deep); background:var(--gold); border-radius:999px; padding:5px 11px; }
.tool-card--live:hover .tool-ico{ background:var(--gold); color:var(--green-deep); }

/* ============================================================
   TOOL MODAL — calculators
   ============================================================ */
.tk-overlay{ position:fixed; inset:0; z-index:1200; display:grid; place-items:center;
  padding:20px; background:rgba(18,33,26,0.62); backdrop-filter:blur(7px);
  animation:tkFade .3s var(--ease); }
@keyframes tkFade{ from{ opacity:0 } to{ opacity:1 } }
.tk-modal{ width:min(620px,100%); max-height:90vh; overflow:auto; background:var(--cream);
  border-radius:18px; border:1px solid var(--ink-20); box-shadow:0 40px 90px -30px rgba(18,33,26,0.6);
  animation:tkRise .4s var(--ease); }
@keyframes tkRise{ from{ opacity:0; transform:translateY(24px) scale(.98) } to{ opacity:1; transform:none } }
.tk-head{ display:flex; align-items:center; gap:16px; padding:24px clamp(20px,4vw,32px);
  border-bottom:1px solid var(--ink-20); position:sticky; top:0; background:var(--cream); z-index:2; }
.tk-head-ico{ width:48px; height:48px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:var(--green); color:var(--gold-soft); }
.tk-head-txt{ flex:1; display:flex; flex-direction:column; gap:4px; }
.tk-head-kicker{ font-size:10px; letter-spacing:0.18em; color:var(--gold); text-transform:uppercase; }
.tk-head-title{ font-family:var(--font-display); font-weight:500; font-size:1.5rem; color:var(--green); margin:0; line-height:1; }
.tk-close{ width:40px; height:40px; border-radius:999px; flex:none; display:grid; place-items:center;
  border:1px solid var(--ink-20); background:transparent; color:var(--ink); transform:rotate(45deg);
  transition:background .3s var(--ease), color .3s var(--ease); }
.tk-close:hover{ background:var(--green); color:var(--cream); border-color:var(--green); }
.tk-body{ padding:clamp(20px,4vw,32px); }

.tk-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.tk-field{ display:flex; flex-direction:column; gap:8px; }
.tk-flabel{ font-size:13px; font-weight:500; color:var(--green); display:flex; align-items:baseline; gap:8px; }
.tk-flabel small{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-40); font-weight:400; }
.tk-input-wrap{ display:flex; align-items:center; border:1px solid var(--ink-20); border-radius:10px;
  background:#fff; overflow:hidden; transition:border-color .3s var(--ease); }
.tk-input-wrap:focus-within{ border-color:var(--gold); }
.tk-input-wrap input{ flex:1; min-width:0; border:0; outline:none; background:transparent;
  padding:12px 14px; font-family:var(--font-sans); font-size:16px; color:var(--green); }
.tk-suffix{ padding:0 14px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em;
  color:var(--ink-40); text-transform:uppercase; border-left:1px solid var(--ink-20); align-self:stretch; display:flex; align-items:center; }

.tk-results{ margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tk-res{ background:var(--cream-2); border:1px solid var(--ink-20); border-radius:12px; padding:16px 18px;
  display:flex; flex-direction:column; gap:6px; }
.tk-res.big{ background:var(--green); border-color:var(--green); }
.tk-res-k{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-40); }
.tk-res.big .tk-res-k{ color:var(--gold-soft); }
.tk-res-v{ font-family:var(--font-display); font-weight:500; font-size:1.7rem; color:var(--green); line-height:1; display:flex; align-items:baseline; gap:6px; }
.tk-res.big .tk-res-v{ color:var(--cream); }
.tk-res-v small{ font-family:var(--font-mono); font-size:11px; font-weight:400; letter-spacing:0.06em; color:var(--ink-40); text-transform:uppercase; }
.tk-res.big .tk-res-v small{ color:var(--on-dark-60); }
.tk-note{ margin:22px 0 0; font-size:12.5px; line-height:1.5; color:var(--ink-40); }

@media (max-width:520px){ .tk-grid{ grid-template-columns:1fr; } .tk-results{ grid-template-columns:1fr; } }

/* ---- Conversor de unidades ---- */
.conv-cats{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; }
.conv-cat{ border:1px solid var(--ink-20); background:transparent; border-radius:999px; padding:8px 15px;
  font-size:12.5px; font-weight:500; color:var(--ink-60); transition:all .25s var(--ease); }
.conv-cat.on{ background:var(--green); color:var(--cream); border-color:var(--green); }
.conv-input{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.conv-select{ flex:1; min-width:0; border:0; outline:none; background:transparent; padding:12px 14px;
  font-family:var(--font-sans); font-size:16px; color:var(--green); cursor:pointer; }
.conv-results{ margin-top:22px; display:flex; flex-direction:column; border-top:1px solid var(--ink-20); }
.conv-row{ display:flex; justify-content:space-between; align-items:baseline; padding:13px 2px; border-bottom:1px solid var(--ink-20); }
.conv-u{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-40); }
.conv-v{ font-family:var(--font-display); font-size:1.5rem; color:var(--green); }

/* ---- empty section state (library left column) ---- */
.sec-empty{ padding:24px 0 8px; }
.sec-empty-tag{ display:inline-block; font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--green-deep); background:var(--gold); padding:5px 12px; border-radius:999px; }
.sec-empty p{ margin:16px 0 0; color:var(--on-dark-60); font-size:14.5px; line-height:1.6; max-width:40ch; }

@media (max-width:520px){ .conv-input{ grid-template-columns:1fr; } }

/* ============================================================
   SECTION 5 — Servicios (dark, specialty / consulting)
   ============================================================ */
.sec-services{ background:var(--green-deep); color:var(--on-dark); position:relative; z-index:5;
  padding:clamp(70px,12vh,140px) clamp(20px,4vw,64px); overflow:hidden; }
.srv-wrap{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.05fr 1fr;
  gap:clamp(40px,6vw,90px); align-items:center; }
.srv-h{ font-weight:500; letter-spacing:-0.03em; line-height:1.03; color:var(--on-dark);
  font-size:clamp(2rem,4.6vw,3.6rem); margin:22px 0 0; max-width:13ch; }
.srv-h.serif{ font-family:var(--font-display); font-weight:400; letter-spacing:-0.015em; }
.srv-h em{ font-family:var(--font-display); font-style:italic; color:var(--gold); }
.srv-p{ color:var(--on-dark-60); font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.65; margin:24px 0 30px; max-width:52ch; }
.srv-p b{ color:var(--on-dark); font-weight:500; }

.srv-right{ display:flex; flex-direction:column; gap:16px; }
.srv-card{ display:flex; align-items:flex-start; gap:18px; padding:24px 22px; border-radius:14px;
  background:rgba(255,255,255,0.04); border:1px solid var(--on-dark-35);
  transition:transform .5s var(--ease), background .4s var(--ease), border-color .4s var(--ease); }
.srv-card:hover{ transform:translateX(6px); background:rgba(255,255,255,0.07); border-color:var(--gold); }
.srv-ico{ flex:none; width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
  background:var(--gold); color:var(--green-deep); transition:transform .5s var(--ease); }
.srv-card:hover .srv-ico{ transform:rotate(-6deg) scale(1.05); }
.srv-name{ font-family:var(--font-display); font-weight:500; font-size:1.3rem; color:var(--on-dark); margin:2px 0 8px; line-height:1.15; }
.srv-desc{ color:var(--on-dark-60); font-size:14px; line-height:1.55; margin:0; }
.srv-arrow{ flex:none; color:var(--gold); opacity:0; transform:translate(-6px,6px); transition:all .45s var(--ease); }
.srv-card:hover .srv-arrow{ opacity:1; transform:none; }

@media (max-width:860px){ .srv-wrap{ grid-template-columns:1fr; gap:36px; } .srv-h{ max-width:none; } }

/* ============================================================
   FEATURED — Último artículo (light)
   ============================================================ */
.sec-featured{ background:var(--cream); position:relative; z-index:2;
  padding:clamp(56px,8vh,100px) clamp(20px,4vw,64px) clamp(40px,6vh,80px); }
.sec-featured::before{ content:''; position:absolute; top:0; left:clamp(20px,4vw,64px); right:clamp(20px,4vw,64px); height:1px; background:var(--ink-20); }
.ft-eyebrow{ max-width:1180px; margin:0 auto 30px; }
.ft-wrap{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.15fr 1fr;
  gap:clamp(30px,4vw,56px); align-items:center; }
.ft-media{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:16/11;
  box-shadow:0 34px 64px -36px rgba(26,47,37,0.5); }
.ft-media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.ft-media:hover img{ transform:scale(1.04); }
.ft-badge{ position:absolute; top:16px; left:16px; font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--green-deep); background:var(--gold); padding:7px 13px; border-radius:999px; }
.ft-sec{ display:inline-flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--gold); }
.ft-sec-ico{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:var(--green); color:var(--cream); }
.ft-title{ font-weight:500; letter-spacing:-0.025em; line-height:1.04; color:var(--green);
  font-size:clamp(2rem,4.2vw,3.4rem); margin:18px 0 0; }
.ft-title.serif{ font-family:var(--font-display); font-weight:400; }
.ft-title a:hover{ color:var(--gold); }
.ft-desc{ color:var(--ink-60); font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.6; margin:20px 0 28px; max-width:52ch; }
.ft-foot{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.ft-read{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-40); }
@media (max-width:820px){ .ft-wrap{ grid-template-columns:1fr; } }

/* ============================================================
   ACERCA DE (light)
   ============================================================ */
.sec-about{ background:var(--cream-2); position:relative; z-index:5;
  padding:clamp(70px,11vh,130px) clamp(20px,4vw,64px); border-top:1px solid var(--ink-20); }
.ab-wrap{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(30px,5vw,80px); }
.ab-h{ font-weight:500; letter-spacing:-0.03em; line-height:1.04; color:var(--green);
  font-size:clamp(2rem,4.4vw,3.4rem); margin:22px 0 0; }
.ab-h.serif{ font-family:var(--font-display); font-weight:400; }
.ab-h em{ font-family:var(--font-display); font-style:italic; color:var(--gold); }
.ab-p{ color:var(--ink-60); font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.7; margin:0 0 20px; max-width:60ch; }
.ab-p:first-child{ color:var(--ink); }
.ab-p b{ color:var(--green); font-weight:500; }
.ab-author{ display:flex; align-items:center; gap:16px; margin-top:30px; padding-top:24px; border-top:1px solid var(--ink-20); }
.ab-avatar{ width:52px; height:52px; border-radius:999px; flex:none; display:grid; place-items:center;
  background:var(--green); color:var(--gold-soft); }
.ab-author-txt{ display:flex; flex-direction:column; gap:4px; }
.ab-author-txt b{ font-size:15px; color:var(--green); font-weight:600; }
.ab-author-txt small{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-40); }
@media (max-width:760px){ .ab-wrap{ grid-template-columns:1fr; gap:24px; } }

/* ============================================================
   NEWSLETTER + CONTACTO (dark, final)
   ============================================================ */
.sec-news{ background:var(--green-deep); color:var(--on-dark); position:relative; z-index:6;
  padding:clamp(70px,12vh,140px) clamp(20px,4vw,64px) clamp(30px,5vh,50px); overflow:hidden; }
.nl-wrap{ max-width:760px; margin:0 auto; text-align:center; }
.nl-top .label{ display:inline-block; margin-bottom:20px; }
.nl-h{ font-weight:500; letter-spacing:-0.03em; line-height:1.04; color:var(--on-dark);
  font-size:clamp(2.2rem,5.2vw,4rem); margin:0; }
.nl-h.serif{ font-family:var(--font-display); font-weight:400; }
.nl-h em{ font-family:var(--font-display); font-style:italic; color:var(--gold); }
.nl-sub{ color:var(--on-dark-60); font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.6; margin:22px auto 0; max-width:46ch; }
.nl-form-wrap{ margin-top:38px; }
.nl-form{ display:flex; gap:12px; max-width:480px; margin:0 auto; }
.nl-input{ flex:1; padding:15px 20px; border-radius:10px; border:1px solid var(--on-dark-35);
  background:rgba(255,255,255,0.05); color:var(--on-dark); font-family:var(--font-sans); font-size:15px; outline:none;
  transition:border-color .3s var(--ease), background .3s var(--ease); }
.nl-input::placeholder{ color:var(--on-dark-35); }
.nl-input:focus{ border-color:var(--gold); background:rgba(255,255,255,0.08); }
.nl-btn{ flex:none; white-space:nowrap; }
.nl-done{ display:inline-flex; align-items:center; gap:12px; padding:15px 24px; border-radius:10px;
  background:rgba(214,164,94,0.12); border:1px solid var(--gold); color:var(--on-dark); font-size:15px; }
.nl-check{ width:34px; height:34px; border-radius:999px; display:grid; place-items:center; background:var(--gold); color:var(--green-deep); flex:none; }
.nl-contact{ margin-top:46px; }
.nl-or{ display:block; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--on-dark-35); margin-bottom:18px; }
.nl-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.nl-link{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px;
  border:1px solid var(--on-dark-35); color:var(--on-dark-60); font-size:13px;
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
.nl-link:hover{ color:var(--green-deep); background:var(--gold); border-color:var(--gold); }
.nl-foot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:clamp(50px,8vh,90px);
  padding-top:26px; border-top:1px solid var(--on-dark-35); color:var(--on-dark-35); }
.nl-foot .mono{ font-size:10px; letter-spacing:0.14em; text-transform:uppercase; }
@media (max-width:520px){ .nl-form{ flex-direction:column; } }

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.art-progress{ position:fixed; top:0; left:0; height:3px; background:var(--gold); z-index:9999; width:0; }
.art-top{ position:fixed; top:0; left:0; right:0; z-index:60; display:flex; justify-content:space-between;
  align-items:center; padding:18px clamp(20px,4vw,56px); transition:background .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent; }
.art-top.solid{ background:rgba(244,241,222,0.86); backdrop-filter:blur(12px); border-color:var(--ink-20); }
.art-top .nav a{ color:var(--ink-60); }
.art-top .nav a:hover{ color:var(--ink); }

.art-hero{ position:relative; min-height:92svh; display:flex; align-items:flex-end;
  padding:0 clamp(20px,4vw,56px) clamp(48px,8vh,90px); overflow:hidden; color:var(--cream); }
.art-hero .bg{ position:absolute; inset:0; z-index:0; }
.art-hero .bg img{ width:100%; height:100%; object-fit:cover; animation:kenburns 30s ease-out forwards; }
.art-hero .bg::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(18,33,26,0.85) 0%, rgba(18,33,26,0.25) 55%, rgba(18,33,26,0.5) 100%); }
.art-hero .inner{ position:relative; z-index:2; max-width:1000px; }
.art-kicker{ display:flex; align-items:center; gap:14px; margin-bottom:24px; color:var(--gold-soft); }
.art-kicker .ln{ width:46px; height:1px; background:currentColor; opacity:.6; }
.art-title{ font-family:var(--font-display); font-weight:400; letter-spacing:-0.02em; line-height:0.98;
  font-size:clamp(2.6rem,7vw,6rem); margin:0 0 30px; }
.art-meta{ display:flex; flex-wrap:wrap; gap:28px; color:var(--on-dark-60); }
.art-meta .m b{ display:block; color:var(--cream); font-weight:500; font-size:14px; margin-top:4px; }

.art-body{ max-width:720px; margin:0 auto; padding:clamp(56px,9vh,100px) 24px clamp(40px,7vh,80px); }
.art-lead{ font-family:var(--font-display); font-size:clamp(1.4rem,2.5vw,1.7rem); line-height:1.5;
  color:var(--green); margin:0 0 40px; }
.art-lead::first-letter{ font-size:4.2em; float:left; line-height:0.78; padding:6px 14px 0 0; color:var(--gold);
  font-weight:500; }
.art-body p{ font-family:var(--font-display); font-size:1.2rem; line-height:1.72; color:rgba(26,47,37,0.86);
  margin:0 0 26px; }
.art-h2{ font-family:var(--font-sans); font-weight:600; font-size:clamp(1.4rem,3vw,2rem); letter-spacing:-0.02em;
  color:var(--green); margin:54px 0 22px; line-height:1.15; }
.art-h2 .n{ font-family:var(--font-mono); font-size:13px; color:var(--gold); display:block; margin-bottom:10px;
  letter-spacing:0.2em; font-weight:500; }
.art-quote{ margin:48px 0; padding:8px 0 8px 30px; border-left:3px solid var(--gold); }
.art-quote p{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.5rem,3vw,2rem);
  line-height:1.35; color:var(--green); margin:0; }
.art-quote cite{ display:block; margin-top:16px; font-family:var(--font-mono); font-style:normal;
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-40); }

.art-figure{ margin:48px calc(50% - 50vw); width:100vw; }
.art-figure.wide img{ width:min(1100px,92vw); margin:0 auto; border-radius:4px; }
.art-figure img{ display:block; }
.art-figure figcaption{ max-width:720px; margin:16px auto 0; padding:0 24px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:0.06em; color:var(--ink-40); text-transform:uppercase; }

.art-callout{ background:var(--green); color:var(--cream); border-radius:8px; padding:32px 34px; margin:44px 0; }
.art-callout .label{ color:var(--gold-soft); margin-bottom:14px; }
.art-callout .big{ font-family:var(--font-display); font-size:clamp(2.4rem,5vw,3.4rem); line-height:1; margin:0 0 6px; }
.art-callout p{ font-family:var(--font-sans); font-size:14px; color:var(--on-dark-60); margin:6px 0 0; line-height:1.6; }

.art-next{ background:var(--green-deep); color:var(--on-dark); padding:clamp(50px,9vh,90px) clamp(20px,4vw,56px); }
.art-next .lbl{ color:var(--gold-soft); }
.art-next a{ display:flex; justify-content:space-between; align-items:center; gap:24px; padding:30px 0;
  border-top:1px solid var(--on-dark-35); }
.art-next a:last-child{ border-bottom:1px solid var(--on-dark-35); }
.art-next .nm{ font-family:var(--font-display); font-size:clamp(1.6rem,3.5vw,2.6rem); color:var(--on-dark-60);
  transition:color .3s var(--ease); }
.art-next a:hover .nm{ color:var(--cream); }
.art-next a:hover .round-ico{ background:var(--gold); border-color:var(--gold); color:var(--green-deep); }

@media (max-width:900px){
  .art-figure{ margin:36px calc(50% - 50vw); }
}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .nav{ display:none; }
  .menu-btn{ display:flex; }
  .hero-body{ flex-direction:column; }
  .theo{ width:100%; max-width:340px; }
  .hero-frame, .hero-split-img{ display:none; }
  .subnav .col-stack{ display:none; }
  .lib-panel{ grid-template-columns:1fr; }
  .lib-col-l{ border-right:0; border-bottom:1px solid var(--on-dark-35); min-height:380px; }
  .lib-h .ico-inline{ margin:0 6px; }
}