/* ==========================================================================
   Miguel Ángel Temprano - hoja de estilo de la maqueta
   Identidad Knightford Asset Management: azul profundo, dorado, gris claro
   y marfil, con Monument Extended para titulares y Montserrat para el resto.

   TIPOGRAFÍA
   Monument Extended es una fuente de licencia comercial y no se puede servir
   desde Google Fonts. Mientras no estén los ficheros con licencia, la maqueta
   usa Archivo en su versión expandida, que es la alternativa libre más cercana.
   Para poner la fuente real basta con dejar los ficheros en maqueta/fonts/ y
   descomentar el bloque @font-face de aquí abajo: el resto de la hoja ya la
   tiene declarada como primera opción.
   ========================================================================== */

/*
@font-face{
  font-family:"Monument Extended";
  src:url("../fonts/MonumentExtended-Light.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Monument Extended";
  src:url("../fonts/MonumentExtended-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Monument Extended";
  src:url("../fonts/MonumentExtended-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
*/

:root{
  /* paleta Knightford */
  --azul:#0F1F33;
  --azul-2:#16293F;
  --azul-3:#22374F;
  --oro:#B89B5B;
  --oro-claro:#CDB176;
  --oro-oscuro:#9A8049;
  --gris:#E7E4DF;
  --marfil:#F7F5F2;
  --blanco:#FFFFFF;

  /* nombres de uso */
  --papel:var(--marfil);
  --papel-2:var(--gris);
  --tinta:var(--azul);
  --tinta-2:#4E5D72;
  --tinta-3:#8892A0;
  --marino:var(--oro-oscuro); /* acento de enlaces sueltos */
  --marino-oscuro:var(--oro-oscuro);
  --marino-claro:var(--oro-claro);
  --marino-tenue:rgba(184,155,91,.10);
  --verde:#6F7F72;
  --linea:#D9D4CB;
  --linea-suave:#E7E4DF;

  /* tipografía */
  --display:"Monument Extended","Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:var(--display); /* alias heredado */

  /* medidas */
  --ancho:1180px;
  --ancho-texto:700px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* al llegar por un enlace con ancla, la barra fija no debe tapar el destino */
[id]{scroll-margin-top:96px}
body{
  margin:0;background:var(--marfil);color:var(--azul);
  font-family:var(--sans);font-size:16.5px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 28px}
.oculto{display:none !important}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* titulares grandes: Monument Extended Light */
h1,h2{
  margin:0;font-family:var(--display);font-weight:300;font-stretch:125%;
  line-height:1.16;letter-spacing:.005em;
}
/* subtítulos y destacados: Montserrat SemiBold */
h3,h4,h5{margin:0;font-family:var(--sans);font-weight:600;line-height:1.3;letter-spacing:-.005em}

/* --------------------------------------------------------------- etiquetas */
.etq,.antetitulo{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.antetitulo{color:var(--oro);margin-bottom:26px;display:flex;align-items:center;gap:14px}
.antetitulo::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--oro),transparent)}
.filete{width:56px;height:2px;background:var(--oro)}

/* --------------------------------------------------------------- botones */
.btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);
  font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:15px 28px;border:1px solid transparent;cursor:pointer;transition:.2s;
}
.btn-primario{background:var(--oro);color:var(--azul)}
.btn-primario:hover{background:var(--oro-claro)}
.btn-secundario{border-color:var(--linea);color:var(--azul);background:none}
.btn-secundario:hover{border-color:var(--oro);color:var(--oro-oscuro)}
.btn-claro{background:var(--marfil);color:var(--azul)}
.botones{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
/* botones sobre fondo azul */
.portada .btn-secundario,.suscripcion .btn-secundario{border-color:rgba(247,245,242,.35);color:var(--marfil)}
.portada .btn-secundario:hover,.suscripcion .btn-secundario:hover{border-color:var(--oro);color:var(--oro-claro)}

/* --------------------------------------------------------------- cabecera */
.barra{position:sticky;top:0;z-index:80;background:var(--azul);border-bottom:1px solid rgba(184,155,91,.35)}
.barra-int{display:flex;align-items:center;justify-content:space-between;gap:24px;height:82px}
.marca{font-family:var(--display);font-weight:400;font-stretch:112%;font-size:15.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--marfil);line-height:1.1;white-space:nowrap}
.marca span{display:block;font-family:var(--sans);font-size:9px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--oro);margin-top:6px;white-space:nowrap}
.nav{display:flex;align-items:center;gap:32px}
.nav a{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,245,242,.78);padding:8px 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--marfil);border-bottom-color:var(--oro)}
.nav a.activo{color:var(--oro);border-bottom-color:var(--oro)}

/* una sección con desplegable: la flecha avisa de que hay algo debajo */
.nav .con-hijos{position:relative;display:inline-flex;align-items:center;gap:7px}
.nav .con-hijos>a::after{content:"";display:inline-block;margin-left:8px;width:5px;height:5px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.7}
.nav .submenu{position:absolute;top:100%;left:-18px;min-width:230px;margin:0;padding:8px 0;
  list-style:none;background:var(--azul-2,#16283d);border:1px solid rgba(184,155,91,.35);
  box-shadow:0 14px 34px rgba(0,0,0,.3);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:.16s;z-index:90}
.nav .con-hijos:hover .submenu,
.nav .con-hijos:focus-within .submenu,
.nav .con-hijos.abierto .submenu{opacity:1;visibility:visible;transform:none}
.nav .submenu a{display:block;padding:11px 18px;border:0;font-size:11px;letter-spacing:.12em;
  color:rgba(247,245,242,.82);text-transform:uppercase;white-space:nowrap}
.nav .submenu a:hover,.nav .submenu a.activo{background:rgba(184,155,91,.14);color:var(--oro);border:0}
/* el hueco entre la pestaña y el desplegable, para que no se cierre al bajar */
.nav .con-hijos::after{content:"";position:absolute;top:100%;left:0;right:0;height:12px}
.idiomas{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:600;letter-spacing:.14em;color:rgba(247,245,242,.5);border-left:1px solid rgba(247,245,242,.2);padding-left:22px}
.idiomas a:hover{color:var(--oro)}
.idiomas .activo{color:var(--oro)}
.boton-menu{display:none;background:none;border:1px solid rgba(247,245,242,.3);color:var(--marfil);padding:10px 14px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.nav-movil{display:none;background:var(--azul-2)}
.nav-movil.abierto{display:block}
.nav-movil a{display:block;padding:16px 28px;border-top:1px solid rgba(247,245,242,.1);font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--marfil)}
.nav-movil a.hijo{padding-left:52px;font-size:12px;color:rgba(247,245,242,.72);position:relative}
.nav-movil a.hijo::before{content:"";position:absolute;left:30px;top:50%;width:12px;height:1px;background:rgba(184,155,91,.6)}
.nav-movil .idiomas-movil{display:flex;gap:18px;padding:16px 28px;border-top:1px solid rgba(247,245,242,.1);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--oro)}

