/* Andrómeda Vargas · CV. Diseño del generador de su marca (scripts/cv.py del skill andromeda-brand). */
@font-face { font-family: "Sora"; font-weight: 300; font-style: normal; font-display: swap; src: url("fuentes/sora-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 400; font-style: normal; font-display: swap; src: url("fuentes/sora-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 600; font-style: normal; font-display: swap; src: url("fuentes/sora-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fuentes/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("fuentes/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
/* Layout: encabezado noche con la constelación; cuerpo en dos columnas (experiencia como línea de estrellas a la izquierda, formación y trayectoria académica a la derecha); se apila en celular e imprime en tamaño carta. */
/* Los colores salen de andromeda.css (tokens de su marca). */
:root{
  --bg:var(--brand-bg); --surface:var(--brand-surface); --fg:var(--brand-text); --muted:var(--brand-text-muted); --line:var(--brand-line);
  --accent:var(--brand-primary); --accent2:var(--brand-magenta-text); --soft:var(--brand-soft);
  --night:var(--brand-night); --star:var(--brand-light); --lav:var(--brand-lavender); --mag:var(--brand-magenta); --gal:var(--brand-galaxy);
  --f:var(--brand-font); --mono:var(--brand-font-mono);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--accent2:var(--brand-accent)}}
:root[data-theme="dark"]{--accent2:var(--brand-accent)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f);font-size:15px;line-height:1.6;padding-inline:16px;padding-block:28px 56px}
.page{max-width:1000px;margin-inline:auto;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
header.top{background:var(--night);color:var(--star);padding:clamp(24px,5vw,44px);position:relative;overflow:hidden;display:grid;gap:14px}
header.top .sky{position:absolute;right:-40px;top:-30px;width:min(420px,70%);height:auto;opacity:.95;pointer-events:none}
header.top .sym{width:clamp(150px,26vw,240px);height:auto;position:absolute;right:clamp(16px,5vw,56px);top:50%;transform:translateY(-50%)}
header.top>*:not(.sym){position:relative;max-width:min(620px,64%)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--lav)}
header.top h1{font-weight:600;font-size:clamp(30px,5vw,46px);line-height:1.05;letter-spacing:-.02em}
header.top .spec{font-size:16px;color:var(--lav);font-weight:300}
.contact{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:13px;color:var(--star)}
.contact button{font:inherit;font-size:12px;background:transparent;color:var(--lav);border:1px solid color-mix(in srgb,var(--lav) 45%,transparent);border-radius:99px;padding:3px 12px;cursor:pointer}
.contact button:hover,.contact button:focus-visible{border-color:var(--lav);outline:none}
.motto{font-size:13px;font-style:italic;color:color-mix(in srgb,var(--mag) 70%,var(--star))}
@media (max-width:700px){header.top .sym{position:static;transform:none;width:120px;order:-1}header.top>*:not(.sym){max-width:100%}}
.body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:0}
@media (max-width:820px){.body{grid-template-columns:minmax(0,1fr)}}
.main,.aside{padding:clamp(20px,4vw,36px);display:grid;gap:28px;align-content:start}
.aside{background:var(--soft)}
h2{font-size:12px;font-family:var(--mono);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px}
h2::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mag);box-shadow:0 0 0 4px color-mix(in srgb,var(--mag) 18%,transparent);flex:none}
.sec{display:grid;gap:12px}
.lead{font-size:15.5px}
.lead + .lead{color:var(--muted)}
.tl{list-style:none;margin:0;padding:0;display:grid;gap:18px;position:relative}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1.5px;background:linear-gradient(var(--gal),var(--line))}
.tl li{position:relative;padding-left:26px;display:grid;gap:3px;break-inside:avoid}
.tl li::before{content:"";position:absolute;left:0;top:6px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--gal)}
.tl li.now::before{background:var(--mag);border-color:var(--mag);box-shadow:0 0 0 5px color-mix(in srgb,var(--mag) 20%,transparent)}
.tl .row{display:flex;justify-content:space-between;gap:4px 14px;flex-wrap:wrap;align-items:baseline}
.tl b{font-weight:600;font-size:15.5px}
.tl .when{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.tl .where{font-size:13.5px;color:var(--accent2);font-weight:500}
.tl p{font-size:14px;color:var(--muted)}
.deg{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.deg li{display:grid;gap:1px}
.deg small{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.deg b{font-weight:600}
.deg em{font-style:normal;font-size:13px;color:var(--accent2)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-size:13px;padding:4px 11px;border-radius:99px;background:var(--surface);border:1px solid var(--line)}
.plain{margin:0;padding-left:18px;display:grid;gap:7px;font-size:13.5px}
.plain li::marker{color:var(--mag)}
footer.foot{border-top:1px solid var(--line);padding:14px clamp(20px,4vw,36px);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
@media print{
  @page{size:letter;margin:12mm}
  body{background:var(--brand-white);padding:0;font-size:10.5px;line-height:1.45}
  header.top{padding:20px 26px;gap:8px} header.top h1{font-size:28px} header.top .sym{width:120px}
  .main,.aside{padding:16px 20px;gap:14px} .tl{gap:9px} .tl b{font-size:12px} .tl p,.plain,.lead{font-size:10.5px} .tl .where{font-size:10.5px}
  .sec{gap:7px} .deg{gap:5px} .plain{gap:3px} .chips span{font-size:10px;padding:2px 8px}
  .page{border:0;border-radius:0;max-width:none}
  header.top,.aside,.tl li.now::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .contact button,.barra{display:none}
  .body{grid-template-columns:1.6fr 1fr}
}
.barra{max-width:1000px;margin:0 auto 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--mono);font-size:13px}
.barra a{color:var(--accent);text-decoration:none}
.barra button{font:inherit;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:99px;padding:6px 14px;cursor:pointer}
.barra button:hover{border-color:var(--accent)}
footer.foot a{color:inherit}
.contact a{color:var(--lav);text-decoration:underline;text-underline-offset:3px}
header.top .foto{width:104px;height:104px;border-radius:50%;object-fit:cover;object-position:50% 35%;box-shadow:0 0 0 3px var(--night),0 0 0 5px var(--lav),0 0 0 11px color-mix(in srgb,var(--mag) 30%,transparent);margin:11px 0 6px 11px}
@media print{header.top .foto{width:76px;height:76px;-webkit-print-color-adjust:exact;print-color-adjust:exact}}
@media (max-width:700px){header.top .sym{position:absolute;right:20px;top:26px;transform:none;width:76px;order:0}}
@media print{
  .barra{display:none}
  /* En papel las listas van en bloque: las cuadrículas dejan huecos al cortar la hoja. */
  .main,.aside,.sec,.tl,.deg,.plain{display:block}
  .sec+.sec{margin-top:14px} .sec>h2{margin-bottom:7px}
  .tl li{display:block;margin-bottom:9px} .tl .where{display:block}
  .deg li{margin-bottom:5px} .deg small,.deg b,.deg em{display:block} .deg em{font-size:10.5px}
  .plain li{margin-bottom:3px} .lead+.lead{margin-top:6px}
}
/* En papel el encabezado va a sangre: de orilla a orilla y desde el borde superior de la primera hoja. */
@media print{
  @page{size:letter;margin:12mm 0}
  @page:first{margin-top:0}
  header.top{padding:30px 15mm 24px}
  header.top .sym{right:15mm}
  .main{padding-left:15mm} .aside{padding-right:13mm}
  footer.foot{padding-inline:15mm}
}