/* Q²tec · La planta, leída
   Orden: fuente, tokens, reinicio, fondo, tipografía, maquetación, cromado,
   piezas, páginas, movimiento, movimiento reducido. Móvil primero. */

/* ---------- fuente ---------- */
@font-face{
  font-family:"Archivo";
  src:url("/assets/fuentes/archivo.woff2") format("woff2");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --lienzo:#E8EAE8;
  --lienzo-alt:#DDE0DE;
  --papel:#F3F4F2;
  --tinta:#1F2020;
  --texto-suave:#4A4F4E;
  --noche:#122A2C;
  --noche-texto:#E8EAE8;
  --noche-suave:#A9B5B4;
  --turquesa:#1A99A2;
  --turquesa-linea:#13868E;
  --turquesa-hondo:#0B646A;
  --turquesa-claro:#5FC4CB;
  --borde:#C6CAC7;
  --borde-fuerte:#7C817E;
  --halo:rgba(243,244,242,.8);

  --fuente:"Archivo", "Arial Narrow", Arial, system-ui, sans-serif;

  --t-display:clamp(2.35rem, 1.3rem + 4.4vw, 4.6rem);
  --t-h2:clamp(1.75rem, 1.2rem + 2.3vw, 3rem);
  --t-h2-grande:clamp(1.9rem, 1.1rem + 3.2vw, 3.6rem);
  --t-h3:clamp(1.15rem, 1rem + .55vw, 1.45rem);
  --t-grande:clamp(1.1rem, 1rem + .35vw, 1.3rem);
  --t-cuerpo:1.0625rem;
  --t-peque:.9375rem;
  --t-mini:.8125rem;

  --margen:clamp(1.25rem, 5vw, 4.5rem);
  --ancho:1240px;
  --seccion:clamp(4.5rem, 3rem + 7vw, 8.5rem);
  --cabecera:4.25rem;
  /* distancia del borde de la ventana al contenedor: para sacar fotos a sangre */
  --canal:max(var(--margen), calc((100vw - var(--ancho)) / 2));

  --suave:cubic-bezier(.22,.61,.36,1);
  --firme:cubic-bezier(.65,0,.35,1);
  --t-rapido:180ms;
  --t-medio:320ms;
  --t-lento:640ms;
}

@media (min-width:1600px){:root{--ancho:1400px}}

