/* LNE Consultores Ambientales — estilos compartidos v3
   Base común a las 5 páginas: tokens, tipografía, botones, cabecera, pie, utilidades y capa de animación.
   El layout propio de cada página va en assets/css/page-<slug>.css (fiel a mockups/*.pdf). */

:root{
  --forest-950:#071A11;--forest-900:#0B2318;--forest-850:#0F3022;--forest-800:#10301F;--forest-700:#1E4D2F;--forest-600:#2F6B2E;
  --ink:#10261A;--text:#14281D;--text-2:#4A574F;--muted:#5A675F;
  --on-dark:#FFFFFF;--on-dark-2:#C9D6CE;--on-dark-3:#E4ECE6;
  --lime:#C6E35A;--lime-strong:#B9DC3C;--lime-soft:#D8E8A8;--olive:#5F7F12;--olive-2:#4D6B12;--olive-line:#8DB23A;
  --page:#F5F6EF;--white:#FFFFFF;--sage-50:#EEF3E2;--sage-100:#E8EFDA;--sage-150:#E3ECCB;--border:#E1E7D6;
  --blue:#1F5A82;--gold:#8A6A2B;
  --gutter:clamp(16px,4vw,48px);--max:1280px;--hdr:132px;
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --shadow:0 22px 44px -24px rgba(16,40,28,.38);--shadow-soft:0 14px 34px -20px rgba(16,40,28,.28);
}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s ease both}
::view-transition-new(root){animation:vt-in .45s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(16px)}}

