/* ============================================================
   LAGOS — Estilos base
   ⚠️ Territorio de marca. Solo lo modifica Moni.
   Colores y tipografías vienen de tokens.css. Nunca escribir un
   hexadecimal acá: usar var(--nombre).

   Criterio: sitio blanco y con aire. El azul aparece en bloques
   completos (portada, áreas, contacto), no como fondo general.
   El logotipo es palo seco; los titulares, serif.
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--font-texto);
  font-size: var(--t-base);
  line-height: var(--interlineado-texto);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--interlineado-titulo);
  margin: 0;
}

p { margin: 0 0 var(--e2); }
a { color: inherit; }
img { max-width: 100%; display: block; height: auto; }

.contenedor {
  width: min(100% - 2.5rem, var(--ancho-max));
  margin-inline: auto;
}

.saltar { position: absolute; left: -9999px; background: var(--azul);
  color: var(--texto-invertido); padding: var(--e2); z-index: 100; }
.saltar:focus { left: var(--e2); top: var(--e2); }

:focus-visible { outline: 2px solid var(--celeste); outline-offset: 3px; }

/* --------------------------- Tipografías -------------------------- */

/* Etiqueta de sección: chica, espaciada, discreta. */
.etiqueta {
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: var(--e3);
}
.etiqueta--clara { color: var(--celeste); }

.seccion__titulo {
  font-size: var(--t-titulo);
  max-width: 24ch;
  margin-bottom: var(--e5);
}
.seccion__titulo--ancho { max-width: 42ch; }

/* Frase declarativa, en serif, para Nosotros. */
.declaracion {
  font-family: var(--font-display);
  font-size: var(--t-titulo);
  line-height: var(--interlineado-titulo);
  max-width: 26ch;
  margin-bottom: var(--e4);
}

.texto-largo { max-width: var(--ancho-texto); }

/* Nosotros: texto a la izquierda, video (o su fotograma) a la derecha.
   En pantallas chicas, el video baja debajo del texto. */
.nosotros__cuerpo { display: grid; gap: var(--e4); align-items: start; }
@media (min-width: 900px) {
  /* La columna de texto se lleva algo más de la mitad y el video queda
     más angosto: así el texto necesita menos líneas y no cuelga tanto
     por debajo del video. */
  .nosotros__cuerpo { grid-template-columns: minmax(0, 0.75fr) 1fr; gap: var(--e5); }
  /* En esta sección el texto llena su columna: el ancho lo manda la
     grilla, no el tope general de lectura. */
  .nosotros__cuerpo .texto-largo { max-width: none; }
}
.nosotros__media { margin: 0; }
.nosotros__media img,
.nosotros__media video {
  width: 100%;
  display: block;
  /* Recorte más cuadrado que el 16:9 original del archivo. */
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
}
@media (min-width: 900px) {
  /* El media acompaña el scroll del texto largo sin despegarse arriba */
  .nosotros__media { position: sticky; top: calc(90px + var(--e3)); }
}

/* ---------------------------- Cabecera ---------------------------- */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-block: var(--e3);
  background: transparent;
  transition: background var(--transicion), padding var(--transicion),
              border-color var(--transicion);
  border-bottom: 1px solid transparent;
}
/* Sobre el hero: fondo transparente y logo blanco.
   Al bajar: fondo blanco y logo azul. */
.cabecera[data-sobre-hero="no"] {
  background: var(--fondo);
  border-bottom-color: var(--linea);
  padding-block: var(--e2);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
}

.logo { display: block; line-height: 0; }
.logo__img { width: 132px; }
.logo__img--azul { display: none; }
.cabecera[data-sobre-hero="no"] .logo__img--blanco { display: none; }
.cabecera[data-sobre-hero="no"] .logo__img--azul   { display: block; }

