/* ==========================================================================
   lgrdelarosa.com — Sistema visual
   Newsreader (editorial) + Public Sans (interfaz)
   Paleta: papel cálido · verde territorio · terracota
   Tipografías alojadas en el propio servidor: sin dependencia de Google.
   ========================================================================== */

/* --- 0. Tipografías ----------------------------------------------------- */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fuentes/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fuentes/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("fuentes/newsreader-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fuentes/publicsans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fuentes/publicsans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  color-scheme: light;

  --fondo:        #FFFFFF;
  --superficie:   #F4F6F9;
  --superficie-2: #E9EDF3;
  --borde:        #E3E7EC;
  --borde-fuerte: #111A24;

  --texto:        #111A24;
  --texto-2:      #48545F;
  --meta:         #657080;

  --acento:       #17395E;
  --acento-alto:  #0F2C4A;
  --acento-2:     #7D5E1E;

  --sel-fondo:    #17395E;
  --sel-texto:    #FFFFFF;
  --btn-texto:    #FFFFFF;

  --serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --sans:  "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --ancho:      76rem;
  --ancho-texto: 36rem;
  --ancho-medio: 44rem;

  --gap:        1.5rem;
  --seccion:    6rem;
  --regla:      1px solid var(--borde);
}

/* Modo oscuro por elección explícita.
   Se contemplan dos atributos: `data-tema` (el conmutador propio del sitio)
   y `data-theme` (el que aplican algunos visores y lectores externos). */
:root[data-tema="oscuro"],
:root[data-theme="dark"] {
  color-scheme: dark;

  --fondo:        #0D1420;
  --superficie:   #131C2A;
  --superficie-2: #182436;
  --borde:        #26344A;
  --borde-fuerte: #E8EDF4;

  --texto:        #E8EDF4;
  --texto-2:      #A9B6C6;
  --meta:         #8A98A9;

  --acento:       #9CC0E8;
  --acento-alto:  #BFD8F2;
  --acento-2:     #D6AC63;

  --sel-fondo:    #9CC0E8;
  --sel-texto:    #0D1420;
  --btn-texto:    #0D1420;
}

/* Modo oscuro por preferencia del sistema, salvo que se haya elegido claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-theme="light"]) {
    color-scheme: dark;
    --fondo:        #0D1420;
    --superficie:   #131C2A;
    --superficie-2: #182436;
    --borde:        #26344A;
    --borde-fuerte: #E8EDF4;
    --texto:        #E8EDF4;
    --texto-2:      #A9B6C6;
    --meta:         #8A98A9;
    --acento:       #9CC0E8;
    --acento-alto:  #BFD8F2;
    --acento-2:     #D6AC63;
    --sel-fondo:    #9CC0E8;
    --sel-texto:    #0D1420;
    --btn-texto:    #0D1420;
  }
}

/* --- 2. Base ------------------------------------------------------------ */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (min-width: 60rem) { html { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-variation-settings: "opsz" 16;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Ningún elemento de rejilla debe forzar el ancho de la página */
.rejilla > *, .cifras > *, .ejes > *, .ids > *, .vehiculos > *, .item > * { min-width: 0; }

::selection { background: var(--sel-fondo); color: var(--sel-texto); }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: var(--regla); margin: 0; }

/* --- 3. Tipografía ------------------------------------------------------ */

.t-hero {
  font-size: clamp(2.125rem, 7.2vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 60;
  font-weight: 380;
  overflow-wrap: break-word;
}
.t-h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.35rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
  font-variation-settings: "opsz" 36;
}
.t-h3 {
  font-size: 1.4rem;
  line-height: 1.24;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 24;
}
.t-h4 {
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.004em;
}
.t-entradilla {
  font-size: clamp(1.1875rem, 2.1vw, 1.4375rem);
  line-height: 1.48;
  font-weight: 300;
  font-variation-settings: "opsz" 28;
  color: var(--texto-2);
  max-width: var(--ancho-medio);
  letter-spacing: -0.008em;
}
.t-cuerpo { max-width: var(--ancho-texto); }
.t-cuerpo--ancho { max-width: var(--ancho-medio); }

.rotulo {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 550;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--meta);
  margin: 0;
  font-feature-settings: "case" 1;
}
.rotulo--acento { color: var(--acento-2); }