/* ── Base ───────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--page);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
[hidden]{display:none !important}
img{display:block;max-width:100%;height:auto}
a{color:#163B27}a:hover{color:#0B2417}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--lime-strong);outline-offset:2px}
.skip{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:10px;background:var(--lime);color:var(--ink);font-weight:800;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
section[id]{scroll-margin-top:84px}

/* ── Layout ─────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sec{position:relative;padding-block:clamp(64px,8vw,104px)}
.dark{background:var(--forest-850);color:var(--on-dark)}
.bg-white{background:var(--white)}
.bg-page{background:var(--page)}
/* Fondo de curvas de nivel (topográfico) muy sutil */
.bg-topo{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400' fill='none' stroke='%2378905f' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M-20 60c80-40 160 30 250 0s170-50 250 10 140 20 160 0'/%3E%3Cpath d='M-20 110c90-30 170 40 260 10s160-40 240 15 140 25 160 5'/%3E%3Cpath d='M-20 160c100-25 180 45 270 20s150-30 230 20 140 30 160 10'/%3E%3Cpath d='M-20 230c80-50 170 20 260-5s170-40 250 20 120 15 150-5'/%3E%3Cpath d='M-20 290c90-35 180 30 270 5s160-35 240 15 130 20 150 0'/%3E%3Cpath d='M-20 350c100-30 190 35 280 10s150-25 230 20 120 25 150 5'/%3E%3C/svg%3E");background-size:600px 400px}
.dark.bg-topo{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400' fill='none' stroke='%23C6E35A' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M-20 60c80-40 160 30 250 0s170-50 250 10 140 20 160 0'/%3E%3Cpath d='M-20 110c90-30 170 40 260 10s160-40 240 15 140 25 160 5'/%3E%3Cpath d='M-20 160c100-25 180 45 270 20s150-30 230 20 140 30 160 10'/%3E%3Cpath d='M-20 230c80-50 170 20 260-5s170-40 250 20 120 15 150-5'/%3E%3Cpath d='M-20 290c90-35 180 30 270 5s160-35 240 15 130 20 150 0'/%3E%3Cpath d='M-20 350c100-30 190 35 280 10s150-25 230 20 120 25 150 5'/%3E%3C/svg%3E")}
/* Bordes difuminados (para fondos/paisajes decorativos) */
.fade-b{-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.fade-t{-webkit-mask-image:linear-gradient(transparent,#000 40%);mask-image:linear-gradient(transparent,#000 40%)}
.fade-y{-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.deco{position:absolute;pointer-events:none;user-select:none;z-index:0}

/* ── Tipografía ─────────────────────────────────────────────────── */
.eyebrow{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--olive-2)}
.eyebrow::before{content:"";flex:none;width:36px;height:2px;background:var(--olive-line);transform-origin:0 50%;transition:transform 1s var(--ease-out) .2s}
.dark .eyebrow,.eyebrow--light{color:var(--lime)}
.dark .eyebrow::before,.eyebrow--light::before{background:var(--lime)}
.js .eyebrow.rv:not(.in)::before{transform:scaleX(0)}
.eyebrow--mono{font-family:var(--mono);font-weight:500;letter-spacing:.18em}
.h-display{font-size:clamp(44px,6.6vw,96px);line-height:.96;letter-spacing:-.04em;font-weight:800;text-wrap:balance}
.h-hero{font-size:clamp(42px,5.6vw,84px);line-height:.98;letter-spacing:-.04em;font-weight:800;text-wrap:balance}
.h2{font-size:clamp(34px,4.6vw,64px);line-height:1;letter-spacing:-.035em;font-weight:800;color:var(--ink);text-wrap:balance}
.h2--sm{font-size:clamp(30px,3.6vw,50px)}
.dark .h2{color:var(--on-dark)}
.h3{font-size:22px;line-height:1.2;letter-spacing:-.02em;font-weight:800;color:var(--ink)}
.dark .h3{color:var(--on-dark)}
.accent{color:var(--olive)}
.dark .accent,.hero .accent{color:var(--lime)}
.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--text-2)}
.dark .lead,.hero .lead{color:var(--on-dark-2)}
.txt{font-size:16px;line-height:1.55;color:var(--text-2)}
.dark .txt{color:var(--on-dark-2)}
.mono{font-family:var(--mono)}

/* ── Botones y enlaces ──────────────────────────────────────────── */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 28px;border-radius:12px;border:0;font-family:var(--sans);font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .2s ease,box-shadow .3s ease,transform .35s var(--ease-out),color .2s}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);translate:-120% 0;transition:translate .7s var(--ease-out);pointer-events:none}
.btn:hover::after{translate:120% 0}
.btn:hover{box-shadow:0 14px 30px -14px rgba(16,38,26,.55)}
.btn svg{flex:none;transition:translate .3s var(--ease-out)}
.btn:hover .ic-arrow{translate:4px 0}
.btn-sm{min-height:48px;padding:0 22px;font-size:13px;border-radius:10px}
.btn-lime{background:var(--lime);color:var(--ink)}.btn-lime:hover{background:#D2EB72;color:var(--ink)}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}.btn-ghost:hover{color:#fff;background:rgba(255,255,255,.08)}
.btn-dark{background:var(--forest-850);color:#fff}.btn-dark:hover{color:#fff;background:var(--forest-700)}
.btn-outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}.btn-outline:hover{color:var(--ink);background:rgba(16,38,26,.05)}
/* Flecha dentro de un círculo (botones oscuros de la maqueta) */
.btn .orb{display:grid;place-items:center;width:34px;height:34px;margin-right:-14px;border-radius:50%;background:var(--lime);color:var(--ink)}
.btn-lime .orb{background:var(--ink);color:var(--lime)}
.link-arrow{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:4px 0;color:var(--ink);font-weight:700;font-size:15px;text-decoration:none;border-bottom:2px solid var(--olive-line);transition:gap .25s var(--ease-out),color .2s}
.link-arrow:hover{gap:16px;color:var(--olive-2)}
.dark .link-arrow{color:var(--lime);border-color:var(--lime)}

/* ── Piezas comunes ─────────────────────────────────────────────── */
.num-badge{display:inline-grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:var(--lime-soft);color:var(--ink);font-weight:800;font-size:16px;transition:transform .9s var(--ease-spring) .3s,background-color .3s}
.js .rv:not(.in) .num-badge,.js .rv-i:not(.in) .num-badge{transform:scale(0) rotate(-90deg)}
.rv-i:hover .num-badge{background:var(--lime)}
.icon-circle{display:inline-grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;background:var(--sage-100);color:var(--forest-700)}
.dark .icon-circle{background:rgba(198,227,90,.12);color:var(--lime);box-shadow:inset 0 0 0 1.5px rgba(198,227,90,.5)}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid var(--border);font-size:14px;font-weight:600;color:var(--ink)}
.dark .chip{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.pill-dot{display:inline-flex;align-items:center;gap:10px;padding:7px 16px;border-radius:999px;background:var(--forest-800);color:#fff;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.pill-dot::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--lime);animation:pulse-dot 2s ease-in-out infinite}
.card{background:#fff;border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow-soft)}
.breadcrumb{display:flex;gap:10px;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2)}
.breadcrumb a{color:var(--on-dark-2);text-decoration:none}.breadcrumb a:hover{color:#fff}
.breadcrumb [aria-current]{color:#fff}

/* Caminos curvos (SVG) que se dibujan al aparecer: <svg class="trail" ...><path .../></svg> */
.trail{position:absolute;pointer-events:none;overflow:visible;z-index:0}
.trail path{fill:none;stroke:var(--olive-line);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.dark .trail path,.trail--lime path{stroke:var(--lime)}
.trail circle{fill:var(--olive-line)}
.dark .trail circle,.trail--lime circle{fill:var(--lime)}
.js .trail path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s var(--ease-out) .2s}
.js .trail.in path{stroke-dashoffset:0}
.trail .glow{stroke-width:7;stroke-opacity:.25;filter:blur(3px)}
.js .trail circle{opacity:0;transition:opacity .5s ease;transition-delay:calc(.6s + var(--d,0) * .25s)}
.js .trail.in circle{opacity:1}

/* ── Cabecera fija ───────────────────────────────────────────────── */
.hdr{position:fixed;inset:0 0 auto;z-index:60;color:#fff;transition:transform .45s var(--ease-out)}
.hdr-bg{position:absolute;inset:0;background:rgba(7,26,17,.8);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid rgba(198,227,90,.14);opacity:0;transition:opacity .35s ease}
.hdr-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:var(--max);margin:0 auto;padding:22px var(--gutter);transition:padding .35s var(--ease-out)}
.logo-link{display:flex}
.hdr .logo{height:92px;width:auto;transition:height .35s var(--ease-out),filter .3s}
.hdr .logo:hover{filter:drop-shadow(0 0 14px rgba(198,227,90,.45))}
.hdr.sc .hdr-bg{opacity:1}
.hdr.sc .hdr-in{padding-top:10px;padding-bottom:10px}
.hdr.sc .logo{height:56px}
.hdr.hide{transform:translateY(-110%)}
.prog{position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,var(--lime),#E9F7B0);transform-origin:0 50%;transform:scaleX(var(--p,0));z-index:2}
.lne-nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,40px);font-size:15px;font-weight:500}
.lne-nav a{position:relative;padding:8px 0;color:var(--on-dark-3);text-decoration:none;transition:color .2s}
.lne-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:2px;background:var(--lime);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)}
.lne-nav a:hover{color:#fff}
.lne-nav a:hover::after,.lne-nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.lne-nav a[aria-current]{color:#fff;font-weight:700}
.hdr-r{display:flex;align-items:center;gap:12px}
.lne-burger{display:none;position:relative;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:48px;height:48px;border-radius:10px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;cursor:pointer}
.lne-burger .bl{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease-out),opacity .2s}
.lne-burger[aria-expanded="true"] .bl:nth-child(1){transform:translateY(7px) rotate(45deg)}
.lne-burger[aria-expanded="true"] .bl:nth-child(2){opacity:0;transform:scaleX(.2)}
.lne-burger[aria-expanded="true"] .bl:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{position:relative;display:flex;flex-direction:column;margin:0 var(--gutter) 16px;padding:8px;border-radius:14px;background:var(--forest-800);border:1px solid rgba(198,227,90,.25)}
.mnav a{padding:14px 16px;border-radius:10px;color:#fff;text-decoration:none;transition:background-color .2s,padding-left .3s var(--ease-out)}
.mnav a[aria-current]{color:var(--lime);font-weight:700}
.mnav a:hover{background:rgba(198,227,90,.08);padding-left:22px}
.mnav .btn{margin:8px;color:var(--ink)}
.mnav:not([hidden]){animation:mnav-in .4s var(--ease-out) both}
.mnav:not([hidden]) a{animation:hi-up .45s var(--ease-out) both}
.mnav a:nth-child(2){animation-delay:.04s}.mnav a:nth-child(3){animation-delay:.08s}.mnav a:nth-child(4){animation-delay:.12s}.mnav a:nth-child(5){animation-delay:.16s}.mnav a:nth-child(6){animation-delay:.2s}
@keyframes mnav-in{from{opacity:0;transform:translateY(-10px) scale(.98)}}
@media (max-width:960px){.lne-nav,.lne-head-cta{display:none}.lne-burger{display:inline-flex}}

/* ── Pie ─────────────────────────────────────────────────────────── */
.ftr{background:var(--forest-900);color:var(--on-dark-2);font-size:15px}
.ftr-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;padding-top:56px;padding-bottom:36px}
.ftr-brand{display:flex;flex-direction:column;gap:14px;max-width:320px}
.ftr-brand img{height:56px;width:auto;align-self:flex-start}
.ftr-nav,.ftr-contact{display:flex;flex-direction:column;gap:10px}
.ftr a{color:#fff;text-decoration:none;transition:color .2s}.ftr a:hover{color:var(--lime)}
.ftr-b{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:22px;padding-bottom:28px;border-top:1px solid rgba(255,255,255,.12);font-size:13px}
.ftr-b > a{color:var(--lime)}
.ftr-b span a{text-decoration:underline}
.ftr-b .ftr-legal{display:flex;flex-wrap:wrap;gap:8px 22px}
.ftr-b .ftr-legal a{color:var(--lime);text-decoration:none}
.ftr-b .ftr-legal a:hover{text-decoration:underline}
.ftr-b{align-items:center}
.ftr-b > a.ftr-mastera{display:inline-flex;align-items:center;gap:10px;color:var(--on-dark-2)}
.ftr-mastera img{width:auto;height:22px;transition:transform .35s var(--ease-out),filter .3s}
.ftr-mastera img + img{height:17px;margin-left:-3px}
.ftr-mastera:hover img:first-of-type{transform:rotate(-6deg) scale(1.06)}

/* ── Hero (base común) ──────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding-top:var(--hdr);background:var(--forest-900);color:#fff}
.hero h1 .w,.js h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.hero h1 .w > span,.js h2 .w > span{display:inline-block}
.js .hero h1 .w > span{animation:word-in 1s var(--ease-out) both;animation-delay:calc(.15s + var(--w) * .06s)}
@keyframes word-in{from{transform:translateY(105%) rotate(4deg);opacity:0}}
.js .hi{animation:hi-up .9s var(--ease-out) both;animation-delay:calc(.1s + var(--i,0) * .1s)}
.js h1.hi{animation:none}
@keyframes hi-up{from{opacity:0;translate:0 22px}}
.js .hero-art,.js .hx-art{animation:art-in 1.5s var(--ease-out) .15s both}
@keyframes art-in{from{opacity:0;scale:.95;filter:blur(8px)}}
.hero img[data-fx="hero"]{animation:art-in 1.4s var(--ease-out) .2s both,float-lg 7s ease-in-out 1.6s infinite}
.hero img[data-fx="kb"]{animation:art-in 1.4s var(--ease-out) both,kb 26s ease-in-out 1.4s infinite alternate;transform-origin:60% 40%}
@keyframes float-lg{0%,100%{translate:0 0}50%{translate:0 -16px}}
@keyframes kb{from{scale:1}to{scale:1.09}}
@keyframes breathe{0%,100%{opacity:.6;scale:.92}50%{opacity:1;scale:1.05}}
/* Ola inferior animada: <svg class="wave" ...> */
.wave{position:absolute;left:-4%;bottom:-1px;width:108%;display:block;transform-origin:50% 100%;animation:wave 9s ease-in-out infinite alternate;z-index:2;pointer-events:none}
@keyframes wave{from{transform:translateX(-2.5%) scaleY(.85)}to{transform:translateX(2.5%) scaleY(1.15)}}

/* Paisaje en capas (Inicio): [[hero-landscape]] */
.hx-art{position:absolute;inset:0;container-type:size;overflow:hidden;will-change:transform}
.hx-stage{position:absolute;left:50%;top:0;width:max(100cqw,calc(100cqh * 1231 / 1277));aspect-ratio:1231/1277;translate:-50% 0;transform-origin:48% 40%;animation:kb 30s ease-in-out 1.4s infinite alternate;transition:transform 1.2s var(--ease-out)}
.hx-stage > img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.hx-glow{position:absolute;inset:-10% -10% 60%;background:radial-gradient(45% 55% at 52% 60%,rgba(233,247,176,.28),rgba(198,227,90,.08) 45%,transparent 72%);animation:breathe 8s ease-in-out infinite}
.hx-stage > img.hx-cl{inset:auto;height:auto;opacity:.5;mix-blend-mode:screen;filter:blur(1px)}
.hx-cl1{top:4%;left:-10%;width:85% !important;animation:cloud 46s linear infinite}
.hx-cl2{top:13%;left:10%;width:110% !important;opacity:.32 !important;animation:cloud 70s linear -30s infinite}
.hx-cl3{top:0;left:30%;width:60% !important;opacity:.35 !important;animation:cloud 58s linear -12s infinite}
@keyframes cloud{from{translate:-35% 0}to{translate:45% 0}}
/* Río: copia del paisaje recortada con la máscara del agua (rápidos) + estelas que avanzan aguas abajo */
.hx-stage > img.hx-water,.hx-flow{-webkit-mask:url(../img/hx-rio-mascara.webp) 0 0/100% 100% no-repeat;mask:url(../img/hx-rio-mascara.webp) 0 0/100% 100% no-repeat}
.hx-water{opacity:0}
.hx-flow{position:absolute;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen;opacity:.85}
.hx-flow i{position:absolute;inset:-60%;background:url(../img/hx-corriente.webp) 0 0/320px 160px repeat;opacity:.5;transform:rotate(27deg);animation:flow-a 5.5s linear infinite;will-change:transform}
.hx-flow i:nth-child(2){background-size:200px 100px;background-position:70px 40px;opacity:.45;animation:flow-b 3.1s linear infinite}
.hx-flow i:nth-child(3){background-size:460px 230px;background-position:150px 90px;opacity:.28;filter:blur(2px);animation:flow-c 8s linear infinite}
@keyframes flow-a{from{transform:rotate(27deg) translateX(0)}to{transform:rotate(27deg) translateX(320px)}}
@keyframes flow-b{from{transform:rotate(31deg) translateX(0)}to{transform:rotate(31deg) translateX(200px)}}
@keyframes flow-c{from{transform:rotate(24deg) translateX(0)}to{transform:rotate(24deg) translateX(460px)}}
@media (min-width:961px) and (prefers-reduced-motion:no-preference){.hx-water{opacity:1;filter:url(#hxWater)}}
@media (prefers-reduced-motion:reduce){.hx-flow{display:none}}
.hx-topo{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hx-sweep{animation:sweep 5.5s var(--ease-out) 1.6s infinite}
@keyframes sweep{0%{transform:translateX(0)}55%,100%{transform:translateX(95px)}}
.hx-ants{fill:rgba(198,227,90,.07);stroke:#C6E35A;stroke-width:.28;stroke-dasharray:1.2 1.2;animation:ants 2.4s linear infinite;opacity:.9}
.hx-trace{fill:none;stroke:#F2FFC2;stroke-width:.5;stroke-linecap:round;stroke-dasharray:16 84;animation:trace 4.2s linear infinite}
.hx-halo{stroke:rgba(198,227,90,.3);stroke-width:1.5}
@keyframes ants{to{stroke-dashoffset:-4.8}}
@keyframes trace{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
.hx-pin{position:absolute;left:48%;top:40.6%;width:0;height:0}
.hx-pin i{position:absolute;left:-70px;top:-70px;width:140px;height:140px;border-radius:50%;border:3px solid #D4F06A;background:radial-gradient(closest-side,rgba(198,227,90,.35),transparent);box-shadow:0 0 18px rgba(198,227,90,.7);transform:scaleY(.42) scale(.15);opacity:0;animation:ripple 3.6s var(--ease-out) infinite}
.hx-pin i:nth-child(2){animation-delay:1.2s}.hx-pin i:nth-child(3){animation-delay:2.4s}
@keyframes ripple{0%{transform:scaleY(.42) scale(.15);opacity:.95}100%{transform:scaleY(.42) scale(1.6);opacity:0}}
.hx-stage > img.hx-mist{inset:auto 0 -2% -20%;top:auto;width:140%;height:auto;opacity:.45;mix-blend-mode:screen;animation:mist 24s ease-in-out infinite alternate}
@keyframes mist{from{translate:-8% 0}to{translate:8% -3%}}
.hx-motes{position:absolute;inset:0;pointer-events:none}
.hx-motes span{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#EAF7B8;box-shadow:0 0 10px 2px rgba(198,227,90,.6);opacity:0;animation:mote var(--d) linear var(--dl) infinite}
@keyframes mote{0%{opacity:0;transform:translate(0,0)}15%{opacity:.9}85%{opacity:.7}100%{opacity:0;transform:translate(var(--dx),-240px)}}
/* Rótulo de coordenadas estilo HUD (sede en Lima) */
.hx-hud{position:absolute;right:clamp(16px,4vw,56px);top:calc(var(--hdr) + 18px);display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:10px 14px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:#DDEFA0;border:1px solid rgba(198,227,90,.55);border-width:0 1px 1px 0;animation:hi-up 1s var(--ease-out) 1.2s both}
.hx-hud::before{content:"";position:absolute;right:-1px;top:-14px;width:1px;height:14px;background:rgba(198,227,90,.55)}

/* ── Revelado al hacer scroll (lne.js añade .in) ────────────────── */
.js .rv{opacity:0;translate:0 26px;transition:opacity .9s var(--ease-out),translate .9s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
.js .rv-l{opacity:0;translate:-48px 0;transition:opacity .9s var(--ease-out),translate 1s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
.js .rv-r{opacity:0;translate:48px 0;transition:opacity .9s var(--ease-out),translate 1s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
.js .rv-i{opacity:0;translate:0 44px;scale:.97;transition:opacity .9s var(--ease-out),translate 1s var(--ease-out),scale 1s var(--ease-out),box-shadow .3s ease,border-color .3s ease,background-color .3s ease,transform .45s var(--ease-out);transition-delay:calc(var(--i,0) * 95ms),calc(var(--i,0) * 95ms),calc(var(--i,0) * 95ms),0s,0s,0s,0s}
.js .rv.in,.js .rv-i.in,.js .rv-l.in,.js .rv-r.in{opacity:1;translate:0 0;scale:1}
.js .rv-m{opacity:0;scale:.9;translate:0 30px;filter:blur(6px);transition:opacity 1.1s var(--ease-out),scale 1.3s var(--ease-out),translate 1.3s var(--ease-out),filter 1s ease;transition-delay:calc(var(--i,0) * 90ms + 80ms)}
.js .rv-m.in{opacity:1;scale:1;translate:0 0;filter:none}
/* Títulos h2: palabras que suben desde una máscara */
.js h2 .w > span{transform:translateY(105%);transition:transform 1s var(--ease-out);transition-delay:calc(var(--w) * 45ms + 60ms)}
.js .in h2 .w > span,.js h2.in .w > span{transform:none}
.js h2.rv{translate:none}
/* Iconos de trazo (svg con fill="none" y width ≥ 22): se dibujan */
.js svg.draw *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease-out) .25s}
.js .in svg.draw *,.js svg.draw.in *,.js .hi svg.draw *{stroke-dashoffset:0}
.js .hi svg.draw *{animation:draw 1.6s var(--ease-out) .9s both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.ghost{transition:transform 1.2s var(--ease-out) .3s,opacity 1.2s ease .3s,color .4s}
.js .rv-i:not(.in) .ghost{transform:translateX(30px);opacity:0}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(198,227,90,.55)}50%{box-shadow:0 0 0 9px rgba(198,227,90,0)}}

/* ── Imágenes PNG con vida (data-fx) ────────────────────────────── */
/* float: ilustración 3D que aparece con rebote y flota (dentro de .rv-i o con .rv-m propia) */
.js .rv-i img[data-fx="float"]{opacity:0;scale:.82;rotate:-4deg;transition:opacity .8s ease,scale 1.1s var(--ease-spring),rotate 1.1s var(--ease-spring),transform .6s var(--ease-out),filter .4s;transition-delay:calc(var(--i,0) * 95ms + .25s),calc(var(--i,0) * 95ms + .25s),calc(var(--i,0) * 95ms + .25s),0s,0s}
.js .rv-i.in img[data-fx="float"]{opacity:1;scale:1;rotate:0deg}
.rv-i.in img[data-fx="float"],img.rv-m.in[data-fx="float"],.no-js-float img[data-fx="float"]{animation:float 6s ease-in-out infinite;animation-delay:var(--fd,0s)}
.js .rv-i.in:hover img[data-fx="float"]{scale:1.07;rotate:-2deg;filter:drop-shadow(0 18px 18px rgba(16,40,28,.22))}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -9px}}
/* photo: barrido de revelado */
.js .rv-i img[data-fx="photo"],.js img.rv-m[data-fx="photo"]{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease-out),scale 1.2s var(--ease-out),filter .5s;transition-delay:calc(var(--i,0) * 95ms + .15s),0s,0s;scale:1.12}
.js .rv-i.in img[data-fx="photo"],.js img.rv-m.in[data-fx="photo"]{clip-path:inset(0 0 0 0);scale:1}
.rv-i:hover img[data-fx="photo"]{filter:saturate(1.15) brightness(1.04)}
/* portrait: solo aparición suave */
.js .rv-i img[data-fx="portrait"]{opacity:0;transition:opacity 1.2s ease .3s}
.js .rv-i.in img[data-fx="portrait"]{opacity:1}
/* logo */
.rv-i img[data-fx="logo"]{transition:transform .5s var(--ease-out)}
.rv-i:hover img[data-fx="logo"]{transform:scale(1.07)}
/* decorativas */
img[data-fx="sway"]{transform-origin:50% 100%;animation:sway 6s ease-in-out infinite}
@keyframes sway{0%,100%{rotate:-3deg}50%{rotate:3deg}}
img[data-fx="drift"]{animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{from{translate:0 0}to{translate:-18px 14px}}
img[data-fx="wobble"]{animation:wobble 5s var(--ease-out) infinite}
@keyframes wobble{0%,100%{rotate:0deg}20%{rotate:-7deg}40%{rotate:5deg}60%{rotate:-2deg}80%{rotate:1deg}}
/* par: imagen grande que se desplaza con el scroll (lne.js) */
img[data-fx="par"]{transition:opacity 1.1s var(--ease-out),scale 1.3s var(--ease-out),filter 1s ease,transform .8s var(--ease-out)}

/* Tarjetas: inclinación 3D y reflejo que sigue al puntero (lne.js; .no-tilt lo desactiva) */
.tilt{transform-style:preserve-3d}
.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 45%);mix-blend-mode:soft-light;z-index:3}
.rv-i:hover > .glare{opacity:1}
.dark .glare{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(198,227,90,.16),transparent 55%);mix-blend-mode:normal}

/* ── Acordeones (FAQ, ver alcance, información adicional) ───────── */
.acc-w{overflow:hidden}
.acc-item{transition:background-color .35s ease,box-shadow .35s ease}
.acc-item:has(.acc-btn[aria-expanded="true"]){box-shadow:0 16px 34px -24px rgba(16,40,28,.45)}
.acc-btn{cursor:pointer;transition:color .2s}
.acc-btn:hover{color:#3E5A0C}
.acc-sign{display:inline-grid;place-items:center;transition:transform .4s var(--ease-out),background-color .3s,color .3s}
.acc-btn[aria-expanded="true"] .acc-sign{transform:rotate(180deg)}

/* ── Formulario ─────────────────────────────────────────────────── */
.lne-field{width:100%;max-width:100%;min-width:0;min-height:52px;padding:12px 16px;border-radius:10px;border:1px solid #C9D2BF;background:#fff;font:inherit;font-size:16px;color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease}
textarea.lne-field{min-height:120px;resize:vertical}
.lne-field:focus{border-color:var(--olive-2);box-shadow:0 0 0 3px rgba(185,220,60,.35);outline:none}
.lne-field::placeholder{color:#6B776F}
.lne-field[aria-invalid="true"]{border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.14)}
.f-err{display:block;margin-top:6px;font-size:13.5px;font-weight:600;color:#B3261E}
.lne-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.drop{transition:border-color .2s,background-color .2s,transform .3s var(--ease-out)}
.drop.over{border-color:var(--olive) !important;background:var(--sage-50) !important;transform:scale(1.01)}
.drop.has .drop-name{color:#3E5A0C;font-weight:700}
#f-ok{animation:hi-up .7s var(--ease-out) both;outline:none}
.ok-acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ── Botones flotantes: Facebook, Instagram y WhatsApp (columna derecha, solo logo) ── */
.fabs{position:fixed;right:20px;bottom:24px;z-index:58;display:flex;flex-direction:column;gap:12px}
.fab-b{position:relative;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;color:#fff;box-shadow:0 12px 26px -10px rgba(7,26,17,.55),inset 0 0 0 1px rgba(255,255,255,.18);transition:transform .35s var(--ease-out),box-shadow .3s,filter .3s;animation:fab-in .7s var(--ease-out) both;animation-delay:calc(1.2s + var(--n,0) * .12s)}
.fab-b svg{width:30px;height:30px}
.fab-b:hover{color:#fff;filter:brightness(1.08);box-shadow:0 16px 30px -10px rgba(7,26,17,.6),inset 0 0 0 1px rgba(255,255,255,.3)}
.fab-fb{--n:0;background:#1877F2}
.fab-fb svg{width:32px;height:32px}
.fab-ig{--n:1;background:radial-gradient(circle at 30% 107%,#FDF497 0,#FDF497 6%,#FD5949 45%,#D6249F 62%,#285AEB 95%)}
.fab-wa{--n:2;background:#25B648}
.fab-wa::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid rgba(37,182,72,.75);animation:fab-ping 2.8s ease-out 2.4s infinite;pointer-events:none}
@keyframes fab-in{from{opacity:0;transform:translateX(40px) scale(.7)}}
@keyframes fab-ping{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(1.35);opacity:0}}
@media (max-width:760px){.fabs{right:20px;bottom:24px;gap:12px}.fab-b{width:52px;height:52px}.ftr-b{padding-right:80px}.fab-b svg{width:26px;height:26px}.fab-fb svg{width:28px;height:28px}}

/* ── Pie: ola de entrada, Síguenos y Mastera en el tono del texto ── */
.ftr{position:relative;margin-top:-1px}
.ftr-wave{position:absolute;left:0;bottom:calc(100% - 1px);width:100%;height:clamp(28px,4.4vw,64px);fill:var(--forest-900);pointer-events:none}
.ftr-social{margin-top:8px}
.ftr-social p{font-size:16px;font-weight:600;color:#fff}
.ftr-social div{display:flex;gap:14px;margin-top:12px}
.ftr .ftr-social a{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.85);color:#fff;transition:background-color .25s,color .25s,box-shadow .25s,transform .35s var(--ease-out)}
.ftr .ftr-social a:hover{background:var(--lime);color:var(--forest-900);box-shadow:inset 0 0 0 1.6px var(--lime);transform:translateY(-3px)}
.ftr-social svg{width:22px;height:22px}
.ftr-b > a.ftr-mastera img{filter:brightness(0) invert(1);opacity:.82;transition:opacity .3s,transform .35s var(--ease-out)}
.ftr-b > a.ftr-mastera:hover img{filter:brightness(0) invert(1);opacity:1}
@media (prefers-reduced-motion:reduce){.fab-b,.fab-wa::before{animation:none}}

/* ── Responsive base ────────────────────────────────────────────── */
@media (max-width:760px){
  :root{--hdr:112px}
  .hdr .logo{height:68px}
  .hdr.sc .logo{height:50px}
  .hx-motes span:nth-child(n+9){display:none}
  .hx-hud{display:none}
  .btn{min-height:52px;padding:0 22px}
}

/* ── Movimiento reducido: todo visible y quieto ────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .js .rv,.js .rv-i,.js .rv-l,.js .rv-r,.js .rv-m,.js .rv-i img,.js h2 .w > span,.js .hi{opacity:1 !important;translate:none !important;scale:none !important;rotate:none !important;transform:none !important;filter:none !important;clip-path:none !important}
  .js svg.draw *,.js .trail path{stroke-dashoffset:0 !important}
  .js .trail circle{opacity:1 !important}
  .hx-motes,.hx-pin,.hx-sweep{display:none}
  @view-transition{navigation:none}
}