/* ══════════════════════════════════════════════════════════════════════════
   BIOTA PERÚ — HOJA PRINCIPAL

   Las dos escalas mandan. Todo cuerpo de letra, todo interlineado y toda
   separación salen de tokens.css. Si hace falta un número que no está ahí,
   el que sobra es el número, no la escala.

   Orden: base → cabecera → héroe → quiénes somos → clientes → pie.
   El mismo en que se ven en la página.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Fuentes autoalojadas ─────────────────────────────────────────────────
 * Variables las dos: un archivo cubre todos los pesos. 92 KB en total,
 * contra los 14 archivos del tema anterior.                              */
@font-face{
  font-family:'Roboto';
  src:url('../fuentes/roboto-latin.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Roboto Condensed';
  src:url('../fuentes/roboto-condensed-latin.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}

/* ── Base ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--blanco);
  color:var(--tinta);
  font-family:var(--fuente-cond);
  font-size:var(--t-base);
  line-height:var(--li-texto);
  -webkit-font-smoothing:antialiased;
  /* Sin esto, una pieza que se sale por la derecha deja un hueco blanco que
     nadie encuentra mirando la pieza culpable.
     CLIP y no HIDDEN: `hidden` convierte al body en contenedor de scroll y
     eso deja MUDA a la cabecera pegajosa —se queda quieta y nadie entiende
     por qué—. `clip` recorta igual sin crear el contenedor. */
  overflow-x:clip;
}

html{
  /* Que un ancla no aterrice DEBAJO de la cabecera pegada. */
  scroll-padding-top:calc(var(--cabecera-alto) + 10px);
  /* La red del hueco a la derecha solo funciona en los DOS elementos. Aquí
     también CLIP, por lo mismo: `hidden` mataría la cabecera pegajosa. */
  overflow-x:clip;
}

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

a{color:inherit;text-decoration:none;transition:color var(--transicion) ease}

h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:var(--fuente);
  font-weight:var(--peso-fuerte);
  line-height:var(--li-titulo);
}

p{margin:0 0 var(--sep-parrafo)}
p:last-child{margin-bottom:0}

/* ── TEXTO JUSTIFICADO ──────────────────────────────────────────────────
 *
 * Decisión del cliente, 18/09/2026, y vale para TODO el sitio: el texto
 * corrido va justificado. Está aquí arriba y en una sola lista a propósito
 * —si mañana se justifica algo nuevo, se añade su clase y ya— porque la
 * alternativa es un `text-align` suelto por componente y acabar sin saber
 * cuáles quedaron fuera.
 *
 * Qué entra: los párrafos de varias líneas. Qué NO: títulos, rótulos,
 * botones, menús, datos sueltos, el rótulo de la banda en diagonal y el
 * texto del héroe, que va centrado sobre la foto — ahí `justify` no
 * significa nada y se cargaría el centrado que ya tienen.
 *
 * ⚠ SIN partición de palabras. Justificar sin guiones abre huecos entre
 * palabras, y se nota más cuanto más estrecha es la columna: en móvil, y en
 * las tarjetas. Es el precio de esta decisión, no un fallo de la maqueta. La
 * partición automática se probó y se descartó porque el navegador corta mal
 * en español —«elabora-ción», «desbos-que»— y distinto en cada pantalla.  */
.heroe__texto,
.quienes__cuerpo,
.entrada__texto,
.fichas__texto,
.datos__entrada,
.contenido,
.noticia__cuerpo,
.noticia__bajada,
.otras__bajada,
.puestos__resumen,
.postular__texto,
.legal,
.legal__entrada{
  text-align:justify;
  hyphens:none;
}

/* Foco visible. Las pantallas no lo definen, así que se resuelve con el
   color de acento — sin esto, quien navega con teclado no ve dónde está. */
:focus-visible{
  outline:3px solid var(--lima);
  outline-offset:2px;
}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.contenedor{
  width:100%;max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--aire);
}
/* Dentro de la página, el contenido entra el margen del texto de Inicio
   (07/10, pedido del cliente: «Inicio es la referencia»). Quedan fuera la
   cabecera y el pie, que no están en `main`, y el héroe y los banners, que
   van alineados con el logotipo como en Inicio. */
main .contenedor:not(.heroe__int):not(.banner__int){
  padding-inline:calc(var(--aire) + var(--margen-texto));
}

.saltar{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--verde);color:#fff;padding:12px 20px;
}
.saltar:focus{left:0}

/* ── Botones ─────────────────────────────────────────────────────────────
 * Una sola altura para todos. El sitio actual tiene tres, y ninguna llega
 * al mínimo táctil.                                                      */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tactil);
  padding:11px 20px;
  border:1px solid transparent;
  font-family:var(--fuente);
  font-size:var(--t-base);
  font-weight:var(--peso-medio);
  line-height:1.2;
  text-align:center;
  cursor:pointer;
  /* Color, y NADA que cambie el tamaño: un botón que crece en hover empuja
     a lo que tiene al lado. El hundido va aparte, más rápido, porque el
     acuse de recibo de una pulsación tiene que ser instantáneo. */
  transition:background-color var(--transicion) ease,
             border-color var(--transicion) ease,
             color var(--transicion) ease,
             transform var(--pulsacion) var(--ease-out);
}

/* Todo lo pulsable acusa recibo. Sutil: 0,97 se siente, no se ve. */
.btn:active{transform:scale(.97)}

