/* FOEV LARRANT — motion.css
   Capa de movimiento y remates visuales compartida por las seis páginas.
   Reglas base: una sola paleta (#9ede46, #c9f593, #eaf0e4, #06110c, #0b1a12),
   una sola curva (--foev-ease) y solo transform/opacity en lo continuo. */

:root{
  --foev-ease:cubic-bezier(.22,1,.36,1);
  --foev-curtain:cubic-bezier(.76,0,.24,1);
  --sy:0;          /* scroll en píxeles, sin unidad */
  --svel:0;        /* velocidad de scroll normalizada 0–1 */
  --gal:0;         /* velocidad suavizada para marquesinas */
  --mx:50%;
  --my:50%;
}

/* ---------- Transición entre páginas (degrada sin daño) ---------- */
@view-transition{navigation:auto}

/* ---------- Anclajes: el header es fijo, así que el destino no puede quedar debajo ---------- */
section[id],[id][data-anchor]{scroll-margin-top:96px}
@media (max-width:1180px){section[id],[id][data-anchor]{scroll-margin-top:84px}}

/* ---------- Cascada real dentro de un bloque ---------- */
[data-stagger]>*{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s var(--foev-ease),transform .8s var(--foev-ease);
  transition-delay:var(--d,0ms);
}
[data-stagger].foev-in>*{opacity:1;transform:none}

/* ---------- Encabezado condensado al hacer scroll ---------- */
header[data-noprint]{transition:background .4s ease}
header.is-scrolled{background:rgba(6,17,12,.92)!important}
header.is-scrolled .foev-bar{height:64px}
.foev-bar{transition:height .4s var(--foev-ease)}
@media (max-width:1180px){header.is-scrolled .foev-bar{height:58px}}

/* Subrayado del nav por transform en vez de left/right */
#foev-nav a::after{left:0!important;right:0!important;transform:scaleX(0);transform-origin:50% 50%;transition:transform .35s var(--foev-ease)!important}
#foev-nav a:hover::after,#foev-nav a.active::after{transform:scaleX(1)}

/* ---------- Barra de progreso de lectura ---------- */
#foev-prog{
  height:3px!important;
  background:linear-gradient(90deg,#9ede46 0%,#c9f593 100%)!important;
  box-shadow:0 0 12px -2px rgba(158,222,70,.7);
}

/* ---------- Preloader: cortina que sube, una sola mecánica ---------- */
@keyframes foevCurtain{
  0%{transform:translateY(0);visibility:visible}
  99%{visibility:visible}
  100%{transform:translateY(-100%);visibility:hidden}
}
#foev-preload{animation:foevCurtain .85s var(--foev-curtain) 1.5s forwards!important}
html.foev-pl-seen #foev-preload{display:none!important}

/* ---------- Hero de la portada ---------- */
.foev-parallax{
  position:absolute;
  inset:0;
  will-change:transform;
  transform:translate3d(0,calc(var(--sy) * .15px),0) scale(1.06);
}
.foev-hero-txt{transform:translate3d(0,calc(var(--sy) * -.07px),0)}
/* La viñeta se intensifica al salir del hero. Arranca en .62 y no en .3 como
   decía el plan: con estos dos gradientes, .3 dejaba el titular sin contraste. */
.foev-hero-veil{opacity:calc(.62 + var(--sy) / 900)}

@keyframes foevSweep{from{background-position:-60% 0}to{background-position:160% 0}}
.foev-hero-h1{position:relative}
.foev-hero-h1::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(158,222,70,.22) 50%,transparent 60%);
  background-size:300% 100%;
  background-repeat:no-repeat;
  animation:foevSweep 2.4s ease .9s both;
}