/* --------------------------------------------------------------- portada */
.portada{position:relative;background:var(--azul);color:var(--marfil);overflow:hidden}
.portada::before{ /* disco gris de la identidad */
  content:"";position:absolute;top:-14%;right:6%;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(231,228,223,.16),rgba(231,228,223,.03) 62%,transparent 70%);
  pointer-events:none;
}
.portada::after{ /* arco dorado */
  content:"";position:absolute;bottom:-32%;right:-8%;width:720px;height:720px;border-radius:50%;
  border:1px solid rgba(184,155,91,.32);pointer-events:none;
}
.portada-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.14fr .86fr;align-items:stretch;min-height:640px;gap:56px}
.portada-txt{padding:96px 0;display:flex;flex-direction:column;justify-content:center}
.portada h1{font-size:clamp(32px,3.9vw,50px);color:var(--marfil);letter-spacing:.01em;line-height:1.2}
.portada h1 em{font-style:normal;color:var(--oro)}
.entradilla{font-size:17px;color:rgba(247,245,242,.74);margin:30px 0 0;max-width:34em;font-weight:300}
.portada-retrato{position:relative;align-self:stretch;margin:56px 0;border:1px solid rgba(184,155,91,.4);background:linear-gradient(165deg,rgba(231,228,223,.10),rgba(231,228,223,.02));display:grid;place-items:center;overflow:hidden}
.portada-retrato img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
/* retrato dentro de la ficha lateral de Sobre mí */
.retrato-ficha{position:relative;aspect-ratio:4/5;background:linear-gradient(155deg,#EFEBE2,#DED8CB);border-bottom:1px solid var(--linea);display:grid;place-items:center;margin:-32px -30px 28px;overflow:hidden}
.retrato-ficha img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.marco-vacio{text-align:center;color:rgba(184,155,91,.6);padding:40px}
.marco-vacio b{display:block;font-family:var(--display);font-weight:300;font-stretch:125%;font-size:58px;line-height:1;color:rgba(184,155,91,.55);letter-spacing:.06em}
.marco-vacio small{display:block;margin-top:14px;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase}
.sello{position:absolute;left:0;bottom:0;background:var(--oro);color:var(--azul);padding:11px 22px;font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}

/* cita */
.cita{position:relative;background:var(--gris);padding:104px 0 84px}
.cita::before{
  content:"«";position:absolute;top:32px;left:50%;transform:translateX(-50%);
  font-family:var(--display);font-weight:300;font-size:64px;color:rgba(184,155,91,.5);line-height:1;
}
.cita blockquote{position:relative;margin:0 auto;max-width:860px;text-align:center;font-family:var(--display);font-weight:300;font-stretch:112%;font-size:clamp(19px,2vw,26px);line-height:1.5;color:var(--azul)}
.cita cite{display:block;margin-top:24px;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;font-style:normal;color:var(--oro-oscuro)}

/* cifras */
.cifras{background:var(--marfil);border-bottom:1px solid var(--linea)}
.cifras-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.cifra{padding:52px 32px 48px;border-right:1px solid var(--linea);position:relative}
.cifra::before{content:"";position:absolute;top:0;left:0;width:28px;height:2px;background:var(--oro)}
.cifra:first-child{padding-left:0}
.cifra:last-child{border-right:0;padding-right:0}
.cifra b{display:block;font-family:var(--display);font-weight:300;font-stretch:125%;font-size:40px;line-height:1;color:var(--oro-oscuro);letter-spacing:.01em}
.cifra p{margin:16px 0 0;font-size:12.5px;color:var(--tinta-2);line-height:1.55;letter-spacing:.02em}

/* --------------------------------------------------------------- secciones */
section.bloque{padding:86px 0;border-bottom:1px solid var(--linea)}
section.bloque:nth-of-type(even){background:linear-gradient(180deg,var(--blanco),var(--marfil))}
.cabecera-seccion{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:48px;padding-bottom:20px;border-bottom:1px solid var(--linea);position:relative}
.cabecera-seccion::after{content:"";position:absolute;left:0;bottom:-1px;width:72px;height:2px;background:var(--oro)}
.cabecera-seccion h2{font-size:26px}
.cabecera-seccion a{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--oro-oscuro);white-space:nowrap}
.cabecera-seccion a:hover{color:var(--azul)}

/* cabecera de página interior */
.cabecera-pagina{padding:74px 0 62px;background:var(--azul);color:var(--marfil);position:relative;overflow:hidden}
.cabecera-pagina::after{content:"";position:absolute;top:-60%;right:-6%;width:480px;height:480px;border-radius:50%;border:1px solid rgba(184,155,91,.28)}
.cabecera-pagina h1{font-size:clamp(30px,3.4vw,42px);color:var(--marfil);max-width:20em;position:relative}
.cabecera-pagina .entradilla{margin-top:26px}
.migas{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,245,242,.5);margin-bottom:26px;position:relative}
.migas a:hover{color:var(--oro)}

/* --------------------------------------------------------------- sobre mí */
.sobre{display:grid;grid-template-columns:.86fr 1.14fr;gap:64px;align-items:start}
.sobre-texto p{margin:0 0 22px;color:var(--tinta-2);font-size:16px}
.sobre-texto p.destaca{font-size:18px;color:var(--azul);font-weight:500;line-height:1.62}
.hitos{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--linea)}
.hitos li{display:grid;grid-template-columns:132px 1fr;gap:22px;padding:18px 0;border-bottom:1px solid var(--linea);font-size:14.5px;color:var(--tinta-2)}
.hitos span{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--oro-oscuro);padding-top:3px}
/* Un cuadro sin rótulo ocupa el ancho entero. La rejilla de arriba reserva 132
   píxeles para la etiqueta; si un cuadro no la lleva, su texto caía en esa
   columna estrecha y salía una palabra por línea. Pasó al quitar el rótulo
   «Actualidad» del cuadro de Formación. */
.hitos li:not(:has(> span:first-child)){grid-template-columns:1fr}
.ficha-lateral{background:var(--blanco);border:1px solid var(--linea);border-top:2px solid var(--oro);padding:32px 30px;position:sticky;top:106px}
.ficha-lateral h4{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--oro-oscuro);margin-bottom:22px}
.ficha-lateral dl{margin:0}
.ficha-lateral dt{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--azul);margin-top:22px}
.ficha-lateral dt:first-of-type{margin-top:0}
.ficha-lateral dd{margin:8px 0 0;font-size:14.5px;color:var(--tinta-2)}

/* --------------------------------------------------------------- columna */
.destacada{display:grid;grid-template-columns:1.16fr .84fr;gap:56px;align-items:start;margin-bottom:56px}
/* Cuando no hay nada a la derecha. Sin esto, el bloque reservaba el 42% del
   ancho para un hueco vacío y el titular salía apretado contra el margen
   izquierdo de la pantalla. */
.destacada.sola{grid-template-columns:minmax(0,1fr);max-width:64em}
.destacada .meta{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-oscuro);margin-bottom:20px}
.destacada h3{font-family:var(--display);font-weight:300;font-stretch:118%;font-size:clamp(22px,2.3vw,31px);line-height:1.26;letter-spacing:.005em}
.destacada h3 a:hover{color:var(--oro-oscuro)}
.destacada p{color:var(--tinta-2);margin:22px 0 0;font-size:16px}
.sumario{background:var(--azul);color:var(--marfil);padding:34px 32px;border-top:2px solid var(--oro)}
.sumario h4{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--oro);margin-bottom:22px}
.sumario ol{margin:0;padding-left:18px;font-size:14.5px;color:rgba(247,245,242,.78)}
.sumario li{margin-bottom:14px;padding-left:6px}
.sumario li::marker{color:var(--oro);font-weight:600}

.lista-columnas{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.col-item{padding-top:22px;border-top:1px solid var(--azul);position:relative}
.col-item::before{content:"";position:absolute;top:-1px;left:0;width:32px;height:2px;background:var(--oro)}
.col-item .fecha{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-3)}
.col-item h4{font-size:17px;margin:14px 0 0;line-height:1.4}
.col-item:hover h4{color:var(--oro-oscuro)}
.col-item p{font-size:14px;color:var(--tinta-2);margin:12px 0 0}