/* El viraje a azul es lo que une a todos los botones del sitio. Se conserva. */
.btn--primario{background:var(--verde);border-color:var(--verde);color:#fff}
.btn--primario:hover,
.btn--primario:focus{background:var(--azul);border-color:var(--azul);color:#fff}

.btn--fantasma{background:transparent;border-color:#fff;color:#fff}
.btn--fantasma:hover,
.btn--fantasma:focus{background:var(--azul);border-color:var(--azul);color:#fff}

/* El azul de las pantallas nuevas: es el «+ Leer noticia», y por extensión el
   «Leer más» de las fichas de servicio, que ninguna pantalla dibuja. */
.btn--azul{
  background:var(--azul);border-color:var(--azul);color:#fff;
  border-radius:var(--radio-acento);
}
.btn--azul:hover,
.btn--azul:focus{background:var(--verde);border-color:var(--verde);color:#fff}

.btn--acento{
  background:var(--lima);border-color:var(--lima);color:#fff;
  border-radius:var(--radio-acento);
  box-shadow:var(--sombra-acento);
}
.btn--acento:hover,
.btn--acento:focus{background:var(--azul);border-color:var(--azul);color:#fff}

/* ══ CABECERA ══════════════════════════════════════════════════════════ */

.barra{
  background:var(--lima);
  min-height:var(--barra-alto);
  color:#fff;
  font-family:var(--fuente);
  font-size:var(--t-s);
  font-weight:var(--peso-fuerte);
}
.barra__int{
  display:flex;align-items:center;justify-content:flex-start;
  gap:var(--sep-bloque);
  flex-wrap:wrap;
  min-height:var(--barra-alto);
  padding-block:6px;
}
.barra a{display:inline-flex;align-items:center;gap:8px}
.barra a:hover{color:var(--azul)}
/* Los iconos en VERDE sobre el lima, no en blanco: es lo que los separa del
   texto y lo que hace la barra reconocible de un vistazo. */
.barra svg{width:16px;height:16px;flex:none;color:var(--verde)}
.barra a:hover svg{color:var(--azul)}

/* La cabecera va PEGADA arriba en todo el sitio. La barra lima se va con el
   scroll —es un dato de contacto, no navegación— y lo que se queda es el
   logotipo con el menú. En móvil, además, es lo que mantiene a mano el botón
   del panel sin tener que volver arriba del todo. */
.cabecera{
  background:#fff;
  position:sticky;top:0;z-index:60;
  transition:box-shadow var(--transicion) var(--ease-out);
}
/* La sombra solo cuando ya hay algo por debajo. La pone el guion; sin él la
   cabecera se pega igual, solo que sin el relieve. */
.cabecera.esta-pegada{box-shadow:var(--cabecera-sombra)}
.cabecera__int{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sep-pieza);
  min-height:var(--cabecera-alto);
}
.cabecera__logo img{max-height:46px;width:auto}
.cabecera__logo--texto{
  font-family:var(--fuente);font-size:var(--t-l);
  font-weight:var(--peso-fuerte);color:var(--verde);
}

/* ── Menú ─────────────────────────────────────────────────────────────
 * El chevron delante de cada entrada es de las pantallas nuevas.       */
.menu{display:flex;align-items:center;gap:26px;margin:0;padding:0;list-style:none}
.menu a{
  display:inline-flex;align-items:center;
  min-height:var(--tactil);
  font-family:var(--fuente);
  font-size:var(--t-m);
  font-weight:var(--peso-fino);
  color:var(--tinta-fuerte);
}
.menu a::before{
  content:"›";
  margin-right:6px;
  color:var(--verde);
  font-weight:var(--peso-normal);
}
.menu a:hover{color:var(--verde)}

/* La página en la que estás. Ninguna pantalla lo define; se resuelve con el
   verde de marca, que es lo que el sitio ya usa para señalar. */
.menu .current-menu-item > a,
.menu .current_page_item > a,
.menu .current-menu-parent > a,
.menu .current-menu-ancestor > a{color:var(--verde)}

/* ── Submenús (escritorio) ───────────────────────────────────────────────
 * Se despliegan al pasar el ratón y también al llegar con el tabulador —de
 * ahí el :focus-within—, así que no hace falta guion para abrirlos. Con
 * JavaScript apagado siguen funcionando.
 *
 * El chevron ya no se repite dentro: ahí lo que ordena es la sangría del
 * propio panel. */
.menu li{position:relative}

.menu .sub-menu{
  position:absolute;left:0;top:100%;z-index:70;
  min-width:230px;
  margin:0;padding:6px 0;
  list-style:none;
  background:#fff;
  border-top:3px solid var(--lima);
  box-shadow:0 12px 26px rgba(0,0,0,.14);
  /* Cerrado sin `display:none`: así la apertura puede tener transición y el
     lector de pantalla lo sigue anunciando como lista. */
  opacity:0;visibility:hidden;
  transform:translateY(6px);
  transition:opacity var(--transicion) var(--ease-drawer),transform var(--transicion) var(--ease-drawer),visibility var(--transicion);
}
.menu li:hover > .sub-menu,
.menu li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}

.menu .sub-menu a{
  display:flex;align-items:center;
  min-height:var(--tactil);
  padding:4px var(--sep-linea) 4px 16px;
  font-size:var(--t-base);
  white-space:nowrap;
}
.menu .sub-menu a::before{content:none}
.menu .sub-menu a:hover,
.menu .sub-menu a:focus{background:var(--hueso);color:var(--verde)}

/* El padre avisa de que tiene hijos. */
.menu .menu-item-has-children > a::after{
  content:"";
  width:0;height:0;
  margin-left:7px;
  border:4px solid transparent;
  border-top-color:currentColor;
  transform:translateY(2px);
}

.menu-boton{
  display:none;
  align-items:center;justify-content:center;
  width:var(--tactil);height:var(--tactil);
  padding:0;border:0;background:transparent;color:var(--azul);cursor:pointer;
}
.menu-boton svg{width:26px;height:26px}
/* El de cerrar no está aquí: vive dentro del panel, que es donde el dedo ya
   está cuando quiere cerrarlo. */

/* ══ EL PANEL DEL MENÚ (móvil) ═════════════════════════════════════════
 *
 * Entra desde la derecha, que es el lado del pulgar. No ocupa la pantalla
 * entera a propósito: la franja de sitio que queda a la izquierda es lo que
 * dice «esto se cierra», y evita que parezca otra página.
 *
 * Sin JavaScript no existe —el marcado está, pero no se pinta— y el menú se
 * queda como una lista debajo del logotipo. Es la regla de siempre: nada de
 * lo que se lee depende del guion.
 * ══════════════════════════════════════════════════════════════════════ */

.panel{display:none}

html.js .panel{
  display:block;
  position:fixed;inset:0;z-index:120;
}
/* 🔴 El [hidden] tiene que llevar el MISMO peso que la regla que enciende el
   panel. `.panel[hidden]` (0,2,0) PIERDE contra `html.js .panel` (0,2,1), y
   entonces el panel cerrado sigue pintado: el velo mide toda la ventana y,
   aunque esté a opacidad cero, **se queda con todos los clics del sitio**.
   No se ve nada raro; simplemente nada responde. */
html.js .panel[hidden]{display:none}

/* Cinturón: aunque algo lo dejara visible, cerrado no toca nada. */
.panel:not(.esta-abierto) .panel__velo{pointer-events:none}

.panel__velo{
  position:absolute;inset:0;
  background:var(--panel-velo);
  opacity:0;
  transition:opacity var(--transicion) ease;
}

.panel__caja{
  position:absolute;top:0;right:0;bottom:0;
  width:var(--panel-ancho);
  display:flex;flex-direction:column;
  background:#fff;
  box-shadow:var(--panel-sombra);
  transform:translateX(100%);
  transition:transform .28s var(--ease-drawer);
  overflow-y:auto;
  overscroll-behavior:contain;   /* el rebote no arrastra la página de atrás */
}

.panel.esta-abierto .panel__velo{opacity:1}
.panel.esta-abierto .panel__caja{transform:translateX(0)}

/* Mientras hay panel, el fondo no se mueve. En los dos elementos: en iOS,
   con la clase solo en el body, el documento sigue desplazándose. */
html.tiene-panel,
body.tiene-panel{overflow:hidden}

.panel__cabecera{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sep-linea);
  min-height:var(--cabecera-alto);
  padding:var(--sep-linea) var(--aire);
  border-bottom:3px solid var(--lima);
}
.panel__logo{max-height:40px;width:auto}
.panel__marca{
  font-family:var(--fuente);font-size:var(--t-l);
  font-weight:var(--peso-fuerte);color:var(--verde);
}
.panel__cerrar{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--tactil);height:var(--tactil);
  margin-right:-10px;            /* el icono, alineado con el borde óptico */
  padding:0;border:0;background:transparent;color:var(--verde);cursor:pointer;
}
.panel__cerrar svg{width:24px;height:24px}
.panel__cerrar:hover{color:var(--azul)}

.panel__nav{padding:var(--sep-pieza) var(--aire)}
.panel__menu{margin:0;padding:0;list-style:none}
.panel__menu li + li{border-top:1px solid var(--linea)}
.panel__menu a{
  display:flex;align-items:center;
  min-height:52px;
  font-family:var(--fuente);
  font-size:var(--t-l);
  font-weight:var(--peso-fino);
  line-height:var(--li-titulo);
  color:var(--tinta-fuerte);
}
.panel__menu a::before{
  content:"›";
  margin-right:10px;
  color:var(--verde);
  font-weight:var(--peso-normal);
}
.panel__menu a:hover,
.panel__menu a:focus{color:var(--verde)}
.panel__menu .current-menu-item > a,
.panel__menu .current_page_item > a,
.panel__menu .current-menu-parent > a,
.panel__menu .current-menu-ancestor > a{color:var(--verde)}

/* ── Submenús en el panel ────────────────────────────────────────────────
 * TODO desplegado, sin acordeones. Con cinco entradas y un puñado de hijos,
 * un acordeón añade un toque para llegar a cada sitio y esconde justo lo que
 * se ha venido a buscar. La jerarquía la marcan la sangría, el filete de la
 * izquierda y un cuerpo menor. */
.panel__menu .sub-menu{
  margin:0 0 var(--sep-linea);
  padding:0 0 0 var(--sep-pieza);
  list-style:none;
  border-left:2px solid var(--lima);
  margin-left:14px;
}
.panel__menu .sub-menu li + li{border-top:1px solid var(--linea)}
.panel__menu .sub-menu a{
  min-height:44px;
  font-size:var(--t-m);
  color:var(--tinta);
}
/* El chevron es del primer nivel: dentro, la sangría ya dice dónde estás. */
.panel__menu .sub-menu a::before{content:none}
.panel__menu .sub-menu a:hover,
.panel__menu .sub-menu a:focus{color:var(--verde)}

/* Un padre con hijos no lleva línea debajo: su submenú va pegado a él. */
.panel__menu .menu-item-has-children > a{border-bottom:0}

/* El pie del panel es la razón de ser del panel: en móvil, lo que se busca
   en un menú no es una página, es un teléfono. */
.panel__pie{
  margin-top:auto;
  padding:var(--sep-pieza) var(--aire);
  background:var(--hueso);
  border-top:1px solid var(--linea);
}
.panel__dato{
  display:flex;align-items:center;gap:10px;
  min-height:var(--tactil);
  font-family:var(--fuente);
  font-size:var(--t-m);
  font-weight:var(--peso-medio);
  color:var(--tinta-fuerte);
}
.panel__dato svg{width:17px;height:17px;flex:none;color:var(--verde)}
.panel__dato:hover{color:var(--verde)}

.panel__redes{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:var(--sep-linea) 0 0;padding:0;list-style:none;
}
.panel__redes a{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--tactil);height:var(--tactil);
  color:var(--verde);
}
.panel__redes svg{width:20px;height:20px}
.panel__redes a:hover{color:var(--azul)}

/* ══ HÉROE ═════════════════════════════════════════════════════════════ */

.heroe{
  position:relative;
  display:flex;align-items:center;
  min-height:var(--heroe-alto);
  color:#fff;
  overflow:hidden;
  background:#1d2124;   /* mientras carga la primera foto, y si no hay ninguna */
}

/* Las fotos van APILADAS y se funden entre ellas. Nada de desplazamiento
   lateral: el texto no se mueve, solo cambia lo que hay detrás.
   Sin JavaScript se ve la primera, que ya nace con la clase puesta. */
.heroe__fotos{position:absolute;inset:0;z-index:0}
.heroe__foto{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1);
  transition:opacity var(--heroe-fundido) ease,
             transform var(--heroe-zoom) linear;
  will-change:opacity,transform;
}
/* El acercamiento lento mientras está a la vista. Es lo que evita que una
   foto quieta se lea como una imagen pegada. */
.heroe__foto.esta-activa{opacity:1;transform:scale(1.06)}

.heroe::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--velo-heroe);
  pointer-events:none;
}
.heroe__int{position:relative;z-index:2;width:100%}
.heroe__caja{max-width:520px;padding-block:var(--sep-bloque)}

.heroe__chapa{
  display:inline-block;
  background:var(--verde);
  padding:5px 15px;
  margin-bottom:var(--sep-linea);
  font-family:var(--fuente);
  font-size:18px;
  font-weight:var(--peso-fuerte);
  line-height:var(--li-titulo);
  letter-spacing:.01em;
}

.heroe__titulo{
  margin:0 0 var(--sep-linea);
  font-family:var(--fuente);
  font-size:var(--t-heroe);
  font-weight:var(--peso-fino);    /* el Light del sitio actual */
  line-height:var(--li-titulo);
  color:#fff;
}
/* Lo que el cliente escribe entre ** sale en lima y en negrita. */
.heroe__titulo b{
  font-weight:var(--peso-fuerte);
  color:var(--lima);
  padding-left:10px;
}

.heroe__texto{
  margin:0 0 var(--sep-parrafo);
  font-family:var(--fuente-cond);
  font-size:var(--t-base);
  line-height:var(--li-corto);
  max-width:44ch;
}
.heroe__texto p{margin-bottom:var(--sep-linea)}
.heroe__texto p:last-child{margin-bottom:0}

.heroe__botones{display:flex;flex-wrap:wrap;gap:var(--sep-linea)}

/* ══ LAS DIAGONALES ════════════════════════════════════════════════════
 * Un solo ángulo para todo el sitio, y siempre con clip-path — nunca con
 * PNG, que es lo que hace pesado y borroso al sitio actual.
 * ══════════════════════════════════════════════════════════════════════ */

/* ⚠ LA SEPARACIÓN ENTRE SECCIONES SE CUENTA UNA VEZ.
 *
 * `--sep-seccion` es lo que la escala llama «entre secciones»: 100 px. Si
 * cada sección pusiera 100 arriba y 100 abajo, dos seguidas dejarían 200 —el
 * doble de lo que dice la escala— y se lee como un hueco olvidado. Por eso
 * cada una pone LA MITAD: la suma de dos vecinas da exactamente los 100.
 *
 * Y así el aire de una sección con fondo de color queda simétrico, que es lo
 * otro que hay que cumplir: con 100 arriba y 30 abajo, el bloque verde se
 * veía descentrado dentro de su propio color. Se intentó arreglar con
 * excepciones por tipo de sección y el remedio devolvió los 200. Un solo
 * número, sin excepciones. */
.seccion{position:relative;padding-block:calc(var(--sep-seccion) / 2)}

/* Y lo último de la columna no suma NADA a ese número: su margen inferior
   se quedaba dentro del relleno y el pie de la sección salía 24 px más alto
   que la cabeza —un párrafo, la fecha de la política, el título de una
   búsqueda sin resultados—. Medido en todo el sitio el 23/09. */
.contenedor > :last-child,
.contenido > :last-child,
.legal > :last-child{margin-bottom:0}

/* Salvo si comparten fondo: ahí no hay borde de color que separar y el aire
   de arriba sobra del todo. */
/* Un LISTADO no es otra sección: es lo que la entrada acaba de anunciar. El
   título dice «Permisos», el párrafo lo explica y debajo van los permisos.
   Con el aire entero entre los dos había 100 px ahí y 30 px entre pieza y
   pieza: el hueco de fuera triplicaba al de dentro y el bloque se leía
   partido en dos.

   ⚠ Y NO vale para `.fichas`, aunque sea el mismo caso: esa sección lleva
   FONDO PROPIO, así que sin aire arriba la banda gris arranca pegada al
   borde de las fotos y se lee como un error de maquetación. Donde hay
   cambio de fondo, el aire hace falta. */
.entrada + .franjas,
.clientes + .clientes,
.fichas + .fichas{padding-top:0}

/* ── Título de bloque ────────────────────────────────────────────────────
 * El subrayado lima corto. Es el título que sobrevive en las pantallas
 * nuevas; el que llevaba la línea gris encima y el doble filete se retira. */
