/* Yerbanalytics · landing
   Valores tomados del export de Claude Design (referencia/claude-design/Main.dc.html).
   Ver docs/DESIGN.md. */

/* ---------- Fuentes (autoalojadas) ---------- */
@font-face{font-family:'Fraunces';src:url(../assets/fonts/fraunces-latin-standard-normal.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Tight';src:url(../assets/fonts/inter-tight-latin-wght-normal.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(../assets/fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2');font-weight:100 800;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --night:#08130E; --plat:#0F2B22; --leaf:#2F7D32; --vein:#B9D98B; --signal:#F26A21; --amber:#E9B25E; --cream:#F2EEE4;
  --muted:rgba(242,238,228,.66); --line:rgba(185,217,139,.28);
  --serif:'Fraunces',Georgia,serif; --sans:'Inter Tight',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --gutter:clamp(20px,6vw,110px);
  --ease-out:cubic-bezier(.23,1,.32,1);       /* entradas: arranca rápido, frena suave */
  --ease-in-out:cubic-bezier(.77,0,.175,1);  /* movimiento en pantalla */
  --r-media:16px; /* solo imágenes que flotan sobre el fondo; controles, etiquetas y retículas van rectos */
  color-scheme:dark;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{background:var(--night)}
body{margin:0;background:var(--night);color:var(--cream);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,p{margin:0}
img,video,canvas{display:block}
.root{position:relative;overflow-x:clip;background:var(--night);color:var(--cream);font-family:var(--sans)}
.serif{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;font-variation-settings:'opsz' 144}
.mono{font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none !important}

.skip{position:fixed;z-index:80;left:16px;top:-80px;background:var(--signal);color:var(--night);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:12px 16px;text-decoration:none}
.skip:focus{top:16px}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
h2:focus{outline:none}

/* ---------- Nav ---------- */
.nav{position:fixed;z-index:50;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(18px,3vw,40px);background:rgba(8,19,14,0);transition:background .4s}
.nav.solid{background:rgba(8,19,14,.86)}
.nav img{height:44px;width:auto}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--cream)}
.wm{font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:.24em;text-transform:uppercase}
.cta-ghost{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--cream);border:1px solid rgba(242,238,228,.45);padding:13px 20px;min-height:44px;display:inline-flex;align-items:center;transition:background .25s,color .25s,border-color .25s,transform 160ms var(--ease-out)}
.cta-ghost:active{transform:scale(.97)}
.veil{position:fixed;inset:0;z-index:60;background:var(--night);opacity:0;pointer-events:none;transition:opacity 450ms var(--ease-in-out)}
.veil.on{opacity:1;pointer-events:auto;transition:opacity 250ms var(--ease-out)}

