/* =========================================================
   MiCampo — hoja de estilos
   Identidad: Manual de Identidad Visual v1.1
   Verde Mi Campo #7C9A68 · Blanco cálido #FFFDF7 · Negro técnico #181C18
   ---------------------------------------------------------
   1  Tokens            9  Franja de datos
   2  Base             10  Accesos (home)
   3  Compartidos      11  Plataforma
   4  Header           12  Ciclo de roles
   5  Hero home        13  Enfoque de datos
   6  Plano SVG        14  Hoja de ruta
   7  Hero interior    15  Formulario
   8  Problema         16  CTA final / Pie / WhatsApp
                       17  Animaciones · Responsive
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --verde:        #7C9A68;
  --verde-osc:    #5F7C4B;
  --verde-prof:   #2E4230;
  --verde-noche:  #22301F;
  --crema:        #FFFDF7;
  --trigo:        #F1EADA;
  --trigo-claro:  #F6F2E4;
  --piedra:       #E3DFD2;
  --tinta:        #181C18;
  --tinta-60:     rgba(24,28,24,.62);
  --crema-70:     rgba(255,253,247,.74);
  --crema-45:     rgba(255,253,247,.62);

  --l1:#CBD8BE; --l2:#A9C096; --l3:#DEE5CF;
  --l4:#94AF7D; --l5:#B9CDA7; --l6:#D4DFC4;

  --display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --texto:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;

  --wrap: 1180px;
  --pad-x: clamp(20px, 5vw, 48px);
  --sec-y: clamp(72px, 8.5vw, 128px);
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --header-h: 74px;
  --ease: cubic-bezier(.22,.68,.28,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box }

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--crema);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block }
svg{ display:block }
a{ color:inherit }
ul,ol{ margin:0; padding:0; list-style:none }
h1,h2,h3{ margin:0; font-family:var(--display); font-weight:700; line-height:1.05; letter-spacing:-.022em }
p{ margin:0 }
button,input,select,textarea{ font:inherit; color:inherit }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad-x) }
.wrap--angosto{ max-width:900px }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--verde-prof); color:var(--crema);
  padding:12px 20px; border-radius:0 0 var(--r-s) 0;
}
.skip:focus{ left:0 }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2.5px solid var(--verde-osc);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- 3. Compartidos ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--verde-osc);
  margin-bottom:1.1rem;
}
.eyebrow--invert{ color:var(--verde) }

.shead{ max-width:44ch }
.shead__title{ font-size:clamp(2rem,4.2vw,3.3rem); font-variation-settings:'wdth' 92 }
.shead__lead{ margin-top:1.2rem; font-size:1.075rem; color:var(--tinta-60); max-width:52ch }
.shead--invert .shead__title{ color:var(--crema) }
.shead--invert .shead__lead{ color:var(--crema-70) }
.shead--centro{ max-width:52ch; margin-inline:auto; text-align:center }
.shead--centro .shead__lead{ margin-inline:auto }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:.98rem; letter-spacing:-.005em;
  padding:.92em 1.6em;
  border-radius:999px;
  border:1.5px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--solid{ background:var(--verde-prof); color:var(--crema) }
.btn--solid:hover{ background:var(--verde-noche); transform:translateY(-2px) }
.btn--ghost{ background:transparent; color:var(--verde-prof); border-color:var(--piedra) }
.btn--ghost:hover{ border-color:var(--verde); background:rgba(124,154,104,.08); transform:translateY(-2px) }
.btn--claro{ background:var(--crema); color:var(--verde-prof) }
.btn--claro:hover{ background:#fff; transform:translateY(-2px) }
.btn--borde-claro{ background:transparent; color:var(--crema); border-color:rgba(255,253,247,.4) }
.btn--borde-claro:hover{ border-color:var(--crema); background:rgba(255,253,247,.1); transform:translateY(-2px) }
.btn--sm{ padding:.62em 1.2em; font-size:.9rem }
.btn--full{ width:100%; padding-block:1.05em }

.enlace{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:600; text-decoration:none; color:var(--verde-osc);
  border-bottom:1.5px solid transparent;
  transition:gap .18s ease, border-color .18s ease;
}
.enlace:hover{ gap:.75rem; border-bottom-color:var(--verde) }

/* ---------- 4. Header ---------- */
.topbar{
  position:sticky; top:0; z-index:100;
  background:rgba(255,253,247,.88);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.topbar.is-stuck{
  border-bottom-color:var(--piedra);
  box-shadow:0 6px 24px -18px rgba(24,28,24,.55);
}
.topbar__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding:0 var(--pad-x);
  min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.progreso{
  position:absolute; left:0; bottom:-1px; height:2px;
  width:0%;
  background:var(--verde);
  transition:width .12s linear;
}

.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none }
.brand img{ width:auto; height:30px }
.brand__name{
  font-family:var(--display);
  font-weight:600; font-size:1.28rem; letter-spacing:-.02em;
  color:var(--verde-prof);
  padding-top:2px;
}