/* franja de datos bajo la cabecera azul */
.franja-datos{display:flex;flex-wrap:wrap;gap:44px;margin-top:36px;padding-top:28px;border-top:1px solid rgba(184,155,91,.3);position:relative}
.franja-datos div{display:flex;flex-direction:column;gap:6px}
.franja-datos b{font-family:var(--display);font-weight:300;font-stretch:125%;font-size:26px;color:var(--oro);line-height:1}
.franja-datos span{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,245,242,.55)}

/* cabecera ilustrada de la columna */
.cabecera-columna{
  background-image:url("../img/columna-cabecera.svg");
  background-repeat:no-repeat;background-position:right -60px center;background-size:auto 128%;
}
.cabecera-columna::after{display:none}
.cabecera-columna h1{max-width:15em}
.cabecera-columna .entradilla{max-width:30em}

/* cabecera ilustrada de medios */
.cabecera-medios{
  background-image:url("../img/medios-cabecera.svg");
  background-repeat:no-repeat;background-position:right -40px center;background-size:auto 122%;
}
.cabecera-medios::after{display:none}
.cabecera-medios h1{max-width:14em}
.cabecera-medios .entradilla{max-width:30em}

/* cabeceras ilustradas del resto de secciones */
.cabecera-sobre,.cabecera-analisis,.cabecera-contacto{
  background-repeat:no-repeat;background-position:right -40px center;background-size:auto 122%;
}
.cabecera-sobre{background-image:url("../img/sobre-mi-cabecera.svg")}
.cabecera-analisis{background-image:url("../img/analisis-cabecera.svg")}
.cabecera-contacto{background-image:url("../img/contacto-cabecera.svg")}
.cabecera-sobre::after,.cabecera-analisis::after,.cabecera-contacto::after{display:none}
.cabecera-sobre h1,.cabecera-analisis h1,.cabecera-contacto h1{max-width:14em}
.cabecera-sobre .entradilla,.cabecera-analisis .entradilla,.cabecera-contacto .entradilla{max-width:30em}

/* cabecera del informe semanal */
.cabecera-mundo{background-image:url("../img/mundo-cabecera.svg");background-repeat:no-repeat;
  background-position:right -40px center;background-size:auto 122%}
.cabecera-mundo::after{display:none}
.cabecera-mundo h1{max-width:14em}
.cabecera-mundo .entradilla{max-width:30em}

/* informe destacado de la semana */
.informe-ultimo{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start;margin-bottom:56px}
.informe-ultimo .semana{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-oscuro);margin-bottom:18px}
.informe-ultimo h3{font-family:var(--display);font-weight:300;font-stretch:112%;font-size:clamp(21px,2.3vw,30px);line-height:1.32;letter-spacing:.005em;color:var(--azul)}
.informe-ultimo .abre{font-size:16px;color:var(--tinta-2);margin:22px 0 0}

/* indicador de riesgo */
.indicador{background:var(--azul);color:var(--marfil);padding:34px 30px;border-top:2px solid var(--oro);text-align:center}
.indicador .rotulo{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--oro);margin-bottom:20px}
.indicador .valor{font-family:var(--display);font-weight:300;font-stretch:125%;font-size:64px;line-height:1;color:var(--marfil)}
.indicador .sobre{font-size:12px;color:rgba(247,245,242,.5);margin-top:6px}
.indicador .banda{margin-top:18px;display:inline-block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--oro);border:1px solid rgba(184,155,91,.5);padding:8px 16px}
.indicador .escala{margin-top:26px;padding-top:20px;border-top:1px solid rgba(247,245,242,.14);text-align:left}
.indicador .escala div{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:6px 0;color:rgba(247,245,242,.62)}
.indicador .escala div.aqui{color:var(--oro);font-weight:600}
.indicador .escala span:first-child{font-variant-numeric:tabular-nums}

/* archivo de informes */
.informes{border-top:2px solid var(--azul)}
.informe{display:grid;grid-template-columns:150px 1fr 96px 110px;gap:26px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--linea-suave);transition:.18s}
.informe:hover{background:linear-gradient(90deg,var(--marino-tenue),transparent)}
.informe .cuando{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3)}
.informe .cuando em{display:block;margin-top:6px;font-style:normal;font-size:9.5px;letter-spacing:.16em;color:var(--oro-oscuro)}
.informe h4{font-size:16.5px;line-height:1.45;font-weight:600}
/* El número del KGRI, con su rótulo. En el escritorio el rótulo estorba -la
   columna es estrecha y la cabecera de la tabla ya lo dice-, así que solo se
   enseña el número; en el móvil, donde el número aparece suelto debajo del
   titular, se enseña entero. */
.informe .riesgo{text-align:right}
.informe .riesgo em,.informe .riesgo i{display:none}
.informe .riesgo b{font-family:var(--display);font-weight:300;font-stretch:118%;font-size:19px;color:var(--oro-oscuro)}
.informe .bajar{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--oro-oscuro);text-align:right}
.informe .bajar a{display:block}
.informe .bajar a+a{margin-top:6px;color:var(--tinta-3)}

/* Quién ha hecho el KGRI, encima de los ocho termómetros.
   Recuadro sobre papel blanco con la barra de oro, como los destacados de la
   columna: es un texto de otra naturaleza que el que lo rodea -dice de quién
   es el índice- y conviene que se distinga de la explicación de al lado. */
.nota-kgri{position:relative;max-width:52em;margin:0 0 40px;
  padding:22px 28px 22px 36px;border:1px dotted var(--linea);background:var(--blanco);
  font-size:15.5px;line-height:1.7;color:var(--tinta-2)}
.nota-kgri::before{content:"";position:absolute;left:14px;top:16px;bottom:16px;
  width:3px;background:var(--oro)}

/* los ocho termómetros */
/* Informe FX: el regimen del dia -A, B o C- con su color. El color acompaña,
   no informa por si solo: al lado va siempre la letra y el nombre escrito, para
   quien no distinga bien los colores y para quien lo imprima en blanco y negro. */