/* Cue de scroll recuperado del .bak */
.foev-cue{
  position:absolute;
  left:clamp(24px,3.6vw,72px);
  bottom:34px;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(234,240,228,.45);
  pointer-events:none;
}
.foev-cue-rail{display:block;width:1px;height:56px;background:rgba(234,240,228,.2);overflow:hidden}
.foev-cue-rail i{display:block;width:1px;height:20px;background:#9ede46;animation:foevScrollCue 2.8s ease-in-out infinite}
@media (max-width:640px){.foev-cue{display:none}}

/* ---------- Cifras ---------- */
.foev-stat+.foev-stat{padding-left:34px}
.foev-stat+.foev-stat::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:14px;
  width:1px;
  background:rgba(234,240,228,.14);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .9s var(--foev-ease);
  transition-delay:var(--d,0ms);
}
[data-stagger].foev-in .foev-stat+.foev-stat::before{transform:scaleY(1)}
.foev-stat-bar{
  display:block;
  height:2px;
  margin-top:18px;
  max-width:120px;
  background:rgba(158,222,70,.3);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 1.2s var(--foev-ease);
  transition-delay:var(--d,0ms);
}
[data-stagger].foev-in .foev-stat-bar{transform:scaleX(1)}
@media (max-width:900px){
  .foev-stat+.foev-stat{padding-left:0}
  .foev-stat+.foev-stat::before{display:none}
}

/* Sello: el giro pasa a CSS para poder modularlo con la velocidad de scroll */
.foev-seal-text{
  transform-box:view-box;
  transform-origin:50% 50%;
  animation:foevSpin 24s linear infinite;
  animation-duration:calc(24s / (1 + var(--svel)));
}

/* Mapa de Sonora dibujándose detrás del texto */
.foev-sonora{
  position:absolute;
  left:-3%;
  top:50%;
  transform:translateY(-50%);
  width:min(560px,58%);
  opacity:.07;
  pointer-events:none;
  z-index:0;
}
.foev-sonora path{
  fill:none;
  stroke:#9ede46;
  stroke-width:2;
  stroke-dasharray:2600;
  stroke-dashoffset:2600;
  transition:stroke-dashoffset 2.5s ease;
}
[data-reveal].in .foev-sonora path,[data-stagger].foev-in .foev-sonora path{stroke-dashoffset:0}
@media (max-width:900px){.foev-sonora{display:none}}

/* ---------- Stack de sectores ---------- */
.foev-stack::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0;
  transition:opacity .45s ease;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(158,222,70,.10),transparent 70%);
}
.foev-stack:hover::before{opacity:1}
.foev-stack-in{position:relative;z-index:2}
/* El número fantasma va del lado del texto, no del de la foto: a la derecha
   quedaba tapado por la imagen de la tarjeta. */
.foev-stack-ghost{
  position:absolute;
  left:clamp(10px,2vw,30px);
  top:-.10em;
  z-index:0;
  font-size:clamp(140px,18vw,320px);
  font-weight:900;
  line-height:.8;
  letter-spacing:-.06em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(234,240,228,.07);
  pointer-events:none;
  user-select:none;
}
.foev-stack-img image-slot{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--foev-ease)}
.foev-stack.is-stuck .foev-stack-img image-slot{clip-path:inset(0)}
.foev-stack-cta i{
  display:block;
  width:8px;
  height:8px;
  margin-left:-8px;
  border-right:1.5px solid #9ede46;
  border-top:1.5px solid #9ede46;
  transform:rotate(45deg);
  transition:transform .4s var(--foev-ease);
}
.foev-stack-cta{transition:transform .4s var(--foev-ease)}
.foev-stack-cta:hover{transform:translateX(4px)}
.foev-stack-cta:hover i{transform:rotate(45deg) translate(3px,-3px)}
@media (max-width:900px){
  .foev-stack-ghost{display:none}
  .foev-stack-img image-slot{clip-path:none}
}

/* ---------- Galería: velocidad ligada al scroll ---------- */
.foev-row-l{animation-duration:calc(42s / (1 + var(--gal) * 1.8))!important}
.foev-row-r{animation-duration:calc(48s * (1 + var(--gal) * .5))!important}
/* La galería duplica 9 imágenes: el gap de cierre evita el salto en cada vuelta */
.foev-row{padding-right:18px}