.nav{ display:flex; align-items:center; gap:clamp(1rem,2.1vw,1.9rem) }
.nav a{
  text-decoration:none; font-size:.95rem; font-weight:500;
  color:var(--tinta-60);
  position:relative;
  transition:color .18s ease;
}
.nav a:not(.btn)::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px;
  height:2px; background:var(--verde);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav a:hover{ color:var(--tinta) }
.nav a:not(.btn):hover::after{ transform:scaleX(1) }
.nav a[aria-current="page"]{ color:var(--verde-prof); font-weight:600 }
.nav a[aria-current="page"]::after{ transform:scaleX(1) }
.nav a.btn{ color:var(--crema) }

.navtoggle{
  display:none;
  width:44px; height:44px;
  background:none; border:1px solid var(--piedra); border-radius:50%;
  cursor:pointer; position:relative;
}
.navtoggle span{
  position:absolute; left:13px; width:18px; height:1.8px; background:var(--tinta);
  transition:transform .25s ease;
}
.navtoggle span:nth-child(1){ top:18px }
.navtoggle span:nth-child(2){ top:24px }
.navtoggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg) }
.navtoggle[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg) }

/* ---------- 5. Hero home ---------- */
.hero{
  position:relative;
  min-height:min(90vh,780px);
  display:flex; align-items:flex-end;
  padding-block: clamp(90px,14vh,160px) clamp(48px,7vh,80px);
  overflow:hidden;
  isolation:isolate;
}
.hero__foto{
  position:absolute; inset:-8% 0 0 0;
  z-index:0;
}
.hero__foto img,
.hero__video{
  display:block;
  width:100%; height:100%;
  object-fit:cover; object-position:center 55%;
  will-change:transform;
}
.hero__velo{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(101deg, rgba(20,26,20,.95) 0%, rgba(20,26,20,.88) 24%, rgba(20,26,20,.66) 46%, rgba(20,26,20,.34) 68%, rgba(20,26,20,.18) 100%),
    linear-gradient(to top, rgba(255,253,247,1) 0%, rgba(255,253,247,0) 20%),
    linear-gradient(rgba(20,26,20,.16), rgba(20,26,20,.16)),
    linear-gradient(to bottom, rgba(20,26,20,.45) 0%, rgba(20,26,20,0) 24%);
}
.hero__contenido{ position:relative; z-index:4 }
.hero__title{
  font-size:clamp(2.5rem,5.9vw,4.6rem);
  font-variation-settings:'wdth' 90;
  letter-spacing:-.032em;
  color:var(--crema);
  max-width:16ch;
  text-wrap:balance;
}
.hero__title em{ display:block; font-style:normal; color:var(--verde) }
.hero__lead{
  margin-top:1.4rem;
  font-size:clamp(1.02rem,1.3vw,1.16rem);
  color:var(--crema-70);
  max-width:48ch;
}
.hero__cta{ margin-top:2.1rem; display:flex; flex-wrap:wrap; gap:.85rem }
.hero .eyebrow{ color:var(--verde) }