.ui {
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.55;
  letter-spacing: -0.002em;
}
.ui--sm { font-size: .8125rem; line-height: 1.5; }

.meta {
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--meta);
  letter-spacing: .01em;
}

.num {
  font-variant-numeric: tabular-nums lining-nums;
}

/* --- 4. Estructura ------------------------------------------------------ */

.env {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 1.375rem;
}
@media (min-width: 48rem) { .env { padding-inline: 2.5rem; } }

.seccion { padding-block: clamp(3.25rem, 7vw, var(--seccion)); }
.seccion--top { padding-top: clamp(2rem, 4vw, 3rem); }
.seccion + .seccion { border-top: var(--regla); }

/* Retícula asimétrica: contenido 1–8, marginalia 10–12 */
.rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem var(--gap);
}
@media (min-width: 62rem) {
  .rejilla {
    grid-template-columns: repeat(12, 1fr);
    gap: 2.5rem var(--gap);
  }
  .col-principal { grid-column: 1 / span 7; }
  .col-margen    { grid-column: 9 / span 4; }
  .col-ancho     { grid-column: 1 / span 12; }
  .col-media     { grid-column: 1 / span 6; }
}

/* Encabezado de sección numerado */
.enc-seccion {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: .875rem;
  margin-bottom: 2.25rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--borde-fuerte);
}
.enc-seccion__num {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--acento-2);
  font-variant-numeric: tabular-nums;
}
.enc-seccion__t {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--texto);
}
/* Evita la doble línea cuando una rejilla con filete superior sigue al encabezado */
.enc-seccion + .ids,
.enc-seccion + .ejes,
.enc-seccion + .vehiculos,
.enc-seccion + .cifras,
.enc-seccion + .lista { border-top: 0; }

/* --- 5. Cabecera y navegación ------------------------------------------ */

.saltar {
  position: absolute; left: -9999px;
  background: var(--acento); color: #fff;
  padding: .625rem 1rem; z-index: 100;
  font-family: var(--sans); font-size: .875rem;
}
.saltar:focus { left: 1rem; top: 1rem; }

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 3px solid var(--borde-fuerte);
}
.cabecera__int {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}
.marca {
  font-family: var(--serif);
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  text-decoration: none;
  white-space: nowrap;
  font-variation-settings: "opsz" 20;
}
.marca b { font-weight: 600; }
.marca span { color: var(--meta); }

.nav { display: none; }
@media (min-width: 56rem) {
  .nav { display: flex; align-items: center; gap: 1.625rem; }
}
.nav a {
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 450;
  letter-spacing: -0.002em;
  text-decoration: none;
  color: var(--texto-2);
  padding-block: .25rem;
  border-bottom: 1.5px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav a:hover { color: var(--texto); border-bottom-color: var(--borde); }
.nav a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--acento); font-weight: 550; }

.acciones { display: flex; align-items: center; gap: .5rem; }

.btn-icono {
  display: inline-grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  background: transparent;
  border: var(--regla);
  border-radius: 2px;
  color: var(--texto-2);
  cursor: pointer;
  padding: 0;
  transition: border-color .15s ease, color .15s ease;
}
.btn-icono:hover { border-color: var(--texto-2); color: var(--texto); }
.btn-icono svg { width: 1rem; height: 1rem; }
@media (min-width: 56rem) { .btn-menu { display: none; } }

