/* ══════════════════════════════════════════════════════════════
   cv.css — hoja de estilo de los dos CV
   ──────────────────────────────────────────────────────────────
   La sirven index.html (español, /cv/) y en/index.html (inglés,
   /cv/en/). El inglés la enlaza como ../cv.css. Un solo archivo
   para los dos idiomas: cualquier cambio acá sale en ambos.

   ESTE ARCHIVO ES TUYO. Editalo libremente en Dreamweaver o donde
   quieras: el generador nunca lo sobrescribe.

   Casi todo se controla desde las variables de :root y de
   [data-theme="dark"] que están justo abajo. Cambiar un color, un
   ancho de raíl o un espaciado es una línea.

   Para probar rápido: abrí el HTML en Chrome, inspeccioná el
   elemento, tocá el valor en DevTools hasta que te guste, y recién
   ahí pegalo acá.

   Al terminar el diseño, pedime el build de envío: vuelvo a meter
   este CSS dentro del HTML para que el archivo viaje solo.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   NEO-BRUTALIST EDITORIAL
   Archivo (variable grotesque, wdth 62-125) + Space Mono
   Palette: #EDEDE9 · #0A0A0A · #FF3D00. No pure white, no pure black.
   Orange reads as text on both grounds. Rules, boxes, dither.
   ══════════════════════════════════════════════════════════════ */

:root {
  --bg:         #EDEDE9;
  --ink:        #0A0A0A;
  --accent:     #FF3D00;
  --on-accent:  #0A0A0A;
  --accent-ink: #E03400;
  --on-ink:     #EDEDE9;
  --hair:       #B4B4AE;
  --mute:       #6B6B66;
  --sunk:       #E3E3DE;
  --dither:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23000000' opacity='0.10'/%3E%3C/svg%3E");

  --rail: 92px;
  --gap:  32px;
}

html[data-theme="dark"] {
  --bg:         #0A0A0A;
  --ink:        #EDEDE9;
  --accent:     #FF4D14;
  --on-accent:  #0A0A0A;
  --accent-ink: #FF4D14;
  --on-ink:     #0A0A0A;
  --hair:       #333330;
  --mute:       #86867F;
  --sunk:       #131312;
  --dither:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23FFFFFF' opacity='0.09'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-variation-settings: 'wdth' 100, 'wght' 400;
  font-size: 16px;
  line-height: 1.52;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 54px) 90px;
  -webkit-font-smoothing: antialiased;
}
body::before { content: ''; display: block; height: 8px; background: var(--accent); }

a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--accent-ink); }
a:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
b, strong { font-variation-settings: 'wdth' 100, 'wght' 700; }
em { font-style: italic; }

/* ── MASTHEAD ─────────────────────────────────────────────── */
header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--gap);
  border-bottom: 2px solid var(--ink);
  padding: 26px 0 18px;
  background-image: var(--dither);
}
.doc-label {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
  background: var(--accent); color: var(--on-accent);
  padding: 3px 9px; margin-bottom: 16px;
}
h1 {
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 125, 'wght' 900;
  font-size: clamp(46px, 12.5vw, 178px);
  line-height: .80; letter-spacing: -0.05em; text-transform: none;
}
h1 em {
  display: block;
  font-family: 'Space Mono', monospace;
  font-style: normal; font-variation-settings: normal;
  font-size: clamp(10px, 1.35vw, 15px);
  line-height: 1.5; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute);
  margin-top: clamp(12px, 1.6vw, 22px);
}
.header-meta {
  font-family: 'Space Mono', monospace;
  font-size: 10.5px; line-height: 1.95; text-align: right; color: var(--mute);
}
.header-meta a { border-bottom-color: var(--hair); }

.theme-toggle, #toggle-all {
  margin-top: 12px;
  font-family: 'Space Mono', monospace;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid var(--ink); padding: 4px 11px; cursor: pointer;
}
.theme-toggle { background: var(--ink); color: var(--on-ink); }
#toggle-all { background: transparent; color: var(--ink); margin-left: 7px; }
.theme-toggle:hover, .theme-toggle:focus-visible,
#toggle-all:hover, #toggle-all:focus-visible {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent); outline: none;
}

/* Conmutador de idioma. Es un <a>, no un <button>: hay que anular el subrayado
   que llevan los enlaces y repetir la caja de #toggle-all. */
#lang-switch {
  display: inline-block;
  margin-top: 12px; margin-left: 7px;
  font-family: 'Space Mono', monospace;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid var(--ink); padding: 4px 11px;
  background: transparent; color: var(--ink);
  text-decoration: none; line-height: 1.5;
}
#lang-switch:hover, #lang-switch:focus-visible {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent); outline: none;
}