/* ---------- 6. Plano proyectado sobre el campo ---------- */
.plano{
  position:absolute; z-index:2;
  right:-2%; bottom:5%;
  width:min(56%,680px);
  aspect-ratio: 12/7;
  transform:perspective(900px) rotateX(51deg) rotateZ(-7deg);
  transform-origin:bottom center;
  pointer-events:none;
  filter:drop-shadow(0 4px 10px rgba(16,22,16,.55));
}
.plano svg{ width:100%; height:100% }
.plano .p-fill{ fill:#FFFDF7; opacity:0 }
.plano .p-linea{
  fill:none; stroke:#FFFDF7; stroke-width:3.4; stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:var(--largo,1400); stroke-dashoffset:var(--largo,1400);
}
.plano .p-borde{ stroke-width:5.4; stroke:#A9C096 }
.plano .p-vertice{ fill:#FFFDF7; opacity:0 }

@keyframes trazar{ to{ stroke-dashoffset:0 } }
@keyframes aparecerFill{ to{ opacity:.17 } }
@keyframes puntoIn{ to{ opacity:.9 } }

.is-drawn .p-linea{ animation:trazar 1.6s var(--ease) forwards }
.is-drawn .p-lineas path:nth-child(2){ animation-delay:.55s }
.is-drawn .p-lineas path:nth-child(3){ animation-delay:.75s }
.is-drawn .p-lineas path:nth-child(4){ animation-delay:.9s }
.is-drawn .p-fill{ animation:aparecerFill 1s 1.1s ease-out forwards }
.is-drawn .p-vertice{ animation:puntoIn .5s 1.25s ease-out forwards }

/* botón pausar / reproducir video */
.hero__pausa{
  position:absolute; z-index:5;
  top:clamp(14px,2.4vw,24px); right:var(--pad-x);
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .85rem .45rem .6rem;
  border:1px solid rgba(255,253,247,.28); border-radius:999px;
  background:rgba(20,26,20,.42);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--crema);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease;
}
.hero__pausa:hover{ background:rgba(20,26,20,.62); border-color:rgba(255,253,247,.5) }
.hero__pausa-ico{ position:relative; width:10px; height:11px; flex:none }
.hero__pausa-ico::before,
.hero__pausa-ico::after{
  content:''; position:absolute; top:0; width:3px; height:11px; background:currentColor; border-radius:1px;
}
.hero__pausa-ico::before{ left:1px }
.hero__pausa-ico::after{ right:1px }
.hero__pausa[aria-pressed="true"] .hero__pausa-ico::before{
  left:1px; width:0; height:0; background:none; border-radius:0;
  border-left:9px solid currentColor; border-top:5.5px solid transparent; border-bottom:5.5px solid transparent;
}
.hero__pausa[aria-pressed="true"] .hero__pausa-ico::after{ display:none }

.hero__chips{
  position:absolute; z-index:3;
  pointer-events:none;
  right:clamp(16px,6vw,90px); bottom:clamp(56px,13vh,130px);
  display:grid; gap:.6rem; justify-items:end;
}
.hero__title em > span{ transition-delay:.14s }
.chip{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.7rem;
  background:rgba(255,253,247,.94); color:var(--verde-prof);
  padding:.45rem .8rem;
  border-radius:999px;
  box-shadow:0 10px 26px -14px rgba(24,28,24,.7);
  white-space:nowrap;
  backdrop-filter:blur(6px);
}
.chip--tarea{ background:var(--verde-prof); color:var(--crema) }
.chip__tick{
  width:15px; height:15px; border-radius:50%;
  background:var(--verde); position:relative; flex:none;
}
.chip__tick::after{
  content:''; position:absolute; left:4.5px; top:3.5px;
  width:4px; height:7px;
  border:solid var(--crema); border-width:0 1.8px 1.8px 0;
  transform:rotate(42deg);
}

/* ---------- 7. Hero de páginas interiores ---------- */
.phero{
  position:relative;
  padding-block: clamp(56px,8vw,96px) clamp(48px,6vw,80px);
  background:var(--verde-prof);
  color:var(--crema);
  overflow:hidden;
  isolation:isolate;
}
.phero__foto{ position:absolute; inset:0; z-index:-2 }
.phero__foto img{ width:100%; height:100%; object-fit:cover; object-position:center 60%; opacity:.28 }
.phero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(34,48,31,.92) 0%, rgba(34,48,31,.72) 55%, rgba(34,48,31,.5) 100%);
}
.phero__title{
  font-size:clamp(2.1rem,4.6vw,3.5rem);
  font-variation-settings:'wdth' 90;
  color:var(--crema);
  max-width:18ch;
}
.phero__lead{ margin-top:1.2rem; color:var(--crema-70); max-width:56ch; font-size:1.08rem }
.phero .eyebrow{ color:var(--verde) }