.indicador.fx-a .valor{color:#4E7A52}
.indicador.fx-b .valor{color:#B8863B}
.indicador.fx-c .valor{color:#9E3B32}
.chip-regimen{display:inline-block;min-width:26px;padding:3px 9px;border-radius:2px;
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;text-align:center}
.chip-regimen.fx-a{background:#E4EDE4;color:#3C6440}
.chip-regimen.fx-b{background:#F6EBD8;color:#8A6220}
.chip-regimen.fx-c{background:#F5DEDB;color:#8A2B23}
.chip-regimen.fx-sin{background:var(--gris);color:var(--tinta-3)}
.informe-fx{grid-template-columns:110px 1fr 70px 110px}

/* ------------------------------- la cabecera de la columna, como en papel ---
   Reproduce la que llevan los PDF impresos: la banda en degradado, «La columna
   de» y su firma. Se le añade el retrato en redondo, que en el papel no hace
   falta -quien tiene el PDF en la mano sabe de quién es- y en pantalla sí. */
.cabecera-columna-firma{border-bottom:1px solid var(--linea);background:var(--marfil)}
.ccf-int{display:flex;align-items:center;gap:18px;padding:22px 0 18px}
.ccf-banda{flex:1;height:26px;min-width:40px;
  background:linear-gradient(90deg,#9FB0C6 0%,#C3CEDC 34%,#DCE2EA 62%,#EFF2F6 100%)}
.ccf-rotulo{font-family:var(--display);font-weight:300;font-stretch:105%;
  font-size:clamp(15px,1.7vw,20px);color:var(--tinta-2);white-space:nowrap}
.ccf-firma{height:clamp(30px,3.4vw,42px);width:auto;display:block}
.ccf-foto{flex:none;width:54px;height:54px;border-radius:50%;
  border:2px solid var(--marfil);box-shadow:0 0 0 1px var(--linea);
  background:url("../img/retrato-firma.jpg?v=3") center/cover}

@media(max-width:600px){
  /* En el móvil la banda se queda sin sitio: se va, y quedan el retrato, el
     rótulo y la firma, que es lo que identifica la pieza. */
  .ccf-int{gap:12px;padding:16px 0 14px}
  .ccf-banda{display:none}
  .ccf-rotulo{font-size:14px}
  .ccf-firma{height:30px}
  .ccf-foto{width:44px;height:44px}
}

/* ---------------------------------------------------- el visor de PDF ---
   Leer un informe sin descargarlo. Ocupa casi toda la pantalla porque un PDF
   en un cuadradito no se lee, y deja siempre a la vista los botones de abrir
   en pestaña y de descargar: el visor no sustituye a la descarga. */
.visor{position:fixed;inset:0;z-index:900;background:rgba(15,31,51,.82);
  display:flex;align-items:center;justify-content:center;padding:28px}
.visor[hidden]{display:none}
body.con-visor{overflow:hidden}
.visor-caja{background:var(--marfil);width:min(1000px,100%);height:min(92vh,100%);
  display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.visor-barra{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 16px;border-bottom:1px solid var(--linea);background:var(--marfil)}
.visor-titulo{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--azul);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visor-acciones{display:flex;align-items:center;gap:14px;flex:none}
.visor-acciones a{font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--oro-oscuro);white-space:nowrap}
.visor-cerrar{border:0;background:none;cursor:pointer;font-size:16px;line-height:1;
  color:var(--tinta-3);padding:4px 2px}
.visor-cerrar:hover{color:var(--azul)}
/* La caja que se desplaza, y dentro el marco. El marco puede ser MAS grande
   que la caja: eso es lo que hace el zoom. El visor de PDF ajusta la página al
   ancho del marco, así que un marco al 250% dibuja la página al 250%, nítida,
   sin recargar el documento y sin depender de que el navegador entienda
   ningún parámetro raro. */
.visor-lente{flex:1;overflow:auto;background:var(--gris);-webkit-overflow-scrolling:touch}
.visor-marco{display:block;width:100%;height:100%;border:0;background:var(--gris)}
.visor-apuro{margin:0;padding:8px 16px;font-size:12px;color:var(--tinta-3);
  border-top:1px solid var(--linea);text-align:center}
.visor-apuro a{color:var(--marino);font-weight:600}

/* El zoom del visor. Dos botones y la cifra: nada de una barra deslizante,
   que en una pantalla de mano se arrastra sin querer al pasar página. */
.visor-zoom{display:flex;align-items:center;gap:2px;border:1px solid var(--linea);
  border-radius:4px;overflow:hidden}
.visor-zoom button{border:0;background:none;cursor:pointer;width:30px;height:26px;
  font-size:15px;line-height:1;color:var(--azul);padding:0}
.visor-zoom button:hover:not(:disabled){background:var(--gris)}
.visor-zoom button:disabled{color:var(--tinta-3);cursor:default}
.visor-zoom-valor{font-family:var(--sans);font-size:10.5px;font-weight:600;
  color:var(--tinta-2);min-width:38px;text-align:center;font-variant-numeric:tabular-nums}

@media(max-width:600px){
  /* En el movil el visor va a pantalla completa y la barra se aprieta: un PDF
     con margenes en una pantalla de mano no deja sitio para leer. */
  .visor{padding:0}
  .visor-caja{height:100%;width:100%}
  .visor-titulo{display:none}
  .visor-acciones{width:100%;justify-content:space-between;gap:8px}
  .visor-acciones a{font-size:10px;letter-spacing:.08em}
  /* «Descargar» se cae de la barra en el móvil: no cabe con el zoom, y el
     documento se puede descargar desde la lista, que es de donde se viene. */
  .visor-bajar{display:none}
  /* Y el aviso de abrirlo en una pestaña deja de ser letra pequeña gris: en
     Safari de iPhone el zoom de arriba no hace nada -Safari no entiende
     «#zoom»-, y abrirlo aparte es la única forma de agrandarlo de verdad. */
  .visor-apuro{padding:12px 16px;font-size:13px;color:var(--tinta-2);
    background:var(--marfil)}
  .visor-apuro a{text-decoration:underline}
}

/* Los numeros de pagina que pinta el navegador en la tabla de medios. Mismo
   aspecto que los del servidor, para que no se noten dos maneras distintas de
   paginar en la misma web. */
.paginas{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:30px}
.paginas button,.paginas .pag-puntos{display:inline-block;min-width:34px;padding:7px 10px;
  text-align:center;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.06em;
  color:var(--tinta-2);background:none;border:1px solid var(--linea);cursor:pointer}
.paginas button:hover:not(:disabled){border-color:var(--oro);color:var(--azul)}
.paginas button.actual{background:var(--azul);border-color:var(--azul);color:var(--marfil)}
.paginas button:disabled{opacity:.35;cursor:default}
.paginas .pag-puntos{border:0;min-width:0;padding:7px 2px;cursor:default}
.paginas .pag-mov{letter-spacing:.12em;text-transform:uppercase;font-size:10.5px}

/* Los numeros de pagina del archivo FX. */
.nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:34px}
.nav-links .page-numbers{display:inline-block;min-width:34px;padding:7px 10px;text-align:center;
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.06em;
  color:var(--tinta-2);border:1px solid var(--linea);text-decoration:none}
.nav-links .page-numbers:hover{border-color:var(--oro);color:var(--azul)}
.nav-links .page-numbers.current{background:var(--azul);border-color:var(--azul);color:var(--marfil)}
.nav-links .page-numbers.dots{border:0;min-width:0;padding:7px 2px}
.nav-links .prev,.nav-links .next{letter-spacing:.12em;text-transform:uppercase;font-size:10.5px}
@media(max-width:600px){
  .informe-fx{grid-template-columns:88px 1fr 46px;gap:10px}
  .informe-fx .bajar{grid-column:1/4;text-align:left}
}

.sigmas{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea)}
.sigma{background:var(--marfil);padding:26px 22px}
.sigma .clave{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--oro-oscuro)}
.sigma h4{font-size:14.5px;margin:10px 0 8px;line-height:1.35}
.sigma p{margin:0;font-size:13px;color:var(--tinta-2)}
.sigma .peso{float:right;font-size:11px;color:var(--tinta-3)}

/* cronología de la trayectoria */
/* La columna de la etiqueta -«Defensa», «Telecomunicaciones»- se mide con una
   sola variable, --col, y de ella salen la línea vertical y el punto. Antes
   eran tres números sueltos (110, 142 y 137) y ensanchar la columna dejaba la
   línea donde estaba.

   200px no es un número redondo por casualidad: medido en la web con Monument
   Extended a 17px, «Telecomunicaciones» ocupa 188px. Por debajo de eso el
   navegador parte la palabra. Si algún día se añade una etiqueta más larga,
   este es el único número que hay que subir. */
.cronologia{position:relative;margin:0;padding:0;list-style:none;--col:200px}
.cronologia::before{content:"";position:absolute;left:calc(var(--col) + 32px);top:8px;bottom:8px;width:1px;background:var(--linea)}
.cronologia li{position:relative;display:grid;grid-template-columns:var(--col) 1fr;gap:50px;padding:0 0 40px}
.cronologia li::before{content:"";position:absolute;left:calc(var(--col) + 27px);top:9px;width:11px;height:11px;border-radius:50%;background:var(--marfil);border:2px solid var(--oro)}
/* Puede ocupar dos líneas, pero una palabra no se parte nunca. El corte venía
   heredado de fuera de esta hoja, así que aquí se anula de forma explícita:
   overflow-wrap normal es lo que lo desactiva, y keep-all e hyphens lo cierran
   por si acaso. */
.cronologia .cuando{font-family:var(--display);font-weight:300;font-stretch:118%;font-size:17px;color:var(--oro-oscuro);text-align:right;padding-top:2px;letter-spacing:.02em;padding-right:6px;line-height:1.25;word-break:keep-all;overflow-wrap:normal;hyphens:none}
.cronologia h4{font-size:17px;margin-bottom:8px}
.cronologia p{margin:0;font-size:14.5px;color:var(--tinta-2)}
.cronologia .donde{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);margin-top:8px}

/* método de trabajo */
.metodo{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea)}
.metodo article{background:var(--marfil);padding:32px 26px;display:flex;flex-direction:column;gap:12px}
.metodo article:hover{background:var(--blanco)}
.metodo .num{font-family:var(--display);font-weight:300;font-stretch:125%;font-size:15px;letter-spacing:.22em;color:var(--oro)}
.metodo h4{font-size:16.5px;line-height:1.35}
.metodo p{margin:0;font-size:13.5px;color:var(--tinta-2)}

/* vías de contacto */
.vias{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:56px}
.via{border:1px solid var(--linea);border-top:2px solid var(--oro);background:var(--blanco);padding:32px 28px;display:flex;flex-direction:column;gap:14px}
.via .para{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--oro-oscuro)}
.via h3{font-family:var(--display);font-weight:300;font-stretch:118%;font-size:21px;letter-spacing:.01em}
.via p{margin:0;font-size:14.5px;color:var(--tinta-2)}
.via .plazo{margin-top:auto;padding-top:16px;border-top:1px solid var(--linea);font-size:12.5px;color:var(--tinta-3)}

/* ficha para periodistas */
.dosier{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.dosier-datos{background:var(--azul);color:var(--marfil);padding:38px 34px;border-top:2px solid var(--oro)}
.dosier-datos h3{font-family:var(--display);font-weight:300;font-stretch:118%;font-size:21px;color:var(--marfil);letter-spacing:.02em;margin-bottom:24px}
.dosier-datos dl{margin:0}
.dosier-datos dt{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--oro);margin-top:22px}
.dosier-datos dt:first-of-type{margin-top:0}
.dosier-datos dd{margin:7px 0 0;font-size:15px;color:rgba(247,245,242,.8)}
.dosier-datos .botones{margin-top:30px}

/* temas de los que habla */
.temas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.tema-chip{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:10px 18px;border:1px solid var(--linea);color:var(--tinta-2);background:var(--blanco)}
.tema-chip:hover{border-color:var(--oro);color:var(--oro-oscuro)}

/* programas fijos */
.programas{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea)}
.programa{background:var(--marfil);padding:32px 26px;display:flex;flex-direction:column;gap:12px;transition:.2s}
.programa:hover{background:var(--blanco)}
.programa .cuantos{font-family:var(--display);font-weight:300;font-stretch:125%;font-size:34px;color:var(--oro-oscuro);line-height:1}
.programa h4{font-size:16.5px;line-height:1.35}
.programa .medio{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3)}
.programa p{margin:0;font-size:13.5px;color:var(--tinta-2)}