.titulo-bloque{
  position:relative;
  margin:0 0 var(--sep-parrafo);
  padding-bottom:14px;
  font-family:var(--fuente);
  font-size:var(--t-xl);
  font-weight:var(--peso-fuerte);
  line-height:var(--li-titulo);
  color:var(--verde);
}
.titulo-bloque::after{
  content:"";position:absolute;left:0;bottom:0;
  width:80px;height:4px;background:var(--lima);
}
.titulo-bloque b{color:var(--azul);font-weight:var(--peso-fuerte)}

.titulo-bloque--centro{text-align:center}
.titulo-bloque--centro::after{left:50%;transform:translateX(-50%)}

/* ══ ¿QUIÉNES SOMOS? ═══════════════════════════════════════════════════
 *
 * Tres piezas centradas y apiladas: la cifra (imagen), el lema en versales
 * y el bloque azul con la presentación.
 *
 * Aquí había otra cosa hasta el 18/09: texto a la izquierda y el ave calada
 * a la derecha, pegada al suelo. Si algo de abajo parece dar un rodeo, es
 * porque la pieza vieja está en `_retirado\seccion-quienes-con-ave.php`.
 *
 * Abajo, cero aire: desde el 23/09 el bloque azul va a sangre y es él quien
 * cierra la sección (ver `.quienes__caja`).
 * ══════════════════════════════════════════════════════════════════════ */

.quienes{
  position:relative;
  padding-block:calc(var(--sep-seccion) / 2);
  background:var(--hueso);
}
.quienes__decorado{
  position:absolute;
  z-index:0;
  width:auto;
  height:350px;
  max-width:none;
  pointer-events:none;
}
.quienes__decorado--superior-izq{top:0;left:0}
.quienes__decorado--superior-der{top:0;right:0}
.quienes__decorado--inferior-izq{bottom:200px;left:0;height:100px}
/* El ave de abajo a la derecha se retiró el 07/10 por pedido del cliente:
   en su lugar, la sección cierra con una imagen al ancho del contenido
   (`.quienes__imagen`). La pieza vieja está en `_retirado\img\`. */
.quienes__int,
.quienes__caja{position:relative;z-index:1}
.quienes__destacado,
.quienes__cuerpo{position:relative;z-index:1}

/* ── El fondo propio de la sección ───────────────────────────────────────
 * Cuando se le pone imagen, va a sangre y detrás de todo. Encima lleva un
 * velo claro: la cabecera de esta sección es texto oscuro sobre claro, y sin
 * velo una foto oscura lo deja ilegible. */
/* 🔴 El velo va como SEGUNDA CAPA DE FONDO, no como pseudo-elemento.
   Lo tuve en `::after` con `inset:0` y ese es EL MISMO ::after donde vive la
   cuña lima de la esquina: un elemento solo tiene un ::after, así que el
   velo le puso `left:0` a la cuña y el triángulo lima se fue a pegarse al
   azul, en la esquina contraria. No dio ningún error: solo se veía mal, y
   únicamente en la portada, que es la única sección con imagen de fondo.

   Con dos capas de `background-image` no hace falta apropiarse de los pseudos:
   el degradado plano va encima de la foto y estos quedan para los adornos. */
.quienes--con-fondo{
  background-image:linear-gradient(var(--velo-quienes),var(--velo-quienes)),var(--quienes-fondo);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.quienes--con-fondo .quienes__int{position:relative;z-index:1}


.quienes__int{
  position:relative;z-index:1;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--aire);
}

/* ── La cabecera: cifra y lema ─────────────────────────────────────────── */

.quienes__cabecera{
  text-align:center;
  margin-bottom:var(--sep-bloque);
}

.quienes__titular{margin:0}

/* La cifra la compone diseño y llega como imagen. Ancho máximo y a escalar:
   el archivo vendrá a la resolución que venga, y estirarlo más allá de esto
   lo deja blando en cualquier pantalla de alta densidad. */
.quienes__cifra{
  display:block;
  width:auto;
  max-width:min(var(--quienes-cifra),100%);
  height:auto;
  margin-inline:auto;
}

.quienes__lema{
  /* Se escribe en minúsculas en el panel y las versales las pone la hoja:
     así el cliente no tiene que teclear en mayúsculas, y las tildes salen
     donde toca. */
  margin:var(--sep-parrafo) 0 0;
  font-family:var(--fuente-cond);
  /* Un paso de escala por encima del dato (23/09, lo pidió el cliente). */
  font-size:var(--t-l);
  font-weight:var(--peso-fuerte);
  line-height:var(--li-corto);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#97ba32;
}
.quienes__lema::after{
  content:"";
  display:block;
  width:46px;
  height:4px;
  margin:10px auto 0;
  background:#97ba32;
}

/* ── Presentación ─────────────────────────────────────────────────────── */
.quienes:has(.quienes__caja){padding-bottom:0}
.quienes__caja{
  position:relative;
  z-index:1;
  padding-block:0 var(--quienes-caja-y);
}
.quienes__caja-int{
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--aire);
}
/* El relleno de la caja azul también es el margen lateral del texto común:
   así los dos textos empiezan y terminan a la misma altura (30/09). */
.quienes__caja{--quienes-relleno:var(--margen-texto)}
.quienes__destacado{
  padding:var(--quienes-relleno);
  color:var(--blanco);
  background:var(--azul);
  clip-path:polygon(16px 0,100% 0,100% 100%,0 100%,0 16px);
}
.quienes__destacado-texto{
  font-family:var(--fuente-cond);
  font-size:calc(var(--t-m) + 1px);
  line-height:1.7;
}
.quienes__destacado-texto p{margin-bottom:var(--sep-parrafo)}
.quienes__destacado-texto p:last-child{margin-bottom:0}
.quienes__cuerpo{
  margin-top:var(--sep-pieza);
  padding-inline:var(--quienes-relleno);
  font-family:var(--fuente-cond);
  font-size:calc(var(--t-m) + 1px);
  line-height:1.7;
  color:var(--tinta);
}
.quienes__cuerpo p{margin-bottom:var(--sep-parrafo)}
.quienes__cuerpo p:last-child{margin-bottom:0}

/* La imagen que cierra la sección: al ancho de la caja azul, sin el relleno
   del texto común. Debajo queda el aire de `.quienes__caja` antes del blanco
   de Clientes. */
.quienes__imagen{
  display:block;
  width:100%;
  height:auto;
  margin-top:var(--sep-pieza);
}

/* ══ CLIENTES ══════════════════════════════════════════════════════════ */

.clientes{background:var(--blanco)}

/* Todos los logos entran en la MISMA caja, centrados y a la misma altura
   óptica. Es lo que arregla la fila descuadrada del sitio actual, donde
   cada archivo trae su propio tamaño — de 66×89 a 212×68. */
.clientes__lista{
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;
  gap:var(--sep-pieza) 24px;
  margin:0;padding:0;list-style:none;
}
.clientes__item{
  display:flex;align-items:center;justify-content:center;
  width:200px;height:70px;
}
.clientes__item img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;          /* logo calado: nunca se recorta */
  /* A color, como en el sitio actual. Las pantallas nuevas no enseñan esta
     fila, así que manda lo que hay hoy — no mi gusto. Tuve el grayscale
     puesto y era criterio mío colándose donde no tocaba. */
}

/* ══ BANNER DE PÁGINA INTERIOR ═════════════════════════════════════════
 * Foto a sangre, rótulo verde y —en las páginas de servicios— el selector.
 * Una sola altura para todas las páginas: es lo que las hace parecer partes
 * del mismo sitio.
 * ══════════════════════════════════════════════════════════════════════ */

/* El banner es UNO para todo el sitio: foto a sangre, el título en su
   recuadro verde y —solo en los servicios— el selector debajo. Todo centrado
   verticalmente, que es como está en la pantalla de Servicios. */
.banner{
  position:relative;
  display:flex;align-items:center;
  min-height:var(--banner-alto);
  background:#1d2124 center/cover no-repeat;
  color:#fff;
}
/* Sin foto no hay velo que valga: el fondo se queda en el gris oscuro y el
   rótulo se sigue leyendo. */
.banner::before{
  content:"";position:absolute;inset:0;
  background:var(--velo-banner);
  pointer-events:none;
}
.banner__int{position:relative;z-index:1;width:100%;padding-block:var(--sep-pieza)}

.banner__chapa{
  display:inline-block;
  align-self:flex-start;   /* el recuadro mide lo que el texto, no la fila */
  background:var(--verde);
  padding:6px 16px;
  margin:0 0 var(--sep-linea);
  font-family:var(--fuente);
  font-size:var(--t-l);
  font-weight:var(--peso-fuerte);
  line-height:var(--li-titulo);
}

/* ── La variante baja ────────────────────────────────────────────────────
 * Menos alto y el rótulo apoyado abajo a la izquierda, en mayúsculas y más
 * grande. Hoy solo la usa Contáctanos.
 *
 * El alto se recorta a la mitad, así que la foto se ve como una franja: eso
 * obliga a que el recorte de la imagen siga siendo por el centro, o la cabeza
 * del ave se queda fuera. Lo hace `object-fit` del fondo, que ya estaba.
 *
 * Y el rótulo baja con `align-items`, no con un margen: un margen calculado
 * contra un alto fijo deja de cuadrar en cuanto el título ocupa dos líneas. */
.banner--bajo{
  min-height:var(--banner-alto-bajo);
  align-items:flex-end;
}
/* El aire de abajo lo pone el contenedor, no el rótulo: así el rótulo puede
   quedarse sin ningún relleno propio y alinearse EXACTO con la columna de
   texto de la página. Con padding propio se separaba 20 px de la izquierda y
   quedaba desalineado respecto a todo lo demás, que es de esas cosas que no
   se ven de frente pero se notan. */
.banner--bajo .banner__int{padding-block:0 var(--sep-pieza)}
.banner--bajo .banner__chapa{
  margin:0;
  padding:0;
  background:none;         /* sin chapa: solo la palabra sobre la foto */
  font-size:var(--banner-rotulo-bajo);
  text-transform:uppercase;
  letter-spacing:.02em;
  /* La foto ya va con su velo encima, pero una foto clara puede dejar el
     texto justo en el límite. La sombra no se ve y lo asegura. */
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}

/* ── El selector de servicios ────────────────────────────────────────────
 * Son ENLACES, no pestañas: cada servicio tiene su dirección. La activa se
 * marca sola comparando con la página que se está viendo. */