/* ---------- 8. Problema ---------- */
.problema{ background:var(--tinta); color:var(--crema); padding-block:var(--sec-y) }
.dolor{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid rgba(255,253,247,.16);
}
.dolor__item{
  padding:clamp(1.6rem,2.6vw,2.4rem) clamp(1rem,2.4vw,2.2rem) clamp(1.6rem,2.6vw,2.4rem) 0;
  border-bottom:1px solid rgba(255,253,247,.16);
}
.dolor__item:nth-child(odd){ border-right:1px solid rgba(255,253,247,.16) }
.dolor__item:nth-child(even){ padding-left:clamp(1rem,2.4vw,2.2rem) }
.dolor__tag{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--verde); display:block; margin-bottom:.9rem;
}
.dolor__txt{
  font-family:var(--display);
  font-size:clamp(1.15rem,1.9vw,1.5rem);
  font-weight:500; line-height:1.28; letter-spacing:-.015em;
  max-width:26ch;
}

/* ---------- 9. Franja de datos ---------- */
.franja{
  border-bottom:1px solid var(--piedra);
  background:var(--crema);
}
.franja__inner{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1rem;
  padding-block:clamp(1.6rem,3vw,2.4rem);
}
.franja__item{ display:flex; flex-direction:column; gap:.35rem }
.franja__n{
  font-family:var(--display); font-size:clamp(1.4rem,2.6vw,2rem);
  font-weight:700; color:var(--verde-prof); letter-spacing:-.03em; line-height:1;
}
.franja__t{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-60);
}

/* ---------- 10. Accesos (home) ---------- */
.accesos{ padding-block:var(--sec-y) }
.accesos__grid{
  margin-top:clamp(2.2rem,4vw,3.2rem);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,1.8vw,1.5rem);
}
.acceso{
  display:flex; flex-direction:column; gap:.7rem;
  padding:clamp(1.5rem,2.4vw,2rem);
  background:#fff;
  border:1px solid var(--piedra);
  border-radius:var(--r-m);
  text-decoration:none;
  transition:transform .24s var(--ease), border-color .24s ease, box-shadow .24s ease;
}
.acceso:hover{
  transform:translateY(-5px);
  border-color:var(--verde);
  box-shadow:0 26px 44px -34px rgba(46,66,48,.85);
}
.acceso__n{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--verde-osc) }
.acceso h3{ font-size:1.35rem; color:var(--verde-prof) }
.acceso p{ font-size:.97rem; color:var(--tinta-60); flex:1 }
.acceso__ir{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:600; font-size:.92rem; color:var(--verde-osc);
  margin-top:.4rem;
}
.acceso:hover .acceso__ir{ gap:.75rem }
.acceso__ir svg{ width:16px; height:12px; stroke:currentColor; stroke-width:1.8; fill:none; transition:transform .2s ease }

/* ---------- 11. Plataforma ---------- */
.claim{
  padding-left:clamp(1.2rem,2.4vw,2rem);
  border-left:3px solid var(--verde);
  max-width:60ch;
}
.claim p{
  font-family:var(--display);
  font-size:clamp(1.5rem,3.1vw,2.3rem);
  font-weight:600; line-height:1.14; letter-spacing:-.025em;
  color:var(--verde-prof);
}
.claim cite{ display:block; margin-top:1rem; font-style:normal; color:var(--tinta-60); max-width:50ch }

.etapa-flag{
  display:inline-flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em;
  color:var(--tinta-60);
}
.etapa-flag span{
  background:var(--verde-prof); color:var(--crema);
  padding:.3rem .65rem; border-radius:6px;
  letter-spacing:.1em; text-transform:uppercase; font-size:.68rem;
}

.feats{
  margin-top:1.6rem;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,1.6vw,1.4rem);
}
.feat{
  background:#fff;
  border:1px solid var(--piedra);
  border-radius:var(--r-m);
  padding:clamp(1.4rem,2.2vw,1.9rem);
  transition:transform .22s var(--ease), border-color .22s ease, box-shadow .22s ease;
}
.feat:hover{
  transform:translateY(-4px);
  border-color:var(--verde);
  box-shadow:0 22px 40px -30px rgba(46,66,48,.7);
}
.feat__ico{
  width:32px; height:32px;
  stroke:var(--verde); stroke-width:1.6; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  margin-bottom:1.15rem;
}
.feat h3{ font-size:1.14rem; font-weight:600; color:var(--verde-prof); margin-bottom:.5rem; letter-spacing:-.015em }
.feat p{ font-size:.96rem; color:var(--tinta-60) }