/* ── SECTION · swiss grid ─────────────────────────────────── */
section { border-top: 1px solid var(--ink); padding: 0 0 44px; }
section:not(.is-open) { padding-bottom: 0; }

.section-header {
  display: grid;
  grid-template-columns: var(--rail) 1fr auto;
  gap: var(--gap);
  align-items: start;
  padding: 16px 0 22px;
  cursor: pointer;
  user-select: none;
}
.section-header:hover h2 { color: var(--accent-ink); }
/* Número y título comparten línea de base: el h2 se apoya en el pie de las
   cifras, no en el borde inferior de la caja naranja. Las dos declaraciones de
   align-self son a propósito: si el navegador no entiende `baseline` en grid
   se queda con `end`, que es el comportamiento anterior.

   Es `baseline`, no `last baseline`: la segunda se cae en silencio en varios
   motores y el título vuelve a colgar de la caja. `baseline` alinea la primera
   línea, que en estos títulos es también la única. Si algún día un título pasa
   a dos líneas, la que se apoya en el número es la de arriba. */
.section-num {
  display: inline-block;
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 125, 'wght' 900;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1; letter-spacing: -0.05em;
  background: var(--accent); color: var(--on-accent);
  padding: 6px 10px 8px;
  justify-self: start;
  align-self: end;
  align-self: baseline;
}
.section-header h2 {
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 118, 'wght' 800;
  font-size: clamp(26px, 4.2vw, 54px);
  line-height: .92; letter-spacing: -0.04em; text-transform: none;
  /* max-width: 18ch; */
  align-self: end;
  align-self: baseline;
}

/* ── ACCORDION ────────────────────────────────────────────── */
.sec-toggle {
  /* Centrada con el título, no apoyada abajo. `center` en móvil hace lo mismo,
     así que las dos vistas coinciden. Para afinarla sobre el ojo medio del h2,
     un margin-top de unos pocos px acá y listo. */
  align-self: center;
  font-size: 15px; line-height: 1;
  color: var(--accent-ink);
  padding: 5px 2px;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), color .15s linear;
}
section.is-open .sec-toggle { transform: rotate(180deg); }
.section-header:hover .sec-toggle { color: var(--ink); }
.section-content {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.4, 0, .2, 1);
}
.sc-inner { overflow: hidden; min-height: 0; }
section.is-open .section-content { grid-template-rows: 1fr; }

@media (min-width: 920px) {
  section > .section-content,
  section > *:not(.section-header):not(.section-content) {
    margin-left: calc(var(--rail) + var(--gap));
  }
}

/* ── SUBSECTION ───────────────────────────────────────────── */
.subsection { margin-bottom: 30px; }
.subsection h3 {
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 112, 'wght' 800;
  font-size: 17px; line-height: 1.1; letter-spacing: -0.02em; text-transform: none;
  padding-bottom: 7px; margin-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}
.subsection h3::after {
  content: ' \25B0'; font-size: 10px; color: var(--accent-ink); vertical-align: 2px;
}

h4 {
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 112, 'wght' 800;
  font-size: clamp(18px, 2.1vw, 27px);
  line-height: 1.0; letter-spacing: -0.035em; text-transform: none;
}
.skill-group h4, .target-col h4 {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-variation-settings: normal;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  background: var(--ink); color: var(--on-ink);
  padding: 3px 8px; margin-bottom: 9px; line-height: 1.6;
}

/* ── LABELS + BOXED TEXT ──────────────────────────────────── */
.field-label {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mute); margin: 14px 0 5px;
}
.field {
  font-size: 16px; line-height: 1.6; white-space: pre-line; /* max-width: 88ch; */
  border: 1px solid var(--hair); background: var(--sunk); padding: 11px 13px;
}
.note {
  font-family: 'Space Mono', monospace;
  font-size: 10px; line-height: 1.75; letter-spacing: .04em; color: var(--mute);
  max-width: 76ch; border-left: 4px solid var(--accent);
  padding: 3px 0 3px 11px; margin-bottom: 24px;
}