.selector__lista{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:0;padding:0;list-style:none;
}
.selector__op{
  display:inline-flex;align-items:center;
  min-height:var(--tactil);
  padding:6px 14px;
  border:1px solid rgba(255,255,255,.9);
  font-family:var(--fuente);
  font-size:var(--t-m);
  font-weight:var(--peso-medio);
  color:#fff;
  transition:background-color var(--transicion) ease,color var(--transicion) ease;
}
.selector__op:hover,
.selector__op:focus{background:rgba(255,255,255,.2);color:#fff}
.selector__op.esta-activa{
  background:#fff;
  border-color:#fff;
  color:var(--verde);
}

/* ══ ENTRADA DE PÁGINA ═════════════════════════════════════════════════ */

.entrada__int{max-width:var(--ancho)}

/* El nombre de la página hace de título de sección, y va en mayúsculas como
   el resto de títulos del sitio. Se hace con CSS y no escribiéndolo así en el
   panel: en el menú y en la pestaña del navegador tiene que leerse normal. */
.entrada .titulo-bloque{text-transform:uppercase}
.entrada__texto{
  /* A TODO el ancho del contenido, por decisión del 07/09. Antes tenía un
     tope de 820 px por legibilidad —una línea muy larga cansa—, pero el
     texto justificado con partición aguanta bien la columna entera y el
     bloque se lee como una unidad con la rejilla de abajo. */
  font-family:var(--fuente-cond);
  font-size:var(--t-m);
  line-height:var(--li-texto);
  /* ⚠ NI justificado NI partición, en ningún texto del sitio (07/09).
     La diseñadora parte palabras a mano porque compone en InDesign, a un
     ancho fijo. En web el ancho cambia en cada pantalla, así que la
     partición la decide el navegador y acaba cortando donde no toca
     —«elabora-ción», «desbos-que»— y encima distinto en cada dispositivo.
     Y sin partir, el justificado abre ríos de espacio entre palabras. Así
     que se van los dos: bandera a la izquierda, que es como se lee mejor. */
  overflow-wrap:break-word;     /* red: una palabra larguísima parte, pero solo ella */
}

/* ══ FICHAS DE SERVICIO ════════════════════════════════════════════════
 *
 * Foto, franja de color con el título y texto corto debajo, sin caja: el
 * texto va suelto sobre el fondo y lo que lo separa del vecino es una línea
 * de puntos. Es literal de las pantallas.
 * ══════════════════════════════════════════════════════════════════════ */

.fichas{background:var(--hueso)}

.fichas__lista{
  display:grid;
  gap:var(--sep-bloque) var(--fichas-hueco);
  margin:0;padding:0;list-style:none;
}
.fichas--tres .fichas__lista{grid-template-columns:repeat(3,minmax(0,1fr))}
.fichas--dos  .fichas__lista{grid-template-columns:repeat(2,minmax(0,1fr))}

.fichas__item{position:relative;min-width:0;display:flex;flex-direction:column}

.fichas__marco{display:block;overflow:hidden}
/* Proporción fija y recorte por el centro. WordPress ya sirve la foto
   recortada, pero esto es lo que aguanta el día que alguien suba una vertical
   por su cuenta: sin ello, una sola foto rara descuadra la fila entera. */
.fichas__foto{
  display:block;width:100%;height:auto;
  aspect-ratio:3 / 2;
  object-fit:cover;
}

.fichas__titulo{
  margin:0;
  display:flex;align-items:center;justify-content:center;
  min-height:var(--fichas-barra);
  padding:10px 16px;
  font-family:var(--fuente);
  font-size:var(--t-m);
  font-weight:var(--peso-fuerte);
  line-height:var(--li-titulo);
  text-align:center;
  color:#fff;
}
/* El alto mínimo NO es capricho: un título de una línea junto a otro de dos
   deja las franjas desiguales y la fila se lee rota. */

/* ⚠ EXCEPCIONES PEDIDAS, y se deja escrito que lo son: en estas tres
   rejillas el título va dos puntos más grande —18 px— que en el resto del
   sitio. Rompen la escala tipográfica a propósito, así que están aquí,
   juntas y con su nombre, en vez de repartidas por la hoja. Monitoreos salió
   de la reunión del 07/09; Noticias y el índice de servicios, del 08/09.

   Cada una va por un gancho SUYO, nunca por `.fichas--tres`: esa clase la
   comparten el índice y las fichas de cada línea, y con ella crecerían
   títulos que nadie pidió. Y en Monitoreos va por el slug y no por el color,
   que el color es identidad y ata dos cosas que no tienen por qué ir juntas.
   Si alguna necesita otro tamaño, se saca del grupo — están juntas porque
   hoy valen lo mismo, no porque tengan que valerlo siempre.

   ⚠ El índice de servicios es la página «Servicios», NO los listados: los
   títulos de Estudios y Permisos dentro de su propio listado siguen a 16. */
.fichas--monitoreos .fichas__titulo,
.fichas--noticias .fichas__titulo,
.indice .fichas__titulo{font-size:calc(var(--t-m) + 2px)}

.fichas__titulo a{color:inherit}
.fichas__titulo a:hover{text-decoration:underline}

/* ── Tarjetas del índice de Servicios ────────────────────────────────────
 * Marco blanco, foto vertical, sombra corta hacia abajo y el rótulo del
 * servicio montado sobre el borde inferior de la imagen.
 */
.indice{padding-block:var(--sep-seccion)}
.indice{
  position:relative;
  isolation:isolate;
  background:linear-gradient(to bottom,#fff 0%,#f1f1f1 100%);
}
.indice::before,
.indice::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-repeat:no-repeat;
  pointer-events:none;
}
.indice::before{
  background-image:url("../img/servicios-hoja-izq.png");
  background-size:auto 300px;
  background-position:left center;
}
.indice::after{
  background-image:url("../img/servicios-hoja-der.png");
  background-size:auto 150px;
  background-position:right center;
}
.indice > .contenedor{position:relative;z-index:1}
.indice .fichas__lista{gap:24px}
.indice .fichas__item{
  border:3px solid var(--blanco);
  background:var(--blanco);
  box-shadow:0 4px 8px rgba(0,0,0,.28);
}
.indice .fichas__foto{
  aspect-ratio:3 / 4;
  object-fit:cover;
}
.indice .fichas__caja{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:0;
  width:max-content;
  flex:none;
  transform:translateX(-50%);
}
.indice .fichas__titulo{
  display:block;
  width:max-content;
  max-width:100%;
  min-height:0;
  padding:16px 24px;
  border-radius:var(--radio-acento) var(--radio-acento) 0 0;
  white-space:nowrap;
  line-height:1.2;
}
.indice .color--verde .fichas__titulo{background:var(--azul)}
.indice .color--azul .fichas__titulo{background:var(--lima)}
.indice .color--lima .fichas__titulo{background:var(--verde)}
.indice .fichas__titulo a{
  display:block;
  text-decoration:none;
}
.indice .fichas__titulo a::before{
  content:"›";
  margin-right:5px;
}

/* ── Servicios en FRANJA ─────────────────────────────────────────────────
 * Una imagen apaisada por servicio, dentro de la columna de contenido y no a
 * sangre: es el ancho del texto, así que la página sigue leyéndose como una
 * sola columna en vez de partirse en dos anchos distintos.
 *
 * No llevan enlace ni cursor de mano: son imágenes. Lo único que hace falta
 * es que no se descuadren cuando alguien suba una foto que no sea 1200×340,
 * y de eso se encarga la proporción fija con recorte por el centro.
 * ──────────────────────────────────────────────────────────────────────── */
.franjas__lista{
  margin:0;padding:0;list-style:none;
  display:grid;gap:var(--sep-pieza);
}
/* SIN proporción fija y SIN recorte: la imagen se ve ENTERA, ocupando el
   ancho del contenido y con el alto que le toque. Es un banner que llega ya
   compuesto, así que recortarlo por el centro se comería justo lo que el
   diseño puso en los bordes. La contrapartida, dicha aquí: dos imágenes de
   proporciones distintas dan dos franjas de altos distintos, y eso se ve. */
.franjas__foto{display:block;width:100%;height:auto}
/* Con enlace (07/10) la imagen va dentro de un <a>: en bloque, o queda el
   hueco de la línea de texto debajo de la foto. */
.franjas__enlace{display:block}

/* ── El color de sección ─────────────────────────────────────────────────
 * `color--verde`, `color--azul` y `color--lima` marcan a qué servicio
 * pertenece lo que hay dentro, y valen en cualquier contenedor: el listado
 * entero, una tarjeta suelta del índice o la página de una ficha. Todo lo
 * que va teñido cuelga de aquí, para que la franja y el botón no puedan
 * acabar de colores distintos. */
.color--verde .fichas__titulo{background:var(--verde)}
.color--azul  .fichas__titulo{background:var(--azul-claro)}
.color--lima  .fichas__titulo{background:var(--lima)}

.fichas__caja{display:flex;flex-direction:column;flex:1}

.fichas__texto{
  position:relative;
  padding-top:var(--sep-parrafo);
  font-family:var(--fuente-cond);
  font-size:var(--t-base);
  line-height:var(--li-texto);
  overflow-wrap:break-word;
  color:var(--tinta);
}
/* La línea de puntos que separa columnas. Va centrada en el hueco —de ahí el
   medio hueco negativo— y solo a la altura del TEXTO: en la pantalla no sube
   hasta la franja de color. */
.fichas__texto::before{
  content:"";position:absolute;
  left:calc(var(--fichas-hueco) / -2);
  top:var(--sep-parrafo);bottom:0;
  border-left:1px dashed var(--linea-fuerte);
}
.fichas--tres .fichas__item:nth-child(3n+1) .fichas__texto::before,
.fichas--dos  .fichas__item:nth-child(2n+1) .fichas__texto::before{display:none}

.fichas__mas{margin:var(--sep-parrafo) 0 0}
.fichas__mas .btn{font-size:var(--t-s)}

/* ── Los listados de Estudios y Monitoreos (23/09, lo pidió el cliente) ──
 * Los dos a tres columnas, y la fila que no se llena va CENTRADA: con cinco
 * tarjetas, las dos últimas quedan en medio y no pegadas a la izquierda. Una
 * rejilla no sabe centrar una fila incompleta, así que aquí es flex con el
 * ancho de cada columna calculado a mano.
 * Títulos en versales y a peso normal. El índice de la página Servicios NO
 * lleva `.fichas--listado` y sigue como estaba. */
.fichas--listado .fichas__lista{
  display:flex;flex-wrap:wrap;justify-content:center;
}
.fichas--listado .fichas__item{
  flex:0 0 calc((100% - 2 * var(--fichas-hueco)) / 3);
}
/* Un punto por debajo de lo que tenían (23/09): 15 px en Estudios y 17 en
   Monitoreos, que conserva su excepción de dos puntos más. */
.fichas--listado .fichas__titulo{font-size:calc(var(--t-m) - 1px)}
.fichas--listado.fichas--monitoreos .fichas__titulo{font-size:calc(var(--t-m) + 1px)}
.fichas--listado .fichas__titulo{
  font-weight:var(--peso-normal);
  text-transform:uppercase;
  letter-spacing:.03em;
}

/* ── El botón de sección ─────────────────────────────────────────────────
 * Del mismo color que su franja, en TODAS partes: en el «Leer más» de una
 * ficha, en el «Ver Estudios» del índice y en el «Volver a» de la página de
 * un servicio. Un visitante que entra en Monitoreos ve azul de principio a
 * fin, y en Estudios verde.
 *
 * Se escribe aquí, pegado al color de la franja, para que nadie cambie uno y
 * se olvide del otro. */
.btn--seccion{
  border-radius:var(--radio-acento);
  background:var(--verde);border-color:var(--verde);color:#fff;
}
.color--verde .btn--seccion{background:var(--verde);border-color:var(--verde)}
.color--azul  .btn--seccion{background:var(--azul-claro);border-color:var(--azul-claro)}
.color--lima  .btn--seccion{background:var(--lima);border-color:var(--lima)}

/* El viraje sigue la regla del sitio —todo vira a azul— salvo el que ya es
   azul, que vira a verde. */
.btn--seccion:hover,
.btn--seccion:focus,
.color--verde .btn--seccion:hover,
.color--verde .btn--seccion:focus,
.color--lima .btn--seccion:hover,
.color--lima .btn--seccion:focus{background:var(--azul);border-color:var(--azul)}
.color--azul .btn--seccion:hover,
.color--azul .btn--seccion:focus{background:var(--verde);border-color:var(--verde)}

/* ══ LA BANDA EN DIAGONAL ══════════════════════════════════════════════
 * La composición de fotos llega montada desde diseño —las diagonales van
 * dentro de la imagen y por eso se escalan con ella—, y el bloque de color
 * se monta encima con el mismo corte. El texto sigue siendo texto.
 * ══════════════════════════════════════════════════════════════════════ */

.banda{position:relative;overflow:hidden;background:var(--verde)}
.banda__fotos img{display:block;width:100%;height:auto}

.banda__rotulo{
  position:absolute;top:0;bottom:0;right:0;
  width:38%;
  display:flex;align-items:center;
  padding:var(--sep-bloque) var(--aire);
  background:var(--verde);
  /* El mismo ángulo del resto del sitio, con el corte hacia la izquierda. */
  clip-path:polygon(26% 0,100% 0,100% 100%,0 100%);
}
.banda__texto{
  margin:0;
  flex:1;
  /* El aire de la izquierda tiene que dejar pasar el corte, o la diagonal se
     come la primera letra de cada línea.
     ⚠ Va en el TEXTO y no en el bloque: un porcentaje de `padding` se calcula
     sobre el ancho del PADRE, así que puesto en el bloque el 26 % era el 26 %
     de la banda entera —el doble de lo que hacía falta— y el rótulo se salía
     por la derecha sin que el desbordamiento se notara, porque la banda lo
     recorta. Aquí el padre es el bloque, que es contra lo que corta el
     clip-path. */
  padding-left:28%;
  font-family:var(--fuente);
  /* Es un rótulo, no un titular de sección: crece con la banda para que se
     lea desde lejos, y se para en 44 px. */
  font-size:clamp(20px,3vw,44px);
  font-weight:var(--peso-fino);
  line-height:var(--li-titulo);
  color:#fff;
  text-align:right;
}
.banda__texto b{font-weight:var(--peso-fuerte);color:var(--lima)}

/* ══ LA PÁGINA DE UN SERVICIO ══════════════════════════════════════════
 *
 * Se lee de arriba abajo: la foto, la entradilla, el texto, lo que puedes
 * llevarte y a dónde seguir. La columna de texto no pasa de 760 px porque
 * una línea de 1140 no se sigue con la vista.
 * ══════════════════════════════════════════════════════════════════════ */

.ficha{max-width:900px}

.ficha__foto{
  margin:0 0 var(--sep-bloque);
}
.ficha__foto img{
  display:block;width:100%;height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
}

/* La entradilla: el resumen de la tarjeta, en grande, haciendo de entrada al
   texto. Solo sale si el texto largo es OTRO — si no, se estaría repitiendo
   el mismo párrafo dos veces seguidas. */
.ficha__entradilla{
  margin:0 0 var(--sep-parrafo);
  max-width:760px;
  font-family:var(--fuente-cond);
  font-size:var(--t-l);
  line-height:var(--li-corto);
  color:var(--tinta-media);
}

.ficha__cuerpo{
  max-width:760px;
  font-family:var(--fuente-cond);
  font-size:var(--t-m);
  line-height:var(--li-texto);
  overflow-wrap:break-word;
  color:var(--tinta);
}
.ficha__cuerpo p{margin-bottom:var(--sep-parrafo)}
.ficha__cuerpo p:last-child{margin-bottom:0}

/* ── La descarga ─────────────────────────────────────────────────────────
 * Con el peso a la vista: quien está con datos móviles decide antes de
 * pulsar, y es la diferencia entre un enlace honesto y una sorpresa de 8 MB.
 */
.descarga{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:var(--sep-pieza);
  margin-top:var(--sep-bloque);
  padding:var(--sep-pieza);
  background:var(--hueso);
  border-left:4px solid var(--lima);
}
.descarga__icono{flex:none;display:flex;color:var(--verde)}
.descarga__icono svg{width:34px;height:34px}
.descarga__texto{flex:1 1 220px;min-width:0}
.descarga__titulo{
  margin:0;
  font-family:var(--fuente);
  font-size:var(--t-m);
  font-weight:var(--peso-fuerte);
  line-height:var(--li-corto);
  color:var(--tinta-fuerte);
}
.descarga__nota{
  margin:2px 0 0;
  font-family:var(--fuente);
  font-size:var(--t-s);
  color:var(--tinta-suave);
}
.descarga__boton{margin:0;flex:none}
.btn__icono{width:17px;height:17px;margin-right:8px}

.ficha__volver{margin:var(--sep-bloque) 0 0}

/* ══ EL LISTADO DE NOTICIAS ════════════════════════════════════════════
 *
 * Una fila por noticia, una debajo de otra: foto a la izquierda y título a
 * la derecha, centrado respecto a la foto. Nada más — lo pidió el cliente
 * el 18/09 y eso incluye quitar la bajada y el botón.
 *
 * ⚠ OJO con el nombre: `.noticias__` (plural) es ESTE listado; `.noticia__`
 * (singular), más abajo, es la página de una noticia. Se parecen en el
 * fichero y no tienen nada que ver.
 *
 * Antes era la rejilla de tres de `.fichas`. Se le hizo componente propio en
 * vez de otro modificador porque ya no comparte NADA con las fichas de
 * servicio: ni columnas, ni franja de color, ni texto, ni botón. Un
 * `.fichas--noticias` que redefine todo eso es más difícil de leer que
 * veinte líneas propias.
 * ══════════════════════════════════════════════════════════════════════ */

.noticias{background:var(--hueso)}

.noticias__lista{
  display:grid;
  gap:var(--sep-bloque);
  margin:0;padding:0;list-style:none;
}

.noticias__item{
  display:grid;
  grid-template-columns:minmax(0,var(--noticias-foto)) minmax(0,1fr);
  gap:var(--sep-bloque);
  align-items:center;           /* el texto, al centro de la foto */
  min-width:0;
}
.noticias__marco{display:block;overflow:hidden}
/* Sin foto: bloque verde de marca con la MISMA proporción que las fotos,
   para que la fila no se descuadre (23/09, lo pidió el cliente). */
.noticias__marco--vacio{aspect-ratio:3 / 2;background:var(--verde)}
/* Proporción fija y recorte por el centro: WordPress ya sirve la foto
   recortada a 3:2, pero esto es lo que aguanta el día que alguien suba una
   vertical — sin ello, una sola foto rara descuadra su fila. */
.noticias__foto{
  display:block;width:100%;height:auto;
  aspect-ratio:3 / 2;
  object-fit:cover;
}

.noticias__titulo{
  margin:0;
  font-family:var(--fuente);
  /* Dos puntos por encima del título de sección: aquí el título ES la
     noticia. No hay bajada ni botón que lo acompañen, así que si no pesa,
     la fila se queda vacía. */
  font-size:calc(var(--t-l) + 2px);
  font-weight:var(--peso-fuerte);
  line-height:var(--li-titulo);
  color:var(--tinta-fuerte);
  /* El único texto del sitio que NO se justifica aunque ocupe dos líneas:
     es un título, y justificar dos líneas de título abre un río en medio. */
  text-align:left;
}
.noticias__titulo a{color:inherit}
.noticias__titulo a:hover,
.noticias__titulo a:focus{color:var(--verde)}

/* Debajo del título, como en la referencia del cliente (07/10): el extracto,
   la fecha y la firma. El extracto se corta a tres líneas para que una
   noticia con un resumen largo no descuadre su fila contra la foto. */
.noticias__extracto{
  margin:var(--sep-linea) 0 0;
  font-family:var(--fuente-cond);
  font-size:var(--t-m);
  line-height:var(--li-texto);
  color:var(--tinta);
  text-align:left;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.noticias__fecha{
  margin:var(--sep-linea) 0 0;
  font-size:var(--t-s);
  color:var(--tinta-suave);
}
.noticias__autor{
  margin:4px 0 0;
  font-size:var(--t-s);
  font-weight:var(--peso-fuerte);
  color:var(--tinta-fuerte);
}

/* ══ NOTICIAS ══════════════════════════════════════════════════════════
 *
 * El banner con el título dentro, la noticia con su foto flotando, el panel
 * de las otras y la franja verde de redes.
 * ══════════════════════════════════════════════════════════════════════ */

.noticia__titulo{
  margin:0 0 var(--sep-linea);
  font-family:var(--fuente);
  font-size:var(--t-xl);
  font-weight:var(--peso-fuerte);
  line-height:var(--li-titulo);
  color:var(--tinta-fuerte);
}
.noticia__titulo a{color:inherit}
.noticia__titulo a:hover{color:var(--verde)}

.noticia__firma{
  /* Hasta la foto (o el texto), el aire de una pieza y no el de un bloque:
     con 55 px la foto quedaba suelta entre la firma y el texto (07/10). */
  margin:0 0 var(--sep-pieza);
  font-size:var(--t-s);
  color:var(--tinta-suave);
}
.noticia__firma-sep{margin-inline:8px}
.noticia__autor{font-weight:var(--peso-fuerte);color:var(--tinta-fuerte)}

.noticia__bajada{
  margin:0 0 var(--sep-parrafo);
  font-family:var(--fuente-cond);
  font-size:var(--t-l);
  font-style:italic;
  line-height:var(--li-corto);
  color:var(--tinta-media);
}

.noticia__cuerpo{
  font-family:var(--fuente-cond);
  font-size:var(--t-m);
  line-height:var(--li-texto);
  overflow-wrap:break-word;
}
.noticia__cuerpo p{margin-bottom:var(--sep-parrafo)}
/* El último bloque del texto no deja margen: el aire hasta lo que sigue lo
   pone la sección, una sola vez. */
.noticia__cuerpo > :last-child{margin-bottom:0}

/* Banner propio de la noticia, independiente de la imagen destacada. */
.noticia__banner{margin:0 0 var(--sep-pieza)}
.noticia__banner img{display:block;width:100%;height:auto}

/* Dos fotos cuadradas, juntas al 75 % del ancho de lectura. El archivo
   original se abre en el visor con object-fit:contain, sin recortarlo. */
.noticia__principal{background:var(--blanco)}
.noticia__fotos{background:linear-gradient(to bottom,#fff 0%,#f1f1f1 100%)}
/* Texto y fotos son dos secciones, pero entre ellas va UN solo espacio, no
   el cierre de una más la apertura de la otra (07/10, pedido del cliente).
   El degradado de las fotos arranca en blanco, así que el corte no se ve. */
.noticia__principal:has(+ .noticia__fotos){padding-bottom:0}
.noticia__galeria{
  width:75%;margin:0 auto;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sep-pieza);
}
.noticia__foto{
  display:block;width:100%;aspect-ratio:1/1;padding:0;overflow:hidden;
  border:0;background:var(--gris-claro);cursor:zoom-in;
}
.noticia__foto img{display:block;width:100%;height:100%;object-fit:cover}
.noticia__visor{
  position:fixed;inset:0;z-index:10000;display:grid;place-items:center;
  padding:4vw;background:rgba(0,0,0,.88);cursor:zoom-out;
}
.noticia__visor[hidden]{display:none}
.noticia__visor img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.noticia__visor-cerrar{
  position:absolute;top:16px;right:22px;border:0;background:transparent;color:#fff;
  font:inherit;font-size:2.5rem;line-height:1;cursor:pointer;
}
@media(max-width:700px){.noticia__galeria{width:100%;gap:var(--sep-pieza)}}

/* ── El panel de otras noticias ─────────────────────────────────────────
 * Recuadro con filete lima y esquinas redondeadas: es la única pieza
 * redondeada del sitio, y viene de la pantalla de Noticias. */
.otras__panel{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sep-bloque);
  margin:0;padding:var(--sep-pieza);
  list-style:none;
  border:2px solid var(--lima);
  border-radius:var(--panel-radio);
  background:var(--blanco);
}
.otras__item{position:relative;min-width:0;display:flex;flex-direction:column}
/* La línea de puntos entre las dos, como entre las fichas de servicio. */
.otras__item + .otras__item::before{
  content:"";position:absolute;
  left:calc(var(--sep-bloque) / -2);
  top:0;bottom:0;
  border-left:1px dashed var(--linea-fuerte);
}

.otras__titulo{
  margin:0 0 var(--sep-parrafo);
  display:flex;align-items:center;
  min-height:var(--fichas-barra);
  padding:10px 16px;
  background:var(--verde);
  font-family:var(--fuente);
  font-size:var(--t-m);
  font-weight:var(--peso-fuerte);
  line-height:var(--li-titulo);
  color:#fff;
}
.otras__titulo a{color:inherit}
.otras__titulo a:hover{text-decoration:underline}

.otras__bajada{
  margin:0;
  font-family:var(--fuente-cond);
  font-size:var(--t-base);
  line-height:var(--li-texto);
  overflow-wrap:break-word;
  color:var(--tinta);
}
/* El botón se pega abajo: con textos de distinto largo, si no, cada uno cae
   a una altura y la fila se lee rota. */
.otras__mas{margin-top:auto;padding-top:var(--sep-parrafo);text-align:right}
.otras__mas .btn{font-size:var(--t-s)}

/* ── Síguenos en: (23/09, pantalla del cliente) ───────────────────────
 * Sección a todo el ancho con fondo blanco —no un recuadro dentro de un
 * fondo gris, que fue la primera versión—: el texto, los logotipos a color
 * y dos publicaciones con aspecto de post de Instagram. El CONTENIDO sí se
 * queda en 760 px: a todo el contenedor, dos posts cuadrados medirían más de
 * 500 px cada uno. Sustituye a la franja verde de «Conoce más en nuestras
 * redes».
 * ──────────────────────────────────────────────────────────────────────── */
.siguenos{background:var(--blanco)}
/* Sin tope propio (antes 760 px): desde el 30/09 las tres publicaciones
   ocupan todo el ancho del contenido. Texto y logotipos van centrados. */
.siguenos__panel{text-align:center}
.siguenos__texto{
  margin:0 0 var(--sep-linea);
  font-family:var(--fuente-cond);
  font-size:var(--t-xl);
  font-weight:var(--peso-fino);
  color:var(--tinta);
}
.siguenos__redes{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--sep-linea) 44px;
  margin:0 0 var(--sep-pieza);padding:0;list-style:none;
}
/* Sin publicaciones, los logotipos cierran la sección: sin su margen. */
.siguenos__redes:last-child{margin-bottom:0}
.siguenos__redes a{display:block}
.siguenos__logo{display:block;width:40px;height:40px}

.siguenos__posts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sep-pieza);
  margin:0;padding:0;list-style:none;
  text-align:left;
}
.siguenos__post{min-width:0}
.siguenos__post > a{display:block;color:inherit}
/* Cuadrada, como un post. Recorta por el centro si llega en 4:5. */
.siguenos__foto{
  display:block;width:100%;height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
}
/* Las dos barras del post: decorado, no controles. */
.siguenos__barra{
  display:flex;align-items:center;gap:12px;
  padding-block:8px;
  color:var(--tinta-fuerte);
}
.siguenos__barra--arriba{justify-content:flex-end;padding-block:0 6px}
.siguenos__barra svg{display:block;width:20px;height:20px}
.siguenos__guardar{margin-left:auto}

