/* Base compartida — Adrian Linares · brand v1.1
   Tokens, tipografía y elementos comunes. Cada página añade lo suyo. */

@font-face{font-family:'Archivo';src:url('fonts/archivo-var-latin.woff2') format('woff2-variations');font-weight:100 900;font-display:swap;}
@font-face{font-family:'Martian Mono';src:url('fonts/martianmono-var-latin.woff2') format('woff2-variations');font-weight:300 800;font-display:swap;}

:root{
  --green-signal:#12A55F; --green-prod:#0B7F4A; --green-light:#3ECF8E;
  --amber-signal:#C4820A; --amber-ink:#8A5E00;
  --red:#D92D2D; --red-light:#FF5D5D;

  --font-display:'Archivo',system-ui,sans-serif;
  --font-mono:'Martian Mono',ui-monospace,monospace;

  --bg:#FFFFFF; --surface:#F7F9F9; --text:#0D1117; --muted:#5A6874; --border:#E4E9EC;
  --hair:#EDF1F2;
  --accent:var(--green-prod); --accent-2:var(--amber-ink); --danger:var(--red);
  --cta-bg:var(--green-prod); --cta-text:#FFFFFF; --focus:var(--green-prod);
  --status-running:var(--green-signal); --status-progress:var(--amber-signal);

  --gap-xs:clamp(8px,1vw,12px);
  --gap-s:clamp(16px,2vw,24px);
  --gap-m:clamp(32px,4vw,52px);
  --gap-l:clamp(52px,6vw,84px);
  --maxw:1120px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0D1117; --surface:#161B22; --text:#E9EEF3; --muted:#94A1AE;
    --border:#242C38; --hair:#1C232D;
    --accent:var(--green-light); --accent-2:#E8A93B; --danger:var(--red-light);
    --cta-bg:var(--green-light); --cta-text:#0D1117; --focus:var(--green-light);
    --status-running:var(--green-light); --status-progress:#E8A93B;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1117; --surface:#161B22; --text:#E9EEF3; --muted:#94A1AE;
  --border:#242C38; --hair:#1C232D;
  --accent:var(--green-light); --accent-2:#E8A93B; --danger:var(--red-light);
  --cta-bg:var(--green-light); --cta-text:#0D1117; --focus:var(--green-light);
  --status-running:var(--green-light); --status-progress:#E8A93B;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-display);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1.08;letter-spacing:-.025em;font-weight:700;}
h1{font-size:clamp(38px,6vw,66px);}
h2{font-size:clamp(28px,3.4vw,38px);}
h3{font-size:clamp(20px,2.2vw,25px);letter-spacing:-.015em;font-weight:600;line-height:1.25;}
p{margin:0 0 1em;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}
a:active{opacity:.7;}
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:clamp(20px,4vw,40px);}
.mono{font-family:var(--font-mono);font-variant-ligatures:none;}

.route{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.02em;
  color:var(--muted);display:flex;align-items:center;gap:10px;margin:0 0 var(--gap-s);}
.route::after{content:"";flex:1;height:1px;background:var(--hair);}

/* cabecera */
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--hair);}
.hrow{display:flex;align-items:center;gap:20px;height:62px;}
.logo{font-weight:700;font-size:16.5px;color:var(--text);letter-spacing:-.02em;display:flex;align-items:center;gap:7px;}
.logo:hover{text-decoration:none;}
.logo .dot{width:7px;height:7px;border-radius:50%;background:var(--status-running);flex:none;}
nav{margin-left:auto;display:flex;gap:6px;align-items:center;}
nav .nlink{font-size:14.5px;color:var(--muted);padding:7px 11px;border-radius:5px;}
nav .nlink:hover{color:var(--text);background:var(--hair);text-decoration:none;}
nav .nlink:active{background:var(--border);}

.btn-ghost{font-family:var(--font-mono);font-size:11px;font-weight:600;background:none;
  border:1px solid var(--border);color:var(--muted);padding:6px 9px;border-radius:5px;
  cursor:pointer;line-height:1;transition:border-color .15s,color .15s,background .15s;}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-ghost:active{background:var(--hair);}
.btn-ghost[disabled]{opacity:.4;cursor:not-allowed;border-color:var(--border);color:var(--muted);}

.cta{display:inline-flex;align-items:center;gap:9px;background:var(--cta-bg);color:var(--cta-text);
  font-weight:600;font-size:16px;padding:14px 22px;border-radius:7px;border:0;cursor:pointer;
  font-family:inherit;transition:transform .12s,box-shadow .15s,opacity .15s;}
