/* ===========================================================================
   Landings de módulo — hoja propia.
   ===========================================================================
   NO comparte nada con tema.css ni con main.css: las landings no cargan ni
   bootstrap ni la hoja de la portada. Son 14 KB contra 400, y eso es lo que
   hace que abran de una en un celular con señal mala, que es donde la va a
   mirar la mitad de las agencias.

   Todo lo que se mueve está detrás de prefers-reduced-motion, y todas las
   animaciones son de transform/opacity: las únicas dos propiedades que el
   navegador puede animar sin rehacer el layout en cada cuadro.
   =========================================================================== */

:root{
  --tinta:#0b1020; --tinta2:#151b33; --papel:#fff; --papel2:#f6f8fc;
  --linea:#e4e9f2; --gris:#6b7689; --texto:#1b2235; --texto2:#4a5468;
  --acc:#0a6847; --acc2:#12b981; --acc3:#5eead4;
  --violeta:#6d5dfc; --ambar:#f59e0b; --rojo:#e5484d;
  --r-xl:28px; --r-lg:20px; --r-md:14px; --r-sm:10px;
  --ease:cubic-bezier(.22,1,.36,1);
  --resorte:cubic-bezier(.34,1.56,.64,1);
  --sombra:0 2px 4px rgba(11,16,32,.05), 0 24px 48px -20px rgba(11,16,32,.28);
  --sombra-alta:0 2px 6px rgba(11,16,32,.07), 0 40px 70px -24px rgba(11,16,32,.42);
  --ancho:1140px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papel);color:var(--texto);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--acc);text-decoration:none}
h1,h2,h3{margin:0;line-height:1.12;letter-spacing:-.025em;font-weight:800;color:var(--tinta)}
p{margin:0}
.lp-wrap{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 24px}

/* ── Aparecer al entrar en pantalla ───────────────────────────────────────
   Quien esconde es `html.js-anim`, y esa clase la pone el propio JavaScript
   en el <head>, antes de que se pinte nada. Es la diferencia entre una
   animación y una página en blanco: si escondiera el CSS a secas y el JS no
   corriera —bloqueado, con error, o un robot que no ejecuta— no habría nadie
   que agregara .visto y el visitante vería un sitio vacío.

   Con esa clase puesta, el IntersectionObserver va marcando .visto a medida
   que cada bloque entra en pantalla. Sin ella, se ve todo desde el principio,
   quieto. */
.js-anim .lp-anim{opacity:0;transform:translateY(22px);
                  transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js-anim .lp-anim.visto{opacity:1;transform:none}
.js-anim .lp-anim.d1{transition-delay:.08s} .js-anim .lp-anim.d2{transition-delay:.16s}
.js-anim .lp-anim.d3{transition-delay:.24s} .js-anim .lp-anim.d4{transition-delay:.32s}
.js-anim .lp-anim.d5{transition-delay:.40s} .js-anim .lp-anim.d6{transition-delay:.48s}

/* ── Encabezado ──────────────────────────────────────────────────────── */
.lp-head{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.82);
         backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
         border-bottom:1px solid transparent;transition:border-color .3s, box-shadow .3s}
.lp-head.pegado{border-bottom-color:var(--linea);box-shadow:0 8px 24px -18px rgba(11,16,32,.5)}
.lp-head .lp-wrap{display:flex;align-items:center;gap:18px;height:68px}
.lp-head img{height:34px;width:auto}
.lp-nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.lp-nav a{color:var(--texto2);font-size:14.5px;font-weight:600;position:relative;padding:4px 0}
.lp-nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;
                 background:linear-gradient(90deg,var(--acc2),var(--acc3));transition:right .3s var(--ease)}
.lp-nav a:hover::after{right:0}
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
        padding:13px 26px;border-radius:12px;font-size:15px;font-weight:800;cursor:pointer;
        border:0;font-family:inherit;position:relative;overflow:hidden;
        color:#fff;background:linear-gradient(135deg,var(--acc2),var(--acc));
        box-shadow:0 12px 26px -12px rgba(18,185,129,.9);
        transition:transform .25s var(--resorte), box-shadow .25s}
.lp-btn::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
               background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
               transform:skewX(-20deg);transition:left .65s var(--ease)}