/* ---------- Escenas fijas y encuadres ---------- */
.pin{position:relative;--p:0}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--night)}
.c169{position:absolute;left:50%;top:50%;width:max(100vw,177.78vh);height:max(56.25vw,100vh);transform:translate(-50%,-50%) scale(var(--s,1))}
.c169 img,.c169 video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c916{position:absolute;left:50%;top:50%;width:max(100vw,56.25vh);height:max(177.78vw,100vh);transform:translate(-50%,-50%)}
.c916 video,.c916 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- 1. Hero ---------- */
#hero{height:100vh;height:100svh}
.herolayer{position:absolute;inset:0;z-index:3;background:var(--night)}
.vwrap{position:absolute;inset:0;overflow:hidden}
.vidlayer{z-index:1}
.vid-m{z-index:0}
.vshift{position:absolute;inset:0;transform:translateX(15vw);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%);mask-image:linear-gradient(to right,transparent 0,#000 24%)}
.vshift canvas{position:absolute;inset:0;width:100%;height:100%}
.matte{z-index:4;pointer-events:none}
.hcopy{position:absolute;z-index:2;left:var(--gutter);top:50%;transform:translateY(-52%);max-width:78vw}
.ht{font-family:var(--serif);font-weight:300;font-size:clamp(54px,9.6vw,196px);line-height:.92;letter-spacing:-.035em;font-variation-settings:'opsz' 144;color:var(--cream)}
.hdesc{margin-top:clamp(18px,2.4vw,38px);max-width:30ch;font-size:clamp(17px,1.5vw,24px);line-height:1.4;font-weight:300;color:var(--muted)}
.nomatte .ht{position:relative;z-index:6}
.heroform{display:none}

/* ---------- 2. Problema (por tiempo) ---------- */
#problema{height:100vh;height:100svh;--q2:clamp(0,calc(var(--p) / .55),1)}
.viv{position:absolute;inset:0;z-index:1;filter:brightness(.8)}
/* La cámara se aleja apenas (1,12 → 1): al llegar desde el hero el vivero ya se reconoce */
.viv .c169{transform-origin:50% 60%;--s:calc(1.12 - var(--p) * .12)}
.vshade{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(8,19,14,.96) 6%,rgba(8,19,14,.78) 36%,rgba(8,19,14,.2) 66%,rgba(8,19,14,0) 82%);opacity:calc(.35 + var(--q2) * .65)}
.prob{position:absolute;z-index:4;left:var(--gutter);right:var(--gutter);bottom:clamp(32px,8vh,92px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,5vw,90px);align-items:start}
.probt{margin-top:2px;font-family:var(--serif);font-weight:300;font-size:clamp(30px,4.3vw,72px);line-height:1.04;letter-spacing:-.028em;font-variation-settings:'opsz' 144}
.bl{display:inline-block;color:var(--cream);background:var(--night);border:1px solid rgba(242,238,228,.4);padding:6px 11px;margin-bottom:16px}
.beats{list-style:none;margin:0;padding:0;display:grid;gap:0}
.beat{padding:16px 0;border-top:1px solid var(--line)}
.beat .mono{color:var(--cream);display:block;margin-bottom:6px}
.beat p{font-size:clamp(16px,1.3vw,20px);line-height:1.45;font-weight:300;color:rgba(242,238,228,.78);max-width:40ch}

/* Texto de las escenas por tiempo: entra por su cuenta apenas arranca la escena (clase .go),
   sin esperar a la animación de la foto. --d es el retraso de cada elemento. */
.js .stxt{opacity:0;transform:translateY(16px);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
.go .stxt{opacity:1;transform:none;transition-delay:var(--d,300ms)}
.d420{--d:420ms}.d540{--d:540ms}.d660{--d:660ms}.d1100{--d:1100ms}

/* ---------- Secciones comunes ---------- */
.sec{position:relative;padding:clamp(72px,11vh,120px) var(--gutter) clamp(28px,6vh,64px)}
.h2{font-family:var(--serif);font-weight:300;font-size:clamp(36px,5.6vw,96px);line-height:1;letter-spacing:-.03em;font-variation-settings:'opsz' 144}
.sub{margin-top:26px;font-size:clamp(17px,1.5vw,23px);line-height:1.5;font-weight:300;color:var(--muted);max-width:44ch}
.js .rv{opacity:0;transform:translateY(16px);transition:opacity 800ms var(--ease-out),transform 800ms var(--ease-out)}
.js .rv.in{opacity:1;transform:none}
.rvd1{transition-delay:80ms}.rvd2{transition-delay:160ms}.rvd3{transition-delay:240ms}.rvd4{transition-delay:320ms}

/* Deriva: zoom del fondo, recorte de entrada y apagado de salida */
[data-drift]{clip-path:inset(calc((1 - var(--en,1)) * 8%) calc((1 - var(--en,1)) * 7%) 0 round calc((1 - var(--en,1)) * 22px))}
[data-drift] .bg{opacity:calc(1 - var(--lv,0) * .8)}
.sensar .bg img{transform:scale(calc(1.14 - .12 * var(--k,.5)));transform-origin:70% 50%;will-change:transform}
.decidir .dimg img{transform:scale(calc(1.12 - .1 * var(--k,.5)));transform-origin:60% 40%;will-change:transform}
.vision .bg img{transform:scale(calc(1.12 - .1 * var(--k,.5)));transform-origin:50% 60%;will-change:transform}
.cierre .bg img{transform:scale(calc(1.14 - .12 * var(--k,.5)));transform-origin:70% 60%;will-change:transform}
.plat .shots{overflow:hidden}
.plat .shot{transform:scale(calc(1.05 - .05 * var(--k,.5)));transform-origin:50% 0}

/* ---------- 3. Pasillo (por tiempo) ---------- */
#pasillo{height:100vh;height:100svh;--e:clamp(0,calc(var(--p) / .42),1)}
.pframe{position:absolute;inset:0;clip-path:inset(calc((1 - var(--e)) * 24%) calc((1 - var(--e)) * 31%) calc((1 - var(--e)) * 24%) calc((1 - var(--e)) * 31%) round calc((1 - var(--e)) * 20px))}
.pframe .c169{--s:calc(1.02 + var(--p) * .3);transform-origin:50% 45%}
.pintro{position:absolute;z-index:3;left:0;right:0;top:8vh;text-align:center;opacity:calc(1 - var(--e) * 1.8);pointer-events:none}
.pintro .h2{font-size:clamp(30px,4vw,64px)}
.pshade{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,19,14,.9) 0,rgba(8,19,14,.4) 40%,rgba(8,19,14,0) 65%)}
.js .pshade{opacity:0;transition:opacity 700ms var(--ease-out)}
.go .pshade{opacity:1;transition-delay:1100ms}
.ptext{position:absolute;z-index:4;left:0;right:0;margin:0 auto;text-align:center;bottom:clamp(36px,9vh,100px);width:min(760px,86vw)}
.ptext .h2{margin-bottom:18px}
.ptext .sub{color:rgba(242,238,228,.88);margin-left:auto;margin-right:auto}

