/* diegodepablos.com
 *
 * Un CV de ingeniero leído por gente técnica: la referencia es un documento
 * bien compuesto, no un folleto. De ahí las tres familias con papeles
 * distintos —serif para titulares, sans para leer, monoespaciada para los
 * datos— y un único acento reservado a lo que es dato: años, cifras, nombres
 * de tecnología.
 *
 * El acento es el verde de la bandera de Andalucía. El de la bandera (#00954D)
 * no llega al contraste AA sobre blanco para texto, así que en claro se usa una
 * versión más profunda del mismo tono. En oscuro el problema se invierte —ese
 * verde profundo no se ve sobre negro— y sube a un verde claro del mismo tono.
 *
 * Los dos temas se sirven a la vez y manda el del sistema, vía
 * `prefers-color-scheme`. Todo el color pasa por estas variables, así que el
 * bloque oscuro sólo las redefine: no hay una sola regla duplicada más abajo,
 * y una regla nueva hereda los dos temas sin tocar nada.
 *
 * `color-scheme: light dark` va aparte de las variables y no es opcional: es lo
 * que hace que el navegador pinte del color correcto lo que no controla la
 * hoja de estilos —barras de desplazamiento y controles nativos del
 * formulario—. Sin ella se acaba con un campo blanco sobre una página negra.
 *
 * Los pares de contraste los comprueba `tests/test_estilo.py`, que lee este
 * mismo fichero: un color que se olvide de redefinir en oscuro no da error, sólo
 * deja un texto ilegible que nadie ve si no tiene el sistema en oscuro. El par
 * más justo es `--ink-soft` sobre `--surface-alt`: 4,79:1 en claro y 4,63:1 en
 * oscuro. Todos por encima de AA (4,5:1).
 *
 * Ninguna fuente se descarga: todo son familias del sistema. Es la mitad del
 * motivo de que la portada baje de 100 KB.
 */

:root {
  color-scheme: light dark;

  --ground:      #FBFCFB;
  --surface:     #FFFFFF;
  --surface-alt: #F1F4F2;
  --line:        #DCE3DE;
  --line-soft:   #E8EDEA;
  --ink:         #14181A;
  --ink-mid:     #4C5650;
  /* Era #6E7A74, que se quedaba en 4,35:1 sobre el fondo y 4,04:1 sobre
     `--surface-alt`: por debajo de AA, y lo lleva texto pequeño —los años, los
     contadores de los chips, las ayudas del formulario—. Mismo tono, más
     oscuro: 5,16:1 y 4,79:1. */
  --ink-soft:    #636E68;

  --accent:      #04693D;   /* verde andaluz profundo, AA sobre blanco */
  --accent-soft: #E6F1EA;

  /* La marca de docencia no puede ser verde: se confundiría con el acento.
     Un azul apagado la separa sin competir. */
  --marca:       #2B5578;
  --marca-soft:  #E5EDF4;

  --error:       #A2382C;
  --error-soft:  #F8E7E4;

  /* Fondo de las imágenes. Sale de `--surface-alt` en claro, pero es token
     aparte porque en oscuro NO lo sigue: ver el bloque de abajo. */
  --plancha:     #F1F4F2;

  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;

  --fs-2: 0.74rem;
  --fs-1: 0.85rem;
  --fs0:  1rem;
  --fs1:  1.16rem;
  --fs2:  1.42rem;
  --fs3:  1.85rem;
  --fs4:  2.5rem;
  --fs5:  3.4rem;

  --ancho: 72rem;
  --estrecho: 44rem;
  --medida: 68ch;
  --rail: 13rem;
}

/* --- tema oscuro ---------------------------------------------------------
 *
 * Sólo variables. Las medidas, las familias tipográficas y todas las reglas de
 * abajo son las mismas: lo único que cambia es el color.
 *
 * `screen and` no sobra: acota la paleta oscura a la pantalla, y al imprimir
 * desde un sistema en oscuro la consulta no casa y vuelven a valer los valores
 * claros de `:root`. Sin eso el `@media print` de más abajo sólo forzaba el
 * `body` a blanco sobre negro, y todo lo demás —`--ink-mid`, los chips, las
 * fechas— salía en gris claro sobre papel blanco, o sea, en nada.
 */
