/* ════════════════════════════════════════════════════════════════
   VYRALCODE — CSS GLOBAL (Nivel 1)
   Pegar UNA sola vez en: Apariencia → Personalizar → CSS adicional
   (o, si supera el campo, en WP Code Lite → snippet de Footer como <style>).
   Sistema de color: HÍBRIDO — base Navy + acento de marca Deep Red.
   Mantener bajo 80KB (Regla 13). Tamaño actual: ~16KB.
   ════════════════════════════════════════════════════════════════ */

/* Fuentes de marca (Syne + IBM Plex). Esta línea DEBE ir la primera de todo el CSS.
   Así no necesitas WP Code: pegando este CSS, las fuentes cargan solas. */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* Navy system (superficies) */
  --navy:#060D1A; --navy2:#0C1B32; --navy3:#112244;
  --hover:rgba(255,255,255,.04);

  /* Acento de marca HÍBRIDO */
  --green:#00E5A0;          /* acción / CTA / éxito (color de conversión) */
  --green-d:#03B27D;        /* hover de botón verde */
  --crimson:#D72638;        /* DEEP RED — acento de marca (énfasis, urgencia, logo) */
  --crimson-d:#9B1623;      /* hover / sombra del rojo */
  --crimson-l:#FF6470;      /* rojo legible como TEXTO sobre navy (AA) */
  --bone:#F3EFE9;           /* bone white — texto cálido puntual */

  /* Acentos de datos (uso escaso: stats / gráficos) */
  --purple:#5C3ADE; --blue:#3B82F6; --blue-l:#60A5FA; --orange:#F5A623; --red:#EF4444;
  --purple-l:#C084FC;

  /* Texto / escala de blanco */
  --w:#fff;
  --ink:#D7DFEA;            /* CUERPO — contraste AA sobre navy */
  --g6:rgba(255,255,255,.62); --g4:rgba(255,255,255,.42);
  --g3:rgba(255,255,255,.3); --g2:rgba(255,255,255,.15);
  --g1:rgba(255,255,255,.06);

  /* Tipografía */
  --body:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Syne',var(--body);
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* Layout / radios / sombras */
  --r:12px; --rl:20px; --rs:8px;
  --maxw:1180px;
  --shadow:0 8px 24px rgba(0,0,0,.35);
  --glow-green:0 8px 30px rgba(0,229,160,.25);
  --glow-red:0 8px 30px rgba(215,38,56,.28);

  /* z-index semántico */
  --z-nav:100; --z-sticky:200; --z-backdrop:900; --z-modal:1000; --z-toast:1100;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
body{
  background:var(--navy); color:var(--ink);
  font-family:var(--body); font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--green); text-decoration:none}
a:hover{color:var(--green-d)}

/* Titulares: display, sólidos (NUNCA gradient-text) */
h1,h2,h3,h4{font-family:var(--display); color:var(--w); line-height:1.1; margin:0 0 .4em;
  letter-spacing:-.02em; text-wrap:balance; font-weight:800}
h1{font-size:clamp(2.2rem,5.2vw,4rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}
p{margin:0 0 1rem; max-width:68ch}
p.lead{font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--ink)}

/* Énfasis por COLOR sólido (sustituye al gradient-text prohibido) */
.accent{color:var(--green)}
.accent-red{color:var(--crimson-l)}

/* ---------- Contenedores ---------- */
.vc-wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(18px,4vw,32px)}
.vc-section{padding:clamp(56px,8vw,100px) 0}

/* ---------- Top bar + Trust bar (globales) ---------- */
.vc-topbar{background:linear-gradient(90deg,#0a1730,#0c1b32);
  border-bottom:1px solid var(--g2); text-align:center;
  font-size:.82rem; color:var(--g6); padding:8px 16px}
.vc-topbar b{color:var(--crimson-l)}
.vc-trustbar{background:var(--navy2); border-bottom:1px solid var(--g1);
  text-align:center; font-size:.78rem; color:var(--g4); padding:7px 16px}
.vc-trustbar .num{color:var(--green); font-weight:600}

/* ---------- Botones (verbo + objeto) ---------- */
.btn{display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  font-family:var(--body); font-weight:600; font-size:1rem; line-height:1;
  padding:16px 26px; border-radius:var(--r); border:1px solid transparent;
  cursor:pointer; transition:transform .25s cubic-bezier(.2,.8,.2,1),
  box-shadow .25s, background .25s, border-color .25s; min-height:48px}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--green); color:#03110b; box-shadow:var(--glow-green)}
