/* =========================================================================
   Myco Solutions — sistema visual del sitio
   Según el libro de marca: Tinta, Blanco Espora, Crema Micelio, Lima Espora,
   Verde Micelio y Oliva Bosque. Quicksand (títulos), Mulish (lectura), Space Mono (datos).
   ========================================================================= */

:root{
  /* Libro de marca Myco Solutions v1.0 */
  --ink:#1A1B16; --ink-2:#23241E; --ink-3:#30312A;          /* Tinta */
  --sustrato:#372B1D;                                        /* Sustrato */
  --cream:#FAFAF4; --cream-2:#EBE3CE; --paper:#FFFFFB;       /* Blanco Espora, Crema Micelio */
  --line:#DCD5C0; --line-dark:#3A3B33;
  --lime:#E6DE0A; --micelio:#8C9206; --olive:#5C6803; --olive-deep:#454E02; /* Lima Espora, Verde Micelio, Oliva Bosque */
  --grad:linear-gradient(135deg, var(--lime), var(--olive));
  --tx:#1A1B16; --tx-mut:#55564A; --tx-cream:#F2F1E8; --tx-cream-mut:#B9BAA6;
  --danger:#9B2C14; --danger-dark:#F0A58F;

  --f-display:'Quicksand', system-ui, sans-serif;
  --f-body:'Mulish', system-ui, sans-serif;
  --f-data:'Space Mono', ui-monospace, monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --tab-h:44px; --bar-h:64px; --head-h:calc(var(--tab-h) + var(--bar-h));
  --maxw:1240px; --gut:clamp(16px,5vw,64px);
  --r:12px; --r-lg:20px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--head-h) + 12px); scrollbar-color:var(--olive) var(--cream-2); }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{ margin:0; background:var(--cream); color:var(--tx); font:400 17px/1.62 var(--f-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; padding-top:var(--head-h); }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--lime); color:var(--ink); }
:focus-visible{ outline:2.5px solid var(--olive); outline-offset:3px; border-radius:4px; }
.on-ink :focus-visible, .on-ink:focus-visible{ outline-color:var(--lime); }
[hidden]{ display:none !important; }
.send-err{ color:var(--danger); font-size:15px; margin:0; }
.on-ink .send-err{ color:var(--danger-dark); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:12px; top:-60px; z-index:200; background:var(--lime); color:var(--ink); padding:10px 16px; border-radius:8px; font-family:var(--f-display); font-weight:500; }
.skip:focus{ top:12px; }

