/* =========================================================================
   Sistema IMF — la hoja de estilo del sitio.
   Es el mismo armazón que la página «Una conferencia entera»: rótulos de
   sección numerados, antetítulo en mono, entradilla y tarjetas.
   Comprometida con el modo claro a propósito.
   ========================================================================= */

:root{
  color-scheme: light;
  --papel:#EDEDE6;
  --lienzo:#FBFAF6;
  --panel:#FFFFFF;
  --tinta:#17201A;
  --apagado:#5A6359;
  --tenue:#8A9187;
  --filete:#DCDCD2;
  --filete-suave:#E8E8DF;
  --bosque:#234A2E;
  --savia:#6FA83F;
  --savia-suave:#E8F0DE;
  --petroleo:#14484E;
  --petroleo-2:#2C7A83;
  --petroleo-suave:#D6F2F6;
  --arcilla:#B85F44;

  --sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:"IBM Plex Serif", Georgia, "Times New Roman", serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--serif); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1060px; margin:0 auto; padding:34px 24px 90px}
p{margin:0 0 1em; max-width:66ch}
strong{font-weight:600; color:var(--bosque)}
a{color:var(--petroleo-2); text-decoration:none; border-bottom:1px solid rgba(44,122,131,.3)}
a:hover{border-bottom-color:var(--petroleo-2)}
:focus-visible{outline:2px solid var(--petroleo); outline-offset:2px}
hr{border:0; border-top:1px solid var(--filete); margin:38px 0}

/* ------------------------------------------------------------------ barra */
.barra{
  display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap;
  padding-bottom:14px; margin-bottom:34px;
  border-bottom:1px solid var(--filete);
}
.marca{
  font-family:var(--sans); font-weight:600; font-size:18px; letter-spacing:-.01em;
  color:var(--bosque); border:0; line-height:1;
}
.marca::after{content:""; display:block; height:3px; background:var(--savia); margin-top:4px}
.barra nav{display:flex; gap:18px; flex-wrap:wrap; margin-left:auto; padding-bottom:2px}
.barra nav a{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--tenue); border:0; padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.barra nav a:hover{color:var(--petroleo)}
.barra nav a.on{color:var(--bosque); border-bottom-color:var(--savia)}

/* ---------------------------------------------------------------- portada */
.portada{margin:0 0 46px}
.antetitulo{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tenue); margin:0 0 12px;
}
h1{
  font-family:var(--sans); font-weight:700; font-size:clamp(30px,5vw,44px);
  line-height:1.05; letter-spacing:-.025em; color:var(--bosque);
  margin:0 0 12px; text-wrap:balance;
}
.entradilla{font-size:19px; color:var(--apagado); max-width:62ch; margin:0}

/* -------------------------------------------------------------- secciones */
section{margin:0 0 54px}
section.intro{margin-bottom:38px}
h2{
  font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--apagado);
  margin:0 0 16px; padding-bottom:8px; border-bottom:1px solid var(--filete);
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
}
h2 .n{font-family:var(--mono); font-size:12px; color:var(--tenue); letter-spacing:0}
h3{
  font-family:var(--sans); font-weight:600; font-size:19px; letter-spacing:-.015em;
  color:var(--tinta); margin:30px 0 6px; text-wrap:balance; max-width:62ch;
}
h4{font-family:var(--sans); font-weight:600; font-size:15px; color:var(--apagado); margin:22px 0 5px}
p.lede{font-size:18px; color:var(--apagado); margin:0 0 22px; max-width:62ch}

/* ------------------------------------------------------------------ listas */
ul,ol{margin:0 0 1.05em; max-width:66ch; padding-left:0}
ul{list-style:none}
ul li{position:relative; padding-left:20px; margin-bottom:9px}
ul li::before{content:""; position:absolute; left:0; top:.62em; width:9px; height:2px; background:var(--savia)}
ol{padding-left:24px}
ol li{margin-bottom:9px}
li > ul, li > ol{margin:8px 0 0}

