/* ── "One layer" marketing components ─────────────────────────────────
   Shared by /, /features/ and /pricing/. Built only on the canonical --vx-*
   tokens (vilkax-tokens.css) and the nexus.css scene grammar, so every block
   inherits both themes. Every grid collapses to one column under 640px and
   nothing here sets a fixed width, so 375px never scrolls sideways. */

/* status chips: the only vocabulary this site uses for readiness */
.ly-st{display:inline-flex;align-items:center;gap:6px;font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;border:1px solid var(--vx-line-2);color:var(--vx-text-muted);white-space:nowrap;vertical-align:middle}
.ly-st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.ly-st.live{color:var(--vx-mint-br);border-color:var(--vx-mint-ln);background:var(--vx-mint-sf)}
.ly-st.pilot{color:var(--vx-blue-br);border-color:var(--vx-blue-ln);background:var(--vx-blue-sf)}
.ly-st.build{color:var(--vx-text-muted);border-style:dashed}
.ly-st.live::before{box-shadow:0 0 8px var(--vx-mint)}

/* what it protects: devices, people, things, places */
.ly-pillars{list-style:none;padding:0;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:1140px;margin:30px auto 0}
.ly-pillar{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:18px;border:1px solid var(--vx-line);text-align:left;
  background:linear-gradient(165deg,color-mix(in srgb,var(--vx-surface-2) 70%,transparent),color-mix(in srgb,var(--vx-surface-1) 40%,transparent))}
.ly-pillar .ic{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--hero-sf);border:1px solid var(--hero-ln);color:var(--hero-br)}
.ly-pillar .ic .icon{width:18px;height:18px}
.ly-pillar b{display:block;font-family:var(--vx-f-disp);font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--vx-text)}
.ly-pillar p{margin:5px 0 0;font-size:13px;line-height:1.55;color:var(--vx-text-dim)}
.v3-head.ly-moments-head{margin-top:72px}
@media (max-width:1080px){.ly-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ly-pillars{grid-template-columns:minmax(0,1fr)}.v3-head.ly-moments-head{margin-top:52px}}
[data-theme="light"] .ly-pillar{background:var(--vx-surface-1);box-shadow:var(--vx-shadow-1)}

/* five irreversible moments */
.ly-moments{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;width:100%;max-width:1140px;margin:34px auto 0}
.ly-moment{position:relative;padding:20px 18px 18px;border-radius:18px;border:1px solid var(--vx-line);
  background:linear-gradient(165deg,color-mix(in srgb,var(--vx-surface-2) 70%,transparent),color-mix(in srgb,var(--vx-surface-1) 40%,transparent));
  transition:transform .3s var(--vx-ease),border-color .3s var(--vx-ease);text-align:left}
.ly-moment:hover{transform:translateY(-4px);border-color:var(--hero-ln)}
.ly-moment .n{font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.14em;color:var(--hero-br)}
.ly-moment .ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;margin-top:12px;background:var(--hero-sf);border:1px solid var(--hero-ln);color:var(--hero-br)}
.ly-moment .ic .icon{width:18px;height:18px}
.ly-moment b{display:block;font-family:var(--vx-f-disp);font-weight:600;font-size:16px;letter-spacing:-.01em;margin-top:14px;color:var(--vx-text)}
.ly-moment span{display:block;font-size:12.5px;line-height:1.55;color:var(--vx-text-dim);margin-top:6px}

/* situations: rendered as the card the user will actually see */
.ly-sits{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:1140px;margin:38px auto 0}
.ly-sit{border-radius:20px;border:1px solid var(--vx-line);overflow:hidden;
  background:linear-gradient(165deg,color-mix(in srgb,var(--vx-surface-2) 70%,transparent),color-mix(in srgb,var(--vx-surface-1) 40%,transparent));
  transition:transform .3s var(--vx-ease),border-color .3s var(--vx-ease)}