/* mapa del establecimiento (tarjeta) */
.mapa{ position:relative }
.mapa__svg{ width:100%; height:auto; border-radius:22px; box-shadow:0 30px 50px -30px rgba(46,66,48,.5) }
.lote{ stroke:var(--crema); stroke-width:2.5; stroke-linejoin:round; opacity:0 }
.is-drawn .lote{ animation:loteIn .75s var(--ease) forwards }
.lote--1{ fill:var(--l1); animation-delay:.05s }
.lote--2{ fill:var(--l4); animation-delay:.15s }
.lote--3{ fill:var(--l3); animation-delay:.25s }
.lote--4{ fill:var(--l2); animation-delay:.35s }
.lote--5{ fill:var(--l5); animation-delay:.45s }
.lote--6{ fill:var(--l6); animation-delay:.55s }
@keyframes loteIn{ from{ opacity:0; transform:scale(.92) } to{ opacity:1; transform:scale(1) } }
.mapa__potreros .lote{ transform-box:fill-box; transform-origin:center }
.mapa__camino{
  stroke:var(--crema); stroke-width:7; stroke-linecap:round; fill:none;
  stroke-dasharray:700; stroke-dashoffset:700;
}
.is-drawn .mapa__camino{ animation:trazar 1.4s .5s ease-out forwards }
.mapa__curvas path{ stroke-dasharray:900; stroke-dashoffset:900 }
.is-drawn .mapa__curvas path{ animation:trazar 2.2s .7s ease-out forwards }
.mapa__casco{ opacity:0 }
.is-drawn .mapa__casco{ animation:loteIn .6s .8s ease-out forwards }
.mapa__sol{ opacity:0 }
.is-drawn .mapa__sol{ animation:loteIn .8s 1s ease-out forwards }
.mapa__barra{
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.9rem 1.15rem;
  border-bottom:1px solid rgba(46,66,48,.14);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--verde-osc);
  background:rgba(246,242,228,.9);
  border-radius:22px 22px 0 0;
}

.duo{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,4rem);
  align-items:center;
}
.duo__txt h2{ font-size:clamp(1.8rem,3.2vw,2.5rem); color:var(--verde-prof) }
.duo__txt p{ margin-top:1.1rem; color:var(--tinta-60) }
.duo__lista{ margin-top:1.6rem; display:grid; gap:.1rem }
.duo__lista li{
  position:relative; padding:.8rem 0 .8rem 1.8rem;
  border-top:1px solid var(--piedra);
  font-size:.98rem;
}
.duo__lista li::before{
  content:''; position:absolute; left:0; top:1.28rem;
  width:8px; height:8px; border-radius:2px; background:var(--verde);
}

/* ---------- 12. Ciclo de roles ---------- */
.ciclo{
  margin-top:clamp(2.4rem,4.5vw,3.6rem);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.8rem,1.4vw,1.2rem);
  position:relative;
}
.rol{
  background:var(--crema);
  border:1px solid rgba(46,66,48,.14);
  border-radius:var(--r-m);
  padding:clamp(1.3rem,2vw,1.7rem);
  position:relative;
}
.rol::after{
  content:''; position:absolute; right:-.85rem; top:50%; z-index:2;
  width:11px; height:11px;
  border-top:1.8px solid var(--verde); border-right:1.8px solid var(--verde);
  transform:translateY(-50%) rotate(45deg);
}
.rol--fin::after{ display:none }
.rol__n{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--verde); display:block; margin-bottom:.85rem }
.rol h3{ font-size:1.1rem; font-weight:600; color:var(--verde-prof); margin-bottom:.5rem }
.rol p{ font-size:.93rem; color:var(--tinta-60) }
.rol--fin{ background:var(--verde-prof); border-color:var(--verde-prof) }
.rol--fin .rol__n{ color:var(--verde) }
.rol--fin h3{ color:var(--crema) }
.rol--fin p{ color:var(--crema-70) }

.ciclo__loop{
  margin-top:1.6rem;
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--mono); font-size:.78rem;
  color:var(--tinta-60);
}
.ciclo__loop svg{
  width:38px; height:23px; flex:none;
  fill:none; stroke:var(--verde); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}