h1,h2,h3,h4{ font-family:var(--f-display); font-weight:500; line-height:1.08; letter-spacing:-.015em; margin:0; text-wrap:balance; }
h1{ font-size:clamp(44px,8.4vw,104px); font-weight:300; letter-spacing:-.03em; line-height:1; }
h2{ font-size:clamp(32px,5vw,60px); font-weight:400; letter-spacing:-.025em; }
h3{ font-size:clamp(22px,2.4vw,28px); }
p{ margin:0 0 1em; max-width:66ch; text-wrap:pretty; }
.lead{ font-size:clamp(19px,2vw,23px); line-height:1.5; }
.mut{ color:var(--tx-mut); }
.num{ font-family:var(--f-data); font-variant-numeric:tabular-nums; letter-spacing:0; }
strong,b{ font-weight:600; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.sec{ padding-block:clamp(72px,10vw,140px); position:relative; }
.sec-sm{ padding-block:clamp(56px,7vw,96px); }
.alt{ background:var(--cream-2); }
.paper{ background:var(--paper); }
.on-ink{ background:var(--ink); color:var(--tx-cream); }
.on-ink .mut{ color:var(--tx-cream-mut); }
.head{ max-width:760px; margin-bottom:clamp(36px,5vw,64px); }
.head h2{ margin-bottom:.45em; }
.head p{ font-size:clamp(17px,1.7vw,20px); color:var(--tx-mut); }
.on-ink .head p{ color:var(--tx-cream-mut); }
.grid{ display:grid; gap:clamp(20px,3vw,40px); }
.grid > *{ min-width:0; }

/* ---------- Botones ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em; min-height:48px;
  padding:.7em 1.4em; border-radius:999px; border:1.5px solid transparent; cursor:pointer;
  font:500 16px/1.1 var(--f-display); letter-spacing:.005em; text-decoration:none; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.btn svg{ width:18px; height:18px; flex:none; }
.btn:active{ transform:scale(.98); }
.btn-lime{ background:var(--lime); color:var(--ink); }
.btn-lime:hover{ background:#F2EA2A; }
.btn-ink{ background:var(--ink); color:var(--tx-cream); }
.btn-ink:hover{ background:var(--ink-3); }
.btn-line{ border-color:currentColor; background:transparent; }
.btn-line:hover{ background:color-mix(in srgb, currentColor 8%, transparent); }
.btn[disabled]{ opacity:.55; cursor:progress; }
.btns{ display:flex; flex-wrap:wrap; gap:12px; }
.link{ color:var(--olive); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:.22em; font-weight:500; }
.on-ink .link{ color:var(--lime); }

/* =========================================================================
   Cabecera: pestañas + barra
   ========================================================================= */
.site-head{ position:fixed; inset:0 0 auto 0; z-index:90; }
.tabs{ height:var(--tab-h); background:var(--ink); display:flex; justify-content:center; gap:4px; padding-inline:var(--gut); }
.tabs a{ display:flex; align-items:center; gap:8px; padding:0 18px; min-width:44px; justify-content:center;
  color:var(--tx-cream-mut); text-decoration:none; font:500 14.5px/1 var(--f-display); letter-spacing:.01em;
  position:relative; transition:color .2s var(--ease); }
.tabs a svg{ width:17px; height:17px; }
.tabs a:hover{ color:var(--tx-cream); }
.tabs a[aria-current="page"]{ color:var(--ink); background:var(--cream); border-radius:10px 10px 0 0; margin-top:6px; }
.tabs .t-short{ display:none; }
.tabs a:focus-visible{ outline-color:var(--lime); outline-offset:-3px; }

.bar{ height:var(--bar-h); background:var(--cream); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:24px; padding-inline:var(--gut); }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:none; }
.brand img{ width:38px; height:38px; }
.brand span{ font:500 19px/1 var(--f-display); letter-spacing:-.01em; white-space:nowrap; }
.brand span i{ font-style:normal; font-weight:300; }
.sec-links{ display:flex; gap:22px; margin-left:auto; }
.sec-links a{ font:450 15px/1 var(--f-display); text-decoration:none; color:var(--tx-mut); padding:10px 0; position:relative; }
.sec-links a:hover{ color:var(--tx); }
.sec-links a::after{ content:""; position:absolute; left:0; right:0; bottom:4px; height:1.5px; background:var(--olive); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.sec-links a:hover::after, .sec-links a.is-on::after{ transform:scaleX(1); }
.sec-links a.is-on{ color:var(--tx); }
.bar .btn{ min-height:44px; padding:.6em 1.15em; font-size:15px; }
.burger{ display:none; margin-left:auto; width:44px; height:44px; border-radius:10px; border:1px solid var(--line); background:transparent; align-items:center; justify-content:center; cursor:pointer; }
.burger svg{ width:22px; height:22px; }

.drawer{ position:fixed; inset:var(--head-h) 0 0 0; z-index:89; background:var(--cream); padding:24px var(--gut) 40px;
  display:flex; flex-direction:column; gap:4px; transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; overflow:auto; }
.drawer.open{ opacity:1; transform:none; visibility:visible; transition:opacity .3s var(--ease), transform .3s var(--ease); }
.drawer a{ font:500 26px/1.2 var(--f-display); text-decoration:none; padding:12px 0; border-bottom:1px solid var(--line); }
.drawer .btn{ margin-top:24px; font-size:17px; }

@media (max-width:960px){
  .sec-links, .bar > .btn{ display:none; }
  .burger{ display:inline-flex; }
}
@media (max-width:480px){
  .tabs{ justify-content:stretch; gap:0; padding-inline:6px; }
  .tabs a{ flex:1; padding:0 8px; font-size:14px; }
  .tabs .t-long{ display:none; } .tabs .t-short{ display:inline; }
}

/* =========================================================================
   Formularios
   ========================================================================= */
.form{ display:grid; gap:18px; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form .row > *{ min-width:0; }
.field{ display:grid; gap:7px; }
.field label, .fs legend{ font:500 15px/1.3 var(--f-display); }
.field .opt{ color:var(--tx-mut); font-weight:400; }
.on-ink .field .opt{ color:var(--tx-cream-mut); }
.input{ width:100%; min-height:50px; padding:12px 14px; font-size:16px; border-radius:10px;
  border:1.5px solid var(--line); background:var(--paper); color:var(--tx); transition:border-color .2s var(--ease); }
textarea.input{ min-height:120px; resize:vertical; }
.input:hover{ border-color:#BDB6A0; }
.input:focus{ outline:none; border-color:var(--olive); box-shadow:0 0 0 3px color-mix(in srgb, var(--olive) 22%, transparent); }
.input::placeholder{ color:#7A7C6B; }
.on-ink .input{ background:var(--ink-2); border-color:var(--line-dark); color:var(--tx-cream); }
.on-ink .input::placeholder{ color:#9C9E89; }
.on-ink .input:focus{ border-color:var(--lime); box-shadow:0 0 0 3px color-mix(in srgb, var(--lime) 25%, transparent); }
.field[data-invalid] .input{ border-color:var(--danger); }
.on-ink .field[data-invalid] .input{ border-color:var(--danger-dark); }
.err{ font-size:14px; color:var(--danger); display:none; }
.on-ink .err{ color:var(--danger-dark); }
[data-invalid] > .err{ display:block; }
.fs{ border:0; padding:0; margin:0; display:grid; gap:10px; min-width:0; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.chip span{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 16px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--paper); font:450 15px/1.2 var(--f-display); cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease); }
.chip span::before{ content:""; width:14px; height:14px; border-radius:50%; border:1.5px solid currentColor; flex:none; transition:background .2s var(--ease); }
.chip input[type="checkbox"] + span::before{ border-radius:4px; }
.chip input:checked + span{ background:var(--ink); color:var(--tx-cream); border-color:var(--ink); }
.chip input:checked + span::before{ background:var(--lime); border-color:var(--lime); }
.chip input:focus-visible + span{ outline:2.5px solid var(--olive); outline-offset:2px; }
.on-ink .chip span{ background:var(--ink-2); border-color:var(--line-dark); }
.on-ink .chip input:checked + span{ background:var(--lime); color:var(--ink); border-color:var(--lime); }
.on-ink .chip input:checked + span::before{ background:var(--ink); border-color:var(--ink); }
.consent{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.45; }
.consent input{ width:22px; height:22px; margin:1px 0 0; accent-color:var(--olive); flex:none; }
.on-ink .consent input{ accent-color:var(--lime); }
.form .btn{ justify-self:start; }
.form-done{ display:none; padding:24px; border-radius:var(--r); background:var(--paper); border:1px solid var(--line); }
.on-ink .form-done{ background:var(--ink-2); border-color:var(--line-dark); }
.form-done h3{ margin-bottom:.4em; }
.form.sent > :not(.form-done){ display:none; }
.form.sent .form-done{ display:block; }
.form-note{ font-size:14px; color:var(--tx-mut); margin:0; }
.on-ink .form-note{ color:var(--tx-cream-mut); }
@media (max-width:560px){
  .form .row{ grid-template-columns:1fr; }
  .form .btn, .btns .btn{ width:100%; justify-self:stretch; }
}

/* =========================================================================
   Pie, cookies, WhatsApp flotante
   ========================================================================= */
.foot{ background:var(--ink); color:var(--tx-cream-mut); padding-block:64px 32px; font-size:15px; }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px; border-bottom:1px solid var(--line-dark); }
.foot-top > *{ min-width:0; }
.foot .brand span{ color:var(--tx-cream); }
.foot h4{ font:500 15px/1 var(--f-display); color:var(--tx-cream); margin-bottom:14px; letter-spacing:0; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.foot a, .foot button.as-link{ color:var(--tx-cream-mut); text-decoration:none; display:inline-flex; min-height:36px; align-items:center; }
.foot a:hover, .foot button.as-link:hover{ color:var(--lime); }
.foot button.as-link{ background:none; border:0; padding:0; cursor:pointer; font-size:15px; }
.foot-bot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:24px; font-size:14px; }
.foot p{ max-width:34ch; margin-top:16px; }
@media (max-width:860px){ .foot-top{ grid-template-columns:1fr 1fr; } .foot-top > :first-child{ grid-column:1/-1; } }

.cookie{ position:fixed; z-index:120; left:16px; right:16px; bottom:16px; max-width:520px; margin-inline:auto;
  background:var(--ink); color:var(--tx-cream); border-radius:var(--r-lg); padding:22px 22px 20px;
  box-shadow:0 24px 60px -20px rgba(21,22,14,.6); border:1px solid var(--line-dark);
  transform:translateY(20px); opacity:0; visibility:hidden; transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s .4s; }
.cookie.show{ transform:none; opacity:1; visibility:visible; transition:opacity .4s var(--ease), transform .4s var(--ease); }
.cookie h2{ font-size:20px; letter-spacing:-.01em; margin-bottom:8px; }
.cookie p{ font-size:15px; color:var(--tx-cream-mut); margin-bottom:16px; }
.cookie .btns .btn{ min-height:46px; font-size:15px; flex:1; }
@media (min-width:768px){ .cookie{ left:24px; right:auto; bottom:24px; } }

.wa-float{ position:fixed; right:18px; bottom:18px; z-index:100; width:58px; height:58px; border-radius:50%;
  background:var(--ink); color:var(--lime); display:grid; place-items:center; text-decoration:none;
  box-shadow:0 14px 30px -12px rgba(21,22,14,.55); border:1.5px solid var(--ink-3); transition:transform .25s var(--ease); }
.wa-float:hover{ transform:translateY(-2px); }
.wa-float svg{ width:28px; height:28px; }
body.cookie-open .wa-float{ opacity:0; pointer-events:none; }

/* =========================================================================
   Animación: contenido visible por defecto; se oculta solo si Motion cargó
   ========================================================================= */
.motion-ready [data-reveal]{ opacity:0; transform:translateY(22px); }
@media (prefers-reduced-motion:reduce){ .motion-ready [data-reveal]{ opacity:1; transform:none; } }

/* =========================================================================
   INICIO
   ========================================================================= */
.hero-home{ padding-block:clamp(48px,7vw,96px) 0; }
.hero-home .top{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:end; }
.hero-home h1 span{ display:block; }
.hero-home h1 .soft{ font-weight:300; }
.hero-home .side p{ font-size:clamp(17px,1.6vw,19px); color:var(--tx-mut); }
.hero-photo{ margin-top:clamp(32px,5vw,64px); position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/7; background:var(--ink); }
.hero-photo img{ width:100%; height:100%; object-fit:cover; }
.hero-photo figcaption{ position:absolute; left:16px; bottom:16px; background:var(--cream); color:var(--tx); font-size:14px; padding:8px 14px; border-radius:999px; }
@media (max-width:860px){ .hero-home .top{ grid-template-columns:1fr; } .hero-photo{ aspect-ratio:4/3; } }

/* Quiénes somos */
.who{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(32px,5vw,80px); align-items:start; }
.who .statement{ font:400 clamp(24px,3vw,36px)/1.3 var(--f-display); letter-spacing:-.015em; max-width:none; }
.who .statement em{ font-style:normal; background:linear-gradient(transparent 62%, color-mix(in srgb, var(--lime) 70%, transparent) 62%); }
.people{ list-style:none; margin:32px 0 0; padding:0; border-top:1px solid var(--line); }
.people li{ display:grid; grid-template-columns:52px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); align-items:start; }
.people .av{ width:52px; height:52px; border-radius:50%; background:var(--ink); color:var(--lime); display:grid; place-items:center; font:500 16px/1 var(--f-display); }
.people h3{ font-size:20px; letter-spacing:-.01em; }
.people .role{ color:var(--olive); font:500 14.5px/1.4 var(--f-display); margin:4px 0 6px; }
.people p{ margin:0; font-size:15.5px; color:var(--tx-mut); }
.who figure{ margin:0; border-radius:var(--r-lg); overflow:hidden; }
.who figure img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
@media (max-width:860px){ .who{ grid-template-columns:1fr; } }

/* Historia con hilo de micelio */
.story{ position:relative; }
.thread{ position:absolute; left:50%; top:0; bottom:0; width:120px; transform:translateX(-50%); pointer-events:none; }
.thread svg{ width:100%; height:100%; overflow:visible; }
.thread .base{ stroke:var(--line); }
.thread .grow{ stroke:var(--olive); }
.year{ display:grid; grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr); align-items:center; padding-block:clamp(28px,4vw,56px); }
.year .ph{ border-radius:var(--r-lg); overflow:hidden; background:var(--ink); }
.year .ph img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.year .node{ justify-self:center; width:18px; height:18px; border-radius:50%; background:var(--cream-2); border:2px solid var(--olive); position:relative; z-index:2; transition:background .4s var(--ease); }
.year.lit .node{ background:var(--lime); border-color:var(--olive-deep); }
.year .yr{ font:500 clamp(40px,5vw,64px)/1 var(--f-data); letter-spacing:-.04em; color:var(--olive); display:block; margin-bottom:12px; }
.year h3{ margin-bottom:.5em; }
.year p{ color:var(--tx-mut); margin:0; }
.year:nth-child(even) .ph{ order:3; } .year:nth-child(even) .node{ order:2; } .year:nth-child(even) .txt{ order:1; }
.year.next .yr{ color:var(--ink); }
.year.next .ph{ outline:2px solid var(--lime); outline-offset:6px; }
@media (max-width:760px){
  .thread{ left:0; transform:none; width:36px; }
  .year{ grid-template-columns:36px minmax(0,1fr); gap:0 16px; padding-block:28px; }
  .year .node{ grid-row:1; grid-column:1; align-self:start; margin-top:10px; }
  .year .ph, .year:nth-child(even) .ph{ grid-column:2; order:0; margin-bottom:18px; }
  .year .txt, .year:nth-child(even) .txt{ grid-column:2; order:0; text-align:left; }
  }

/* Cadena: cómo trabajamos */
.chain{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-top:1px solid var(--line-dark); }
.chain li{ padding:28px 24px 8px 0; position:relative; display:flex; flex-direction:column; gap:14px; }
.chain li + li{ padding-left:24px; border-left:1px solid var(--line-dark); }
.chain .step{ font:500 14px/1 var(--f-data); color:var(--lime); }
.chain img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r); }
.chain h3{ font-size:24px; }
.chain p{ color:var(--tx-cream-mut); font-size:15.5px; margin:0; }
.chain .tag{ align-self:flex-start; font:500 13px/1 var(--f-display); padding:7px 11px; border-radius:999px; border:1px solid var(--line-dark); color:var(--tx-cream); }
.chain .tag.soon{ background:var(--lime); color:var(--ink); border-color:var(--lime); }
@media (max-width:960px){ .chain{ grid-template-columns:1fr 1fr; } .chain li:nth-child(3){ border-left:0; padding-left:0; } .chain li:nth-child(n+3){ border-top:1px solid var(--line-dark); } }
@media (max-width:560px){ .chain{ grid-template-columns:1fr; } .chain li, .chain li + li{ border-left:0; padding-left:0; padding-right:0; } .chain li + li{ border-top:1px solid var(--line-dark); } .chain img{ aspect-ratio:16/10; } }