/* --------------------------------------------------------------- tarjetas */
.tarjetas ul{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:12px; margin:20px 0; max-width:none; list-style:none; padding:0;
}
.tarjetas li{
  background:var(--panel); border:1px solid var(--filete-suave); border-radius:4px;
  padding:14px 16px; margin:0; padding-left:16px;
  font-family:var(--sans); font-size:13.5px; line-height:1.5; color:var(--apagado);
}
.tarjetas li::before{display:none}
.tarjetas li strong{
  display:block; font-family:var(--mono); font-size:10.5px; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; color:var(--petroleo-2);
  margin-bottom:5px;
}
.tarjetas li a{border-bottom-color:rgba(44,122,131,.25)}

/* -------------------------------------------------------------------- idea */
blockquote{
  margin:0 0 1.2em; padding:2px 0 2px 16px;
  border-left:3px solid var(--filete); color:var(--apagado); font-style:italic;
}
.idea{
  margin:0 0 20px;
  background:var(--savia-suave); border-left:4px solid var(--savia);
  padding:16px 20px; font-style:normal; color:var(--tinta); max-width:none;
}
.idea p{font-size:19px; line-height:1.4; margin:0; max-width:40ch}
blockquote p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------ tablas */
table{width:100%; border-collapse:collapse; margin:16px 0 24px; font-size:15px}
th{
  font-family:var(--sans); text-align:left; font-size:11px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--bosque); font-weight:600;
  border-bottom:2px solid var(--bosque); padding:8px 14px 8px 0;
}
td{padding:11px 14px 11px 0; border-bottom:1px solid var(--filete-suave);
   vertical-align:top; color:var(--apagado); font-variant-numeric:tabular-nums}
td:first-child{color:var(--tinta); font-family:var(--sans); font-weight:600; font-size:14.5px}

/* ----------------------------------------------------------------- código */
code{font-family:var(--mono); font-size:13px; color:var(--petroleo);
     background:var(--lienzo); padding:1px 5px; border-radius:3px}
pre{
  margin:14px 0 20px; padding:16px 18px; background:var(--lienzo);
  border:1px solid var(--filete-suave); border-radius:4px;
  overflow-x:auto; line-height:1.55;
}
pre code{background:none; padding:0; font-size:12.5px; color:var(--apagado)}
.highlight .k,.highlight .kn{color:var(--bosque); font-weight:600}
.highlight .s,.highlight .s1,.highlight .s2,.highlight .na{color:var(--petroleo)}
.highlight .c,.highlight .c1{color:var(--tenue); font-style:italic}
.highlight .m,.highlight .mi{color:var(--arcilla)}

/* ----------------------------------------------------------- desplegables */
details{
  margin:12px 0 18px; max-width:none;
  background:var(--lienzo); border:1px solid var(--filete-suave);
  border-left:3px solid var(--filete); border-radius:0 4px 4px 0;
}
details[open]{border-left-color:var(--savia)}
details > summary{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tenue); padding:11px 16px; cursor:pointer; list-style:none;
  display:flex; align-items:center; gap:10px;
}
details > summary::-webkit-details-marker{display:none}
details > summary::before{content:"+"; color:var(--savia); font-size:13px; width:10px}
details[open] > summary::before{content:"–"}
details > summary:hover{color:var(--petroleo)}
details > *:not(summary){padding:0 16px; max-width:none}
details > *:not(summary):last-child{padding-bottom:14px}
details p{font-family:var(--sans); font-size:14px; color:var(--apagado); line-height:1.55; margin:0 0 .9em}
details pre{margin:0 0 4px}

/* ------------------------------------------------------------------ ficha */
/* la línea de autores y venue bajo cada título de publicación */
h3 + p, p.ficha{
  font-family:var(--sans); font-size:14px; color:var(--apagado);
  margin:0 0 10px; max-width:none; line-height:1.5;
}
p.ficha strong{color:var(--tinta)}
p.ficha em{font-style:italic}