/* ejemplo paso a paso */
.ejemplo{ margin-top:clamp(2.4rem,4.5vw,3.4rem); position:relative; padding-left:2.4rem }
.ejemplo::before{
  content:''; position:absolute; left:9px; top:12px; bottom:12px;
  width:2px; background:var(--piedra);
}
.ejemplo__linea{
  content:''; position:absolute; left:9px; top:12px;
  width:2px; background:var(--verde);
  height:0; transition:height 1.2s var(--ease);
}
.ejemplo.is-in .ejemplo__linea{ height:calc(100% - 24px) }
.paso{ position:relative; padding-bottom:2rem }
.paso:last-child{ padding-bottom:0 }
.paso::before{
  content:''; position:absolute; left:-2.4rem; top:6px;
  width:20px; height:20px; border-radius:50%;
  background:var(--crema); border:2px solid var(--verde);
}
.paso__hora{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--verde-osc); text-transform:uppercase }
.paso h3{ font-size:1.12rem; margin:.35rem 0 .4rem; color:var(--verde-prof) }
.paso p{ color:var(--tinta-60); font-size:.97rem; max-width:56ch }

/* ---------- 13. Enfoque de datos ---------- */
.datos{ background:var(--verde); color:var(--verde-noche); padding-block:clamp(60px,7vw,96px) }
.datos .eyebrow{ color:rgba(34,48,31,.72) }
.datos__linea{
  margin-top:.6rem;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.4rem,3vw,3rem);
}
.datos__linea li{ position:relative; padding-top:1.6rem }
.datos__linea li::before{
  content:''; position:absolute; top:0; left:0; width:100%; height:2px;
  background:rgba(34,48,31,.28);
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s var(--ease);
}
.datos__linea li.is-in::before{ transform:scaleX(1) }
.datos__v{
  display:block;
  font-family:var(--display);
  font-size:clamp(1.7rem,3.4vw,2.5rem);
  font-weight:700; letter-spacing:-.03em; line-height:1;
  font-variation-settings:'wdth' 88;
}
.datos__sub{
  display:block; margin-top:.85rem;
  font-size:.98rem; line-height:1.5;
  color:rgba(34,48,31,.95);
  max-width:34ch;
}

/* ---------- 14. Hoja de ruta ---------- */
.etapas{ display:grid; gap:clamp(2.5rem,5vw,4.5rem) }
.etapa{
  display:grid; grid-template-columns:minmax(240px,.8fr) 1.2fr;
  gap:clamp(1.5rem,3vw,3rem);
  padding-top:1.8rem;
  border-top:2px dashed var(--piedra);
}
.etapa--activa{ border-top:2px solid var(--verde) }
.etapa__cab{ position:sticky; top:calc(var(--header-h) + 28px); align-self:start }
.etapa__meta{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.9rem }
.etapa__n{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--verde-osc) }
.etapa__estado{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-60);
  border:1px solid var(--piedra); border-radius:999px;
  padding:.22rem .6rem;
}
.etapa--activa .etapa__estado{ background:var(--verde); border-color:var(--verde); color:var(--verde-noche); font-weight:600 }
.etapa__t{ font-size:clamp(1.5rem,2.6vw,2.1rem); color:var(--verde-prof); margin-bottom:.9rem }
.etapa__int{ color:var(--tinta-60); font-size:.99rem; max-width:36ch }
.etapa__items{ display:grid; gap:.1rem }
.etapa__items li{
  padding:1.1rem 0;
  border-top:1px solid var(--piedra);
  display:grid; gap:.3rem;
}
.etapa__items li:first-child{ border-top:none; padding-top:0 }
.etapa__items h4{
  margin:0; font-family:var(--display); font-size:1.06rem; font-weight:600;
  letter-spacing:-.012em; color:var(--tinta);
}
.etapa__items p{ font-size:.95rem; color:var(--tinta-60) }

/* ---------- 15. Formulario ---------- */
.piloto{ background:var(--verde-prof); color:var(--crema); padding-block:var(--sec-y) }
.piloto__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2.2rem,5vw,4.5rem); align-items:start }
.piloto__title{ font-size:clamp(1.95rem,3.6vw,2.8rem); color:var(--crema); font-variation-settings:'wdth' 92 }
.piloto__lead{ margin-top:1.2rem; color:var(--crema-70); max-width:44ch; font-size:1.05rem }
.piloto__lista{ margin-top:2rem; display:grid; gap:.1rem }
.piloto__lista li{
  padding:.85rem 0 .85rem 1.9rem;
  border-top:1px solid rgba(255,253,247,.16);
  position:relative; font-size:.99rem;
}
.piloto__lista li::before{
  content:''; position:absolute; left:0; top:1.32rem;
  width:9px; height:9px; border-radius:50%; background:var(--verde);
}
.piloto__alt{ margin-top:2rem; font-family:var(--mono); font-size:.8rem; color:var(--crema-70) }
.piloto__alt a{ color:var(--verde); text-underline-offset:4px }