/* Hoy ofrecemos */
.offer{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.offer li{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto; gap:24px; padding:26px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.offer h3{ font-size:clamp(22px,2.4vw,28px); }
.offer p{ margin:0; color:var(--tx-mut); }
.offer .st{ font:500 13.5px/1 var(--f-display); padding:7px 12px; border-radius:999px; background:var(--paper); border:1px solid var(--line); white-space:nowrap; }
@media (max-width:760px){ .offer li{ grid-template-columns:1fr; gap:8px; } .offer .st{ justify-self:start; } }

/* Caminos */
.paths{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,24px); }
.path{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:clamp(380px,40vw,520px);
  border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:var(--tx-cream); isolation:isolate; }
.path img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .8s var(--ease); }
.path::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(21,22,14,0) 30%, rgba(21,22,14,.88) 100%); }
.path:hover img{ transform:scale(1.04); }
.path .in{ padding:clamp(22px,3vw,36px); }
.path h3{ font-size:clamp(30px,3.6vw,44px); margin-bottom:10px; }
.path p{ color:#D5D6C4; margin-bottom:18px; }
.path .go{ display:inline-flex; align-items:center; gap:10px; font:500 16px/1 var(--f-display); color:var(--lime); }
.path .go svg{ width:20px; height:20px; transition:transform .3s var(--ease); }
.path:hover .go svg{ transform:translateX(4px); }
@media (max-width:960px){ .paths{ grid-template-columns:1fr 1fr; } .paths .path:last-child{ grid-column:1/-1; } }
@media (max-width:620px){ .paths{ grid-template-columns:1fr; } .path{ min-height:340px; } }

/* Contacto */
.contact{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(32px,5vw,80px); }
.cinfo{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:2px; }
.cinfo a{ display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:center; padding:12px 0; text-decoration:none; border-bottom:1px solid var(--line-dark); }
.cinfo .ic{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line-dark); display:grid; place-items:center; color:var(--lime); }
.cinfo .ic svg{ width:20px; height:20px; }
.cinfo small{ display:block; color:var(--tx-cream-mut); font-size:13.5px; }
.cinfo strong{ font-weight:500; font-family:var(--f-display); font-size:17px; overflow-wrap:anywhere; }
.cinfo a:hover strong{ color:var(--lime); }
.socials{ display:flex; gap:10px; margin-top:24px; }
.socials a{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line-dark); display:grid; place-items:center; color:var(--tx-cream); }
.socials a:hover{ color:var(--lime); border-color:var(--lime); }
.socials svg{ width:20px; height:20px; }
@media (max-width:860px){ .contact{ grid-template-columns:1fr; } }

/* =========================================================================
   HONGOS
   ========================================================================= */
.hero-sub{ padding-block:clamp(48px,7vw,96px) clamp(32px,4vw,56px); }
.hero-sub h1{ font-size:clamp(42px,7vw,88px); max-width:14ch; }
.hero-sub .lead{ color:var(--tx-mut); margin-top:24px; }
.on-ink.hero-sub .lead{ color:var(--tx-cream-mut); }
.shrooms{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; }
.sh{ position:relative; grid-column:span 3; border:0; padding:0; margin:0; background:var(--ink); color:var(--tx-cream); text-align:left; cursor:pointer;
  border-radius:var(--r-lg); overflow:hidden; min-height:340px; display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate;
  outline:3px solid transparent; outline-offset:3px; transition:outline-color .25s var(--ease); }