/* Menú móvil */
.menu-movil {
  display: none;
  border-top: var(--regla);
  background: var(--fondo);
}
.menu-movil[data-abierto="true"] { display: block; }
@media (min-width: 56rem) { .menu-movil { display: none !important; } }
.menu-movil ul { list-style: none; margin: 0; padding: .5rem 0 1rem; }
.menu-movil li + li { border-top: var(--regla); }
.menu-movil a {
  display: block;
  padding: .875rem .125rem;
  font-family: var(--sans);
  font-size: 1rem;
  text-decoration: none;
  color: var(--texto);
}
.menu-movil a[aria-current="page"] { color: var(--acento); font-weight: 600; }

/* --- 6. Portada -------------------------------------------------------- */

.portada { padding-top: clamp(2.25rem, 5vw, 4.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.portada__ubi {
  display: flex; align-items: center; gap: .625rem;
  margin-bottom: 1.5rem;
}
.portada__ubi::after {
  content: ""; flex: 1; height: 1px; background: var(--borde); max-width: 10rem;
}

/* Retículo de portada: en escritorio el nombre y el texto ocupan 7 columnas
   y el retrato 4, con una de canal. En móvil se apila: nombre, retrato, texto. */
.portada__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "nombre" "foto" "texto";
  gap: 1.75rem 0;
  align-items: start;
}
@media (min-width: 58rem) {
  .portada__rejilla {
    grid-template-columns: minmax(0, 7fr) minmax(1.5rem, .7fr) minmax(0, 4fr);
    grid-template-areas:
      "nombre . foto"
      "texto  . foto";
    grid-template-rows: auto 1fr;
    gap: 0;
  }
}
.portada__nombre { grid-area: nombre; }
.portada__texto  { grid-area: texto; }
.portada__foto   { grid-area: foto; }

.portada h1 { margin-bottom: 1.375rem; }
@media (min-width: 58rem) { .portada h1 { margin-bottom: 1.5rem; } }
.portada__linea {
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.35;
  font-weight: 350;
  font-variation-settings: "opsz" 32;
  color: var(--acento);
  max-width: 30ch;
  letter-spacing: -0.012em;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
.portada__linea em { font-style: normal; }

/* Cifras */
.cifras {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 2px solid var(--borde-fuerte);
}
@media (min-width: 42rem) { .cifras { grid-template-columns: repeat(3, 1fr); } }
.cifra {
  padding: 1.375rem 0 1.25rem;
  border-bottom: var(--regla);
}
@media (min-width: 42rem) {
  .cifra { padding: 1.5rem 1.375rem 1.375rem 0; border-bottom: 0; }
  .cifra + .cifra { border-left: var(--regla); padding-left: 1.375rem; }
}
.cifra__n {
  display: block;
  font-size: clamp(2.25rem, 4.6vw, 3rem);
  line-height: 1;
  font-weight: 300;
  font-variation-settings: "opsz" 44;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: .5rem;
}
.cifra__n sub {
  font-size: .34em; vertical-align: baseline; bottom: 0;
  font-family: var(--sans); font-weight: 500; letter-spacing: 0;
  color: var(--meta); margin-left: .3em;
}
.cifra__r {
  font-family: var(--sans);
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--texto-2);
  max-width: 24ch;
}

/* --- 7. Botones -------------------------------------------------------- */

.acciones-fila { display: flex; flex-wrap: wrap; gap: .75rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 550;
  letter-spacing: -0.002em;
  text-decoration: none;
  padding: .6875rem 1.125rem;
  border-radius: 2px;
  border: 1.5px solid var(--acento);
  background: var(--acento);
  color: var(--btn-texto);
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.btn:hover { background: var(--acento-alto); border-color: var(--acento-alto); }
.btn:active { transform: translateY(1px); }
.btn svg { width: .9375rem; height: .9375rem; flex: none; }

.btn--linea {
  background: transparent;
  color: var(--texto);
  border-color: var(--borde);
}
.btn--linea:hover { background: transparent; border-color: var(--texto); color: var(--texto); }

/* Enlace con flecha */
.enl {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 550;
  color: var(--acento);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color .15s ease;
}
.enl:hover { border-bottom-color: currentColor; }
.enl svg { width: .75rem; height: .75rem; transition: transform .15s ease; }
.enl:hover svg { transform: translateX(2px); }

/* --- 8. Listas editoriales --------------------------------------------- */

.lista { list-style: none; margin: 0; padding: 0; border-top: var(--regla); }
.lista > li { border-bottom: var(--regla); }

.item {
  display: grid;
  grid-template-columns: 1fr;
  gap: .375rem 1.5rem;
  padding: 1.5rem 0;
  text-decoration: none;
  color: inherit;
}
@media (min-width: 48rem) {
  .item { grid-template-columns: 9.5rem 1fr auto; align-items: baseline; padding: 1.75rem 0; }
}
.item__meta { order: -1; }
@media (min-width: 48rem) { .item__meta { order: 0; padding-top: .28rem; } }
.item__t {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.28;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 24;
  text-wrap: pretty;
}
a.item:hover .item__t { color: var(--acento); }
.item__d {
  font-family: var(--sans);
  font-size: .875rem;
  line-height: 1.55;
  color: var(--texto-2);
  margin-top: .4375rem;
  max-width: 62ch;
}
.item__flecha { display: none; }
@media (min-width: 48rem) {
  .item__flecha { display: block; color: var(--meta); padding-top: .3rem; }
  .item__flecha svg { width: .875rem; height: .875rem; transition: transform .15s ease; }
  a.item:hover .item__flecha { color: var(--acento); }
  a.item:hover .item__flecha svg { transform: translate(2px, -2px); }
}

.etiqueta {
  display: inline-block;
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--acento-2);
  margin-bottom: .3125rem;
}

/* --- 9. Ejes de trabajo ------------------------------------------------- */

.ejes { display: grid; grid-template-columns: 1fr; border-top: 2px solid var(--borde-fuerte); }
@media (min-width: 54rem) { .ejes { grid-template-columns: repeat(3, 1fr); } }
.eje { padding: 1.75rem 0 1.625rem; border-bottom: var(--regla); }
@media (min-width: 54rem) {
  .eje { padding: 1.875rem 1.75rem 1.75rem 0; border-bottom: 0; }
  .eje + .eje { border-left: var(--regla); padding-left: 1.75rem; }
}
.eje h3 { margin-bottom: .625rem; }
.eje p { font-family: var(--sans); font-size: .875rem; line-height: 1.6; color: var(--texto-2); }
.eje ul {
  list-style: none; margin: .875rem 0 0; padding: 0;
  font-family: var(--sans); font-size: .8125rem; color: var(--meta);
}
.eje li { padding-left: .875rem; position: relative; line-height: 1.5; margin-bottom: .3125rem; }
.eje li::before { content: ""; position: absolute; left: 0; top: .58em; width: .3125rem; height: 1px; background: var(--acento-2); }

/* --- 10. Retrato -------------------------------------------------------- */

.retrato {
  width: 100%;
  max-width: 22.5rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 2px;
  background: var(--superficie);
}
.retrato-fig { margin: 0; }
.retrato-fig figcaption {
  font-family: var(--sans);
  font-size: .75rem;
  color: var(--meta);
  margin-top: .6875rem;
  max-width: 22.5rem;
  line-height: 1.5;
  padding-left: .75rem;
  border-left: 2px solid var(--acento-2);
}

/* Retrato de portada: figura recortada del fondo, sin caja.
   Se apoya sobre el blanco de la página y se desvanece por abajo,
   de modo que no hay borde ni corte: la figura y el papel son lo mismo. */
.figura {
  display: block;
  width: 100%;
  max-width: 24rem;
  height: auto;
  margin: 0;
}
.portada__foto {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  margin: 0;
}
@media (min-width: 58rem) {
  .portada__foto { justify-content: flex-end; align-self: end; }
  .portada__foto .figura { max-width: 25rem; margin-bottom: -1.5rem; }
}
@media (max-width: 57.99rem) {
  .portada__foto .figura { max-width: min(72%, 19rem); }
}

/* --- 11. Bloques de datos ---------------------------------------------- */

.datos { border-top: var(--regla); margin: 0; }
.datos > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: .1875rem 1.5rem;
  padding: .9375rem 0;
  border-bottom: var(--regla);
}
@media (min-width: 40rem) { .datos > div { grid-template-columns: 11rem 1fr; gap: 1.5rem; } }
.datos dt {
  font-family: var(--sans); font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; color: var(--meta);
  padding-top: .1875rem;
}
.datos dd { margin: 0; font-family: var(--sans); font-size: .9375rem; line-height: 1.55; }
.datos dd a { color: var(--acento); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--acento) 35%, transparent); }
.datos dd a:hover { border-bottom-color: var(--acento); }