.form{
  background:var(--crema);
  border-radius:var(--r-l);
  padding:clamp(1.5rem,3vw,2.4rem);
  color:var(--tinta);
  box-shadow:0 40px 60px -45px rgba(0,0,0,.65);
}
.form__row{ margin-bottom:1.05rem }
.form__row--2{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem }
.field{ display:block; border:0; padding:0; margin:0; min-width:0 }
.field__lb{
  display:block; margin-bottom:.42rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--verde-osc);
}
.field__lb em{ font-style:normal; color:var(--tinta-60); text-transform:none; letter-spacing:.02em }
.field input,
.field select,
.field textarea{
  width:100%;
  background:#fff;
  border:1px solid var(--piedra);
  border-radius:var(--r-s);
  padding:.78rem .9rem;
  font-size:.98rem;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field textarea{ resize:vertical; min-height:88px }
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235F7C4B' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .95rem center; background-size:12px;
  padding-right:2.4rem;
}
.field input::placeholder,
.field textarea::placeholder{ color:rgba(24,28,24,.34) }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--verde);
  box-shadow:0 0 0 3px rgba(124,154,104,.22);
}
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid{ border-color:#B4553F }

.radios{ display:flex; flex-wrap:wrap; gap:.5rem }
.radios label{ position:relative; cursor:pointer }
.radios input{ position:absolute; opacity:0; inset:0; cursor:pointer }
.radios span{
  display:inline-block;
  padding:.55rem .95rem;
  border:1px solid var(--piedra); border-radius:999px;
  background:#fff; font-size:.9rem;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.radios input:hover + span{ border-color:var(--verde) }
.radios input:checked + span{ background:var(--verde-prof); border-color:var(--verde-prof); color:var(--crema); font-weight:500 }
.radios input:focus-visible + span{ outline:2.5px solid var(--verde-osc); outline-offset:3px }

.form__nota{ margin-top:.9rem; font-size:.82rem; color:var(--tinta-60); text-align:center }
.form__estado{ margin-top:.9rem; font-size:.92rem; text-align:center; font-weight:500; min-height:1.2em }
.form__estado.is-ok{ color:var(--verde-osc) }
.form__estado.is-error{ color:#B4553F }

.datos-contacto{ display:grid; gap:1.6rem; margin-top:2.4rem }
.datos-contacto a{ color:var(--crema); text-decoration:none; font-size:1.05rem; font-weight:600 }
.datos-contacto a:hover{ color:var(--verde) }
.datos-contacto .field__lb{ color:var(--verde) }

/* ---------- 16. CTA final · Pie · WhatsApp ---------- */
.cta{
  background:var(--verde);
  color:var(--verde-noche);
  padding-block:clamp(54px,6vw,84px);
}
.cta__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1.5rem,4vw,3rem); flex-wrap:wrap;
}
.cta__t{ font-size:clamp(1.6rem,3.2vw,2.4rem); font-variation-settings:'wdth' 92; max-width:20ch }
.cta__p{ margin-top:.7rem; color:rgba(34,48,31,.9); max-width:42ch }
.cta .btn--solid{ background:var(--verde-noche) }

.pie{ background:var(--tinta); color:var(--crema); padding-top:clamp(56px,6vw,80px) }
.pie__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(2rem,4vw,3rem);
  padding-bottom:clamp(36px,4vw,54px);
}
.pie__marca img{ width:auto; height:82px }
.pie__marca p{ margin-top:1.1rem; color:var(--crema-45); font-size:.94rem; max-width:30ch }
.pie__t{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--verde); margin-bottom:1.1rem;
}
.pie__nav, .pie__contacto{ display:flex; flex-direction:column; gap:.7rem; align-items:flex-start }
.pie__nav a, .pie__contacto a{ text-decoration:none; color:var(--crema-70); font-size:.96rem; transition:color .18s ease }
.pie__nav a:hover, .pie__contacto a:hover{ color:var(--crema) }
.pie__loc{ color:var(--crema-45); font-size:.9rem }
.pie__legal{
  border-top:1px solid rgba(255,253,247,.14);
  padding-block:1.4rem 1.6rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.72rem;
  color:var(--crema-45);
}