/* ---------------------------------------------------------------- botones */
a.boton{
  display:inline-block; font-family:var(--sans); font-size:14px; font-weight:600;
  color:var(--bosque); border:1px solid var(--bosque); border-radius:3px;
  padding:9px 16px; margin:4px 8px 8px 0;
}
a.boton:hover{background:var(--savia-suave)}
a.boton.primario{background:var(--bosque); color:var(--lienzo); border-color:var(--bosque)}
a.boton.primario:hover{background:#1B3A24}

/* ------------------------------------------------------------------ retrato */
img.retrato{
  float:right; width:34%; max-width:260px; margin:2px 0 18px 28px;
  border-radius:4px;
}
p:has(> a.boton){clear:both}
@media (max-width:640px){
  img.retrato{float:none; width:62%; margin:16px 0 20px}
  .wrap{padding:26px 18px 70px}
}

/* ---------------------------------------------------------------- figuras */
/* Los SVG van pegados en línea ({{figura:x}} en el markdown), no como <img>:
   así heredan estas variables y cambian solos si cambia un token. */
svg.banda{width:100%; height:auto; display:block; margin:22px 0 0; font-family:var(--sans)}
p.pie{
  font-family:var(--mono); font-size:11.5px; line-height:1.5; color:var(--tenue);
  margin:8px 0 22px; max-width:72ch;
}

/* ---------------------------------------------------------------- ofertas */
body{counter-reset:oferta}
.oferta{
  counter-increment:oferta;
  margin:0 0 42px; padding-top:28px; border-top:1px solid var(--filete);
}
.oferta:first-of-type{padding-top:0; border-top:0}
.oferta::before{
  content:counter(oferta,decimal-leading-zero);
  display:block; margin-bottom:6px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--petroleo-2);
}
.oferta h3{margin-top:0; font-size:21px}

/* -------------------------------------------------------------------- pie */
footer{
  margin-top:56px; padding-top:16px; border-top:1px solid var(--filete);
  font-family:var(--mono); font-size:11px; line-height:1.9; color:var(--tenue);
}
footer a{color:var(--apagado); border-bottom-color:var(--filete)}
footer a:hover{color:var(--petroleo-2)}

/* -------------------------------------------------------------- impresión */
/* El PDF es esta misma página impresa: no hay segunda plantilla ni segundo
   montaje. A4, la navegación fuera y una oferta por hoja.
   Ctrl/Cmd+P → A4 vertical, márgenes predeterminados, «gráficos de fondo». */