.nav { display: flex; gap: var(--e3); align-items: center; }
.nav a {
  font-family: var(--font-ui);
  color: var(--texto-invertido);
  text-decoration: none;
  font-size: var(--t-chico);
  letter-spacing: 0.03em;
  padding-block: var(--e1);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion), color var(--transicion);
}
.cabecera[data-sobre-hero="no"] .nav a { color: var(--texto); }
.nav a:hover,
.nav a[aria-current="true"] { border-bottom-color: var(--celeste); }

/* Cambio de idioma: último enlace de la nav, separado por un filete. */
.nav__idioma {
  margin-left: var(--e2);
  padding-left: var(--e3);
  border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}

.menu-btn {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; padding: var(--e1); cursor: pointer;
}
.menu-btn span {
  width: 26px; height: 1.5px; background: var(--texto-invertido);
  transition: transform var(--transicion), opacity var(--transicion),
              background var(--transicion);
}
.cabecera[data-sobre-hero="no"] .menu-btn span { background: var(--texto); }

/* ------------------------------ Hero ------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--fondo-oscuro);
  color: var(--texto-invertido);
  padding-block: var(--e6) var(--e5);
  overflow: hidden;
}

/* La foto va como <img> y no como fondo de CSS, a propósito: así se
   cambia editando el HTML y no este archivo, que es territorio de marca.
   El velo azul unifica cualquier foto y deja el texto legible.
   El velo va en ::after —no en ::before— porque los elementos
   posicionados pintan en orden de aparición: ::after es el último hijo
   y por eso queda sobre la imagen. */
.hero__fondo {
  position: absolute;
  inset: 0;
  background: var(--fondo-oscuro);
}
.hero__fondo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Las fotos de puerto o ciudad traen colores fuertes que pelean con
     la paleta. Bajarles la saturación las acerca al azul de la marca
     antes de que entre el velo. */
  filter: saturate(0.45) contrast(1.05);
}
/* Dos capas: un velo parejo que unifica, y un degradado que carga el
   lado del texto y deja respirar el otro. Así la foto no desaparece
   pero el titular nunca compite con ella. */
.hero__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Respaldo parejo para navegadores sin color-mix. Si no lo soportan,
     descartan la regla de abajo entera y se quedan con esta. */
  background: rgba(12, 23, 38, 0.74);
  background:
    linear-gradient(100deg,
      var(--azul) 0%,
      color-mix(in srgb, var(--azul) 55%, transparent) 55%,
      transparent 92%),
    color-mix(in srgb, var(--azul) 62%, transparent);
}

.hero__interior { position: relative; }

/* La L del logo como marca de agua: dos, enmarcando el titular como en
   el bosquejo del brief. La de arriba va girada 180° (esquina superior
   derecha), la de abajo derecha (esquina inferior izquierda). */
.hero__ele {
  position: absolute;
  width: auto;
  height: clamp(64px, 12vh, 120px);
  opacity: 0.85;
  pointer-events: none;
}
.hero__ele--alta {
  top: 18%;
  right: 8%;
  transform: rotate(180deg);
}
.hero__ele--baja {
  bottom: 14%;
  left: 4%;
}
@media (max-width: 700px) {
  .hero__ele--alta { right: 5%; top: 14%; }
  .hero__ele--baja { display: none; }  /* en móvil, una sola basta */
}

.hero__frases { list-style: none; margin: 0 0 var(--e5); padding: 0; display: grid; }
/* El fundido entre frases: la que sale mantiene su visibility durante
   los 600ms del fundido y recién ahí se oculta. Sin ese retardo, la
   saliente desaparece de golpe y la portada queda sin texto medio
   segundo. */
.hero__frase {
  grid-area: 1 / 1;
  font-family: var(--font-display);
  font-size: var(--t-hero);
  line-height: 1.2;
  /* Holgado, para que el salto de línea escrito en el texto mande y
     cada oración quede en su propia línea. En móvil baja sola igual. */
  max-width: 34ch;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease, visibility 0s linear 600ms;
}
.hero__frase[data-activa="si"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 600ms ease, visibility 0s;
}
/* Los énfasis van en Baskerville negrita itálica, como en el mockup. */
.hero__frase em { font-style: italic; font-weight: 700; }

