/*
Theme Name: GGOS
Theme URI: https://ggos.es
Author: GGOS
Description: Tema a medida de GGOS — soporte informático remoto. Ligero, accesible y listo para WooCommerce. Diseño propio (logo G-escudo + azul neón + partículas), sin dependencias de plantilla.
Version: 1.9.2
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: ggos
*/

/* Fuentes autoalojadas (antes Google Fonts — ahora sin dependencia externa, mejor Core Web Vitals y RGPD) */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/bricolage-grotesque-v9-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/bricolage-grotesque-v9-latin-500.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/bricolage-grotesque-v9-latin-700.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/bricolage-grotesque-v9-latin-800.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/jetbrains-mono-v24-latin-regular.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/jetbrains-mono-v24-latin-500.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/jetbrains-mono-v24-latin-700.woff2') format('woff2')}

/* Partículas interactivas a página completa (capa visual, no bloquea clics) */
#ggos-particles{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:5;pointer-events:none;
}
@media (prefers-reduced-motion:reduce){#ggos-particles{display:none}}

:root{
  --paper:#F6F4EF;
  --paper-2:#EDE9E1;
  --ink:#0B1622;
  --ink-2:#12212F;
  --text:#1D2A36;
  --text-soft:#54626E;
  --line:#DBD6CB;
  --cyan:#00C8FF;
  --mint:#00FFC8;
  --cyan-ink:#06708F;
  --coral:#FF7A4D;
  --coral-soft:#FFE7DC;
  --ok:#25D366;
  --radius:14px;
  --maxw:1180px;
  --shadow:0 1px 2px rgba(11,22,34,.06), 0 12px 32px -12px rgba(11,22,34,.18);
  --font-display:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--font-body);font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;max-width:100%;
}
img,svg,video{max-width:100%}
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3{font-family:var(--font-display);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0}
h2{font-size:clamp(1.9rem,1.2rem+3vw,3rem)}
h3{font-size:clamp(1.2rem,1rem+1vw,1.5rem);font-weight:700}
p{margin:0 0 1rem}
a{color:var(--cyan-ink);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.4rem)}
.eyebrow{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan-ink);font-weight:500}
.lede{font-size:clamp(1.05rem,1rem+.5vw,1.28rem);color:var(--text-soft);max-width:62ch}
section{padding:clamp(3.5rem,7vw,6rem) 0}

.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-body);font-weight:700;font-size:1.02rem;padding:.95rem 1.5rem;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;text-decoration:none;line-height:1}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.btn-wa{background:var(--ok);color:#06280F;box-shadow:0 10px 24px -10px rgba(37,211,102,.7)}
.btn-wa:hover{background:#20c25c}
.btn-ghost{background:transparent;color:var(--paper);border-color:rgba(255,255,255,.28)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--ink-2)}
.btn svg{width:22px;height:22px;flex:none}

header.site{position:sticky;top:0;z-index:100;background:rgba(246,244,239,.82);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
header.site.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 20px -16px rgba(11,22,34,.4)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:1rem}
.brand{display:flex;align-items:center;gap:.65rem;font-family:var(--font-display);font-weight:800;font-size:1.4rem;letter-spacing:-.02em;color:var(--ink)}
.brand svg{width:38px;height:38px;flex:none}
.brand-logo{width:44px;height:44px;flex:none;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,200,255,.28))}
.brand .tag{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.18em;color:var(--text-soft);font-weight:500;text-transform:uppercase;display:block;margin-top:2px}
.nav-links{display:flex;align-items:center;gap:1.8rem}
.nav-links a{color:var(--text);font-weight:500;font-size:.98rem;white-space:nowrap}
.nav-links a:hover{color:var(--cyan-ink);text-decoration:none}
.nav-cta{display:flex;align-items:center;gap:.8rem}
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:.4rem;color:var(--ink)}
@media(max-width:900px){
  .nav-links{position:fixed;inset:74px 0 auto 0;flex-direction:column;background:var(--paper);padding:1.4rem;gap:1.2rem;border-bottom:1px solid var(--line);transform:translateY(-140%);transition:transform .3s ease;box-shadow:var(--shadow)}
  .nav-links.open{transform:translateY(0)}
  .menu-btn{display:block}
  .nav-cta .btn-ink{display:none}
}

.hero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;padding:clamp(3.5rem,7vw,6.5rem) 0 clamp(4rem,8vw,7rem)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 82% 18%,rgba(0,200,255,.16),transparent 60%),radial-gradient(80% 60% at 10% 100%,rgba(0,255,200,.08),transparent 55%);pointer-events:none}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.hero-grid>*{min-width:0}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.5rem,1.6rem+4.4vw,4.4rem);color:var(--paper)}
.hero h1 .hl{color:var(--cyan);text-shadow:0 0 34px rgba(0,200,255,.45)}
.hero .lede{color:#B9C6D2;margin-top:1.4rem;max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.hero-trust{display:flex;flex-wrap:wrap;gap:1.2rem 1.8rem;margin-top:2.3rem;font-size:.92rem;color:#9FB0BD}
.hero-trust span{display:inline-flex;align-items:center;gap:.5rem}
.hero-trust svg{width:19px;height:19px;color:var(--mint);flex:none}
.mark-stage{display:flex;justify-content:center;align-items:center;position:relative;min-width:0}
.mark-stage>svg{width:min(300px,72%);height:auto;filter:drop-shadow(0 0 40px rgba(0,200,255,.28))}
.mark-stage .mark-logo{position:relative;z-index:2;width:min(230px,62%);height:auto;object-fit:contain;filter:drop-shadow(0 0 42px rgba(0,200,255,.38))}
.mark-ring{position:absolute;width:min(400px,92%);aspect-ratio:1;border:1px solid rgba(0,200,255,.16);border-radius:50%;animation:spin 60s linear infinite}
.mark-ring.r2{width:min(330px,78%);border-style:dashed;border-color:rgba(0,255,200,.14);animation-duration:44s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.mark-ring{animation:none}}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.8rem;counter-reset:step}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem 1.6rem 1.7rem}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-mono);font-weight:700;font-size:.95rem;color:var(--cyan-ink);display:block;margin-bottom:.9rem;letter-spacing:.1em}
.step h3{margin-bottom:.5rem}
.step p{margin:0;color:var(--text-soft);font-size:1rem}