/* Ficha compacta de portada: rótulo arriba, valor debajo */
.datos--compacta > div { grid-template-columns: 1fr; gap: .25rem; padding: .8125rem 0; }
@media (min-width: 40rem) { .datos--compacta > div { grid-template-columns: 1fr; gap: .25rem; } }
.datos--compacta dt { padding-top: 0; font-size: .6875rem; letter-spacing: .1em; color: var(--acento-2); }
.datos--compacta dd { font-size: .8125rem; line-height: 1.5; color: var(--texto-2); }

.portada__ficha { align-self: end; }
@media (min-width: 62rem) { .portada__ficha { padding-top: 1.5rem; } }

/* --- 12. Trayectoria ---------------------------------------------------- */

.cargo {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem 1.5rem;
  padding: 1.875rem 0;
  border-bottom: var(--regla);
}
@media (min-width: 56rem) {
  .cargo { grid-template-columns: 10.5rem 1fr; padding: 2rem 0; }
}
.cargo__fecha {
  font-family: var(--sans); font-size: .8125rem; font-weight: 500;
  color: var(--meta); font-variant-numeric: tabular-nums; padding-top: .3125rem;
  letter-spacing: .01em;
}
.cargo__rol {
  font-family: var(--serif); font-size: 1.3125rem; line-height: 1.25;
  letter-spacing: -0.014em; font-variation-settings: "opsz" 24; margin-bottom: .1875rem;
}
.cargo__org {
  font-family: var(--sans); font-size: .875rem; font-weight: 550;
  color: var(--acento); margin-bottom: .875rem;
}
.cargo__org span { color: var(--meta); font-weight: 400; }
.cargo ul { list-style: none; margin: 0; padding: 0; }
.cargo li {
  font-family: var(--sans); font-size: .9375rem; line-height: 1.6;
  color: var(--texto-2); padding-left: 1rem; position: relative; margin-bottom: .5rem;
  max-width: 60ch;
}
.cargo li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: .375rem; height: 1px; background: var(--acento-2);
}
.cargo li:last-child { margin-bottom: 0; }