/* ---------- Marquesina de claims ---------- */
.foev-mq{transform:skewY(-2deg)}
.foev-mq-out{animation-duration:calc(36s / (1 + var(--gal) * 1.4))!important}
.foev-mq-solid{animation-duration:calc(42s * (1 + var(--gal) * .4))!important}
.foev-mq-out .foev-mq-w{transition:color .4s ease,-webkit-text-stroke-color .4s ease}
.foev-mq-out .foev-mq-w:hover{color:#9ede46;-webkit-text-stroke-color:rgba(158,222,70,.5)}

/* ---------- Contacto de la portada ---------- */
.foev-contact-fill{
  background:linear-gradient(180deg,#9ede46 0%,#c9f593 100%) no-repeat;
  background-size:100% 0%;
  -webkit-background-clip:text;
  background-clip:text;
  transition:background-size 1.2s var(--foev-ease) .15s;
}
[data-reveal].in .foev-contact-fill{color:transparent;background-size:100% 100%}
.foev-contact-line{position:relative;border-bottom-color:transparent!important}
.foev-contact-line::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:#9ede46;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .4s var(--foev-ease);
}
.foev-contact-line:hover::after{transform:scaleX(1)}
.foev-contact-btn{position:relative;overflow:hidden;z-index:0;background:transparent!important;border:1px solid #9ede46;color:#9ede46!important}
.foev-contact-btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:#9ede46;
  transform:scaleX(0);
  transform-origin:50% 50%;
  transition:transform .45s var(--foev-ease);
}
.foev-contact-btn:hover{color:#06110c!important;transform:translateY(-3px);box-shadow:0 20px 50px -14px rgba(158,222,70,.6)}
.foev-contact-btn:hover::before{transform:scaleX(1)}
/* El glow del cierre persigue el cursor con retraso y late solo en opacidad,
   para no pelearse con el transform que lo sigue. */
@keyframes foevGlowPulse{0%,100%{opacity:.72}50%{opacity:1}}
.foev-contact-glow{
  animation-name:foevGlowPulse;
  animation-duration:7s;
  transform:translate3d(calc((var(--mx) - 50%) * .30),calc((var(--my) - 50%) * .30),0);
  transition:transform 1.4s ease-out;
}
.foev-live{display:inline-flex;align-items:center;gap:9px;margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.06em;color:rgba(234,240,228,.6)}
.foev-live[data-on="no"]{display:none}
.foev-live i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#9ede46;
  flex:none;
  animation:foevPulse 2s ease-in-out infinite;
}

/* ---------- Botón flotante de WhatsApp ---------- */
@keyframes foevIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.foev-wa{animation:foevIn .6s var(--foev-ease) 2s both}
.foev-wa::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px solid rgba(158,222,70,.55);
  animation:foevPulse 2.5s ease-in-out infinite;
  pointer-events:none;
}
.foev-wa-lbl{
  position:absolute;
  right:calc(100% + 12px);
  top:50%;
  transform:translateY(-50%) translateX(8px);
  white-space:nowrap;
  background:#0b1a12;
  border:1px solid rgba(158,222,70,.35);
  color:#eaf0e4;
  font-size:12px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:10px 14px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease,transform .35s var(--foev-ease);
}
.foev-wa:hover .foev-wa-lbl{opacity:1;transform:translateY(-50%) translateX(0)}
@media (max-width:640px){.foev-wa-lbl{display:none}}

/* ---------- Modales ---------- */
@keyframes foevPanel{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.foev-modal>div{animation:foevPanel .4s var(--foev-ease) both}
html.foev-lock{overflow:hidden}

/* ================= PÁGINAS INTERNAS ================= */

/* Hero: gradiente de fondo y entrada escalonada */
.foev-phero{position:relative;isolation:isolate}
.foev-phero::before{
  content:"";
  position:absolute;
  right:-4%;
  top:-24%;
  width:min(780px,76%);
  aspect-ratio:1;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle,rgba(158,222,70,.13) 0%,rgba(158,222,70,.04) 46%,rgba(158,222,70,0) 70%);
}
.foev-phero>*{animation:foevFade .8s var(--foev-ease) both}
.foev-phero>*:nth-child(1){animation-delay:.1s}
.foev-phero>*:nth-child(2){animation-delay:.28s}
.foev-phero>*:nth-child(3){animation-delay:.46s}
.foev-phero>*:nth-child(4){animation-delay:.64s}
@keyframes foevRule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.foev-eyebrow-line{transform-origin:left center;animation:foevRule .7s var(--foev-ease) .5s both}