@media print{
  @page{size:A4 portrait; margin:14mm 15mm}
  html,body{background:#fff}
  body{font-size:10.5pt; line-height:1.5}
  .wrap{max-width:none; padding:0}

  .barra{margin-bottom:9mm; padding-bottom:8px}
  .barra nav{display:none}                    /* la marca se queda, el menú no */

  .portada{margin-bottom:8mm}
  h1{font-size:22pt}
  .antetitulo{font-size:8.5pt}
  .entradilla{font-size:12pt; margin-bottom:6px}
  section.intro{margin-bottom:9mm}            /* la entrada sí va en el PDF: es la oferta */

  section{margin-bottom:0}
  .oferta{
    break-before:page; page-break-before:always;
    margin-bottom:0; padding-top:0; border-top:0;
  }
  .oferta:first-of-type{break-before:auto; page-break-before:auto}
  .oferta::before{font-size:9pt}
  .oferta h3{font-size:15pt; margin-bottom:3px}
  h4{font-size:9.5pt; margin:13px 0 3px}
  p,ul,ol{font-size:10.5pt}
  ul li{margin-bottom:3px}
  svg.banda{margin-top:12px}
  p.pie{font-size:8.5pt; margin-bottom:12px}

  svg.banda,ul,h3,h4{break-inside:avoid; page-break-inside:avoid}
  h3,h4{break-after:avoid; page-break-after:avoid}

  footer{margin-top:9mm}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}

/* ------------------------------------------------------------------- cv */
/* La página de CV reutiliza el armazón del sitio. Lo único propio: el botón
   que dispara la impresión y un juego de reglas de impresión más apretado,
   porque un CV quiere caber en pocas hojas y una oferta no. */
.acciones{display:flex; flex-wrap:wrap; align-items:center; max-width:none; margin:0 0 4px}
button.boton{
  display:inline-block; font-family:var(--sans); font-size:14px; font-weight:600;
  color:var(--bosque); background:none; border:1px solid var(--bosque); border-radius:3px;
  padding:9px 16px; margin:4px 8px 8px 0; line-height:1.4; cursor:pointer;
}
button.boton:hover{background:var(--savia-suave)}
button.boton.primario{background:var(--bosque); color:var(--lienzo)}
button.boton.primario:hover{background:#1B3A24}

@media print{
  .no-print{display:none !important}

  /* Acotado a las páginas de CV: son las únicas con barra de acciones. */
  .wrap:has(.acciones) section{margin-bottom:6mm}
  .wrap:has(.acciones) section.intro{margin-bottom:6mm}
  .wrap:has(.acciones) h2{margin-bottom:8px; padding-bottom:5px}
  .wrap:has(.acciones) h3{font-size:11.5pt; margin:9px 0 2px}
  .wrap:has(.acciones) h3 + p,
  .wrap:has(.acciones) p.ficha{font-size:9pt; margin-bottom:7px}
  .wrap:has(.acciones) p.lede{font-size:10.5pt; margin-bottom:8px}
  .wrap:has(.acciones) table{font-size:9pt; margin:6px 0 10px}
  .wrap:has(.acciones) th{padding:5px 10px 5px 0}
  .wrap:has(.acciones) td{padding:5px 10px 5px 0}
  .wrap:has(.acciones) .tarjetas ul{grid-template-columns:repeat(2,1fr); gap:7px; margin:10px 0}
  .wrap:has(.acciones) .tarjetas li{font-size:9pt; padding:9px 11px}
  .wrap:has(.acciones) details{background:none; border-left-color:var(--savia)}
  .wrap:has(.acciones) details > summary{padding:7px 12px}
  .wrap:has(.acciones) details p{font-size:9pt}

  /* Nada se parte por la mitad: ni una ficha de publicación, ni una fila. */
  .wrap:has(.acciones) section,
  .wrap:has(.acciones) tr,
  .wrap:has(.acciones) .tarjetas li,
  .wrap:has(.acciones) details{break-inside:avoid; page-break-inside:avoid}
  .wrap:has(.acciones) h3{break-after:avoid; page-break-after:avoid}
}

/* Las tarjetas del resumen del CV piden más presencia que una tarjeta de
   índice: llevan el acento lateral de savia —el mismo recurso que .idea, tres
   píxeles en vez de cuatro, el token `acento_lateral_px`— y las cifras en
   mono, que es donde el sistema pone los datos. Acotado al CV: el resto del
   sitio se queda con la tarjeta neutra. */
.dato{font-family:var(--mono); font-variant-numeric:tabular-nums}
.wrap:has(.acciones) .tarjetas li{
  border-left:3px solid var(--savia);
  padding:15px 16px 15px 17px;
  font-size:14px; color:var(--tinta);
}
.wrap:has(.acciones) .tarjetas li strong{font-size:11px; margin-bottom:7px; color:var(--petroleo)}
.wrap:has(.acciones) .tarjetas .dato{color:var(--bosque); font-weight:500}
@media print{
  .wrap:has(.acciones) .tarjetas li{padding:9px 11px 9px 12px; font-size:9pt}
}