/* ── El buscador ────────────────────────────────────────────────────── */

.buscador{
  display:flex;flex-wrap:wrap;gap:var(--sep-linea);
  margin:var(--sep-parrafo) 0 0;
  max-width:520px;
}
.buscador__campo{
  flex:1 1 220px;
  min-height:var(--tactil);
  padding:10px 14px;
  border:1px solid var(--linea-fuerte);
  font-family:var(--fuente-cond);
  font-size:var(--t-base);
  color:var(--tinta);
}
.buscador__campo:focus{border-color:var(--verde);outline:2px solid transparent;box-shadow:0 0 0 2px rgba(39,131,64,.25)}

/* ── Paginación ─────────────────────────────────────────────────────── */

.pagination{padding-block:0 var(--sep-seccion)}
.nav-links{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  font-family:var(--fuente);font-size:var(--t-base);
}
.nav-links .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--tactil);min-height:var(--tactil);
  padding:0 12px;
  border:1px solid var(--linea);
  color:var(--tinta-fuerte);
}
.nav-links .page-numbers:hover{border-color:var(--verde);color:var(--verde)}
.nav-links .page-numbers.current{background:var(--verde);border-color:var(--verde);color:#fff}

/* ══ CONTÁCTANOS ═══════════════════════════════════════════════════════
 *
 * Los tres datos en fila y, debajo, el mapa a un lado y el formulario al
 * otro: la estructura de la página de hoy, que para esto funciona mejor que
 * nada nuevo — se ve todo de una vez, sin bajar.
 * ══════════════════════════════════════════════════════════════════════ */

.datos__lista{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;                        /* el hueco hace de filete entre cajas */
  margin:0;padding:0;list-style:none;
  background:var(--linea);
}
.datos__caja{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--sep-linea);
  padding:var(--sep-pieza) var(--aire);
  background:var(--celeste);
  text-align:center;
}
.datos__icono{display:block;color:var(--lima)}
.datos__icono svg{width:42px;height:42px}
.datos__rotulo{
  margin:0;
  font-family:var(--fuente);
  font-size:var(--t-l);
  font-weight:var(--peso-fuerte);
  line-height:var(--li-titulo);
  text-transform:uppercase;
  color:var(--verde);
}
.datos__valor{
  margin:0;
  font-family:var(--fuente-cond);
  font-size:var(--t-m);
  line-height:var(--li-corto);
  color:var(--tinta);
}
.datos__valor a:hover{color:var(--verde)}

