/* =====================================================================
   style.css — Todos los estilos, en un solo archivo
   ---------------------------------------------------------------------
   Versión simplificada del proyecto: 3 archivos en total (index.html,
   style.css, script.js). Este archivo es la unión de los 10 módulos que
   tenía la versión anterior — quedan como 10 secciones numeradas dentro
   del mismo archivo. Buscá el número para saltar directo:

     1. TOKENS         variables de color, tipografía, espaciado
     2. RESET           normalización base del navegador
     3. TIPOGRAFÍA      escala de títulos y texto
     4. ESTRUCTURA      barra superior, secciones, pie
     5. HERO             portada
     6. COMPONENTES     métricas, tarjetas, trabajos, fichas, estudios
     7. LÍNEA DE TIEMPO el gráfico SVG (lo dibuja script.js)
     8. ANIMACIÓN       revelado al hacer scroll
     9. MODO OSCURO     redefine las variables de la sección 1 — por eso
                         va DESPUÉS de todo lo que las usa
    10. IMPRESIÓN       estilos para cuando alguien imprime la página

   El orden de las secciones importa: en CSS "el que se escribe último,
   gana" cuando dos reglas tienen la misma especificidad. No muevas la
   sección 9 más arriba, o el modo oscuro deja de funcionar.
   ===================================================================== */

/* =====================================================================
   1. TOKENS
   Las variables CSS (custom properties) se declaran una vez acá y se
   usan en todo el archivo. Cambiás un valor y cambia el sitio entero.
   ===================================================================== */
:root {
  /* Paleta ---------------------------------------------------------- */
  --tinta:        #0D2B24;   /* verde petróleo muy oscuro: el texto */
  --tinta-suave:  #1B4038;
  --papel:        #EDF0EA;   /* fondo: gris menta muy claro */
  --papel-hueso:  #F7F8F4;   /* fondo de tarjetas */
  --verde:        #1B7A5A;   /* verde de marca (viene del CV en PDF) */
  --verde-claro:  #58C29A;
  --oro:          #E8B004;   /* acento: se usa POCO, por eso se nota */
  --gris:         #5A6B62;   /* texto secundario */
  --linea:        rgba(13, 43, 36, 0.14);
  --linea-fuerte: rgba(13, 43, 36, 0.30);

  /* Tipografías ----------------------------------------------------- */
  --display: "Archivo", "Helvetica Neue", sans-serif;
  --cuerpo:  "Newsreader", Georgia, serif;
  --mono:    "JetBrains Mono", ui-monospace, "Courier New", monospace;

  /* Medidas --------------------------------------------------------- */
  --ancho-max:  1080px;
  --radio:      4px;
  --transicion: 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* =====================================================================
   2. RESET
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Compensa la barra fija: al saltar a #seccion no queda tapada. */
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

a { color: inherit; text-decoration-color: var(--linea-fuerte); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--oro); }

/* El foco del teclado SIEMPRE tiene que verse: es accesibilidad básica. */
:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Enlace "saltar al contenido": invisible hasta que se lo enfoca con Tab. */
.saltar {
  position: absolute;
  left: -9999px;
  z-index: 100;
  background: var(--tinta);
  color: var(--papel);
  padding: 0.75rem 1.25rem;
  font-family: var(--mono);
  font-size: 0.8rem;
}
.saltar:focus { left: 1rem; top: 1rem; }
/* =====================================================================
   3. TIPOGRAFÍA
   ===================================================================== */

/* El "eyebrow" es esa línea chica en mayúsculas arriba de un título.
   Acá va en monoespaciada, que le da el aire técnico del sitio. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde);
}
.eyebrow__sep { color: var(--linea-fuerte); margin: 0 0.5rem; }

.seccion__titulo {
  margin: 0;
  font-family: var(--display);
  /* 'wdth' es un eje variable de la fuente Archivo: 100 = normal,
     125 = expandida. Estirar los títulos les da carácter de afiche. */
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.seccion__intro {
  margin-top: 0.9rem;
  max-width: 46ch;
  color: var(--gris);
  font-size: 1rem;
}