.privacy{background:var(--ink-2);color:var(--paper)}
.privacy .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.privacy .wrap>*{min-width:0}
@media(max-width:860px){.privacy .wrap{grid-template-columns:1fr}}
.privacy h2{color:var(--paper)}
.privacy .lede{color:#B9C6D2}
.priv-list{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1rem}
.priv-list li{display:flex;gap:.9rem;align-items:flex-start;font-size:1.05rem;color:#DCE5EC}
.priv-list svg{width:26px;height:26px;color:var(--cyan);flex:none;margin-top:2px}
.priv-list b{color:#fff}
.otp{background:var(--ink);border:1px solid rgba(0,200,255,.25);border-radius:var(--radius);padding:1.6rem;font-family:var(--font-mono);min-width:0;max-width:100%}
.otp .row{display:flex;justify-content:space-between;color:#7f93a2;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.otp .code{font-size:clamp(1.8rem,1rem+3vw,2.9rem);font-weight:700;color:var(--cyan);letter-spacing:.16em;margin:.6rem 0;text-align:center;text-shadow:0 0 24px rgba(0,200,255,.4);overflow-wrap:anywhere}
.otp .hint{color:#9FB0BD;font-family:var(--font-body);font-size:.9rem;margin:0;text-align:center}

.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.6rem}
@media(max-width:940px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.svc-grid{grid-template-columns:1fr}}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;transition:transform .18s,box-shadow .18s,border-color .18s}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfe9f3}
.svc .ic{width:44px;height:44px;border-radius:11px;background:linear-gradient(135deg,#e4f8ff,#e2fff6);display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.svc .ic svg{width:24px;height:24px;color:var(--cyan-ink)}
.svc h3{font-size:1.12rem;margin-bottom:.35rem}
.svc p{margin:0;color:var(--text-soft);font-size:.96rem}

.aud{background:var(--paper-2)}
.aud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
@media(max-width:860px){.aud-grid{grid-template-columns:1fr}}
.aud-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2rem 1.8rem;display:flex;flex-direction:column}
.aud-card .kick{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:.8rem}
.aud-card h3{margin-bottom:.7rem}
.aud-card p{color:var(--text-soft);font-size:1rem}
.aud-card ul{margin:.4rem 0 1.4rem;padding-left:1.1rem;color:var(--text-soft);font-size:.98rem}
.aud-card ul li{margin-bottom:.35rem}
.aud-card .go{margin-top:auto;font-weight:700;color:var(--cyan-ink);display:inline-flex;align-items:center;gap:.4rem}

.price-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem}
.launch-badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--coral-soft);color:#B23A12;font-weight:700;font-size:.85rem;padding:.5rem .9rem;border-radius:999px;font-family:var(--font-mono);letter-spacing:.04em}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.4rem}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}}
.price{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;display:flex;flex-direction:column;position:relative}
.price.feat{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 18px 40px -20px rgba(0,200,255,.5)}
.price.feat::before{content:"El más pedido";position:absolute;top:-13px;left:1.8rem;background:var(--cyan);color:var(--ink);font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.08em;padding:.35rem .8rem;border-radius:999px;text-transform:uppercase}
.price h3{font-size:1.2rem;margin-bottom:.3rem}
.price .desc{color:var(--text-soft);font-size:.95rem;min-height:2.6em;margin-bottom:1rem}
.price .amount{font-family:var(--font-display);font-weight:800;font-size:2.7rem;color:var(--ink);line-height:1;letter-spacing:-.03em}
.price .amount small{font-size:1rem;font-weight:500;color:var(--text-soft)}
.price .was{font-family:var(--font-mono);font-size:.82rem;color:var(--text-soft);margin:.5rem 0 0}
.price .was s{color:#9aa6b0}
.price ul{list-style:none;margin:1.3rem 0 1.6rem;padding:0;display:grid;gap:.6rem}
.price ul li{display:flex;gap:.55rem;align-items:flex-start;font-size:.96rem;color:var(--text)}
.price ul svg{width:19px;height:19px;color:var(--ok);flex:none;margin-top:3px}
.price .btn{margin-top:auto;justify-content:center;width:100%}
.guarantee{margin-top:2.4rem;background:var(--coral-soft);border:1px solid #f7cdb9;border-radius:var(--radius);padding:1.4rem 1.6rem;display:flex;gap:1rem;align-items:center}
.guarantee svg{width:40px;height:40px;color:var(--coral);flex:none}
.guarantee b{color:#8f2f0e}
.guarantee p{margin:0;color:#7a3a22;font-size:1.02rem}
.price-note{margin-top:1.2rem;color:var(--text-soft);font-size:.9rem;text-align:center}

.trust{background:var(--ink);color:var(--paper)}
.trust h2{color:var(--paper)}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.6rem}
@media(max-width:820px){.trust-grid{grid-template-columns:1fr}}
.trust-card{border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:1.8rem;background:rgba(255,255,255,.02)}
.trust-card svg{width:30px;height:30px;color:var(--cyan);margin-bottom:1rem}
.trust-card h3{color:#fff;margin-bottom:.5rem;font-size:1.15rem}
.trust-card p{color:#A9B8C4;font-size:.98rem;margin:0}

.faq-list{margin-top:2.4rem;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--font-display);font-weight:700;font-size:clamp(1.05rem,1rem+.4vw,1.28rem);color:var(--ink);padding:1.4rem 3rem 1.4rem 0;position:relative;display:block}
.faq-q:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.faq-q::after{content:"+";position:absolute;right:.3rem;top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-size:1.7rem;color:var(--cyan-ink);transition:transform .25s}
.faq-item.open .faq-q::after{content:"–"}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 2.6rem 1.5rem 0;color:var(--text-soft);margin:0}
.faq-item.open .faq-a{max-height:360px}

.final{background:linear-gradient(160deg,var(--ink),#0a2230)}
.final .wrap{text-align:center;color:var(--paper)}
.final h2{color:var(--paper);max-width:18ch;margin:0 auto}
.final .lede{color:#B9C6D2;margin:1.2rem auto 0}
.final .hero-cta{justify-content:center}
.final .num{font-family:var(--font-mono);font-size:1.3rem;color:var(--cyan);margin-top:1.6rem;letter-spacing:.06em}
.final .num a{color:var(--cyan)}

footer.site{background:#081019;color:#8697a4;padding:3rem 0 2.2rem;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.08)}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
.foot-brand{display:flex;align-items:center;gap:.6rem;color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.3rem}
.foot-brand svg{width:34px;height:34px}
.foot-brand img{width:40px;height:40px;object-fit:contain;flex:none}
footer.site h4{color:#cdd8e0;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--font-mono);font-weight:500;margin:0 0 1rem}
footer.site a{color:#8697a4;display:block;margin-bottom:.6rem}
footer.site a:hover{color:var(--cyan)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;padding-top:1.6rem;font-size:.84rem;color:#5f6f7c}
footer.site .foot-bottom a{display:inline;margin:0}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

.fab{position:fixed;right:1.1rem;bottom:1.1rem;z-index:200;width:60px;height:60px;border-radius:50%;background:var(--ok);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -8px rgba(37,211,102,.7);transition:transform .2s}
.fab:hover{transform:scale(1.08)}
.fab svg{width:32px;height:32px;color:#fff}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;z-index:999;background:#fff;padding:.6rem 1rem;border-radius:8px}

/* WooCommerce (future store) — light alignment with the theme */
.woocommerce-page .wrap-shop{max-width:var(--maxw);margin:0 auto;padding:3rem clamp(1.1rem,4vw,2.4rem)}
.woocommerce span.onsale{background:var(--cyan);color:var(--ink)}
.woocommerce a.button,.woocommerce button.button,.woocommerce .button{background:var(--ink);color:var(--paper);border-radius:999px}
.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--ink-2)}
.woocommerce .price{color:var(--ink)}

/* ============================================================
   Capa de animaciones "informática" (vanilla, sin librerías)
   ============================================================ */

/* P1 · Reveal escalonado en las rejillas (cascada al entrar) */
.svc-grid .reveal,.price-grid .reveal,.trust-grid .reveal,.aud-grid .reveal,.remote-steps li,.steps .step{transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.svc-grid .reveal:nth-child(2),.remote-steps li:nth-child(2){transition-delay:.06s}
.svc-grid .reveal:nth-child(3),.remote-steps li:nth-child(3){transition-delay:.12s}
.svc-grid .reveal:nth-child(4),.remote-steps li:nth-child(4){transition-delay:.18s}
.svc-grid .reveal:nth-child(5),.remote-steps li:nth-child(5){transition-delay:.24s}
.svc-grid .reveal:nth-child(6),.remote-steps li:nth-child(6){transition-delay:.30s}
.svc-grid .reveal:nth-child(7){transition-delay:.36s}
.svc-grid .reveal:nth-child(8){transition-delay:.42s}
.price-grid .reveal:nth-child(2),.trust-grid .reveal:nth-child(2),.aud-grid .reveal:nth-child(2),.steps .step:nth-child(2){transition-delay:.09s}
.price-grid .reveal:nth-child(3),.trust-grid .reveal:nth-child(3),.aud-grid .reveal:nth-child(3),.steps .step:nth-child(3){transition-delay:.18s}
/* line-draw: reveal para pasos remotos reutiliza .reveal si se añade la clase */

/* P5 · Micro-interacción neón en tarjetas (línea de acento que se dibuja en hover) */
.svc,.trust-card{position:relative;overflow:hidden}
.price{position:relative;overflow:visible}
.svc::after,.price::after,.trust-card::after{content:"";position:absolute;left:1px;right:1px;bottom:0;height:3px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--cyan),var(--mint));transition:transform .35s cubic-bezier(.16,1,.3,1);border-radius:0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px);pointer-events:none}
.svc:hover::after,.price:hover::after,.trust-card:hover::after{transform:scaleX(1)}
.svc:hover{transform:translateY(-5px);box-shadow:0 18px 40px -18px rgba(0,200,255,.55);border-color:#bfe6f3}
.svc .ic{transition:transform .25s,box-shadow .25s}
.svc:hover .ic{transform:translateY(-2px) scale(1.06);box-shadow:0 0 18px rgba(0,200,255,.4)}
.trust-card{transition:transform .2s,border-color .2s,background .2s}
.trust-card:hover{transform:translateY(-4px);border-color:rgba(0,200,255,.5);background:rgba(0,200,255,.05)}
.aud-card{transition:transform .2s,box-shadow .2s,border-color .2s}
.aud-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(0,200,255,.4);border-color:#cfe9f3}
@media (hover:none){.svc:hover,.trust-card:hover,.aud-card:hover{transform:none;box-shadow:none}.svc::after,.price::after,.trust-card::after{display:none}}

/* P4 · Titular del hero: acento con degradado cyan→mint animado + entrada */
.hero h1 .hl{
  background:linear-gradient(100deg,var(--cyan),var(--mint),var(--cyan));
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 0 26px rgba(0,200,255,.35));
  animation:hlShimmer 6s ease-in-out infinite;
}
@keyframes hlShimmer{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.hero h1,.hero .lede,.hero .hero-cta,.hero-trust{animation:heroRise .8s cubic-bezier(.16,1,.3,1) both}
.hero .lede{animation-delay:.08s}
.hero .hero-cta{animation-delay:.16s}
.hero-trust{animation-delay:.24s}
@keyframes heroRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* P3 · Franja de datos con contador */
.kpis{background:var(--ink-2);border-top:1px solid rgba(0,200,255,.12);border-bottom:1px solid rgba(0,200,255,.12)}
.kpis .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;padding-top:2.4rem;padding-bottom:2.4rem}
.kpi{text-align:center;min-width:0}
.kpi .num{font-family:var(--font-mono);font-weight:700;font-size:clamp(1.8rem,4.4vw,2.6rem);line-height:1;background:linear-gradient(120deg,var(--cyan),var(--mint));-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi .lbl{margin-top:.5rem;color:#a9bcc8;font-size:.9rem;line-height:1.3}
@media(max-width:640px){.kpis .wrap{grid-template-columns:repeat(2,1fr);gap:1.6rem 1rem}}

/* P2 · Separador de circuito que se dibuja al aparecer */
.circuit-sep{display:block;width:100%;max-width:var(--maxw);margin:0 auto;padding:.5rem clamp(1.1rem,4vw,2.4rem);overflow:visible}
.circuit-sep svg{width:100%;height:70px;display:block;opacity:.9}
.circuit-sep path,.circuit-sep line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s ease}
.circuit-sep.in path,.circuit-sep.in line{stroke-dashoffset:0}
.circuit-sep circle{opacity:0;transition:opacity .5s ease .9s}
.circuit-sep.in circle{opacity:1}

@media(prefers-reduced-motion:reduce){
  .hero h1,.hero .lede,.hero .hero-cta,.hero-trust{animation:none}
  .circuit-sep path,.circuit-sep line{stroke-dashoffset:0;transition:none}
  .circuit-sep circle{opacity:1;transition:none}
  .svc::after,.price::after,.trust-card::after{transition:none}
}

/* Páginas legales (aviso legal, privacidad, cookies) */
.legal{padding:clamp(2.5rem,6vw,4.5rem) 0}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(1.9rem,4vw,2.7rem);margin:.4rem 0 1.6rem}
.legal-body{color:var(--text);font-size:1.02rem;line-height:1.7}
.legal-body h2{font-size:1.3rem;margin:2.2rem 0 .7rem;color:var(--ink)}
.legal-body h3{font-size:1.08rem;margin:1.4rem 0 .5rem;color:var(--ink)}
.legal-body p{margin:.6rem 0}
.legal-body ul{margin:.6rem 0 .6rem 1.2rem;padding:0}
.legal-body li{margin:.35rem 0}
.legal-body a{color:var(--cyan-ink);text-decoration:underline}
.legal-body table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.94rem}
.legal-body th,.legal-body td{border:1px solid var(--line);padding:.55rem .7rem;text-align:left;vertical-align:top}
.legal-body th{background:var(--paper-2)}
.legal-body .fill{background:#FFF3CD;padding:0 .3rem;border-radius:4px;font-weight:600}
.legal-back{margin-top:2.6rem}
.legal-back a{color:var(--cyan-ink);font-weight:600}

/* Cómo me conecto — instrucciones de conexión remota */
.remote{background:var(--ink);color:#dfeaf1}
.remote .eyebrow{color:var(--cyan)}
.remote h2{color:#fff}
.remote .lede{color:#b7c7d2}
.remote-steps{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem 1.6rem}
.remote-steps li{display:flex;gap:1rem;align-items:flex-start;padding:1.15rem 1.2rem;border:1px solid rgba(0,200,255,.16);border-radius:14px;background:rgba(0,200,255,.045);min-width:0}
.remote-steps .n{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;font-family:var(--font-mono);font-weight:700;color:var(--ink);background:linear-gradient(135deg,var(--cyan),var(--mint));box-shadow:0 0 16px rgba(0,200,255,.5)}
.remote-steps h3{color:#fff;font-size:1.05rem;margin:.15rem 0 .3rem}
.remote-steps p{color:#a9bcc8;font-size:.94rem;line-height:1.45;margin:0}
.remote-cta{margin-top:2.1rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem}
.remote-note{display:inline-flex;align-items:center;gap:.5rem;color:#9fb4c1;font-size:.9rem}
.remote-note svg{width:20px;height:20px;color:var(--mint);flex:0 0 auto}
@media(max-width:760px){.remote-steps{grid-template-columns:1fr}}

/* ============================================================
   BúhoGGOS — mascota guía interactiva (esquina inferior izq.)
   ============================================================ */
#buho{position:fixed;left:1.1rem;bottom:1.1rem;z-index:210;font-family:var(--font-body)}
#buho *{box-sizing:border-box}

.buho-btn{
  position:relative;width:96px;height:96px;padding:0;border:0;cursor:pointer;
  border-radius:50%;background:transparent;overflow:visible;
  animation:buhoFloat 5.5s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent;
}
.buho-disc{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 2px rgba(0,200,255,.55), 0 10px 30px -6px rgba(0,200,255,.45), inset 0 0 22px rgba(0,20,30,.6);
  background:#0a2230;
}
.buho-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.buho-eyes{position:absolute;inset:0;width:100%;height:100%}
.buho-eyes .pupil-grp{transition:transform .12s cubic-bezier(.22,1,.36,1)}
.buho-eyes .eye{transform-box:fill-box;transform-origin:center;transition:transform .09s ease}
.buho-eyes.blink .eye{animation:buhoBlink .28s ease}
/* Aro de neón que respira */
.buho-btn::before{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  border:2px solid rgba(0,200,255,.5);
  box-shadow:0 0 18px rgba(0,200,255,.55), inset 0 0 12px rgba(0,255,200,.35);
  animation:buhoHalo 3.4s ease-in-out infinite;pointer-events:none;
}
/* Anillo giratorio de circuito */
.buho-ring{position:absolute;inset:-13px;border-radius:50%;border:1.5px dashed rgba(0,255,200,.3);animation:spin 22s linear infinite;pointer-events:none}
.buho-btn:hover{animation-play-state:paused}
.buho-btn:hover .buho-disc{box-shadow:0 0 0 2px var(--cyan), 0 12px 34px -4px rgba(0,200,255,.7), inset 0 0 22px rgba(0,20,30,.5)}
.buho-btn:focus-visible{outline:3px solid var(--mint);outline-offset:6px}

/* Etiqueta flotante "pssst" para invitar al clic */
.buho-poke{
  position:absolute;left:104%;bottom:58%;white-space:nowrap;
  background:var(--mint);color:#04241c;font-weight:700;font-size:.74rem;
  padding:.32rem .6rem;border-radius:999px 999px 999px 2px;
  box-shadow:0 6px 16px -6px rgba(0,255,200,.6);
  animation:buhoPoke 4s ease-in-out infinite;pointer-events:none;
}
[data-buho-open="1"] .buho-poke{display:none}

/* Burbujas cómic */
.buho-bubbles{
  position:absolute;left:0;bottom:calc(100% + 14px);width:min(78vw,300px);
  display:flex;flex-direction:column;gap:.5rem;
}
.buho-bubbles[hidden]{display:none}
.buho-say{
  position:relative;background:#fff;color:#12212F;
  padding:.75rem .9rem;border-radius:16px 16px 16px 4px;
  font-size:.92rem;line-height:1.35;font-weight:600;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.45), 0 0 0 1px rgba(0,200,255,.25);
  transform-origin:left bottom;animation:buhoPop .32s cubic-bezier(.18,1.3,.4,1) both;
}
.buho-say::after{content:"";position:absolute;left:16px;bottom:-9px;width:16px;height:16px;background:#fff;clip-path:polygon(0 0,100% 0,0 100%);box-shadow:-2px 2px 3px -2px rgba(0,0,0,.2)}
.buho-say b{color:var(--cyan-ink)}
.buho-menu{display:flex;flex-direction:column;gap:.4rem}
.buho-menu button{
  text-align:left;background:rgba(11,22,34,.92);color:#EAF6FB;border:1px solid rgba(0,200,255,.28);
  padding:.6rem .8rem;border-radius:12px;font-size:.9rem;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:.55rem;
  transform:translateX(-8px);opacity:0;animation:buhoItem .34s cubic-bezier(.2,1,.3,1) forwards;
  transition:border-color .15s,background .15s,transform .12s;
}
.buho-menu button:hover{background:var(--ink-2);border-color:var(--cyan);transform:translateX(2px)}
.buho-menu button:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.buho-menu button .k{font-size:1.05rem;line-height:1}
.buho-menu button:nth-child(1){animation-delay:.04s}
.buho-menu button:nth-child(2){animation-delay:.09s}
.buho-menu button:nth-child(3){animation-delay:.14s}
.buho-menu button:nth-child(4){animation-delay:.19s}
.buho-menu button:nth-child(5){animation-delay:.24s}
.buho-menu button:nth-child(6){animation-delay:.29s}
.buho-menu button:nth-child(7){animation-delay:.34s}

@keyframes buhoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes buhoHalo{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@keyframes buhoBlink{0%,100%{transform:scaleY(1)}45%,55%{transform:scaleY(.08)}}
@keyframes buhoPop{from{opacity:0;transform:scale(.6) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes buhoItem{to{opacity:1;transform:translateX(0)}}
@keyframes buhoPoke{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(-4px);opacity:1}}

@media(max-width:640px){
  #buho{left:.7rem;bottom:.7rem}
  .buho-btn{width:66px;height:66px}
  .buho-bubbles{width:min(72vw,260px);bottom:calc(100% + 10px)}
  .buho-say{font-size:.86rem}
  .buho-menu button{font-size:.85rem;padding:.5rem .7rem}
}
@media(prefers-reduced-motion:reduce){
  .buho-btn,.buho-btn::before,.buho-ring,.buho-poke{animation:none}
  .buho-say,.buho-menu button{animation-duration:.01ms}
  .buho-eyes .pupil-grp{transition:none}
}

/* ============================================================
   FX v1.5 — una firma de animación por sección
   ============================================================ */

/* 0 · El fondo interactivo SIEMPRE queda detrás del contenido */
section>.wrap,.circuit-sep,footer.site .wrap{position:relative;z-index:10}

/* 1 · HERO — eyebrow terminal con cursor */
#heroEyebrow::after{content:"▊";margin-left:3px;color:var(--mint);animation:curBlink 1.05s steps(1) infinite}
@keyframes curBlink{50%{opacity:0}}

/* 2 · KPIs — río binario de fondo */
.kpis{position:relative;overflow:hidden}
.kpis::before,.kpis::after{
  content:"01000111 01000111 01001111 01010011 00100000 01110011 01101111 01110000 01101111 01110010 01110100 01100101 00100000 01110010 01100101 01101101 01101111 01110100 01101111 00100000 01000111 01000111 01001111 01010011 00100000 01110011 01101111 01110000 01101111 01110010 01110100 01100101 00100000 01110010 01100101 01101101 01101111 01110100 01101111 00100000 01000111 01000111 01001111 01010011 00100000 01110011 01101111 01110000 01101111 01110010 01110100 01100101 00100000 01110010 01100101 01101101 01101111 01110100 01101111";
  position:absolute;left:0;white-space:nowrap;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.4em;color:rgba(0,200,255,.08);pointer-events:none}
.kpis::before{top:.5rem;animation:binDrift 70s linear infinite}
.kpis::after{bottom:.5rem;color:rgba(0,255,200,.07);animation:binDrift 95s linear infinite reverse}
@keyframes binDrift{to{transform:translateX(-50%)}}

/* 3 · CÓMO — paquete de datos viajando 1→2→3, tarjetas que se encienden a su paso */
.flowline{position:relative;height:34px;margin:2.4rem 0 -1.2rem;z-index:10}
.flowline .rail{position:absolute;left:6%;right:6%;top:50%;height:2px;background:linear-gradient(90deg,transparent,rgba(0,200,255,.4) 10%,rgba(0,200,255,.4) 90%,transparent)}
.flowline .node{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:var(--paper);border:2px solid var(--cyan);box-shadow:0 0 10px rgba(0,200,255,.4)}
.flowline .n1{left:16.66%}.flowline .n2{left:50%}.flowline .n3{left:83.33%}
.flowline .pkt{position:absolute;top:50%;left:16.66%;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);background:var(--mint);box-shadow:0 0 16px var(--mint);animation:pktRun 6s cubic-bezier(.6,.05,.4,.95) infinite}
@keyframes pktRun{0%{left:16.66%;opacity:0}5%{opacity:1}8%{left:16.66%}30%,40%{left:50%}62%,72%{left:83.33%}92%{left:83.33%;opacity:1}100%{left:83.33%;opacity:0}}
@media(max-width:820px){.flowline{display:none}}
.steps .step{animation:stepIgnite 6s infinite}
.steps .step:nth-child(2){animation-delay:1.9s}
.steps .step:nth-child(3){animation-delay:3.8s}
@keyframes stepIgnite{0%,3%{border-color:var(--line);box-shadow:none}8%,14%{border-color:var(--cyan);box-shadow:0 14px 34px -16px rgba(0,200,255,.55)}22%,100%{border-color:var(--line);box-shadow:none}}

/* 4 · PRIVACIDAD — OTP vivo con cuenta atrás */
.otp{position:relative}
.otp-timer{position:absolute;top:1.15rem;right:1.15rem;width:42px;height:42px}
.otp-timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.otp-timer .tbg{fill:none;stroke:rgba(0,200,255,.16);stroke-width:3}
.otp-timer .tfg{fill:none;stroke:var(--mint);stroke-width:3;stroke-linecap:round;stroke-dasharray:100.53;stroke-dashoffset:0;filter:drop-shadow(0 0 4px rgba(0,255,200,.55));transition:stroke-dashoffset .12s linear}
.otp-timer .tsec{position:absolute;inset:0;display:grid;place-items:center;font-size:.66rem;color:var(--mint);font-family:var(--font-mono);transform:none}
.otp .row span:last-child{margin-right:52px}
.otp .code.regen{animation:otpFlash .55s ease}
@keyframes otpFlash{0%{color:var(--mint);text-shadow:0 0 36px rgba(0,255,200,.9)}100%{}}

/* 5 · REMOTO — terminal que teclea la sesión */
.rterm{position:relative;z-index:10;margin-top:1.6rem;display:block;max-width:560px;background:#060f16;border:1px solid rgba(0,200,255,.25);border-radius:12px;padding:.85rem 1.05rem 1rem;font-family:var(--font-mono);font-size:.88rem;line-height:1.6;color:#9fe3c9;box-shadow:0 12px 34px -16px rgba(0,0,0,.65),inset 0 0 34px rgba(0,200,255,.045)}
.rterm .rt-bar{display:block;color:#557085;font-size:.7rem;letter-spacing:.06em;margin-bottom:.55rem;border-bottom:1px solid rgba(0,200,255,.12);padding-bottom:.45rem}
.rterm .tt{display:block;min-height:4.8em;white-space:pre-wrap;overflow-wrap:anywhere}
.rterm .cur{color:var(--mint);animation:curBlink 1s steps(1) infinite}

/* 6 · SERVICIOS — tilt 3D + iconos que respiran */
.svc-grid{perspective:900px}
.svc{will-change:transform}
.svc .ic svg{animation:icBreathe 4.6s ease-in-out infinite}
.svc:nth-child(2) .ic svg{animation-delay:.5s}
.svc:nth-child(3) .ic svg{animation-delay:1s}
.svc:nth-child(4) .ic svg{animation-delay:1.5s}
.svc:nth-child(5) .ic svg{animation-delay:2s}
.svc:nth-child(6) .ic svg{animation-delay:2.5s}
.svc:nth-child(7) .ic svg{animation-delay:3s}
.svc:nth-child(8) .ic svg{animation-delay:3.5s}
@keyframes icBreathe{50%{transform:translateY(-3px) scale(1.06)}}

/* 7 · Separador de circuito — paquetes recorriéndolo */
.circuit-sep .pkt{filter:drop-shadow(0 0 6px currentColor)}

/* 8 · PARA QUIÉN — cartas repartidas + foco que sigue al cursor */
.aud-card{position:relative;overflow:hidden}
.aud-card.reveal{transform:translateY(34px) rotate(-2.5deg) scale(.97)}
.aud-card.reveal:nth-child(2){transform:translateY(34px) scale(.97)}
.aud-card.reveal:nth-child(3){transform:translateY(34px) rotate(2.5deg) scale(.97)}
.aud-card.reveal.in{transform:none}
.aud-card::after{content:"";position:absolute;inset:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(0,200,255,.13),transparent 65%);opacity:0;transition:opacity .3s;pointer-events:none}
.aud-card:hover::after{opacity:1}

/* 9 · PRECIOS — borde de energía girando en el destacado + tachado que se dibuja */
@property --ga{syntax:'<angle>';initial-value:0deg;inherits:false}
.price.feat{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--ga),var(--cyan),var(--mint) 30%,rgba(0,200,255,.12) 55%,var(--mint) 78%,var(--cyan)) border-box;animation:gaSpin 5s linear infinite;box-shadow:0 18px 44px -18px rgba(0,200,255,.5)}
@keyframes gaSpin{to{--ga:360deg}}
.price .was s{text-decoration:none;position:relative;display:inline-block}
.price .was s::after{content:"";position:absolute;left:0;top:52%;height:2px;width:0;background:var(--coral);transition:width .55s ease .9s}
.price.in .was s::after{width:100%}

/* 10 · POR QUÉ GGOS — radar de vigilancia */
.trust{position:relative;overflow:hidden}
.trust::before{content:"";position:absolute;right:-16vmin;top:50%;translate:0 -50%;width:72vmin;height:72vmin;border-radius:50%;background:repeating-radial-gradient(circle at center,rgba(0,200,255,.1) 0 1.5px,transparent 1.5px 17%);-webkit-mask-image:radial-gradient(circle,#000 32%,transparent 72%);mask-image:radial-gradient(circle,#000 32%,transparent 72%);pointer-events:none}
.trust::after{content:"";position:absolute;right:-16vmin;top:50%;translate:0 -50%;width:72vmin;height:72vmin;border-radius:50%;background:conic-gradient(from 0deg,rgba(0,255,200,.18),transparent 55deg);animation:spin 6s linear infinite;-webkit-mask-image:radial-gradient(circle,#000 32%,transparent 72%);mask-image:radial-gradient(circle,#000 32%,transparent 72%);pointer-events:none}

/* 11 · FAQ — índice mono + acento que se dibuja al abrir */
.faq-list{counter-reset:faq}
.faq-q{counter-increment:faq}
.faq-q::before{content:"0" counter(faq);font-family:var(--font-mono);font-weight:500;font-size:.8rem;color:var(--cyan-ink);margin-right:.95rem;letter-spacing:.08em}
.faq-item.open .faq-q{color:var(--cyan-ink)}
.faq-a p{position:relative;padding-left:1.15rem}
.faq-a p::before{content:"";position:absolute;left:0;top:.25rem;bottom:.45rem;width:2px;background:linear-gradient(var(--cyan),var(--mint));transform:scaleY(0);transform-origin:top;transition:transform .5s ease .12s}
.faq-item.open .faq-a p::before{transform:scaleY(1)}

/* 12 · CTA FINAL — baliza sonar + glitch en el número */
.final .btn-wa{position:relative}
.sonar{position:absolute;inset:0;border-radius:999px;border:2px solid rgba(37,211,102,.6);animation:sonarPing 2.6s ease-out infinite;pointer-events:none}
.sonar.s2{animation-delay:1.3s;border-color:rgba(0,255,200,.55)}
@keyframes sonarPing{from{transform:scale(1);opacity:.9}to{transform:scale(1.6);opacity:0}}
.final .num a:hover{animation:numGlitch .32s steps(2) 2;text-decoration:none}
@keyframes numGlitch{25%{text-shadow:-2px 0 #ff3860,2px 0 var(--cyan)}75%{text-shadow:2px 0 #ff3860,-2px 0 var(--mint)}}

/* 13 · FOOTER — la marca se dibuja sola + estado del sistema */
.foot-brand svg path{stroke-dasharray:1;stroke-dashoffset:1}
.foot-brand.in svg path{animation:drawMark 1.3s ease forwards}
.foot-brand.in svg path:nth-of-type(2){animation-delay:.85s}
@keyframes drawMark{to{stroke-dashoffset:0}}
.foot-brand svg circle{opacity:0;transition:opacity .4s ease 1.5s}
.foot-brand.in svg circle{opacity:1}
.sysok{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono)}
.sysok .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:dotBlink 2.2s ease-in-out infinite}
@keyframes dotBlink{50%{opacity:.2}}

/* 14 · NAV — letras que ruedan al hover (nicocherubin style) */
.nav-links a .lw{display:inline-block;position:relative;overflow:hidden;vertical-align:top}
.nav-links a .lw i{display:block;font-style:normal;transition:transform .34s cubic-bezier(.2,.9,.3,1.25);transition-delay:var(--d,0s)}
.nav-links a .lw i.b{position:absolute;left:0;top:100%;color:var(--cyan-ink)}
.nav-links a:hover .lw i{transform:translateY(-100%)}

/* 16 · Retícula HUD — sigue al cursor y fija los interactivos */
#hud{position:fixed;left:0;top:0;width:34px;height:34px;z-index:9990;pointer-events:none;opacity:.85;will-change:transform,width,height}
#hud i{position:absolute;width:9px;height:9px;border:2px solid rgba(0,200,255,.8);transition:border-color .2s}
#hud i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
#hud i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
#hud i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
#hud i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
#hud::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;background:rgba(0,200,255,.9);border-radius:50%;transform:translate(-50%,-50%);transition:background .2s}
#hud.lock i{border-color:var(--mint)}
#hud.lock::after{background:var(--mint)}
@media(pointer:coarse){#hud{display:none}}

/* 15 · TÍTULOS — palabras que emergen con máscara */
h2 .wm{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
h2 .wm .wi{display:inline-block;transform:translateY(118%) rotate(2deg);transition:transform .72s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
h2.in .wm .wi{transform:none}

@media(prefers-reduced-motion:reduce){
  #heroEyebrow::after,.rterm .cur,.kpis::before,.kpis::after,.flowline .pkt,.steps .step,.svc .ic svg,.price.feat,.trust::after,.sonar,.sysok .dot,.hero h1 .hl{animation:none}
  .aud-card.reveal{transform:none}
  h2 .wm .wi{transform:none;transition:none}
  .price .was s::after{width:100%;transition:none}
  .foot-brand svg path{stroke-dashoffset:0;animation:none}
  .foot-brand svg circle{opacity:1;transition:none}
  .nav-links a .lw i{transition:none}
}

/* ── Landings SEO (páginas de dinero: Burgos, mayores, negocios…) ── */
.lp-hero{padding:64px 0 20px}
.lp-hero .eyebrow{margin-bottom:.5rem}
.lp-hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,5vw,3.1rem);line-height:1.05;letter-spacing:-.02em;color:var(--ink);max-width:16ch}
.lp-sub{font-size:1.18rem;color:var(--text-soft);max-width:60ch;margin-top:1rem}
.lp-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.lp-body{padding:20px 0 40px}
.lp-content{max-width:760px;font-size:1.06rem;line-height:1.7;color:var(--text)}
.lp-content h2{font-family:var(--font-display);font-weight:700;font-size:1.7rem;letter-spacing:-.01em;color:var(--ink);margin:2.2rem 0 .8rem}
.lp-content h3{font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--ink-2);margin:1.6rem 0 .5rem}
.lp-content p{margin:.7rem 0}
.lp-content ul,.lp-content ol{margin:.7rem 0 .7rem 1.2rem;display:flex;flex-direction:column;gap:.4rem}
.lp-content li{padding-left:.2rem}
.lp-content a{color:var(--cyan-ink);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.lp-content strong{color:var(--ink)}
.lp-content .lp-price{display:inline-block;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:.15rem .6rem;font-family:var(--font-mono);font-weight:700;color:var(--cyan-ink)}
.lp-back{margin-top:1.6rem}
.lp-back a{color:var(--text-soft);font-weight:500}
@media(max-width:640px){.lp-hero{padding:44px 0 12px}}

/* ── Blog (índice + artículo) ── */
.post-meta{font-family:var(--font-mono);font-size:.82rem;color:var(--text-soft);margin-top:.6rem;letter-spacing:.02em}
.post-meta a{color:var(--cyan-ink)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem}
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.post-card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(11,22,34,.06),0 20px 40px -18px rgba(11,22,34,.28)}
.post-card-cat{align-self:flex-start;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--cyan-ink);background:var(--paper-2);border-radius:6px;padding:.2rem .5rem}
.post-card h2{font-family:var(--font-display);font-weight:700;font-size:1.22rem;line-height:1.2;letter-spacing:-.01em}
.post-card h2 a{color:var(--ink)}
.post-card h2 a:hover{color:var(--cyan-ink);text-decoration:none}
.post-card-ex{font-size:.98rem;color:var(--text-soft);line-height:1.55;margin:0}
.post-card-more{margin-top:auto;font-weight:600;color:var(--cyan-ink);font-size:.95rem}
.blog-nav{margin-top:2.4rem}
.blog-nav .nav-links,.blog-nav .page-numbers{display:inline-flex;gap:.5rem;flex-wrap:wrap;list-style:none;padding:0}
.blog-nav a,.blog-nav .page-numbers{color:var(--cyan-ink);font-weight:600;padding:.4rem .8rem;border:1px solid var(--line);border-radius:8px}
.blog-nav .current{background:var(--ink);color:var(--paper);border-color:var(--ink)}