.datos__entrada{
  margin-top:var(--sep-pieza);
  max-width:820px;
  font-family:var(--fuente-cond);
  font-size:var(--t-m);
  line-height:var(--li-texto);
  color:var(--tinta);
}

/* ── El mapa, a todo el ancho del contenido ──────────────────────────── */

/* El aire entre los datos y el mapa es de BLOQUE, no de sección: son dos
   partes de la misma página de contacto.
   Hasta el 07/10 compartía la fila con un formulario; el cliente lo quitó
   porque el del pie queda justo debajo. */
.contacto__mapa{margin-top:var(--sep-bloque)}

/* Proporción fija y sin alto en píxeles: así no hay que tocarlo cuando
   cambia el ancho. Apaisada, que a todo el ancho un 4:3 pasaba de 800 px. */
.mapa__marco{
  position:relative;
  aspect-ratio:21 / 9;
  background:var(--hueso-hondo);
}
.mapa__marco iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;display:block;
}

/* ══ TRABAJA CON NOSOTROS ══════════════════════════════════════════════
 *
 * Tarjetas, no lista. Con varias convocatorias seguidas, los filetes y la
 * línea de puntos hacían dudar de dónde acababa una y empezaba la siguiente;
 * un borde alrededor de cada una no deja lugar a dudas.
 * ══════════════════════════════════════════════════════════════════════ */

.post-type-archive-biota_puesto .puestos{
  background:linear-gradient(to bottom,#fff 0%,#f1f1f1 100%);
}

.puestos__lista{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sep-pieza);
  margin:0;padding:0;list-style:none;
}
.puestos__item{
  display:flex;flex-direction:column;
  min-width:0;
  padding:var(--sep-pieza);
  background:var(--blanco);
  border:1px solid var(--linea);
  border-top:4px solid var(--verde);
}

.puestos__cargo{
  margin:0 0 var(--sep-linea);
  font-family:var(--fuente);
  font-size:var(--t-l);
  font-weight:var(--peso-fuerte);
  line-height:var(--li-titulo);
  color:var(--verde);
}
.puestos__cargo a{color:inherit}
.puestos__cargo a:hover{color:var(--azul)}

.puestos__datos{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:0 0 var(--sep-linea);
}
.puestos__codigo,
.puestos__modalidad{
  display:inline-flex;align-items:center;
  padding:3px 10px;
  font-family:var(--fuente);
  font-size:var(--t-s);
  font-weight:var(--peso-medio);
  line-height:1.3;
}
.puestos__codigo{background:var(--hueso-hondo);color:var(--tinta-fuerte)}
.puestos__modalidad{background:var(--celeste);color:var(--azul)}

.puestos__resumen{
  margin:0;
  font-family:var(--fuente-cond);
  font-size:var(--t-m);
  line-height:var(--li-texto);
  color:var(--tinta);
}
/* El botón se pega abajo: con resúmenes de distinto largo, si no, cada uno
   cae a una altura y la fila se lee rota. */
.puestos__mas{margin:var(--sep-parrafo) 0 0;padding-top:0}
.puestos__item .puestos__mas{margin-top:auto;padding-top:var(--sep-parrafo)}
.puestos__mas .btn{font-size:var(--t-s)}

/* ── La convocatoria ────────────────────────────────────────────────── */

.puesto__datos{
  display:flex;flex-wrap:wrap;gap:var(--sep-linea);
  margin:0 0 var(--sep-linea);
}
.puesto__dato{
  display:inline-flex;align-items:center;
  padding:4px 12px;
  background:var(--hueso-hondo);
  font-family:var(--fuente);
  font-size:var(--t-s);
  font-weight:var(--peso-medio);
  color:var(--tinta-fuerte);
}

/* Cómo postular: el bloque que cierra la convocatoria. Filete lima a la
   izquierda, que es como el sitio señala lo que hay que leer sí o sí. */
.postular{
  margin-top:var(--sep-bloque);
  padding:var(--sep-pieza);
  background:var(--hueso);
  border-left:4px solid var(--lima);
}
.postular__titulo{
  margin:0 0 var(--sep-linea);
  font-family:var(--fuente);
  font-size:var(--t-l);
  font-weight:var(--peso-fuerte);
  color:var(--verde);
}
.postular__texto{
  font-family:var(--fuente-cond);
  font-size:var(--t-m);
  line-height:var(--li-texto);
  color:var(--tinta);
}
.postular__texto a{color:var(--azul);text-decoration:underline}
.postular__texto a:hover{color:var(--verde)}
.postular__boton{margin:var(--sep-parrafo) 0 0}