/* ---------- reinicio ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--cabecera) + 1rem)}
body{
  margin:0;overflow-x:hidden;overflow-x:clip;
  background:var(--lienzo);color:var(--tinta);
  font-family:var(--fuente);font-size:var(--t-cuerpo);line-height:1.6;font-weight:400;font-stretch:100%;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:rgba(19,134,142,.18);
}
img,picture,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
p,h1,h2,h3,h4,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
address{font-style:normal}
:focus-visible{outline:2px solid var(--turquesa-linea);outline-offset:3px}
.fondo-noche :focus-visible{outline-color:var(--turquesa-claro)}
[hidden]{display:none!important}
.sin-corte{white-space:nowrap}

@view-transition{navigation:auto}

.saltar{
  position:absolute;left:1rem;top:-4rem;z-index:100;
  background:var(--tinta);color:var(--lienzo);padding:.75rem 1rem;text-decoration:none;border-radius:2px;
  transition:top var(--t-rapido) var(--suave);
}
.saltar:focus{top:1rem}
main:focus{outline:none}

/* ---------- la capa de fondo fija: luz que deriva y grano ---------- */
body::before,body::after{content:"";position:fixed;pointer-events:none;z-index:-1}
body::before{
  inset:-20vmax;
  background:
    radial-gradient(38vmax 30vmax at 22% 18%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(34vmax 26vmax at 78% 62%, rgba(26,153,162,.07), transparent 70%);
  animation:deriva 70s ease-in-out -23s infinite alternate;
}
body::after{
  inset:0;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@keyframes deriva{
  from{transform:translate3d(-4vmax,-2vmax,0)}
  to{transform:translate3d(5vmax,4vmax,0)}
}

/* ---------- tipografía ---------- */
h1,h2,h3{font-family:var(--fuente);color:inherit;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:var(--t-display);font-weight:780;font-stretch:112%;line-height:1}
h2{font-size:var(--t-h2);font-weight:720;font-stretch:110%;line-height:1.08}
h3{font-size:var(--t-h3);font-weight:680;font-stretch:104%;line-height:1.32}
p{max-width:68ch;text-wrap:pretty}
strong{font-weight:640}

.enlace{
  color:var(--turquesa-hondo);font-weight:600;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.25em;
  transition:text-decoration-thickness var(--t-rapido) var(--suave), color var(--t-rapido) var(--suave);
}
.enlace:hover{text-decoration-thickness:2px}
.enlace--claro{color:var(--noche-texto);text-decoration-color:var(--turquesa-claro)}

/* ---------- maquetación ---------- */
.limite{width:min(100% - 2 * var(--margen), var(--ancho));margin-inline:auto}
.fondo-lienzo{background:var(--lienzo)}
.fondo-alt{background:var(--lienzo-alt)}
.fondo-noche{background:var(--noche);color:var(--noche-texto)}
.fondo-noche p{color:var(--noche-texto)}
main > section{padding-block:var(--seccion)}

.cabeza-seccion{display:grid;gap:1.1rem;margin-bottom:clamp(2.5rem, 5vw, 4rem)}
.cabeza-seccion p{color:var(--texto-suave);font-size:var(--t-grande)}
@media (min-width:960px){
  .cabeza-seccion{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3rem;align-items:end}
}

/* ---------- botones ---------- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:3rem;padding:.8rem 1.35rem;border-radius:2px;border:1.5px solid transparent;
  font-weight:620;font-stretch:104%;font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer;
  transition:background-color var(--t-rapido) var(--suave), color var(--t-rapido) var(--suave), border-color var(--t-rapido) var(--suave);
  touch-action:manipulation;
}
.boton--primario{background:var(--turquesa-hondo);color:#fff}
.boton--primario:hover{background:#08535A}
.boton--tinta{background:var(--tinta);color:var(--lienzo)}
.boton--tinta:hover{background:#000}
.boton--claro{background:var(--lienzo);color:var(--tinta)}
.boton--claro:hover{background:#fff}

/* ---------- cabecera ---------- */
.cabecera{
  position:sticky;top:0;z-index:30;background:var(--lienzo);
  border-bottom:1px solid var(--borde);
}
.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--cabecera);flex-wrap:wrap}
.cabecera__logo{display:block;flex:none}
.cabecera__logo img{width:118px;height:auto}
.cabecera__nav{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.5rem;padding-block:.5rem}
.cabecera__lista{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.cabecera__lista a{
  display:inline-block;padding:.35rem 0;text-decoration:none;font-weight:520;font-size:.98rem;
  border-bottom:1.5px solid transparent;transition:border-color var(--t-rapido) var(--suave);
}
.cabecera__lista a:hover{border-bottom-color:var(--borde-fuerte)}
.cabecera__lista a[aria-current="page"]{border-bottom-color:var(--turquesa-linea)}
.cabecera__cta{min-height:2.5rem;padding:.55rem 1rem;font-size:.95rem}
.cabecera__menu{display:none}

@media (max-width:899px){
  .js .cabecera__menu{
    display:inline-flex;align-items:center;min-height:44px;padding:.5rem .25rem;background:none;border:0;
    font-weight:600;font-size:1rem;cursor:pointer;
  }
  .js .cabecera__nav{display:none;width:100%;padding:.25rem 0 1.5rem}
  .js .cabecera.abierta .cabecera__nav{display:grid;gap:1rem}
  .js .cabecera__lista{flex-direction:column;gap:0}
  .js .cabecera__lista a{display:block;padding:.8rem 0;font-size:1.15rem;border-bottom:1px solid var(--borde)}
  .js .cabecera__lista a[aria-current="page"]{border-bottom-color:var(--turquesa-linea)}
  .cabecera__nav{width:100%}
  .cabecera__logo{display:flex;align-items:center;min-height:var(--cabecera)}
  .js .cabecera__menu{min-height:var(--cabecera)}
}
@media (min-width:900px){
  .cabecera__logo img{width:132px}
  .cabecera__fila{flex-wrap:nowrap}
}

/* ---------- 404: el código con su marca de lectura, tres salidas y el pie abajo aunque la página sea corta ---------- */
.pagina-404{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.pagina-404 main{flex:1 0 auto;display:grid}
.nf{display:grid;align-content:center}
.nf__rejilla{display:grid;gap:2.5rem;align-items:center}
.nf__codigo{display:flex;align-items:center;gap:.75rem;margin:0 0 1.25rem;font-size:var(--t-peque);font-weight:640;font-stretch:88%;letter-spacing:.04em;color:var(--turquesa-hondo);font-variant-numeric:tabular-nums}
.nf__codigo::before{content:"";flex:none;width:11px;height:11px;border-radius:50%;border:2px solid var(--turquesa-linea)}
.nf h1{max-width:62ch}
.nf__entradilla{margin-top:1.5rem;font-size:var(--t-grande);line-height:1.5;max-width:40rem;color:var(--texto-suave)}
.nf__rutas{display:grid;margin-top:2rem;max-width:30rem;border-top:1px solid var(--borde-fuerte)}
.nf__rutas li{border-bottom:1px solid var(--borde-fuerte)}
.nf__rutas a{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.25rem;padding:.6rem 0;font-weight:600;font-stretch:104%;text-decoration:none;color:var(--tinta);transition:color var(--t-rapido) var(--suave)}
.nf__rutas a::after{content:"";flex:none;width:1.75rem;height:2px;background:var(--turquesa-linea);transform-origin:right;transition:transform var(--t-medio) var(--suave)}
.nf__rutas a:hover{color:var(--turquesa-hondo)}
.nf__rutas a:hover::after{transform:scaleX(1.5)}
.nf__visual{margin:0}
.nf__visual img{width:100%;height:auto}
@media (min-width:960px){.nf__rejilla{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(3rem, 6vw, 6rem)}}

/* ---------- contacto: tres vías (correo, teléfono y ubicación) junto a la foto del interfono ---------- */
.canales{display:grid;border-top:1px solid var(--borde-fuerte)}
.canales li{border-bottom:1px solid var(--borde-fuerte)}
.canal{display:grid;gap:.35rem;padding:1.25rem 0;text-decoration:none;color:var(--tinta)}
.canal__rotulo{display:flex;align-items:center;gap:.7rem;font-size:var(--t-peque);font-weight:600;font-stretch:88%;color:var(--texto-suave)}
.canal__rotulo::before{content:"";flex:none;width:11px;height:11px;border-radius:50%;border:2px solid var(--turquesa-linea);transition:background-color var(--t-rapido) var(--suave)}
.canal__valor{font-size:clamp(1.45rem, 1rem + 1.9vw, 2.3rem);font-weight:700;font-stretch:108%;letter-spacing:-.01em;line-height:1.15;overflow-wrap:anywhere;transition:color var(--t-rapido) var(--suave)}
.canal:hover .canal__valor{color:var(--turquesa-hondo)}
.canal:hover .canal__rotulo::before{background:var(--turquesa-linea)}
.canales__nota{margin-top:1.25rem;font-size:var(--t-peque);color:var(--texto-suave)}
/* ubicación: no es un enlace, así que la dirección va a un cuerpo menor y el mapa es un icono aparte */
.canal--ubicacion{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.canal__valor--direccion{font-size:clamp(1.05rem, .9rem + .6vw, 1.45rem);font-weight:640;font-stretch:104%;line-height:1.3}
.canal__valor--direccion span{display:block}
.canal__mapa{flex:none;display:grid;place-items:center;width:3rem;height:3rem;border:1px solid var(--borde-fuerte);border-radius:2px;color:var(--turquesa-hondo);transition:border-color var(--t-rapido) var(--suave), background-color var(--t-rapido) var(--suave)}
.canal__mapa svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.canal__mapa:hover{border-color:var(--turquesa-hondo);background:var(--papel)}
/* la foto es más alta que los tres canales: se centran entre sí en vez de dejar un hueco abajo */
@media (min-width:960px){.contacto-canales .dos-col{align-items:center}}
.contacto-foto{margin:0}
.contacto-foto img{width:100%;height:auto}

/* ---------- legales: índice fijo al lado, texto a una medida cómoda ---------- */
.legal{padding-top:clamp(1.5rem, 3vw, 2.5rem) !important}
.legal__rejilla{display:grid;gap:2.5rem;align-items:start}
/* sin esto, la tabla de cookies estira la columna y se sale del móvil en vez de desplazarse */
.legal__rejilla > *{min-width:0}
.legal__indice{font-size:var(--t-peque);padding:1.25rem 0;border-top:1px solid var(--borde-fuerte);border-bottom:1px solid var(--borde-fuerte)}
.legal__indice-titulo{font-weight:640;font-stretch:96%}
.legal__indice ol{display:grid;gap:.35rem;margin-top:.75rem}
.legal__indice a{display:inline-block;padding:.15rem 0;color:var(--texto-suave);text-decoration:none}
.legal__indice a:hover{color:var(--turquesa-hondo);text-decoration:underline;text-underline-offset:.2em}
.legal__fecha{margin-top:1.25rem;font-size:var(--t-mini);font-stretch:92%;color:var(--texto-suave)}
.legal__texto{max-width:44rem}
/* el documento viene de markdown: cada h2 abre apartado y es destino de anclas */
.legal__texto h2{font-size:var(--t-h3);margin:2.75rem 0 1rem;padding-top:2.25rem;border-top:1px solid var(--borde);scroll-margin-top:calc(var(--cabecera) + 1.5rem)}
.legal__texto > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal__texto > p:first-child{font-size:var(--t-grande);line-height:1.55;color:var(--texto-suave)}
.legal__texto ul{margin-top:1.1rem}
.legal__texto li{padding-left:1.4rem;position:relative}
.legal__texto li::before{content:"";position:absolute;left:0;top:13px;width:.7rem;height:2px;background:var(--turquesa-linea)}
.legal__texto code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace;font-size:.92em;background:var(--papel);padding:.1rem .3rem;border-radius:2px}
.ficha.ficha--legal{margin:1rem 0}
.tabla-desplazable{overflow-x:auto;margin:1rem 0}
.legal__texto table{width:100%;min-width:28rem;border-collapse:collapse;font-size:var(--t-peque);line-height:1.5}
.legal__texto th,.legal__texto td{padding:.65rem .75rem .65rem 0;border-bottom:1px solid var(--borde);text-align:left;vertical-align:top}
.legal__texto th{font-weight:640;border-bottom-color:var(--borde-fuerte)}
@media (min-width:960px){
  .legal__rejilla{grid-template-columns:15rem minmax(0,1fr);gap:clamp(3rem, 6vw, 6rem)}
  .legal__indice{position:sticky;top:calc(var(--cabecera) + 2rem)}
}

/* ---------- migas ---------- */
.migas{font-size:var(--t-mini);color:var(--texto-suave);font-stretch:90%;margin-bottom:1.5rem}
.migas ol{display:flex;flex-wrap:wrap;gap:.4rem}
.migas li + li::before{content:"/";margin-right:.4rem;color:var(--borde-fuerte)}
.migas a{color:var(--texto-suave)}

/* ---------- servicios: variantes ---------- */
.area__cabeza--ancha{max-width:52rem}
.area__puntos.area__puntos--sin-borde{margin-top:0}
.dos-col--arriba{align-items:start}
.lectura--servicio{width:min(100%, 34rem);margin-inline:auto}
@media (min-width:960px){.lectura--servicio{width:100%}}
.banda{margin:clamp(2.5rem, 5vw, 4rem) 0}
.banda img{width:100%;height:clamp(16rem, 42vw, 34rem);object-fit:cover}
.banda--baja img{height:clamp(14rem, 30vw, 26rem)}
.fondo-alt .banda:last-child{margin-bottom:calc(-1 * var(--seccion))}
.foto-simple img{width:100%;height:auto}
.rota--puntos .rota__celda p{color:var(--tinta);font-size:1.02rem}
.rota--puntos .rota__celda{background:var(--lienzo-alt)}
.par--area .par__lado:last-child{align-self:center}
.visualmente-oculto{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ficha--proyecto > div{padding:.7rem 0}
.galeria{padding-block:0 !important}
.galeria-par{padding-block:var(--seccion)}
.galeria-par figure{margin:0}

/* =================================================================
   LOTE 2 · Sobre, noticias y fichas de proyecto
   ================================================================= */
.fecha{font-size:var(--t-peque);font-stretch:88%;color:var(--texto-suave);font-variant-numeric:tabular-nums}
.categorias{font-size:var(--t-mini);font-stretch:88%;color:var(--texto-suave)}

/* sobre */
.quienes{padding-top:0 !important}
.banda--arriba{margin:0 0 clamp(3rem, 6vw, 4.5rem)}
.quienes__titulo{max-width:22ch;margin-bottom:2rem}
.dos-columnas{max-width:62rem}
.dos-columnas p{margin:0 0 1.1rem;break-inside:avoid;font-size:var(--t-grande);line-height:1.55}
@media (min-width:900px){.dos-columnas{columns:2;column-gap:3.5rem}}

.mvv__titulo{margin-bottom:clamp(2rem, 4vw, 3rem)}
/* Visión: el rótulo va delante, con la raya turquesa, para que no se lea como la firma de una cita */
.cita{margin:0 0 clamp(2.5rem, 5vw, 3.5rem);max-width:54rem}
.cita__rotulo{display:flex;align-items:center;gap:.8rem;margin:0 0 1rem;font-size:var(--t-peque);font-weight:560;font-stretch:88%;letter-spacing:0;color:var(--texto-suave)}
.cita__rotulo::before{content:"";width:2.75rem;height:3px;background:var(--turquesa-linea)}
.cita__texto{margin:0;font-size:clamp(1.5rem, 1rem + 2.2vw, 2.5rem);line-height:1.3;font-weight:640;font-stretch:104%;max-width:none;text-wrap:balance}
.par--mvv h3{margin-bottom:.6rem}
.par--mvv p{color:var(--texto-suave)}

.dos-col--equipo{align-items:start}
.equipo__texto{margin:1.25rem 0 2rem}
.equipo__lista{display:grid;border-top:1px solid var(--borde-fuerte)}
.equipo__lista li{padding:1.25rem 0;border-bottom:1px solid var(--borde-fuerte)}
.equipo__lista h3{margin-bottom:.35rem}
.equipo__lista p{color:var(--texto-suave)}
.retrato{margin:0;max-width:24rem;justify-self:end}
.retrato img{width:100%;height:auto}
.retrato figcaption{margin-top:.9rem;font-size:var(--t-peque);line-height:1.5;color:var(--texto-suave)}
.retrato figcaption .enlace{display:block;width:fit-content;margin-top:.35rem}
.certificaciones h2{margin-bottom:0}

/* noticias */
.destacada__rejilla{position:relative;display:grid;gap:2.5rem;align-items:center}
.destacada__media{margin:0;justify-self:start;max-width:26rem;width:100%}
.destacada__media img{width:100%;height:auto;box-shadow:0 1px 0 var(--borde)}
.destacada__titulo{margin:.6rem 0 1.1rem;font-size:var(--t-h2);max-width:62ch}
.destacada__titulo a{text-decoration:none}
.destacada__titulo a::after{content:"";position:absolute;inset:0}
.destacada__rejilla:hover .destacada__titulo a{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--turquesa-linea);text-underline-offset:.15em}
.destacada__titulo a:hover{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--turquesa-linea);text-underline-offset:.15em}
.destacada__resumen{font-size:var(--t-grande);line-height:1.55;margin-bottom:1rem}
@media (min-width:960px){.destacada__rejilla{grid-template-columns:5fr 7fr;gap:clamp(3rem, 6vw, 5rem)}}

.archivo__anio + .archivo__anio{margin-top:clamp(3rem, 6vw, 4.5rem)}
.archivo__rotulo{font-size:var(--t-h2);font-variant-numeric:tabular-nums;margin-bottom:1.5rem}
.tiempo-v{position:relative;display:grid;gap:0;padding-left:1.6rem;border-left:1.5px solid var(--turquesa-linea)}
.tiempo-v__item{position:relative;display:grid;gap:1.25rem;padding:1.5rem 0;border-bottom:1px solid var(--borde)}
.tiempo-v__item::before{content:"";position:absolute;left:calc(-1.6rem - 6px);top:2.05rem;width:11px;height:11px;border-radius:50%;background:var(--lienzo);border:2px solid var(--turquesa-linea)}
.tiempo-v__titulo{margin:.35rem 0 .6rem}
.tiempo-v__titulo a{text-decoration:none}
.tiempo-v__titulo a::after{content:"";position:absolute;inset:0}
.tiempo-v__item:hover .tiempo-v__titulo a{text-decoration:underline;text-decoration-color:var(--turquesa-linea);text-underline-offset:.2em}
.tiempo-v__titulo a:hover{text-decoration:underline;text-decoration-color:var(--turquesa-linea);text-underline-offset:.2em}
.tiempo-v__resumen{color:var(--texto-suave)}
.tiempo-v__mini img{width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover;object-position:center top;background:#fff}
/* Gráficas con texto (nombre -texto): nunca se recortan, se ven enteras a su proporción */
.tiempo-v__mini img[src*="-texto-"]{height:auto;aspect-ratio:auto;object-fit:contain;object-position:left top;background:none}
@media (min-width:760px){.tiempo-v__mini img[src*="-texto-"]{max-height:13rem}}
@media (min-width:760px){.tiempo-v__item{grid-template-columns:1fr 14rem;gap:2.5rem;align-items:start}}

/* noticia */
.cabeza-pagina.cabeza-noticia{padding-bottom:1.5rem}
.cabeza-pagina .cabeza-noticia__titulo{font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);font-stretch:106%;max-width:26ch;margin:.5rem 0 .9rem;line-height:1.08}
.articulo{padding-top:clamp(1.5rem, 3vw, 2.5rem) !important}
.articulo__rejilla{display:grid;gap:2.5rem;align-items:start}
.articulo__media{margin:0;max-width:34rem}
.articulo__media img{width:100%;height:auto;box-shadow:0 1px 0 var(--borde)}
.prosa p + p,.prosa p + ul,.prosa ul + p{margin-top:1.1rem}
.prosa p,.prosa li{font-size:1.08rem;line-height:1.65;max-width:62ch;text-wrap:pretty}
.prosa ul{display:grid;gap:.65rem;margin-top:1.1rem;padding-left:0}
.prosa li{padding-left:1.4rem;position:relative}
.prosa li::before{content:"";position:absolute;left:0;top:13px;width:.7rem;height:2px;background:var(--turquesa-linea)}
.prosa h2{font-size:var(--t-h3);margin-bottom:1rem}
@media (min-width:960px){.articulo__rejilla{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(3rem, 6vw, 5rem)}.articulo__media{position:sticky;top:calc(var(--cabecera) + 1.5rem)}}

.otras__titulo{margin-bottom:2rem}
.otras__lista{display:grid;gap:2rem}
.otras__mini img{width:100%;height:11rem;object-fit:cover;object-position:center top;background:#fff;margin-bottom:.9rem}
.otras__mini img[src*="-texto-"]{object-fit:contain;object-position:center;background:#fff;padding:.75rem}
.otras__item h3{font-size:1.1rem;margin-top:.3rem}
.otras__item{position:relative}
.otras__item h3 a{text-decoration:none}
.otras__item h3 a::after{content:"";position:absolute;inset:0}
.otras__item:hover h3 a{text-decoration:underline;text-decoration-color:var(--turquesa-linea);text-underline-offset:.2em}
.otras__item h3 a:hover{text-decoration:underline;text-decoration-color:var(--turquesa-linea);text-underline-offset:.2em}
.otras__todas{margin-top:2.5rem}
.js .otras__item:nth-child(2){transition-delay:90ms}
.js .otras__item:nth-child(3){transition-delay:180ms}
@media (min-width:760px){.otras__lista{grid-template-columns:repeat(3, minmax(0,1fr))}}

/* fichas de proyecto */
.proyecto__convocatoria.proyecto__convocatoria--cabeza{margin:0 0 1.25rem;font-size:var(--t-grande);font-stretch:96%}
.grafica{margin:0;max-width:60rem}
.grafica img{width:100%;height:auto;background:#fff}
.grafica__pie{margin-top:.9rem;font-size:var(--t-peque)}
.banda--sola{margin:0}
.visual-proyecto:has(.banda--sola){padding-block:0 !important}
.banda--sola img{height:clamp(18rem, 44vw, 36rem)}
.financiacion__logos--grande{gap:2rem 3rem}
.financiacion__logos.financiacion__logos--grande img{height:clamp(56px, 4vw + 30px, 92px)}
.indice--proyectos .indice__txt{font-size:var(--t-peque);max-width:62ch}
.indice__meta{display:block;font-size:var(--t-mini);font-stretch:88%;color:var(--texto-suave)}
.indice__resumen + .indice__meta{margin-top:.35rem}
.indice__periodo{display:block;margin-top:.2rem;font-size:var(--t-mini);font-stretch:88%;font-variant-numeric:tabular-nums;color:var(--texto-suave)}
.otros-proyectos h2{margin-bottom:2rem}
/* segunda foto: debajo de la ficha, llena la columna que la descripción deja libre */
.ficha-proyecto__foto{margin:2.5rem 0 0}
.ficha-proyecto__foto img{width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover}

/* títulos de proyecto largos: el nombre a cuerpo de titular, el resto más pequeño */
.cabeza-pagina .h1-partido{max-width:none}
.h1-partido__nombre{display:block}
.h1-partido__resto{display:block;margin-top:.7rem;max-width:34ch;font-size:clamp(1.3rem, 1rem + 1.35vw, 2.1rem);font-weight:620;font-stretch:102%;line-height:1.32;letter-spacing:-.005em}

/* esquema de SARA: dibujo de línea (ticket, portales, factura) y los pasos debajo, columna a columna */
.esquema{margin:0;max-width:62rem}
.esquema__dibujo{display:block;width:100%;height:auto;overflow:visible}
.esq-trazo{fill:none;stroke:var(--tinta);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.esq-papel{fill:var(--papel)}
.esq-fino{stroke-width:1.5;stroke:var(--texto-suave)}
.esq-grueso{stroke-width:4}
.esq-acento{fill:none;stroke:var(--turquesa-linea);stroke-linecap:round;stroke-linejoin:round}
.esq-flecha{stroke-width:2.5}
.esq-punto{fill:var(--tinta)}
.esq-caja-acento{fill:rgba(19,134,142,.12);stroke:var(--turquesa-linea);stroke-width:2}
.esq-cursor{fill:var(--tinta);stroke:var(--papel);stroke-width:1.2;stroke-linejoin:round}
.esq-linea{fill:none;stroke:var(--turquesa-linea);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 900ms var(--firme) 350ms}
.esq-nodo{fill:var(--lienzo);stroke:var(--turquesa-linea);stroke-width:2}
.js .esquema[data-entra]:not(.dentro) .esq-linea{stroke-dashoffset:1}
.esquema__pasos{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:0;margin-top:1.25rem}
.esquema__pasos li{padding-right:1rem;font-size:clamp(.95rem, .8rem + .8vw, 1.45rem);font-weight:640;font-stretch:104%;line-height:1.25}
.esquema__num{display:block;margin-bottom:.35rem;font-size:var(--t-mini);font-weight:640;font-stretch:88%;font-variant-numeric:tabular-nums;color:var(--turquesa-hondo)}

/* =================================================================
   PIEZA NUEVA · CAPA DE LECTURA
   Líneas finas que salen de un círculo hueco sobre un equipo y llevan
   a su etiqueta, como las cotas de un plano. Las etiquetas son HTML.
   Datos por marca: --x y --y en % de la foto.
   ================================================================= */
.lectura{position:relative;margin:0}
.lectura__foto{position:relative;aspect-ratio:4/5;background:var(--lienzo-alt);overflow:hidden}
.lectura__foto picture{width:100%;height:100%}
.lectura__foto img{width:100%;height:100%;object-fit:cover}
.lectura__marcas{position:absolute;inset:0;pointer-events:none}
/* el marco: la consultoría estratégica no señala un equipo, rodea la instalación entera */
.lectura__marco{position:absolute;inset:4%;border:1.5px solid var(--turquesa-linea);box-shadow:0 0 0 1.5px var(--halo), inset 0 0 0 1.5px var(--halo);pointer-events:none}
.marca{position:absolute;pointer-events:none}
.marca__linea{position:absolute;background:var(--turquesa-linea);box-shadow:0 0 0 1.5px var(--halo)}
.marca__punto{
  position:absolute;width:13px;height:13px;border-radius:50%;
  border:2px solid var(--turquesa-linea);background:rgba(243,244,242,.28);
  box-shadow:0 0 0 2px var(--halo), inset 0 0 0 1.5px var(--halo);
}
.marca__texto{
  position:absolute;pointer-events:auto;white-space:nowrap;
  font-size:.95rem;font-weight:580;font-stretch:80%;line-height:1.2;letter-spacing:.005em;
  color:var(--tinta);text-decoration:none;padding:.2rem 0;
  border-bottom:1.5px solid transparent;
  transition:border-color var(--t-rapido) var(--suave), color var(--t-rapido) var(--suave);
}
.marca__texto:hover{color:var(--turquesa-hondo);border-bottom-color:currentColor}

/* ---- portada, móvil: etiquetas arriba o abajo de la foto, líneas verticales ---- */
.lectura--heroe{margin-block:5.75rem 6.5rem;margin-inline:calc(-1 * var(--margen))}
.lectura--heroe .marca{left:calc(var(--x) * 1%);width:0}
.lectura--heroe .marca[data-movil^="arriba"]{top:calc(-1 * var(--desfase));height:calc(var(--y) * 1% + var(--desfase))}
.lectura--heroe .marca[data-movil^="abajo"]{top:calc(var(--y) * 1%);bottom:calc(-1 * var(--desfase))}
.lectura--heroe .marca[data-movil$="1"]{--desfase:1.25rem}
.lectura--heroe .marca[data-movil$="2"]{--desfase:2.9rem}
.lectura--heroe .marca[data-movil$="3"]{--desfase:4.55rem}
.lectura--heroe .marca__linea{left:-.75px;width:1.5px;top:0;bottom:0}
.lectura--heroe .marca[data-movil^="arriba"] .marca__linea{transform-origin:bottom}
.lectura--heroe .marca[data-movil^="abajo"] .marca__linea{transform-origin:top}
.lectura--heroe .marca[data-movil^="arriba"] .marca__punto{bottom:-6.5px;left:-6.5px}
.lectura--heroe .marca[data-movil^="abajo"] .marca__punto{top:-6.5px;left:-6.5px}
.lectura--heroe .marca[data-movil^="arriba"] .marca__texto{bottom:100%}
.lectura--heroe .marca[data-movil^="abajo"] .marca__texto{top:100%}
.lectura--heroe .marca--izq .marca__texto{left:-.75px;padding-left:.1rem}
.lectura--heroe .marca--der .marca__texto{right:-.75px;text-align:right}

/* ---- etiquetas en su sitio: junto al círculo, con una línea corta. Todas las anchuras ---- */
.lectura--en-sitio .marca{left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:0;height:0}
.lectura--en-sitio .marca__linea{top:-.75px;height:1.5px;width:1.1rem}
.lectura--en-sitio .marca--izq .marca__linea{left:0;transform-origin:left}
.lectura--en-sitio .marca--der .marca__linea{right:0;transform-origin:right}
.lectura--en-sitio .marca__punto{top:-6.5px;left:-6.5px}
.lectura--en-sitio .marca__texto{
  top:0;transform:translateY(-50%);pointer-events:none;
  background:rgba(243,244,242,.92);padding:.28rem .55rem;border-radius:2px;font-size:.875rem;
}
.lectura--en-sitio .marca--izq .marca__texto{left:1.1rem}
.lectura--en-sitio .marca--der .marca__texto{right:1.1rem}

@media (min-width:1100px){
  /* portada, escritorio: etiquetas en una columna a la izquierda de la foto, líneas horizontales */
  .lectura--heroe{margin:0}
  .lectura--heroe .marca{
    --hueco:2.25rem;
    top:calc((var(--h) - var(--dh)) / 2 + var(--y) * var(--dh) / 100) !important;bottom:auto !important;height:0 !important;
    left:calc(-1 * var(--hueco));width:calc((var(--w) - var(--dw)) / 2 + var(--x) * var(--dw) / 100 + var(--hueco));
  }
  .lectura--heroe .marca--marco{
    top:calc(var(--y) * 1%) !important;
    left:calc(-1 * var(--hueco));width:calc(var(--hueco) + var(--x) * 1%);
  }
  .lectura--heroe .marca[data-movil] .marca__linea{left:0;right:0;width:auto;top:-.75px;bottom:auto;height:1.5px;transform-origin:right}
  .lectura--heroe .marca[data-movil] .marca__punto{right:-6.5px;left:auto;top:-6.5px;bottom:auto}
  .lectura--heroe .marca[data-movil] .marca__texto{
    right:100%;left:auto;top:0;bottom:auto;transform:translateY(-50%);
    padding:.2rem .85rem .2rem 0;text-align:right;
  }
  .lectura--en-sitio .marca__texto{font-size:.9rem}
}

/* =================================================================
   PORTADA
   ================================================================= */
.heroe{padding-block:clamp(2.5rem, 6vw, 4rem) 0}
.heroe__rejilla{display:grid}
.heroe__titular{max-width:62ch}
.heroe__cita{margin-top:1.4rem;max-width:34rem;border-left:2px solid var(--turquesa-linea);padding:.1rem 0 .1rem 1rem}
.heroe__cita p{font-size:var(--t-grande);font-stretch:96%;line-height:1.4;color:var(--texto-suave)}
.heroe__cita footer{margin-top:.35rem;font-size:var(--t-peque);font-stretch:88%;color:var(--texto-suave)}
.heroe__cita cite{font-style:normal}
.heroe__entradilla{margin-top:1.6rem;font-size:var(--t-grande);line-height:1.5;max-width:36rem}
.heroe__accion{margin-top:2rem}

@media (min-width:640px) and (max-width:1099px){
  .lectura--heroe{margin-inline:auto;width:min(100%, 34rem)}
}
@media (min-width:1100px){
  .heroe{padding:0}
  .heroe__rejilla{
    --foto:min(41vw, 44rem);
    grid-template-columns:minmax(0,1fr) var(--foto);
    min-height:calc(100svh - var(--cabecera));
    align-items:center;
  }
  .heroe__texto{padding:3rem 13.75rem 3rem 0}
  .heroe__titular{font-size:clamp(3.4rem, 1.2rem + 3.1vw, 4.5rem);font-stretch:106%;max-width:none}
  /* La foto llena el alto del héroe y se recorta para cubrirlo (object-fit: cover).
     Las cotas se recolocan con la misma cuenta que hace el navegador al recortar:
     tamaño pintado = el mayor entre caja y caja escalada a 4:5, centrado. */
  .heroe__rejilla > .lectura{
    --w:calc(var(--foto) + var(--canal));
    --h:max(calc(100svh - var(--cabecera)), 36rem);
    --dw:max(var(--w), var(--h) * .8);
    --dh:max(var(--h), var(--w) * 1.25);
    align-self:start;height:var(--h);margin-right:calc(-1 * var(--canal));
  }
  .heroe__rejilla > .lectura .lectura__foto{aspect-ratio:auto;width:100%;height:100%}
}

/* ---------- par enfrentado: los dos problemas ---------- */
.par{display:grid;gap:3rem}
.par__titulo{font-size:clamp(1.6rem, 1rem + 2vw, 2.55rem);font-stretch:106%}
.par__texto{margin-top:1.1rem;font-size:var(--t-grande);color:var(--texto-suave);max-width:30rem}
@media (min-width:900px){
  .par{grid-template-columns:1fr 1fr;gap:0}
  .par__lado:first-child{padding-right:clamp(2rem, 5vw, 4.5rem)}
  .par__lado:last-child{padding-left:clamp(2rem, 5vw, 4.5rem);border-left:1px solid var(--borde-fuerte)}
}

/* =================================================================
   PIEZA NUEVA · DIAGRAMA QUE SE CONECTA
   Cinco módulos (silos) que el visitante une a una sola plataforma.
   Estado base: conectado (--p:1). El JS resta: separa y deja conectar.
   ================================================================= */
.respuesta__titulo{font-size:var(--t-h2-grande);max-width:62ch}
.conexion{--p:1;margin-top:clamp(2.5rem, 6vw, 4.5rem)}
/* móvil: bus vertical a la izquierda, un cable horizontal a cada módulo */
.conexion__modulos{position:relative;display:grid;gap:.75rem;padding:0 1.75rem 0 2.25rem}
.conexion__modulos::before{
  content:"";position:absolute;left:0;top:1.6rem;bottom:-2.7rem;width:2px;
  background:var(--turquesa-claro);opacity:calc(.25 + .75 * var(--p));
}
.modulo{
  position:relative;display:grid;gap:.15rem;padding:.9rem 1rem;
  background:rgba(232,234,232,.06);border:1px solid rgba(169,181,180,.45);border-radius:2px;
  transform:translate(calc(var(--dx, 0px) * (1 - var(--p))), calc(var(--dy, 0px) * (1 - var(--p))));
}
.modulo__nombre{font-weight:640;font-stretch:104%;font-size:1.05rem;line-height:1.25}
.modulo__siglas{font-stretch:82%;font-size:var(--t-peque);color:var(--noche-suave);letter-spacing:.02em}
.modulo__cable{
  position:absolute;right:100%;top:1.6rem;width:2.25rem;height:2px;margin-top:-1px;
  background:var(--turquesa-claro);transform-origin:left;transform:scaleX(var(--p));
}
.conexion__bus{display:flex;align-items:center;gap:.7rem;margin-top:1.9rem;max-width:none;opacity:calc(.6 + .4 * var(--p))}
.conexion__bus::before{content:"";flex:none;width:1.4rem;height:2px;background:var(--turquesa-claro)}
.conexion__plataforma{font-weight:720;font-stretch:112%;font-size:1.15rem;color:var(--noche-texto);line-height:1.6}
.conexion__control{margin-top:2.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.conexion__boton{position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}
.conexion__progreso{
  position:absolute;inset:0;background:var(--turquesa-claro);transform-origin:left;
  transform:scaleX(var(--p));opacity:.35;
}
.conexion__rotulo{position:relative}
.conexion__boton[aria-pressed="true"]{background:transparent;color:var(--noche-texto);border-color:rgba(169,181,180,.6);cursor:default}
.conexion__boton[aria-pressed="true"] .conexion__progreso{opacity:0}
.conexion__estado{font-size:var(--t-peque);color:var(--noche-suave)}
.respuesta__enlace{margin-top:2.25rem}

.modulo:nth-child(1){--dx:.9rem;--dy:-.35rem}
.modulo:nth-child(2){--dx:1.7rem;--dy:.25rem}
.modulo:nth-child(3){--dx:.25rem;--dy:.45rem}
.modulo:nth-child(4){--dx:1.35rem;--dy:-.3rem}
.modulo:nth-child(5){--dx:.6rem;--dy:.35rem}

/* escritorio: módulos en fila, cables verticales hasta un bus horizontal */
@media (min-width:900px){
  .conexion__modulos{grid-template-columns:repeat(5, minmax(0,1fr));gap:1rem;padding:0 0 3rem}
  .conexion__modulos::before{left:calc(10% - .4rem - 1px);right:calc(10% - .4rem - 1px);top:auto;bottom:0;width:auto;height:2px}
  .modulo{min-height:6.5rem;align-content:start}
  .modulo__cable{right:auto;left:50%;top:100%;width:2px;height:calc(3rem + 1px);margin:0 0 0 -1px;transform-origin:top;transform:scaleY(var(--p))}
  .conexion__bus{flex-direction:column;gap:.4rem;margin-top:0}
  .conexion__bus::before{width:2px;height:1rem}
  .conexion__control{justify-content:center}
  .respuesta__enlace{text-align:center;max-width:none}
  .modulo:nth-child(1){--dx:-.6rem;--dy:-1.5rem}
  .modulo:nth-child(2){--dx:.5rem;--dy:1.2rem}
  .modulo:nth-child(3){--dx:-.3rem;--dy:-2.1rem}
  .modulo:nth-child(4){--dx:.6rem;--dy:1rem}
  .modulo:nth-child(5){--dx:-.4rem;--dy:-1.2rem}
}

/* ---------- imagen a sangre por un borde ---------- */
.sangrada{display:grid;gap:2.5rem;align-items:center}
.sangrada__media{margin-inline:calc(-1 * var(--margen))}
.sangrada__media img{width:100%;height:clamp(16rem, 60vw, 36rem);object-fit:cover}
.sangrada__texto h2{margin-bottom:1.5rem}
.sangrada__texto p + p{margin-top:1rem}
.sangrada__enlace{margin-top:1.75rem}
@media (min-width:960px){
  .sangrada{grid-template-columns:1fr 1fr;gap:clamp(3rem, 6vw, 6rem)}
  .sangrada--izquierda .sangrada__media{margin-left:calc(-1 * var(--canal));margin-right:0}
  .sangrada--derecha .sangrada__media{order:2;margin-right:calc(-1 * var(--canal));margin-left:0}
  .sangrada__media img{height:clamp(24rem, 42vw, 38rem)}
}

/* ---------- índice con regla ---------- */
.indice{border-bottom:1px solid var(--borde-fuerte)}
.indice__fila{
  position:relative;display:grid;gap:.5rem;padding:1.5rem 0;border-top:1px solid var(--borde-fuerte);
  transition:background-color var(--t-rapido) var(--suave);
}
.indice__tit,.indice__txt{transition:transform var(--t-medio) var(--suave)}
.indice__fila:hover .indice__tit,.indice__fila:hover .indice__txt{transform:translateX(.5rem)}
.indice__tit{font-size:var(--t-h3)}
.indice__tit a{text-decoration:none}
.indice__tit a::after{content:"";position:absolute;inset:0}
.indice__txt{color:var(--texto-suave);max-width:min(44rem, 62ch)}
.indice__fila:hover{background:rgba(243,244,242,.55)}
.indice__fila:hover .indice__tit a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em;text-decoration-color:var(--turquesa-linea)}
.indice__fila:focus-within{background:rgba(243,244,242,.55)}
@media (min-width:900px){
  .indice__fila{grid-template-columns:minmax(14rem, 22rem) 1fr;gap:3rem;align-items:baseline;padding:1.9rem 1rem}
}

/* ---------- retícula rota ---------- */
.rota{display:grid;gap:1px;background:var(--borde-fuerte);border:1px solid var(--borde-fuerte)}
.rota__celda{background:var(--lienzo);padding:1.75rem 1.5rem}
.rota__celda h3{margin-bottom:.6rem}
.rota__celda p{color:var(--texto-suave)}
@media (min-width:760px){
  .rota{grid-template-columns:repeat(6, minmax(0,1fr))}
  .rota__celda{grid-column:span 3;padding:2.25rem 2rem}
  .rota__celda:nth-child(1){grid-column:span 4}
  .rota__celda:nth-child(2){grid-column:span 2}
  .rota__celda:nth-child(1) h3{font-size:var(--t-h2);font-stretch:108%}
}

/* ---------- cinta de sellos ---------- */
.sellos{
  display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:2.25rem 1.5rem;
  margin-top:clamp(2.5rem, 5vw, 3.75rem);align-items:start;
}
.sellos figure{display:grid;gap:.9rem;justify-items:start}
.sellos img{height:84px;width:auto;object-fit:contain;object-position:left top}
.sellos figcaption{font-size:var(--t-peque);line-height:1.35;font-weight:560;font-stretch:96%}
.sellos__alcance{display:block;margin-top:.25rem;font-weight:400;font-stretch:88%;font-size:var(--t-mini);color:var(--texto-suave)}
.sellos__enlace{display:inline-block;border-radius:2px}
@media (min-width:900px){.sellos{grid-template-columns:repeat(3, minmax(0,1fr))}}

/* ---------- colaboradores: lista de nombres ---------- */
.colaboradores__rejilla{display:grid;gap:2.5rem}
.colaboradores__rejilla p{margin-top:1rem;color:var(--texto-suave);font-size:var(--t-grande)}
.nombres{display:grid;border-top:1px solid var(--borde-fuerte)}
.nombres li{
  padding:.9rem 0;border-bottom:1px solid var(--borde-fuerte);
  font-size:clamp(1.2rem, 1rem + .9vw, 1.7rem);font-weight:640;font-stretch:112%;letter-spacing:-.01em;
}
@media (min-width:900px){
  .colaboradores__rejilla{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:4rem;align-items:start}
  .nombres{grid-template-columns:1fr 1fr;column-gap:2.5rem;border-top:0}
  .nombres li:nth-child(-n+2){border-top:1px solid var(--borde-fuerte)}
}

/* ---------- cierre invertido ---------- */
.cierre__caja{max-width:44rem;text-align:center;display:grid;justify-items:center;gap:1.25rem}
.cierre__caja h2{font-size:var(--t-h2-grande)}
.cierre__caja p{font-size:var(--t-grande);color:var(--noche-texto);text-wrap:balance}
.cierre__caja p:last-child{margin-top:.75rem}

/* =================================================================
   PÁGINAS INTERIORES
   ================================================================= */
.cabeza-pagina{padding-block:clamp(2.5rem, 7vw, 5.5rem) clamp(2.5rem, 6vw, 4.5rem)}
.cabeza-pagina h1{max-width:62ch}
.cabeza-pagina__entradilla{margin-top:1.5rem;font-size:var(--t-grande);line-height:1.5;max-width:44rem;color:var(--texto-suave)}
.anclas{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.anclas a{
  display:inline-flex;align-items:center;min-height:2.5rem;padding:.45rem .9rem;
  border:1px solid var(--borde-fuerte);border-radius:2px;text-decoration:none;font-size:var(--t-peque);font-weight:560;
  transition:border-color var(--t-rapido) var(--suave), background-color var(--t-rapido) var(--suave);
}
.anclas a:hover{border-color:var(--tinta);background:var(--papel)}

/* ---------- servicios ---------- */
.area{scroll-margin-top:calc(var(--cabecera) + 1rem)}
.area__cabeza{display:grid;gap:1.1rem;margin-bottom:2.5rem;max-width:46rem}
.dos-col > .area__cabeza{margin-bottom:0}
.par__lado > h2 + .area__texto{margin-top:1.1rem}
.area__logo{height:2.5rem;width:auto;margin-bottom:.25rem}
.area__texto{font-size:var(--t-grande);line-height:1.5}
.area__puntos{display:grid;gap:0;border-top:1px solid var(--borde-fuerte);margin-top:2rem}
.area__puntos li{padding:.9rem 0 .9rem 1.6rem;border-bottom:1px solid var(--borde-fuerte);position:relative;text-wrap:pretty}
.area__puntos li::before{content:"";position:absolute;left:0;top:23px;width:.7rem;height:2px;background:var(--turquesa-linea)}
.fondo-noche .area__puntos,.fondo-noche .area__puntos li{border-color:rgba(169,181,180,.4)}
.fondo-noche .area__puntos li::before{background:var(--turquesa-claro)}

.dos-col{display:grid;gap:2.5rem;align-items:start}
@media (min-width:960px){
  .dos-col{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(3rem, 6vw, 6rem)}
  .dos-col--foto-izq > :first-child{order:0}
}

.foto-borde{margin-inline:calc(-1 * var(--margen))}
.foto-borde img{width:100%;height:auto}
@media (min-width:960px){
  .foto-borde--derecha{margin-right:calc(-1 * var(--canal));margin-left:0}
  .foto-borde--izquierda{margin-left:calc(-1 * var(--canal));margin-right:0}
}

/* ficha técnica */
.ficha{margin:0;border-bottom:1px solid var(--borde-fuerte)}
.ficha > div{display:grid;gap:.25rem;padding:.95rem 0;border-top:1px solid var(--borde-fuerte);align-items:baseline}
.ficha dt{font-weight:600;font-stretch:100%}
.ficha dd{font-stretch:84%;color:var(--texto-suave);font-variant-numeric:tabular-nums}
.ficha .ficha__nota{display:block;margin-top:.35rem;font-stretch:96%;font-size:var(--t-peque)}
@media (min-width:640px){.ficha > div{grid-template-columns:minmax(11rem, 16rem) 1fr;gap:1.5rem}}

/* prueba (sello en línea) */
.prueba{display:flex;gap:1.1rem;align-items:center;margin-top:2rem;padding:1.1rem 1.2rem;background:var(--papel);border-left:2px solid var(--turquesa-linea);max-width:40rem}
.prueba img{height:72px;width:auto;flex:none}
.prueba p{font-size:var(--t-peque)}
.prueba .enlace{display:inline-block;margin-top:.4rem}

/* pasos con conector */
.pasos{display:grid;gap:0;position:relative;margin:2.5rem 0 0;counter-reset:paso}
.pasos::before{content:"";position:absolute;left:1rem;top:1rem;bottom:1rem;width:1.5px;background:var(--turquesa-linea);opacity:.55}
.pasos li{position:relative;padding:0 0 1.35rem 3.25rem;counter-increment:paso;font-weight:560;min-height:2rem;display:flex;align-items:center}
.pasos li::before{
  content:counter(paso);position:absolute;left:0;top:0;width:2rem;height:2rem;border-radius:50%;
  display:grid;place-items:center;border:1.5px solid var(--turquesa-linea);background:var(--lienzo);
  font-size:.8rem;font-weight:640;font-stretch:90%;font-variant-numeric:tabular-nums;
}
.fondo-alt .pasos li::before{background:var(--lienzo-alt)}
@media (min-width:1000px){
  .pasos{grid-auto-flow:column;grid-auto-columns:1fr}
  .pasos::before{left:1rem;right:1rem;top:1rem;bottom:auto;width:auto;height:1.5px}
  .pasos:has(> li:nth-child(3):last-child)::before{right:calc(100% / 3 - 1rem)}
  .pasos:has(> li:nth-child(4):last-child)::before{right:calc(100% / 4 - 1rem)}
  .pasos:has(> li:nth-child(5):last-child)::before{right:calc(100% / 5 - 1rem)}
  .pasos:has(> li:nth-child(6):last-child)::before{right:calc(100% / 6 - 1rem)}
  .pasos:has(> li:nth-child(7):last-child)::before{right:calc(100% / 7 - 1rem)}
  .pasos:has(> li:nth-child(8):last-child)::before{right:calc(100% / 8 - 1rem)}
  .pasos li{padding:3rem 1rem 0 0;align-items:flex-start;font-size:var(--t-peque)}
}

/* capas (seguridad electrónica) */
.capas{display:grid;gap:1px;background:var(--borde-fuerte);border:1px solid var(--borde-fuerte);margin-top:2.5rem}
.capas li{background:var(--lienzo-alt);padding:1.5rem 1.4rem;position:relative}
.capas h3{font-size:1.1rem;margin-bottom:.45rem;display:flex;gap:.7rem;align-items:baseline}
.capas h3::before{content:"";flex:none;width:.85rem;height:.85rem;border:1.5px solid var(--turquesa-linea);border-radius:50%;transform:translateY(.05rem);box-shadow:0 0 0 3px var(--lienzo-alt), 0 0 0 4.5px color-mix(in oklab, var(--turquesa-linea) 55%, transparent)}
.capas li:nth-child(2) h3::before{box-shadow:0 0 0 3px var(--lienzo-alt), 0 0 0 4.5px color-mix(in oklab, var(--turquesa-linea) 55%, transparent), 0 0 0 7px var(--lienzo-alt), 0 0 0 8.5px color-mix(in oklab, var(--turquesa-linea) 40%, transparent)}
.capas p{color:var(--texto-suave);font-size:var(--t-peque)}
@media (min-width:760px){.capas{grid-template-columns:1fr 1fr}}

/* ---------- I+D+i ---------- */
.cronograma{margin-top:1rem}
.cronograma__eje{display:grid;grid-template-columns:repeat(var(--anos), 1fr);margin-left:var(--rotulo);border-bottom:1px solid var(--borde-fuerte);font-size:var(--t-mini);font-stretch:88%;color:var(--texto-suave);font-variant-numeric:tabular-nums}
.cronograma__eje span{padding:.3rem 0 .5rem;border-left:1px solid var(--borde)}
.cronograma__filas{display:grid;gap:.1rem;margin-top:.5rem}
.cronograma__fila{display:grid;grid-template-columns:var(--rotulo) 1fr;align-items:center;min-height:2.6rem}
.cronograma__nombre{font-weight:600;font-stretch:96%;font-size:var(--t-peque);padding-right:1rem}
.cronograma__nombre a{text-decoration:none}
.cronograma__nombre a:hover{text-decoration:underline}
.cronograma__pista{position:relative;height:100%}
.cronograma__barra{
  position:absolute;top:50%;height:1.125rem;margin-top:-.5625rem;border-radius:1px;
  left:calc((var(--ini) - var(--desde)) / var(--anos) * 100%);
  width:calc((var(--fin) - var(--ini) + 1) / var(--anos) * 100%);
  background:var(--turquesa-hondo);transform-origin:left;
}
.cronograma__periodo{position:absolute;top:50%;transform:translateY(-50%);right:.5rem;font-size:var(--t-mini);font-stretch:88%;color:#fff;font-variant-numeric:tabular-nums}
.cronograma{--rotulo:8.5rem;position:relative}
.cronograma__rejilla{position:absolute;left:var(--rotulo);right:0;top:1.9rem;bottom:0;display:grid;grid-template-columns:repeat(var(--anos), 1fr);pointer-events:none}
.cronograma__rejilla span{border-left:1px solid var(--borde)}
.cronograma__rejilla span:last-child{border-right:1px solid var(--borde)}
@media (min-width:760px){.cronograma{--rotulo:13rem}}

.proyectos{display:grid;gap:0;border-top:1px solid var(--borde-fuerte)}
.proyecto{padding:2rem 0;border-bottom:1px solid var(--borde-fuerte);display:grid;gap:1.25rem}
.proyecto__convocatoria{margin-top:.5rem;font-size:var(--t-peque);font-stretch:88%;color:var(--texto-suave)}
.proyecto__titulo{font-size:var(--t-h3);max-width:48rem}
.proyecto__titulo a{text-decoration:none}
.proyecto__titulo a:hover{text-decoration:underline;text-decoration-color:var(--turquesa-linea);text-underline-offset:.2em}
@media (min-width:960px){
  .proyecto{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:3rem;align-items:start}
}

.financiacion{display:grid;gap:2rem}
.financiacion__titulo{font-size:var(--t-h3)}
.financiacion__logos{display:flex;flex-wrap:wrap;align-items:center;gap:1.75rem 2.5rem}
.financiacion__logos img{height:52px;width:auto}
.financiacion__texto{font-size:var(--t-peque);color:var(--texto-suave)}

.galeria-par{display:grid;gap:1rem}
.galeria-par figure img{width:100%;height:clamp(15rem, 28vw, 25rem);object-fit:cover}
@media (min-width:900px){.galeria-par{grid-template-columns:3fr 2fr;align-items:start}}

/* =================================================================
   PIE
   ================================================================= */
.pie{background:var(--lienzo);border-top:1px solid var(--borde-fuerte)}
.pie__sellos{border-bottom:1px solid var(--borde);padding-block:2rem}
.sellos--pie{margin:0;grid-template-columns:repeat(3, auto);justify-content:start;gap:1.5rem 2.5rem;align-items:center}
.sellos--pie img{height:56px}
.pie__cuerpo{display:grid;gap:2rem;padding-block:3rem 2rem}
.pie__logo img{width:120px}
.pie__datos{display:grid;gap:1.25rem;margin:0}
.pie__datos dt{font-size:var(--t-mini);font-stretch:88%;color:var(--texto-suave);margin-bottom:.2rem}
.pie__datos dd{margin:0}
.pie__datos a{text-decoration:none;border-bottom:1px solid var(--borde-fuerte)}
.pie__datos a:hover{border-bottom-color:var(--tinta)}
.pie__legal{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;align-items:center;padding-block:1.25rem 2rem;border-top:1px solid var(--borde);font-size:var(--t-peque)}
.pie__enlaces{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.pie__enlaces a{color:var(--texto-suave)}
.pie__copy{color:var(--texto-suave)}
.credito{font-size:.85rem;color:var(--texto-suave);margin-left:auto}
.credito a{color:#CC0000;font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color 180ms var(--suave)}
.credito a:hover,.credito a:focus-visible{border-bottom-color:currentColor}
@media (min-width:900px){
  .pie__cuerpo{grid-template-columns:auto 1fr;gap:4rem;align-items:start}
  .pie__datos{grid-template-columns:repeat(4, minmax(0, auto));justify-content:end;gap:2.5rem}
}
@media (max-width:599px){.sellos--pie{grid-template-columns:repeat(2, auto)}.credito{margin-left:0}}

/* =================================================================
   MOVIMIENTO · capa 1. El estado base es el final; el JS solo resta.
   ================================================================= */
.js [data-entra]{transition:opacity var(--t-lento) var(--suave), transform var(--t-lento) var(--suave)}
.js [data-entra]:not(.dentro){opacity:0;transform:translateY(18px)}

/* dibujado de la capa de lectura */
.js [data-lectura] .marca__punto{transition:transform 420ms var(--suave) calc(var(--i) * 170ms + 250ms)}
.js [data-lectura] .marca__linea{transition:transform 560ms var(--suave) calc(var(--i) * 170ms + 420ms)}
.js [data-lectura] .marca__texto{transition:opacity 420ms var(--suave) calc(var(--i) * 170ms + 760ms), color var(--t-rapido) var(--suave), border-color var(--t-rapido) var(--suave)}
.js [data-lectura]:not(.dentro) .marca__punto{transform:scale(0)}
.js [data-lectura]:not(.dentro) .marca__linea{transform:scaleY(0)}
.js [data-lectura]:not(.dentro) .marca__texto{opacity:0}
.js [data-lectura] .lectura__marco{transition:opacity 620ms var(--suave) 760ms}
.js [data-lectura]:not(.dentro) .lectura__marco{opacity:0}
.js .lectura--en-sitio:not(.dentro) .marca__linea{transform:scaleX(0)}
@media (min-width:1100px){
  .js .lectura--heroe:not(.dentro) .marca__linea{transform:scaleX(0)}
}
/* tras la entrada, el ratón responde al instante */
.js [data-lectura].hecho .marca__texto{transition:color var(--t-rapido) var(--suave), border-color var(--t-rapido) var(--suave)}

/* cronograma: las barras crecen sobre el eje, de una en una. La figura no se desplaza. */
.js .cronograma[data-entra]:not(.dentro){opacity:1;transform:none}
.js .cronograma .cronograma__barra{transition:transform 900ms var(--suave) calc(var(--i) * 140ms + 150ms)}
.js .cronograma:not(.dentro) .cronograma__barra{transform:scaleX(0)}
.js .cronograma .cronograma__periodo{transition:opacity 400ms var(--suave) calc(var(--i) * 140ms + 900ms)}
.js .cronograma:not(.dentro) .cronograma__periodo{opacity:0}

/* pausa de la capa de fondo cuando la pestaña está oculta */
body.pausado *, body.pausado *::before, body.pausado *::after,
body.pausado::before, body.pausado::after{animation-play-state:paused!important}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation:none!important;transition-duration:0s!important;transition-delay:0s!important}
  body::before{animation:none}
  .js [data-entra]:not(.dentro){opacity:1;transform:none}
  .js [data-lectura]:not(.dentro) .marca__punto,
  .js [data-lectura]:not(.dentro) .marca__linea{transform:none}
  .js [data-lectura]:not(.dentro) .marca__texto{opacity:1}
  .js [data-lectura]:not(.dentro) .lectura__marco{opacity:1}
  .js .cronograma:not(.dentro) .cronograma__barra{transform:none}
  .js .cronograma:not(.dentro) .cronograma__periodo{opacity:1}
  .js .esquema[data-entra]:not(.dentro) .esq-linea{stroke-dashoffset:0}
}

/* ---------- táctil ---------- */
@media (pointer:coarse){
  .cabecera__lista a,.pie__enlaces a,.anclas a{min-height:44px;display:inline-flex;align-items:center}
  .marca__texto{padding-block:.5rem}
}