.prosa { max-width: 62ch; }
.prosa p + p { margin-top: 1.1rem; }
.prosa p:first-child::first-letter {
  /* Detalle editorial: la primera letra un poco más grande. */
  font-size: 1.35em;
  font-weight: 500;
}
/* =====================================================================
   4. ESTRUCTURA
   ===================================================================== */
.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--papel) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}

.barra__marca {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--tinta);
}

.barra__nav {
  display: flex;
  gap: 1.4rem;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.barra__nav a { text-decoration: none; color: var(--gris); transition: color 180ms; }
.barra__nav a:hover { color: var(--tinta); }

.barra__idioma {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  transition: background var(--transicion), color var(--transicion);
}
.barra__idioma:hover { background: var(--tinta); color: var(--papel); }

/* En pantallas chicas escondemos los links de navegación y dejamos
   solo la marca y el idioma. El menú hamburguesa sería otra pieza de
   JS y de estado; para un CV de una sola página no hace falta. */
@media (max-width: 720px) {
  .barra__nav { display: none; }
  .barra__idioma { margin-left: auto; }
}

.seccion {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 5vw, 3rem);
}
.seccion--ancha { max-width: 1240px; }

.seccion__cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linea);
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
@media (min-width: 860px) {
  .seccion__cabeza {
    grid-template-columns: 8rem minmax(0, 1fr);
    column-gap: 2.5rem;
    align-items: baseline;
  }
  .seccion__cabeza .seccion__intro { grid-column: 2; }
}

.pie {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: 2.5rem clamp(1.25rem, 5vw, 3rem) 3.5rem;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--gris);
}
.pie__texto { margin: 0; }
.pie__texto--tenue { opacity: 0.65; }
.pie__arriba { margin-left: auto; text-decoration: none; }
.pie__arriba:hover { color: var(--tinta); }
/* =====================================================================
   5. HERO
   ===================================================================== */
.hero {
  padding: clamp(3rem, 9vw, 7rem) clamp(1.25rem, 5vw, 3rem) clamp(2rem, 5vw, 3.5rem);
}
.hero__interior { max-width: var(--ancho-max); margin-inline: auto; }

.hero__nombre {
  margin: 1.2rem 0 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  font-size: clamp(3.2rem, 1rem + 13vw, 9rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.hero__titular {
  margin-top: 1.6rem;
  max-width: 24ch;
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2rem);
  line-height: 1.25;
  font-weight: 300;
  color: var(--tinta-suave);
}

.hero__pie {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.retrato {
  margin: 0;
  width: clamp(112px, 18vw, 168px);
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  /* Un aro fino de acento: el único lugar donde el oro toca la foto. */
  box-shadow: 0 0 0 1px var(--linea-fuerte), 0 0 0 5px var(--papel), 0 0 0 6px var(--oro);
}
.retrato img { width: 100%; height: 100%; object-fit: cover; }

.hero__datos { display: grid; gap: 0.35rem; }

.hero__disponible {
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--verde);
  max-width: 40ch;
}
.hero__disponible::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 0.55rem;
  border-radius: 50%;
  background: var(--verde);
  vertical-align: middle;
}
.hero__ubicacion { font-family: var(--mono); font-size: 0.78rem; color: var(--gris); }

.acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }
.acciones--centro { justify-content: flex-start; margin-top: 2rem; }