.hero__puntos { display: flex; gap: var(--e2); }
.hero__punto {
  width: 11px; height: 11px; padding: 0;
  border: 1px solid var(--blanco);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background var(--transicion);
}
.hero__punto[aria-selected="true"] { background: var(--blanco); }

/* ---------------------------- Secciones --------------------------- */
.seccion { padding-block: var(--e6); }
.seccion--alt    { background: var(--fondo-alt); }
.seccion--oscura { background: var(--fondo-oscuro); color: var(--texto-invertido); }

/* ------------------- Áreas: cuatro, leídas como una ---------------- */
/* El borde compartido las integra: se ven como un bloque, no como
   cuatro tarjetas sueltas. */
.areas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--azul-medio);
  border: 1px solid var(--azul-medio);
}
@media (min-width: 900px) {
  .areas { grid-template-columns: repeat(4, 1fr); }
}

.area {
  background: var(--fondo-oscuro);
  padding: var(--e4) var(--e3);
  transition: background var(--transicion);
}
.area:hover { background: var(--azul-medio); }

/* El nombre del área encabeza el cuadrado (antes iba un número grande;
   el cliente pidió reemplazarlo por el nombre, 22 sep). Se le reserva
   alto para dos líneas, así el filete queda a la misma altura en los
   cuatro cuadrados aunque un nombre se parta. */
.area__titulo {
  font-weight: var(--peso-titulo-area);
  font-size: var(--t-titulo-area);
  line-height: 1.15;
  min-height: 2.3em;
  color: var(--blanco);
  margin-bottom: var(--e3);
}
.area__texto {
  color: var(--celeste-sup);
  margin: 0;
  font-size: var(--t-chico);
  padding-top: var(--e2);
  border-top: 1px solid var(--celeste);
}

/* Detalle de servicios, plegado. Los cuatro cuadrados se ven de una;
   la lista larga solo aparece si el visitante la pide. */
.area__detalle { margin-top: var(--e3); }
.area__detalle summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--celeste);
  padding-bottom: var(--e1);
  border-bottom: 1px solid var(--azul-medio);
  width: max-content;
  transition: color var(--transicion), border-color var(--transicion);
}
.area__detalle summary::-webkit-details-marker { display: none; }
.area__detalle summary::after {
  content: " +";
  font-family: var(--font-numero);
}
.area__detalle[open] summary::after { content: " −"; }
.area__detalle summary:hover {
  color: var(--texto-invertido);
  border-bottom-color: var(--celeste);
}
.area__detalle ul {
  list-style: none;
  margin: var(--e3) 0 0;
  padding: 0;
  font-size: var(--t-chico);
  color: var(--celeste-sup);
}
.area__detalle li {
  position: relative;
  padding: var(--e1) 0 var(--e1) var(--e3);
  margin-bottom: var(--e1);
}
/* Bullet circular chico en celeste, al borde izquierdo del bloque —
   alineado con el texto del área — y con aire hasta el texto del
   servicio, que mantiene su sangría. */
.area__detalle li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--e1) + 0.62em);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--celeste);
}

/* ----------------------------- Equipo ----------------------------- */
/* Con seis personas, el mínimo de 300px da tres columnas en pantallas
   anchas: dos filas parejas de tres, sin nadie huérfano, y con retratos
   de buen tamaño. Baja a dos y a una en pantallas chicas. */
.equipo {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--e4) var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* Toda la foto es el botón que abre la ficha. El nombre va superpuesto
   abajo, y al pasar el mouse aparece el velo azul al 70% con un "+"
   arriba a la derecha, como la referencia del brief. */
.persona__tarjeta {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}