.nota-cargo {
  font-family: var(--sans); font-size: .8125rem; color: var(--meta);
  margin-top: .875rem; padding-left: .75rem; border-left: 2px solid var(--borde);
  line-height: 1.5; max-width: 56ch;
}

/* --- 13. Publicaciones -------------------------------------------------- */

.pub { padding: 1.5rem 0; border-bottom: var(--regla); }
.pub__n {
  font-family: var(--sans); font-size: .75rem; font-weight: 600;
  color: var(--acento-2); font-variant-numeric: tabular-nums;
  letter-spacing: .1em; display: block; margin-bottom: .625rem;
}
.pub__t {
  font-family: var(--serif); font-size: 1.1875rem; line-height: 1.32;
  letter-spacing: -0.01em; font-variation-settings: "opsz" 22; margin-bottom: .5rem;
  max-width: 54ch; text-wrap: pretty;
}
.pub__ref {
  font-family: var(--sans); font-size: .8125rem; line-height: 1.6;
  color: var(--texto-2); max-width: 64ch;
}
.pub__ref em { font-style: italic; color: var(--texto); }
.pub__acc { display: flex; flex-wrap: wrap; gap: .5rem .875rem; margin-top: .8125rem; }
.pub__acc a {
  display: inline-flex; align-items: center; gap: .375rem;
  font-family: var(--sans); font-size: .75rem; font-weight: 550;
  letter-spacing: .01em; text-decoration: none;
  color: var(--acento); border: var(--regla); border-radius: 2px;
  padding: .3125rem .625rem; transition: border-color .15s ease, background .15s ease;
}
.pub__acc a:hover { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 7%, transparent); }
.pub__acc svg { width: .75rem; height: .75rem; }
.pub__acc .inactivo { color: var(--meta); cursor: default; opacity: .75; }
.pub__acc .inactivo:hover { border-color: var(--borde); background: transparent; }