@media screen and (prefers-color-scheme: dark) {
  :root {
    /* Negro con un punto de verde, el mismo sesgo que el gris del tema claro.
       Un negro puro (#000) deja los bordes de 1px invisibles y las tarjetas
       flotando sin separación. */
    --ground:      #0C0E0D;
    --surface:     #141816;
    --surface-alt: #1C211E;
    --line:        #2C332F;
    --line-soft:   #212724;
    /* Ni el texto llega al blanco puro ni el fondo al negro: a máximo contraste
       las letras claras sobre fondo oscuro «vibran» y cansan al leer. */
    --ink:         #E8EEEA;
    --ink-mid:     #AEB9B3;
    --ink-soft:    #808B85;

    /* El verde profundo del tema claro es ilegible aquí (1,5:1 sobre el fondo).
       Mismo tono, mucha más luminosidad: 9,2:1. */
    --accent:      #47C98D;
    --accent-soft: #10301F;

    --marca:       #7FB3DC;
    --marca-soft:  #16232E;

    --error:       #F08A7C;
    --error-soft:  #33191A;

    /* La plancha de las imágenes se queda CLARA en el tema oscuro, y es a
       propósito. Los logos de los proyectos son JPEG y PNG sin transparencia,
       con el blanco cocido dentro: sobre un fondo oscuro se ven como
       rectángulos blancos recortados. Dejando el fondo claro, el logo se lee
       como está pensado y la tarjeta parece una lámina montada sobre passepartout,
       no un fallo. */
    --plancha:     #E9EEEB;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1.5rem; }
.contenedor-estrecho { max-width: calc(var(--estrecho) + 3rem); }

a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible, .chip:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.saltar {
  position: absolute;
  left: -9999px;
  background: var(--surface);
  color: var(--ink);
  padding: 0.6rem 1rem;
  z-index: 100;
}
.saltar:focus { left: 1rem; top: 1rem; }

/* --- cabecera ------------------------------------------------------------ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.cabecera-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4rem;
  flex-wrap: wrap;
}
.marca { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; line-height: 1.2; }
.marca-nombre { font-family: var(--display); font-size: var(--fs1); font-weight: 600; }
.marca-rol {
  font-family: var(--mono);
  font-size: var(--fs-2);
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav a {
  color: var(--ink-mid);
  text-decoration: none;
  font-size: var(--fs-1);
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* --- selector de idioma --------------------------------------------------- */
/* Dos palabras, no una bandera: una bandera es un país, no un idioma, y el
   inglés de esta web no es el de ninguno en particular. */
.idiomas {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-2);
}
.idiomas li + li::before {
  content: "·";
  color: var(--line);
  margin-right: 0.5rem;
}
.idioma { color: var(--ink-soft); text-decoration: none; }
.idioma:hover { color: var(--ink); }
.idioma-activo { color: var(--ink); font-weight: 600; }

/* --- tipografía general -------------------------------------------------- */

h1, h2, h3 { text-wrap: balance; }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

/* --- hero ---------------------------------------------------------------- */

.hero { padding: 5rem 0 3.5rem; border-bottom: 1px solid var(--line); }
.hero h1 {
  font-family: var(--display);
  font-size: var(--fs5);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
.hero-rol {
  font-family: var(--mono);
  font-size: var(--fs1);
  color: var(--accent);
  letter-spacing: 0.02em;
  margin: 0.5rem 0 1.75rem;
}
.hero-texto { max-width: var(--medida); font-size: var(--fs1); color: var(--ink-mid); }
.hero-texto p { margin: 0; }

.hero-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.hero-datos > div { display: flex; flex-direction: column; gap: 0.15rem; }
.hero-datos dt {
  font-family: var(--mono);
  font-size: var(--fs-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero-datos dd {
  margin: 0;
  font-family: var(--display);
  font-size: var(--fs2);
  font-variant-numeric: tabular-nums;
}

/* --- estructura de sección ----------------------------------------------- */

.seccion { padding: 3.5rem 0; border-bottom: 1px solid var(--line-soft); }
.seccion:last-of-type { border-bottom: none; }

.rejilla-seccion { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 0 3rem; }
.rail { position: sticky; top: 5.5rem; align-self: start; }
.rail h2 {
  font-family: var(--display);
  font-size: var(--fs2);
  font-weight: 600;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.rail-nota { font-size: var(--fs-1); color: var(--ink-soft); margin: 0; }

.cabecera-pagina { padding: 4rem 0 2rem; border-bottom: 1px solid var(--line); }
.cabecera-pagina h1 {
  font-family: var(--display);
  font-size: var(--fs4);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 0.75rem;
}
.subtitulo { color: var(--ink-mid); max-width: var(--medida); margin: 0; }

/* --- prosa --------------------------------------------------------------- */

.prosa { max-width: var(--medida); }
.prosa p { margin: 0 0 1rem; text-wrap: pretty; }
.prosa > :last-child { margin-bottom: 0; }
.prosa h2 { font-family: var(--display); font-size: var(--fs2); margin: 2rem 0 0.75rem; }
.prosa h3 { font-size: var(--fs1); font-weight: 650; margin: 1.75rem 0 0.5rem; }
.prosa ul, .prosa ol { padding-left: 1.2rem; margin: 0 0 1rem; }
.prosa li { margin-bottom: 0.35rem; }
.prosa img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 3px; }
.prosa blockquote {
  margin: 1.25rem 0;
  padding: 0.6rem 0 0.6rem 1.1rem;
  border-left: 2px solid var(--accent);
  color: var(--ink-mid);
  font-family: var(--mono);
  font-size: var(--fs-1);
}
.prosa blockquote p { margin: 0; }
.prosa code {
  font-family: var(--mono);
  font-size: 0.87em;
  background: var(--surface-alt);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  padding: 0.08em 0.34em;
}
.prosa pre { overflow-x: auto; background: var(--surface-alt); padding: 1rem; border-radius: 3px; }
.prosa pre code { background: none; border: none; padding: 0; }

/* --- línea temporal ------------------------------------------------------ */

.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.etapa {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line-soft);
}
.etapa:first-child { border-top: none; padding-top: 0; }

.etapa-fechas { margin: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.etapa-periodo {
  font-family: var(--mono);
  font-size: var(--fs-1);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.etapa-duracion { font-size: var(--fs-2); color: var(--ink-soft); }
.etapa-actual .etapa-periodo { color: var(--accent); font-weight: 600; }

.etapa-puesto {
  font-family: var(--body);
  font-size: var(--fs1);
  font-weight: 650;
  margin: 0 0 0.15rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.etapa-empresa { margin: 0 0 0.6rem; color: var(--ink-mid); font-size: var(--fs-1); }
.etapa-empresa strong { color: var(--ink); font-weight: 600; }
.via { color: var(--ink-soft); }
.etapa-resumen { font-size: var(--fs-1); color: var(--ink-mid); }

/* Una etapa que no es un empleo a jornada completa se marca: si no, docencia
 * y trabajo por cuenta propia parecen solapes de fechas sin explicación. */
.marca {
  font-family: var(--mono);
  font-size: var(--fs-2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.1rem 0.45rem;
  border-radius: 2px;
  font-weight: 600;
  white-space: nowrap;
}
.marca-docencia { background: var(--marca-soft); color: var(--marca); }
.marca-freelance { background: var(--accent-soft); color: var(--accent); }
/* Las prácticas son las más antiguas y las menos relevantes del CV: en gris,
   para que informen sin llamar la atención por delante de las otras dos. */
.marca-practicas { background: var(--surface-alt); color: var(--ink-soft); }

/* --- tecnologías --------------------------------------------------------- */

.grupos-tech { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.75rem; }
.grupo-tech h3 {
  font-family: var(--mono);
  font-size: var(--fs-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  margin: 0 0 0.7rem;
}

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: var(--fs-1);
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink-mid);
  text-decoration: none;
  white-space: nowrap;
}
.chip-enlace:hover { border-color: var(--accent); color: var(--accent); }
/* Una tecnología sin etapa ni proyecto a los que llevar. Se distingue del
   resto para que no parezca un enlace roto, sin llegar a esconderla. */
.chip-inerte { color: var(--ink-soft); border-style: dashed; }
.chip-activo { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.chip-n { font-size: var(--fs-2); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.chip-activo .chip-n { color: var(--accent); }

.filtros { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 2rem; }

/* --- proyectos ----------------------------------------------------------- */

.rejilla-proyectos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ficha {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ficha:hover { border-color: var(--accent); transform: translateY(-2px); }
.ficha-enlace { text-decoration: none; color: inherit; display: flex; flex-direction: column; flex: 1; }
/* Las portadas son logos de empresa, no fotografías: `contain` los muestra
 * enteros. Con `cover` se recortaban los bordes, que es justo donde un logo
 * suele llevar el nombre. */
.ficha-imagen {
  width: 100%;
  height: 10rem;
  object-fit: contain;
  padding: 1.25rem;
  display: block;
  border-bottom: 1px solid var(--line);
  background: var(--plancha);
}
.ficha-cuerpo { padding: 1rem 1.1rem; flex: 1; }
.ficha-titulo { font-family: var(--display); font-size: var(--fs1); font-weight: 600; margin: 0 0 0.4rem; }
.ficha-resumen { font-size: var(--fs-1); color: var(--ink-mid); margin: 0; }
.ficha-techs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0 1.1rem 1rem;
}
.ficha-techs li {
  font-family: var(--mono);
  font-size: var(--fs-2);
  color: var(--ink-soft);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  padding: 0.05rem 0.4rem;
}
.ficha-techs .mas { color: var(--accent); border-color: var(--accent-soft); }
.vacio { color: var(--ink-soft); font-style: italic; }

/* --- artículo (proyecto y entrada) --------------------------------------- */

.articulo { padding: 3rem 0 4rem; }
.articulo h1 {
  font-family: var(--display);
  font-size: var(--fs4);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
}
.migas { font-family: var(--mono); font-size: var(--fs-2); color: var(--ink-soft); margin: 0 0 0.75rem; }
.migas a { color: var(--ink-soft); }
.articulo-meta { font-family: var(--mono); font-size: var(--fs-1); color: var(--ink-soft); margin: 0 0 2rem; }
/* Nunca por encima de su tamaño real: casi todas son logos de 400 px y
 * estirarlos al ancho de la columna (736 px) sólo los emborrona. */
.articulo-imagen {
  max-width: 100%;
  width: auto;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1.5rem;
  background: var(--plancha);
  margin: 0 0 2rem;
  display: block;
}
.articulo-tech { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); }
.articulo-tech h2 {
  font-family: var(--mono);
  font-size: var(--fs-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.75rem;
}

.ficha-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin: 0 0 2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.ficha-datos > div { display: flex; flex-direction: column; gap: 0.1rem; }
.ficha-datos dt {
  font-family: var(--mono);
  font-size: var(--fs-2);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ficha-datos dd { margin: 0; font-size: var(--fs-1); }

/* --- formación ----------------------------------------------------------- */

.lista-formacion { list-style: none; margin: 0; padding: 0; }
.lista-formacion > li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line-soft);
}
.lista-formacion > li:first-child { border-top: none; padding-top: 0; }
.formacion-anno {
  font-family: var(--mono);
  font-size: var(--fs-1);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin: 0;
  white-space: nowrap;
}
.lista-formacion h3 { font-size: var(--fs1); font-weight: 650; margin: 0 0 0.15rem; }
.formacion-centro { color: var(--ink-mid); font-size: var(--fs-1); margin: 0; }
.formacion-cuerpo { font-size: var(--fs-1); color: var(--ink-mid); margin-top: 0.5rem; }

/* --- referencias --------------------------------------------------------- */

.referencias { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; }
.referencia {
  margin: 0;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.referencia blockquote {
  margin: 0;
  font-size: var(--fs-1);
  color: var(--ink-mid);
  quotes: "«" "»";
}
.referencia blockquote::before { content: open-quote; color: var(--accent); }
.referencia blockquote::after { content: close-quote; color: var(--accent); }
.referencia figcaption { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.referencia figcaption > span { display: flex; flex-direction: column; line-height: 1.35; }
.referencia-cargo { font-size: var(--fs-2); color: var(--ink-soft); }
.avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--plancha); }

/* --- blog ---------------------------------------------------------------- */

.lista-entradas { list-style: none; margin: 0; padding: 0; }
.lista-entradas > li { padding: 1.25rem 0; border-top: 1px solid var(--line-soft); }
.lista-entradas > li:first-child { border-top: none; padding-top: 0; }
.entrada-fecha { font-family: var(--mono); font-size: var(--fs-2); color: var(--ink-soft); margin: 0 0 0.3rem; }
.lista-entradas h2, .lista-entradas h3 { font-family: var(--display); font-size: var(--fs2); font-weight: 600; margin: 0 0 0.4rem; }
.lista-entradas h2 a, .lista-entradas h3 a { color: var(--ink); text-decoration: none; }
.lista-entradas h2 a:hover, .lista-entradas h3 a:hover { color: var(--accent); }
.entrada-resumen { color: var(--ink-mid); font-size: var(--fs-1); margin: 0; max-width: var(--medida); }

.lista-simple { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* --- contacto y pie ------------------------------------------------------ */

.contacto-texto { color: var(--ink-mid); margin: 0 0 1rem; }
.boton {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-1);
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 2px;
  color: var(--accent);
  text-decoration: none;
}
.boton:hover { background: var(--accent); color: var(--ground); }

.pie { border-top: 1px solid var(--line); padding: 2rem 0; margin-top: 2rem; }
.pie-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: var(--fs-1);
  color: var(--ink-soft);
}
.pie-fila p { margin: 0; }
.pie-enlaces { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }

/* --- adaptación a pantallas estrechas ------------------------------------ */

@media (max-width: 60rem) {
  :root { --rail: 100%; --fs5: 2.6rem; --fs4: 2rem; }
  .rejilla-seccion { grid-template-columns: 1fr; gap: 1.5rem 0; }
  .rail { position: static; }
  .rail h2 { padding-bottom: 0.5rem; border-bottom: 2px solid var(--ink); }
}

@media (max-width: 40rem) {
  body { font-size: 16px; }
  .hero { padding: 3rem 0 2.5rem; }
  .etapa, .lista-formacion > li { grid-template-columns: 1fr; gap: 0.5rem 0; }
  .etapa-fechas { flex-direction: row; align-items: baseline; gap: 0.6rem; }
  .cabecera-fila { min-height: auto; padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .nav { gap: 1rem; }
}

@media print {
  .cabecera, .pie, .filtros, .saltar { display: none; }
  body { font-size: 11pt; background: #fff; color: #000; }
  .rejilla-seccion { grid-template-columns: 1fr; }
  a { text-decoration: none; color: #000; }
}

/* --- formulario de contacto ---------------------------------------------- */

.bloque-contacto { max-width: var(--estrecho); }
.formulario { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.5rem; }

.campo { display: flex; flex-direction: column; gap: 0.3rem; }
.campo label {
  font-family: var(--mono);
  font-size: var(--fs-2);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}
.campo .opcional { text-transform: none; letter-spacing: 0; font-weight: 400; }

.campo input, .campo textarea {
  font-family: var(--body);
  font-size: var(--fs0);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.55rem 0.7rem;
  width: 100%;
}
.campo textarea { resize: vertical; min-height: 8rem; line-height: 1.55; }
.campo input:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.campo-error input, .campo-error textarea { border-color: var(--error); }
.campo .error { color: var(--error); font-size: var(--fs-1); margin: 0; }
.campo .ayuda { color: var(--ink-soft); font-size: var(--fs-2); margin: 0; }

/* El campo trampa se saca de la vista sin `display:none` ni `hidden`: los bots
 * que buscan campos ocultos descartan esos dos, y la gracia es que lo rellenen. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario .boton { align-self: start; cursor: pointer; background: none; }

.aviso {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 2px;
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
}
.aviso strong { color: var(--accent); }
.aviso p { margin: 0.25rem 0 0; color: var(--ink-mid); font-size: var(--fs-1); }

/* --- perfiles externos ---------------------------------------------------- */

.icono { width: 1.15em; height: 1.15em; flex: none; }

.perfiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}
.perfil {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.6rem 0.9rem;
}
.perfil:hover { border-color: var(--accent); color: var(--accent); }
.perfil .icono { color: var(--accent); }
.perfil:hover .icono { color: inherit; }
.perfil-texto { display: flex; flex-direction: column; line-height: 1.3; }
.perfil-texto strong { font-weight: 600; font-size: var(--fs-1); }
.perfil-handle { font-family: var(--mono); font-size: var(--fs-2); color: var(--ink-soft); }
.perfil:hover .perfil-handle { color: inherit; }

.pie-social { display: inline-flex; align-items: center; gap: 0.4rem; }

/* --- descarga del CV ------------------------------------------------------ */
.hero-acciones { margin: 1.5rem 0 0; }
.boton-descarga {
  display: inline-block;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 3px;
  padding: 0.5rem 1.1rem;
  font-size: var(--fs-1);
  text-decoration: none;
}
.boton-descarga:hover { background: var(--accent-soft); }
/* En papel el botón no lleva a ningún sitio: quien tiene el PDF ya lo tiene. */
@media print { .hero-acciones { display: none; } }