.sh.big{ grid-column:span 6; min-height:440px; }
.sh.half{ grid-column:span 6; }
.sh img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .8s var(--ease), filter .4s var(--ease); }
.sh::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(21,22,14,0) 35%, rgba(21,22,14,.9) 100%); }
.sh:hover img{ transform:scale(1.04); }
.sh .in{ padding:20px; display:grid; gap:6px; }
.sh h3{ font-size:clamp(22px,2.2vw,30px); }
.sh .sci{ font-size:14px; color:#CDCEBB; font-style:italic; }
.sh .desc{ font-size:14.5px; color:#D9DAC9; margin:4px 0 0; max-width:40ch; }
.sh .pick{ position:absolute; top:14px; right:14px; height:40px; padding:0 14px 0 10px; border-radius:999px; background:var(--cream); color:var(--ink);
  display:inline-flex; align-items:center; gap:8px; font:500 14px/1 var(--f-display); }
.sh .pick svg{ width:18px; height:18px; }
.sh .pick .on{ display:none; }
.sh.is-picked{ outline-color:var(--lime); }
.sh .pick::after{ content:""; position:absolute; inset:-14px -14px auto auto; width:9999px; height:9999px; }
.sh .pick{ cursor:pointer; border:0; z-index:2; }
.sh .pick[aria-pressed="true"]{ background:var(--lime); }
.sh .pick[aria-pressed="true"] .on{ display:inline; } .sh .pick[aria-pressed="true"] .off{ display:none; }
.sh{ cursor:default; }
.sh .flag{ position:absolute; top:14px; left:14px; font:500 13px/1 var(--f-display); background:var(--ink); color:var(--lime); padding:8px 11px; border-radius:999px; }
.sh.no-photo{ background:var(--ink-3); }
.sh.no-photo::before{ background:none; }
.sh.no-photo .in{ height:100%; justify-content:end; }
.sh.no-photo .mark{ position:absolute; top:50%; left:50%; width:96px; height:96px; transform:translate(-50%,-62%); opacity:.9; }
@media (max-width:1024px){ .sh, .sh.half{ grid-column:span 6; } .sh.big{ grid-column:span 12; } }
@media (max-width:560px){ .sh, .sh.big, .sh.half{ grid-column:span 12; min-height:300px; } }

.tray{ position:sticky; bottom:16px; z-index:50; margin-top:28px; display:flex; align-items:center; gap:16px; justify-content:space-between;
  background:var(--ink); color:var(--tx-cream); border-radius:999px; padding:8px 8px 8px 22px; box-shadow:0 18px 40px -18px rgba(21,22,14,.6);
  max-width:640px; margin-inline:auto; }
.tray p{ margin:0; font:500 15.5px/1.3 var(--f-display); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tray .count{ font-family:var(--f-data); color:var(--lime); }
.tray .btn{ flex:none; }
@media (max-width:560px){ .tray{ border-radius:18px; flex-direction:column; align-items:stretch; padding:14px; gap:10px; } .tray p{ white-space:normal; } }

.ideas{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(32px,5vw,80px); align-items:start; }
.ideas .aside{ position:sticky; top:calc(var(--head-h) + 32px); }
.ideas .aside img{ border-radius:var(--r-lg); margin-top:28px; aspect-ratio:4/5; object-fit:cover; width:100%; }
@media (max-width:900px){ .ideas{ grid-template-columns:1fr; } .ideas .aside{ position:static; } .ideas .aside img{ aspect-ratio:16/10; } }

.strip{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.strip figure{ margin:0; }
.strip img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r); }
.strip figcaption{ font-size:14px; color:var(--tx-mut); margin-top:8px; }
@media (max-width:760px){ .strip{ grid-template-columns:1fr 1fr; } }

/* =========================================================================
   LABORATORIO
   ========================================================================= */
.hero-lab{ padding-block:clamp(48px,7vw,96px); }
.hero-lab .g{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center; }
.hero-lab h1{ font-size:clamp(42px,7vw,92px); }
.hero-lab h1 .soft{ display:block; font-weight:300; color:var(--lime); }
.hero-lab .lead{ color:var(--tx-cream-mut); margin:24px 0 32px; }
.hero-lab figure{ margin:0; position:relative; }
.hero-lab figure img{ border-radius:var(--r-lg); aspect-ratio:4/5; object-fit:cover; width:100%; }
.opening{ position:absolute; left:-18px; bottom:28px; background:var(--lime); color:var(--ink); border-radius:16px; padding:14px 18px; }
.opening b{ display:block; font:500 30px/1 var(--f-data); letter-spacing:-.03em; }
.opening span{ font:500 14px/1.3 var(--f-display); }
@media (max-width:860px){ .hero-lab .g{ grid-template-columns:1fr; } .hero-lab figure img{ aspect-ratio:4/3; } .opening{ left:12px; bottom:12px; } }

.prep{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(32px,5vw,80px); align-items:start; }
.prep ul{ list-style:none; margin:24px 0 0; padding:0; border-top:1px solid var(--line); }
.prep li{ padding:16px 0 16px 34px; border-bottom:1px solid var(--line); position:relative; }
.prep li svg{ position:absolute; left:0; top:19px; width:20px; height:20px; color:var(--olive); }
.prep .pics{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.prep .pics img{ border-radius:var(--r-lg); width:100%; aspect-ratio:3/4; object-fit:cover; }
.prep .pics img:last-child{ margin-top:48px; }
@media (max-width:860px){ .prep{ grid-template-columns:1fr; } }

.main-svc{ display:grid; gap:clamp(48px,7vw,96px); }
.svc{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(28px,5vw,72px); align-items:center; }
.svc:nth-child(even) figure{ order:2; }
.svc figure{ margin:0; }
.svc figure img{ border-radius:var(--r-lg); width:100%; aspect-ratio:4/3; object-fit:cover; }
.svc h3{ font-size:clamp(30px,3.6vw,46px); margin-bottom:.4em; }
.svc .for{ color:var(--olive); font:500 16px/1.4 var(--f-display); margin-bottom:18px; }
.measures{ list-style:none; margin:20px 0 26px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 24px; border-top:1px solid var(--line); }
.measures li{ padding:12px 0; border-bottom:1px solid var(--line); font-size:15.5px; }
@media (max-width:860px){ .svc{ grid-template-columns:1fr; } .svc:nth-child(even) figure{ order:0; } }
@media (max-width:480px){ .measures{ grid-template-columns:1fr; } }

/* Reporte de ejemplo */
.report-wrap{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,5vw,72px); align-items:start; }
@media (max-width:900px){ .report-wrap{ grid-template-columns:1fr; } }
.seg{ display:inline-flex; padding:4px; border-radius:999px; background:var(--ink-2); border:1px solid var(--line-dark); gap:4px; flex-wrap:wrap; }
.seg button{ min-height:44px; padding:0 18px; border-radius:999px; border:0; background:transparent; color:var(--tx-cream-mut); cursor:pointer; font:500 15px/1 var(--f-display); }
.seg button[aria-selected="true"]{ background:var(--lime); color:var(--ink); }
.report{ background:var(--paper); color:var(--tx); border-radius:var(--r-lg); padding:clamp(20px,3vw,32px); position:relative; }
.report .mock{ display:inline-block; font:500 12.5px/1 var(--f-display); background:var(--cream-2); color:var(--tx-mut); padding:7px 10px; border-radius:999px; margin-bottom:16px; }
.report header{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.report header h3{ font-size:22px; }
.report header .meta{ font-size:13.5px; color:var(--tx-mut); }
.report .scroll{ overflow-x:auto; }
.report table{ width:100%; border-collapse:collapse; min-width:440px; }
.report th{ text-align:left; font:500 13px/1.2 var(--f-display); color:var(--tx-mut); padding:12px 8px 8px 0; }
.report td{ padding:12px 8px 12px 0; border-top:1px solid var(--line); font-size:15px; vertical-align:middle; }
.report td.v{ font-family:var(--f-data); font-variant-numeric:tabular-nums; white-space:nowrap; }
.bar-cell{ width:34%; }
.meter{ height:8px; border-radius:99px; background:var(--cream-2); overflow:hidden; }
.meter i{ display:block; height:100%; width:var(--w); background:var(--olive); border-radius:99px; transform-origin:left; }
.meter.bad i{ background:#B5532F; }
.verdict{ display:inline-flex; align-items:center; gap:6px; font:500 13px/1 var(--f-display); padding:6px 10px; border-radius:999px; white-space:nowrap; }
.verdict.ok{ background:#E3EBB8; color:#3B4708; }
.verdict.no{ background:#F6DCD2; color:#8A2A12; }
.report .read{ margin:18px 0 0; padding:16px; border-radius:var(--r); background:var(--cream); font-size:15px; max-width:none; }
.report [role="tabpanel"][hidden]{ display:none; }

/* Proceso trazado */
.route{ position:relative; }
.route svg.trace{ position:absolute; left:0; top:28px; width:100%; height:4px; overflow:visible; }
.route ol{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px; position:relative; }
.route li{ padding-top:64px; position:relative; }
.route .dot{ position:absolute; top:12px; left:0; width:36px; height:36px; border-radius:50%; background:var(--cream); border:2px solid var(--olive); display:grid; place-items:center; font:500 14px/1 var(--f-data); color:var(--olive); }
.route h3{ font-size:20px; margin-bottom:8px; }
.route p{ font-size:15px; color:var(--tx-mut); margin:0; }
@media (max-width:900px){
  .route svg.trace{ display:none; }
  .route ol{ grid-template-columns:1fr; gap:0; border-left:2px solid var(--olive); margin-left:17px; }
  .route li{ padding:6px 0 28px 36px; }
  .route .dot{ left:-19px; top:0; }
}

/* Opcionales */
.extras{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; border-top:1px solid var(--line); }
.extras li{ padding:18px 0; border-bottom:1px solid var(--line); }
.extras h3{ font-size:19px; margin-bottom:4px; letter-spacing:-.01em; }
.extras p{ margin:0; font-size:15.5px; color:var(--tx-mut); }
@media (max-width:760px){ .extras{ grid-template-columns:1fr; } }
.honest{ margin-top:40px; padding:24px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--paper); display:grid; grid-template-columns:auto 1fr; gap:16px; }
.honest svg{ width:26px; height:26px; color:var(--olive); }
.honest p{ margin:0; }

.lab-form{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr); gap:clamp(32px,5vw,80px); }
@media (max-width:900px){ .lab-form{ grid-template-columns:1fr; } }

/* =========================================================================
   Legales
   ========================================================================= */
.legal{ padding-block:clamp(48px,7vw,96px); }
.legal .wrap{ max-width:820px; }
.legal h1{ font-size:clamp(38px,6vw,64px); margin-bottom:12px; }
.legal .upd{ color:var(--tx-mut); margin-bottom:40px; }
.legal h2{ font-size:clamp(22px,2.6vw,28px); margin:44px 0 12px; letter-spacing:-.015em; }
.legal ul{ padding-left:1.2em; max-width:66ch; }
.legal li{ margin-bottom:.5em; }
.legal .scroll{ overflow-x:auto; margin:16px 0; }
.legal table{ border-collapse:collapse; width:100%; min-width:520px; font-size:15px; }
.legal th, .legal td{ text-align:left; padding:12px 10px 12px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.legal th{ font:500 14px/1.2 var(--f-display); color:var(--tx-mut); }
.legal code{ font-family:var(--f-data); font-size:14px; }
.legal .note{ padding:18px 20px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); }

/* =========================================================================
   COMPOST
   ========================================================================= */
.hero-compost{ padding-block:clamp(48px,7vw,96px); }
.hero-compost .g{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center; }
.hero-compost h1{ font-size:clamp(42px,6.6vw,86px); margin:18px 0 0; }
.hero-compost .lead{ color:var(--tx-mut); margin:24px 0 32px; }
.hero-compost figure{ margin:0; }
.hero-compost figure img{ border-radius:var(--r-lg); width:100%; aspect-ratio:4/5; object-fit:cover; }
.hero-compost figcaption{ font-size:14px; color:var(--tx-mut); margin-top:10px; }
.status{ display:inline-flex; align-items:center; gap:10px; font:500 15px/1 var(--f-display); padding:10px 14px; border-radius:999px; background:var(--ink); color:var(--tx-cream); }
.pulse{ width:9px; height:9px; border-radius:50%; background:var(--lime); position:relative; }
@media (prefers-reduced-motion:no-preference){ .pulse::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--lime); animation:pulse 2.4s var(--ease) infinite; } }
@keyframes pulse{ from{ transform:scale(.6); opacity:1; } to{ transform:scale(1.9); opacity:0; } }
@media (max-width:860px){ .hero-compost .g{ grid-template-columns:1fr; } .hero-compost figure img{ aspect-ratio:4/3; } }

.trl{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:end; }
.trl-bars{ display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:8px; align-items:end; height:clamp(240px,30vw,340px); }
.lv{ position:relative; border:0; padding:0; cursor:pointer; border-radius:10px 10px 4px 4px; background:var(--ink-3); color:var(--tx-cream-mut);
  height:calc(var(--h) * 1%); min-height:44px; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; padding-top:10px; transition:background .3s var(--ease), color .3s var(--ease); }
.lv:nth-child(1){--h:20} .lv:nth-child(2){--h:29} .lv:nth-child(3){--h:38} .lv:nth-child(4){--h:47} .lv:nth-child(5){--h:56} .lv:nth-child(6){--h:65} .lv:nth-child(7){--h:74} .lv:nth-child(8){--h:87} .lv:nth-child(9){--h:100}
.lv.done{ background:color-mix(in srgb, var(--lime) 30%, var(--ink-3)); color:var(--tx-cream); }
.lv.mile{ background:color-mix(in srgb, var(--lime) 62%, var(--ink-3)); color:var(--ink); }
.lv.now{ background:var(--lime); color:var(--ink); }
.lv:not(.done){ background:transparent; border:1.5px dashed var(--line-dark); }
.lv .n{ font-size:15px; }
.lv .when{ position:absolute; bottom:calc(100% + 8px); font:500 13px/1 var(--f-data); color:var(--lime); }
.lv[aria-pressed="true"]{ outline:2.5px solid var(--tx-cream); outline-offset:3px; }
.trl-read .lvnum{ display:block; font-size:clamp(44px,6vw,72px); line-height:1; color:var(--lime); letter-spacing:-.04em; margin-bottom:14px; }
.trl-read h3{ margin-bottom:10px; }
.trl-read p{ color:var(--tx-cream-mut); }
.trl-bars .lv{ transform-origin:bottom; }
@media (max-width:860px){ .trl{ grid-template-columns:1fr; } .trl-bars{ gap:5px; } .lv .when{ font-size:11px; } }

.proc{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.proc li{ display:grid; grid-template-columns:minmax(0,.55fr) minmax(0,1.3fr) minmax(0,.9fr); gap:clamp(20px,3vw,48px); padding:clamp(24px,3vw,40px) 0; border-bottom:1px solid var(--line); align-items:start; }
.proc .when{ font-size:clamp(20px,2vw,26px); color:var(--olive); padding-top:4px; }
.proc .txt h3{ margin-bottom:.45em; }
.proc .txt p{ color:var(--tx-mut); margin:0; }
.proc img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); }
.proc li.now .when{ color:var(--ink); background:var(--lime); justify-self:start; padding:8px 12px; border-radius:999px; font-size:18px; }
@media (max-width:760px){ .proc li{ grid-template-columns:1fr; gap:12px; } .proc img{ aspect-ratio:16/10; } }

.today{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(28px,5vw,72px); align-items:start; }
.today .measures{ margin-top:0; }
@media (max-width:860px){ .today{ grid-template-columns:1fr; } }

.eco{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; }
.eco figure{ margin:0; min-width:0; }
.eco img{ width:100%; height:100%; object-fit:cover; border-radius:var(--r); }
.eco figcaption{ font-size:14px; color:var(--tx-mut); margin-top:8px; }
.eco .e1{ grid-column:span 4; grid-row:span 2; } .eco .e1 img{ aspect-ratio:3/4; height:auto; }
.eco .e2{ grid-column:span 8; } .eco .e2 img{ aspect-ratio:16/8; height:auto; }
.eco .e3, .eco .e4{ grid-column:span 4; } .eco .e3 img, .eco .e4 img{ aspect-ratio:4/3; height:auto; }
@media (max-width:760px){ .eco .e1, .eco .e2, .eco .e3, .eco .e4{ grid-column:span 12; grid-row:auto; } .eco .e1 img{ aspect-ratio:4/3; } .eco .e2 img{ aspect-ratio:16/10; } }
.eco-list{ list-style:none; margin:40px 0 0; padding:0; border-top:1px solid var(--line); max-width:820px; }
.eco-list li{ display:grid; grid-template-columns:80px 1fr; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
.eco-list .num{ color:var(--olive); font-size:15px; padding-top:2px; }

/* Hijos de grillas sin desborde */
.who > *, .contact > *, .ideas > *, .hero-home .top > *, .hero-lab .g > *, .hero-compost .g > *, .prep > *, .svc > *,
.report-wrap > *, .lab-form > *, .trl > *, .today > *, .proc li > *, .paths > *, .shrooms > *, .strip > *, .year > *{ min-width:0; }
.foot a{ overflow-wrap:anywhere; }
@media (max-width:520px){ .foot-top{ grid-template-columns:1fr; } }
.hero-photo{ margin:clamp(32px,5vw,64px) 0 0; }
.sh.no-photo .in{ height:auto; }
.sh.no-photo .mark{ top:42%; }
@media (max-width:560px){
  .report .bar-cell{ display:none; }
  .report table{ min-width:0; }
  .hero-photo figcaption{ font-size:13px; padding:6px 12px; left:10px; bottom:10px; }
}

/* =========================================================================
   v2: marca del libro, movimiento y portadas con video
   ========================================================================= */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vt-out .35s var(--ease) both; }
::view-transition-new(root){ animation:vt-in .55s var(--ease) both; }
@keyframes vt-out{ to{ opacity:0; transform:translateY(-10px); } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(14px); } }
@media (prefers-reduced-motion:reduce){ ::view-transition-old(root), ::view-transition-new(root){ animation:none; } }