/* ---------- 4. Sensar ---------- */
.sensar{min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--night)}
.sensar .bg{position:absolute;inset:0;overflow:hidden}
.sensar .bg img{width:100%;height:100%;object-fit:cover;object-position:70% center}
.sensar .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(8,19,14,.97) 0,rgba(8,19,14,.9) 38%,rgba(8,19,14,.12) 70%)}
.sensar .in-w{position:relative;z-index:2;max-width:560px}
.micro{margin-top:32px;border-top:1px solid var(--line)}
.mt{color:var(--muted);padding:14px 0 12px}
.mrow{display:grid;grid-template-columns:1fr auto;gap:6px 14px;padding:7px 0;border-bottom:1px solid var(--line);align-items:center}
.mrow .trk{grid-column:1 / -1;height:3px;background:rgba(242,238,228,.14);position:relative;overflow:hidden}
.mrow .trk i{position:absolute;inset:0;background:var(--vein);transform-origin:left;animation:sway 5.5s ease-in-out infinite alternate}
.mrow.warn .trk i{background:var(--signal);animation-name:swayl}
.mrow.warn .st{color:var(--signal)}
.mcol .mrow:nth-of-type(2n) .trk i{animation-duration:7s;animation-delay:-2s}
.mcol .mrow:nth-of-type(3n) .trk i{animation-duration:6.2s;animation-delay:-4s}
.mcol .mrow:nth-of-type(5n) .trk i{animation-duration:8s;animation-delay:-1s}
@keyframes sway{0%{transform:scaleX(.52)}100%{transform:scaleX(.71)}}
@keyframes swayl{0%{transform:scaleX(.21)}100%{transform:scaleX(.30)}}
.st{display:inline-flex;align-items:center;gap:8px;color:var(--vein)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:blink 1.8s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}

