/* ==========================================================================
   Veirax Web · vx-core.css
   CSS común a todas las páginas del rediseño (demo y, más adelante, veiraxweb.com).
   - Contenido de cada página: clase raíz .vx más la suya (.vx-hosting, .vx-seo...).
   - Cabecera y pie: .vx-header y .vx-footer (fuera del contenido).
   Ningún selector global: no choca con Divi ni con el tema.
   El CSS de la escena de cada página va en su propio <style>, después de este fichero.
   ========================================================================== */

/* Fuentes alojadas en el propio servidor (RGPD): fuentes variables, solo latín */
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/outfit.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/source-sans-3.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/source-sans-3-italic.woff2) format('woff2')}

/* ==========================================================================
   1. Base de las landings: tokens, estructura, tipografía, botones y componentes
      del esqueleto de 7 actos (riesgos, giro, pasos, prueba, FAQ, cierre, CTA fijo)
   ========================================================================== */
.vx{--vx-grafito:#232424; --vx-grafito-2:#1b1c1c; --vx-negro:#000000; --vx-blanco:#ffffff; --vx-cian:#009fe3; --vx-cian-hover:#33b2eb; --vx-petroleo:#02485b; --vx-hielo:#eaf6fc; --vx-azul-txt:#0071a5; --vx-muted-dk:#b9bebe; --vx-muted-lt:#4a5558; --vx-display:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif; --vx-body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif; --vx-ease:cubic-bezier(.2,.7,.2,1); --fg:var(--vx-blanco); --fg-muted:var(--vx-muted-dk); --line:rgba(255,255,255,.16); --focus:var(--vx-cian); font-family:var(--vx-body); font-size:1.125rem; line-height:1.6; color:var(--fg); background:var(--vx-grafito); overflow-x:clip; -webkit-font-smoothing:antialiased;}
.vx *,.vx *::before,.vx *::after{box-sizing:border-box}
.vx :where(h1,h2,h3,p,ul,ol,figure,blockquote){margin:0;padding:0}
.vx :where(ul,ol){list-style:none}
.vx [hidden]{display:none!important}
.vx :where(img,svg){display:block;max-width:100%}
.vx :where(a){color:inherit}
.vx :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.vx .vx-wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:clamp(16px,5vw,56px)}
.vx .vx-sec{padding-block:clamp(64px,9vw,120px);color:var(--fg)}
.vx .vx-dark{background:var(--vx-grafito)}
.vx .vx-deep{background:var(--vx-grafito-2)}
.vx .vx-petrol{background:var(--vx-petroleo)}
.vx .vx-white,.vx .vx-ice{--fg:var(--vx-grafito);--fg-muted:var(--vx-muted-lt);--line:rgba(35,36,36,.16);--focus:var(--vx-azul-txt)}
.vx .vx-white{background:var(--vx-blanco)}
.vx .vx-ice{background:var(--vx-hielo)}
.vx .vx-head{display:grid;gap:16px;margin-bottom:clamp(32px,5vw,64px)}
.vx .vx-h1{font:700 clamp(2.4rem,1.2rem + 5vw,4.5rem)/1.04 var(--vx-display);letter-spacing:-.02em;text-wrap:balance}
.vx .vx-h2{font:600 clamp(1.85rem,1.1rem + 2.6vw,3rem)/1.1 var(--vx-display);letter-spacing:-.015em;text-wrap:balance}
.vx .vx-h3{font:600 1.25rem/1.25 var(--vx-display)}
.vx .vx-lead{font-size:clamp(1.125rem,1rem + .5vw,1.35rem);color:var(--fg-muted);max-width:60ch}
.vx .vx-p{color:var(--fg-muted);max-width:62ch}
.vx .vx-fine{font-size:.95rem;color:var(--fg-muted)}
.vx .vx-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.7rem 1.35rem;border-radius:999px;border:2px solid transparent;font:600 1rem/1.1 var(--vx-display);text-decoration:none;cursor:pointer;transition:transform .25s var(--vx-ease),background-color .25s,border-color .25s,color .25s}
.vx .vx-btn--cian{background:var(--vx-azul-txt);color:var(--vx-blanco)}
.vx .vx-btn--cian:hover{background:#005f8c;transform:translateY(-2px)}
.vx .vx-btn--line{border-color:currentColor;color:var(--fg)}
.vx .vx-btn--line:hover{background:rgba(255,255,255,.1)}
.vx .vx-white .vx-btn--line:hover,.vx .vx-ice .vx-btn--line:hover{background:rgba(35,36,36,.07)}
.vx .vx-btn--dark{background:var(--vx-grafito);color:var(--vx-blanco)}
.vx .vx-btn--dark:hover{background:var(--vx-petroleo);transform:translateY(-2px)}
.vx .vx-btn--sm{min-height:40px;padding:.5rem 1.05rem;font-size:.95rem}
.vx .vx-actions{display:flex;flex-wrap:wrap;gap:12px}
.vx .vx-note button{font:inherit;background:var(--vx-negro);color:var(--vx-blanco);border:0;border-radius:6px;padding:8px 12px;min-height:36px;cursor:pointer}
.vx .vx-ej{position:relative}
.vx .vx-progress{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:4px;z-index:50;background:rgba(255,255,255,.12)}
.vx .vx-progress span{display:block;height:100%;transform:scaleX(0);transform-origin:left;background:var(--vx-acc)}
.vx .vx-depth{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;padding:9px 14px;border-radius:999px;background:rgba(27,28,28,.92);color:var(--vx-blanco);border:1px solid rgba(255,255,255,.18);font:500 .875rem/1 var(--vx-display);font-variant-numeric:tabular-nums}
@media (max-width:900px){
.vx .vx-depth{display:none}
}
.vx .vx-topbar{color:var(--fg);background:var(--vx-blanco);border-bottom:1px solid rgba(35,36,36,.1)}
.vx .vx-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.vx .vx-logo{width:clamp(150px,22vw,210px);height:auto}
.vx .vx-nav{display:flex;align-items:center;gap:clamp(16px,3vw,32px);font:500 1rem var(--vx-display)}
.vx .vx-nav .vx-link{text-decoration:none}
.vx .vx-nav .vx-link:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
@media (max-width:760px){
.vx .vx-nav .vx-link{display:none}
}
.vx .vx-hero{padding-block:0 clamp(56px,8vw,104px);overflow:clip}
.vx .vx-hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(28px,5vw,72px);align-items:center;padding-top:clamp(40px,6vw,88px)}
.vx .vx-hero-copy{display:grid;gap:clamp(18px,2.4vw,28px);justify-items:start}
@media (max-width:860px){
.vx .vx-hero-grid{grid-template-columns:minmax(0,1fr)}
.vx .vx-stage{max-width:480px;margin-inline:auto}
}
.vx .vx-feats{display:grid;gap:10px;align-content:start;font-size:1rem}
.vx .vx-feats li{position:relative;padding-left:28px}
.vx .vx-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){
.vx .vx-split{grid-template-columns:minmax(0,1fr)}
}
.vx .vx-copy{display:grid;gap:16px;align-content:start}
.vx .vx-risks{border-bottom:1px solid var(--line)}
.vx .vx-risk{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px clamp(24px,5vw,72px);padding-block:clamp(22px,3vw,34px);border-top:1px solid var(--line)}
.vx .vx-risk .vx-p{max-width:56ch}
@media (max-width:760px){
.vx .vx-risk{grid-template-columns:minmax(0,1fr)}
}
.vx .vx-turn svg{position:absolute;left:0;right:0;top:46%;width:100%;height:96px}
.vx.js .vx-turn .vx-horizon{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--vx-ease)}
.vx.js .vx-turn.vx-in .vx-horizon{stroke-dashoffset:0}
.vx .vx-steps{position:relative;display:grid;gap:clamp(28px,4vw,44px);padding-left:clamp(56px,8vw,88px)}
.vx .vx-steps:not(.is-ready)::before{content:'';position:absolute;left:19px;top:8px;bottom:8px;width:3px;border-radius:2px;background:rgba(35,36,36,.14)}
.vx .vx-thread{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.vx .vx-thread path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.vx .vx-thread .trk{stroke:rgba(35,36,36,.14)}
.vx .vx-step{position:relative;display:grid;gap:6px}
.vx .vx-step-n{position:absolute;left:calc(-1*clamp(56px,8vw,88px));top:-2px;width:41px;height:41px;display:grid;place-items:center;border-radius:50%;background:var(--vx-blanco);border:3px solid var(--vx-acc-ink);color:var(--vx-grafito);font:700 1rem var(--vx-display);z-index:1;transition:background .5s var(--vx-ease),color .5s var(--vx-ease),box-shadow .5s var(--vx-ease)}
.vx .vx-proof{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:900px){
.vx .vx-proof{grid-template-columns:minmax(0,1fr)}
}
.vx .vx-quote{font:500 clamp(1.4rem,1rem + 1.8vw,2.1rem)/1.25 var(--vx-display);text-wrap:balance}
.vx .vx-quote-by{margin-top:18px;color:var(--fg-muted);font-size:1rem}
.vx .vx-metrics{display:grid;gap:22px}
.vx .vx-metric{display:grid;gap:4px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.vx .vx-metric-v{font:700 clamp(2rem,1.2rem + 3vw,3.2rem)/1 var(--vx-display);font-variant-numeric:tabular-nums}
.vx .vx-metric-l{color:var(--fg-muted);font-size:1rem}
.vx .vx-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--vx-blanco);color:var(--vx-grafito)}
.vx .vx-vs-col{display:grid;gap:14px;align-content:start;padding:clamp(22px,3vw,36px)}
.vx .vx-vs-col + .vx-vs-col{border-left:1px solid var(--line)}
.vx .vx-vs-col .vx-fine{color:var(--vx-muted-lt)}
.vx .vx-vs-tag{font:600 .9rem var(--vx-display);color:var(--vx-acc-ink)}
.vx .vx-vs-col .vx-feats li::before{border-color:var(--vx-azul-txt)}
.vx .vx-vs-link{font:600 1rem var(--vx-display);color:var(--vx-azul-txt);text-underline-offset:5px}
@media (max-width:760px){
.vx .vx-vs{grid-template-columns:minmax(0,1fr)}
.vx .vx-vs-col + .vx-vs-col{border-left:0;border-top:1px solid var(--line)}
}
.vx .vx-faq-list{border-bottom:1px solid var(--line)}
.vx .vx-q{border-top:1px solid var(--line)}
.vx .vx-q button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:22px 0;text-align:left;background:none;border:0;color:inherit;font:600 1.15rem/1.3 var(--vx-display);cursor:pointer}
.vx .vx-q button::after{content:'+';flex:none;font:500 1.6rem/1 var(--vx-display);transition:transform .3s var(--vx-ease)}
.vx .vx-q.is-open button::after{transform:rotate(45deg)}
.vx .vx-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--vx-ease)}
.vx .vx-a > div{overflow:hidden}
.vx .vx-a p{padding-bottom:22px;color:var(--fg-muted);max-width:62ch}
.vx .vx-q.is-open .vx-a{grid-template-rows:1fr}
.vx:not(.js) .vx-a{grid-template-rows:1fr}
.vx .vx-final-grid{display:grid;gap:clamp(18px,2.4vw,28px);justify-items:start;max-width:720px}
.vx .vx-foot{padding-block:28px clamp(96px,12vw,120px);background:var(--vx-grafito-2);color:var(--vx-muted-dk);font-size:.95rem}
@media (prefers-reduced-motion:reduce){
.vx *,.vx *::before,.vx *::after{animation:none!important;transition:none!important}
.vx .vx-horizon{stroke-dashoffset:0}
}