.brand span{ font-weight:500; }
.lead{ font-weight:400; }
h3{ font-weight:500; }

/* Titulares por palabra y entradas (solo si Motion cargó) */
[data-split] .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em; }
[data-split] .wi{ display:inline-block; will-change:transform; }
.motion-ready [data-split] .wi{ transform:translateY(105%); opacity:0; }
.motion-ready [data-fade], .motion-ready [data-stagger] > *, .motion-ready .year .txt, .motion-ready [data-proc] > li > *{ opacity:0; }
.motion-ready [data-clip]{ clip-path:inset(16% 12% 16% 12% round 20px); }
.clip{ overflow:hidden; border-radius:var(--r-lg); margin:0; }
.clip img{ border-radius:0 !important; }
[data-parallax]{ scale:1.16; }

/* Portada Inicio: micelio */
.hero-myc{ position:relative; min-height:calc(100svh - var(--head-h)); display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; padding-block:clamp(96px,14vh,160px) clamp(56px,9vh,96px); }
.hero-myc .myc{ position:absolute; inset:0; width:100%; height:100%; z-index:-2; touch-action:pan-y; }
.hero-myc::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(26,27,22,0) 0%, rgba(26,27,22,.25) 35%, rgba(26,27,22,.88) 72%, rgba(26,27,22,.96) 100%); }
.hero-myc-in{ width:100%; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:end; }
.hero-myc h1{ font-size:clamp(46px,min(8vw,12.5vh),120px); max-width:12ch; color:var(--tx-cream); }
.hero-myc-side p{ color:var(--tx-cream-mut); font-size:clamp(17px,1.5vw,19px); }
.hero-myc .hint{ position:absolute; right:var(--gut); top:28px; margin:0; font:400 13px/1.3 var(--f-data); color:var(--tx-cream-mut); max-width:26ch; text-align:right; }
@media (hover:none){ .hero-myc .hint{ display:none; } }
@media (max-width:860px){ .hero-myc-in{ grid-template-columns:1fr; } .hero-myc::before{ background:linear-gradient(180deg, rgba(26,27,22,0) 10%, rgba(26,27,22,.9) 70%); } }