/* ---------- Listas seleccionables (Ver y Plataforma) ---------- */
.vlist{margin-top:clamp(18px,3.4vh,44px);display:grid;max-width:520px}
.dl{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:16px;width:100%;background:none;border:0;border-top:1px solid var(--line);color:var(--cream);font:inherit;padding:clamp(9px,1.5vh,14px) 0;text-align:left;cursor:pointer;opacity:.5;transition:opacity .4s}
.dl:last-child{border-bottom:1px solid var(--line)}
.dl .nm{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.3vw,36px);letter-spacing:-.015em;display:inline-flex;align-items:center;gap:14px}
.dl .nm i{width:9px;height:9px;background:var(--signal);opacity:0;transition:opacity .4s}
.dl .mono{color:var(--muted)}
.dl.on{opacity:1}
.dl.on .nm i{opacity:1}
.dl .pb{position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--signal);transform:scaleX(0);transform-origin:left}
.dl.run .pb{animation:pbar var(--pbdur,3.2s) linear forwards}
@keyframes pbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.dl:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* ---------- 5. Ver ---------- */
.ver2{background:var(--night);min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,90px);align-items:center;overflow:hidden}
.ver2 .h2{font-size:clamp(32px,min(4.6vw,7.4vh),76px);max-width:11em}
.vstage{position:relative;width:min(66vh,46vw);aspect-ratio:1;background:#000;border-radius:var(--r-media);overflow:hidden;box-shadow:0 40px 120px -40px rgba(0,0,0,.8)}
.vs{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.vs.on{opacity:1}
.vs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ret{position:absolute;border:2px solid var(--signal);pointer-events:none}
/* La retícula "fija" la detección: aparece después de la foto y se ajusta sobre la hoja */
.vs .ret{opacity:0;transform:scale(1.04);transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out)}
.vs.on .ret{opacity:1;transform:none;transition-delay:250ms}
.ret::before,.ret::after{content:"";position:absolute;width:16px;height:16px;border:3px solid var(--signal)}
.ret::before{left:-5px;top:-5px;border-right:0;border-bottom:0}
.ret::after{right:-5px;bottom:-5px;border-left:0;border-top:0}
.tag{position:absolute;left:-1px;top:100%;display:flex;align-items:center;gap:10px;background:var(--night);color:var(--cream);border-top:2px solid var(--signal);padding:6px 10px;white-space:nowrap}
.cbar{display:block;width:34px;height:3px;background:rgba(242,238,228,.22)}
.cbar b{display:block;height:100%;background:var(--signal)}
/* Retícula y confianza (ilustrativa) de cada anomalía */
.ret-plaga{left:20.4%;top:20.3%;width:52.6%;height:65.9%}.ret-plaga .cbar b{width:84%}
.ret-hongo{left:27.5%;top:10.5%;width:46%;height:77%}.ret-hongo .cbar b{width:91%}
.ret-estres{left:6%;top:6%;width:68%;height:84%}.ret-estres .cbar b{width:96%}
.ret-clorosis{left:11%;top:12.5%;width:76%;height:77%}.ret-clorosis .cbar b{width:88%}

/* ---------- 6. Decidir y actuar ---------- */
.decidir{min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--night)}
.decidir .bg{position:absolute;inset:0;container-type:size;overflow:hidden}
.decidir .dimg{position:absolute;left:50%;top:50%;width:max(100cqw,177.78cqh);height:max(56.25cqw,100cqh);transform:translate(calc(-50% + 15cqw),-50%)}
.decidir .dimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.decidir .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(8,19,14,.97) 0,rgba(8,19,14,.9) 34%,rgba(8,19,14,.1) 62%)}
.decidir .in-w{position:relative;z-index:2;max-width:560px}
.acts{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:18px}
.acts li{border-top:1px solid var(--line);padding-top:14px}
.acts b{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.8vw,28px);color:var(--cream)}
.acts b::before{content:"";width:8px;height:8px;background:var(--signal);flex:none}
.acts span{display:block;margin-top:6px;font-size:clamp(14px,1.1vw,16px);line-height:1.5;color:var(--muted)}

/* ---------- 6b. Mediasombra (por tiempo) ---------- */
/* La sección mide dos pantallas: la escena queda fija y el scroll retira la malla (--p de 0 a 1).
   Deja un respiro al principio y al final para leer. */