/* --- 14. Tarjeta de identificadores ------------------------------------ */

.ids {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 2px solid var(--borde-fuerte);
}
@media (min-width: 44rem) {
  .ids { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}
.id {
  padding: 1.375rem 0 1.25rem; border-bottom: var(--regla);
  display: flex; flex-direction: column; gap: .375rem;
}
@media (min-width: 44rem) {
  .id { padding: 1.5rem 1.5rem 1.375rem 0; }
  .id + .id { border-left: var(--regla); padding-left: 1.5rem; }
}
.id__n { font-family: var(--sans); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--meta); }
.id__v { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.3; font-variation-settings: "opsz" 20; }
.id__v a { color: var(--acento); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--acento) 30%, transparent); }
.id__v a:hover { border-bottom-color: var(--acento); }
.id__d { font-family: var(--sans); font-size: .75rem; color: var(--meta); line-height: 1.5; }
.pendiente { color: var(--meta); font-style: italic; font-size: .9375rem; }

/* --- 15. Cita destacada ------------------------------------------------- */

.cita {
  border-left: 3px solid var(--acento);
  padding: .25rem 0 .25rem 1.5rem;
  margin: 2rem 0;
  max-width: var(--ancho-medio);
}
.cita p {
  font-size: 1.25rem; line-height: 1.45; font-weight: 300;
  font-variation-settings: "opsz" 28; letter-spacing: -0.01em;
}
.cita cite { display: block; margin-top: .75rem; font-family: var(--sans); font-size: .8125rem; font-style: normal; color: var(--meta); }

/* --- 15b. Tarjeta de la investigación doctoral -------------------------- */

.tarjeta-tesis {
  border-top: 2px solid var(--borde-fuerte);
  padding-top: 1.125rem;
}
.tesis__t {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.36;
  letter-spacing: -0.008em;
  font-variation-settings: "opsz" 20;
  color: var(--texto);
  margin-bottom: .75rem;
  text-wrap: pretty;
}
.tesis__m {
  font-family: var(--sans);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--meta);
}

/* --- 16. Aviso / nota --------------------------------------------------- */

.aviso {
  background: var(--superficie);
  border-left: 3px solid var(--acento-2);
  padding: 1.125rem 1.25rem;
  font-family: var(--sans);
  font-size: .875rem;
  line-height: 1.6;
  color: var(--texto-2);
  max-width: var(--ancho-medio);
  border-radius: 0 2px 2px 0;
}
.aviso strong { color: var(--texto); font-weight: 600; }

/* --- 17. Vehículos ------------------------------------------------------ */