.wa{
  position:fixed; right:clamp(14px,2.4vw,26px); bottom:clamp(14px,2.4vw,26px);
  z-index:90;
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--verde-prof); color:var(--crema);
  text-decoration:none;
  padding:.8rem 1.15rem;
  border-radius:999px;
  font-size:.92rem; font-weight:600;
  box-shadow:0 16px 34px -16px rgba(24,28,24,.75);
  transition:transform .2s ease, background-color .2s ease;
}
.wa:hover{ transform:translateY(-3px); background:var(--verde-noche) }
.wa svg{ width:22px; height:22px; fill:currentColor; flex:none }

/* ---------- 17. Animaciones de scroll ---------- */
.reveal{
  opacity:0;
  transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
  transform:translateY(26px);
}
.reveal[data-anim="izq"]  { transform:translateX(-34px) }
.reveal[data-anim="der"]  { transform:translateX(34px) }
.reveal[data-anim="zoom"] { transform:scale(.94) }
.reveal[data-anim="foco"] { transform:translateY(14px); filter:blur(6px) }
.reveal.is-in{ opacity:1; transform:none; filter:none }

/* aparición palabra por palabra (titulares) */
.enlinea{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.1em; margin-bottom:-.1em;
}
.enlinea > span{
  display:inline-block;
  transform:translateY(105%);
  transition:transform .9s var(--ease);
}
.enlinea.is-in > span{ transform:translateY(0) }

@media (max-width: 1040px){
  .feats{ grid-template-columns:repeat(2,1fr) }
  .ciclo{ grid-template-columns:repeat(2,1fr) }
  .rol:nth-child(2)::after{ display:none }
  .datos__linea{ grid-template-columns:1fr; gap:0 }
  .datos__linea li{ padding-block:1.4rem }
  .datos__sub{ max-width:52ch }
  .accesos__grid{ grid-template-columns:1fr }
  .etapa{ grid-template-columns:1fr; gap:1.5rem }
  .etapa__cab{ position:static }
  .duo{ grid-template-columns:1fr }
  .plano{ width:min(78%,620px); right:-12% }
}

@media (max-width: 920px){
  .piloto__grid{ grid-template-columns:1fr }
  .hero{ min-height:auto; padding-block: clamp(80px,12vh,120px) clamp(270px,36vh,320px) }
  .hero__chips{ bottom:clamp(18px,3vh,32px); right:auto; left:var(--pad-x); justify-items:start }
  .plano{ width:132%; right:-32%; bottom:-1% }
  .franja__inner{ grid-template-columns:1fr; gap:1.4rem }
}

@media (max-width: 780px){
  :root{ --header-h:64px }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    background:var(--crema);
    border-bottom:1px solid var(--piedra);
    flex-direction:column; align-items:stretch; gap:0;
    padding:.5rem var(--pad-x) 1.4rem;
    transform:translateY(-140%);
    transition:transform .32s var(--ease);
    box-shadow:0 24px 40px -30px rgba(24,28,24,.7);
  }
  .nav.is-open{ transform:translateY(0) }
  .nav a{ padding:.95rem 0; font-size:1.05rem; border-bottom:1px solid var(--piedra); color:var(--tinta) }
  .nav a:not(.btn)::after{ display:none }
  .nav .btn{ margin-top:1rem; border-bottom:none; justify-content:center }
  .navtoggle{ display:block }
  .dolor{ grid-template-columns:1fr }
  .dolor__item,
  .dolor__item:nth-child(even){ padding-inline:0 }
  .dolor__item:nth-child(odd){ border-right:none }
  .feats{ grid-template-columns:1fr }
  .ciclo{ grid-template-columns:1fr }
  .rol::after{ right:auto; left:50%; top:auto; bottom:-.85rem; transform:translateX(-50%) rotate(135deg) }
  .rol:nth-child(2)::after{ display:block }
  .form__row--2{ grid-template-columns:1fr }
  .pie__grid{ grid-template-columns:1fr; gap:2.4rem }
  .cta__inner{ flex-direction:column; align-items:flex-start }
  .wa span{ display:none }
  .wa{ padding:.95rem; border-radius:50% }
  .wa svg{ width:26px; height:26px }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; filter:none }
  .enlinea > span{ transform:none }
  .lote,.mapa__sol,.mapa__casco,.plano .p-fill,.plano .p-vertice{ opacity:1 }
  .mapa__camino,.mapa__curvas path,.plano .p-linea{ stroke-dashoffset:0 }
  .hero__foto img,
  .hero__video{ transform:none !important }
}

@media print{
  .topbar,.wa,.navtoggle{ display:none }
  body{ background:#fff }
  .reveal{ opacity:1; transform:none }
}