.ly-sit:hover{transform:translateY(-4px);border-color:var(--hero-ln)}
.ly-sit .k{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--vx-line);font-family:var(--vx-f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--vx-text-dim)}
.ly-sit .k .dt{width:7px;height:7px;border-radius:50%;background:var(--hero-br);box-shadow:0 0 10px var(--hero-glow);flex:none}
.ly-sit .k .ly-st{margin-left:auto}
.ly-sit .card{margin:16px 18px 0;padding:14px 16px;border-radius:14px;border:1px solid var(--hero-ln);background:var(--hero-sf)}
.ly-sit .card b{display:block;font-family:var(--vx-f-disp);font-weight:600;font-size:15.5px;color:var(--vx-text)}
.ly-sit .card p{margin:6px 0 0;font-size:13.5px;line-height:1.6;color:var(--vx-text-muted)}
.ly-sit .armed{display:flex;gap:9px;align-items:flex-start;padding:14px 18px 18px;font-size:12.5px;line-height:1.55;color:var(--vx-text-dim)}
.ly-sit .armed .icon{width:15px;height:15px;flex:none;margin-top:2px;color:var(--vx-mint-br)}
.ly-sit .armed b{color:var(--vx-text-muted);font-weight:600}

/* section header with a status chip beside the eyebrow */
.ly-eye{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ly-eye.center{justify-content:center}

/* "what's inside" groups */
.ly-group{max-width:1140px;margin:36px auto 0}
.ly-group-h{display:flex;align-items:center;gap:14px;font-family:var(--vx-f-disp);font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--vx-text)}
.ly-group-h::after{content:"";flex:1;height:1px;background:var(--vx-line)}
.ly-group-h small{font-family:var(--vx-f-body);font-weight:400;font-size:13px;color:var(--vx-text-dim)}
.ly-group .lx-suite{margin-top:16px}
.lx-card .ly-st{position:absolute;top:18px;right:18px}
.lx-card .lx-tier{top:auto;bottom:16px;right:18px}
.lx-card.has-tier{padding-bottom:44px}
.lx-card .ic .icon{color:currentColor}

/* recover steps: a caveat line under the ladder */
.ly-caveat{max-width:70ch;margin:20px auto 0;text-align:center;font-size:13px;line-height:1.6;color:var(--vx-text-dim)}

/* pricing: tiers by outcome */
.ly-outs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1140px;margin:36px auto 0}
.ly-out{position:relative;padding:24px 22px;border-radius:20px;border:1px solid var(--vx-line);display:flex;flex-direction:column;
  background:linear-gradient(165deg,color-mix(in srgb,var(--vx-surface-2) 70%,transparent),color-mix(in srgb,var(--vx-surface-1) 40%,transparent));
  transition:transform .3s var(--vx-ease),border-color .3s var(--vx-ease)}
.ly-out:hover{transform:translateY(-4px);border-color:var(--hero-ln)}
.ly-out.hi{border-color:var(--hero-ln);box-shadow:0 30px 60px -40px var(--hero-glow)}
.ly-out .plan{font-family:var(--vx-f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--vx-text-dim)}
.ly-out .plan b{color:var(--hero-br);font-weight:600}
.ly-out h3{font-family:var(--vx-f-disp);font-weight:600;font-size:clamp(20px,2vw,24px);letter-spacing:-.02em;line-height:1.15;margin-top:10px;color:var(--vx-text)}
.ly-out .who{font-size:13.5px;line-height:1.6;color:var(--vx-text-muted);margin-top:8px}
.ly-out ul{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--vx-line);display:flex;flex-direction:column;gap:9px}
.ly-out li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--vx-text-muted)}
.ly-out li .icon{width:15px;height:15px;flex:none;margin-top:2px;color:var(--vx-mint-br)}
.ly-out li .ly-st{margin-left:4px;font-size:9px;padding:1px 7px}
.ly-out .plus{font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--vx-text-dim);margin-top:16px}

/* Headline colours that the shared components inherit from the dark body
   text: pinned to the token so they read on the light theme as well. */
.pillar-card .pc-t,.stakes-quote,.pv-t,.lx-steps b,.cat-band .cl{color:var(--vx-text)}

/* light theme: opaque panels carry the same shadow the rest of the page uses */
[data-theme="light"] .ly-moment,[data-theme="light"] .ly-sit,[data-theme="light"] .ly-out{background:var(--vx-surface-1);box-shadow:var(--vx-shadow-1)}
[data-theme="light"] .ly-sit .k{background:var(--vx-surface-2)}