.vehiculos { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 2px solid var(--borde-fuerte); }
@media (min-width: 50rem) { .vehiculos { grid-template-columns: repeat(2, 1fr); } }
.veh { padding: 1.75rem 0; border-bottom: var(--regla); }
@media (min-width: 50rem) {
  .veh { padding: 1.875rem 2rem 1.75rem 0; border-bottom: 0; }
  .veh + .veh { border-left: var(--regla); padding-left: 2rem; }
}
.veh__tipo { font-family: var(--sans); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--acento-2); display: block; margin-bottom: .625rem; }
.veh h3 { font-size: 1.1875rem; line-height: 1.25; margin-bottom: .5rem; letter-spacing: -0.012em; }
.veh p { font-family: var(--sans); font-size: .875rem; line-height: 1.6; color: var(--texto-2); }
.veh dl { margin: 1rem 0 0; font-family: var(--sans); font-size: .75rem; color: var(--meta); }
.veh dl div { display: flex; gap: .5rem; margin-bottom: .25rem; }
.veh dt { font-weight: 600; min-width: 3.25rem; }
.veh dd { margin: 0; }

/* --- 18. Pie ------------------------------------------------------------ */

.pie {
  border-top: 3px solid var(--borde-fuerte);
  padding-block: 3rem 2.5rem;
  background: var(--superficie);
}
.pie__rejilla { display: grid; grid-template-columns: 1fr; gap: 2.25rem; }
@media (min-width: 52rem) { .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; } }
.pie h4 { margin-bottom: .875rem; color: var(--meta); font-size: .75rem; text-transform: uppercase; letter-spacing: .09em; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .5rem; }
.pie a { font-family: var(--sans); font-size: .875rem; color: var(--texto-2); text-decoration: none; }
.pie a:hover { color: var(--acento); }
.pie__id { display: flex; align-items: flex-start; gap: 1rem; }
.pie__avatar { width: 3rem; height: 3rem; border-radius: 2px; flex: none; object-fit: cover; }
.pie__nombre { font-family: var(--serif); font-size: 1.0625rem; letter-spacing: -0.012em; font-variation-settings: "opsz" 20; margin-bottom: .1875rem; }
.pie__rol { font-family: var(--sans); font-size: .8125rem; color: var(--meta); line-height: 1.5; max-width: 30ch; }
.pie__fin {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: var(--regla);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-family: var(--sans); font-size: .75rem; color: var(--meta);
}

/* --- 19. Contenido de nota (columnas propias) -------------------------- */

.nota-cuerpo { max-width: var(--ancho-texto); font-size: 1.125rem; line-height: 1.7; }
.nota-cuerpo h2 { font-size: 1.5rem; margin: 2.25rem 0 .875rem; letter-spacing: -0.015em; }
.nota-cuerpo h3 { font-size: 1.25rem; margin: 1.75rem 0 .625rem; }
.nota-cuerpo blockquote {
  margin: 1.75rem 0; padding-left: 1.25rem; border-left: 3px solid var(--acento);
  font-weight: 300; font-size: 1.1875rem; line-height: 1.5; color: var(--texto-2);
}
.nota-cuerpo a { color: var(--acento); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--acento) 40%, transparent); }
.nota-cuerpo a:hover { text-decoration-color: var(--acento); }
.nota-cuerpo ul, .nota-cuerpo ol { padding-left: 1.25rem; margin: 0 0 1.1em; }
.nota-cuerpo li { margin-bottom: .4375rem; }
.nota-cuerpo hr { margin: 2.5rem 0; }

/* --- 20. Utilidades ----------------------------------------------------- */

.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.centrar-texto { text-wrap: balance; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .75rem; } .mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; } .mt-4 { margin-top: 3rem; }
.mb-1 { margin-bottom: .75rem; } .mb-2 { margin-bottom: 1.5rem; } .mb-3 { margin-bottom: 2.25rem; }

/* --- 21. Impresión ------------------------------------------------------ */

@media print {
  .cabecera, .pie, .menu-movil, .acciones-fila, .btn-icono { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .seccion { padding-block: 1rem; break-inside: avoid; }
  a { text-decoration: none; color: #000; }
  .env { max-width: none; padding: 0; }
}