/* Las fotos vienen en vertical 2:3 y el recuadro es 4:5, así que el
   recorte se come algo de arriba y abajo. El encuadre al 25% deja la
   cara en el tercio superior en vez de al centro. */
.persona__foto {
  aspect-ratio: 4 / 5;
  background: var(--celeste);
  overflow: hidden;
}
.persona__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

/* Velo azul al 70%, solo al pasar el mouse o al navegar con teclado. */
.persona__tarjeta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--azul);
  opacity: 0;
  transition: opacity var(--transicion);
}
.persona__tarjeta:hover::after,
.persona__tarjeta:focus-visible::after { opacity: 0.7; }

/* El "+" en círculo, arriba a la derecha, aparece con el velo. */
.persona__tarjeta::before {
  content: "+";
  position: absolute;
  top: var(--e2);
  right: var(--e2);
  z-index: 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--blanco);
  border-radius: 50%;
  color: var(--blanco);
  font-family: var(--font-numero);
  font-size: 1.4rem;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--transicion);
}
.persona__tarjeta:hover::before,
.persona__tarjeta:focus-visible::before { opacity: 1; }

/* Tarjeta sin ficha (personal administrativo): no es botón, no reacciona
   al mouse y no muestra el "+". Solo foto, nombre y cargo. */
.persona__tarjeta--sin-ficha { cursor: default; }
.persona__tarjeta--sin-ficha::before,
.persona__tarjeta--sin-ficha::after { display: none; }

/* Nombre superpuesto sobre la foto, en Helvetica Neue. La sombra leve
   lo sostiene sobre fotos claras cuando el velo no está. */
.persona__tarjeta .persona__nombre {
  position: absolute;
  left: var(--e2);
  right: var(--e2);
  bottom: var(--e2);
  z-index: 2;
  margin: 0;
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--t-base);
  color: var(--texto-invertido);
  text-shadow: 0 1px 10px rgba(12, 23, 38, 0.55);
}

.persona__cargo {
  font-family: var(--font-ui);
  color: var(--texto-suave);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  margin: var(--e2) 0 0;
}
.persona__perfil { font-size: var(--t-chico); margin: 0; }

/* ------------------------ Ficha de persona ------------------------ */
/* Ventana nativa <dialog>: foto a la izquierda, datos a la derecha,
   como la ficha de referencia. En pantallas chicas se apila. */
.ficha-persona {
  border: 0;
  padding: 0;
  width: min(100% - 2.5rem, 860px);
  background: var(--blanco);
  color: var(--texto);
}
.ficha-persona::backdrop { background: rgba(12, 23, 38, 0.55); }

.ficha-persona[open] {
  display: grid;
}
@media (min-width: 700px) {
  .ficha-persona[open] { grid-template-columns: 5fr 7fr; }
}

.ficha-persona__foto {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  object-position: center 25%;
  background: var(--celeste);
  display: block;
}

.ficha-persona__datos { padding: var(--e4); }

.ficha-persona__cerrar {
  position: absolute;
  top: var(--e2);
  right: var(--e2);
  width: 40px;
  height: 40px;
  border: 0;
  background: var(--azul);
  color: var(--blanco);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  /* Sin esto, Safari le dibuja encima su propio botón (fondo y borde
     nativos) apenas el fondo deja de ser opaco, como pasa en el celular
     más abajo. */
  appearance: none;
  -webkit-appearance: none;
}

.ficha-persona__nombre {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--t-titulo);
  line-height: var(--interlineado-titulo);
  margin: 0 0 var(--e1);
}
.ficha-persona__cargo {
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
  margin: 0 0 var(--e3);
}
.ficha-persona__perfil { font-size: var(--t-chico); }