/* manifiesto */
.manifiesto{background:var(--blanco);border-bottom:1px solid var(--linea)}
.manifiesto-int{max-width:980px;margin:0 auto;padding:86px 0;position:relative;display:grid;grid-template-columns:132px 1fr;gap:54px;align-items:start}
.manifiesto-emblema{padding-top:6px}
.manifiesto-emblema img{width:100%;height:auto;opacity:.9}
.manifiesto-emblema figcaption{margin-top:18px;font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-3);line-height:1.7}
/* El retrato de la firma es CUADRADO a propósito, y por eso aquí no hay ningún
   truco de encuadre.

   El original es vertical, 724 por 1086. Dentro de un círculo, «cover» recorta
   por los lados de arriba y abajo: centrado se comía la frente, y anclado
   arriba entraba la cabeza pero se quedaban fuera el cuello y los hombros. No
   era cuestión de mover el recorte: para ver más alto del que la foto tiene de
   ancho hace falta más anchura, y no la había.

   La solución está en la imagen, no en la hoja de estilos:
   assets/img/retrato-firma.jpg es una versión cuadrada de 900x900 con la foto
   entera, con aire alrededor y los lados continuados a partir del propio fondo.
   Al ser cuadrada, «cover» no recorta nada. Si algún día se cambia el retrato,
   hay que volver a dejarlo cuadrado o reaparece el problema.

   El «?v=» no es un adorno. nginx sirve las imágenes con treinta días de
   caché, y el nombre del fichero no cambia al sustituirla: sin esa marca, se
   puede subir la foto nueva y seguir viendo la vieja durante un mes, tanto tú
   como cualquier visitante. Al cambiar la foto, se sube el número. */
.manifiesto .foto{width:80px;height:80px;border-radius:50%;flex:none;border:1px solid var(--linea);background:var(--gris) url("../img/retrato-firma.jpg?v=3") center/cover no-repeat}
.manifiesto p{font-family:var(--display);font-weight:300;font-stretch:112%;font-size:clamp(19px,2.1vw,25px);line-height:1.55;color:var(--azul);margin:0 0 26px;padding-left:34px;border-left:2px solid var(--oro)}
.manifiesto p.menor{font-family:var(--sans);font-size:16px;line-height:1.8;color:var(--tinta-2);border-left-color:var(--linea)}
.manifiesto .firma{display:flex;align-items:center;gap:16px;margin-top:38px;padding-left:34px}
.manifiesto .firma span{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-oscuro)}
.manifiesto .firma::before{content:"";width:40px;height:1px;background:var(--oro)}

/* tesis recurrentes */
.tesis{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea)}
.tesis article{background:var(--marfil);padding:40px 36px;display:flex;flex-direction:column;gap:16px;transition:.22s}
.tesis article:hover{background:var(--blanco)}
.tesis .num{font-family:var(--display);font-weight:300;font-stretch:125%;font-size:15px;letter-spacing:.24em;color:var(--oro)}
.tesis h3{font-family:var(--display);font-weight:300;font-stretch:112%;font-size:clamp(19px,1.9vw,23px);line-height:1.35;color:var(--azul);letter-spacing:.005em}
.tesis p{margin:0;font-size:14.5px;color:var(--tinta-2)}
.tesis .apoyos{margin-top:auto;padding-top:18px;border-top:1px solid var(--linea);font-size:12.5px;color:var(--tinta-3)}
.tesis .apoyos a{color:var(--oro-oscuro);font-weight:600}
.tesis .apoyos a:hover{color:var(--azul)}

/* puerta de entrada */
.puerta{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.puerta article{position:relative;padding:34px 30px;background:var(--azul);color:var(--marfil);display:flex;flex-direction:column;gap:14px;transition:.22s}
.puerta article:hover{background:var(--azul-2)}
.puerta .orden{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--oro)}
.puerta h4{font-size:17px;line-height:1.4;color:var(--marfil)}
.puerta p{margin:0;font-size:14px;color:rgba(247,245,242,.68)}
.puerta .ir{margin-top:auto;padding-top:16px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--oro)}