.lp-btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(18,185,129,.95);color:#fff}
.lp-btn:hover::after{left:130%}
.lp-btn:active{transform:translateY(0) scale(.985)}
.lp-btn.sm{padding:10px 20px;font-size:14px;border-radius:10px}
.lp-btn.fantasma{background:transparent;color:var(--texto);border:1.5px solid var(--linea);box-shadow:none}
.lp-btn.fantasma:hover{border-color:var(--acc2);color:var(--acc);box-shadow:none}
.lp-btn.claro{background:#fff;color:var(--tinta);box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.lp-nav .lp-btn{color:#fff}
@media(max-width:860px){.lp-nav a:not(.lp-btn){display:none}}

/* ── Miga ────────────────────────────────────────────────────────────── */
.lp-miga{font-size:12.5px;color:rgba(255,255,255,.55);padding:18px 0 0}
.lp-miga a{color:rgba(255,255,255,.72)}
.lp-miga a:hover{color:#fff}
.lp-miga span{margin:0 7px}

/* ── Portada ─────────────────────────────────────────────────────────── */
.lp-hero{position:relative;background:var(--tinta);color:#fff;overflow:hidden;
         padding-bottom:88px}
.lp-hero .aura{position:absolute;border-radius:50%;filter:blur(100px);opacity:.5;pointer-events:none;
               will-change:transform;animation:flota 24s var(--ease) infinite alternate}
.lp-hero .a1{width:46vw;height:46vw;left:-12vw;top:-16vw;background:radial-gradient(circle at 40% 40%,var(--acc2),transparent 62%)}
.lp-hero .a2{width:40vw;height:40vw;right:-10vw;top:-6vw;background:radial-gradient(circle at 50% 50%,var(--violeta),transparent 62%);animation-delay:-9s;animation-duration:30s}
.lp-hero .a3{width:36vw;height:36vw;left:34%;bottom:-20vw;background:radial-gradient(circle at 50% 50%,#0ea5e9,transparent 62%);animation-delay:-16s;animation-duration:27s}
.lp-hero .malla{position:absolute;inset:0;pointer-events:none;
                background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);
                background-size:28px 28px;
                -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 78%);
                mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 78%)}
@keyframes flota{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4vw,3vw,0) scale(1.12)}
  100%{transform:translate3d(-3vw,4vw,0) scale(.94)}
}
.lp-hero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
            gap:52px;align-items:center;padding-top:46px}
.lp-volanta{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;
            font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
            color:var(--acc3);background:rgba(18,185,129,.14);border:1px solid rgba(18,185,129,.38)}