/* Separadores animados recuperados del .bak */
.foev-sep{
  height:2px;
  margin-top:56px;
  background:rgba(158,222,70,.28);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .9s var(--foev-ease);
}
.foev-sep.foev-in{transform:scaleX(1)}
.foev-sep-top::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:rgba(158,222,70,.28);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .9s var(--foev-ease);
}
.foev-sep-top{position:relative}
.foev-sep-top.in::before{transform:scaleX(1)}

/* Columnas que entran desde los lados */
[data-reveal].foev-from-l{transform:translateX(-30px)}
[data-reveal].foev-from-r{transform:translateX(30px)}
[data-reveal].foev-from-l.in,[data-reveal].foev-from-r.in{transform:none}

/* Relleno progresivo de un fragmento de titular */
.foev-fill{
  background:linear-gradient(180deg,#9ede46 0%,#c9f593 100%) no-repeat;
  background-size:100% 0%;
  -webkit-background-clip:text;
  background-clip:text;
  transition:background-size 1.2s var(--foev-ease) .2s;
}
[data-reveal].in .foev-fill{color:transparent;background-size:100% 100%}

/* Sello sobre la foto del producto: segundo aro y flotación magnética.
   El desplazamiento sale de --mx/--my de la columna marcada con data-glow. */
.foev-prodseal{
  transform:translate3d(calc((var(--mx) - 50%) * .09),calc((var(--my) - 50%) * .09),0);
  transition:transform 1s ease-out;
}
.foev-ring-2{
  position:absolute;
  inset:14px;
  animation:foevSpin 34s linear infinite reverse;
}
.foev-prodseal img{animation:foevBreathe 4.5s ease-in-out infinite}

/* Celdas de stats con separador (recuperado del .bak) */
.foev-statcell+.foev-statcell{border-left:1px solid rgba(234,240,228,.1);padding-left:clamp(18px,2vw,34px)}
@media (max-width:900px){.foev-statcell+.foev-statcell{border-left:0;padding-left:0}}

/* ---------- Lista «Qué hace en campo» ---------- */
.foev-benefit{transition:background .35s ease,transform .35s var(--foev-ease)}
.foev-benefit:hover{background:rgba(158,222,70,.06);transform:translateX(16px)}
.foev-benefit-n{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(158,222,70,.45);
  font-size:13px;
  font-weight:800;
  color:#9ede46;
  letter-spacing:.06em;
  font-feature-settings:'tnum';
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.foev-benefit:hover .foev-benefit-n{background:#9ede46;color:#06110c;border-color:#9ede46}
/* Los íconos se pintan con <use> sobre un sprite: stroke y stroke-dashoffset
   son propiedades heredadas, así que cruzan al contenido referenciado. */
.foev-ico{
  flex:none;
  width:34px;
  height:34px;
  fill:none;
  stroke:#9ede46;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:200;
  stroke-dashoffset:200;
  transition:stroke-dashoffset 1.1s ease;
  transition-delay:var(--d,0ms);
}
[data-reveal].in .foev-ico,[data-stagger].foev-in .foev-ico{stroke-dashoffset:0}

/* Banda final: el parallax vive abajo en la página, así que NO puede depender de
   --sy (que es el scroll absoluto: a 8000 px desplazaría la foto cientos de
   píxeles). Se resuelve más abajo con una línea de tiempo de vista. */
.foev-band-img{transform:none}
.foev-word{display:inline-block;opacity:0;transform:translateY(14px);transition:opacity .6s var(--foev-ease),transform .6s var(--foev-ease);transition-delay:var(--d,0ms)}
[data-reveal].in .foev-word{opacity:1;transform:none}

/* ---------- Página Análisis ---------- */
.foev-barfill{
  height:100%;
  background:#9ede46;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 1.3s var(--foev-ease);
  transition-delay:var(--d,0ms);
}
.foev-barrow .foev-barname{transition:transform .3s var(--foev-ease),color .3s ease}
.foev-barrow:hover .foev-barname{transform:translateX(6px);color:#9ede46}
/* El style-hover del framework no es fiable en las filas: el hover pasa a CSS real */
tbody tr{transition:background .25s ease}
tbody tr:hover{background:rgba(158,222,70,.07)}
/* Cascada por fila, 40 ms acumulados con tope de 12 para no tardar eternidad */
.foev-tbl tbody tr{animation:foevRowIn .45s var(--foev-ease) both}
.foev-tbl tbody tr:nth-child(1){animation-delay:0ms}
.foev-tbl tbody tr:nth-child(2){animation-delay:40ms}
.foev-tbl tbody tr:nth-child(3){animation-delay:80ms}
.foev-tbl tbody tr:nth-child(4){animation-delay:120ms}
.foev-tbl tbody tr:nth-child(5){animation-delay:160ms}
.foev-tbl tbody tr:nth-child(6){animation-delay:200ms}
.foev-tbl tbody tr:nth-child(7){animation-delay:240ms}
.foev-tbl tbody tr:nth-child(8){animation-delay:280ms}
.foev-tbl tbody tr:nth-child(9){animation-delay:320ms}
.foev-tbl tbody tr:nth-child(10){animation-delay:360ms}
.foev-tbl tbody tr:nth-child(11){animation-delay:400ms}
.foev-tbl tbody tr:nth-child(n+12){animation-delay:440ms}
.foev-th{position:sticky;top:80px;z-index:3;background:#06110c}
.foev-valcell{background-image:linear-gradient(90deg,rgba(158,222,70,.08) var(--pct,0%),transparent 0);background-repeat:no-repeat}
.foev-donut circle{
  fill:none;
  stroke-width:16;
  transform-box:fill-box;
  transform-origin:center;
  transition:stroke-dashoffset 1.4s var(--foev-ease);
  transition-delay:var(--d,0ms);
}
.foev-ph-track{
  position:relative;
  height:14px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(179,38,30,.25) 0%,rgba(158,222,70,.25) 50%,rgba(70,140,222,.25) 100%);
}
.foev-ph-mark{
  position:absolute;
  top:50%;
  left:0;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#9ede46;
  border:2px solid #06110c;
  box-shadow:0 0 0 3px rgba(158,222,70,.3);
  transform:translate(-50%,-50%);
  transition:left 1.4s var(--foev-ease);
}
.foev-labseal{flex:none;width:52px;height:52px}
.foev-labring{animation:foevSpin 18s linear infinite;transform-box:view-box;transform-origin:50% 50%}
.foev-propcard{
  padding:30px 26px 32px;
  background:#0b1a12;
  border:1px solid rgba(158,222,70,.2);
  transition:border-color .35s ease,transform .35s var(--foev-ease);
}
.foev-propcard:hover{border-color:rgba(158,222,70,.55);transform:translateY(-4px)}

/* ---------- Página Aplicación ---------- */
.foev-acc{transition:box-shadow .4s ease}
.foev-acc.is-open{box-shadow:inset 2px 0 0 0 #9ede46}
.foev-acc-n{transition:transform .35s var(--foev-ease)}
.foev-acc-head:hover .foev-acc-n{transform:scale(1.08)}
.foev-acc-sign{position:relative;display:block;width:20px;height:20px;flex:none}
.foev-acc-sign i{
  position:absolute;
  left:0;
  top:9px;
  width:20px;
  height:2px;
  background:#9ede46;
  transition:transform .35s var(--foev-ease),opacity .35s ease;
}
.foev-acc-sign i:last-child{transform:rotate(90deg)}
.foev-acc.is-open .foev-acc-sign i:last-child{transform:rotate(0deg);opacity:0}
.foev-acc-panel{overflow:hidden;transition:height .45s var(--foev-ease)}
.foev-dose{font-size:clamp(28px,3.2vw,44px)!important;line-height:1.05}
.foev-tl-rail{
  stroke:rgba(158,222,70,.35);
  stroke-width:2;
  fill:none;
  stroke-dasharray:1200;
  stroke-dashoffset:1200;
  transition:stroke-dashoffset 1.8s ease;
}
[data-reveal].in .foev-tl-rail{stroke-dashoffset:0}
.foev-tl-dot{fill:#9ede46;opacity:0;transition:opacity .5s ease}
[data-reveal].in .foev-tl-dot{opacity:1}
[data-reveal].in .foev-tl-dot:nth-of-type(1){transition-delay:.3s}
[data-reveal].in .foev-tl-dot:nth-of-type(2){transition-delay:.6s}
[data-reveal].in .foev-tl-dot:nth-of-type(3){transition-delay:.9s}
[data-reveal].in .foev-tl-dot:nth-of-type(4){transition-delay:1.2s}
[data-reveal].in .foev-tl-dot:nth-of-type(5){transition-delay:1.5s}

/* ---------- Página Cultivos ---------- */
.foev-searchwrap{position:relative;flex:1 1 280px;max-width:420px}
.foev-searchwrap>svg{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  stroke:rgba(234,240,228,.45);
  fill:none;
  stroke-width:1.8;
  transition:stroke .3s ease;
}
.foev-searchwrap:focus-within>svg{stroke:#9ede46}
.foev-search{padding-left:48px!important;width:100%;transition:border-color .3s ease,box-shadow .3s ease}
.foev-search:focus{border-color:#9ede46;box-shadow:0 0 0 3px rgba(158,222,70,.15);outline:none}
.foev-clear{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  display:none;
  width:28px;
  height:28px;
  border:0;
  border-radius:50%;
  background:rgba(234,240,228,.12);
  color:#eaf0e4;
  font-size:15px;
  line-height:1;
  cursor:pointer;
  transition:background .25s ease,color .25s ease;
}
.foev-clear:hover{background:#9ede46;color:#06110c}
.foev-searchwrap.has-text .foev-clear{display:block}
.foev-chip{transition:background .25s ease,color .25s ease,border-color .25s ease}
.foev-chip:hover{border-color:#9ede46;color:#9ede46}
.foev-chip.is-on{background:#9ede46!important;color:#06110c!important;border-color:#9ede46!important}
@keyframes foevRowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.foev-crop-row{animation:foevRowIn .45s var(--foev-ease) both;transition:background .3s ease,transform .3s var(--foev-ease)}
.foev-crop-row:hover{background:rgba(158,222,70,.06);transform:translateX(14px)}
.foev-crop-row:nth-child(1){animation-delay:0ms}
.foev-crop-row:nth-child(2){animation-delay:40ms}
.foev-crop-row:nth-child(3){animation-delay:80ms}
.foev-crop-row:nth-child(4){animation-delay:120ms}
.foev-crop-row:nth-child(5){animation-delay:160ms}
.foev-crop-row:nth-child(6){animation-delay:200ms}
.foev-crop-row:nth-child(7){animation-delay:240ms}
.foev-crop-row:nth-child(8){animation-delay:280ms}
.foev-crop-row:nth-child(n+9){animation-delay:320ms}
::highlight(foev-hl){background:rgba(158,222,70,.2);color:#eaf0e4}
.foev-count{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9ede46;
  font-feature-settings:'tnum';
}
.foev-empty{
  display:none;
  margin-top:28px;
  padding:38px 30px;
  border:1px solid rgba(158,222,70,.24);
  background:#0b1a12;
  text-align:center;
}
.foev-empty.is-on{display:block;animation:foevFade .45s var(--foev-ease) both}
.foev-sector-card{position:relative}
.foev-sector-card .foev-shot::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .45s ease;
  background:linear-gradient(180deg,rgba(6,17,12,0) 45%,rgba(6,17,12,.72) 100%);
}
.foev-sector-card:hover .foev-shot::after{opacity:1}
.foev-sector-ghost{
  position:absolute;
  right:14px;
  top:-10px;
  font-size:clamp(84px,9vw,140px);
  font-weight:900;
  line-height:.8;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(234,240,228,.07);
  pointer-events:none;
  user-select:none;
}

/* ---------- Página Contacto: tarjetas y formulario ---------- */
.foev-ccard{position:relative}
.foev-ccard::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:#9ede46;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s var(--foev-ease);
}
.foev-ccard:hover::before{transform:scaleX(1)}
.foev-field{position:relative;display:block;padding-top:22px;min-width:0}
.foev-field>span{
  position:absolute;
  left:0;
  top:34px;
  font-size:17px;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:rgba(234,240,228,.5);
  pointer-events:none;
  transform-origin:left top;
  transition:transform .3s var(--foev-ease),color .3s ease;
}
.foev-field input{
  width:100%;
  min-width:0;
  border:0;
  border-bottom:1px solid rgba(234,240,228,.24);
  background:transparent;
  color:#eaf0e4;
  padding:12px 0;
  font-size:17px;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
}
.foev-field input:focus{outline:none}
.foev-field:focus-within>span,
.foev-field input:not(:placeholder-shown)~span{
  transform:translateY(-30px) scale(.62);
  color:#9ede46;
}
.foev-field::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:#9ede46;
  transform:scaleX(0);
  transform-origin:50% 50%;
  transition:transform .35s var(--foev-ease);
}
.foev-field:focus-within::after{transform:scaleX(1)}
@keyframes foevShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.foev-field.is-bad{animation:foevShake .3s ease both}
.foev-field.is-bad input{border-bottom-color:#b3261e}
.foev-field.is-bad>span{color:#b3261e}
.foev-progwrap{height:2px;background:rgba(234,240,228,.14);margin:16px 0 24px;overflow:hidden}
.foev-progwrap i{display:block;height:100%;background:#9ede46;transform:scaleX(0);transform-origin:left center;transition:transform .4s var(--foev-ease)}
.foev-proglbl{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(234,240,228,.45);font-weight:700}
.foev-submit{position:relative;overflow:hidden}
.foev-submit::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:3px;
  width:40%;
  background:rgba(6,17,12,.45);
  opacity:0;
  transition:opacity .3s ease;
}
@keyframes foevIndet{from{transform:translateX(-100%)}to{transform:translateX(350%)}}
form.is-sending .foev-submit::after{opacity:1;animation:foevIndet 1.1s ease-in-out infinite}
form.is-sending .foev-submit{pointer-events:none}
form.is-done .foev-submit{background:#c9f593}
.foev-okwrap{display:none;margin-top:20px;align-items:center;gap:14px}
form.is-done .foev-okwrap{display:flex;animation:foevFade .5s var(--foev-ease) both}
@keyframes foevDraw{to{stroke-dashoffset:0}}
.foev-check circle,.foev-check path{
  fill:none;
  stroke:#9ede46;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:160;
  stroke-dashoffset:160;
}
form.is-done .foev-check circle{animation:foevDraw .7s ease forwards}
form.is-done .foev-check path{animation:foevDraw .45s ease .55s forwards}
.foev-rep{transition:transform .35s var(--foev-ease),background .35s ease}
.foev-rep:hover{transform:translateX(10px);background:rgba(158,222,70,.05)}
.foev-avatar{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  flex:none;
  border-radius:50%;
  background:rgba(158,222,70,.14);
  border:1px solid rgba(158,222,70,.4);
  color:#9ede46;
  font-weight:900;
  font-size:16px;
}
.foev-map path{
  fill:rgba(158,222,70,.06);
  stroke:rgba(158,222,70,.45);
  stroke-width:1.4;
  opacity:0;
  transition:opacity .7s ease,fill .7s ease;
}
[data-reveal].in .foev-map path{opacity:1}
[data-reveal].in .foev-map path:nth-of-type(1){transition-delay:0ms}
[data-reveal].in .foev-map path:nth-of-type(2){transition-delay:180ms}
[data-reveal].in .foev-map path:nth-of-type(3){transition-delay:360ms}
[data-reveal].in .foev-map path:nth-of-type(4){transition-delay:540ms}
.foev-map .foev-pin{fill:#9ede46;stroke:none;opacity:1;animation:foevPulse 2s ease-in-out infinite}

/* ================= ANIMACIONES LIGADAS AL SCROLL, NATIVAS =================
   Donde el navegador las soporta, el parallax, la viñeta y la barra de progreso
   los calcula el compositor y no el hilo principal: siguen fluidos aunque el JS
   esté ocupado traduciendo, filtrando o cargando una imagen. Donde no, queda el
   cálculo por --sy de arriba, que ya funciona. */
@supports (animation-timeline: scroll()) {
  @keyframes foevParHero{from{transform:translate3d(0,0,0) scale(1.06)}to{transform:translate3d(0,15vh,0) scale(1.06)}}
  @keyframes foevParTxt{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-7vh,0)}}
  @keyframes foevVeil{from{opacity:.62}to{opacity:1}}
  @keyframes foevProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  .foev-parallax{
    animation:foevParHero linear both;
    animation-timeline:scroll(root block);
    animation-range:0 100vh;
    transform:translate3d(0,0,0) scale(1.06);
  }
  .foev-hero-txt{
    animation:foevParTxt linear both;
    animation-timeline:scroll(root block);
    animation-range:0 100vh;
    transform:none;
  }
  .foev-hero-veil{
    animation:foevVeil linear both;
    animation-timeline:scroll(root block);
    animation-range:0 100vh;
    opacity:.62;
  }
  #foev-prog{
    animation:foevProg linear both;
    animation-timeline:scroll(root block);
  }
}

/* La banda y el número fantasma se miden contra su propia entrada en pantalla,
   no contra el scroll absoluto de la página. */
@supports (animation-timeline: view()) {
  @keyframes foevBanda{from{transform:translate3d(0,-4vh,0)}to{transform:translate3d(0,4vh,0)}}
  @keyframes foevFantasma{from{transform:translateY(24px)}to{transform:translateY(-24px)}}

  .foev-band-img{
    animation:foevBanda linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
  .foev-stack-ghost{
    animation:foevFantasma linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
}

/* ---------- Higiene de rendimiento ---------- */
.foev-row,.foev-mq-row,.foev-parallax{will-change:transform}
.foev-hero-paused{animation-play-state:paused!important}

/* ---------- prefers-reduced-motion: apagado completo ---------- */
@media (prefers-reduced-motion:reduce){
  .foev-row,.foev-mq-row,.foev-seal-text,.foev-seal-glow,.foev-seal-logo,
  .foev-ring-2,.foev-labring,.foev-live i,.foev-map .foev-pin,
  #foev-particles,.foev-cue-rail i,.foev-hero-h1::after,.foev-crop-row,
  .foev-phero>*,.foev-wa,.foev-wa::after,.foev-eyebrow-line,
  .foev-tbl tbody tr,.foev-contact-glow,
  .foev-parallax,.foev-hero-txt,.foev-hero-veil,.foev-band-img,.foev-stack-ghost,
  .foev-prodseal img{animation:none!important}
  .foev-contact-glow{transform:none!important}
  /* #foev-prog se queda: no es decoración, es dónde vas en la página. */
  .foev-parallax,.foev-hero-txt,.foev-band-img,.foev-stack-ghost{transform:none!important}
  .foev-hero-veil{opacity:.36!important}
  [data-reveal],[data-stagger]>*,.foev-word{opacity:1!important;transform:none!important}
  .foev-sep,.foev-stat-bar{transform:none!important}
  /* La barra de Análisis NO se neutraliza: su ancho es el dato. Solo se le
     quita la transición para que salte directo a su proporción. */
  .foev-barfill{transition:none!important}
  .foev-stack-img image-slot{clip-path:none!important}
  .foev-ico,.foev-sonora path,.foev-check circle,.foev-check path,
  .foev-tl-rail{stroke-dashoffset:0!important;animation:none!important}
  .foev-map path,.foev-tl-dot{opacity:1!important}
  #foev-preload{display:none!important}
}

/* ---------- Impresión ---------- */
@media print{
  .foev-sep,.foev-stat-bar{transform:none!important}
  .foev-barfill{transition:none!important}
  [data-reveal],[data-stagger]>*,.foev-word{opacity:1!important;transform:none!important}
  .foev-th{position:static}
  .foev-acc-panel{height:auto!important;overflow:visible}
}