.boton {
  display: inline-block;
  padding: 0.7rem 1.3rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.boton:hover { border-color: var(--tinta); background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.boton--solido { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.boton--solido:hover { background: var(--verde); border-color: var(--verde); color: #fff; }
/* =====================================================================
   6. COMPONENTES
   ===================================================================== */

/* --- Métricas ------------------------------------------------------ */
.metricas {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--linea);          /* el gap deja ver el fondo = líneas */
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
/* Truco: el borde y el gap de 1px dibujan la grilla sin bordes por celda. */
.metrica { background: var(--papel); padding: 1.4rem 1.3rem; }

.metrica__valor {
  font-family: var(--display);
  font-variation-settings: "wdth" 108;
  font-weight: 800;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.metrica__etiqueta {
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.metrica__detalle { margin-top: 0.3rem; font-size: 0.88rem; color: var(--gris); }

/* --- Tarjetas de proyecto ------------------------------------------ */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.tarjeta {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.4rem;
  background: var(--papel-hueso);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: transform var(--transicion), border-color var(--transicion);
}
.tarjeta:hover { transform: translateY(-3px); border-color: var(--linea-fuerte); }

.tarjeta__contexto {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gris);
}
.tarjeta__titulo {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.15;
}
.tarjeta__titulo a { text-decoration: none; }
.tarjeta__titulo a:hover { color: var(--verde); }
.tarjeta__texto { font-size: 0.95rem; color: var(--tinta-suave); }
.tarjeta__stack { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.6rem; }
.tarjeta__stack span {
  font-family: var(--mono);
  font-size: 0.66rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--linea);
  border-radius: 100px;
  color: var(--gris);
}
.tarjeta__estado { font-family: var(--mono); font-size: 0.68rem; color: var(--verde); }

/* --- Trabajos ------------------------------------------------------ */
.trabajos { display: grid; gap: 2.6rem; }
.trabajo { display: grid; gap: 0.6rem; }
@media (min-width: 860px) {
  .trabajo { grid-template-columns: 8rem minmax(0, 1fr); column-gap: 2.5rem; }
}

.trabajo__periodo {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--gris);
  padding-top: 0.35rem;
  white-space: nowrap;
}
.trabajo--actual .trabajo__periodo { color: var(--verde); font-weight: 500; }

.trabajo__puesto {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.15;
}
.trabajo__empresa { font-size: 1rem; color: var(--verde); margin-top: 0.15rem; }
.trabajo__empresa span { color: var(--gris); font-size: 0.9rem; }

.trabajo__puntos { margin-top: 0.9rem; display: grid; gap: 0.45rem; }
.trabajo__puntos li { position: relative; padding-left: 1.1rem; font-size: 0.98rem; }
.trabajo__puntos li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 1px;
  background: var(--linea-fuerte);
}

.destacado {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--papel-hueso);
  border-left: 2px solid var(--oro);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.destacado__titulo {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--verde);
  margin-bottom: 0.3rem;
}
.destacado__texto { font-size: 0.94rem; color: var(--tinta-suave); }

/* --- Herramientas: fichas con nivel --------------------------------- */
.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-bottom: 1.8rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--gris);
}
.leyenda__item { display: flex; align-items: center; gap: 0.5rem; }

.punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.punto--solido      { background: var(--verde); }
.punto--practicando { background: var(--verde-claro); }
.punto--base        { background: transparent; box-shadow: inset 0 0 0 1px var(--linea-fuerte); }

.grupos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}
.grupo__titulo {
  margin: 0 0 0.9rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--linea);
}

.fichas { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ficha {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--linea);
  border-radius: 100px;
  font-size: 0.85rem;
  background: var(--papel-hueso);
}
/* El punto de nivel se dibuja con ::before, sin HTML extra. */
.ficha::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ficha--solido::before      { background: var(--verde); }
.ficha--practicando::before { background: var(--verde-claro); }
.ficha--base::before        { box-shadow: inset 0 0 0 1px var(--linea-fuerte); }

/* --- Idiomas -------------------------------------------------------- */
.idiomas { margin-top: 2.8rem; }
.idiomas__lista { display: grid; gap: 0.2rem; }
.idioma {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linea);
}
.idioma__nombre { font-weight: 500; min-width: 9rem; }
.idioma__nivel {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 100px;
}
.idioma__detalle { font-size: 0.88rem; color: var(--gris); }

/* --- Formación ------------------------------------------------------ */
.estudios { display: grid; gap: 0.2rem; }
.estudio {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--linea);
}
.estudio--destacado {
  padding-inline: 1.1rem;
  background: var(--papel-hueso);
  border-left: 2px solid var(--oro);
  border-bottom-color: transparent;
  border-radius: 0 var(--radio) var(--radio) 0;
}
.estudio__nombre { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.estudio__institucion { font-size: 0.92rem; color: var(--verde); }
.estudio__detalle { font-size: 0.88rem; color: var(--gris); margin-top: 0.2rem; }
.estudio__periodo { font-family: var(--mono); font-size: 0.74rem; color: var(--gris); white-space: nowrap; }

/* --- Contacto ------------------------------------------------------- */
.contacto__texto { max-width: 52ch; font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem); }
.contacto__lista { margin-top: 1.8rem; display: grid; gap: 0.2rem; max-width: 42rem; }
.contacto__lista li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linea);
}
.contacto__clave {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gris);
  min-width: 6rem;
}
/* =====================================================================
   7. LÍNEA DE TIEMPO
   El SVG viene generado desde JavaScript (ver script.js, sección
   "LÍNEA DE TIEMPO"); acá solo lo pintamos. Estilar el SVG con CSS (en vez de con atributos fill= dentro
   del SVG) permite que cambie solo en modo oscuro.
   ===================================================================== */