.lp-volanta svg{width:15px;height:15px}
.lp-hero h1{margin-top:22px;font-size:clamp(34px,5vw,60px);color:#fff}
.lp-hero h1 em{font-style:normal;background:linear-gradient(92deg,var(--acc3),var(--acc2) 48%,#a78bfa);
               -webkit-background-clip:text;background-clip:text;color:transparent}
.lp-entrada{margin-top:20px;font-size:clamp(16px,2vw,19px);line-height:1.6;color:rgba(255,255,255,.76);max-width:50ch}
.lp-entrada b{color:#fff;font-weight:700}
.lp-hero-acc{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
.lp-hero-acc .lp-btn.fantasma{border-color:rgba(255,255,255,.26);color:#fff}
.lp-hero-acc .lp-btn.fantasma:hover{border-color:var(--acc3);color:var(--acc3)}
.lp-sellos{margin-top:30px;display:flex;gap:22px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.6)}
.lp-sellos span{display:inline-flex;align-items:center;gap:7px}
.lp-sellos svg{width:15px;height:15px;color:var(--acc3)}

.lp-hero-art{position:relative}
.lp-hero-art img{border-radius:var(--r-lg);box-shadow:var(--sombra-alta);
                 border:1px solid rgba(255,255,255,.12)}
@media(max-width:940px){
  .lp-hero-in{grid-template-columns:minmax(0,1fr);gap:36px;padding-top:30px}
  .lp-hero-art{order:-1}
}

/* ── Franja de números ───────────────────────────────────────────────── */
.lp-cifras{position:relative;z-index:3;margin-top:-54px}
.lp-cifras-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:1px;
              background:var(--linea);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sombra)}
.lp-cifra{background:#fff;padding:22px 20px;text-align:center}
.lp-cifra b{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--acc);
            font-variant-numeric:tabular-nums}
.lp-cifra span{font-size:13px;color:var(--gris)}
@media(max-width:700px){.lp-cifras-in{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── Secciones ───────────────────────────────────────────────────────── */
.lp-sec{padding:84px 0}
.lp-sec.gris{background:var(--papel2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.lp-tit{max-width:760px;margin:0 auto 46px;text-align:center}
.lp-tit .sup{display:block;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
             color:var(--acc);margin-bottom:12px}
.lp-tit h2{font-size:clamp(26px,3.6vw,38px)}
.lp-tit p{margin-top:14px;font-size:17px;color:var(--texto2)}
.lp-tit.izq{text-align:left;margin-left:0}

/* ── El problema ─────────────────────────────────────────────────────── */
.lp-problema{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:18px}
.lp-dolor{position:relative;background:#fff;border:1px solid var(--linea);border-radius:var(--r-md);
          padding:22px 22px 22px 58px;transition:transform .3s var(--resorte),box-shadow .3s,border-color .3s}
.lp-dolor::before{content:'';position:absolute;left:22px;top:24px;width:22px;height:22px;border-radius:50%;
                  background:rgba(229,72,77,.12);
                  box-shadow:inset 0 0 0 1.5px rgba(229,72,77,.4)}
.lp-dolor::after{content:'';position:absolute;left:30px;top:32px;width:6px;height:6px;border-radius:50%;
                 background:var(--rojo)}
.lp-dolor:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-color:#d7dfea}
.lp-dolor b{display:block;font-size:15.5px;font-weight:800;color:var(--tinta);margin-bottom:5px}
.lp-dolor span{font-size:14.5px;color:var(--texto2);line-height:1.55}

/* La flecha entre el problema y la solución */
.lp-flecha{display:flex;align-items:center;justify-content:center;gap:14px;margin:46px 0 10px;
           font-size:13.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.lp-flecha i{display:block;width:60px;height:1.5px;background:linear-gradient(90deg,transparent,var(--acc2))}
.lp-flecha i:last-child{background:linear-gradient(90deg,var(--acc2),transparent)}

/* ── Características con tilde ───────────────────────────────────────── */
.lp-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px 32px}
.lp-check{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-md);
          transition:background .25s,transform .25s var(--ease)}
.lp-check:hover{background:rgba(18,185,129,.06);transform:translateX(3px)}
.lp-check .tilde{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-content:center;
                 background:linear-gradient(135deg,var(--acc2),var(--acc));
                 box-shadow:0 6px 14px -6px rgba(18,185,129,.9)}
.lp-check .tilde svg{width:14px;height:14px;color:#fff}
.lp-check b{display:block;font-size:15.5px;font-weight:700;color:var(--tinta);line-height:1.4}
.lp-check span{display:block;font-size:14px;color:var(--texto2);margin-top:3px;line-height:1.5}

/* ── Fichas ──────────────────────────────────────────────────────────── */
.lp-fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:20px}
.lp-ficha{position:relative;background:#fff;border:1px solid var(--linea);border-radius:var(--r-lg);
          padding:28px 24px;overflow:hidden;
          transition:transform .35s var(--resorte),box-shadow .35s,border-color .35s}
.lp-ficha::before{content:'';position:absolute;inset:0 0 auto;height:3px;
                  background:linear-gradient(90deg,var(--acc2),var(--acc3),#a78bfa);
                  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.lp-ficha:hover{transform:translateY(-5px);box-shadow:var(--sombra);border-color:transparent}
.lp-ficha:hover::before{transform:scaleX(1)}
.lp-ico{width:52px;height:52px;border-radius:15px;display:grid;place-content:center;margin-bottom:18px;
        background:linear-gradient(135deg,rgba(18,185,129,.16),rgba(109,93,252,.14));
        border:1px solid rgba(18,185,129,.26);
        transition:transform .4s var(--resorte)}
.lp-ficha:hover .lp-ico{transform:rotate(-6deg) scale(1.08)}
.lp-ico svg{width:26px;height:26px;color:var(--acc)}
.lp-ficha b{display:block;font-size:17px;font-weight:800;color:var(--tinta);margin-bottom:8px}
.lp-ficha p{font-size:14.5px;color:var(--texto2);line-height:1.6}

/* ── Pasos ───────────────────────────────────────────────────────────── */
.lp-pasos{counter-reset:paso;display:grid;gap:18px;max-width:780px;margin:0 auto}
.lp-paso{counter-increment:paso;position:relative;display:flex;gap:20px;align-items:flex-start;
         background:#fff;border:1px solid var(--linea);border-radius:var(--r-md);padding:22px 24px;
         transition:transform .3s var(--resorte),box-shadow .3s}
.lp-paso:hover{transform:translateX(5px);box-shadow:var(--sombra)}
.lp-paso::before{content:counter(paso,decimal-leading-zero);flex:0 0 auto;
                 font-size:20px;font-weight:800;color:var(--acc2);letter-spacing:-.02em;
                 width:42px;height:42px;border-radius:12px;display:grid;place-content:center;
                 background:rgba(18,185,129,.1);border:1px solid rgba(18,185,129,.26)}
.lp-paso b{display:block;font-size:16.5px;font-weight:800;color:var(--tinta);margin-bottom:4px}
.lp-paso span{font-size:14.5px;color:var(--texto2);line-height:1.6}

/* ── Texto corrido ───────────────────────────────────────────────────── */
.lp-texto{max-width:760px;margin:0 auto;font-size:16.5px;line-height:1.75;color:var(--texto2)}
.lp-texto h3{font-size:21px;margin:30px 0 10px;color:var(--tinta)}
.lp-texto p+p{margin-top:16px}
.lp-texto b,.lp-texto strong{color:var(--texto);font-weight:700}
.lp-texto ul{margin:14px 0;padding-left:22px}
.lp-texto li{margin-bottom:7px}

/* ── Preguntas ───────────────────────────────────────────────────────── */
.lp-faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.lp-faq details{background:#fff;border:1px solid var(--linea);border-radius:var(--r-md);overflow:hidden;
                transition:border-color .3s,box-shadow .3s}
.lp-faq details[open]{border-color:rgba(18,185,129,.45);box-shadow:var(--sombra)}
.lp-faq summary{cursor:pointer;list-style:none;padding:18px 54px 18px 22px;position:relative;
                font-size:16px;font-weight:700;color:var(--tinta)}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:'';position:absolute;right:24px;top:50%;width:10px;height:10px;
                       border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);
                       transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.lp-faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.lp-faq details>div{padding:0 22px 20px;font-size:15px;color:var(--texto2);line-height:1.65}

/* ── Formulario ──────────────────────────────────────────────────────── */
.lp-contacto{position:relative;background:var(--tinta);color:#fff;overflow:hidden;padding:84px 0}
.lp-contacto .aura{position:absolute;border-radius:50%;filter:blur(110px);opacity:.42;pointer-events:none}
.lp-contacto .c1{width:40vw;height:40vw;left:-12vw;bottom:-18vw;background:radial-gradient(circle,var(--acc2),transparent 62%)}
.lp-contacto .c2{width:34vw;height:34vw;right:-10vw;top:-14vw;background:radial-gradient(circle,var(--violeta),transparent 62%)}
.lp-contacto-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
                gap:52px;align-items:start}
.lp-contacto h2{color:#fff;font-size:clamp(26px,3.4vw,36px)}
.lp-contacto .bajada{margin-top:16px;font-size:17px;color:rgba(255,255,255,.72);line-height:1.6}
.lp-datos{margin-top:30px;display:grid;gap:14px}
.lp-dato{display:flex;gap:13px;align-items:center;font-size:15px;color:rgba(255,255,255,.86)}
.lp-dato .ic{width:40px;height:40px;border-radius:12px;display:grid;place-content:center;flex:0 0 auto;
             background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.lp-dato .ic svg{width:18px;height:18px;color:var(--acc3)}
.lp-dato a{color:#fff}
.lp-dato a:hover{color:var(--acc3)}

.lp-form{background:#fff;border-radius:var(--r-xl);padding:30px;box-shadow:var(--sombra-alta)}
.lp-form h3{font-size:19px;margin-bottom:6px}
.lp-form .ayuda{font-size:14px;color:var(--gris);margin-bottom:22px}
.lp-campo{margin-bottom:16px;position:relative}
.lp-campo label{display:block;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
                color:var(--gris);margin-bottom:7px}
.lp-campo input,.lp-campo textarea{width:100%;border:1.5px solid var(--linea);border-radius:var(--r-sm);
                padding:13px 15px;font:inherit;font-size:15px;color:var(--texto);background:#fff;
                transition:border-color .25s,box-shadow .25s}
.lp-campo textarea{min-height:118px;resize:vertical}
.lp-campo input:focus,.lp-campo textarea:focus{outline:0;border-color:var(--acc2);
                box-shadow:0 0 0 4px rgba(18,185,129,.14)}
.lp-campo input::placeholder,.lp-campo textarea::placeholder{color:#aab3c2}
.lp-dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:0 16px}
/* el honeypot: para una persona no existe */
.lp-tarro{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lp-msg{margin-top:14px;font-size:14.5px;line-height:1.5;padding:12px 14px;border-radius:var(--r-sm);display:none}
.lp-msg.ok{display:block;background:#e6f4ee;color:#0a4a33;border:1px solid #bfe3d3}
.lp-msg.mal{display:block;background:#ffe9ea;color:#9b1c21;border:1px solid #f6c9cb}
.lp-form .lp-btn{width:100%}
.lp-legal{margin-top:14px;font-size:12.5px;color:var(--gris);text-align:center;line-height:1.5}
@media(max-width:940px){.lp-contacto-in{grid-template-columns:minmax(0,1fr);gap:36px}}

/* ── Cierre ──────────────────────────────────────────────────────────── */
.lp-cierre{padding:76px 0;text-align:center;background:var(--papel2);border-top:1px solid var(--linea)}
.lp-cierre h2{font-size:clamp(24px,3.2vw,32px)}
.lp-cierre p{margin:14px auto 26px;max-width:580px;font-size:17px;color:var(--texto2)}
.lp-cierre .acc{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── Otras landings ──────────────────────────────────────────────────── */
.lp-otras{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}
.lp-otra{display:block;background:#fff;border:1px solid var(--linea);border-radius:var(--r-md);padding:20px;
         transition:transform .3s var(--resorte),box-shadow .3s,border-color .3s}
.lp-otra:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:rgba(18,185,129,.5)}
.lp-otra b{display:block;font-size:15.5px;color:var(--tinta);margin-bottom:5px}
.lp-otra span{display:block;font-size:13.5px;color:var(--texto2);line-height:1.5}
.lp-otra i{display:inline-block;margin-top:12px;font-style:normal;font-size:13px;font-weight:800;color:var(--acc)}
.lp-otra:hover i::after{transform:translateX(4px)}
.lp-otra i::after{content:'→';display:inline-block;margin-left:5px;transition:transform .3s var(--ease)}

/* ── Pie ─────────────────────────────────────────────────────────────── */
.lp-pie{background:var(--tinta);color:rgba(255,255,255,.62);padding:52px 0 26px;font-size:14px}
.lp-pie-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:30px}
.lp-pie img{height:34px;margin-bottom:12px}
.lp-pie b{display:block;color:#fff;font-size:14px;margin-bottom:12px}
.lp-pie a{display:block;color:rgba(255,255,255,.62);padding:4px 0;transition:color .2s,transform .2s}
.lp-pie a:hover{color:var(--acc3);transform:translateX(3px)}
.lp-copy{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);
         font-size:12.5px;color:rgba(255,255,255,.4);text-align:center}

/* ── WhatsApp flotante ───────────────────────────────────────────────── */
.lp-wa{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:0;
       height:58px;padding:0 17px;border-radius:999px;background:#25d366;color:#fff;
       box-shadow:0 14px 34px -10px rgba(37,211,102,.75);
       transition:transform .3s var(--resorte),box-shadow .3s,gap .3s var(--ease),padding .3s var(--ease)}
.lp-wa svg{width:28px;height:28px;flex:0 0 auto}
.lp-wa span{max-width:0;overflow:hidden;white-space:nowrap;font-size:15px;font-weight:700;
            transition:max-width .4s var(--ease)}
.lp-wa:hover{transform:translateY(-3px) scale(1.03);color:#fff;gap:11px;padding:0 24px 0 19px;
             box-shadow:0 20px 40px -10px rgba(37,211,102,.85)}
.lp-wa:hover span{max-width:220px}
/* el latido es sólo para que se note al entrar, y para una vez */
.lp-wa::before{content:'';position:absolute;inset:0;border-radius:999px;border:2px solid #25d366;
               animation:latido 2.6s var(--ease) 3;pointer-events:none}
@keyframes latido{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}
}
@media(max-width:600px){
  .lp-wa{right:14px;bottom:14px;height:54px;padding:0 15px}
  .lp-wa:hover span{max-width:0}
  .lp-wa:hover{padding:0 15px;gap:0}
}

/* ── Barra de progreso de lectura ────────────────────────────────────── */
.lp-progreso{position:fixed;top:0;left:0;height:3px;z-index:50;width:0;
             background:linear-gradient(90deg,var(--acc2),var(--acc3),#a78bfa);
             transition:width .1s linear}

@media(max-width:620px){
  .lp-sec{padding:62px 0}
  .lp-wrap{padding:0 18px}
  .lp-hero{padding-bottom:70px}
}

/* Quien pidió que no se mueva nada, no ve nada moverse. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
                       transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js-anim .lp-anim{opacity:1!important;transform:none!important}
}