/* ── ENTRY ────────────────────────────────────────────────── */
.entry, .work { padding: 20px 0; border-top: 1px solid var(--hair); }
.entry:first-of-type, .work:first-of-type { border-top: none; padding-top: 2px; }
.entry-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; flex-wrap: wrap;
}
.entry-date {
  font-family: 'Space Mono', monospace;
  font-size: 10px; letter-spacing: .1em;
  background: var(--ink); color: var(--on-ink);
  padding: 2px 8px; white-space: nowrap;
}
.entry-role {
  font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink); margin-top: 7px;
}
.entry-body { font-size: 16px; line-height: 1.6; margin-top: 10px; max-width: 88ch; }
.entry-body ul.tight { list-style: none; margin: 10px 0 0; }
.entry-body ul.tight li { padding: 4px 0 4px 18px; position: relative; }
.entry-body ul.tight li::before { content: '\25B8'; position: absolute; left: 0; color: var(--accent-ink); }
.entry-link { margin-top: 10px; }
.entry-link a {
  font-family: 'Space Mono', monospace;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid var(--ink); padding: 3px 8px; color: var(--ink);
}
.entry-link a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.org {
  font-family: 'Space Mono', monospace; font-variation-settings: normal;
  font-size: .46em; letter-spacing: .06em; color: var(--mute); text-transform: none;
}
.stack {
  display: block; margin-top: 12px;
  font-family: 'Space Mono', monospace;
  font-size: 10px; line-height: 1.8; color: var(--mute);
  border: 1px solid var(--hair); border-left: 4px solid var(--accent);
  background: var(--sunk); padding: 7px 11px;
}

/* ── WORK ─────────────────────────────────────────────────── */
.work-medium {
  font-family: 'Space Mono', monospace;
  font-size: 10px; letter-spacing: .07em; color: var(--mute); margin-top: 6px;
}
.shown {
  display: block; margin-top: 9px;
  font-family: 'Space Mono', monospace;
  font-size: 10px; line-height: 1.75; color: var(--mute);
}
.acq {
  display: inline-block; margin-top: 11px;
  font-family: 'Space Mono', monospace;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  background: var(--accent); color: var(--on-accent);
  padding: 4px 10px; background-image: var(--dither);
}
.pill {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  background: var(--ink); color: var(--on-ink); padding: 2px 6px; margin-right: 7px;
}

/* ── LISTS ────────────────────────────────────────────────── */
ul.plain { list-style: none; }
ul.plain li { padding: 6px 0; border-bottom: 1px solid var(--hair); font-size: 12.5px; max-width: 100ch; }
ul.cols { list-style: none; columns: 2; column-gap: 44px; }
ul.cols li { padding: 6px 0; border-bottom: 1px solid var(--hair); font-size: 12.5px; break-inside: avoid; }

/* ── TABLE ────────────────────────────────────────────────── */
table { width: 100%; max-width: 980px; border-collapse: collapse; margin-top: 12px; }
th {
  text-align: left;
  font-family: 'Space Mono', monospace;
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  background: var(--ink); color: var(--on-ink); padding: 5px 10px;
}
td { padding: 8px 10px; border-bottom: 1px solid var(--hair); vertical-align: top; font-size: 12.5px; }
tr:nth-child(even) td { background: var(--sunk); }

/* ── GRIDS ────────────────────────────────────────────────── */
.skills-grid, .targets-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px 34px;
}

/* ── FOOTER ───────────────────────────────────────────────── */
footer {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 56px; padding: 16px 0; border-top: 8px solid var(--accent);
  font-family: 'Space Mono', monospace;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute);
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 919px) {
  .section-header { grid-template-columns: 1fr auto; gap: 10px var(--gap); }
  .section-num { grid-column: 1; grid-row: 1; }
  .sec-toggle { grid-column: 2; grid-row: 1; align-self: center; }
  .section-header h2 { grid-column: 1 / -1; grid-row: 2; }
  header { grid-template-columns: 1fr; align-items: start; }
  .header-meta { text-align: left; margin-top: 22px; }
  ul.cols { columns: 1; }
}

/* ── PRINT ────────────────────────────────────────────────── */
@media print {
  html, html[data-theme="dark"], html[data-theme="light"] {
    --bg: #FFFFFF; --ink: #0A0A0A; --accent: #D63200; --on-accent: #FFFFFF;
    --accent-ink: #C22D00; --on-ink: #FFFFFF;
    --hair: #B4B4AE; --mute: #62625E; --sunk: #F2F2EE; --dither: none;
  }
  body { max-width: none; padding: 0; font-size: 9.5pt; }
  body::before, .theme-toggle, #toggle-all, #lang-switch, .sec-toggle { display: none; }
  .section-content { display: block !important; grid-template-rows: none !important; }
  .sc-inner { overflow: visible !important; }
  .section-header { cursor: default; }
  .entry, .work { break-inside: avoid; }
  .section-header { break-after: avoid; }
  a { border-bottom: none; }
}