#deploy{height:200vh;height:200svh;--d:clamp(0,calc((var(--p) - .12) / .72),1)}
.rm #deploy{height:100vh;height:100svh}
.mesh{position:absolute;inset:0;clip-path:inset(0 0 calc(100% - (1 - var(--d)) * 54%) 0)}
.front{position:absolute;left:0;right:0;top:0;height:3px;margin-top:-1px;transform:translateY(calc((1 - var(--d)) * .54 * max(56.25vw,100vh)));background:var(--signal);box-shadow:0 0 0 1px rgba(8,19,14,.75),0 0 22px 3px rgba(242,106,33,.6);opacity:calc(clamp(0,calc(var(--d) * 20),1) * (1 - clamp(0,calc((var(--d) - .9) * 10),1)))}
.dshade{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,19,14,.92) 2%,rgba(8,19,14,.45) 34%,rgba(8,19,14,0) 60%)}
.dtext{position:absolute;z-index:4;left:var(--gutter);bottom:clamp(36px,9vh,100px);max-width:min(900px,86vw)}
.dtext .h2{font-size:clamp(30px,4.2vw,70px);margin-top:14px}
.dtext .sub{color:rgba(242,238,228,.88);margin-top:18px;max-width:46ch}
.dlab{color:var(--cream);display:inline-flex;align-items:center;gap:10px;background:rgba(8,19,14,.86);border-left:2px solid var(--signal);padding:6px 12px}
.dlab .dot{color:var(--signal)}

/* ---------- 7. Plataforma ---------- */
.plat{background:var(--night);color:var(--cream);min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(84px,11vh,120px);padding-bottom:clamp(28px,5vh,56px);overflow:hidden}
.phead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,90px);align-items:end}
.plat .h2{font-size:clamp(34px,4.6vw,76px)}
.plat .sub{max-width:52ch;margin-top:20px}
.plat .vlist{margin-top:0;max-width:none}
.shots{position:relative;margin:clamp(22px,4vh,40px) auto 0;width:min(100%,calc((100vh - 440px) * 2.31));min-width:min(100%,560px);background:#fff;border-radius:var(--r-media);box-shadow:0 40px 120px -40px rgba(0,0,0,.8);aspect-ratio:1920/830}
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s}
.shot.on{opacity:1}

/* ---------- 8. Visión ---------- */
.vision{min-height:100vh;display:flex;align-items:flex-start;overflow:hidden;background:var(--night);padding-top:clamp(96px,13vh,130px)}
.vision .bg{position:absolute;inset:0;overflow:hidden}
.vision .bg img{width:100%;height:100%;object-fit:cover;object-position:center 70%}
/* Con JS (clase .framed) la foto se ubica para que el cielo empiece justo debajo del texto (ver frameVision en
   main.js). El zoom de la deriva se hace desde esa línea, así el horizonte no se mueve. */
.vision.framed .bg img{position:absolute;left:var(--ix);top:var(--iy);width:var(--iw);height:var(--ih);max-width:none;object-fit:fill;transform-origin:50% 37%}
/* Oscurece la franja del texto hasta donde termina (--tb, medido en JS; 300px sin JS) y se desvanece enseguida. */
.vision .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(8,19,14,.9) 0,rgba(8,19,14,.82) calc(var(--tb,300px) - 10px),rgba(8,19,14,.3) calc(var(--tb,300px) + 40px),rgba(8,19,14,0) calc(var(--tb,300px) + 110px))}
.vision .in-w{position:relative;z-index:2;width:100%;text-align:center}
.vision .h2{font-size:clamp(34px,4.2vw,66px);white-space:nowrap}
.vpts{margin:22px auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 40px;max-width:880px;text-align:center}
.vpts .sub{margin:0;max-width:none;border-top:1px solid rgba(242,238,228,.34);padding-top:12px;font-size:clamp(17px,1.45vw,22px);line-height:1.4;font-weight:400;text-wrap:balance;padding-inline:max(0px,calc((100% - 31ch) / 2));color:rgba(242,238,228,.94);text-shadow:0 1px 2px rgba(8,19,14,.7),0 1px 18px rgba(8,19,14,.7)}