.cta:hover{text-decoration:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent);}
.cta:active{transform:translateY(1px);}
.cta[disabled],.cta[aria-busy="true"]{opacity:.6;cursor:progress;pointer-events:none;}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--gap-s);align-items:center;margin-top:var(--gap-m);}

.chip{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.01em;
  color:var(--accent);display:inline-flex;align-items:center;gap:9px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  padding:7px 13px 7px 11px;border-radius:999px;line-height:1;white-space:nowrap;}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--status-running);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--status-running) 22%,transparent);}
.chip.progress{color:var(--accent-2);
  background:color-mix(in srgb,var(--accent-2) 10%,transparent);
  border-color:color-mix(in srgb,var(--accent-2) 30%,transparent);}
.chip.progress i{background:var(--status-progress);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--status-progress) 22%,transparent);}


/* ───────── retícula técnica reutilizable ─────────
   Papel milimetrado en CSS puro (0 KB). Cada variante usa una máscara
   distinta para que no se lea como el mismo patrón repetido. */
.retic{position:relative;overflow:hidden;}
.retic::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(to right, color-mix(in srgb,var(--border) 55%,transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb,var(--border) 55%,transparent) 1px, transparent 1px),
    linear-gradient(to right, color-mix(in srgb,var(--border) 90%,transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb,var(--border) 90%,transparent) 1px, transparent 1px);
  background-size:22px 22px, 22px 22px, 110px 110px, 110px 110px;
  -webkit-mask-image:radial-gradient(120% 85% at 12% 0%, #000 0%, transparent 72%);
  mask-image:radial-gradient(120% 85% at 12% 0%, #000 0%, transparent 72%);}
.retic > *{position:relative;z-index:1;}

/* variantes de máscara */
.retic--der::before{-webkit-mask-image:radial-gradient(110% 90% at 96% 8%, #000 0%, transparent 68%);
  mask-image:radial-gradient(110% 90% at 96% 8%, #000 0%, transparent 68%);}
.retic--centro::before{-webkit-mask-image:radial-gradient(85% 130% at 50% 100%, #000 0%, transparent 70%);
  mask-image:radial-gradient(85% 130% at 50% 100%, #000 0%, transparent 70%);}
.retic--franja::before{-webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 78%);
  mask-image:linear-gradient(to bottom, #000 0%, transparent 78%);}

footer{border-top:1px solid var(--hair);padding-block:var(--gap-m);font-size:14px;color:var(--muted);}
.frow{display:flex;gap:22px;flex-wrap:wrap;align-items:center;}
.frow .sp{margin-left:auto;font-family:var(--font-mono);font-size:11.5px;}
footer a{color:var(--muted);}
footer a:hover{color:var(--accent);}

.menu-btn{display:none;}
#menu{display:none;}
@media(max-width:720px){
  nav .nlink{display:none;}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;}
  #menu[data-open]{display:block;border-bottom:1px solid var(--hair);background:var(--bg);}
  #menu a{display:block;padding:13px clamp(20px,4vw,40px);color:var(--text);
    border-top:1px solid var(--hair);font-size:16px;}
  #menu a:hover{background:var(--hair);text-decoration:none;}
}


/* ── Retrato + texto ─────────────────────────────────────────────────
   La portada lleva su propia copia inline porque es autónoma (no carga
   esta hoja). Esta sirve a /sobre-mi, donde la clase `bio` estaba puesta
   en el HTML pero no la definía nadie: la foto salía a tamaño natural y
   el texto caía debajo en vez de al lado. */
.bio{--foto:150px;display:grid;grid-template-columns:var(--foto) minmax(0,1fr);
  gap:clamp(20px,3vw,36px);align-items:start;margin:var(--gap-m) 0;}
.bio img{width:var(--foto);height:calc(var(--foto) * 1.197);object-fit:cover;
  border-radius:8px;border:1px solid var(--border);display:block;}
.bio p{color:var(--muted);font-size:15.5px;margin:0 0 var(--gap-xs);max-width:58ch;}
.bio p:last-child{margin-bottom:0;}
.bio p.lead{color:var(--text);font-size:17px;font-weight:600;}
@media(max-width:860px){.bio{--foto:112px;gap:18px;}}
/* Por debajo de esto la columna de texto queda en ~250px y el parrafo
   se parte cada tres palabras: mejor la foto encima, a ancho completo. */
@media(max-width:560px){
  .bio{--foto:132px;grid-template-columns:1fr;gap:var(--gap-s);}
}