/* Alterra. Narrativa cartográfica: el lector baja desde 120 m hasta su lote.
   Pantalla completa con el campo visto desde arriba, secciones fijadas que cuentan el diagnóstico,
   y la rampa de vigor (terracota, trigo, verde) como sistema de color con significado. */

:root{
  /* marca */
  --campo:#42592E; --pasto:#61794F; --brote:#8EA578; --trigo:#DCCAA5; --trigo-l:#E6D8B8;
  --crema:#F2E7CC; --terra:#B46A3C; --terra-l:#D79068; --carbon:#2E2E2E;
  /* superficies */
  --noche:#252821; --noche-2:#1C1F19;
  --papel:#EDECE3; --papel-2:#E3E1D4; --tarjeta:#F6F5EE;
  --fg:#2E2E2E; --muted:#5B5F52; --linea:rgba(46,46,46,.16); --linea-2:rgba(46,46,46,.32);
  --verde-texto:#42592E; --dron:#2E2E2E; --dron-l:#8EA578;
  /* logo sobre fondo claro (versión positiva aprobada) */
  --lp-dg:#61794F; --lp-lg:#8EA578; --lp-bg:#DCCAA5; --lp-tr:#D79068; --lp-cr:#42592E; --lp-cv:#42592E; --lp-dr:#2E2E2E; --lp-lt:#42592E;
  /* tipografía */
  --f-display:"Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-text:"Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-hero:clamp(3.05rem, 1.2rem + 7.6vw, 9.6rem);
  --t-h2:clamp(2.25rem, 1.35rem + 3.7vw, 5rem);
  --t-h3:clamp(1.3rem, 1.12rem + .7vw, 1.75rem);
  --t-lede:clamp(1.1rem, 1rem + .42vw, 1.36rem);
  --t-body:1.0625rem; --t-small:.875rem; --t-micro:.78rem;
  /* movimiento: planeo, entra rápido y se posa lento */
  --planeo:cubic-bezier(.16,.74,.12,1);
  --gutter:clamp(20px, 5vw, 72px);
  --hdr:72px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papel:#1E211B; --papel-2:#252920; --tarjeta:#2B2F26; --noche:#171914; --noche-2:#11130F;
    --fg:#ECE5D2; --muted:#B0B2A2; --linea:rgba(242,231,204,.14); --linea-2:rgba(242,231,204,.3); --verde-texto:#A9BD8F; --dron:#E6D8B8; --dron-l:#8EA578;
    --lp-dg:#61794F; --lp-lg:#8EA578; --lp-bg:#E6D8B8; --lp-tr:#D79068; --lp-cr:#F2E7CC; --lp-cv:#F2E7CC; --lp-dr:#C9C2AE; --lp-lt:#F2E7CC;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --papel:#1E211B; --papel-2:#252920; --tarjeta:#2B2F26; --noche:#171914; --noche-2:#11130F;
  --fg:#ECE5D2; --muted:#B0B2A2; --linea:rgba(242,231,204,.14); --linea-2:rgba(242,231,204,.3); --verde-texto:#A9BD8F; --dron:#E6D8B8; --dron-l:#8EA578;
  --lp-dg:#61794F; --lp-lg:#8EA578; --lp-bg:#E6D8B8; --lp-tr:#D79068; --lp-cr:#F2E7CC; --lp-cv:#F2E7CC; --lp-dr:#C9C2AE; --lp-lt:#F2E7CC;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--papel); color:var(--fg); font-family:var(--f-text); font-size:var(--t-body); line-height:1.62; font-weight:400; overflow-x:hidden; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:60; background:var(--noche)}
img,svg,canvas{display:block; max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display); font-weight:330; margin:0; text-wrap:balance; font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 0; letter-spacing:-.012em}
p{margin:0}
:focus-visible{outline:2px solid var(--terra-l); outline-offset:3px; border-radius:2px}
.wrap{max-width:1360px; margin-inline:auto; padding-left:max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right:max(var(--gutter), env(safe-area-inset-right, 0px))}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- logo oficial (símbolos con colores por variables) ---------- */
.logo{display:block; height:auto}
.logo path{stroke:var(--l-stk, none); stroke-width:var(--l-sw, 0); stroke-linejoin:round}
.logo--pos{--l-dg:var(--lp-dg); --l-lg:var(--lp-lg); --l-bg:var(--lp-bg); --l-tr:var(--lp-tr); --l-cr:var(--lp-cr); --l-cv:var(--lp-cv); --l-dr:var(--lp-dr); --l-lt:var(--lp-lt)}
.logo--mono{--l-dg:var(--mono); --l-lg:var(--mono); --l-bg:var(--mono); --l-tr:var(--mono); --l-cr:var(--mono); --l-cv:var(--mono); --l-dr:var(--mono); --l-lt:var(--mono); --l-stk:var(--mono); --l-sw:5; --mono:#F2E7CC}
.logo--principal{--l-dg:#61794F; --l-lg:#8EA578; --l-bg:#E6D8B8; --l-tr:#D79068; --l-cr:#F2E7CC; --l-cv:#F2E7CC; --l-dr:#2E2E2E; --l-lt:#F2E7CC}

/* ---------- botones ---------- */
.btn{display:inline-flex; align-items:center; gap:.6em; min-height:52px; padding:0 1.5rem; border-radius:4px; font:500 1rem/1 var(--f-text); text-decoration:none; letter-spacing:.005em; border:1px solid transparent; cursor:pointer; transition:background-color .35s var(--planeo), color .35s var(--planeo), transform .35s var(--planeo), border-color .35s var(--planeo)}
.btn svg{width:20px; height:20px; flex:none}
.btn--crema{background:var(--crema); color:#23261F}
.btn--crema:hover{background:#fff8e6; transform:translateY(-2px)}
.btn--campo{background:var(--campo); color:var(--crema)}
.btn--campo:hover{background:#364a25; transform:translateY(-2px)}
.btn--linea{border-color:currentColor; background:transparent}
.btn--linea:hover{background:color-mix(in srgb, currentColor 10%, transparent)}
.lnk{display:inline-flex; align-items:center; gap:.5em; font-weight:500; text-decoration:none; padding-block:.6rem; background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat; transition:background-size .5s var(--planeo)}
.lnk:hover{background-size:40% 1px}

/* ---------- marcadores de pendiente (maqueta) ---------- */
.pend{display:inline-block; font:500 var(--t-micro)/1.35 var(--f-text); letter-spacing:.02em; padding:.25rem .55rem; border:1px dashed currentColor; border-radius:3px; opacity:.85; vertical-align:middle}
.hueco{position:relative; display:grid; place-items:center; text-align:center; padding:1.5rem; border:1px dashed var(--linea-2); color:var(--muted);
  background:repeating-linear-gradient(135deg, transparent 0 14px, var(--linea) 14px 15px)}
.hueco p{max-width:30ch; font-size:var(--t-small); line-height:1.5}
.hueco strong{display:block; font-family:var(--f-display); font-weight:400; font-size:1.15rem; color:var(--fg); margin-bottom:.35rem; font-variation-settings:"opsz" 24, "SOFT" 100}

/* ---------- encabezado ---------- */
.hdr{position:fixed; z-index:50; top:env(safe-area-inset-top, 0px); left:0; right:0; height:var(--hdr); color:var(--crema); transition:background-color .5s var(--planeo), color .5s var(--planeo), box-shadow .5s var(--planeo)}
.hdr__in{height:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem}
.hdr__logo{display:block; width:clamp(140px, 13vw, 176px); text-decoration:none}
.hdr__logo .logo--pos{display:none}
.hdr__acts{display:flex; align-items:center; gap:.75rem}
@media (max-width:899px){.hdr__cta{display:none!important}}
.hdr__cta{min-height:42px; padding:0 1.1rem; font-size:.95rem; opacity:0; visibility:hidden; transform:translateY(-6px)}
.hdr.is-solid .hdr__cta{opacity:1; visibility:visible; transform:none}
.menu-btn{display:inline-flex; align-items:center; gap:.65rem; min-height:44px; padding:0 .4rem; background:none; border:0; color:inherit; font:500 .95rem/1 var(--f-text); cursor:pointer}
.menu-btn i{position:relative; width:22px; height:9px; display:block}
.menu-btn i::before,.menu-btn i::after{content:""; position:absolute; left:0; right:0; height:1.5px; background:currentColor; transition:transform .45s var(--planeo)}
.menu-btn i::before{top:0} .menu-btn i::after{bottom:0; left:7px}
.hdr.is-solid{box-shadow:0 1px 0 var(--linea)}
.hdr.is-solid[data-tone="light"]{background:var(--papel); color:var(--fg)}
.hdr.is-solid[data-tone="dark"]{background:var(--noche); color:var(--crema)}
.hdr[data-tone="light"].is-solid .hdr__logo .logo--mono{display:none}
.hdr[data-tone="light"].is-solid .hdr__logo .logo--pos{display:block}
.hdr[data-tone="light"].is-solid .hdr__cta{background:var(--campo); color:var(--crema)}

/* ---------- altímetro (índice lateral) ---------- */
.alti{position:fixed; z-index:40; right:max(18px, env(safe-area-inset-right, 0px)); top:50%; transform:translateY(-50%); display:none; color:var(--crema); transition:color .5s var(--planeo)}
.alti[data-tone="light"]{color:var(--fg)}
.alti__read{font:500 .8rem/1 var(--f-text); text-align:right; margin-bottom:14px; letter-spacing:.02em}
.alti__read b{display:block; font:340 1.9rem/1 var(--f-display); font-variation-settings:"opsz" 72, "SOFT" 100; letter-spacing:-.01em; margin-bottom:4px}
.alti__scale{position:relative; width:46px; height:min(46vh, 380px); margin-left:auto;
  background:repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 100%) right top/10px calc(100% / 12) repeat-y; opacity:.9}
.alti__scale::after{content:""; position:absolute; right:0; top:0; bottom:0; width:1px; background:currentColor; opacity:.45}
.alti__mk{position:absolute; right:12px; top:0; width:0; height:0; border-block:5px solid transparent; border-right:8px solid var(--terra-l); transform:translateY(-5px); transition:top .25s linear}
.alti__list{list-style:none; margin:0; padding:0; position:absolute; inset:0}
.alti__list a{position:absolute; right:22px; transform:translateY(-50%); white-space:nowrap; font:500 .78rem/1 var(--f-text); text-decoration:none; padding:6px 0 6px 10px; opacity:0; transition:opacity .35s var(--planeo)}
.alti:hover .alti__list a,.alti__list a:focus-visible{opacity:1}
.alti__list a.is-on{color:var(--terra-l)}
.alti[data-tone="light"] .alti__list a.is-on{color:var(--terra)}
@media (min-width:1100px){.alti{display:block} .wrap{padding-right:max(calc(var(--gutter) + 56px), env(safe-area-inset-right, 0px))}}

/* ---------- barra inferior (celular) ---------- */
.barra{position:fixed; z-index:45; left:0; right:0; bottom:0; display:flex; align-items:center; gap:12px;
  padding:10px max(14px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  background:color-mix(in srgb, var(--noche) 94%, transparent); color:var(--crema); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 -1px 0 rgba(242,231,204,.12)}
.barra__alt{font:500 .72rem/1.15 var(--f-text); min-width:64px; max-width:104px; overflow:hidden}
.barra__alt span{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.barra__alt b{display:block; font:360 1.25rem/1 var(--f-display); font-variation-settings:"opsz" 48, "SOFT" 100}
.barra .btn{flex:1; justify-content:center; min-height:50px; white-space:nowrap; padding:0 1rem}
@media (min-width:900px){.barra{display:none}}

/* ---------- menú a pantalla completa ---------- */
.menu{position:fixed; inset:0; z-index:70; background:var(--noche-2); color:var(--crema); display:flex; flex-direction:column; padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px); visibility:hidden; opacity:0; transition:opacity .5s var(--planeo), visibility .5s}
.menu.is-open{visibility:visible; opacity:1}
.menu > .wrap{width:100%}
.menu__top{height:var(--hdr); display:flex; align-items:center; justify-content:space-between}
.menu__list{list-style:none; margin:0; padding-block:2vh 6vh; flex:1; display:flex; flex-direction:column; justify-content:center; gap:clamp(4px, 1vh, 12px); overflow:auto}
.menu__list a{display:grid; grid-template-columns:5.5rem 1fr; align-items:baseline; gap:1rem; text-decoration:none; font:330 clamp(1.9rem, 1.2rem + 3.2vw, 3.6rem)/1.08 var(--f-display); font-variation-settings:"opsz" 144, "SOFT" 100; transform:translateX(-14px); opacity:.0; transition:transform .7s var(--planeo), opacity .7s var(--planeo), color .3s}
.menu.is-open .menu__list a{transform:none; opacity:1}
.menu__list a span{font:500 .82rem/1 var(--f-text); opacity:.6; text-align:right}
.menu__list a:hover{color:var(--terra-l)}
.menu__pie{padding-block:0 28px; display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; font-size:var(--t-small); opacity:.85}

/* ---------- portada ---------- */
.hero{position:relative; min-height:max(640px, 96svh); display:grid; align-items:end; color:var(--crema); background:var(--noche); overflow:hidden; isolation:isolate}
.hero__field{position:absolute; inset:0; z-index:-2; transform:scale(1.1); transform-origin:62% 40%; transition:transform 2.8s var(--planeo), filter 2.8s var(--planeo); filter:saturate(.85) brightness(.92)}
.hero.is-in .hero__field{transform:none; filter:none}
.hero__field canvas{position:absolute; inset:0; width:100%; height:100%}
.f-ndvi{clip-path:circle(0px at 70% 35%)}
.hero__scrim{position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(23,25,20,.62) 0, rgba(23,25,20,0) 150px),
             linear-gradient(14deg, rgba(23,25,20,.94) 0%, rgba(23,25,20,.72) 30%, rgba(23,25,20,.18) 58%, rgba(23,25,20,0) 72%)}
.lens svg{max-width:none}
.lens{position:absolute; left:0; top:0; width:0; height:0; z-index:1; pointer-events:none; --r:0px}
.lens__ring{position:absolute; left:0; top:0; width:calc(var(--r) * 2); height:calc(var(--r) * 2); transform:translate(-50%,-50%); border-radius:50%; box-shadow:0 0 0 1px rgba(242,231,204,.85), 0 0 0 6px rgba(242,231,204,.08), 0 18px 60px rgba(0,0,0,.35)}
.lens__ring::before,.lens__ring::after{content:""; position:absolute; background:rgba(242,231,204,.85)}
.lens__ring::before{left:50%; top:-8px; bottom:-8px; width:1px; transform:translateX(-.5px);
  -webkit-mask:linear-gradient(#000 0 14px, transparent 14px calc(100% - 14px), #000 calc(100% - 14px)); mask:linear-gradient(#000 0 14px, transparent 14px calc(100% - 14px), #000 calc(100% - 14px))}
.lens__ring::after{top:50%; left:-8px; right:-8px; height:1px; transform:translateY(-.5px);
  -webkit-mask:linear-gradient(90deg, #000 0 14px, transparent 14px calc(100% - 14px), #000 calc(100% - 14px)); mask:linear-gradient(90deg, #000 0 14px, transparent 14px calc(100% - 14px), #000 calc(100% - 14px))}
.lens__drone{position:absolute; left:0; top:0; width:92px; height:92px; transform:translate(-62%,-74%)}
.lens__shadow{--d-body:#0f110d; --d-line:transparent; position:absolute; left:0; top:0; width:84px; height:84px; transform:translate(-30%,-28%); filter:blur(5px); opacity:.42}
.rotor{transform-box:fill-box; transform-origin:center; animation:gira .18s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.lens__read{position:absolute; left:0; top:0; white-space:nowrap; display:flex; align-items:center; gap:8px; padding:7px 11px; border-radius:3px; background:rgba(23,25,20,.78); color:var(--crema); font:500 .8rem/1 var(--f-text); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transform:translate(calc(var(--r) * .74), calc(var(--r) * .74)); transition:opacity .4s}
.lens__read i{width:10px; height:10px; border-radius:50%; background:var(--brote)}
.lens.flip .lens__read{transform:translate(calc(-100% - var(--r) * .74), calc(var(--r) * .74))}
.hero__body{position:relative; padding-block:calc(var(--hdr) + 80px) clamp(56px, 9vh, 104px); width:100%}
.hero h1{font-size:var(--t-hero); line-height:.94; font-weight:310; letter-spacing:-.02em}
.hero__lede{margin-top:clamp(20px, 3vh, 34px); max-width:36ch; font-size:var(--t-lede); line-height:1.5; color:rgba(242,231,204,.9)}
.hero__cta{margin-top:clamp(26px, 4vh, 40px); display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px}
.hero__meta{position:absolute; right:max(var(--gutter), env(safe-area-inset-right, 0px)); bottom:clamp(56px, 9vh, 104px); text-align:right; font-size:var(--t-small); line-height:1.45; color:rgba(242,231,204,.82)}
.hero__loc{display:grid; justify-items:end; margin-top:2px}
.hero__loc b{grid-area:1/1; font-weight:500; color:var(--crema); opacity:0}
.hero__loc b:first-child{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .hero__loc b{opacity:0; animation:loc 9s var(--planeo) infinite backwards}
  .hero__loc b:nth-child(2){animation-delay:3s} .hero__loc b:nth-child(3){animation-delay:6s}
}
@keyframes loc{0%{opacity:0; transform:translateY(10px)} 6%,28%{opacity:1; transform:none} 34%,100%{opacity:0; transform:translateY(-10px)}}
.hero__hint{position:absolute; top:calc(var(--hdr) + 22px); right:max(var(--gutter), env(safe-area-inset-right, 0px)); max-width:22ch; text-align:right; font-size:var(--t-small); line-height:1.4; color:rgba(242,231,204,.88); transition:opacity .8s var(--planeo)}
.hero__hint.is-off{opacity:0}
@media (max-width:899px){
  .hero{min-height:max(600px, 100svh)}
  .hero__body{padding-bottom:calc(112px + env(safe-area-inset-bottom, 0px))}
  .hero__cta .btn{display:none}
  .hero__meta{display:none}
  .hero__scrim{background:linear-gradient(180deg, rgba(23,25,20,.55) 0, rgba(23,25,20,0) 120px), linear-gradient(0deg, rgba(23,25,20,.95) 0%, rgba(23,25,20,.78) 40%, rgba(23,25,20,0) 66%)}
  .hero__hint{left:max(var(--gutter), env(safe-area-inset-left, 0px)); right:auto; text-align:left}
  .lens__read{font-size:.74rem}
}
@media (min-width:1100px){.hero__meta{right:calc(max(var(--gutter), env(safe-area-inset-right, 0px)) + 70px)} .hero__hint{right:calc(max(var(--gutter), env(safe-area-inset-right, 0px)) + 70px)}}

/* ---------- secciones: base ---------- */
section{position:relative}
.sec-h{font-size:var(--t-h2); line-height:1.02; letter-spacing:-.018em}
/* títulos de dos frases: cada frase entera en su línea mientras entre */
.sec-h > span,.ben__h > span,.dif__h > span{display:inline-block}
.metodo__head .sec-h,.serv__head .sec-h,.trab__head .sec-h,.cob__grid > .sec-h,.faq__grid > .sec-h{grid-column:1/-1}
.sec-p{font-size:var(--t-lede); line-height:1.55; color:var(--muted); max-width:44ch}

/* ---------- beneficio principal: aplicar solo donde hace falta ---------- */
.ben{background:var(--papel); padding-block:clamp(88px, 14vh, 168px) clamp(80px, 12vh, 150px)}
.ben__head{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:28px 72px; align-items:end}
.ben__h{grid-column:1/-1; font-size:clamp(2.4rem, 1.2rem + 4.4vw, 5.6rem); line-height:1; letter-spacing:-.024em; font-weight:300}
.ben__h2{color:var(--verde-texto)}
.ben__side{grid-column:1/-1; display:grid; gap:28px; justify-items:start; padding-bottom:12px}
.ben__lede{font-size:var(--t-lede); line-height:1.55; color:var(--muted); text-align:justify; hyphens:auto; justify-self:stretch}
.ben__acc{display:flex; flex-wrap:wrap; align-items:center; gap:10px 32px}
.btn--xl{min-height:60px; padding:0 1.9rem; font-size:1.08rem}
.btn--xl svg{width:22px; height:22px}
.comp{position:relative; margin-top:clamp(44px, 7vh, 84px); aspect-ratio:16/8; max-height:78vh; width:100%; border-radius:3px; overflow:hidden; background:#5c7943; box-shadow:0 44px 90px -50px rgba(30,33,25,.65)}
.comp canvas{width:100%; height:100%}
.comp__lbl{position:absolute; top:16px; display:grid; gap:3px; padding:11px 15px; border-radius:3px; background:rgba(23,25,20,.86); color:var(--crema); pointer-events:none; max-width:44%; z-index:2}
.comp__lbl b{font:400 1.2rem/1.15 var(--f-display); font-variation-settings:"opsz" 36, "SOFT" 100}
.comp__lbl span{font-size:var(--t-micro); opacity:.82}
.comp__lbl--a{left:16px}
.comp__lbl--b{right:16px; text-align:right; background:var(--campo)}
.comp__line{position:absolute; top:0; bottom:0; left:var(--split, 50%); width:2px; margin-left:-1px; background:var(--crema); box-shadow:0 0 0 1px rgba(23,25,20,.25); pointer-events:none; z-index:1}
.comp__knob{position:absolute; top:50%; left:var(--split, 50%); width:60px; height:60px; margin:-30px 0 0 -30px; border-radius:50%; background:var(--crema); color:#23261f; display:grid; place-items:center; box-shadow:0 12px 32px rgba(0,0,0,.35); pointer-events:none; z-index:3; transition:transform .35s var(--planeo)}
.comp__knob svg{width:30px; height:15px}
.comp:hover .comp__knob{transform:scale(1.08)}
.comp__range{position:absolute; inset:0; z-index:4; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; touch-action:pan-y; -webkit-appearance:none; appearance:none; background:transparent}
.comp__range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:60px; height:400px}
.comp:has(.comp__range:focus-visible) .comp__knob{outline:2px solid var(--terra); outline-offset:4px}
.comp__hint{margin-top:12px; font-size:var(--t-small); color:var(--muted)}
.ben__datos{margin-top:clamp(40px, 7vh, 72px); display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 6fr); gap:40px 80px; align-items:start}
.medidor{display:grid; gap:16px}
.medidor__t{font:400 clamp(1.4rem, 1.15rem + .8vw, 1.9rem)/1.2 var(--f-display); font-variation-settings:"opsz" 48, "SOFT" 100}
.medidor__row{display:grid; grid-template-columns:9.5rem 1fr; gap:16px; align-items:center}
.bar{display:block; height:20px; border-radius:2px; background:var(--linea); overflow:hidden}
.bar b{display:block; height:100%; background:var(--pasto); transform-origin:left; transform:scaleX(var(--s, 1)); transition:transform 2s var(--planeo) .2s}
.bar--t b{background:var(--terra)}
.medidor__n{font-size:var(--t-small); color:var(--muted); max-width:44ch}
.gana{list-style:none; margin:0; padding:0; display:grid; align-content:start}
.gana li{display:grid; gap:4px; padding-block:18px; border-top:1px solid var(--linea)}
.gana li:last-child{border-bottom:1px solid var(--linea)}
.gana b{font:400 1.32rem/1.2 var(--f-display); font-variation-settings:"opsz" 36, "SOFT" 100}
.gana span{color:var(--muted); font-size:.98rem}
.ben__cierre{margin-top:clamp(64px, 10vh, 120px); padding:clamp(28px, 4vw, 48px); border-radius:3px; background:var(--campo); color:var(--crema); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 48px}
.ben__cierre p{font:320 clamp(1.7rem, 1.15rem + 2.1vw, 3.1rem)/1.08 var(--f-display); font-variation-settings:"opsz" 144, "SOFT" 100; max-width:19ch; letter-spacing:-.014em; text-wrap:balance}
.ben__cierre .btn{background:var(--crema); color:#23261f}
.ben__cierre .btn:hover{background:#fff8e6}
@media (max-width:899px){
  .ben__head{grid-template-columns:1fr}
  .comp{aspect-ratio:4/5; max-height:none}
  .comp__lbl{padding:8px 10px; top:10px}
  .comp__lbl--a{left:10px} .comp__lbl--b{right:10px}
  .comp__lbl b{font-size:.98rem}
  .ben__datos{grid-template-columns:1fr}
  .medidor__row{grid-template-columns:8.8rem 1fr; font-size:.95rem}
}

/* ---------- el diagnóstico (lote que se lee paso a paso) ---------- */
.lect{background:var(--papel)}
.lect__head{padding-block:clamp(96px, 15vh, 176px) clamp(40px, 7vh, 80px); display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:24px 64px; align-items:end}
.lect__head .sec-h{grid-column:1/-1}
.lect__head .sec-p{grid-column:1/-1; max-width:none; text-align:justify; hyphens:auto}
.lect__grid{display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr); gap:clamp(32px, 7vw, 120px); padding-bottom:clamp(80px, 12vh, 140px)}
.lote{position:sticky; top:calc(var(--hdr) + 3vh); align-self:start; padding-bottom:24px}
.lote__frame{position:relative; width:min(100%, 66vh); aspect-ratio:1/1; max-width:100%; background:#5c7943; overflow:hidden; border-radius:2px; box-shadow:0 30px 60px -30px rgba(30,33,25,.55)}
.lote__frame canvas{width:100%; height:100%}
.lote__lbl{position:absolute; transform:translate(-50%,-50%); padding:7px 10px; background:rgba(23,25,20,.86); color:var(--crema); border-radius:3px; font:500 .76rem/1.15 var(--f-text); white-space:nowrap; pointer-events:none; opacity:0}
.lote__lbl > span{display:grid; gap:2px}
.lote__lbl small{font-size:.7rem; opacity:.78; font-weight:400}
.lote__lbl .a{display:none}
.lote__lbl.is-dx .q{display:none}
.lote__lbl.is-dx .a{display:grid}
.lote__lbl::before{content:""; position:absolute; left:50%; top:100%; width:1px; height:12px; background:rgba(242,231,204,.8)}
.lote__lbl.is-hot{background:var(--terra); color:#fff8ea}
.lote__corner{position:absolute; left:12px; top:12px; padding:5px 9px; border-radius:3px; background:rgba(23,25,20,.72); color:var(--crema); font:500 .74rem/1 var(--f-text)}
.lote__firma{position:absolute; left:12px; right:12px; bottom:12px; display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:3px; background:rgba(23,25,20,.88); color:var(--crema); font-size:.78rem; line-height:1.3; opacity:0; transform:translateY(8px); transition:opacity .5s var(--planeo), transform .5s var(--planeo)}
.lote__firma.is-on{opacity:1; transform:none}
.lote__firma svg{width:44px; flex:none}
.lote__firma b{display:block; font:400 .98rem/1.25 var(--f-display); font-variation-settings:"opsz" 24, "SOFT" 100}
.lote__leg{margin-top:16px; width:min(100%, 66vh); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; font-size:var(--t-micro); color:var(--muted)}
.lote__leg i{height:8px; border-radius:2px; background:linear-gradient(90deg, #E82418 0 20%, #FAA01E 20% 40%, #FAF028 40% 60%, #60A828 60% 80%, #1C6810 80%)}
.pasos{list-style:none; margin:0; padding:0}
.paso{min-height:82vh; display:flex; flex-direction:column; justify-content:center; gap:14px; max-width:31rem; opacity:.32; transition:opacity .6s var(--planeo)}
.paso.is-on{opacity:1}
.paso__n{font:500 var(--t-small)/1 var(--f-text); color:var(--verde-texto)}
.paso h3{font-size:clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height:1.08; font-weight:340}
.paso p:last-child{color:var(--muted); max-width:40ch}
.lect__nota{font-size:var(--t-small); color:var(--muted); max-width:52ch; margin-top:8px}
/* con JS: el texto queda fijo junto al lote y cambia de paso en el lugar; el recorrido de scroll lo da .lect__txt */
.js .lect__txt{min-height:calc(var(--pasos, 4) * 72vh)}
.js .pasos{position:sticky; top:calc(var(--hdr) + 3vh); height:var(--frame-h, 66vh); display:grid; align-content:center}
.js .paso{grid-area:1/1; min-height:0; justify-content:flex-start; opacity:0; transform:translateY(18px); pointer-events:none; transition:opacity .5s var(--planeo), transform .7s var(--planeo)}
.js .paso.is-on{opacity:1; transform:none; pointer-events:auto}
.js .pasos.is-all{display:flex; flex-direction:column; justify-content:center; gap:clamp(12px, 2.4vh, 24px)}
.js .pasos.is-all .paso{grid-area:auto; gap:6px; opacity:.5; transform:none; pointer-events:auto}
.js .pasos.is-all .paso.is-on{opacity:1}
.js .pasos.is-all .paso h3{font-size:clamp(1.15rem, .95rem + .7vw, 1.6rem)}
.js .pasos.is-all .paso p:last-child{font-size:var(--t-small); line-height:1.45}
@media (max-width:899px){
  .lect__head{grid-template-columns:1fr}
  .lect__grid{grid-template-columns:1fr; gap:0}
  .lote{top:calc(var(--hdr) + env(safe-area-inset-top, 0px)); z-index:3; background:var(--papel); padding-block:10px 12px; margin-inline:calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px)));
    padding-left:max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right:max(var(--gutter), env(safe-area-inset-right, 0px)); box-shadow:0 1px 0 var(--linea)}
  .lote__frame{width:min(100%, 42svh); margin-inline:auto}
  .lote__leg{width:min(100%, 42svh); margin-inline:auto; margin-top:10px}
  .lote__firma{font-size:.7rem; padding:7px 9px} .lote__firma b{font-size:.84rem} .lote__firma svg{width:32px}
  .paso{min-height:60svh; justify-content:flex-end; padding-bottom:12svh}
  .lect__nota{margin-top:24px}
  .js .lect__txt{min-height:calc(var(--pasos, 4) * 55svh)}
  .js .pasos{top:calc(var(--hdr) + env(safe-area-inset-top, 0px) + var(--lote-h, 50svh)); height:auto; align-items:start; padding-top:22px}
  .js .paso{padding-bottom:0; justify-content:flex-start}
  .js .pasos.is-all{padding-top:14px; gap:10px}
  .js .pasos.is-all .paso p:last-child{display:none}
  .js .pasos.is-all .paso.is-on p:last-child{display:block}
}

/* ---------- diferencia ---------- */
.dif{background:var(--noche); color:var(--crema); padding-block:clamp(100px, 16vh, 190px)}
.dif__h{font-size:clamp(2.4rem, 1.2rem + 4.4vw, 5.6rem); line-height:1; letter-spacing:-.024em; font-weight:300}
.dif__h span:first-child{color:rgba(242,231,204,.42)}
.dif__grid{margin-top:clamp(48px, 8vh, 96px); display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:40px 80px}
.dif__p{font-size:var(--t-lede); line-height:1.55; color:rgba(242,231,204,.8); text-align:justify; hyphens:auto}
.cmp{width:100%; border-collapse:collapse}
.cmp th{text-align:left; font:500 var(--t-small)/1.3 var(--f-text); color:rgba(242,231,204,.6); padding:0 0 16px}
.cmp td{padding:22px 24px 22px 0; border-top:1px solid rgba(242,231,204,.16); vertical-align:baseline; width:50%}
.cmp td:first-child{color:rgba(242,231,204,.55); font-size:1.05rem}
.cmp td:last-child{font:360 clamp(1.25rem, 1rem + .9vw, 1.75rem)/1.2 var(--f-display); font-variation-settings:"opsz" 48, "SOFT" 100; color:var(--crema)}
.tachar{position:relative; display:inline}
.tachar::after{content:""; position:absolute; left:0; right:0; top:56%; height:1.5px; background:var(--terra-l); transform:scaleX(var(--k, 0)); transform-origin:left; transition:transform .2s linear}
.cmp tr{--k:0}
@media (max-width:899px){
  .dif__grid{grid-template-columns:1fr}
  .cmp td{padding:18px 14px 18px 0}
}

/* ---------- método ---------- */
.metodo{background:var(--papel-2); padding-block:clamp(96px, 15vh, 176px) clamp(80px, 12vh, 140px)}
.metodo__head{display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 6fr); gap:24px 64px; align-items:end}
.mision{position:relative; margin-top:clamp(56px, 9vh, 104px)}
.mision__svg{position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.mision__base{fill:none; stroke:var(--linea-2); stroke-width:1.5; stroke-dasharray:2 7; stroke-linecap:round}
.mision__hecho{fill:none; stroke:var(--campo); stroke-width:2.2; stroke-linecap:round}
:root[data-theme="dark"] .mision__hecho{stroke:var(--brote)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .mision__hecho{stroke:var(--brote)}}
.mision__dron{--d-body:var(--dron); --d-line:var(--dron-l); position:absolute; left:0; top:0; width:44px; height:44px; margin:-22px 0 0 -22px; pointer-events:none}
.mision__pasos{list-style:none; margin:0; padding:40px 0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:24px}
.mpaso{position:relative; padding:76px 18px 64px 30px; min-height:330px; transition:opacity .6s var(--planeo)}
.mpaso__n{font:300 3.2rem/1 var(--f-display); font-variation-settings:"opsz" 144, "SOFT" 100; color:var(--muted); transition:color .6s var(--planeo)}
.mpaso.is-on .mpaso__n{color:var(--terra)}
.mpaso h3{margin-top:18px; font-size:var(--t-h3); line-height:1.15; font-weight:400}
.mpaso p:not(.mpaso__n){margin-top:10px; color:var(--muted); font-size:.98rem; line-height:1.55}
@media (max-width:899px){
  .metodo__head{grid-template-columns:1fr}
  .mision__pasos{grid-template-columns:1fr; gap:0; padding:0}
  .mpaso{min-height:0; padding:64px 22px 28px 22px}
  .mpaso__n{font-size:2.4rem}
}

/* ---------- tecnología + experiencia = diagnóstico ---------- */
.eq{background:var(--papel-2); padding-block:clamp(96px, 15vh, 176px)}
.eq__head{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:24px 64px; align-items:end}
.eq__head .sec-h{grid-column:1/-1}
.eq__grid{margin-top:clamp(48px, 8vh, 96px); display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.12fr); gap:28px; align-items:stretch}
.eq__col{display:grid; align-content:start; gap:14px}
.eq__col .hueco{aspect-ratio:4/3; margin-bottom:8px}
.foto{display:block; width:100%; height:auto; object-fit:cover; border-radius:2px; background:var(--linea)}
.eq__col .foto{aspect-ratio:4/5; margin-bottom:8px}
.foto--dron{background:none}
.eq__k{font-size:var(--t-small); color:var(--muted); font-weight:500}
.eq__t{font:400 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.15 var(--f-display); font-variation-settings:"opsz" 48, "SOFT" 100}
.eq__col > p:not(.eq__k){color:var(--muted); font-size:.98rem}
.eq__nom{color:var(--fg); font-weight:500}
.eq__op{align-self:center; font:200 clamp(3.4rem, 2rem + 4vw, 6.4rem)/1 var(--f-display); color:var(--terra); font-variation-settings:"opsz" 144, "SOFT" 100}
.eq__res{background:var(--campo); color:var(--crema); border-radius:3px; padding:clamp(26px, 3vw, 40px); display:grid; align-content:space-between; gap:28px; justify-items:start}
.eq__res .eq__k{color:rgba(242,231,204,.7)}
.eq__res .eq__t{margin-top:12px; font-size:clamp(1.75rem, 1.25rem + 1.3vw, 2.5rem); line-height:1.05; font-weight:330; letter-spacing:-.014em}
.eq__res > p{color:rgba(242,231,204,.86)}
.treinta{display:grid; grid-template-columns:auto 1fr; align-items:end; gap:16px}
.treinta b{font:280 clamp(5rem, 3rem + 5vw, 8.6rem)/.76 var(--f-display); font-variation-settings:"opsz" 144, "SOFT" 100; color:var(--verde-texto); letter-spacing:-.04em}
.treinta span{font-size:1.05rem; line-height:1.35; max-width:14ch; padding-bottom:4px}
@media (max-width:1099px){.eq__grid{grid-template-columns:1fr; gap:18px} .eq__op{justify-self:center; line-height:.7} .eq__head{grid-template-columns:1fr}}

/* ---------- servicios ---------- */
.serv{background:var(--noche); color:var(--crema); padding-block:clamp(96px, 15vh, 176px)}
.serv__head{display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 6fr); gap:24px 64px; align-items:end}
.serv .sec-p{color:rgba(242,231,204,.78)}
.serv__list{list-style:none; margin:clamp(48px, 8vh, 88px) 0 0; padding:0}
.srv{position:relative; display:grid; grid-template-columns:64px minmax(0, 4.4fr) minmax(0, 5fr) auto; gap:20px 44px; align-items:start; padding-block:36px; border-top:1px solid rgba(242,231,204,.16)}
.srv:last-child{border-bottom:1px solid rgba(242,231,204,.16)}
.srv::before{content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--terra-l); transform:scaleX(0); transform-origin:left; transition:transform .9s var(--planeo)}
.srv:hover::before{transform:none}
.srv__ic{width:56px; height:56px; color:var(--trigo)}
.srv__ic *{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.srv h3{font-size:clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem); line-height:1.05; font-weight:330}
.srv__k{margin:0 0 12px; font:500 var(--t-small)/1 var(--f-text); color:rgba(242,231,204,.6); margin-bottom:12px; letter-spacing:.01em}
.srv__d p{color:rgba(242,231,204,.84)}
.srv__d p + p{margin-top:10px; color:rgba(242,231,204,.62); font-size:.96rem}
.srv__cta{white-space:nowrap; color:var(--crema)}
@media (max-width:899px){.serv__head{grid-template-columns:1fr} .srv{grid-template-columns:44px 1fr; gap:14px 18px} .srv__ic{width:42px; height:42px} .srv__d,.srv__cta{grid-column:2}}

/* ---------- trabajos ---------- */
.trab{background:var(--campo); color:var(--crema); padding-block:clamp(96px, 14vh, 160px)}
.trab__head{display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 6fr); gap:24px 64px; align-items:end}
.trab .sec-p{color:rgba(242,231,204,.8)}
.tira{margin-top:clamp(40px, 7vh, 72px); display:grid; grid-auto-flow:column; grid-auto-columns:min(80vw, 400px); gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:18px;
  --tl:max(var(--gutter), calc((100vw - 1360px) / 2 + var(--gutter)), env(safe-area-inset-left, 0px));
  padding-left:var(--tl); padding-right:max(var(--gutter), env(safe-area-inset-right, 0px)); scroll-padding-left:var(--tl); scrollbar-color:rgba(242,231,204,.4) transparent}
.trabajo{scroll-snap-align:start; display:grid; gap:16px}
.trab .tira{grid-auto-columns:min(86vw, 620px)}
.trab .foto{aspect-ratio:16/9; width:100%; object-fit:cover}
.trabajo{margin:0}
.trabajo figcaption{font-size:var(--t-small); color:rgba(242,231,204,.82)}
.trab .hueco{aspect-ratio:4/3; border-color:rgba(242,231,204,.4); color:rgba(242,231,204,.82); background:repeating-linear-gradient(135deg, transparent 0 14px, rgba(242,231,204,.1) 14px 15px)}
.trab .hueco strong{color:var(--crema)}
.trabajo dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:var(--t-small)}
.trabajo dt{color:rgba(242,231,204,.62)}
.trabajo dd{margin:0}
@media (max-width:899px){.trab__head{grid-template-columns:1fr} .trab .tira{grid-auto-flow:row; grid-auto-columns:minmax(0,1fr); overflow-x:visible; scroll-snap-type:none; gap:32px; padding-bottom:0}}

/* ---------- cobertura ---------- */
.cob{background:var(--papel); padding-block:clamp(96px, 15vh, 176px)}
.cob__grid{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:48px clamp(40px, 6vw, 96px); align-items:center}
.cob__txt{display:grid; gap:24px}
.corr{list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 24px}
.corr button{width:100%; text-align:left; display:grid; gap:2px; padding:14px 0; background:none; border:0; border-top:1px solid var(--linea); color:inherit; font:inherit; cursor:pointer}
.corr button b{font:400 1.3rem/1.15 var(--f-display); font-variation-settings:"opsz" 36, "SOFT" 100; display:flex; align-items:center; gap:10px}
.corr button b i{width:9px; height:9px; border-radius:50%; background:var(--pasto)}
.corr button[data-prio] b i{background:var(--terra)}
.corr button span{font-size:var(--t-small); color:var(--muted)}
.corr button:hover b,.corr button.is-hi b{color:var(--verde-texto)}
.mapa{width:100%; max-width:min(100%, calc(84vh * .737)); justify-self:end; color:var(--fg)}
.mapa svg{width:100%; height:auto; overflow:visible}
.m-vec{fill:var(--papel-2); stroke:var(--linea-2); stroke-width:.8}
.m-grat{stroke:var(--linea); stroke-width:1; fill:none}
.m-gl{font:500 10.5px var(--f-text); fill:var(--muted)}
.m-prov{fill:var(--tarjeta)}
.m-cov{fill:color-mix(in srgb, var(--trigo) 58%, transparent); opacity:0; transition:opacity 1.6s var(--planeo)}
.m-dep{fill:none; stroke:var(--linea-2); stroke-width:.7; opacity:.7}
.m-provline{fill:none; stroke:var(--fg); stroke-width:1.6; stroke-linejoin:round}
.m-ring{fill:none; stroke:var(--fg); stroke-width:1; stroke-dasharray:3 5; opacity:0; transition:opacity 1.6s var(--planeo)}
.m-rl{font:500 11px var(--f-text); fill:var(--muted)}
.m-vecl{font:italic 400 12.5px var(--f-display); fill:var(--muted)}
.m-provl{font:italic 400 15px var(--f-display); fill:var(--fg)}
.m-line{stroke:var(--terra); stroke-width:2; fill:none; stroke-dasharray:var(--len); stroke-dashoffset:var(--len); transition:stroke-dashoffset 1.6s var(--planeo), opacity .3s}
.m-line[data-prio]{stroke-width:2.6}
.m-dot{fill:var(--pasto); stroke:var(--tarjeta); stroke-width:2.5}
.m-dot[data-prio]{fill:var(--terra)}
.m-pulse{fill:none; stroke:var(--terra); stroke-width:1.5; transform-box:fill-box; transform-origin:center; opacity:0}
.m-city{font:500 13px var(--f-text); fill:var(--fg)}
.m-km{font:400 11.5px var(--f-text); fill:var(--muted)}
.m-cba{fill:var(--fg)}
.mapa.is-on .m-cov{opacity:1}
.mapa.is-on .m-ring{opacity:.55}
.mapa.is-on .m-line{stroke-dashoffset:0}
.mapa.is-on .m-pulse{animation:pulso 2.6s var(--planeo) infinite}
.mapa .is-dim{opacity:.28}
@keyframes pulso{0%{transform:scale(.6); opacity:.9} 100%{transform:scale(3.2); opacity:0}}
@media (max-width:899px){.cob__grid{grid-template-columns:1fr} .mapa{justify-self:stretch} .corr{grid-template-columns:1fr}
  .m-city{font-size:17px} .m-km{font-size:14px} .m-gl,.m-rl{font-size:13px} .m-vecl{font-size:15px} .m-provl{font-size:18px}}

/* ---------- preguntas ---------- */
.faq{background:var(--papel-2); padding-block:clamp(96px, 15vh, 176px)}
.faq__grid{display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:40px clamp(40px, 6vw, 96px)}
.faq__side{position:sticky; top:calc(var(--hdr) + 40px); align-self:start; display:grid; gap:20px}
.faq__side p{color:var(--muted); max-width:30ch}
.faq details{border-top:1px solid var(--linea-2)}
.faq details:last-child{border-bottom:1px solid var(--linea-2)}
.faq summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:1fr 28px; align-items:center; gap:20px; padding:26px 0; font:360 clamp(1.25rem, 1.05rem + .7vw, 1.7rem)/1.22 var(--f-display); font-variation-settings:"opsz" 48, "SOFT" 100}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative; width:22px; height:22px; justify-self:end}
.faq summary i::before,.faq summary i::after{content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; background:currentColor; transition:transform .5s var(--planeo)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details[open] summary{color:var(--verde-texto)}
.faq .resp{padding:0 48px 28px 0; color:var(--muted); max-width:56ch; animation:abre .6s var(--planeo)}
@keyframes abre{from{transform:translateY(-6px)} to{transform:none}}
@media (max-width:899px){.faq__grid{grid-template-columns:1fr} .faq__side{position:static}}

/* ---------- contacto ---------- */
.cto{background:var(--campo); color:var(--crema); padding-block:clamp(96px, 15vh, 176px); overflow:hidden; isolation:isolate}
.cto__topo{position:absolute; inset:0; z-index:-1; width:100%; height:100%; opacity:.9}
.cto__grid{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:56px clamp(40px, 6vw, 96px); align-items:start}
.cto h2{grid-column:1/-1; font-size:clamp(2.4rem, 1.2rem + 4.4vw, 5.6rem); line-height:1; font-weight:300}
.cto__p{margin-top:24px; font-size:var(--t-lede); line-height:1.55; color:rgba(242,231,204,.86); max-width:34ch}
.cto__wa{margin-top:32px}
.datos{margin:40px 0 0; display:grid; gap:0; max-width:26rem}
.datos div{display:grid; grid-template-columns:7rem 1fr; gap:12px; padding-block:14px; border-top:1px solid rgba(242,231,204,.2); font-size:.98rem}
.datos dt{color:rgba(242,231,204,.65)}
.datos dd{margin:0; overflow-wrap:anywhere}
.form{background:var(--tarjeta); color:var(--fg); border-radius:4px; padding:clamp(24px, 3.5vw, 44px); display:grid; grid-template-columns:1fr 1fr; gap:18px 18px; box-shadow:0 40px 80px -40px rgba(12,16,8,.6)}
.form h3{grid-column:1/-1; font-size:var(--t-h3); margin-bottom:4px}
.campo{display:grid; gap:7px; min-width:0}
.campo--full{grid-column:1/-1}
.campo label{font-size:var(--t-small); font-weight:500}
.campo label small{font-weight:400; color:var(--muted)}
.campo input,.campo select,.campo textarea{width:100%; min-height:50px; padding:12px 14px; border:1px solid var(--linea-2); border-radius:3px; background:var(--papel); color:var(--fg); font:400 1rem/1.4 var(--f-text); transition:border-color .3s, box-shadow .3s}
.campo textarea{min-height:120px; resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none; border-color:var(--campo); box-shadow:0 0 0 3px color-mix(in srgb, var(--brote) 40%, transparent)}
.campo input:user-invalid,.campo select:user-invalid{border-color:var(--terra)}
.check{grid-column:1/-1; display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; font-size:var(--t-small); color:var(--muted)}
.check input{width:20px; height:20px; margin:1px 0 0; accent-color:var(--campo)}
.form .btn{grid-column:1/-1; justify-content:center}
.form__ok{grid-column:1/-1; display:grid; gap:12px; padding:18px; border-radius:3px; background:color-mix(in srgb, var(--brote) 22%, var(--tarjeta))}
.form__ok p{font-size:.98rem}
.form__err{grid-column:1/-1; color:var(--terra); font-size:var(--t-small)}
@media (max-width:899px){.cto__grid{grid-template-columns:1fr} .form{grid-template-columns:1fr}}

/* ---------- pie ---------- */
.pie{background:var(--noche); color:var(--crema); padding-block:clamp(72px, 10vh, 120px) calc(40px + env(safe-area-inset-bottom, 0px))}
.pie__grid{display:grid; grid-template-columns:minmax(0, 1fr) repeat(3, auto); gap:40px clamp(40px, 5vw, 72px)}
.pie__logo{width:min(240px, 70%)}
.pie__slogan{margin-top:22px; font:330 1.5rem/1.2 var(--f-display); font-variation-settings:"opsz" 48, "SOFT" 100; max-width:16ch}
.pie h3{font:400 1.15rem/1.1 var(--f-display); font-variation-settings:"opsz" 24, "SOFT" 100; color:rgba(242,231,204,.6); margin-bottom:16px; letter-spacing:.01em}
.pie ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.pie a{text-decoration:none}
.pie a:hover{color:var(--terra-l)}
.motif{margin-top:clamp(48px, 8vh, 88px); padding-block:clamp(28px, 4vh, 44px); border-top:1px solid rgba(242,231,204,.16); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px 40px; text-decoration:none}
.motif__l{display:flex; align-items:center; flex-wrap:wrap; gap:16px 28px}
.motif__k{font-size:var(--t-small); line-height:1.35; color:rgba(242,231,204,.72); max-width:13ch}
.motif__logo{width:clamp(160px, 17vw, 230px); height:auto; transition:opacity .4s var(--planeo)}
.motif__s{font:330 clamp(1.25rem, 1rem + .9vw, 1.7rem)/1.2 var(--f-display); font-variation-settings:"opsz" 48, "SOFT" 100; color:var(--crema); max-width:22ch; text-align:right}
.motif:hover .motif__logo{opacity:.82}
.motif:hover .motif__s{color:var(--terra-l)}
@media (max-width:899px){.motif__s{text-align:left}}
.pie__legal{margin-top:8px; padding-top:22px; border-top:1px solid rgba(242,231,204,.16); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 32px; font-size:var(--t-small); color:rgba(242,231,204,.66)}
.pie__legal a{text-decoration:underline; text-underline-offset:3px}
@media (max-width:899px){.pie__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .pie__grid li{overflow-wrap:anywhere} .pie__marca{grid-column:1/-1} .pie{padding-bottom:calc(110px + env(safe-area-inset-bottom, 0px))}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important; animation:none!important}
  .hero__field{transform:none; filter:none}
}

/* ---------- GSAP: la portada espera a la animación de entrada (anim.js) ---------- */
@media (prefers-reduced-motion: no-preference){
  .js .hero h1,.js .hero__lede,.js .hero__cta,.js .hero__meta,.js .hero__hint{visibility:hidden}
}