/* Cinta de frases */
.marquee{ background:var(--lime); color:var(--ink); overflow:hidden; border-block:1px solid var(--olive); }
.mq-track{ display:flex; align-items:center; gap:28px; width:max-content; padding-block:18px; animation:mq 38s linear infinite; }
.mq-track span{ font:400 clamp(20px,2.4vw,30px)/1 var(--f-display); white-space:nowrap; letter-spacing:-.01em; }
.mq-track i{ width:12px; height:12px; border-radius:50%; background:var(--olive); flex:none; box-shadow:18px -8px 0 -3px var(--olive), -14px 6px 0 -4px var(--olive); }
.marquee:hover .mq-track{ animation-play-state:paused; }
@keyframes mq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .mq-track{ animation:none; flex-wrap:wrap; width:auto; padding-inline:var(--gut); } .mq-track [aria-hidden], .mq-track i:nth-of-type(n+3){ display:none; } }

/* Esencia */
.essence{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(32px,6vw,96px); align-items:center; }
.essence figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.pillars{ list-style:none; margin:36px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-top:1px solid var(--line); }
.pillars li{ padding:20px 18px 0 0; min-width:0; }
.pillars li + li{ padding-left:18px; border-left:1px solid var(--line); }
.pillars h3{ font-size:22px; margin-bottom:8px; color:var(--olive); }
.pillars p{ font-size:15.5px; color:var(--tx-mut); margin:0; }
@media (max-width:900px){ .essence{ grid-template-columns:1fr; } .essence figure img{ aspect-ratio:16/11; } }
@media (max-width:560px){ .pillars{ grid-template-columns:1fr; } .pillars li, .pillars li + li{ padding:16px 0; border-left:0; border-bottom:1px solid var(--line); } }

/* Misión, visión, valores */
.mv-t{ font-size:clamp(40px,6.5vw,84px); font-weight:300; margin-bottom:clamp(36px,5vw,64px); }
.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); }
.mv-grid > *{ min-width:0; padding-top:24px; border-top:1px solid var(--line-dark); }
.mv-grid h3{ font-size:clamp(26px,2.6vw,34px); color:var(--lime); margin-bottom:14px; font-weight:400; }
.mv-grid p{ font-size:clamp(17px,1.6vw,20px); line-height:1.6; color:var(--tx-cream); }
.values-t{ margin:clamp(48px,7vw,88px) 0 12px; font-size:18px; color:var(--tx-cream-mut); font-weight:500; }
.values{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-dark); }
.values li{ font:400 clamp(22px,3vw,38px)/1.25 var(--f-display); padding:16px 0 16px 34px; border-bottom:1px solid var(--line-dark); position:relative; letter-spacing:-.015em; }
.values li::before{ content:""; position:absolute; left:0; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; background:var(--grad); }
@media (max-width:760px){ .mv-grid{ grid-template-columns:1fr; } }