/* Subsecciones de la ficha: Educación, Experiencia, Idiomas… */
.ficha-persona__perfil h4 {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
  margin: var(--e3) 0 var(--e1);
}
.ficha-persona__perfil h4:first-child { margin-top: 0; }
.ficha-persona__perfil ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ficha-persona__perfil li {
  padding: var(--e1) 0 var(--e1) var(--e2);
  border-left: 1px solid var(--linea);
  margin-bottom: var(--e1);
}
.ficha-persona__perfil small {
  color: var(--texto-suave);
  font-size: 0.8em;
}

/* Con perfiles largos, la ficha no debe crecer más que la pantalla:
   la columna de datos toma scroll propio. Esto es para el layout de
   escritorio (foto y texto lado a lado); en el celular se anula abajo. */
.ficha-persona { max-height: min(85vh, 640px); }
.ficha-persona__datos { overflow-y: auto; max-height: min(85vh, 640px); }

/* En el celular la ficha se apila (foto arriba, texto abajo) y una foto
   a página completa dejaba el texto en un cajón de scroll aparte, de
   apenas un resquicio de alto. Rediseño 23 sep: la foto pasa a ser una
   franja chica de identificación —a tope arriba, sin margen— con la
   cruz encima en blanco y sin recuadro (Moni pidió sacarle el fondo:
   el text-shadow le basta para leerse sobre cualquier foto). Es la
   ficha completa la que hace scroll, de un tirón, en vez de dos
   cajones anidados. */
@media (max-width: 699px) {
  .ficha-persona {
    max-height: 88vh;
    overflow-y: auto;
  }
  .ficha-persona__foto {
    height: 200px;
    min-height: 0;
    object-position: center 22%;
  }
  .ficha-persona__datos {
    overflow-y: visible;
    max-height: none;
    padding: var(--e3) var(--e3) var(--e4);
  }
  .ficha-persona__cerrar {
    background: none;
    color: var(--blanco);
    font-size: 1.7rem;
    text-shadow: 0 1px 4px rgba(12, 23, 38, 0.6);
  }
}

.ficha-persona__contacto {
  margin: var(--e3) 0 0;
  padding-top: var(--e3);
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  font-size: var(--t-chico);
}
.ficha-persona__contacto a {
  text-decoration: none;
  border-bottom: 1px solid var(--celeste);
}

/* ---------------------------- Contacto ---------------------------- */
.contacto { margin: 0; display: grid; gap: var(--e4); }
@media (min-width: 700px) { .contacto { grid-template-columns: repeat(3, 1fr); } }
/* Títulos de contacto en Baskerville, tipo oración (solo la primera
   mayúscula). Pedido: "médium" — Libre Baskerville solo trae 400 y
   700, así que va en 700, el más cercano. */
.contacto dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--celeste);
  margin-bottom: var(--e1);
}
.contacto dd { margin: 0; font-size: var(--t-sub); }
.contacto a { text-decoration: none; border-bottom: 1px solid var(--celeste); }

/* ------------------------------ Enlaces --------------------------- */
.enlace-flecha {
  display: inline-block;
  text-decoration: none;
  font-size: var(--t-chico);
  letter-spacing: 0.03em;
  padding-bottom: var(--e1);
  border-bottom: 1px solid var(--celeste);
  transition: border-color var(--transicion);
}
.enlace-flecha::after {
  content: " →"; display: inline-block; transition: transform var(--transicion);
}
.enlace-flecha:hover { border-bottom-color: currentColor; }
.enlace-flecha:hover::after { transform: translateX(4px); }

/* ---------------------------- Insights ---------------------------- */
/* Las páginas interiores no tienen hero, así que necesitan aire arriba
   para que la cabecera fija no tape el título. */
.pagina-interior { padding-top: var(--e5); }

/* Insights en la portada: tarjetas blancas sobre el fondo hueso —el
   negativo de las áreas, que son azules sobre azul—. El título lleva la
   misma jerarquía que el de un área: Libre Baskerville en negrita. Al
   pincharlas se abre el texto en una ventana, como las fichas del
   equipo. */