/* ══ PIE ═══════════════════════════════════════════════════════════════ */

.pie{
  position:relative;
  background:var(--verde);
  color:#fff;
  overflow:hidden;
  padding-block:var(--sep-bloque);
}
.pie__rejilla{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--sep-bloque);
  align-items:start;
}

.pie__marca{text-align:center}
.pie__logo{margin:0 auto var(--sep-parrafo);max-width:210px}

.pie__datos{
  margin:0 0 var(--sep-parrafo);padding:0;list-style:none;
  display:inline-block;text-align:left;
  font-family:var(--fuente);
  font-size:var(--t-s);
  font-weight:var(--peso-fuerte);
  line-height:var(--li-corto);
}
.pie__datos li{display:flex;align-items:flex-start;gap:9px;margin-bottom:var(--sep-linea)}
.pie__datos li:last-child{margin-bottom:0}
.pie__datos svg{width:15px;height:15px;flex:none;margin-top:3px}
.pie__datos a:hover{color:var(--lima)}

.pie__redes{display:flex;gap:var(--sep-linea);justify-content:center;margin:0;padding:0;list-style:none}
.pie__redes a{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--tactil);height:var(--tactil);
}
.pie__redes svg{width:21px;height:21px}
.pie__redes a:hover{color:var(--lima)}

/* El corte entre las dos mitades. NO es una línea, ni un canto: es la sombra
   que la mitad izquierda proyecta sobre la derecha, que es lo que la hace
   leerse levantada por encima. Un degradado estrecho —21 px— oscuro pegado
   al borde y desvanecido hacia dentro: con una línea dura parecerían dos
   piezas a tope, y ancho parece niebla en vez de sombra.

   Va de arriba abajo del PIE ENTERO, no de la altura del formulario: por eso
   se sale del padding con márgenes negativos en vez de crecer con la
   columna. */
.pie__form{position:relative;padding-left:var(--sep-bloque)}
.pie__form::before{
  content:"";position:absolute;left:0;
  top:calc(var(--sep-bloque) * -1);
  bottom:calc(var(--sep-bloque) * -1);
  width:var(--pie-sombra-ancho);
  background:linear-gradient(to right, var(--pie-sombra-tinta), rgba(0,0,0,0));
  pointer-events:none;
}

.pie-form__titulo{
  font-family:var(--fuente);
  font-size:var(--t-xl);
  font-weight:var(--peso-fuerte);
  line-height:var(--li-titulo);
  color:#fff;
  margin:0 0 var(--sep-linea);
}
.pie-form__regla{display:block;height:3px;background:var(--lima);margin-bottom:var(--sep-parrafo)}

.pie-form__campo{margin:0 0 var(--sep-linea)}
.pie-form__campo input,
.pie-form__campo textarea{
  display:block;width:100%;
  min-height:var(--tactil);
  padding:11px 13px;
  background:transparent;
  border:1px solid rgba(255,255,255,.85);
  color:#fff;
  font-family:var(--fuente-cond);
  font-size:var(--t-base);
  line-height:var(--li-corto);
}
.pie-form__campo textarea{min-height:110px;resize:vertical}
.pie-form__campo input::placeholder,
.pie-form__campo textarea::placeholder{color:rgba(255,255,255,.82)}
.pie-form__campo input:focus,
.pie-form__campo textarea:focus{
  border-color:var(--lima);
  outline:2px solid transparent;
  box-shadow:0 0 0 2px rgba(150,186,49,.45);
}

/* El señuelo va FUERA DE PANTALLA, no oculto: los bots ya se saltan
   display:none, pero rellenan lo que existe. */
.pie-form__trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.pie-form__consent{
  margin:0 0 var(--sep-parrafo);
  font-family:var(--fuente-cond);
  font-size:13px;line-height:var(--li-corto);
}
.pie-form__consent label{display:flex;align-items:flex-start;gap:9px;cursor:pointer}
.pie-form__consent input{margin-top:3px;flex:none;width:17px;height:17px;accent-color:var(--lima)}
.pie-form__consent a{text-decoration:underline}
.pie-form__consent a:hover{color:var(--lima)}

.pie-form__enviar{margin:0}
.pie-form__enviar .btn{min-width:130px}

/* El aviso va pegado al formulario, no suelto arriba de la página. */
.pie-form__aviso{
  margin:0 0 var(--sep-parrafo);
  padding:11px 15px;
  border-left:4px solid var(--lima);
  background:rgba(255,255,255,.14);
  font-family:var(--fuente-cond);
  font-size:var(--t-base);
  line-height:var(--li-corto);
}
.pie-form__aviso--error{border-left-color:#ffcf4d}

/* ── Las hojas del pie ──────────────────────────────────────────────────
 * Ninguna puesta. Se colocan de una en una, y cada una lleva su regla con
 * su tamaño y su inclinación: no hay una regla común que las reparta, que
 * es lo que las haría leerse como un patrón en vez de como hojas sueltas.
 *
 * Van sobre el fondo y DEBAJO del texto (z-index 1 contra el 2 de la
 * rejilla), y sin quedarse con ningún clic.
 * ────────────────────────────────────────────────────────────────────── */
.pie__hoja{
  position:absolute;z-index:1;
  width:auto;height:auto;
  pointer-events:none;
  user-select:none;
}

/* 1 · esquina de abajo a la izquierda del todo, pegada a los dos bordes. */
.pie__hoja--1{left:0;bottom:0;width:var(--pie-hoja-1)}

/* 2 · esquina de abajo a la derecha, PEGADA a los dos bordes. */
.pie__hoja--2{right:0;bottom:0;width:var(--pie-hoja-2)}

/* 5 · sobre la 1, en el mismo borde izquierdo. Va un escalón por encima:
   las dos pegadas al suelo se leerían como una sola mancha. */
.pie__hoja--5{left:0;bottom:85px;width:var(--pie-hoja-5)}

/* 4 · esquina de abajo del lado IZQUIERDO: su borde derecho toca el corte y
   el de abajo, el suelo del pie. Misma cuenta que la 5, del otro lado. */
.pie__hoja--4{
  right:calc(50% - var(--sep-bloque) / 2);
  bottom:0;
  width:var(--pie-hoja-4);
}

/* 3 · esquina de arriba del lado derecho, pegada al corte y al borde.
   El corte cae en el centro del pie más medio hueco de la rejilla —las dos
   columnas son iguales y el contenedor está centrado—, así que sale de la
   misma separación que las separa, no de un número a ojo.
   Queda DEBAJO de la sombra: la rejilla, que es quien la lleva, va en el 2 y
   las hojas en el 1. */
.pie__hoja--3{
  left:calc(50% + var(--sep-bloque) / 2);
  top:0;
  width:var(--pie-hoja-3);
}

.creditos{
  background:var(--azul);
  color:#fff;
  text-align:center;
  padding-block:9px;
  font-family:var(--fuente);
  font-size:13px;
}
.creditos__sep{margin-inline:8px;opacity:.55}
/* Subrayado desde el principio: es un enlace legal, y uno que solo se ve al
   pasar por encima es un enlace que en móvil no existe. */
.creditos__enlace{text-decoration:underline;text-underline-offset:3px}
.creditos__enlace:hover,
.creditos__enlace:focus{color:var(--lima)}

/* ══ TEXTO LEGAL ═══════════════════════════════════════════════════════
 *
 * Una política de privacidad se lee de arriba abajo, entera y con desgana.
 * Lo único que puede hacer el diseño por ella es no estorbar: columna más
 * estrecha que el resto del sitio —65 caracteres, que es lo que el ojo
 * sigue sin perder la línea—, sus títulos claramente por encima del párrafo
 * y aire de sobra entre bloques. Nada de cajas ni de columnas.
 * ════════════════════════════════════════════════════════════════════ */
.legal{max-width:68ch}
.legal__entrada{
  font-size:var(--t-m);
  line-height:var(--li-texto);
  color:var(--tinta);
  margin:0 0 var(--sep-bloque);
}
.legal h2{
  font-family:var(--fuente);
  font-size:var(--t-l);
  font-weight:var(--peso-fuerte);
  color:var(--verde);
  margin:var(--sep-bloque) 0 var(--sep-parrafo);
}
/* El primero no necesita separarse de nada: ya viene de la entradilla. */
.legal h2:first-of-type{margin-top:0}
.legal p{margin:0 0 var(--sep-parrafo)}
.legal ul{margin:0 0 var(--sep-parrafo);padding-left:1.2em}
.legal li{margin-bottom:calc(var(--sep-parrafo) / 2)}
.legal b{font-weight:var(--peso-fuerte)}
.legal a{color:var(--verde);text-decoration:underline;text-underline-offset:3px}
.legal a:hover,
.legal a:focus{color:var(--lima)}
.legal__fecha{
  margin-top:var(--sep-bloque);
  padding-top:var(--sep-parrafo);
  border-top:1px solid var(--linea);
  font-size:var(--t-s);
  color:var(--tinta-suave);
}
/* El aviso de datos que faltan. Se ve, porque está para verse: mientras esté,
   la política está publicada a medias. */
.legal__aviso{
  margin:0 0 var(--sep-bloque);
  padding:var(--sep-parrafo);
  border-left:4px solid var(--lima);
  background:var(--hueso);
  font-size:var(--t-s);
}

/* ══ RESPONSIVE ════════════════════════════════════════════════════════
 * ⚠ Ninguna pantalla del rediseño es de móvil. Lo que sigue son decisiones
 * por defecto, declaradas en ARQUITECTURA-CONTENIDOS.md §7 y revisables.
 * ══════════════════════════════════════════════════════════════════════ */

@media (max-width:991px){

  /* Los dos decorados superiores desaparecen en responsive. */
  .quienes__decorado--superior-izq,
  .quienes__decorado--superior-der,
  .quienes__decorado--inferior-izq{display:none}

  /* El menú se va al panel. El de la cabecera desaparece y en su sitio queda
     el botón. */
  html.js .menu-boton{display:inline-flex}
  html.js .cabecera__nav .menu{display:none}

  /* Y sin JavaScript, que no hay panel: la misma lista, apilada bajo el
     logotipo. Fea, pero navegable — que es de lo que se trata. */
  html:not(.js) .cabecera__int{flex-wrap:wrap;padding-block:var(--sep-linea)}
  html:not(.js) .cabecera__nav{width:100%}
  html:not(.js) .menu{
    width:100%;
    flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--linea);
  }
  html:not(.js) .menu a{
    padding-block:6px;
    border-bottom:1px solid var(--linea);
  }
  html:not(.js) .menu li:last-child a{border-bottom:0}

  /* ── EL PIE EN UNA COLUMNA ─────────────────────────────────────────
   * Deja de haber izquierda y derecha: hay arriba y abajo. Todo lo que
   * estaba puesto respecto al corte vertical se recoloca, o no se entiende
   * nada. */
  .pie__rejilla{grid-template-columns:1fr;gap:var(--sep-bloque)}

  /* Los datos, a la izquierda. Centrados funcionan en dos columnas
     estrechas; a lo ancho de la pantalla, un correo y una dirección
     centrados se leen mucho peor que alineados. */
  .pie__marca{text-align:left}
  .pie__logo{margin-inline:0}
  .pie__redes{justify-content:flex-start;margin-left:-10px}

  .pie__form{padding-left:0;padding-top:var(--sep-bloque)}
  /* La sombra sigue, pero cae HACIA ABAJO: la mitad de arriba es la que
     ahora está encima. Mismo grosor, girado 90°. */
  .pie__form::before{
    left:calc(var(--aire) * -1);right:calc(var(--aire) * -1);
    top:0;bottom:auto;
    width:auto;height:var(--pie-sombra-ancho);
    background:linear-gradient(to bottom, var(--pie-sombra-tinta), rgba(0,0,0,0));
  }

  /* Y las hojas: SOLO QUEDA LA 2, en la esquina de abajo a la derecha. Las
     otras cuatro estaban puestas respecto al corte o a una mitad que aquí ya
     no existe, y recolocarlas era inventarse una composición distinta para
     una pantalla que ni siquiera está dibujada. Una hoja, y se acabó. */
  .pie__hoja--1,
  .pie__hoja--3,
  .pie__hoja--4,
  .pie__hoja--5{display:none}
  .pie__hoja--2{left:auto;right:0;bottom:0;width:var(--pie-hoja-2)}

  /* ── Servicios ─────────────────────────────────────────────────────
   * Tres columnas no caben: pasan a dos. La línea de puntos cambia de sitio
   * con ellas — separa columnas, y ahora las columnas son otras. */
  .fichas--tres .fichas__lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fichas--tres .fichas__item:nth-child(3n+1) .fichas__texto::before{display:block}
  .fichas--tres .fichas__item:nth-child(2n+1) .fichas__texto::before{display:none}
  .fichas--listado .fichas__item{flex-basis:calc((100% - var(--fichas-hueco)) / 2)}

  /* Contáctanos: los tres datos se apilan, y el mapa gana alto para que
     siga sirviendo en una pantalla más estrecha. */
  .datos__lista{grid-template-columns:minmax(0,1fr)}
  .mapa__marco{aspect-ratio:16 / 9}

  /* Noticias: el panel de dos pasa a una columna y la foto de la noticia
     deja de flotar — a esta anchura, un texto rodeando una foto de media
     columna se parte en tiras de tres palabras. */
  .otras__panel{grid-template-columns:minmax(0,1fr);gap:var(--sep-pieza)}
  .otras__item + .otras__item::before{display:none}
  .otras__panel .otras__item + .otras__item{
    border-top:1px dashed var(--linea-fuerte);
    padding-top:var(--sep-pieza);
  }

  /* La banda: el bloque de color deja de estar encima y baja debajo de las
     fotos, en recto. La diagonal contra una columna de 300 px se come el
     texto, y ninguna pantalla dice qué hacer aquí. */
  .banda__rotulo{
    position:static;width:auto;
    padding:var(--sep-pieza) var(--aire);
    clip-path:none;
  }
  .banda__texto{text-align:left}

}