/* Esporas decorativas en secciones oscuras */
.spores{ position:relative; isolation:isolate; overflow:hidden; }
.spores::before{ content:""; position:absolute; inset:-20% 0 0; z-index:-1; pointer-events:none; opacity:.55;
  background-image:radial-gradient(circle, rgba(230,222,10,.55) 1.2px, transparent 1.6px), radial-gradient(circle, rgba(140,146,6,.5) 1px, transparent 1.4px);
  background-size:140px 160px, 90px 110px; background-position:0 0, 40px 60px; animation:drift 60s linear infinite; }
@keyframes drift{ to{ transform:translateY(-20%); } }
@media (prefers-reduced-motion:reduce){ .spores::before{ animation:none; } }

/* Caminos con estado */
.path .state{ align-self:flex-start; display:inline-flex; font:500 13.5px/1 var(--f-display); padding:8px 12px; border-radius:999px; background:var(--lime); color:var(--ink); margin-bottom:14px; }

/* Portada con video (Hongos) */
.hero-video{ position:relative; min-height:clamp(520px,78svh,820px); display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; padding-block:clamp(72px,10vw,120px) clamp(48px,7vw,80px); }
.bgv{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transform-origin:center top; }
.hero-video::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(26,27,22,.35) 0%, rgba(26,27,22,.55) 45%, rgba(26,27,22,.94) 100%); }
.hero-video h1{ font-size:clamp(42px,7vw,96px); max-width:14ch; color:var(--tx-cream); }
.hero-video .lead{ color:#E3E2D6; max-width:58ch; margin:22px 0 28px; }
.hero-video .btn-line{ color:var(--tx-cream); }

/* Mosaico de hongos seleccionables */
.tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.tile{ position:relative; display:block; aspect-ratio:1/1; border:0; padding:0; border-radius:var(--r-lg); overflow:hidden; cursor:pointer; background:var(--ink); color:var(--tx-cream); text-align:left; isolation:isolate;
  outline:3px solid transparent; outline-offset:3px; transition:outline-color .25s var(--ease), transform .35s var(--ease); min-width:0; }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .9s var(--ease), filter .4s var(--ease); }
.tile::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(26,27,22,0) 45%, rgba(26,27,22,.85) 100%); transition:background .3s var(--ease); }
.tile:hover img{ transform:scale(1.07); }
.tile:active{ transform:scale(.98); }
.tile .tn{ position:absolute; left:16px; right:16px; bottom:14px; display:grid; gap:2px; }
.tile .tn b{ font:500 clamp(18px,1.8vw,24px)/1.1 var(--f-display); }
.tile .tn i{ font-size:13.5px; color:#D6D6C6; }
.tile .tk{ position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--cream); color:var(--ink); }
.tile .tk svg{ width:20px; height:20px; grid-area:1/1; }
.tile .tk .on{ display:none; }
.tile[aria-pressed="true"]{ outline-color:var(--lime); }
.tile[aria-pressed="true"] .tk{ background:var(--lime); }
.tile[aria-pressed="true"] .tk .on{ display:block; } .tile[aria-pressed="true"] .tk .off{ display:none; }
.tile[aria-pressed="true"]::before{ background:linear-gradient(180deg, rgba(92,104,3,.25) 0%, rgba(26,27,22,.85) 100%); }
.tile.no-photo{ background:var(--ink-3); }
.tile.no-photo .mark{ position:absolute; inset:auto; top:30%; left:50%; width:30%; height:auto; transform:translateX(-50%); object-fit:contain; }
.tile:focus-visible{ outline-color:var(--olive); }
@media (max-width:900px){ .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.tray-note{ margin-top:22px; padding:16px 18px; border-radius:var(--r); background:var(--paper); border:1px solid var(--line); font:500 15.5px/1.4 var(--f-display); }
.tray-note .count{ font-family:var(--f-data); color:var(--olive); }

/* Video dentro de portadas de Compost y Laboratorio */
.vframe{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--ink); aspect-ratio:4/5; }
.vframe video{ width:100%; height:100%; object-fit:cover; display:block; }
.vid-toggle.mini{ position:absolute; right:12px; bottom:12px; width:44px; height:44px; border-radius:50%; border:0; background:rgba(26,27,22,.72); color:var(--tx-cream); display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(6px); }
.vid-toggle.mini svg{ width:18px; height:18px; grid-area:1/1; }
.vid-toggle.mini .pl{ display:none; }
.vid-toggle.mini[aria-pressed="true"] .pl{ display:block; } .vid-toggle.mini[aria-pressed="true"] .pz{ display:none; }
.hero-lab .opening{ z-index:2; }
@media (max-width:860px){ .vframe{ aspect-ratio:4/3.4; } }

/* Hover más vivo en caminos y botones */
.path{ transition:transform .5s var(--ease); }
.path:hover{ transform:translateY(-4px); }
.btn:hover{ transform:translateY(-1px); }

/* =========================================================================
   SOCIOS
   ========================================================================= */
.hero-net{ padding-block:clamp(48px,7vw,96px); }
.hero-net .g{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:center; }
.hero-net .g > *{ min-width:0; }
.hero-net h1{ font-size:clamp(44px,7vw,96px); margin:18px 0 0; max-width:12ch; }
.hero-net .lead{ color:var(--tx-cream-mut); margin:24px 0 32px; }
.hero-net .status{ background:var(--ink-3); }
.net{ width:100%; height:auto; overflow:visible; }
.net .nl{ fill:none; stroke:url(#none); stroke:var(--micelio); stroke-width:2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; }
.net .ns{ fill:var(--lime); }
.net .nn circle{ fill:var(--ink-2); stroke:var(--micelio); stroke-width:1.5; }
.net .nn .core{ fill:var(--lime); stroke:none; }
.net .nn text{ fill:var(--tx-cream); font:500 19px var(--f-display); }
.net .hub-ring{ fill:var(--ink); stroke:var(--lime); stroke-width:2; }
@media (prefers-reduced-motion:no-preference){
  .net .nl{ stroke-dashoffset:1; animation:draw 1.4s var(--ease) forwards; animation-delay:var(--d); }
  .net .nn{ opacity:0; transform-box:fill-box; transform-origin:center; animation:pop .7s var(--ease) forwards; animation-delay:var(--d); }
  .net .hub-ring{ animation:ring 3.2s var(--ease) infinite; transform-box:fill-box; transform-origin:center; }
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes pop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
@keyframes ring{ 0%,100%{ stroke-width:2; } 50%{ stroke-width:6; } }
@media (max-width:860px){ .hero-net .g{ grid-template-columns:1fr; } .net-wrap{ max-width:460px; margin-inline:auto; width:100%; } }

/* Scrollytelling: imagen fija que cambia con cada forma de aporte */
.scr{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); }
.scr > *{ min-width:0; }
.scr-fig{ position:sticky; top:calc(var(--head-h) + 32px); height:min(72vh,620px); border-radius:var(--r-lg); overflow:hidden; background:var(--ink); }
.scr-fig img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.08); transition:opacity .7s var(--ease), transform 1.2s var(--ease); }
.scr-fig img.on{ opacity:1; transform:none; }
.scr-count{ position:absolute; left:18px; bottom:16px; background:var(--lime); color:var(--ink); padding:8px 14px; border-radius:999px; font-size:15px; }
.scr-steps{ display:grid; }
.scr-step{ min-height:min(72vh,620px); display:flex; flex-direction:column; justify-content:center; padding-block:32px; border-top:1px solid var(--line); opacity:.35; transition:opacity .5s var(--ease); }
.scr-step:first-child{ border-top:0; }
.scr-step.on{ opacity:1; }
.scr-step .scr-n{ color:var(--olive); font-size:14px; }
.scr-step .scr-tag{ align-self:flex-start; margin:14px 0 10px; font:500 14px/1 var(--f-display); padding:8px 12px; border-radius:999px; background:var(--cream-2); color:var(--olive-deep); }
.scr-step h3{ font-size:clamp(30px,3.6vw,48px); font-weight:400; margin-bottom:14px; }
.scr-step p{ color:var(--tx-mut); font-size:clamp(17px,1.5vw,19px); }
.scr-step .link{ align-self:flex-start; margin-top:6px; min-height:44px; display:inline-flex; align-items:center; }
.scr-inline{ display:none; }
@media (max-width:860px){
  .scr{ grid-template-columns:1fr; }
  .scr-fig{ display:none; }
  .scr-step{ min-height:0; opacity:1; padding-block:28px; }
  .scr-inline{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r); margin-bottom:16px; }
}