.insights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e3);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.insight { display: flex; }
.insight__tarjeta {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 15rem;
  padding: var(--e4) var(--e3) var(--e3);
  text-align: left;
  font: inherit;
  color: var(--texto);
  background: var(--blanco);
  border: 1px solid var(--linea);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.insight__tarjeta:hover,
.insight__tarjeta:focus-visible {
  border-color: var(--celeste);
  box-shadow: 0 10px 28px -18px rgba(12, 23, 38, 0.45);
}
.insight__etiqueta {
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: var(--e3);
}
.insight__titulo {
  font-family: var(--font-display);
  font-weight: var(--peso-titulo-area);
  font-size: var(--t-titulo-area);
  line-height: 1.2;
  color: var(--azul);
}
.insight__leer {
  margin-top: auto;
  padding-top: var(--e3);
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
}
.insight__leer::after { content: " +"; }
.insight__tarjeta:hover .insight__leer { color: var(--azul); }

/* Ventana de un insight. Como la ficha del equipo pero sin foto: una sola
   columna, con la cruz en una barra fija arriba para que siga a mano
   mientras se lee un texto largo. */
.ficha-insight {
  border: 0;
  padding: 0;
  width: min(100% - 2.5rem, 780px);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--blanco);
  color: var(--texto);
}
.ficha-insight::backdrop { background: rgba(12, 23, 38, 0.55); }
.ficha-insight__barra {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  padding: var(--e1) var(--e1) 0;
  background: var(--blanco);
}
/* Descargar el mismo texto en PDF: enlace discreto a la izquierda de la
   barra fija, para que siga a mano mientras se lee. */
.ficha-insight__barra { align-items: center; justify-content: space-between; padding-bottom: var(--e1); }
.ficha-insight__pdf {
  margin-left: var(--e3);
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--azul);
  padding: var(--e1) 0;
  border-bottom: 1px solid var(--celeste);
  transition: border-color var(--transicion);
}
.ficha-insight__pdf::after { content: " \2193"; }
.ficha-insight__pdf:hover { border-bottom-color: var(--azul); }
.ficha-insight__cerrar {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--azul);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.ficha-insight__interior { padding: 0 var(--e4) var(--e5); }
.ficha-insight__etiqueta {
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
  margin: 0 0 var(--e2);
}
.ficha-insight__titulo {
  font-size: var(--t-titulo);
  line-height: var(--interlineado-titulo);
  color: var(--azul);
  margin: 0 0 var(--e4);
}
.ficha-insight__cuerpo h4 {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
  margin: var(--e4) 0 var(--e2);
  padding-top: var(--e3);
  border-top: 1px solid var(--linea);
}
.ficha-insight__cuerpo h4:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.ficha-insight__cuerpo h5 {
  font-family: var(--font-display);
  font-weight: var(--peso-titulo-area);
  font-size: var(--t-sub);
  line-height: 1.25;
  color: var(--azul);
  margin: var(--e3) 0 var(--e2);
}
.ficha-insight__cuerpo p { margin: 0 0 var(--e2); }
/* Texto justificado a pedido del cliente. Con guiones automáticos (el
   idioma viene del <html lang>) para que no queden espacios abiertos. */
.ficha-insight__cuerpo p,
.ficha-insight__cuerpo li {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.ficha-insight__cuerpo ul {
  list-style: none;
  margin: 0 0 var(--e2);
  padding: 0;
}
.ficha-insight__cuerpo li {
  padding: var(--e1) 0 var(--e1) var(--e2);
  border-left: 1px solid var(--celeste);
  margin-bottom: var(--e1);
}
@media (max-width: 699px) {
  .ficha-insight { width: calc(100% - 1.5rem); }
  .ficha-insight__interior { padding: 0 var(--e3) var(--e4); }
}

/* Rejilla de publicaciones: portada, título y fecha. */
.entradas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e4);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.entrada__enlace {
  display: block;
  height: 100%;
  border: 1px solid var(--linea);
  text-decoration: none;
  transition: border-color var(--transicion);
}
.entrada__enlace:hover { border-color: var(--celeste); }