/* archivo de columnas */
.buscador{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.buscador input{flex:1;min-width:240px;padding:16px 18px;border:1px solid var(--linea);background:var(--blanco);font-family:var(--sans);font-size:14.5px;color:var(--azul)}
.buscador input:focus{outline:none;border-color:var(--oro)}
.contador{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-3);margin:0 0 34px}
/* el año no es un titular: es una marca de separación, como el antetítulo */
.anio-titulo{display:flex;align-items:center;gap:16px;font-family:var(--sans);font-weight:600;font-stretch:100%;font-size:11px;letter-spacing:.22em;color:var(--oro-oscuro);font-variant-numeric:tabular-nums;margin:52px 0 6px;padding:0;border:0}
.anio-titulo::after{content:"";height:1px;flex:1;background:var(--linea)}
.contador + .anio-grupo .anio-titulo{margin-top:10px}
.entrada{display:grid;grid-template-columns:1fr 64px;gap:24px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--linea-suave);transition:.18s}
.entrada-ir{display:grid;grid-template-columns:118px 1fr 56px;gap:24px;align-items:baseline;color:inherit;text-decoration:none}
.entrada .baja{text-align:right}
.entrada .baja a{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--oro-oscuro);text-decoration:none;border:1px solid var(--linea);padding:5px 9px;transition:.18s}
.entrada .baja a:hover{background:var(--oro-oscuro);color:#fff;border-color:var(--oro-oscuro)}
.entrada .baja .sin-pdf{color:var(--linea)}
.entrada:hover{background:linear-gradient(90deg,var(--marino-tenue),transparent);padding-left:12px;margin-left:-12px}
.entrada .f{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.entrada .f em{display:block;margin-top:7px;font-style:normal;font-size:9.5px;letter-spacing:.16em;color:var(--oro-oscuro)}
.entrada h3{font-size:17.5px;line-height:1.4}
.entrada:hover h3{color:var(--oro-oscuro)}
.entrada p{font-size:14px;color:var(--tinta-2);margin:9px 0 0;max-width:56em}
.entrada .n{font-family:var(--display);font-weight:300;font-stretch:125%;font-size:15px;color:var(--linea);text-align:right}

/* artículo */
.articulo{padding:62px 0 90px}
.articulo-int{max-width:var(--ancho-texto);margin:0 auto}
.articulo h1{font-size:clamp(27px,3.2vw,38px);line-height:1.24}
.articulo .meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3);margin:30px 0 0;padding-bottom:30px;border-bottom:1px solid var(--linea)}
.articulo-cuerpo{font-family:var(--sans);font-size:17px;line-height:1.85;color:#2A3A4D;font-weight:400}
.articulo-cuerpo p{margin:28px 0}
.articulo-cuerpo .entradilla-articulo{font-size:19px;line-height:1.65;color:var(--azul);font-weight:500;
  padding-left:26px;border-left:2px solid var(--oro);margin:0 0 36px}
.articulo-cuerpo .lista-articulo{margin:26px 0;padding-left:22px}
.articulo-cuerpo .lista-articulo li{margin-bottom:12px;padding-left:6px}
.articulo-cuerpo .lista-articulo li::marker{color:var(--oro)}
.articulo-cuerpo .destacado-entrada{font-size:18.5px;line-height:1.6;color:var(--azul);padding-left:26px;border-left:2px solid var(--oro);margin:0 0 34px}
.articulo-cuerpo p.primero::first-letter{float:left;font-family:var(--display);font-weight:300;font-size:58px;line-height:.9;padding:8px 14px 0 0;color:var(--oro)}
.articulo-cuerpo h2{font-family:var(--sans);font-weight:600;font-stretch:100%;font-size:20px;margin:48px 0 0;letter-spacing:.01em;color:var(--azul)}
/* Los destacados de la columna.
   Recuadro de línea de puntos, papel blanco sobre el marfil de la página, y
   dentro una barra de oro separada del borde. Antes era solo una raya a la
   izquierda con la tipografía de titulares a 19 puntos: se confundía con la
   entradilla, que lleva exactamente esa misma raya de oro.
   El texto va con la letra del cuerpo, no con la de titulares: en la columna
   el destacado repite una frase del artículo, y cambiarle la letra la hacía
   parecer una cita de otro. */
.articulo-cuerpo blockquote{
  position:relative;margin:38px 0;padding:24px 30px 24px 38px;
  border:1px dotted var(--linea);background:var(--blanco);
  font-family:inherit;font-weight:400;font-size:17px;line-height:1.7;color:#2A3A4D}
.articulo-cuerpo blockquote::before{
  content:"";position:absolute;left:14px;top:16px;bottom:16px;width:3px;background:var(--oro)}
.articulo-cuerpo blockquote p{margin:0}
.articulo-cuerpo blockquote p + p{margin-top:14px}
.aviso-migracion{margin:36px 0;padding:20px 22px;border:1px solid var(--linea);border-left:2px solid var(--oro);background:var(--gris);font-family:var(--sans);font-size:13px;color:var(--tinta-2)}
.compartir{display:flex;gap:16px;align-items:center;margin-top:48px;padding-top:28px;border-top:1px solid var(--linea);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-3)}
.compartir a{color:var(--oro-oscuro)}
.compartir a:hover{color:var(--azul)}
.navega-articulo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px}
.navega-articulo a{border:1px solid var(--linea);padding:26px 26px;background:var(--blanco);transition:.2s}
.navega-articulo a:hover{border-color:var(--oro)}
.navega-articulo span{display:block;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-oscuro);margin-bottom:12px}
.navega-articulo strong{font-family:var(--sans);font-size:15.5px;font-weight:600;line-height:1.4}
.navega-articulo .der{text-align:right}

/* --------------------------------------------------------------- medios */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filtro{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:11px 20px;border:1px solid var(--linea);color:var(--tinta-2);cursor:pointer;background:none;transition:.18s}
.filtro:hover{border-color:var(--oro);color:var(--oro-oscuro)}
.filtro.activo{background:var(--azul);border-color:var(--azul);color:var(--marfil)}
.tabla-medios{width:100%;border-collapse:collapse;font-size:15px}
.tabla-medios th{text-align:left;font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-3);padding:0 14px 14px 0;border-bottom:1px solid var(--azul)}
.tabla-medios td{padding:18px 14px 18px 0;border-bottom:1px solid var(--linea-suave);vertical-align:top}
.tabla-medios tr:hover td{background:var(--marino-tenue)}
.tabla-medios .f{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:20px}
.tabla-medios .t{font-family:var(--sans);font-size:15.5px;font-weight:600;line-height:1.4;color:var(--azul)}
.tabla-medios tr:hover .t{color:var(--oro-oscuro)}
.tabla-medios .t small{display:block;font-size:13px;color:var(--tinta-2);margin-top:5px;font-weight:400;line-height:1.5}
.nota-medios{max-width:46em;margin:-8px 0 26px;font-size:14px;line-height:1.6;color:var(--tinta-2)}
.nota-medios a{font-weight:600;color:var(--oro-oscuro);border-bottom:1px solid var(--linea-suave)}
.nota-medios a:hover{border-bottom-color:var(--oro)}
.tabla-medios .accion{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--oro-oscuro);white-space:nowrap;text-align:right;padding-top:20px}
.chip{display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:6px 11px;border:1px solid var(--linea);color:var(--tinta-2);white-space:nowrap}
.chip.tv{border-color:rgba(184,155,91,.55);color:var(--oro-oscuro);background:var(--marino-tenue)}
.chip.radio{border-color:rgba(15,31,51,.3);color:var(--azul);background:rgba(15,31,51,.05)}
.chip.prensa{border-color:var(--linea);color:var(--tinta-2);background:var(--gris)}
.sin-resultados{padding:48px 0;text-align:center;color:var(--tinta-3);font-size:14.5px}
.aviso-auto{display:flex;gap:16px;align-items:flex-start;margin-top:28px;padding:22px 24px;background:var(--azul);color:rgba(247,245,242,.8);font-size:14px;border-left:2px solid var(--oro)}
.aviso-auto strong{color:var(--oro)}
.aviso-auto .punto{width:8px;height:8px;border-radius:50%;background:var(--oro);margin-top:9px;flex:none;box-shadow:0 0 0 4px rgba(184,155,91,.2)}