/* ---------- Cierre ---------- */
.cierre{background:var(--night);display:flex;align-items:center;min-height:100vh;overflow:hidden}
.cierre .bg{position:absolute;inset:0;overflow:hidden}
.cierre .bg img{width:100%;height:100%;object-fit:cover;object-position:70% center}
.cierre .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(8,19,14,.96) 0,rgba(8,19,14,.9) 36%,rgba(8,19,14,.25) 66%,rgba(8,19,14,0) 85%)}
.cierre .in-w{position:relative;z-index:2;max-width:600px}
.cierre .h2{font-size:clamp(44px,6.4vw,108px)}
.cierre .sub{margin-top:22px;text-wrap:balance}
.cform{margin-top:34px;display:grid;max-width:440px}
.fgrid{display:grid;gap:14px}
/* Los mensajes van separados como un ítem más de la grilla del export, sin sumar espacio cuando no hay ninguno */
.cform .err{margin-top:14px}
.fld{width:100%;min-height:54px;background:rgba(242,238,228,.06);border:1px solid rgba(242,238,228,.38);color:var(--cream);font-family:var(--sans);font-size:17px;padding:0 16px;border-radius:0}
.fld:focus{outline:2px solid var(--signal);outline-offset:2px;border-color:var(--cream)}
.fld::placeholder{color:rgba(242,238,228,.6)}
select.fld{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--cream) 50%),linear-gradient(135deg,var(--cream) 50%,transparent 50%);background-position:calc(100% - 22px) 24px,calc(100% - 16px) 24px;background-size:6px 6px;background-repeat:no-repeat}
select.fld:has(option[value=""]:checked){color:rgba(242,238,228,.6)}
select.fld option{background:var(--plat);color:var(--cream)}
.selwrap{position:relative}
.selwrap select.fld{padding-right:72px}
.clr{position:absolute;right:40px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--cream);font-size:22px;line-height:1;cursor:pointer;opacity:.8}
.clr:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.btn{min-height:56px;background:var(--signal);color:var(--night);border:0;border-radius:0;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;cursor:pointer;padding:0 24px;transition:background .25s,transform 160ms var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.btn[aria-disabled="true"]{cursor:progress}
.thanks{text-wrap:balance;margin-top:34px;font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.4vw,52px);letter-spacing:-.02em;font-variation-settings:'opsz' 144;color:var(--cream)}
.err{color:var(--amber)}
.note{color:var(--muted);letter-spacing:.08em;text-transform:none;margin-top:2px}
.heroform .note{margin-top:10px;color:rgba(242,238,228,.78)}
[data-when="sent"]:not([hidden]){animation:rise 500ms var(--ease-out) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Footer ---------- */
.foot{display:flex;flex-wrap:wrap;gap:14px 36px;align-items:center;justify-content:space-between;padding:26px var(--gutter);border-top:1px solid var(--line);color:rgba(242,238,228,.84);background:var(--night)}
.foot a{text-decoration:none}

/* ---------- Página 404 (404.html) ---------- */
.e404-page{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.e404{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(88px,13vh,120px) var(--gutter) clamp(24px,5vh,56px);background:radial-gradient(ellipse 60% 45% at 50% 40%,rgba(47,125,50,.18),transparent 72%)}
/* El número y los espacios se ajustan también al alto, para que todo entre sin scroll en notebooks.
   El número se recorta sobre la foto del vivero; sin soporte de background-clip queda en verde claro */
.e404-n{font-family:var(--serif);font-weight:560;font-size:clamp(140px,min(25vw,30vh),340px);line-height:.8;letter-spacing:-.04em;font-variation-settings:'opsz' 144;color:var(--vein);padding:.04em .04em .06em;user-select:none}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .e404-n{background:url(../assets/img/pasillo.jpg) 50% 60%/cover;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
.e404-k{margin-top:clamp(16px,3vh,44px);color:var(--vein)}
.e404-t{margin-top:16px;font-size:clamp(34px,4.4vw,72px);text-wrap:balance}
.e404-s{margin-top:16px;max-width:34ch;text-wrap:balance}
.e404-b{margin-top:clamp(20px,4vh,32px);display:inline-flex;align-items:center;text-decoration:none}
.e404>*{animation:rise 800ms var(--ease-out) both}
.e404>:nth-child(2){animation-delay:120ms}
.e404>:nth-child(3){animation-delay:180ms}
.e404>:nth-child(4){animation-delay:240ms}
.e404>:nth-child(5){animation-delay:300ms}

/* Hover solo con mouse: en pantallas táctiles queda "pegado" después del toque */
@media (hover:hover) and (pointer:fine){
  .cta-ghost:hover{background:var(--signal);border-color:var(--signal);color:var(--night)}
  .btn:hover{background:#ff8340}
  .clr:hover{opacity:1}
  .foot a:hover{color:var(--cream)}
}

/* ---------- Responsive (un solo corte, como el export) ---------- */
.only-m{display:none}
@media (max-width:800px),(orientation:portrait){
  .only-d{display:none}
  .only-m{display:block}
  .hcopy{top:11vh;transform:none;max-width:90vw}
  .ht{font-size:clamp(50px,15.5vw,120px)}
  .hdesc{font-size:17px;max-width:26ch}
  .heroform{display:grid;position:absolute;z-index:6;left:20px;right:20px;bottom:calc(22px + env(safe-area-inset-bottom,0px))}
  .heroform .err{margin-top:10px}
  .heroform .row{display:grid;grid-template-columns:1fr;gap:10px}
  .heroform .thanks{margin-top:0;font-size:30px}
  .heroform .thanks + .sub{margin-top:6px;font-size:16px;color:rgba(242,238,228,.85)}
  .nav img{height:38px}
  .brand{gap:10px}
  .wm{font-size:11px;letter-spacing:.18em}
  .cta-ghost{padding:10px 14px;font-size:11px}
  .prob{grid-template-columns:minmax(0,1fr);gap:18px;bottom:22px}
  .probt{font-size:clamp(26px,7.4vw,40px)}
  .beat{padding:10px 0}
  .beat p{font-size:14px}
  .pframe{clip-path:inset(calc((1 - var(--e)) * 22%) calc((1 - var(--e)) * 8%) calc((1 - var(--e)) * 22%) calc((1 - var(--e)) * 8%) round calc((1 - var(--e)) * 14px))}
  .sensar .bg::after{background:linear-gradient(to bottom,rgba(8,19,14,.92) 0,rgba(8,19,14,.7) 55%,rgba(8,19,14,.35) 100%)}
  .ver2{grid-template-columns:minmax(0,1fr);gap:18px}
  .vstage{width:clamp(250px,calc(100svh - 520px),100%);justify-self:center}
  .ver2 .h2{font-size:clamp(28px,8vw,44px)}
  .ver2 .sub{margin-top:14px;font-size:16px}
  .vlist{max-width:none;margin-top:16px}
  .dl{padding:7px 0}
  .dl .nm{font-size:22px}
  .decidir{flex-direction:column;align-items:flex-start;justify-content:center;gap:32px}
  .decidir .bg::after{background:linear-gradient(to bottom,rgba(8,19,14,.92) 0,rgba(8,19,14,.78) 60%,rgba(8,19,14,.55) 100%)}
  .decidir .dimg{transform:translate(-50%,-50%)}
  .phead{grid-template-columns:minmax(0,1fr)}
  .vision .h2{white-space:normal}
  .vpts{grid-template-columns:minmax(0,1fr)}
  .cierre .bg::after{background:linear-gradient(to bottom,rgba(8,19,14,.94) 0,rgba(8,19,14,.86) 60%,rgba(8,19,14,.7) 100%)}
  .cierre .bg img{object-position:68% center}
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .js .rv{transition:none;opacity:1;transform:none}
  .mrow .trk i,.dot,.dl.run .pb{animation:none}
  .dl.on .pb{transform:none}
  .btn:active,.cta-ghost:active{transform:none}
  [data-when="sent"]:not([hidden]){animation-name:fade}
  .e404>*{animation-name:fade}
}
.rm .rv{opacity:1;transform:none;transition:none}
/* Movimiento reducido: los textos de escena solo funden, sin desplazarse ni esperar */
.rm .stxt{transform:none;transition:opacity 300ms ease}
.rm .vs .ret{transform:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.rm [data-drift]{clip-path:none}
.rm .sensar .bg img,.rm .decidir .dimg img,.rm .vision .bg img,.rm .cierre .bg img,.rm .plat .shot{transform:none}