/* La portada siempre 8:5. Cualquier imagen que suban se recorta a esa
   proporción, así la rejilla nunca se desalinea. */
.entrada__portada {
  aspect-ratio: 8 / 5;
  background: var(--celeste);
  overflow: hidden;
}
.entrada__portada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transicion);
}
.entrada__enlace:hover .entrada__portada img { transform: scale(1.03); }

.entrada__texto { padding: var(--e3); }

.entrada__titulo {
  font-size: var(--t-sub);
  margin-bottom: var(--e3);
}
.entrada__fecha {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* ----------------------- Una publicación -------------------------- */
.publicacion { width: min(100% - 2.5rem, 760px); margin-inline: auto; }

.publicacion__portada {
  aspect-ratio: 8 / 5;
  background: var(--celeste);
  overflow: hidden;
  margin-bottom: var(--e4);
}
.publicacion__portada img { width: 100%; height: 100%; object-fit: cover; }

.publicacion__titulo { font-size: var(--t-titulo); margin-bottom: var(--e2); }

.cuerpo { max-width: var(--ancho-texto); }
.cuerpo p { margin-bottom: var(--e3); }

/* Descargable: solo aparece si la publicación trae PDF. */
.descarga {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e4);
  padding: var(--e2) var(--e3);
  border: 1px solid var(--azul);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: var(--t-chico);
  transition: background var(--transicion), color var(--transicion);
}
.descarga:hover { background: var(--azul); color: var(--texto-invertido); }
.descarga::after { content: "↓"; font-family: var(--font-numero); font-size: 1.1rem; }

.volver { margin-top: var(--e5); }

/* ------------------------------- Pie ------------------------------ */
.pie {
  background: var(--fondo-oscuro);
  color: var(--texto-invertido);
  padding-block: var(--e4);
}
.pie__fila {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--e2);
}
.pie__logo { width: 96px; }
.pie__legal { margin: 0; font-size: var(--t-micro); color: var(--celeste); }

/* ------------------- Marcas de contenido pendiente ---------------- */
/* Visibles solo mientras el sitio está en construcción. Al llegar el
   contenido real, el atributo desaparece del HTML. */
[data-pendiente]::after {
  content: "falta " attr(data-pendiente);
  display: block;
  font-family: var(--font-texto);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul);
  background: var(--celeste);
  padding: 0.15rem 0.45rem;
  width: max-content;
}
.persona__foto[data-pendiente]::after { margin: var(--e2); }

/* ------------------------------ Móvil ----------------------------- */
@media (max-width: 899px) {
  .menu-btn { display: flex; z-index: 60; }
  .logo { position: relative; z-index: 60; }

  /* Menú abierto: el fondo es azul, así que vuelve el logo blanco. */
  .cabecera[data-menu="abierto"] { background: transparent; border-bottom-color: transparent; }
  .cabecera[data-menu="abierto"] .logo__img--blanco { display: block; }
  .cabecera[data-menu="abierto"] .logo__img--azul   { display: none; }

  .nav {
    position: fixed; inset: 0;
    flex-direction: column; align-items: center; justify-content: center;
    gap: var(--e4);
    background: var(--azul);
    transform: translateX(100%);
    transition: transform var(--transicion);
  }
  .nav[data-abierto="si"] { transform: translateX(0); }
  .nav a,
  .cabecera[data-sobre-hero="no"] .nav a {
    color: var(--texto-invertido);
    font-size: var(--t-sub);
  }
  .nav__idioma {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    margin-top: var(--e3);
    padding-top: var(--e3);
    border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  }

  .menu-btn[aria-expanded="true"] span { background: var(--texto-invertido); }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}