/* --------------------------------------------------------------- análisis */
.rejilla-tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tarjeta{border:1px solid var(--linea);padding:32px 28px;background:var(--blanco);display:flex;flex-direction:column;gap:15px;transition:.22s;position:relative}
.tarjeta::before{content:"";position:absolute;top:-1px;left:-1px;width:0;height:2px;background:var(--oro);transition:.28s}
.tarjeta:hover{border-color:var(--azul);box-shadow:0 14px 34px rgba(15,31,51,.07)}
.tarjeta:hover::before{width:calc(100% + 2px)}
.tarjeta .tipo{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-oscuro)}
.tarjeta h4{font-size:17.5px;line-height:1.4}
.tarjeta:hover h4{color:var(--azul)}
.tarjeta p{font-size:14px;color:var(--tinta-2);margin:0}
.tarjeta .pie-tarjeta{margin-top:auto;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--oro-oscuro)}

/* --------------------------------------------------------------- contacto */
.contacto{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.campo{margin-bottom:22px}
.campo label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--azul);margin-bottom:10px}
.campo input,.campo select,.campo textarea{width:100%;padding:15px 17px;border:1px solid var(--linea);background:var(--blanco);font-family:var(--sans);font-size:15px;color:var(--azul)}
.campo textarea{min-height:150px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--oro)}
.acepta{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--tinta-2);margin-bottom:26px}
.acepta input{margin-top:5px;accent-color:var(--oro)}
.datos-contacto{background:var(--blanco);border:1px solid var(--linea);border-top:2px solid var(--oro);padding:34px 32px}
.datos-contacto h3{font-family:var(--display);font-weight:300;font-stretch:118%;font-size:20px;margin-bottom:22px;letter-spacing:.02em}
.datos-contacto dl{margin:0}
.datos-contacto dt{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--oro-oscuro);margin-top:24px}
.datos-contacto dt:first-of-type{margin-top:0}
.datos-contacto dd{margin:8px 0 0;font-size:14.5px;color:var(--tinta-2)}
.datos-contacto .formulario input{border-color:var(--linea);background:var(--blanco);color:var(--azul)}
.datos-contacto .formulario button{background:var(--azul);color:var(--marfil)}
.datos-contacto .formulario button:hover{background:var(--azul-3)}

/* --------------------------------------------------------------- suscripción */
.suscripcion{position:relative;background:var(--azul);color:var(--marfil);padding:84px 0;overflow:hidden}
.suscripcion::after{content:"";position:absolute;top:-70%;left:-4%;width:520px;height:520px;border-radius:50%;border:1px solid rgba(184,155,91,.26);pointer-events:none}
.sus-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.sus-int{position:relative;max-width:720px;margin:0 auto;text-align:center}
.suscripcion h2{color:var(--marfil);font-size:28px}
.suscripcion p{color:rgba(247,245,242,.7);margin:20px 0 0;font-size:15.5px;font-weight:300}
.formulario{display:flex;gap:10px;flex-wrap:wrap}
.formulario input{flex:1;min-width:220px;padding:16px 18px;border:1px solid rgba(247,245,242,.28);background:rgba(247,245,242,.06);color:var(--marfil);font-family:var(--sans);font-size:14.5px}
.formulario input::placeholder{color:rgba(247,245,242,.45)}
.formulario input:focus{outline:none;border-color:var(--oro)}
.formulario button{padding:16px 30px;background:var(--oro);color:var(--azul);border:0;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:.2s}
.formulario button:hover{background:var(--oro-claro)}
.letra-pequena{font-size:11px;letter-spacing:.06em;color:rgba(247,245,242,.5);margin-top:16px}

/* --------------------------------------------------------------- pie */
footer{background:var(--azul);color:rgba(247,245,242,.62);padding:72px 0 34px;font-size:14px;border-top:1px solid rgba(184,155,91,.3)}
.pie-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:44px;padding-bottom:48px;border-bottom:1px solid rgba(247,245,242,.12)}
footer h5{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--oro);margin:0 0 20px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:11px}
footer a:hover{color:var(--oro-claro)}
.pie-marca{font-family:var(--display);font-weight:400;font-stretch:112%;font-size:16px;letter-spacing:.18em;text-transform:uppercase;color:var(--marfil)}
.pie-legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-top:28px;font-size:11px;letter-spacing:.08em;color:rgba(247,245,242,.42)}