@media (max-width:1080px){
  .ly-moments{grid-template-columns:repeat(3,1fr)}
  .ly-outs{grid-template-columns:1fr;max-width:640px}
}
@media (max-width:760px){
  .ly-moments{grid-template-columns:repeat(2,1fr)}
  .ly-sits{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ly-moments{grid-template-columns:1fr;gap:10px;margin-top:26px}
  .ly-moment{padding:16px 16px 14px}
  .ly-sit .k{flex-wrap:wrap;padding:11px 14px}
  .ly-sit .card{margin:14px 14px 0}
  .ly-sit .armed{padding:12px 14px 16px}
  .ly-group-h{font-size:16px;flex-wrap:wrap}
  .ly-group-h small{width:100%;order:3}
  .ly-out{padding:20px 18px}
  .ly-st{white-space:normal}
}

/* ── Landing v3 (2026-10-28): the decluttered home + the pricing buy switch ──
   Tokens only, so light/dark follow vilkax-tokens.css. Mobile-first checks at
   360px: every grid collapses to one column and nothing sets a fixed width. */
.lx-anchor{display:block;position:relative;top:-80px;height:0;width:0;overflow:hidden;visibility:hidden}
.v3-head{text-align:center;max-width:60ch;margin:0 auto}
.v3-head .eyebrow{justify-content:center}
.v3-head .big-title{font-size:clamp(28px,4.2vw,52px)}
.v3-head .lead{margin:16px auto 0}
.v3-grid{display:grid;gap:14px;max-width:1140px;margin:34px auto 0;grid-template-columns:repeat(4,minmax(0,1fr))}
.v3-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.v3-card{position:relative;padding:22px 20px;border-radius:18px;border:1px solid var(--vx-line);
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));min-width:0;transition:.3s var(--vx-ease)}
.v3-card:hover{border-color:var(--hero-ln)}
.v3-card .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--hero-sf);border:1px solid var(--hero-ln);color:var(--hero-br)}
.v3-card .ic .icon{width:19px;height:19px}
.v3-card b{display:block;font-family:var(--vx-f-disp);font-weight:600;font-size:16px;letter-spacing:-.01em;margin-top:14px;color:var(--vx-text)}
.v3-card p{font-size:13.5px;line-height:1.6;color:var(--vx-text-muted);margin:6px 0 0}
.v3-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:center;max-width:1140px;margin:34px auto 0}
.v3-split .v3-grid{margin:0;grid-template-columns:repeat(2,minmax(0,1fr))}
.v3-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.v3-link{color:var(--hero-br);text-decoration:underline;text-underline-offset:3px}
.v3-note{text-align:center;font-size:13px;color:var(--vx-text-dim);max-width:70ch;margin:18px auto 0;line-height:1.6}
/* apps: compact chips instead of 22 feature cards */
.v3-apps{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:980px;margin:28px auto 0;padding:0;list-style:none}
.v3-apps li{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--vx-line-2);
  background:var(--vx-surface-2);font-size:13.5px;color:var(--vx-text);min-width:0}
.v3-apps .icon{width:16px;height:16px;color:var(--hero-br);flex:none}
/* VPN */
.v3-vpn{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center}
.v3-vpn .big-title{font-size:clamp(28px,4.2vw,52px)}
.v3-vpn-card{padding:26px 24px;border-radius:22px;border:1px solid var(--vx-mint-ln);background:var(--vx-surface-1);box-shadow:var(--vx-shadow-1,none)}
.v3-vpn-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.v3-vpn-top b{font-family:var(--vx-f-disp);font-size:18px;color:var(--vx-text)}
.v3-switch{width:52px;height:30px;border-radius:999px;background:var(--vx-mint);position:relative;flex:none}
.v3-switch::after{content:"";position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;background:#fff}
.v3-vpn-card ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
.v3-vpn-card li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.55;color:var(--vx-text-muted)}
.v3-vpn-card li .icon{width:18px;height:18px;color:var(--vx-mint-br);flex:none;margin-top:2px}
.v3-vpn-card li b{color:var(--vx-text);font-weight:600}
.v3-pill{display:inline-block;margin-top:16px;padding:6px 12px;border-radius:999px;font-family:var(--vx-f-mono);font-size:11px;letter-spacing:.05em;
  background:var(--vx-mint-sf);border:1px solid var(--vx-mint-ln);color:var(--vx-text)}