/* ==========================================================================
   2. Capa de luz: cristal (glassmorphism) y elevación al estilo Material.
      Doble clase (.vx.vx) para mandar sobre el CSS propio de cada página.
   ========================================================================== */
/* hueco para la cabecera flotante */
.vx{--vx-hh:76px}
.vx.vx .vx-hero{padding-top:var(--vx-hh)}
.vx.vx{
  /* oscuros más luminosos: grafito con un punto de petróleo */
  --vx-grafito:#22343d; --vx-grafito-2:#1b2b33;
  --vx-muted-dk:#c3cdd1;
  /* cristal y elevación */
  --gl-claro:rgba(255,255,255,.62); --gl-claro-borde:rgba(255,255,255,.9);
  --gl-oscuro:rgba(255,255,255,.075); --gl-oscuro-borde:rgba(255,255,255,.16);
  --gl-blur:blur(18px) saturate(160%);
  --el-1:0 1px 2px rgba(16,40,52,.08),0 2px 6px rgba(16,40,52,.06);
  --el-2:0 2px 4px rgba(16,40,52,.06),0 10px 28px -6px rgba(16,40,52,.16);
  --el-3:0 4px 10px rgba(16,40,52,.08),0 24px 56px -16px rgba(16,40,52,.28);
  --el-osc:0 1px 0 rgba(255,255,255,.08) inset,0 18px 40px -18px rgba(0,0,0,.55);
  --rad:20px;
  --halo-acc:color-mix(in srgb,var(--vx-acc) 26%,transparent);
  --halo-cian:rgba(0,159,227,.22);
}
.vx.vx [id]{scroll-margin-top:84px}

