@font-face{font-family:Inter;src:url('./assets/fonts/inter-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{color-scheme:light;--bg:#f5f5f5;--fg:#1a1a1a;--muted:#626267;--line:#d8d8db;--hover:rgba(10,10,10,.04);--accent:#ffe600;--link-hover:#1a1a1a;--focus:#8a6400}
:root[data-theme=dark]{color-scheme:dark;--bg:#0a0a0a;--fg:#fafafa;--muted:#a1a1a6;--line:#29292c;--hover:rgba(255,255,255,.04);--accent:#facc15;--link-hover:#facc15;--focus:#facc15}
*{box-sizing:border-box}
html{min-width:280px;scroll-behavior:smooth}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--fg);transition:background-color 220ms ease,color 220ms ease;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit}
button{font:inherit}
.page{width:min(100% - 48px,520px);margin-inline:auto;padding-block:28px 30px}
.topbar{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-bottom:34px}
.wordmark{font-weight:750;font-size:18px;letter-spacing:-.6px}
.brand-dot{color:var(--focus)}
.theme-toggle{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;padding:10px;border:0;border-radius:50%;background:transparent;color:var(--fg);cursor:pointer;transition:background-color 180ms ease,color 180ms ease}
.theme-toggle[hidden]{display:none}
@media(hover:hover) and (pointer:fine){.theme-toggle:hover{background:var(--hover)}}
.theme-icon,.social-icon,.link-arrow{display:block;background:currentColor;mask:var(--icon) center/contain no-repeat;-webkit-mask:var(--icon) center/contain no-repeat}
.theme-icon{height:24px;width:24px;grid-area:1/1;pointer-events:none;transition:opacity 220ms ease,transform 220ms cubic-bezier(.23,1,.32,1)}
.sun{--icon:url('./assets/icons/sun.svg');opacity:0;transform:rotate(-70deg) scale(.7)}
.moon{--icon:url('./assets/icons/moon.svg');opacity:1;transform:rotate(0) scale(1)}
[data-theme=dark] .sun{opacity:1;transform:rotate(0) scale(1)}
[data-theme=dark] .moon{opacity:0;transform:rotate(70deg) scale(.7)}
.portrait{display:block;width:80px;height:80px;object-fit:cover;object-position:center;border-radius:50%;background:var(--hover)}
.accent-rule{height:3px;width:34px;background:var(--accent);margin-top:20px;margin-bottom:14px}
h1{font-size:clamp(2.4rem,8.4vw,3.4rem);line-height:1.08;letter-spacing:-.055em;font-weight:800;margin:0;overflow-wrap:anywhere}
.description{max-width:470px;color:var(--muted);font-size:16px;line-height:1.65;margin:18px 0 0;text-wrap:pretty}
.links-section{margin-top:28px;scroll-margin-top:20px}
h2{font-weight:500;font-size:13px;line-height:1.5;color:var(--muted);margin:0 0 9px}
.link-list{list-style:none;margin:0;padding:0}
.link-list li{border-bottom:1px solid var(--line);transition:border-color 180ms ease}
.social-link{min-height:61px;display:flex;align-items:center;gap:22px;text-decoration:none;padding:14px 8px 14px 0;border-radius:3px;transition:background-color 180ms ease,color 180ms ease,box-shadow 180ms ease}
.social-icon{width:23px;height:23px;flex:none;transition:transform 220ms cubic-bezier(.23,1,.32,1)}
.link-name{font-size:16px;font-weight:500;line-height:1.4;overflow-wrap:anywhere;transition:transform 220ms cubic-bezier(.23,1,.32,1)}
.link-arrow{--icon:url('./assets/icons/arrow-up-right.svg');width:21px;height:21px;flex:none;margin-left:auto;color:var(--muted);transition:transform 220ms cubic-bezier(.23,1,.32,1),color 180ms ease}
@media(hover:hover) and (pointer:fine){.social-link:hover{background:var(--hover);color:var(--link-hover);box-shadow:inset 0 -1px var(--accent)}.social-link:hover .social-icon,.social-link:hover .link-name{transform:translateX(5px)}.social-link:hover .link-arrow{color:var(--focus);transform:translate(2px,-2px)}}
a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:5px}
.links-section:focus{outline:none}
.links-section:focus-visible>h2{outline:2px solid var(--focus);outline-offset:5px}
footer{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px;line-height:1.5;margin-top:29px}
.footer-rule{width:17px;height:1px;background:var(--line);flex:none}
.skip-link{position:fixed;top:8px;left:8px;padding:12px 16px;background:var(--bg);border:1px solid var(--focus);z-index:2;transform:translateY(-160%);text-decoration:none}
.skip-link:focus{transform:translateY(0)}
@media(min-width:768px){.page{padding-top:34px}.topbar{margin-bottom:36px}}
@media(max-width:360px){.page{width:calc(100% - 36px)}.description{font-size:15px}.topbar{margin-bottom:27px}.social-link{gap:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Custom cursors — mismo patrón que Pentágono (SVG + hotspot), acento ámbar */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  *,
  *::before,
  *::after {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><polygon points='2,2 2,16 6,12 9,18 11,17 8,11 14,11' fill='%23facc15' stroke='%230a0a0a' stroke-width='1' stroke-linejoin='round'/></svg>")
        2 2,
      auto;
  }

  /* Incluye descendientes: el * de arriba pisa el cursor del <a> en spans internos */
  a,
  button,
  [role="button"],
  input,
  textarea,
  select,
  label,
  summary,
  a *,
  button *,
  [role="button"] *,
  label *,
  summary * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M9 2 L9 12 L6 9 L4 11 L10 19 L18 14 L16 12 L13 12 L13 2 Z' fill='%23facc15' stroke='%230a0a0a' stroke-width='1' stroke-linejoin='round'/></svg>")
        6 2,
      pointer;
  }

  html[data-theme="light"] *,
  html[data-theme="light"] *::before,
  html[data-theme="light"] *::after {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><polygon points='2,2 2,16 6,12 9,18 11,17 8,11 14,11' fill='%23ffe600' stroke='%230a0a0a' stroke-width='1' stroke-linejoin='round'/></svg>")
        2 2,
      auto;
  }

  html[data-theme="light"] a,
  html[data-theme="light"] button,
  html[data-theme="light"] [role="button"],
  html[data-theme="light"] input,
  html[data-theme="light"] textarea,
  html[data-theme="light"] select,
  html[data-theme="light"] label,
  html[data-theme="light"] summary,
  html[data-theme="light"] a *,
  html[data-theme="light"] button *,
  html[data-theme="light"] [role="button"] *,
  html[data-theme="light"] label *,
  html[data-theme="light"] summary * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M9 2 L9 12 L6 9 L4 11 L10 19 L18 14 L16 12 L13 12 L13 2 Z' fill='%23ffe600' stroke='%230a0a0a' stroke-width='1' stroke-linejoin='round'/></svg>")
        6 2,
      pointer;
  }
}

/* Reduced motion keeps feedback in color only; no positional or rotational changes. */
@media(prefers-reduced-motion:reduce){.theme-icon,.social-icon,.link-name,.link-arrow{transform:none!important}}