/* pricing teaser */
.v3-plan{display:flex;flex-direction:column}
.v3-plan .plan{font-family:var(--vx-f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--hero-br)}
.v3-plan h3{font-family:var(--vx-f-disp);font-size:19px;margin:10px 0 0;color:var(--vx-text);letter-spacing:-.01em}
.v3-plan .price{font-size:14px;color:var(--vx-text-muted);margin-top:6px}
.v3-plan .vpnl{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--vx-text-muted);margin-top:14px}
.v3-plan .vpnl .icon{width:16px;height:16px;color:var(--vx-mint-br);flex:none;margin-top:2px}
.v3-plan.hi{border-color:var(--hero-ln);background:var(--hero-sf)}
.v3-biz{max-width:760px;margin:42px auto 0;padding:20px 22px;border-radius:18px;border:1px solid var(--vx-line);display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;text-align:start}
.v3-biz p{margin:4px 0 0;font-size:13.5px;color:var(--vx-text-muted);line-height:1.55}
.v3-biz b{font-family:var(--vx-f-disp);color:var(--vx-text)}
[data-theme="light"] .v3-card,[data-theme="light"] .v3-biz{background:var(--vx-surface-1);box-shadow:var(--vx-shadow-1)}
[data-theme="light"] .v3-plan.hi{background:var(--vx-surface-1);border-color:var(--hero-ln)}
/* pricing: Subscribe for me / Give as a gift */
.pr-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:560px;margin:26px auto 0;padding:6px;border-radius:18px;border:1px solid var(--vx-line-2);background:var(--vx-surface-1)}
.pr-mode button{appearance:none;border:1px solid transparent;background:transparent;border-radius:13px;padding:12px 14px;cursor:pointer;color:var(--vx-text-muted);
  font:600 15px/1.3 var(--vx-f-disp);display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;transition:.2s var(--vx-ease)}
.pr-mode button small{font:500 12px/1.4 var(--vx-f-body,inherit);color:var(--vx-text-dim)}
.pr-mode button[aria-selected="true"]{background:var(--vx-accent-sf);border-color:var(--vx-accent-ln);color:var(--vx-text)}
.pr-mode button:focus-visible{outline:2px solid var(--vx-accent-br);outline-offset:2px}
.pr-mode-note{text-align:center;font-size:13px;color:var(--vx-text-dim);max-width:62ch;margin:12px auto 0;line-height:1.55}
.pr-gift{padding-top:28px;padding-bottom:0;max-width:1040px}
.pr-status{max-width:560px;margin:16px auto 0;text-align:center;border:1px solid var(--vx-line-2)}
.pr-status[data-kind="error"]{background:var(--vx-sev-high-sf);border-color:var(--vx-sev-high-ln)}
.pr-mode [hidden],[role="tabpanel"][hidden]{display:none!important}
@media (max-width:1080px){.v3-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v3-grid.c3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){.v3-split,.v3-vpn{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.v3-grid,.v3-split .v3-grid{grid-template-columns:minmax(0,1fr)}.pr-mode button{padding:10px 8px;font-size:14px}.v3-biz{flex-direction:column;align-items:flex-start}}
/* Header wordmark: the same canonical .vx-wm text lockup as the hero (bold
   Montserrat, per-letter silver to violet fill), only smaller. On the light
   theme it sits on its own small dark plate (launch.css) instead of being
   recoloured. */
.topbar .tb-brand{background:transparent;box-shadow:none}
.topbar .tb-brand .vx-stage.bare{padding:4px 2px}
[data-theme="light"] .topbar .tb-brand .vx-stage.bare{padding:6px 8px;border-radius:8px}
/* Header CTA at the normal button size (long strings like "Prueba gratis" no longer inflate it). */
.topbar .tb-right .btn.primary{padding:8px 14px;font-size:13.5px;min-height:36px;line-height:1.2;white-space:nowrap;border-radius:10px}
.topbar .tb-right .btn.primary .icon{width:14px;height:14px}
@media (max-width:560px){.topbar .tb-right .btn.primary{padding:7px 11px;font-size:12.5px;min-height:34px}.topbar .tb-right .btn.primary .icon{display:none}}