@media (max-width:575px){
  /* En el teléfono el 16:9 dejaba el mapa en 150 px de alto: inservible. */
  .mapa__marco{aspect-ratio:4 / 3}
  .heroe__botones .btn{flex:1 1 100%}

  /* Una ficha por fila. Y sin línea de puntos: separa columnas, y aquí ya no
     hay columnas que separar. */
  .fichas--tres .fichas__lista,
  .fichas--dos .fichas__lista{grid-template-columns:minmax(0,1fr)}
  .fichas__texto::before{display:none!important}
  .fichas--listado .fichas__item{flex-basis:100%}

  /* El banner, más bajo: a esta anchura la foto no cuenta nada y lo que
     importa es llegar al selector. */
  .banner{min-height:230px}
  /* 🔴 Sin esta línea, la variante BAJA acababa midiendo 230 px en móvil,
     o sea MÁS que los 170 de escritorio: la regla de arriba tiene la misma
     especificidad y va después, así que ganaba ella. Una variante que se
     llama «baja» y es más alta no da ningún error; solo se ve raro. */
  .banner--bajo{min-height:232px}

  /* Una columna: foto arriba, título debajo. */
  .noticias__item{grid-template-columns:minmax(0,1fr);gap:var(--sep-pieza)}

  /* Una convocatoria por fila. */
  .puestos__lista{grid-template-columns:minmax(0,1fr)}
  .siguenos__posts{grid-template-columns:minmax(0,1fr)}
  .siguenos__redes{gap:var(--sep-linea) 28px}
  .selector__op{font-size:var(--t-base);padding:5px 11px}
  .barra__int{gap:var(--sep-linea);font-size:13px}
  .clientes__lista{gap:var(--sep-pieza) 14px}
  .clientes__item{height:58px}
}

/* Quien pide menos movimiento, menos movimiento tiene. */
/* ══ MOVIMIENTO ════════════════════════════════════════════════════════
 *
 * Dos capas con dos relojes. La de INTERFAZ —lo que se toca— por debajo de
 * 300 ms; la de MARCA —lo que se ve una vez por página— entre 0,3 y 0,9 s.
 *
 * Y una pregunta antes de cada regla de aquí: ¿por qué anima esto? Si la
 * respuesta no es «acusa recibo», «evita un salto brusco» o «indica un
 * cambio de estado», la regla sobra. «Se ve bien» no es una razón.
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Lo que se toca ─────────────────────────────────────────────────────
 * Todo hover va detrás de la consulta de puntero: en una pantalla táctil el
 * hover se dispara al tocar y SE QUEDA PEGADO hasta que tocas otra cosa. */
@media (hover:hover) and (pointer:fine){

  /* Las tarjetas que son un bloque cerrado —tienen fondo o borde— se
     levantan un poco. Es lo que dice «esto entero se puede pulsar», que en
     una tarjeta con un enlace dentro no es evidente.
     Las de servicio y las de noticia NO están aquí: no tienen fondo, así
     que levantarlas sería mover un texto suelto sobre el blanco. */
  .puestos__item,
  .datos__caja{
    transition:transform var(--transicion) var(--ease-out),
               box-shadow var(--transicion) var(--ease-out);
  }
  .puestos__item:hover,
  .datos__caja:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 26px rgba(0,0,0,.09);
  }

}

/* La foto de una tarjeta NO se escala en hover. Es la firma más reconocible
   de una plantilla comprada, y encima obliga al navegador a repintar una
   imagen grande. Lo que responde es el texto, que es lo que se lee. */

/* El acuse de recibo al pulsar. Va sin la consulta de puntero a propósito:
   en táctil es justo donde más falta hace, porque no hay hover que confirme
   que el dedo dio donde quería. */
.fichas__item a,
.franjas__enlace,
.puestos__item a,
.clientes__item,
.pie__redes a,
.panel__redes a{transition:transform var(--pulsacion) var(--ease-out),color var(--transicion) ease}
.fichas__item a:active,
.franjas__enlace:active,
.puestos__item a:active,
.pie__redes a:active,
.panel__redes a:active{transform:scale(.97)}

/* El campo del formulario, al recibir el foco. Solo el borde y la sombra:
   nada que cambie el tamaño, o la línea siguiente da un salto. */
.pie-form__form input,
.pie-form__form textarea{
  transition:border-color var(--transicion) ease,box-shadow var(--transicion) ease;
}

/* ── Lo que se ve al bajar ──────────────────────────────────────────────
 * Cada bloque entra UNA vez al asomar: sube 26 px y gana opacidad en 0,75 s
 * con una curva que frena al final — es lo que hace que algo parezca que
 * LLEGA en vez de que aparece.
 *
 * ⚠⚠ La clase `.va-a-entrar` la pone el JAVASCRIPT, nunca el PHP. Si naciera
 * en el marcado y el guion no llegara a ejecutarse —o la página se abriera
 * en una pestaña de fondo, o la leyera un renderizador sin cabeza— la
 * sección se publicaría EN BLANCO. Antes sin animar que invisible, siempre.
 *
 * ⚠ Y va con `animation`, no con `transition`: muchas piezas traen su propia
 * transición abreviada, y esa pone el `transition-delay` del escalonado a
 * cero. Son dos mecanismos y así no se pisan. Con `backwards`, la pieza
 * mantiene su estado inicial durante la espera de su escalón y al terminar
 * vuelve a sus propios estilos, así el hover posterior sigue vivo. */
@keyframes biota-entra{
  from{opacity:0;transform:translateY(26px)}
  to  {opacity:1;transform:none}
}

html.js .va-a-entrar{opacity:0}
html.js .va-a-entrar.esta-dentro{
  opacity:1;
  animation:biota-entra var(--entrada) var(--ease-entrada) backwards;
}
/* El escalón, por hermanas. Tope de cuatro: una lista de veinte tardaría
   dos segundos en acabar de entrar y nadie espera eso. */
html.js .esta-dentro:nth-child(2){animation-delay:var(--entrada-escalon)}
html.js .esta-dentro:nth-child(3){animation-delay:calc(var(--entrada-escalon) * 2)}
html.js .esta-dentro:nth-child(4){animation-delay:calc(var(--entrada-escalon) * 3)}
html.js .esta-dentro:nth-child(n+5){animation-delay:calc(var(--entrada-escalon) * 4)}

/* ── El paso de una página a otra ───────────────────────────────────────
 * Un fundido corto al pulsar un enlace del propio sitio, y el inverso al
 * llegar. Lo pinta el PHP en la cabecera, no el guion: creado después, la
 * página ya se pintó y el blanco aparecería DESPUÉS del contenido, que es
 * justo el parpadeo que se quiere evitar.
 *
 * `pointer-events:none` de cinturón: si por lo que sea se quedara puesto,
 * la página se sigue pudiendo usar. */
.velo{
  position:fixed;inset:0;z-index:999;
  background:var(--blanco);
  opacity:0;pointer-events:none;
  transition:opacity var(--velo) var(--ease-out);
}
html.esta-saliendo .velo{opacity:1}

/* Y la llegada: la página nace tapada y se destapa en el mismo tiempo. Sin
   esto, la salida se fundía a blanco y la página nueva entraba de golpe.
   Va con `animation` para que arranque sola en el primer fotograma, sin
   esperar al guion; la clase la pone el script de la cabecera. */
html.esta-llegando .velo{animation:velo-llega var(--velo) var(--ease-in-out) forwards}
@keyframes velo-llega{from{opacity:1}to{opacity:0}}

@media (prefers-reduced-motion:reduce){
  /* El fundido se queda —es lo que hace legible el cambio— pero el
     acercamiento desaparece. */
  .heroe__foto,.heroe__foto.esta-activa{transform:none}

  /* La entrada de los bloques se apaga entera, pero dejándolos VISIBLES:
     apagar la animación sin quitar la opacidad los dejaría en blanco. */
  html.js .va-a-entrar{opacity:1}
  html.js .va-a-entrar.esta-dentro{animation:none}

  /* Y el velo entre páginas no se pinta: un fundido a pantalla completa es
     de lo que peor sienta a quien tiene sensibilidad al movimiento. */
  .velo{display:none}

  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}