/* Cuatro pasos */
.route ol.r4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px){ .route ol.r4{ grid-template-columns:1fr; } }

/* Banda de donaciones con el degradado firma */
.donate{ background:var(--grad); color:var(--ink); padding-block:clamp(56px,8vw,104px); }
.dn{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:end; }
.dn > *{ min-width:0; }
.dn h2{ font-weight:400; }
.dn p{ font-size:clamp(17px,1.6vw,20px); color:var(--ink); margin-bottom:24px; }
@media (max-width:760px){ .dn{ grid-template-columns:1fr; } }

/* Cinco pestañas en celular */
@media (max-width:480px){
  .tabs a{ padding:0 4px; font-size:13px; gap:5px; }
  .tabs a svg{ width:15px; height:15px; }
}
@media (max-width:370px){ .tabs a[href="index.html"] .t-short, .tabs a[href="/"] .t-short{ display:none; } }

/* Compost: secuencia de crecimiento que avanza con el scroll */
.grow-seq{ position:relative; height:calc(var(--n) * 70vh + 30vh); }
.gs-sticky{ position:sticky; top:var(--head-h); height:calc(100svh - var(--head-h)); display:flex; align-items:center; overflow:hidden; }
.gs-g{ width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:center; }
.gs-g > *{ min-width:0; }
.gs-left h2{ margin-bottom:.4em; }
.gs-txts{ position:relative; min-height:250px; margin-top:clamp(24px,4vh,48px); }
.gtxt{ position:absolute; inset:0 0 auto 0; opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .6s var(--ease); }
.gtxt.on{ opacity:1; transform:none; }
.gtxt .num{ color:var(--lime); font-size:14px; }
.gtxt h3{ font-size:clamp(28px,3.2vw,42px); font-weight:400; margin:10px 0 12px; }
.gtxt p{ color:var(--tx-cream-mut); font-size:clamp(17px,1.5vw,19px); }
.gs-bar{ position:relative; height:3px; background:var(--line-dark); border-radius:3px; margin-top:24px; }
.gs-bar b{ position:absolute; inset:0 auto 0 0; width:calc(var(--p,0) * 100%); background:var(--grad); border-radius:3px; }
.gs-bar i{ position:absolute; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; background:var(--ink-3); border:2px solid var(--micelio); }
.gs-frame{ position:relative; height:min(72svh,680px); border-radius:var(--r-lg); overflow:hidden; background:var(--ink-2); }
.gs-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(calc(1.02 + var(--z,0) * .12)); transition:opacity .6s var(--ease); }
.gs-frame img.on{ opacity:1; }
@media (max-width:860px){
  .grow-seq{ height:calc(var(--n) * 80vh + 20vh); }
  .gs-g{ grid-template-columns:1fr; gap:16px; align-content:center; }
  .gs-frame{ order:-1; height:44svh; }
  .gs-left h2{ font-size:28px; } .gs-left > p.mut{ display:none; }
  .gs-txts{ min-height:170px; margin-top:12px; }
}
@media (prefers-reduced-motion:reduce){
  .grow-seq{ height:auto; }
  .gs-sticky{ position:static; height:auto; padding-block:72px; }
  .gs-frame{ height:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; background:none; }
  .gs-frame img{ position:static; opacity:1; transform:none; aspect-ratio:3/4; border-radius:10px; }
  .gtxt{ position:static; opacity:1; transform:none; margin-bottom:16px; }
  .gs-bar{ display:none; }
}

/* Socios: micelio vivo y canal científico */
.hero-net{ position:relative; overflow:hidden; isolation:isolate; }
.hero-net .myc{ position:absolute; inset:0; width:100%; height:100%; z-index:-2; touch-action:pan-y; opacity:.85; }
.hero-net::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg, rgba(26,27,22,.92) 0%, rgba(26,27,22,.6) 50%, rgba(26,27,22,.25) 100%); }
.cn{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); gap:clamp(28px,5vw,72px); align-items:center; }
.cn > *{ min-width:0; }
.cn h2{ margin:18px 0 .4em; }
.cn .status{ background:var(--ink-3); }
.cn-list{ list-style:none; margin:20px 0 28px; padding:0; border-top:1px solid var(--line-dark); }
.cn-list li{ padding:12px 0 12px 28px; border-bottom:1px solid var(--line-dark); position:relative; }
.cn-list li::before{ content:""; position:absolute; left:0; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:var(--lime); }
.cn-video{ margin:0; }
.cn-video video{ width:100%; height:auto; aspect-ratio:16/9; border-radius:var(--r-lg); background:var(--ink-2); display:block; }
.cn-video figcaption{ font-size:14px; color:var(--tx-cream-mut); margin-top:10px; }
@media (max-width:900px){ .cn{ grid-template-columns:1fr; } .cn-video{ order:-1; } .hero-net::before{ background:linear-gradient(180deg, rgba(26,27,22,.9) 0%, rgba(26,27,22,.7) 60%, rgba(26,27,22,.5) 100%); } }

/* Ajustes de celular */
.tile::before{ background:linear-gradient(180deg, rgba(26,27,22,0) 35%, rgba(26,27,22,.55) 60%, rgba(26,27,22,.92) 100%); }
.tile .tn b, .tile .tn i{ text-shadow:0 1px 8px rgba(26,27,22,.6); }
.report .mock{ font-size:13px; }
.wa-float{ transition:transform .25s var(--ease), opacity .3s var(--ease); }
.wa-float.hide{ opacity:0; pointer-events:none; transform:translateY(12px); }
@media (max-width:860px){
  .lv .when{ font-size:12px; }
  .wa-float{ width:52px; height:52px; right:14px; bottom:14px; }
  .wa-float svg{ width:25px; height:25px; }
  .sec{ padding-block:clamp(56px,14vw,96px); }
  .hero-myc{ min-height:calc(88svh - var(--head-h)); }
}

.cn-ideas{ background:var(--ink-2); border:1px solid var(--line-dark); border-radius:var(--r-lg); padding:clamp(20px,3vw,32px); }
.cn-ideas h3{ font-size:22px; margin-bottom:16px; }
.cn-ideas ol{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.cn-ideas li{ display:grid; grid-template-columns:112px 1fr; gap:16px; align-items:center; padding:10px; border-radius:var(--r); background:var(--ink); }
.cn-ideas li > *{ min-width:0; }
.cn-ideas img{ width:112px; height:72px; object-fit:cover; border-radius:8px; }
.cn-ideas b{ display:block; font:500 18px/1.25 var(--f-display); color:var(--tx-cream); }
.cn-ideas span{ display:block; font-size:15px; color:var(--tx-cream-mut); margin-top:2px; }
.cn-note{ margin:18px 0 0; color:var(--lime); font:500 17px/1.4 var(--f-display); }
@media (max-width:900px){ .cn-ideas{ order:0; } }
@media (max-width:420px){ .cn-ideas li{ grid-template-columns:84px 1fr; } .cn-ideas img{ width:84px; height:64px; } }
.cn{ align-items:start; } .cn-ideas{ margin-top:clamp(0px,4vw,56px); }
.brand{ min-height:44px; } .tabs a{ min-height:44px; } .tabs a[aria-current="page"]{ min-height:38px; }