/* --------------------------------------------------------------- responsivo */
@media(max-width:1000px){
  .portada-grid,.sobre,.destacada,.sus-grid,.contacto{grid-template-columns:1fr;gap:44px}
  .portada-txt{padding:64px 0 0}
  .portada-retrato{min-height:380px;margin:0 0 64px}
  .portada::before{width:420px;height:420px;top:-8%;right:-16%}
  .ficha-lateral{position:static}
  .lista-columnas,.rejilla-tarjetas,.tesis,.puerta,.dosier{grid-template-columns:1fr}
  .programas,.metodo,.sigmas{grid-template-columns:1fr 1fr}
  .informe-ultimo{grid-template-columns:1fr}
  /* En el móvil, «Ver» y «Descargar» caían debajo del número, que es donde
     nadie los busca. Se pasa a dos columnas: la fecha y el titular ocupan el
     ancho entero, y en la línea de abajo el índice queda a la izquierda y los
     dos enlaces a la derecha, alineados con el final del titular. */
  .informe{grid-template-columns:1fr auto;gap:10px 18px;align-items:end}
  .informe .cuando{grid-column:1/-1}
  .informe > span:nth-child(2){grid-column:1/-1}
  .informe .riesgo{grid-column:1;text-align:left;line-height:1.3}
  .informe .riesgo em{display:block;font-style:normal;font-size:9.5px;font-weight:600;
    letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-3)}
  .informe .riesgo b{font-size:22px}
  .informe .riesgo i{font-style:normal;font-size:11px;color:var(--tinta-3);margin-left:4px}
  .informe .bajar{grid-column:2;text-align:right;white-space:nowrap}
  .informe .bajar a{display:inline-block;margin-left:16px;padding:6px 0}
  .informe .bajar a+a{margin-top:0}
  .cabecera-mundo{background-position:right -110px bottom;background-size:auto 72%}
  .vias{grid-template-columns:1fr}
  .cronologia li{grid-template-columns:1fr;gap:6px;padding-left:26px}
  .cronologia::before{left:5px}
  .cronologia li::before{left:0}
  .cronologia .cuando{text-align:left}
  .cabecera-sobre,.cabecera-analisis,.cabecera-contacto{background-position:right -110px bottom;background-size:auto 72%}
  .cabecera-medios{background-position:right -110px bottom;background-size:auto 74%}
  .manifiesto-int{padding:60px 0;grid-template-columns:1fr;gap:36px}
  .manifiesto-emblema{max-width:104px}
  .cabecera-columna{background-position:right -120px bottom;background-size:auto 78%}
  /* Las ilustraciones de cabecera son decorativas y en una pantalla estrecha
     acaban justo detras del titular, que va en blanco sobre azul: el texto se
     lee sobre las lineas del dibujo y parece un error de maquetacion. Aqui se
     bajan de tamano y se apartan a la esquina. */
  .cabecera-pagina{background-size:auto 46% !important;background-position:right -40px bottom !important}
  .franja-datos{gap:28px}
  .cifras-grid{grid-template-columns:1fr 1fr}
  .cifra{border-bottom:1px solid var(--linea);padding-left:0;padding-right:20px}
  .cifra:nth-child(2n){border-right:0}
  .pie-grid{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .boton-menu{display:block}
  /* El selector de idioma se queda en la barra, pegado al boton de menu. Sin
     esto se iba al centro, porque la barra reparte el espacio entre sus tres
     hijos y el del medio se quedaba solo. */
  .idiomas{margin-left:auto;border-left:0;padding-left:0;gap:12px}
  .entrada{grid-template-columns:1fr;gap:8px}
  .entrada-ir{grid-template-columns:1fr;gap:8px}
  .entrada:hover{padding-left:0;margin-left:0}
  .entrada .n{display:none}
  .navega-articulo{grid-template-columns:1fr}
  .navega-articulo .der{text-align:left}
  .tabla-medios thead{display:none}
  .tabla-medios tr{display:block;padding:20px 0;border-bottom:1px solid var(--linea-suave)}
  .tabla-medios td{display:block;border-bottom:0;padding:4px 0}
  .tabla-medios .f,.tabla-medios .accion{padding-top:0}
  .tabla-medios .accion{text-align:left;margin-top:10px}
}
@media(max-width:600px){
  /* La barra, en dos filas a la derecha.
     El nombre a la izquierda ocupando el alto entero; a la derecha, el boton
     de menu arriba y los idiomas justo debajo. Puestos los tres en una sola
     linea no cabian, y el nombre acababa partido en tres. Sacando los idiomas
     de esa fila, el nombre recupera unos 60 pixeles y entra holgado.
     Se usa una rejilla con areas para que el orden en pantalla no dependa del
     orden del HTML: ahi los idiomas van antes que el boton. */
  .contenedor{padding:0 18px}
  .barra-int{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"marca boton" "marca idiomas";
    align-items:center;
    height:auto;
    padding:12px 0;
    gap:3px 12px;
  }
  .marca{grid-area:marca;font-size:12.5px;letter-spacing:.09em}
  /* El lema es hijo del nombre, no una casilla de la rejilla: darle un area
     no hacia nada. Se deja explicito que se ve, porque es justo lo que se
     perdio al reordenar la barra. */
  .marca span{display:block;font-size:8px;letter-spacing:.13em;margin-top:4px}
  .boton-menu{grid-area:boton;justify-self:end;padding:8px 12px;font-size:10px;letter-spacing:.1em}
  .idiomas{grid-area:idiomas;justify-self:end;margin-left:0;border-left:0;padding-left:0;gap:10px;font-size:10px}

  /* En un movil de verdad el dibujo no cabe sin estorbar: se quita. El titular
     y los datos son lo que hay que leer, y el fondo azul ya da la identidad. */
  .cabecera-pagina{background-image:none !important}
  .cabecera-pagina::after{display:none}
  section.bloque{padding:60px 0}
  .cifras-grid{grid-template-columns:1fr}
  .cifra:nth-child(n){border-right:0}
  .programas,.metodo,.sigmas{grid-template-columns:1fr}
  .pie-grid{grid-template-columns:1fr}
  .articulo-cuerpo{font-size:16.5px}
  /* En el móvil el recuadro del destacado se aprieta: con el relleno de
     escritorio, un destacado de tres líneas se comía la pantalla entera. */
  .articulo-cuerpo blockquote{margin:30px 0;padding:18px 20px 18px 28px;font-size:16px}
  .articulo-cuerpo blockquote::before{left:10px;top:12px;bottom:12px;width:2px}
  /* Las comillas van sueltas, colocadas por encima del texto. En el movil se
     habia bajado el relleno de arriba a 56px, pero el simbolo empieza en 32 y
     mide 64: acababa cayendo sobre la primera linea. Se encoge el simbolo y se
     deja sitio suficiente por encima. */
  .cita{padding:72px 0 56px}
  .cita::before{top:24px;font-size:40px}
}


/* escuchar la columna: va antes del texto, para quien prefiere oírla */
.escuchar{margin:34px 0 8px;padding:22px 26px;background:var(--marfil-2,#EFEBE2);
  border-left:2px solid var(--oro)}
.escuchar-txt{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.escuchar-txt .etq{color:var(--oro-oscuro)}
.escuchar-dura{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-3)}
.escuchar audio{width:100%;height:38px;display:block}
.escuchar .letra-pequena{margin:12px 0 0;color:var(--tinta-3)}
@media (max-width:640px){.escuchar{padding:18px 18px;margin-left:-18px;margin-right:-18px}}


/* el archivo de audio: una lista para darle al play, no para leer */
.audios{margin-top:8px}
.audio-item{padding:26px 0;border-bottom:1px solid var(--linea-suave)}
.audio-datos{display:grid;grid-template-columns:118px 1fr 56px;gap:24px;align-items:baseline}
.audio-datos .f{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3);font-variant-numeric:tabular-nums}
.audio-datos .f em{display:block;margin-top:7px;font-style:normal;font-size:9.5px;
  letter-spacing:.16em;color:var(--oro-oscuro)}
.audio-datos h3{font-size:17.5px;line-height:1.4}
.audio-datos p{font-size:14px;color:var(--tinta-2);margin:9px 0 0;max-width:56em}
.audio-datos .n{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--oro-oscuro);text-align:right;white-space:nowrap}
.audio-item audio{width:100%;height:36px;margin-top:16px;display:block}
.audio-pie{margin-top:10px;text-align:right}
.audio-pie a{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-3)}
.audio-pie a:hover{color:var(--oro-oscuro)}
.meta-audio{color:var(--oro-oscuro);border-bottom:1px solid rgba(184,155,91,.4)}
@media (max-width:760px){
  .audio-datos{grid-template-columns:1fr;gap:8px}
  .audio-datos .n{text-align:left}
  .audio-datos .f em{display:inline;margin-left:10px}
}


/* la lista de lectura: como el archivo, pero con el PDF a mano */
.lecturas{margin-top:8px}
.lectura{display:grid;grid-template-columns:118px 1fr 64px;gap:24px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--linea-suave);transition:.18s}
.lectura:hover{background:linear-gradient(90deg,var(--marino-tenue),transparent);
  padding-left:12px;margin-left:-12px}
.lectura .f{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3);font-variant-numeric:tabular-nums}
.lectura .f em{display:block;margin-top:7px;font-style:normal;font-size:9.5px;
  letter-spacing:.16em;color:var(--oro-oscuro)}
.lectura h3{font-size:17.5px;line-height:1.4}
.lectura:hover h3{color:var(--oro-oscuro)}
.lectura p{font-size:14px;color:var(--tinta-2);margin:9px 0 0;max-width:56em}
.lectura .baja{text-align:right}
.lectura .baja a{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.16em;
  padding:6px 11px;border:1px solid var(--linea);color:var(--oro-oscuro)}
.lectura .baja a:hover{border-color:var(--oro);background:var(--oro);color:var(--azul)}
.lectura .sin-pdf{color:var(--linea)}
@media (max-width:760px){
  .lectura{grid-template-columns:1fr auto;gap:6px 16px}
  .lectura .f{grid-column:1/2}
  .lectura .baja{grid-row:1;grid-column:2}
  .lectura div{grid-column:1/3}
}

/* Moviles estrechos -iPhone mini, SE-. Un punto mas de apriete para que el
   nombre siga cabiendo en una linea. Se comprobo que a 375px de ancho el
   nombre mide unos 157px y le quedan 183 libres: entra, pero justo. */
@media(max-width:390px){
  .contenedor{padding:0 14px}
  .barra-int{gap:3px 10px}
  .marca{font-size:11.5px;letter-spacing:.07em}
  .marca span{font-size:7.5px;letter-spacing:.1em}
  .boton-menu{padding:7px 10px;font-size:9.5px}
}