/* fondos: halos de luz detrás del cristal */
.vx.vx .vx-dark{background:
  radial-gradient(55% 60% at 88% 18%,var(--halo-acc),transparent 70%),
  radial-gradient(45% 55% at 6% 92%,var(--halo-cian),transparent 70%),
  linear-gradient(160deg,#2a404a 0%,var(--vx-grafito) 55%,var(--vx-grafito-2) 100%)}
.vx.vx .vx-deep{background:
  radial-gradient(50% 45% at 92% 8%,color-mix(in srgb,var(--vx-acc) 16%,transparent),transparent 70%),
  radial-gradient(40% 40% at 4% 60%,rgba(0,159,227,.14),transparent 70%),
  var(--vx-grafito-2)}
.vx.vx .vx-white{background:
  radial-gradient(42% 50% at 100% 0%,color-mix(in srgb,var(--vx-acc) 12%,transparent),transparent 70%),
  radial-gradient(38% 45% at 0% 100%,rgba(0,159,227,.09),transparent 70%),
  linear-gradient(180deg,#ffffff,#f6fbfe)}
.vx.vx .vx-ice{background:
  radial-gradient(45% 55% at 0% 0%,rgba(255,255,255,.95),transparent 70%),
  radial-gradient(40% 50% at 100% 100%,color-mix(in srgb,var(--vx-acc) 14%,transparent),transparent 70%),
  linear-gradient(180deg,#eaf6fc,#dff1fa)}
.vx.vx .vx-petrol{background:
  radial-gradient(55% 65% at 90% 10%,rgba(0,159,227,.32),transparent 70%),
  radial-gradient(45% 55% at 0% 100%,color-mix(in srgb,var(--vx-acc) 18%,transparent),transparent 70%),
  linear-gradient(150deg,#035a71,var(--vx-petroleo))}
.vx.vx .vx-final{background:
  radial-gradient(60% 80% at 85% 100%,var(--halo-acc),transparent 70%),
  radial-gradient(45% 60% at 10% 0%,rgba(0,159,227,.26),transparent 70%),
  linear-gradient(160deg,#2a404a,var(--vx-grafito))}
/* punto de giro: de oscuro a claro pasando por azul, no por gris */
.vx.vx .vx-turn{background:
  radial-gradient(60% 45% at 50% 66%,color-mix(in srgb,var(--vx-acc) 28%,transparent),transparent 70%),
  linear-gradient(to bottom,var(--vx-grafito-2) 0%,var(--vx-grafito-2) 6%,#2c5568 34%,#7fb8d2 66%,var(--vx-hielo) 100%)}
.vx.vx .vx-foot{background:var(--vx-grafito-2);border-top:1px solid rgba(255,255,255,.08)}

/* cabecera de cristal fija */
.vx.vx .vx-topbar{position:sticky;top:0;z-index:45;background:rgba(250,253,255,.95);border-bottom:1px solid rgba(255,255,255,.7);box-shadow:var(--el-1)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vx.vx .vx-topbar{-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur)}
}

/* superficies de cristal sobre fondo claro */
.vx.vx :is(.vx-white,.vx-ice) :is(.vx-pillar,.vx-factor,.vx-case,.vx-vs-col,.vx-start){
  background:var(--gl-claro);border:1px solid var(--gl-claro-borde);border-radius:var(--rad);box-shadow:var(--el-2)}
.vx.vx :is(.vx-white,.vx-ice) :is(.vx-pillar,.vx-factor){padding:clamp(18px,2.4vw,26px)}
.vx.vx :is(.vx-white,.vx-ice) .vx-factors{gap:clamp(12px,1.6vw,18px) clamp(12px,1.6vw,18px)}
.vx.vx :is(.vx-white,.vx-ice) .vx-vs{background:transparent;border:0;border-radius:0;overflow:visible;gap:clamp(12px,1.6vw,18px)}
.vx.vx :is(.vx-white,.vx-ice) .vx-vs-col + .vx-vs-col{border-left:1px solid var(--gl-claro-borde)}
.vx.vx .vx-vs-col{--check:var(--vx-azul-txt)} /* sin esto los ticks de la comparativa no se pintaban */
.vx.vx .vx-plan{border-radius:var(--rad);box-shadow:var(--el-2);transition:translate .3s var(--vx-ease),box-shadow .3s var(--vx-ease)}
.vx.vx .vx-plan:not(.vx-plan--pro){border:1px solid var(--gl-claro-borde);background:rgba(255,255,255,.8)}
.vx.vx .vx-plan--pro{background:
  radial-gradient(80% 60% at 100% 0%,var(--halo-acc),transparent 70%),
  linear-gradient(160deg,#2a404a,var(--vx-grafito));border-color:rgba(255,255,255,.14);box-shadow:var(--el-3)}
.vx.vx .vx-plan:hover{translate:0 -4px;box-shadow:var(--el-3)}

/* pasos: cada paso es una tarjeta */
.vx.vx :is(.vx-white,.vx-ice) .vx-step{padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,26px);background:var(--gl-claro);border:1px solid var(--gl-claro-borde);border-radius:var(--rad);box-shadow:var(--el-2)}
.vx.vx .vx-step-n{top:14px;box-shadow:var(--el-1)}

/* superficies de cristal sobre fondo oscuro */
.vx.vx :is(.vx-dark,.vx-deep,.vx-petrol,.vx-final) :is(.vx-risk,.vx-pillar,.vx-factor,.vx-case){
  background:var(--gl-oscuro);border:1px solid var(--gl-oscuro-borde);border-radius:var(--rad);box-shadow:var(--el-osc)}
.vx.vx .vx-risks{display:grid;gap:clamp(10px,1.4vw,14px);border-bottom:0}
.vx.vx .vx-risk{padding:clamp(20px,2.6vw,30px) clamp(20px,3vw,34px)}
.vx.vx :is(.vx-dark,.vx-deep) .vx-risk:hover{background:rgba(255,255,255,.11)}
.vx.vx .vx-petrol .vx-proof{padding:clamp(22px,3.4vw,44px);background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);border-radius:calc(var(--rad) + 8px);box-shadow:var(--el-osc)}
.vx.vx .vx-petrol .vx-metric{border-bottom-color:rgba(255,255,255,.2)}

/* paneles de datos: cristal oscuro con luz en el borde */
.vx.vx .vx-panel{--s:rgba(24,38,45,.9);border:1px solid rgba(255,255,255,.12);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,var(--el-3);border-radius:calc(var(--rad) + 4px)}
.vx.vx .vx-kpi{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px}

/* preguntas frecuentes: tarjetas separadas */
.vx.vx .vx-faq-list{display:grid;gap:10px;border-bottom:0}
.vx.vx .vx-q{border:1px solid var(--gl-claro-borde);border-radius:16px;background:var(--gl-claro);box-shadow:var(--el-1);padding-inline:clamp(16px,2.4vw,24px);transition:box-shadow .3s var(--vx-ease),background-color .3s}
.vx.vx .vx-q:hover,.vx.vx .vx-q.is-open{background:rgba(255,255,255,.92);box-shadow:var(--el-2)}
.vx.vx .vx-q button{padding-block:18px}
.vx.vx :is(.vx-dark,.vx-deep,.vx-final) .vx-q{background:var(--gl-oscuro);border-color:var(--gl-oscuro-borde);box-shadow:none}

/* botones con elevación Material */
.vx.vx .vx-btn{transition:transform .25s var(--vx-ease),box-shadow .25s var(--vx-ease),background-color .25s,border-color .25s,color .25s}
.vx.vx .vx-btn--cian{box-shadow:0 1px 2px rgba(2,72,91,.14),0 10px 22px -12px rgba(0,113,165,.55)}
.vx.vx .vx-btn--cian:hover{box-shadow:0 2px 4px rgba(2,72,91,.16),0 16px 28px -12px rgba(0,113,165,.6)}
.vx.vx .vx-btn--cian:active{transform:translateY(0);box-shadow:0 1px 2px rgba(2,72,91,.25)}
.vx.vx .vx-btn--line{background:rgba(255,255,255,.08)}
.vx.vx :is(.vx-white,.vx-ice,.vx-topbar) .vx-btn--line{background:rgba(255,255,255,.6)}

/* CTA fijo e indicadores flotantes de cristal */
.vx.vx .vx-depth{background:rgba(27,43,51,.78);border-color:rgba(255,255,255,.2);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 14px 36px -10px rgba(0,0,0,.5)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vx.vx .vx-depth{-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur)}
}
.vx.vx .vx-progress span{box-shadow:0 0 12px var(--vx-acc)}

@media (prefers-reduced-motion:reduce){
  .vx.vx .vx-plan:hover{translate:none}
}

/* ==========================================================================
   3. Cabecera y menú (.vx-header) y pie (.vx-footer)
   Viven fuera del contenido de cada página: en WordPress van en la cabecera y el pie
   globales del Theme Builder de Divi. Por eso tienen su propia clase raíz.
   ========================================================================== */
:where(.vx-header,.vx-footer){
  --vx-grafito:#22343d; --vx-grafito-2:#1b2b33; --vx-negro:#000; --vx-blanco:#fff;
  --vx-cian:#009fe3; --vx-cian-hover:#33b2eb; --vx-petroleo:#02485b; --vx-hielo:#eaf6fc;
  --vx-azul-txt:#0071a5; --vx-muted-dk:#c3cdd1; --vx-muted-lt:#4a5558;
  --vx-display:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --vx-body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  --vx-ease:cubic-bezier(.32,.72,0,1);
  --vx-flecha:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5l7-7M5.5 4.5h6v6'/%3E%3C/svg%3E");
}
:is(.vx-header,.vx-footer) *,:is(.vx-header,.vx-footer) *::before,:is(.vx-header,.vx-footer) *::after{box-sizing:border-box}
:is(.vx-header,.vx-footer) :where(ul,ol,p){margin:0;padding:0;list-style:none}
:is(.vx-header,.vx-footer) :where(a){color:inherit;text-decoration:none}
:is(.vx-header,.vx-footer) :where(img){display:block;max-width:100%;height:auto}
.vx-header :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* --- cabecera: píldora de cristal flotante --- */
/* Altura 0 y sticky: la píldora flota sobre el hero sin empujar el contenido.
   En WordPress, si la cabecera queda dentro de otro contenedor, usar .vx-header--fija. */
.vx-header{position:sticky;top:0;z-index:60;height:0;font-family:var(--vx-body);-webkit-font-smoothing:antialiased}
.vx-header.vx-header--fija{position:fixed;left:0;right:0}
.vx-skip{position:fixed;left:16px;top:12px;z-index:9;padding:12px 18px;border-radius:999px;background:var(--vx-negro);color:var(--vx-blanco);font:600 .95rem/1 var(--vx-display)}
.vx-skip:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vx-header :focus-visible{outline:3px solid var(--vx-azul-txt);outline-offset:2px}

.vx-hd-bar{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(1180px,calc(100% - 24px));min-height:60px;margin:12px auto 0;padding:8px 8px 8px 20px;border-radius:999px;color:var(--vx-grafito)}
/* el cristal va en un pseudoelemento: así el menú del móvil (fixed) no queda atrapado por el backdrop-filter */
.vx-hd-bar::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(255,255,255,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(16,40,52,.07),0 12px 32px -12px rgba(16,40,52,.32);transition:background-color .4s var(--vx-ease),box-shadow .4s var(--vx-ease)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vx-hd-bar::before{background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%)}
}
.vx-header.is-scrolled .vx-hd-bar::before{background:rgba(255,255,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(16,40,52,.08),0 18px 40px -14px rgba(16,40,52,.38)}
.vx-hd-logo{position:relative;z-index:2;display:flex;flex:none;border-radius:8px}
.vx-hd-logo img{width:clamp(132px,13vw,164px)}

.vx-hd-burger{display:none}
.vx-hd-nav{display:flex}
.vx-hd-list{display:flex;align-items:center;gap:2px}
.vx-hd-item--drop{position:relative}
.vx-hd-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;font:500 .98rem/1 var(--vx-display);white-space:nowrap;transition:background-color .25s var(--vx-ease),color .25s}
.vx-hd-link:hover,.vx-hd-dd[aria-expanded="true"]{background:rgba(2,72,91,.07)}
.vx-hd-link[aria-current="page"],.vx-hd-link.is-current{color:var(--vx-azul-txt);background:rgba(0,159,227,.1)}
.vx-hd-dd::after{content:'';width:7px;height:7px;margin-top:-3px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .4s var(--vx-ease),margin .4s var(--vx-ease)}
.vx-hd-dd[aria-expanded="true"]::after{margin-top:3px;transform:rotate(-135deg)}

/* paneles: doble marco (bandeja translúcida + núcleo blanco) */
.vx-hd-panel{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:5;display:grid;gap:6px;padding:7px;border-radius:32px;background:rgba(255,255,255,.5);box-shadow:0 0 0 1px rgba(16,40,52,.07),0 32px 64px -24px rgba(16,40,52,.42);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px) scale(.985);transform-origin:50% 0;transition:opacity .3s var(--vx-ease),transform .45s var(--vx-ease),visibility 0s linear .45s}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vx-hd-panel{background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%)}
}
.vx-hd-item--drop .vx-hd-panel{top:calc(100% + 18px);left:-8px;right:auto;width:400px}
.vx-hd-dd[aria-expanded="true"] + .vx-hd-panel,
.vx-header:not(.is-js) .vx-hd-item:is(:hover,:focus-within) > .vx-hd-panel{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
.vx-mega,.vx-sect,.vx-mega-foot{border-radius:26px;background:rgba(255,255,255,.94);box-shadow:inset 0 1px 1px rgba(255,255,255,.9)}
.vx-mega{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:16px}
.vx-mega-col{display:grid;gap:4px;align-content:start}
.vx-mega-col ul,.vx-sect{display:grid;gap:2px}
.vx-sect{padding:8px}
.vx-mega-k{display:flex;align-items:center;gap:8px;padding:6px 12px 8px;font:600 .74rem/1 var(--vx-display);letter-spacing:.16em;text-transform:uppercase;color:var(--vx-petroleo)}
.vx-mega-k span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--vx-hielo);letter-spacing:0;font-size:.72rem}
.vx-mega-a{position:relative;display:grid;gap:2px;padding:11px 12px 11px 36px;border-radius:18px;transition:background-color .25s var(--vx-ease)}
.vx-mega-a::before{content:'';position:absolute;left:14px;top:17px;width:10px;height:10px;border-radius:50%;background:var(--c,var(--vx-cian));box-shadow:0 0 0 4px color-mix(in srgb,var(--c,var(--vx-cian)) 22%,transparent);transition:transform .35s var(--vx-ease)}
.vx-mega-a:hover{background:var(--vx-hielo)}
.vx-mega-a:hover::before{transform:scale(1.2)}
.vx-mega-a[aria-current="page"]{background:var(--vx-hielo)}
.vx-mega-t{font:600 1rem/1.25 var(--vx-display);color:var(--vx-grafito)}
.vx-mega-d{font-size:.9rem;line-height:1.35;color:var(--vx-muted-lt)}
.vx-sect .vx-mega-a::before{background:var(--vx-cian)}
.vx-mega-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 14px 14px 22px;background:linear-gradient(90deg,rgba(234,246,252,.96),rgba(255,255,255,.94))}
.vx-mega-foot p{font-size:.98rem;color:var(--vx-muted-lt)}
.vx-hd-more{display:inline-flex;align-items:center;gap:10px;flex:none;min-height:44px;padding:0 8px 0 18px;border-radius:999px;background:var(--vx-grafito);color:var(--vx-blanco);font:600 .95rem/1 var(--vx-display)}
.vx-hd-more::after{content:'';width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.16) var(--vx-flecha) center/13px no-repeat;filter:invert(1);transition:transform .4s var(--vx-ease)}
.vx-hd-more:hover::after{transform:translate(2px,-1px) scale(1.06)}

/* CTA isla: la flecha va en su propio círculo */
.vx-hd-item--cta{display:none}
.vx-hd-tel{display:none}

/* --- cabecera en móvil y tableta: menú a pantalla completa --- */
@media (max-width:1023.98px){
  .vx-hd-bar{min-height:56px;padding:6px 6px 6px 16px}
  .vx-hd-burger{position:relative;z-index:2;display:block;flex:none;width:44px;height:44px;border-radius:50%;background:rgba(2,72,91,.08)}
  .vx-hd-burger span{position:absolute;left:13px;right:13px;top:21px;height:2px;border-radius:2px;background:currentColor;transition:transform .45s var(--vx-ease)}
  .vx-hd-burger span:first-child{transform:translateY(-4px)}
  .vx-hd-burger span:last-child{transform:translateY(4px)}
  .vx-header.is-open .vx-hd-burger span:first-child{transform:rotate(45deg)}
  .vx-header.is-open .vx-hd-burger span:last-child{transform:rotate(-45deg)}
  .vx-hd-nav{position:fixed;inset:0;z-index:1;display:block;overflow-y:auto;overscroll-behavior:contain;padding:88px 16px calc(28px + env(safe-area-inset-bottom,0px));background:rgba(246,251,254,.98);opacity:0;visibility:hidden;transition:opacity .35s var(--vx-ease),visibility 0s linear .35s}
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .vx-hd-nav{background:rgba(246,251,254,.9);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%)}
  }
  .vx-header.is-open .vx-hd-nav{opacity:1;visibility:visible;transition-delay:0s}
  /* con el menú abierto la barra se fija arriba, esté donde esté la página */
  .vx-header.is-open .vx-hd-bar{position:fixed;top:12px;left:12px;right:12px;width:auto;margin:0}
  .vx-header:not(.is-js) .vx-hd-burger,.vx-header:not(.is-js) .vx-hd-nav{display:none}
  .vx-hd-list{flex-direction:column;align-items:stretch;gap:4px;max-width:560px;margin:0 auto}
  .vx-hd-item{opacity:0;transform:translateY(18px);transition:opacity .5s var(--vx-ease),transform .6s var(--vx-ease)}
  .vx-header.is-open .vx-hd-item{opacity:1;transform:none}
  .vx-hd-item:nth-child(2){transition-delay:.04s}.vx-hd-item:nth-child(3){transition-delay:.08s}
  .vx-hd-item:nth-child(4){transition-delay:.12s}.vx-hd-item:nth-child(5){transition-delay:.16s}
  .vx-hd-item:nth-child(6){transition-delay:.2s}.vx-hd-item:nth-child(7){transition-delay:.24s}
  .vx-hd-link{width:100%;justify-content:space-between;min-height:58px;padding:0 18px;border-radius:20px;font-size:1.35rem;font-weight:600}
  .vx-hd-item--drop{position:static}
  .vx-hd-panel,.vx-hd-item--drop .vx-hd-panel{position:static;width:auto;display:none;margin:4px 0 8px;padding:6px;border-radius:28px;opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:none;box-shadow:0 0 0 1px rgba(16,40,52,.06)}
  .vx-hd-dd[aria-expanded="true"] + .vx-hd-panel{display:grid}
  .vx-mega{grid-template-columns:minmax(0,1fr);gap:10px;padding:10px}
  .vx-mega-foot{flex-direction:column;align-items:flex-start;padding:16px}
  .vx-hd-item--cta{display:grid;gap:10px;margin:18px 0 0}
  .vx-hd-tel{display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:999px;border:1.5px solid rgba(34,52,61,.25);font:600 1rem/1 var(--vx-display)}
}
@media (prefers-reduced-motion:reduce){
  .vx-header *,.vx-header *::before,.vx-header *::after{transition-duration:.01ms!important;transition-delay:0s!important}
}

/* --- pie --- */
.vx-footer{position:relative;overflow:clip;color:var(--vx-muted-dk);font:400 1rem/1.6 var(--vx-body);-webkit-font-smoothing:antialiased;
  background:radial-gradient(45% 70% at 100% 0%,rgba(0,159,227,.16),transparent 70%),radial-gradient(40% 60% at 0% 100%,rgba(123,127,255,.12),transparent 70%),var(--vx-grafito-2)}
.vx-footer :focus-visible{outline:3px solid var(--vx-cian);outline-offset:3px}
.vx-ft-wrap{width:100%;max-width:1160px;margin-inline:auto;padding:clamp(56px,8vw,96px) clamp(16px,5vw,56px) calc(104px + env(safe-area-inset-bottom,0px))}
.vx-ft-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:clamp(36px,5vw,72px)}
.vx-ft-brand{display:grid;gap:20px;align-content:start;justify-items:start}
.vx-ft-logo img{width:240px;height:auto}
.vx-ft-brand p{max-width:36ch}
.vx-ft-actions{display:flex;flex-wrap:wrap;gap:10px}
.vx-ft-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid rgba(255,255,255,.28);color:var(--vx-blanco);font:600 .95rem/1 var(--vx-display);transition:background-color .25s,border-color .25s}
.vx-ft-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.vx-ft-btn--cian{background:var(--vx-blanco);border-color:var(--vx-blanco);color:var(--vx-petroleo)}
.vx-ft-btn--cian:hover{background:var(--vx-hielo);border-color:var(--vx-hielo)}
.vx-ft-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px}
.vx-ft-k{margin-bottom:14px;font:600 .76rem/1.2 var(--vx-display);letter-spacing:.16em;text-transform:uppercase;color:var(--vx-cian)}
.vx-ft-col ul + .vx-ft-k{margin-top:28px}
.vx-ft-col ul{display:grid;gap:9px}
.vx-ft-col a{color:#e7eef1;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .25s,color .25s}
.vx-ft-col a:hover,.vx-ft-col a[aria-current="page"]{color:var(--vx-blanco);text-decoration-color:var(--vx-cian)}
.vx-ft-col .vx-ft-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.vx-ft-social a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);text-decoration:none}
.vx-ft-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:clamp(44px,6vw,72px);padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:.92rem}
.vx-ft-bottom ul{display:flex;flex-wrap:wrap;gap:6px 20px}
.vx-ft-bottom a{color:#e7eef1}
.vx-ft-bottom a:hover{text-decoration:underline;text-underline-offset:4px}

/* botón flotante de WhatsApp (se abre en ventana nueva) */
.vx-footer .vx-wa{position:fixed;z-index:70;right:clamp(14px,2vw,22px);bottom:calc(clamp(14px,2vw,22px) + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:0;color:#fff;text-decoration:none;filter:drop-shadow(0 10px 18px rgba(2,72,91,.35))}
.vx-footer .vx-wa-i{position:relative;display:grid;place-items:center;flex:none;width:60px;height:60px;border-radius:50%;background:#25d366;color:#fff;transition:transform .4s var(--vx-ease),background-color .25s}
.vx-footer .vx-wa-i::before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:vx-wa-pulse 2.8s var(--vx-ease) infinite}
.vx-footer .vx-wa-t{position:absolute;right:30px;top:50%;translate:0 -50%;max-width:0;overflow:hidden;white-space:nowrap;padding:0;height:46px;display:flex;align-items:center;border-radius:999px 0 0 999px;background:var(--vx-grafito);font:600 .95rem/1 var(--vx-display);opacity:0;transition:max-width .45s var(--vx-ease),padding .45s var(--vx-ease),opacity .3s}
.vx-footer .vx-wa:is(:hover,:focus-visible) .vx-wa-t{max-width:260px;padding:0 42px 0 20px;opacity:1}
.vx-footer .vx-wa:hover .vx-wa-i{transform:scale(1.08);background:#1ebe5b}
.vx-footer .vx-wa:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:999px}
@keyframes vx-wa-pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.5);opacity:0}}
@media (max-width:640px){.vx-footer .vx-wa-i{width:56px;height:56px}}
@media (hover:none){.vx-footer .vx-wa-t{display:none}}
@media (prefers-reduced-motion:reduce){.vx-footer .vx-wa-i::before{animation:none;display:none}.vx-footer .vx-wa-i,.vx-footer .vx-wa-t{transition:none}}
@media (max-width:900px){
  .vx-ft-top{grid-template-columns:minmax(0,1fr)}
  .vx-ft-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==========================================================================
   4. Taste (redesign-existing-projects + high-end-visual-design, adaptado)
   ========================================================================== */
.vx.vx{
  --vx-ease:cubic-bezier(.32,.72,0,1);
  --vx-flecha-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
  --vx-flecha-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
  /* doble marco: bandeja translúcida alrededor de la tarjeta */
  --bezel:0 0 0 7px rgba(255,255,255,.5),0 0 0 8px rgba(16,40,52,.06);
}

/* 4.1 Un solo cambio de tema: oscuro (el antes) → claro (el después) en el punto de giro.
   El caso y el cierre dejan de oscurecer la página. */
.vx.vx :is(.vx-petrol,.vx-final){--fg:var(--vx-grafito);--fg-muted:var(--vx-muted-lt);--line:rgba(34,52,61,.14);--focus:var(--vx-azul-txt)}
.vx.vx .vx-petrol{background:
  radial-gradient(50% 60% at 92% 6%,rgba(0,159,227,.2),transparent 70%),
  radial-gradient(45% 55% at 0% 100%,color-mix(in srgb,var(--vx-acc) 18%,transparent),transparent 70%),
  linear-gradient(165deg,#e4f3fb 0%,#d3eaf6 100%)}
.vx.vx .vx-final{background:
  radial-gradient(55% 75% at 88% 100%,color-mix(in srgb,var(--vx-acc) 26%,transparent),transparent 70%),
  radial-gradient(45% 60% at 8% 0%,rgba(0,159,227,.2),transparent 70%),
  linear-gradient(180deg,#ffffff 0%,#eef8fd 100%)}
.vx.vx .vx-petrol .vx-proof{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);box-shadow:var(--bezel),var(--el-3)}
.vx.vx .vx-petrol .vx-metric{border-bottom-color:var(--line)}
.vx.vx :is(.vx-petrol,.vx-final) :is(.vx-pillar,.vx-factor,.vx-case){background:var(--gl-claro);border:1px solid var(--gl-claro-borde);box-shadow:var(--bezel),var(--el-2)}
.vx.vx :is(.vx-petrol,.vx-final) .vx-case-tag{color:var(--vx-acc-ink)}
.vx.vx :is(.vx-petrol,.vx-final) .vx-btn--line{background:rgba(255,255,255,.6)}
.vx.vx :is(.vx-petrol,.vx-final) .vx-btn--line:hover{background:rgba(255,255,255,.95)}
.vx.vx .vx-final .vx-h2{font-size:clamp(2.2rem,1.2rem + 3.6vw,3.8rem)}

/* 4.2 Doble marco en las tarjetas principales */
.vx.vx :is(.vx-plan,.vx-case,.vx-panel,.vx-vs-col){box-shadow:var(--bezel),var(--el-2)}
.vx.vx .vx-plan--pro,.vx.vx .vx-panel{box-shadow:0 0 0 7px rgba(255,255,255,.42),0 0 0 8px rgba(16,40,52,.08),var(--el-3)}
.vx.vx .vx-plan:hover{box-shadow:var(--bezel),var(--el-3)}

/* 4.3 Etiqueta sobre cada título (eyebrow) */
.vx .vx-eyebrow{justify-self:start;display:inline-flex;align-items:center;width:max-content;max-width:100%;padding:7px 14px;border-radius:999px;font:600 .74rem/1.2 var(--vx-display);letter-spacing:.14em;text-transform:uppercase;color:var(--vx-acc-ink);background:rgba(255,255,255,.66);box-shadow:inset 0 0 0 1px rgba(16,40,52,.08)}
.vx :is(.vx-dark,.vx-deep) .vx-eyebrow{color:#e7eef1;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.vx .vx-hero-copy .vx-eyebrow,.vx .vx-head .vx-eyebrow{margin-bottom:2px}
.vx .vx-final-grid .vx-eyebrow{margin-bottom:-4px}

/* 4.4 Botón isla: la flecha va en su propio círculo y se mueve al pasar el ratón */
.vx.vx .vx-btn--cian:not(.vx-btn--sm){gap:12px;padding-right:7px}
.vx.vx .vx-btn--cian:not(.vx-btn--sm)::after{content:'';flex:none;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16) var(--vx-flecha-b) center/15px no-repeat;transition:transform .45s var(--vx-ease)}
.vx.vx .vx-btn--cian:not(.vx-btn--sm):hover::after{transform:translateX(3px) scale(1.05)}
.vx.vx .vx-btn:active{transform:scale(.98);transition-duration:.1s}

/* 4.5 Más aire y ritmo óptico (abajo un poco más que arriba) */
.vx.vx .vx-sec:not(.vx-hero){padding-block:clamp(80px,10vw,136px) clamp(88px,11vw,152px)}
.vx.vx .vx-head{margin-bottom:clamp(36px,5.5vw,72px)}

/* 4.6 Tipografía: el H1 del hero en 3 líneas como máximo para que el botón se vea sin hacer scroll */
.vx.vx .vx-h1{font-size:clamp(2.15rem,1.2rem + 2.5vw,3.3rem);line-height:1.06}
@media (min-width:861px){.vx.vx .vx-hero-grid{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);padding-top:clamp(32px,4.5vw,64px)}}
/* 4.6b sin palabras huérfanas y cifras tabulares */
.vx .vx-p,.vx .vx-lead,.vx .vx-fine,.vx .vx-quote-by{text-wrap:pretty}
.vx :is(.vx-kpi-v,.vx-price,.vx-bar-val){font-variant-numeric:tabular-nums}

/* 4.7 Entradas suaves de títulos, preguntas y cierre (las pone vx-core.js;
   sin JS o con movimiento reducido, todo se ve desde el principio) */
.vx .vx-rv{opacity:0;transform:translateY(28px)}
.vx .vx-rv.is-in{opacity:1;transform:none;transition:opacity .9s var(--vx-ease),transform 1.1s var(--vx-ease)}
@media (prefers-reduced-motion:reduce){
  .vx .vx-rv{opacity:1;transform:none}
  .vx.vx .vx-btn--cian:not(.vx-btn--sm):hover::after{transform:none}
}

/* ==========================================================================
   5. Componentes de las páginas nuevas (home, trabajos, sobre mí, contacto,
      sectoriales, blog...). Las landings de servicio no los usan.
   ========================================================================== */
/* datos de ejemplo: contorno discontinuo y etiqueta «Ejemplo».
   Las landings de servicio traen su propio color; esto vale para las páginas nuevas. */
.vx .vx-ej{position:relative}
.vx .vx-ej{outline:2px dashed #ff4d94;outline-offset:6px}
.vx .vx-ej::before{content:'Ejemplo';position:absolute;top:-1.25em;left:10px;z-index:2;padding:1px 8px;border-radius:4px;background:#ff4d94;color:#000;font:600 .75rem/1.5 var(--vx-display)}

/* solo para lectores de pantalla */
.vx .vx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* lo oculto con el atributo hidden se oculta siempre, diga lo que diga el tema */
.vx [hidden]{display:none!important}

/* revelado genérico con data-vx-in (lo activa vx-core.js; sin JS se ve todo) */
.vx.vx-js [data-vx-in]:not(.vx-in){opacity:0;transform:translateY(26px)}
.vx [data-vx-in]{transition:opacity .9s var(--vx-ease),transform 1.1s var(--vx-ease);transition-delay:calc(var(--i,0) * 90ms)}

/* punto de giro genérico (las landings tienen el suyo) */
.vx .vx-turn{position:relative;height:clamp(200px,32vw,380px)}
.vx .vx-horizon{fill:none;stroke:var(--vx-acc);stroke-width:3;stroke-linecap:round}
.vx.vx-js .vx-turn[data-vx-in] .vx-horizon{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--vx-ease)}
.vx.vx-js .vx-turn.vx-in .vx-horizon{stroke-dashoffset:0}

/* enlace de texto con flecha */
.vx .vx-more{display:inline-flex;align-items:center;gap:10px;font:600 1rem/1.2 var(--vx-display);color:var(--vx-azul-txt);text-decoration:none}
.vx :is(.vx-dark,.vx-deep) .vx-more{color:var(--vx-cian)}
.vx .vx-more::after{content:'';width:30px;height:30px;flex:none;border-radius:50%;background:color-mix(in srgb,currentColor 12%,transparent) var(--vx-flecha-d) center/14px no-repeat;transition:transform .45s var(--vx-ease)}
.vx :is(.vx-dark,.vx-deep) .vx-more::after{filter:invert(1)}
.vx .vx-more:hover::after{transform:translateX(3px)}

/* tarjeta de trabajo: captura real en doble marco y pie debajo (nunca encima de la imagen) */
.vx .vx-work{display:grid;gap:14px;align-content:start;color:inherit;text-decoration:none}
.vx .vx-work-img{position:relative;overflow:hidden;border-radius:22px;background:#eef4f7;box-shadow:var(--bezel),var(--el-2);aspect-ratio:4/3}
.vx .vx-work-img img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform 1.1s var(--vx-ease)}
.vx a.vx-work:hover .vx-work-img img{transform:scale(1.035)}
.vx .vx-work-t{font:600 1.15rem/1.25 var(--vx-display)}
.vx .vx-work-s{font-size:.95rem;color:var(--fg-muted)}

/* cifras grandes sin tarjetas */
.vx .vx-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,48px) clamp(20px,4vw,56px)}
.vx .vx-stat-v{display:block;font:700 clamp(2.6rem,1.6rem + 3.4vw,4.4rem)/1 var(--vx-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.vx .vx-stat-l{display:block;margin-top:10px;max-width:24ch;color:var(--fg-muted);font-size:1rem}
.vx .vx-stat{padding-top:18px;border-top:2px solid var(--vx-acc)}

/* tiles enlazados (sectores, servicios) */
.vx .vx-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.vx .vx-tile{position:relative;display:grid;gap:10px;align-content:end;min-height:200px;padding:clamp(22px,3vw,32px);border-radius:28px;color:var(--vx-grafito);text-decoration:none;background:var(--tile,linear-gradient(150deg,#fff,#eaf6fc));box-shadow:var(--bezel),var(--el-2);transition:translate .45s var(--vx-ease),box-shadow .45s var(--vx-ease)}
.vx .vx-tile:hover{translate:0 -4px;box-shadow:var(--bezel),var(--el-3)}
.vx .vx-tile-t{font:600 clamp(1.4rem,1rem + 1.2vw,1.9rem)/1.1 var(--vx-display);letter-spacing:-.01em}
.vx .vx-tile-d{max-width:34ch;color:var(--vx-muted-lt);font-size:1rem}
.vx .vx-tile::after{content:'';position:absolute;top:clamp(20px,2.6vw,28px);right:clamp(20px,2.6vw,28px);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.75) var(--vx-flecha-d) center/15px no-repeat;box-shadow:var(--el-1);transition:transform .45s var(--vx-ease)}
.vx .vx-tile:hover::after{transform:translateX(3px)}

/* testimonios: una cita grande y dos pequeñas */
.vx .vx-quotes{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(16px,2vw,24px)}
.vx .vx-quotes > :first-child{grid-row:span 2}
.vx .vx-qcard{display:grid;gap:18px;align-content:space-between;padding:clamp(24px,3.4vw,40px);border-radius:28px;background:var(--gl-claro);border:1px solid var(--gl-claro-borde);box-shadow:var(--bezel),var(--el-2)}
.vx .vx-qcard blockquote{font:500 clamp(1.15rem,1rem + .5vw,1.35rem)/1.35 var(--vx-display);text-wrap:pretty}
.vx .vx-quotes > :first-child blockquote{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.2rem);line-height:1.22}
.vx .vx-qcard figcaption{font-size:.95rem;color:var(--fg-muted)}
.vx .vx-qcard figcaption b{display:block;color:var(--fg);font:600 1rem/1.3 var(--vx-display)}

/* artículos: uno destacado y una lista */
.vx .vx-posts{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.vx .vx-post{display:grid;gap:12px;color:inherit;text-decoration:none}
.vx .vx-post-img{overflow:hidden;border-radius:22px;aspect-ratio:16/9;box-shadow:var(--bezel),var(--el-2);background:#eef4f7}
.vx .vx-post-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--vx-ease)}
.vx .vx-post:hover .vx-post-img img{transform:scale(1.035)}
.vx .vx-post-k{font-size:.9rem;color:var(--fg-muted)}
.vx .vx-post-t{font:600 clamp(1.15rem,1rem + .6vw,1.45rem)/1.25 var(--vx-display);text-wrap:balance}
.vx .vx-post:hover .vx-post-t{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.vx .vx-postlist{display:grid}
.vx .vx-postlist .vx-post{grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:center;padding-block:18px;border-top:1px solid var(--line)}
.vx .vx-postlist .vx-post:first-child{border-top:0;padding-top:0}
.vx .vx-postlist .vx-post-img{aspect-ratio:1;border-radius:16px;box-shadow:var(--el-1)}
.vx .vx-postlist .vx-post-t{font-size:1.1rem}

/* formulario */
.vx .vx-form{display:grid;gap:18px}
.vx .vx-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.vx .vx-field{display:grid;gap:8px;align-content:start}
.vx .vx-field label,.vx .vx-field legend{font:600 .98rem/1.3 var(--vx-display);color:var(--vx-grafito)}
.vx .vx-field .vx-help{font-size:.9rem;color:var(--vx-muted-lt)}
.vx .vx-field :is(input:not([type=checkbox]):not([type=radio]),select,textarea){width:100%;min-height:52px;padding:12px 16px;border-radius:16px;border:1.5px solid rgba(34,52,61,.22);background:rgba(255,255,255,.9);color:var(--vx-grafito);font:400 1.05rem/1.4 var(--vx-body);transition:border-color .2s,box-shadow .2s}
.vx .vx-field textarea{min-height:150px;resize:vertical}
.vx .vx-field :is(input:not([type=checkbox]):not([type=radio]),select,textarea)::placeholder{color:#6a7679}
.vx .vx-field :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{outline:none;border-color:var(--vx-azul-txt);box-shadow:0 0 0 4px rgba(0,113,165,.18)}
.vx .vx-field [aria-invalid="true"]{border-color:#b3261e}
.vx .vx-err{font-size:.92rem;color:#b3261e}
.vx .vx-err:empty{display:none}
.vx .vx-check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;font-size:.98rem;color:var(--vx-muted-lt)}
.vx .vx-check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--vx-azul-txt)}
.vx .vx-check a{color:var(--vx-azul-txt)}
.vx .vx-chips{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0;padding:0}
.vx .vx-chips label{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(34,52,61,.22);background:rgba(255,255,255,.8);font:500 .98rem/1 var(--vx-display);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.vx .vx-chips input{position:absolute;opacity:0;pointer-events:none}
.vx .vx-chips input:checked + span{color:var(--vx-azul-txt)}
.vx .vx-chips label:has(input:checked){border-color:var(--vx-azul-txt);background:rgba(0,159,227,.1)}
.vx .vx-chips label:has(input:focus-visible){outline:3px solid var(--vx-azul-txt);outline-offset:2px}

/* lectura larga (blog y legales) */
.vx .vx-prose{max-width:70ch;font-size:1.125rem;line-height:1.75;color:var(--vx-grafito)}
.vx .vx-prose > * + *{margin-top:1.1em}
.vx .vx-prose :is(h2,h3,h4){font-family:var(--vx-display);line-height:1.2;letter-spacing:-.01em;scroll-margin-top:96px;text-wrap:balance}
.vx .vx-prose h2{margin-top:2.2em;font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);font-weight:600}
.vx .vx-prose h3{margin-top:1.8em;font-size:clamp(1.2rem,1.05rem + .6vw,1.4rem);font-weight:600}
.vx .vx-prose h4{margin-top:1.6em;font-size:1.1rem;font-weight:600}
.vx .vx-prose > :first-child{margin-top:0}
.vx .vx-prose p{color:#33454d;text-wrap:pretty}
.vx .vx-prose :is(ul,ol){padding-left:1.4em}
.vx .vx-prose ul{list-style:disc}
.vx .vx-prose ol{list-style:decimal}
.vx .vx-prose li + li{margin-top:.45em}
.vx .vx-prose li::marker{color:var(--vx-acc-ink)}
.vx .vx-prose a{color:var(--vx-azul-txt);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;overflow-wrap:anywhere}
.vx .vx-prose a:hover{text-decoration-thickness:2px}
.vx .vx-prose img{height:auto;border-radius:18px}
.vx .vx-prose blockquote{padding:4px 0 4px 20px;border-left:3px solid var(--vx-acc);font-style:italic;color:#33454d}
.vx .vx-prose table{width:100%;border-collapse:collapse;font-size:1rem;display:block;overflow-x:auto}
.vx .vx-prose :is(th,td){padding:10px 12px;border-bottom:1px solid rgba(34,52,61,.12);text-align:left;vertical-align:top}
.vx .vx-prose th{font-family:var(--vx-display);font-weight:600}
.vx .vx-toc{display:grid;gap:10px;padding:18px 20px;border-radius:22px;background:rgba(234,246,252,.7);border:1px solid rgba(255,255,255,.95);font-size:.95rem}
.vx .vx-toc p{font:600 .76rem/1.2 var(--vx-display);letter-spacing:.14em;text-transform:uppercase;color:var(--vx-petroleo)}
.vx .vx-toc ol{display:grid;gap:6px;counter-reset:t}
.vx .vx-toc a{display:block;color:var(--vx-grafito);text-decoration:none;line-height:1.35}
.vx .vx-toc a:hover{color:var(--vx-azul-txt);text-decoration:underline;text-underline-offset:3px}

@media (max-width:860px){
  .vx .vx-quotes,.vx .vx-posts,.vx .vx-form-row{grid-template-columns:minmax(0,1fr)}
  .vx .vx-quotes > :first-child{grid-row:auto}
}
@media (max-width:640px){
  .vx .vx-tiles,.vx .vx-stats{grid-template-columns:minmax(0,1fr)}
  .vx .vx-tile{min-height:170px}
  .vx .vx-postlist .vx-post{grid-template-columns:88px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .vx [data-vx-in]{transition:none}
  .vx :is(.vx-work-img img,.vx-post-img img,.vx-tile,.vx-tile::after,.vx-more::after){transition:none}
}

/* ==========================================================================
   6. Modo luminoso (petición de Xavi, 16 de octubre de 2026): menos oscuro.
      El hero y los problemas también son claros; el «antes» se distingue
      con un azul grisáceo suave en lugar de con grafito.
   ========================================================================== */
.vx.vx{background:#f2f8fb}
.vx.vx :is(.vx-dark,.vx-deep){--fg:var(--vx-grafito);--fg-muted:var(--vx-muted-lt);--line:rgba(34,52,61,.14);--focus:var(--vx-azul-txt)}
.vx.vx .vx-dark{background:
  radial-gradient(52% 62% at 92% 10%,color-mix(in srgb,var(--vx-acc) 22%,transparent),transparent 70%),
  radial-gradient(45% 55% at 0% 100%,rgba(0,159,227,.14),transparent 70%),
  linear-gradient(170deg,#ffffff 0%,#f1f8fc 55%,#e6f2f8 100%)}
.vx.vx .vx-deep{background:
  radial-gradient(45% 50% at 96% 0%,color-mix(in srgb,var(--vx-acc) 12%,transparent),transparent 70%),
  linear-gradient(180deg,#e6f2f8 0%,#edf3f6 100%)}
.vx.vx :is(.vx-dark,.vx-deep) :is(.vx-risk,.vx-pillar,.vx-factor,.vx-case){background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.95);box-shadow:var(--el-2)}
.vx.vx :is(.vx-dark,.vx-deep) .vx-risk:hover{background:#fff}
.vx.vx :is(.vx-dark,.vx-deep) .vx-eyebrow{color:var(--vx-acc-ink);background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(16,40,52,.08)}
.vx.vx :is(.vx-dark,.vx-deep) .vx-more{color:var(--vx-azul-txt)}
.vx.vx :is(.vx-dark,.vx-deep) .vx-more::after{filter:none}
.vx.vx :is(.vx-dark,.vx-deep) .vx-btn--line{background:rgba(255,255,255,.7)}
.vx.vx :is(.vx-dark,.vx-deep) .vx-btn--line:hover{background:#fff}
.vx.vx :is(.vx-dark,.vx-deep) .vx-q{background:var(--gl-claro);border-color:var(--gl-claro-borde)}
/* punto de giro: de azul grisáceo a hielo, con la línea del horizonte */
.vx.vx .vx-turn{height:clamp(140px,22vw,260px);background:
  radial-gradient(60% 55% at 50% 70%,color-mix(in srgb,var(--vx-acc) 20%,transparent),transparent 70%),
  linear-gradient(to bottom,#edf3f6 0%,#e7f3f9 55%,var(--vx-hielo) 100%)}
/* pie en petróleo de marca, más luminoso que el grafito */
.vx-footer{background:radial-gradient(45% 70% at 100% 0%,rgba(0,159,227,.3),transparent 70%),radial-gradient(40% 60% at 0% 100%,rgba(56,214,196,.16),transparent 70%),linear-gradient(160deg,#035a71,#02485b)}
.vx-footer .vx-ft-k{color:#8fdcfb}
.vx-footer .vx-ft-bottom{border-top-color:rgba(255,255,255,.18)}

/* 7. Hover en tarjetas, pestañas y enlaces (petición de Xavi, 17 de octubre de 2026) */
.vx.vx :is(.vx-risk,.vx-factor,.vx-pc,.vx-tool,.vx-pillar,.vx-hire li,.vx-stop-box,.vx-principles li){transition:translate .35s var(--vx-ease),box-shadow .35s var(--vx-ease),border-color .3s,background-color .3s}
.vx.vx :is(.vx-risk,.vx-factor,.vx-pc,.vx-tool,.vx-pillar,.vx-hire li,.vx-stop-box,.vx-principles li)[data-vx-in]{transition:opacity .9s var(--vx-ease),transform 1.1s var(--vx-ease),translate .35s var(--vx-ease),box-shadow .35s var(--vx-ease),border-color .3s,background-color .3s;transition-delay:calc(var(--i,0) * 90ms),calc(var(--i,0) * 90ms),0s,0s,0s,0s}
.vx.vx .vx-q button{transition:color .25s,padding-left .3s var(--vx-ease)}
.vx.vx .vx-q button::after{transition:transform .3s var(--vx-ease),color .25s}
.vx-header .vx-hd-link{transition:background-color .25s var(--vx-ease),color .25s,transform .3s var(--vx-ease)}
.vx-header .vx-hd-logo{transition:transform .4s var(--vx-ease)}
.vx-header .vx-mega-t,.vx-header .vx-mega-d{transition:transform .3s var(--vx-ease),color .25s}
.vx-footer .vx-ft-social a,.vx-footer .vx-ft-logo{transition:background-color .25s,border-color .25s,transform .3s var(--vx-ease)}
@media (hover:hover){
  .vx.vx :is(.vx-risk,.vx-factor,.vx-pc,.vx-tool,.vx-pillar,.vx-hire li,.vx-stop-box,.vx-principles li):hover{translate:0 -3px;box-shadow:var(--el-3);border-color:color-mix(in srgb,var(--vx-acc,#009fe3) 40%,transparent)}
  .vx.vx .vx-step:hover .vx-step-n{transform:scale(1.12);box-shadow:0 0 0 6px color-mix(in srgb,var(--vx-acc,#009fe3) 22%,transparent)}
  .vx.vx .vx-hire li:hover .vx-hire-n{transform:scale(1.1)}
    .vx.vx .vx-q button:hover{color:var(--vx-azul-txt);padding-left:6px}
  .vx.vx .vx-q button:hover::after{transform:rotate(90deg);color:var(--vx-azul-txt)}
  .vx.vx .vx-q button[aria-expanded="true"]:hover::after{transform:rotate(135deg)}
  .vx.vx .vx-chips label:hover{border-color:var(--vx-azul-txt);background:#fff;translate:0 -2px}
  .vx.vx .vx-btn--line:hover{translate:0 -2px}
  .vx.vx a.vx-work:hover .vx-work-t{color:var(--vx-azul-txt)}
  .vx-header .vx-hd-link:hover{color:var(--vx-azul-txt);transform:translateY(-1px)}
  .vx-header .vx-hd-logo:hover{transform:scale(1.03)}
  .vx-header .vx-mega-a:hover .vx-mega-t{color:var(--vx-azul-txt);transform:translateX(3px)}
  .vx-header .vx-mega-a:hover .vx-mega-d{transform:translateX(3px)}
  .vx-header .vx-hd-more:hover{background:var(--vx-petroleo)}
  .vx-footer .vx-ft-social a:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
  .vx-footer .vx-ft-logo:hover{transform:scale(1.03)}
}
@media (prefers-reduced-motion:reduce){
  .vx.vx :is(.vx-risk,.vx-factor,.vx-pc,.vx-tool,.vx-pillar,.vx-hire li,.vx-stop-box,.vx-principles li,.vx-chips label,.vx-btn--line):hover{translate:none}
  .vx.vx .vx-q button:hover{padding-left:0}
}

/* 8. Pie en móvil: sin desbordes y bloque legal centrado */
.vx-footer .vx-ft-contact a,.vx-footer .vx-ft-contact li{overflow-wrap:anywhere}
@media (max-width:640px){
  .vx-footer .vx-ft-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 18px}
  .vx-footer .vx-ft-bottom{flex-direction:column;justify-content:center;text-align:center}
  .vx-footer .vx-ft-bottom ul{justify-content:center}
}