.btn-primary:hover{background:var(--green-d); color:#03110b}
.btn-red{background:var(--crimson); color:#fff; box-shadow:var(--glow-red)}
.btn-red:hover{background:var(--crimson-d); color:#fff}
.btn-ghost{background:transparent; color:var(--w); border-color:var(--g3)}
.btn-ghost:hover{border-color:var(--w); background:var(--hover)}
.btn-block{width:100%}

/* ---------- Eyebrow (uso ESCASO: máx 1 por página) ---------- */
.vc-eyebrow{display:inline-block; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--green); margin-bottom:14px}

/* ---------- Badge / píldora ---------- */
.vc-badge{display:inline-flex; align-items:center; gap:.5em;
  background:rgba(0,229,160,.1); border:1px solid rgba(0,229,160,.3);
  color:var(--green); border-radius:999px; padding:7px 16px;
  font-size:.8rem; font-weight:600}
.vc-badge.red{background:rgba(215,38,56,.12); border-color:rgba(215,38,56,.35); color:var(--crimson-l)}
.vc-badge .dot{width:7px; height:7px; border-radius:50%; background:currentColor;
  box-shadow:0 0 8px currentColor}

/* ---------- Cards ---------- */
.vc-card{background:var(--navy2); border:1px solid var(--g2);
  border-radius:var(--rl); padding:clamp(20px,3vw,30px)}
.vc-card.nested{background:var(--navy3)}
.vc-card-hover{transition:border-color .25s,transform .25s,background .25s}
.vc-card-hover:hover{border-color:var(--g3); background:rgba(255,255,255,.02); transform:translateY(-3px)}

/* Ícono glass (Regla 10) */
.vc-ico{width:48px; height:48px; border-radius:14px; flex:0 0 auto;
  background:rgba(0,229,160,.1); border:1px solid rgba(0,229,160,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; color:var(--green)}
.vc-ico.red{background:rgba(215,38,56,.12); border-color:rgba(215,38,56,.32); color:var(--crimson-l)}
.vc-ico svg{width:24px; height:24px}

/* ---------- Grids responsive ---------- */
.vc-grid{display:grid; gap:20px}
.vc-grid-2{grid-template-columns:repeat(2,1fr)}
.vc-grid-3{grid-template-columns:repeat(3,1fr)}
.vc-grid-auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
@media(max-width:860px){ .vc-grid-3{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .vc-grid-2,.vc-grid-3{grid-template-columns:1fr} }

/* ---------- Stat (una métrica grande, sin abusar) ---------- */
.vc-stat .n{font-family:var(--display); font-weight:800; font-size:clamp(1.8rem,4vw,2.6rem);
  color:var(--green); line-height:1}
.vc-stat .l{font-size:.85rem; color:var(--g6); margin-top:6px}

/* ---------- Formularios (Regla 9) ---------- */
.vc-field{margin-bottom:16px}
.vc-field label{display:block; font-size:.85rem; color:var(--ink); margin-bottom:6px; font-weight:500}
.vc-input,.vc-select,.vc-textarea{
  width:100%; max-width:100%; box-sizing:border-box;
  background:var(--navy3); border:1px solid var(--g2); border-radius:var(--r);
  color:var(--w); font-family:var(--body); font-size:1rem; padding:14px 16px}
.vc-input::placeholder,.vc-textarea::placeholder{color:var(--g6)} /* AA */
.vc-input:focus,.vc-select:focus,.vc-textarea:focus{
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(0,229,160,.2)}
.vc-textarea{min-height:120px; resize:vertical; word-wrap:break-word; overflow-wrap:break-word; white-space:normal}

/* Foco visible global (a11y) */
:focus-visible{outline:2px solid var(--green); outline-offset:2px}

/* Contenedor de texto seguro (Regla 6) */
.vc-text{word-wrap:break-word; overflow-wrap:break-word; white-space:normal;
  box-sizing:border-box; width:100%; max-width:100%}

/* ---------- NAV global (header HFE) ---------- */
.vc-nav{position:sticky; top:0; z-index:var(--z-nav); background:rgba(6,13,26,.85);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--g1)}
.vc-nav .inner{display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:14px clamp(18px,4vw,32px); max-width:var(--maxw); margin-inline:auto}
.vc-logo{font-family:var(--display); font-weight:800; font-size:1.3rem; color:var(--w)}
.vc-logo .dot{color:var(--crimson)}
.vc-menu{display:flex; gap:24px; list-style:none; margin:0; padding:0}
.vc-menu a{color:var(--g6); font-size:.92rem; font-weight:500}
.vc-menu a:hover{color:var(--w)}
@media(max-width:920px){ .vc-menu{display:none} }

/* ---------- FOOTER global (footer HFE) ---------- */
.vc-footer{background:var(--navy2); border-top:1px solid var(--g1); color:var(--g6); padding:48px 0 28px}
.vc-footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; margin-bottom:32px}
.vc-footer a{color:var(--g6); font-size:.9rem; display:block; margin-bottom:8px}
.vc-footer a:hover{color:var(--w)}
.vc-footer .bottom{border-top:1px solid var(--g1); padding-top:18px; font-size:.82rem; color:var(--g4); text-align:center}
@media(max-width:720px){ .vc-footer .cols{grid-template-columns:1fr 1fr} }
@media(max-width:480px){ .vc-footer .cols{grid-template-columns:1fr} }

/* ---------- Movimiento: visible por DEFECTO; la animación solo realza ---------- */
@media (prefers-reduced-motion: no-preference){
  .vc-rise{animation:vcRise .7s cubic-bezier(.2,.8,.2,1) both}
  .vc-rise-2{animation:vcRise .7s .08s cubic-bezier(.2,.8,.2,1) both}
  .vc-rise-3{animation:vcRise .7s .16s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes vcRise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
/* Sin JS / reduced-motion: el contenido queda visible (opacity:1 por defecto del navegador) */
@media (prefers-reduced-motion: reduce){ .vc-rise,.vc-rise-2,.vc-rise-3{animation:none} }

/* ---------- Utilidades ---------- */
.tc{text-align:center}
.mx-auto{margin-inline:auto}
.mt-s{margin-top:12px} .mt-m{margin-top:24px} .mt-l{margin-top:40px}
.muted{color:var(--g6)}
.flex{display:flex; gap:14px; flex-wrap:wrap}
.flex-center{display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:center}
.checkline{display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; color:var(--ink)}
.checkline svg{flex:0 0 auto; color:var(--green); margin-top:3px}