/* ============================================================
   MARCA · victorpi.com — CSS base reutilizable
   Tokens de color, tipografia y componentes para cualquier documento.
   Empareja con: montserrat-embed.css (fuentes) e isotipo-vp.svg (marca).
   ============================================================ */

:root{
  /* --- Colores de marca (FIJOS, son especificacion) --- */
  --c-primary:#154d62;   /* Azul Petroleo   */
  --c-accent:#ff9c63;    /* Naranja Senal   */
  --c-mint:#76d6c8;      /* Turquesa Menta  */
  --c-pastel:#eff5f5;    /* Bruma (fondo)   */

  /* --- Tokens de tema (LIGHT por defecto) --- */
  --ground:#ffffff;
  --ground-2:#f6fafa;
  --surface:#eff5f5;
  --surface-2:#e4eeee;
  --ink:#0e2a35;         /* tinta azulada (texto principal) */
  --ink-soft:#456069;
  --ink-faint:#7d959c;
  --line:#d7e5e5;
  --line-strong:#c2d6d6;
  --link:#154d62;
  --shadow:0 1px 2px rgba(14,42,53,.04),0 12px 34px -18px rgba(14,42,53,.28);
  --focus:var(--c-accent);
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0a1f28; --ground-2:#0d2530; --surface:#102e39; --surface-2:#143845;
    --ink:#e9f2f2; --ink-soft:#a6c1c8; --ink-faint:#6e8d95; --line:#1d4353; --line-strong:#265161;
    --link:#8fd4e6; --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 40px -20px rgba(0,0,0,.6);
  }
}
:root[data-theme="light"]{
  --ground:#ffffff; --ground-2:#f6fafa; --surface:#eff5f5; --surface-2:#e4eeee;
  --ink:#0e2a35; --ink-soft:#456069; --ink-faint:#7d959c; --line:#d7e5e5; --line-strong:#c2d6d6;
  --link:#154d62; --shadow:0 1px 2px rgba(14,42,53,.04),0 12px 34px -18px rgba(14,42,53,.28);
}
:root[data-theme="dark"]{
  --ground:#0a1f28; --ground-2:#0d2530; --surface:#102e39; --surface-2:#143845;
  --ink:#e9f2f2; --ink-soft:#a6c1c8; --ink-faint:#6e8d95; --line:#1d4353; --line-strong:#265161;
  --link:#8fd4e6; --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 40px -20px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* --- Tipografia / jerarquia ---
   Marca = GT Walsheim (logo, titulares en piezas graficas).
   Web/cuerpo = Montserrat (todo lo digital). Este CSS usa Montserrat. */
.h-display{font-weight:800;letter-spacing:-.035em;line-height:.98;text-wrap:balance}
.h-2{font-weight:800;letter-spacing:-.025em;line-height:1.06;text-wrap:balance}
.h-3{font-weight:700;letter-spacing:-.01em}
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);font-weight:500;line-height:1.6;text-wrap:pretty}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint)}
.eyebrow .bar{width:26px;height:2px;background:var(--c-accent);border-radius:2px}
p{max-width:66ch;color:var(--ink-soft)}
a{color:var(--link)}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* --- Isotipo VP recoloreable ---
   Uso: pega el <symbol id="vpmark"> del SKILL.md una vez, luego
   <svg class="mark mark--ondark"><use href="#vpmark"/></svg> */
.mark{display:inline-block;width:48px;height:48px}
.mark{--mv:var(--c-primary);--mp:var(--c-accent)}      /* por defecto: sobre claro   */
.mark--ondark{--mv:var(--c-pastel);--mp:var(--c-accent)} /* sobre azul/oscuro         */
.mark--white{--mv:#fff;--mp:var(--c-accent)}            /* sobre foto/oscuro puro     */
.mark--mono-primary{--mv:var(--c-primary);--mp:var(--c-primary)} /* monocromo azul     */
.mark--mono-pastel{--mv:var(--c-pastel);--mp:var(--c-pastel)}    /* monocromo claro    */

/* --- Botones --- */
.btn{display:inline-flex;align-items:center;gap:9px;font:inherit;font-weight:700;cursor:pointer;
  padding:12px 22px;border-radius:10px;border:1px solid transparent;text-decoration:none;transition:.16s}
.btn--primary{background:var(--c-primary);color:var(--c-pastel)}
.btn--primary:hover{filter:brightness(1.08)}
.btn--accent{background:var(--c-accent);color:#5a2f18}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--c-accent)}

/* --- Card --- */
.card{background:var(--ground-2);border:1px solid var(--line);border-radius:12px;padding:26px}
.card h4{margin:0 0 6px;font-size:1.04rem;font-weight:700;letter-spacing:-.01em}
.card p{margin:0;font-size:.96rem}

/* --- Superficies ancla --- */
.on-primary{background:var(--c-primary);color:var(--c-pastel)}
.on-primary--glow{background:
  radial-gradient(120% 90% at 82% -10%,rgba(118,214,200,.16),transparent 60%),
  radial-gradient(90% 70% at 8% 108%,rgba(255,156,99,.16),transparent 60%),var(--c-primary);
  color:var(--c-pastel)}

/* --- Utilidades de layout --- */
.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media(min-width:720px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}}
.tnums{font-variant-numeric:tabular-nums}