.tiempo {
  overflow-x: auto;                 /* en móvil se puede arrastrar */
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
}
.tiempo__svg { width: 100%; min-width: 620px; height: auto; display: block; }

.tiempo__grilla line { stroke: var(--linea); stroke-width: 1; }
.tiempo__anio {
  fill: var(--gris);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.tiempo__hoy { stroke: var(--oro); stroke-width: 1.5; stroke-dasharray: 3 4; }

.tiempo__etiqueta {
  fill: var(--tinta);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}
.tiempo__barra { fill: var(--tinta-suave); opacity: 0.75; }
.tiempo__barra--vigente { fill: var(--verde); opacity: 1; }

/* Animación de entrada: las barras crecen de izquierda a derecha.
   transform-box: fill-box hace que el origen del transform sea la
   propia barra y no el lienzo entero del SVG. */
.tiempo .tiempo__barra {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
}
.tiempo.revelar--visible .tiempo__barra {
  transform: scaleX(1);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--retraso, 0ms);
}

.tiempo__leyenda {
  margin-top: 0.8rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--gris);
}
/* =====================================================================
   8. ANIMACIÓN DE ENTRADA
   Los elementos con class="revelar" arrancan invisibles y aparecen
   cuando entran en pantalla. El JS solo agrega la clase --visible.
   ===================================================================== */
.revelar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease var(--retraso, 0ms),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--retraso, 0ms);
}
.revelar--visible { opacity: 1; transform: none; }

/* Respetamos a quien configuró "reducir movimiento" en su sistema.
   No es un detalle menor: para algunas personas las animaciones
   producen mareo real. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .revelar { opacity: 1; transform: none; }
  .tiempo .tiempo__barra { transform: scaleX(1); }
}
/* =====================================================================
   9. MODO OSCURO
   Se activa según la configuración del sistema operativo del visitante.
   Como todos los colores son variables, alcanza con redefinirlas.
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --tinta:        #E6EDE8;
    --tinta-suave:  #B9C9C1;
    --papel:        #0B1F1B;
    --papel-hueso:  #122A25;
    --verde:        #5FCBA0;
    --verde-claro:  #2E8A67;
    --gris:         #8AA096;
    --linea:        rgba(230, 237, 232, 0.14);
    --linea-fuerte: rgba(230, 237, 232, 0.32);
  }
  .boton--solido { background: var(--verde); color: #06110E; border-color: var(--verde); }
  .boton--solido:hover { background: var(--oro); border-color: var(--oro); color: #06110E; }
  .tiempo__barra { fill: var(--tinta-suave); opacity: 0.45; }
  .tiempo__barra--vigente { fill: var(--verde); opacity: 1; }
}
/* =====================================================================
   10. IMPRESIÓN
   Si un reclutador imprime la página o la guarda como PDF desde el
   navegador, que salga limpia: sin barra, sin fondos, negro sobre blanco.
   ===================================================================== */
@media print {
  :root {
    --tinta: #000; --tinta-suave: #222; --papel: #fff; --papel-hueso: #fff;
    --verde: #1B7A5A; --gris: #444; --linea: #ccc; --linea-fuerte: #999;
  }
  .barra, .pie__arriba, .acciones, .saltar, .tiempo__leyenda { display: none; }
  body { font-size: 10.5pt; }
  .seccion { padding: 1rem 0; max-width: none; }
  .hero { padding: 0 0 1rem; }
  .revelar { opacity: 1; transform: none; }
  .tiempo .tiempo__barra { transform: scaleX(1); }
  .trabajo, .tarjeta, .estudio { break-inside: avoid; }
  /* Mostramos la URL de los links, que en papel no se pueden clickear. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #666; }
}