/* Tokens del design system "Harrison Herreño — Marca Personal" (copia fiel de tokens/*.css)
   + @font-face locales. Fuentes en WOFF2, servidas desde el mismo dominio. */
@font-face{font-family:"Open Sans";src:url(../assets/fonts/OpenSans-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Open Sans";src:url(../assets/fonts/OpenSans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Open Sans";src:url(../assets/fonts/OpenSans-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Open Sans";src:url(../assets/fonts/OpenSans-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Open Sans";src:url(../assets/fonts/OpenSans-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Open Sans";src:url(../assets/fonts/OpenSans-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"PT Serif";src:url(../assets/fonts/PTSerif-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"PT Serif";src:url(../assets/fonts/PTSerif-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"PT Serif";src:url(../assets/fonts/PTSerif-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"PT Serif";src:url(../assets/fonts/PTSerif-BoldItalic.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}

:root{
  --indigo-50:#eeecfb;--indigo-100:#ddd6f7;--indigo-200:#bcaeef;--indigo-300:#9682e4;--indigo-400:#6742d6;
  --indigo-500:#3711bf;--indigo-600:#2d0da4;--indigo-700:#280d8c;--indigo-800:#200a72;--indigo-900:#180e59;
  --ink-950:#04061a;--ink-900:#070c26;--ink-800:#0d0f38;--ink-700:#180e59;--ink-600:#241a6e;
  --cyan-50:#e6f8fd;--cyan-100:#c4eefa;--cyan-300:#8fe0f7;--cyan-400:#5ad3f3;--cyan-500:#38c8f0;--cyan-600:#0a7fa6;--cyan-700:#075f7d;
  --white:#fff;--gray-50:#f6f6fb;--gray-100:#eeeef5;--gray-200:#e0e0ec;--gray-300:#c7c7d8;--gray-400:#9a9ab0;
  --gray-500:#6e6e88;--gray-600:#4e4e66;--gray-700:#363650;--gray-800:#22223a;--gray-900:#131226;
  --success:#2f8f6b;--warning:#e0a419;--danger:#d93838;

  --font-serif:"PT Serif",Georgia,"Times New Roman",serif;
  --font-sans:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ls-tight:-0.02em;--ls-eyebrow:0.22em;

  --radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(7,12,38,.06);
  --shadow-sm:0 1px 3px rgba(7,12,38,.08),0 1px 2px rgba(7,12,38,.04);
  --shadow-md:0 6px 16px rgba(7,12,38,.10);
  --shadow-lg:0 18px 40px rgba(7,12,38,.14);
  --shadow-xl:0 32px 64px rgba(7,12,38,.20);
  --shadow-brand:0 16px 34px rgba(55,17,191,.30);
  --shadow-accent:0 14px 30px rgba(56,200,240,.32);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --gutter:clamp(20px,5vw,80px);
  --ring:color-mix(in srgb,var(--indigo-500) 45%,transparent);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:none;box-shadow:0 0 0 4px var(--ring);border-radius:6px}

/* páginas (router por hash) */
.page{display:none}.page.on{display:block}

/* iconos sociales inline */
.ico{width:18px;height:18px;display:inline-block;vertical-align:middle}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:1500;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;display:none;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.wa-float .ico{width:28px;height:28px}
@media (max-width:760px){.wa-float{display:grid}}