/* ═══════════════════════════════════════════════════════════════════════════
   TEMPUS GROUP · V1 · tempus.css
   Layout y estilos de cada sección de la home. Se carga DESPUÉS de tokens.css
   y solo usa tokens: ningún color ni fuente en duro.
   Orden: 0 base · 1 cabecera · 2 hero · 3 marquee · 4 ciclo de vida ·
   5 cifras · 6 equipo · 7 mapa · 8 proyectos · 9 clientes y sectores ·
   10 certificaciones · 11 hablamos · 12 footer · 13 animación / reduced-motion
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0 · BASE ──────────────────────────────────────────────────────────── */
[id]{scroll-margin-top:calc(var(--cab-alto) + var(--cab-arriba) + 16px)}
.saltar{position:absolute;left:-9999px;top:0;z-index:999;background:var(--marino);color:#fff;
  padding:.9rem 1.5rem;font-weight:var(--peso-medio);text-decoration:underline;text-underline-offset:4px}
.saltar:focus{position:fixed;left:var(--cab-margen);top:var(--cab-arriba);outline:3px solid var(--turquesa);outline-offset:3px}
.pendiente{color:var(--texto-3)}
.banda--oscura .pendiente{color:var(--texto-3)}
/* Sin JS, nada se queda invisible: el ocultado de [data-anim] de tokens.css
   solo aplica cuando hay script que lo va a revelar. */
html:not(.js) [data-anim]{opacity:1;transform:none}
/* Con JS, el movimiento lo lleva GSAP: fuera la transición CSS de tokens. */
.js [data-anim]{transition:none;transform:none} /* GSAP pone y quita el desplazamiento: al limpiarlo no debe volver el de tokens.css (salto de 18 px) */
/* Red de seguridad (clase que pone el <head> si GSAP no ha arrancado a 1,5 s): todo visible. */
html.sin-anim [data-anim]{opacity:1;transform:none}
html.sin-anim .mapa__arco{stroke-dasharray:none;stroke-dashoffset:0}

/* ── 1 · CABECERA ──────────────────────────────────────────────────────── */
.capsula-cabecera__in{gap:16px}
.capsula-cabecera__logo img{width:var(--cab-logo);height:auto}
.capsula-cabecera__cta{--btn-alto:40px;flex:0 0 auto}
.nav__cta{display:none}
.burger{display:none;align-items:center;gap:.65rem;background:none;border:0;min-height:44px;
  padding:0 .25rem;cursor:pointer;color:var(--tinta);font-size:var(--t-nav);font-weight:var(--peso-medio);
  letter-spacing:var(--ls-nav);text-transform:uppercase;border-radius:var(--r-1)}
.burger__b{position:relative;display:block;width:22px;height:1.5px;background:var(--tinta);transition:background-color var(--d-1) var(--ease)}
.burger__b::before,.burger__b::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:var(--tinta);transition:transform var(--d-2) var(--ease-suave)}
.burger__b::before{top:-6px}
.burger__b::after{top:6px}
.burger[aria-expanded="true"] .burger__b{background:transparent}
.burger[aria-expanded="true"] .burger__b::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__b::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1023px){
  .nav{display:none}
  .burger{display:inline-flex;margin-left:auto}
  .capsula-cabecera__cta{display:none}
  .capsula-cabecera__nav{
    position:fixed;inset:calc(var(--cab-arriba) + var(--cab-alto) + 8px) var(--cab-margen) auto var(--cab-margen);
    background:var(--cab-fondo);border-radius:var(--cab-radio);box-shadow:var(--sombra-3);
    padding:.5rem var(--e-5) var(--e-5);
    transform:translate3d(0,-8px,0);opacity:0;visibility:hidden;
    transition:opacity var(--d-2) var(--ease-suave),transform var(--d-2) var(--ease-suave),visibility 0s var(--d-2);
  }
  .capsula-cabecera.is-abierta .capsula-cabecera__nav{opacity:1;transform:none;visibility:visible;transition-delay:0s}
  .capsula-cabecera.is-abierta .nav{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .capsula-cabecera.is-abierta .nav li{width:100%}
  .capsula-cabecera.is-abierta .nav a:not(.btn):not(.btn-ing){min-height:54px;font-size:var(--t-body);width:100%;border-bottom:1px solid var(--borde-suave)}
  .capsula-cabecera.is-abierta .nav a:not(.btn):not(.btn-ing)::after{display:none}
  .nav__cta{display:block;padding-top:var(--e-4)}
}
/* Cabecera integrada en el above the fold (23-10): arriba del todo va dentro
   de la tarjeta del hero, sin cápsula y alineada con su texto. Al hacer
   scroll (.is-sticky, la pone tempus.js) recupera la cápsula de siempre.
   Sin JS se queda la cápsula. */
.capsula-cabecera{transition:padding var(--d-2) var(--ease)}
.capsula-cabecera__in{transition:background-color var(--d-2) var(--ease),padding var(--d-2) var(--ease)}
.capsula-cabecera__in::after{transition:opacity var(--d-2) var(--ease)}
.js .capsula-cabecera:not(.is-sticky):not(.is-abierta){padding-top:var(--cab-margen)}
.js .capsula-cabecera:not(.is-sticky):not(.is-abierta) .capsula-cabecera__in{
  background:transparent;padding-inline:var(--lat)}
.js .capsula-cabecera:not(.is-sticky):not(.is-abierta) .capsula-cabecera__in::after{opacity:0}
/* Negativo: con la foto del hero a pantalla completa bajo la cabecera
   (.is-negativo, la pone tempus.js), logotipo y textos en blanco. El botón
   sigue en verde. Al pasar a cápsula vuelve la versión normal. */
.capsula-cabecera__logo{position:relative}
.capsula-cabecera__logo img{transition:opacity var(--d-2) var(--ease)}
.capsula-cabecera__logo .capsula-cabecera__logo-negativo{position:absolute;left:0;top:50%;translate:0 -50%;opacity:0}
.nav a,.burger{transition:color var(--d-2) var(--ease)}
.js .capsula-cabecera.is-negativo:not(.is-sticky):not(.is-abierta) .capsula-cabecera__logo img{opacity:0}
.js .capsula-cabecera.is-negativo:not(.is-sticky):not(.is-abierta) .capsula-cabecera__logo .capsula-cabecera__logo-negativo{opacity:1}
.js .capsula-cabecera.is-negativo:not(.is-sticky):not(.is-abierta) .nav a:not(.btn):not(.btn-ing),
.js .capsula-cabecera.is-negativo:not(.is-sticky):not(.is-abierta) .burger{color:#fff}
.js .capsula-cabecera.is-negativo:not(.is-sticky):not(.is-abierta) .burger__b,
.js .capsula-cabecera.is-negativo:not(.is-sticky):not(.is-abierta) .burger__b::before,
.js .capsula-cabecera.is-negativo:not(.is-sticky):not(.is-abierta) .burger__b::after{background:#fff}
.js .capsula-cabecera.is-negativo:not(.is-sticky):not(.is-abierta) :focus-visible{outline-color:#fff}

@media (min-width:1024px){
  .nav{display:flex}
  /* David: el menú a la derecha, con aire antes del botón «Hablamos» */
  .capsula-cabecera__izq{flex:1 1 auto}
  .capsula-cabecera__nav{margin-left:auto;margin-right:32px}
}

/* ── 2 · HERO ──────────────────────────────────────────────────────────── */
/* Tarjeta de radio 8 sangrada 10 px (los mismos 10 px que la cápsula de
   cabecera). Dentro, «la ventana» de EMECUBO V3 (vídeo de Juan, 16:35): un
   cuadrado con obras junto al titular que se abre con el scroll hasta llenar
   la escena. La tira de logotipos queda debajo, siempre visible.
   Base (móvil, sin JS, sin ventana): la foto va en el flujo bajo el texto.
   .hero--ventana (JS, ≥1024 px de ancho y ≥640 de alto): escena fija con
   el cuadrado a la derecha. .hero--quieta (reducir movimiento): igual, sin
   recorrido de scroll. */
/* --hero-lat: el texto de la tarjeta (sangrada 10 px) cae en la línea de la
   rejilla del 85 / 90 %, con un mínimo de 20 px de aire dentro de la tarjeta. */
.hero{--hero-lat:var(--lat);position:relative;padding:0 var(--cab-margen);background:var(--gris-200)}
.hero__fijo{padding:calc(var(--cab-arriba) + var(--cab-alto) + 8px) 0 var(--cab-margen)}
/* Con JS la tarjeta sube hasta arriba y la cabecera queda dentro: el hueco lo reserva la escena */
.js .hero__fijo{padding-top:var(--cab-margen)}
.js .hero{--cab-hueco:var(--cab-alto)}
.hero__tarjeta{position:relative;display:flex;flex-direction:column;background:var(--gris-50);border-radius:var(--r-3);overflow:hidden}
.hero__escena{position:relative;display:flex;flex-direction:column;gap:var(--e-cta);
  padding:calc(70px + var(--cab-hueco,0px)) var(--hero-lat) 48px}
/* --hero-e: etiqueta → titular y titular → párrafo, ampliado (23-10): 32 px (24 en móvil) */
.hero__bloque{--hero-e:32px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--hero-e);position:relative;z-index:1}
.hero__pastilla{display:flex;justify-content:flex-start;margin:0;align-self:stretch;min-width:0}
.hero__titulo{text-align:left;max-width:16ch;margin:0;color:var(--marino)}
.hero__gris{color:var(--gris-600)} /* Juan: titular en marino y gris, sin verde · AAA texto grande: 5,14:1 */
.hero__entradilla{max-width:52ch;text-align:left;margin:0;color:var(--texto-2)}
.hero__botones{gap:8px;justify-content:flex-start;margin-top:calc(var(--e-bloque) - var(--hero-e))} /* párrafo → botón: 60 px (40 en móvil) */
/* Palabra a palabra: cada palabra va en una ventana que la recorta. */
.pal{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.pal > i{display:inline-block;font-style:inherit}

.hero__hueco{display:none}
.hero__ventana{position:relative;aspect-ratio:16 / 10;border-radius:var(--r-2);overflow:hidden;background:var(--gris-300)}
.hero__img{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s var(--ease)}
.hero__img.is-activa{opacity:1;z-index:1}
.hero__img img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transform-origin:0 0}
.hero__sobre{display:none}

/* Pie del cuadrado: 01 / 04 · nombre · barras de tiempo · pausa */
.hero__pie{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:16px;
  font-size:var(--t-small);line-height:1.3;color:var(--texto-2);font-variant-numeric:tabular-nums}
.hero__cuenta b{font-weight:var(--peso-semi);color:var(--marino)}
.hero__nombre{color:var(--marino);font-weight:var(--peso-semi);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero__barras{display:flex;gap:6px}
.hero__barras i{width:26px;height:2px;background:var(--gris-300);position:relative;overflow:hidden}
.hero__barras i::after{content:"";position:absolute;inset:0;background:var(--marino);transform:scaleX(0);transform-origin:left}
.hero__barras i.is-on::after{animation:hero-barra var(--hero-tiempo,5.5s) linear forwards}
.hero.is-pausado .hero__barras i.is-on::after{animation-play-state:paused}
@keyframes hero-barra{to{transform:scaleX(1)}}
.hero__pausa{width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r-1);background:none;color:var(--marino);cursor:pointer}
.hero__pausa:hover{background:var(--gris-200)}
.hero__pausa svg{width:9px;height:10px;fill:currentColor}
.hero__pausa .i-seguir,.hero.is-parado .hero__pausa .i-pausa{display:none}
.hero.is-parado .hero__pausa .i-seguir{display:block}
html:not(.js) .hero__barras,html:not(.js) .hero__pausa{display:none}

/* Escritorio con JS: la escena se queda fija y el cuadrado se abre */
.hero--ventana{height:230vh}
.hero--quieta{height:auto}
.hero--ventana .hero__fijo{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column}
.hero--ventana .hero__tarjeta{flex:1;min-height:0}
/* Filas: hueco · (pastilla + foto) · leyenda · hueco. Las dos filas libres
   centran el conjunto; la pastilla arranca a la altura de la foto (23-10). */
.hero--ventana .hero__escena{flex:1;min-height:0;display:grid;gap:32px var(--gap);
  grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr);
  padding-top:calc(clamp(32px,6vh,72px) + var(--cab-hueco,0px));padding-bottom:clamp(20px,3vh,32px)}
.hero--ventana .hero__bloque{grid-column:1;grid-row:2 / 4;align-self:start}
/* David: el cuadrado de partida, pequeño y abajo a la derecha, para que la
   apertura recorra casi toda la escena (como en EMECUBO). */
.hero--ventana .hero__hueco,.hero--ventana .hero__pie{grid-column:2;justify-self:end;
  width:min(clamp(260px, 24vw, 440px), calc(100svh - 440px))}
.hero--ventana .hero__pie{gap:12px}
.hero--ventana .hero__barras i{width:18px}
.hero--ventana .hero__hueco{display:block;grid-row:2;align-self:start;aspect-ratio:1}
.hero--ventana .hero__pie{grid-row:3}
.hero--ventana .hero__ventana{position:absolute;inset:0;z-index:2;aspect-ratio:auto;border-radius:0;background:transparent;clip-path:inset(0 0 0 100%)}
.hero--ventana .hero__img img{width:auto;height:auto;max-width:none;object-fit:fill;will-change:transform}
.hero--ventana .hero__pie{position:relative;z-index:3}
.hero--ventana .hero__sobre{display:flex;flex-direction:column;gap:10px;position:absolute;z-index:3;
  left:var(--hero-lat);bottom:clamp(24px,4vh,48px);right:var(--hero-lat);
  color:#fff;opacity:0;pointer-events:none;text-shadow:0 1px 18px rgba(20,20,19,.3)}
.hero__sobre-t{font-size:var(--t-h1);line-height:var(--lh-h1);font-weight:var(--peso-titular);letter-spacing:-.025em}
.hero__sobre-d{font-size:var(--t-lead);line-height:var(--lh-lead);max-width:40ch;color:rgba(255,255,255,.86)}
.hero--ventana .hero__ventana::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(20,20,19,.62),rgba(20,20,19,0) 48%);opacity:var(--sombra,0)}

@media (max-width:1023px){
  .hero__titulo{max-width:18ch}
}
@media (max-width:767px){
  .hero__escena{padding:calc(56px + var(--cab-hueco,0px)) var(--hero-lat) 32px}
  .hero__bloque{--hero-e:24px}
  .hero__ventana{aspect-ratio:4 / 5}
  .hero__pastilla .pastilla-hero{text-align:left;align-items:flex-start;line-height:1.35}
  .hero__pastilla .pastilla-hero::before{margin-top:5px}
  .hero__botones .btn,.hero__botones .btn-ing{flex:1 1 100%}
  .hero__botones .btn-ing__t{flex:1 1 auto;justify-content:flex-start}
  .hero__barras i{width:18px}
}

/* ── 3 · MARQUEE ───────────────────────────────────────────────────────── */
/* Tarjetas blancas de 90 px pegadas al borde inferior de la tarjeta del
   hero. La pista se duplica en JS; sin JS o con menos movimiento se puede
   desplazar a mano. */
.marquee{overflow:hidden;background:var(--gris-100);padding:0 0 8px}
.marquee__pista{display:flex;flex-wrap:nowrap;width:max-content;gap:8px;margin:0;padding:0 8px;list-style:none;will-change:transform}
.marquee__item{flex:0 0 auto;display:flex;align-items:center;gap:24px;min-height:90px;padding:20px 24px;
  border-radius:var(--r-1);background:var(--superficie)}
.marquee__nombre{display:block;font-family:var(--f-titulos);font-size:var(--t-body);line-height:1.15;font-weight:var(--peso-titular);
  letter-spacing:-.01em;color:var(--tinta);white-space:nowrap}
.marquee__sep{width:1px;height:38px;background:var(--gris-200);flex:0 0 auto}
.marquee__hito{width:300px;font-size:var(--t-small);line-height:var(--lh-small);color:var(--texto-2)}
html:not(.js) .marquee,.marquee.is-manual{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:767px){
  .marquee__item{flex-direction:column;align-items:flex-start;gap:14px;padding:16px 18px;min-height:0}
  .marquee__sep{width:100%;height:1px}
  .marquee__hito{width:220px}
}


/* Tira del hero: logotipos reales en gris (David, 22-10). Gris por filtro para
   conservar la lectura interna de escudos y marcas de varios colores. */
.marquee__logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:150px;height:50px}
.marquee__logo img{display:block;width:auto;height:auto;max-width:100%;max-height:30px;filter:grayscale(1) contrast(.9);opacity:.62;transition:opacity .3s var(--ease)}
.marquee__item:hover .marquee__logo img{opacity:.9}
.marquee__logo--real-madrid img{max-height:48px}
.marquee__logo--metro-madrid img{max-height:40px}
.marquee__logo--iess img{max-height:40px}
.marquee__logo--microsoft img,.marquee__logo--repsol img{max-height:28px}
.marquee__hito b{font-weight:var(--peso-semi);color:var(--tinta)}
@media (max-width:767px){.marquee__logo{justify-content:flex-start;width:130px;height:44px}}

/* ── 4 · CICLO DE VIDA ─────────────────────────────────────────────────── */
/* Lista 01–04 estilo Stripe: filetes finos, grises cálidos y aire. En
   escritorio la fila cerrada se lee en cuatro columnas: numeral · nombre ·
   resumen · más. El cuerpo abre con GSAP (altura) y queda alineado con el
   nombre. */
.ciclo .filas-numeradas{max-width:var(--ancho-contenido)}
details.fila-numerada{padding:0}
details.fila-numerada summary{
  grid-template-columns:3.2ch minmax(0,.9fr) minmax(0,1.4fr) 20px;
  align-items:center;gap:var(--e-3) var(--e-6);
  padding:var(--e-6) 0;
}
details.fila-numerada summary:focus-visible{outline:2px solid var(--foco);outline-offset:6px;border-radius:var(--r-1)}
.fila-numerada__num{font-size:var(--t-h2);min-width:0}
.fila-numerada__titulo{font-size:var(--t-h3)}
.fila-numerada__resumen{color:var(--texto-2);font-size:var(--t-body);line-height:var(--lh-body);text-wrap:pretty}
details.fila-numerada summary:hover .fila-numerada__titulo{text-decoration:underline;text-decoration-color:var(--turquesa);text-decoration-thickness:2px;text-underline-offset:.2em} /* AAA: el verde no hace de texto sobre claro */
details.fila-numerada .fila-numerada__cuerpo{grid-column:1 / -1;padding:0 0 0 calc(3.2ch + var(--e-6));max-width:none;overflow:hidden}
.fila-numerada__interior{display:grid;gap:var(--e-4);max-width:var(--ancho-texto);padding:0 0 var(--e-6)}
.fila-numerada__rotulo{font-size:var(--t-small);font-weight:var(--peso-semi);color:var(--tinta);margin-top:var(--e-2)}
.lista-inline{display:flex;flex-wrap:wrap;gap:4px 0;list-style:none;color:var(--texto-2)}
.lista-inline li::after{content:"·";margin:0 .55em;color:var(--gris-400)}
.lista-inline li:last-child::after{content:none}
.fila-numerada__interior .btn--enlace{justify-self:start;margin-top:var(--e-2)}
@media (max-width:767px){
  details.fila-numerada summary{grid-template-columns:3.2ch minmax(0,1fr) 20px;gap:var(--e-2) var(--e-4);padding:var(--e-5) 0}
  .fila-numerada__resumen{grid-column:2;font-size:var(--t-small)}
  .fila-numerada__mas{grid-column:3;grid-row:1}
  details.fila-numerada .fila-numerada__cuerpo{padding-left:0}
  .fila-numerada__num{font-size:var(--t-h3);color:var(--texto-3)} /* < 24 px: gris-500 no llega a AA */
}

/* ── 5 · CIFRAS · índice editorial con fotografía ──────────────────────── */
/* Clon de la sección de números de Heliox «versión 1» (la que Juan pide
   reutilizar «con los números grandes»): filas separadas por filetes, cifra
   gigante alineada a la derecha hasta topar con la foto cuadrada, y el «+»
   montado encima de la foto. Mismas variables y medidas que el original. */
.cifras-seccion{padding-block:var(--seccion)}
.numlist{
  list-style:none;margin:0;padding:0;
  --num-foto:clamp(140px,20vw,340px);
  --num-hueco:clamp(.6rem,1.4vw,1.5rem);
  --num-solape:clamp(16px,3vw,56px);
}
.numlist__f{
  position:relative;
  padding-block:clamp(1.1rem,2.2vw,1.9rem);
  border-top:1px solid var(--borde);
  min-height:clamp(180px,24vw,400px);
}
.numlist__f:last-child{border-bottom:1px solid var(--borde)}
.numlist__k{
  position:relative;z-index:3;max-width:16ch;margin:0;
  font-family:var(--f-titulos);font-weight:var(--peso-titular);color:var(--tinta);
  font-size:var(--t-h2);line-height:1;letter-spacing:var(--ls-h2);
}
.numlist__nota{display:block;margin-top:.9rem;max-width:24ch;
  font-size:var(--t-small);font-weight:var(--peso-medio);letter-spacing:0;line-height:var(--lh-small);color:var(--texto-3)}
.numlist__v{
  position:relative;z-index:4;margin:clamp(.25rem,.8vw,.9rem) 0 0;
  display:flex;align-items:baseline;justify-content:flex-end;
  padding-right:calc(var(--num-foto) + var(--num-hueco));
  font-family:var(--f-titulos);font-weight:var(--peso-titular);
  color:var(--turquesa);
  font-size:var(--t-gigante);
  line-height:.8;letter-spacing:-.06em;font-variant-numeric:tabular-nums lining-nums;
}
.numlist__v i{font-style:normal;margin-right:calc(-1 * (var(--num-hueco) + var(--num-solape)))}
.numlist__fig{
  position:absolute;z-index:2;right:0;top:50%;translate:0 -50%;
  width:var(--num-foto);aspect-ratio:1;margin:0;
  border-radius:0;overflow:hidden;background:var(--gris-200);
}
.numlist__fig img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){
  .numlist__f{min-height:0;padding-block:clamp(1.5rem,5vw,2rem)}
  .numlist__v{justify-content:flex-start;padding-right:0;margin-top:.4rem;font-size:clamp(4.25rem,26vw,8rem)}
  .numlist__v i{margin-right:0}
  .numlist__fig{position:static;translate:none;width:100%;aspect-ratio:16/10;margin-top:clamp(1rem,3vw,1.5rem)}
}

/* ── 6 · EQUIPO ────────────────────────────────────────────────────────── */
/* Equipo: sección anclada. Mientras dura la pista, la T del logotipo pasa de
   plano técnico (solo contorno y guías) a símbolo relleno; al completarse,
   la página sigue. El técnico sale del borde inferior, sin fondo. */
/* 24-10: sin sección anclada ni plano de la T. Texto y retrato del técnico de
   Tempus en una sala técnica (fondo generado con Magnific), en la rejilla de
   12: texto en 5 columnas, foto vertical 4:5 en las 4 últimas. */
.equipo{background:var(--papel)}
.equipo__rejilla{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--e-bloque) var(--gap);align-items:center;
  padding-block:var(--seccion)}
.equipo__texto{grid-column:1 / 6;display:grid;gap:var(--e-titulo);max-width:var(--ancho-texto)}
.equipo__texto h2{margin:0}
/* Jerarquía: H2 de sección · entradilla a 17 px en marino y peso medio ·
   cuerpo a 17 px en --texto-2. */
.equipo__parrafos{color:var(--texto-2);font-size:var(--t-body);line-height:var(--lh-body)}

.equipo__foto{grid-column:9 / -1;margin:0;aspect-ratio:4 / 5;border-radius:var(--r-3);overflow:hidden;background:var(--gris-200)}
.equipo__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
@media (max-width:900px){
  .equipo__texto,.equipo__foto{grid-column:1 / -1}
  .equipo__foto{aspect-ratio:4 / 5;max-width:480px}
}

/* ── 7 · MAPA ──────────────────────────────────────────────────────────── */
.mapa__cabecera{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--e-titulo) var(--gap);align-items:start;margin-bottom:var(--e-bloque)}
.mapa__texto{color:var(--texto-2);max-width:var(--ancho-texto)}
.mapa__lienzo{color:rgba(190,189,184,.48)}             /* los puntos del mapa: gris claro sobre marino */
.mapa__svg{width:100%;height:auto;display:block;overflow:hidden} /* el encuadre recorta el mundo: nada se sale por encima del titular */
.mapa__arcos{color:var(--turquesa-logo)}
.mapa__arco{stroke-dasharray:1;stroke-dashoffset:1;opacity:.85}  /* el JS fija la longitud real */
html:not(.js) .mapa__arco{stroke-dasharray:none;stroke-dashoffset:0}
.mapa__sedes .sede{fill:var(--turquesa-logo)}
.mapa__pulso{fill:none;stroke:var(--turquesa-logo);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center;
  animation:sede-pulso 3s var(--ease) infinite}
.mapa__sede:nth-child(2) .mapa__pulso{animation-delay:.6s}
.mapa__sede:nth-child(3) .mapa__pulso{animation-delay:1.2s}
.mapa__sede:nth-child(4) .mapa__pulso{animation-delay:1.8s}
@keyframes sede-pulso{0%{transform:scale(1);opacity:.7}70%{transform:scale(3.2);opacity:0}100%{transform:scale(3.2);opacity:0}}
.mapa__rotulo{font-family:var(--f-texto);font-size:7px;font-weight:var(--peso-semi);fill:#fff;letter-spacing:0}
.mapa__rotulo-2{font-family:var(--f-texto);font-size:5.4px;font-weight:var(--peso-regular);fill:var(--texto-inverso-2)}
.mapa__lista{display:none;list-style:none;margin-top:var(--e-cta);border-top:1px solid var(--borde)}
.mapa__lista li{display:flex;justify-content:space-between;gap:var(--e-4);padding:12px 0;border-bottom:1px solid var(--borde);font-size:var(--t-small)}
.mapa__lista b{font-weight:var(--peso-semi);color:#fff}
.mapa__lista span{color:var(--texto-2)}
@media (max-width:900px){
  .mapa__cabecera{grid-template-columns:1fr}
  .mapa__lienzo{margin-inline:calc(var(--lat) * -1)} /* el viewBox móvil (recorte del Atlántico) lo fija tempus.js */
  .mapa__sedes text{display:none}
  .mapa__lista{display:block}
}
@media (min-width:901px){.mapa__lista{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* ── 8 · OBRAS · tarjeta clavada al scroll ─────────────────────────────── */
/* Clon del «método» de Heliox «versión 2» (el que Juan señala en 2:53:
   «para las diferentes empresas, van saliendo aquí los logos»). Misma
   mecánica: la tarjeta se queda clavada con position:sticky y cada tramo de
   scroll pasa a la obra siguiente. Tres columnas:
     · izquierda: titular, entradilla y el índice de obras que se va marcando;
     · centro: la caja blanca con el logotipo, que sube como un tambor;
     · derecha: sector, qué se hizo y el hito.
   Por debajo de 981 px de ancho o de 760 px de alto no se clava y las obras
   se leen apiladas. La tarjeta va a sangre, como el hero. */
.obras{background:transparent;padding:0 var(--cab-margen) var(--cab-margen)}
.obras__pista{height:calc(3 * 55vh + 100vh)} /* tres obras */
.obras__fijo{position:sticky;top:calc(var(--cab-arriba) + var(--cab-alto) + 8px)}
/* --obras-lat: como en el hero, el contenido de la tarjeta cae en la rejilla del 85 / 90 % */
.obras__card{
  --obras-lat:var(--lat);
  position:relative;display:flex;flex-direction:column;justify-content:center;
  height:calc(100vh - var(--cab-arriba) - var(--cab-alto) - 8px - var(--cab-margen));
  padding:clamp(40px,5vh,70px) var(--obras-lat);
  background:var(--gris-100);border-radius:var(--r-3);overflow:hidden;
}
.obras__grid{
  --lado:min(500px,calc(100vh - 300px));
  width:100%;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) var(--lado) minmax(0,1fr);
  gap:var(--gap);align-items:center;
}
.obras__izq{display:flex;flex-direction:column;justify-content:center;gap:var(--e-titulo)}
.obras__izq .obras__paso{margin-top:calc(var(--e-cta) - var(--e-titulo))}
.obras__t{font-size:var(--t-h2);max-width:14ch;text-wrap:balance}
.obras__d{max-width:40ch;color:var(--texto-2);font-size:var(--t-body);line-height:1.5}
/* El índice: medidas de la referencia, ajustadas a siete entradas. */
.obras__paso{display:flex;flex-direction:column;gap:clamp(8px,1.4vh,16px);margin:0;padding:0;list-style:none}
.obras__paso li{
  display:flex;align-items:center;gap:12px;
  font-size:var(--t-h3);line-height:1.3;letter-spacing:-.02em;
  color:var(--texto-3); /* AAA: antes marino al 42 % (≈ 2,8:1); ahora gris AAA y la activa en marino */
  transition:color .45s var(--ease),opacity .45s var(--ease),transform .45s var(--ease);
}
.obras__paso li i{flex:0 0 auto;width:10px;height:10px;border-radius:0;
  background:currentColor;opacity:.55;
  transition:background-color .45s var(--ease),opacity .45s var(--ease),transform .45s var(--ease-muelle,var(--ease))}
.obras__paso li.is-hecha{color:var(--tinta);opacity:1}
.obras__paso li.is-hecha i{background:var(--turquesa);opacity:1}
.obras__paso li.is-activa{transform:translateX(5px);color:var(--tinta)}
.obras__paso li.is-activa i{transform:scale(1.35)}
/* El tambor */
.obras__panel{position:relative;overflow:hidden;border-radius:var(--r-3);background:#fff;
  width:var(--lado);aspect-ratio:1;align-self:center}
.obras__tira{position:absolute;left:0;right:0;top:50%;
  transform:translate3d(0,-50%,0);transition:transform .85s cubic-bezier(.65,0,.35,1)}
.obras__k{height:calc(var(--lado) * .5);display:flex;align-items:center;justify-content:center;margin:0}
/* casilla de media caja: como las letras de Heliox, el logotipo anterior y el siguiente asoman bajo el velo */
.obras__k img{width:auto;height:auto;max-width:60%;max-height:40%;object-fit:contain}
.obras__k--real-madrid img{max-height:62%}
.obras__k--metro-madrid img{max-height:48%}
.obras__k--iess img{max-height:50%}
.obras__velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(#fff,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,#fff)}
/* Columna derecha */
.obras__col{display:flex;flex-direction:column;justify-content:center}
.obras__es{display:grid}
.obras__e{grid-area:1/1;display:grid;gap:14px;align-content:start;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s .45s}
.obras__e.is-activa{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.obras__n{display:none}
.obras__m{margin:0;font-size:var(--t-small);color:var(--texto-3)}
/* Juan (16:35): la descripción hace de titular grueso (como antes el hito) y
   el hito pasa a una línea pequeña y discreta. */
.obras__x{margin:0;font-size:var(--t-h3);line-height:1.2;font-weight:var(--peso-negrita);letter-spacing:-.02em;color:var(--tinta);max-width:26ch;text-wrap:balance}
.obras__h{margin:4px 0 0;padding-top:14px;border-top:1px solid var(--borde);display:flex;flex-wrap:wrap;gap:4px 10px;
  font-size:var(--t-small);line-height:1.45;font-weight:400;color:var(--texto-3);max-width:44ch}
.obras__h span{font-weight:var(--peso-semi);color:var(--texto-2)}

@media (max-width:980px),(max-height:759px){
  .obras__pista{height:auto}
  .obras__fijo{position:static}
  .obras__card{height:auto;padding:var(--seccion) var(--obras-lat)}
  .obras__grid{--lado:100%;grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
  .obras__izq{grid-row:1;margin-bottom:var(--e-bloque)}
  .obras__paso{display:none}
  .obras__n{display:block;margin:0;font-size:var(--t-h3)}
  .obras__panel,.obras__tira,.obras__col,.obras__es{display:contents}
  .obras__velo{display:none}
  .obras__k{height:clamp(120px,32vw,200px);background:#fff;border-radius:var(--r-3);margin-top:var(--e-cta)}
  .obras__k img{max-width:min(60%,260px);max-height:46%}
  .obras__k--real-madrid img{max-height:70%}
  .obras__e{opacity:1;visibility:visible;transform:none;grid-area:auto;
    padding:var(--e-titulo) 0 var(--e-cta);border-bottom:1px solid var(--borde)}
  .obras__x{max-width:30ch}
  .obras__k:nth-child(1){grid-row:2} .obras__e:nth-child(1){grid-row:3}
  .obras__k:nth-child(2){grid-row:4} .obras__e:nth-child(2){grid-row:5}
  .obras__k:nth-child(3){grid-row:6} .obras__e:nth-child(3){grid-row:7}
  .obras__e:last-child{border-bottom:0;padding-bottom:0}
}

/* ── 9 · CLIENTES Y SECTORES ───────────────────────────────────────────── */
.clientes{padding-block:var(--seccion)}
.clientes__cab{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e-titulo);
  align-items:end;margin-bottom:var(--e-bloque)}
.clientes__cab h2{margin:0}
.clientes__cab .lead{margin:0;max-width:52ch;color:var(--texto-2)}
.clientes__sub{font-size:var(--t-h3);margin:0 0 var(--e-titulo);color:var(--tinta)}
.clientes__sub + .perfiles{margin-top:0}
/* Galería de sectores: ocho paneles; el activo se abre y el resto queda en
   columna estrecha con el nombre en vertical. Con ratón se abre al pasar,
   con teclado al enfocar, en táctil al tocar. */
.sectores{list-style:none;margin:0;padding:0;display:flex;gap:var(--gap);height:clamp(420px,38vw,640px)}
.sector{position:relative;flex:1 1 0;min-width:0;border-radius:var(--r-3);overflow:hidden;cursor:pointer;
  background:var(--marino);outline:none;
  transition:flex-grow .7s cubic-bezier(.65,0,.35,1)}
.sector.is-activo{flex-grow:5.2}
.sector img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.55) brightness(.72);transform:scale(1.06);
  transition:filter .7s var(--ease),transform 1.2s var(--ease)}
.sector.is-activo img{filter:none;transform:scale(1)}
.sector::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(20,20,19,.82),rgba(20,20,19,.15) 45%,rgba(20,20,19,0) 70%)}
.sector:focus-visible{box-shadow:0 0 0 3px var(--papel),0 0 0 6px var(--turquesa)}
.sector__v{position:absolute;z-index:2;left:50%;bottom:24px;
  writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);
  font-weight:var(--peso-semi);font-size:var(--t-body);letter-spacing:-.01em;color:#fff;white-space:nowrap;
  transition:opacity .35s var(--ease)}
.sector__n{position:absolute;z-index:2;left:clamp(20px,2vw,36px);right:clamp(20px,2vw,36px);bottom:clamp(20px,2vw,36px);
  font-weight:var(--peso-titular);font-size:var(--t-h2);line-height:1.05;letter-spacing:var(--ls-h2);color:#fff;
  opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.sector.is-activo .sector__v{opacity:0}
.sector.is-activo .sector__n{opacity:1;transform:none;transition-delay:.25s}
/* Perfiles de cliente: rejilla de filetes finos (gesto Stripe) con icono de trazo */
.perfiles{list-style:none;margin:0 0 var(--e-bloque);padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--borde);border-left:1px solid var(--borde)}
.perfil{display:flex;flex-direction:column;justify-content:space-between;gap:var(--e-7);
  min-height:clamp(150px,13vw,210px);padding:clamp(20px,2vw,32px);
  border-right:1px solid var(--borde);border-bottom:1px solid var(--borde);
  transition:background-color .35s var(--ease)}
.perfil__ico{width:clamp(40px,3.2vw,56px);height:auto;stroke:var(--turquesa-oscuro);
  transition:transform .45s var(--ease),stroke .35s var(--ease)}
.perfil__n{font-size:var(--t-h3);font-weight:var(--peso-negrita);letter-spacing:-.02em;line-height:1.15;color:var(--tinta);
  transition:color .35s var(--ease)}
/* al pasar, la celda se invierte a marino y el icono pasa al turquesa de marca (6,63:1 sobre marino) */
.perfil{position:relative;overflow:hidden}
.perfil::before{content:"";position:absolute;inset:0;background:var(--marino);transform:translateY(101%);
  transition:transform .5s cubic-bezier(.65,0,.35,1);z-index:0}
.perfil > *{position:relative;z-index:1}
.perfil:hover::before{transform:none}
.perfil:hover .perfil__n{color:#fff}
.perfil:hover .perfil__ico{stroke:var(--turquesa);transform:translateY(-4px)}

@media (max-width:900px){
  .clientes__cab{grid-template-columns:1fr}
  .clientes__cab .lead{justify-self:start}
  .sectores{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--gap);
    margin-inline:calc(var(--lat) * -1);padding:0 var(--lat) 6px;scrollbar-width:none}
  .sectores::-webkit-scrollbar{display:none}
  .sector,.sector.is-activo{flex:0 0 72%;aspect-ratio:3/4;scroll-snap-align:start}
  .sector img{filter:none;transform:none}
  .sector__v{display:none}
  .sector__n{opacity:1;transform:none;font-size:var(--t-h3)}
  .perfiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── 10 · CERTIFICACIONES ──────────────────────────────────────────────── */
.certificacion{gap:var(--e-3);padding:var(--e-7) var(--e-6);min-height:220px}
.certificacion__norma{font-family:var(--f-titulos);font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);font-weight:var(--peso-negrita);color:var(--tinta)}
.certificacion__texto{color:var(--texto-2);flex:1 1 auto}
.certificacion__codigo{margin:0;padding-top:var(--e-4);border-top:1px solid var(--borde)}

/* ── 11 · HABLAMOS ─────────────────────────────────────────────────────── */
.hablamos__rejilla{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--e-bloque) var(--gap);align-items:start}
.hablamos__rejilla .formulario{grid-column:1 / 8}
.hablamos__rejilla .sedes{grid-column:9 / -1}
.formulario__campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.campo{display:grid;gap:8px}
.campo--ancho{grid-column:1 / -1}
.campo label{font-size:var(--t-small);font-weight:var(--peso-semi);color:var(--tinta)}
.campo__opcional{font-weight:var(--peso-regular);color:var(--texto-3)}
.campo input:not([type="checkbox"]),.campo textarea{
  width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--gris-500);border-radius:var(--r-1); /* borde de campo ≥ 3:1 (1.4.11) */
  background:var(--superficie);color:var(--texto);font-size:var(--t-body);line-height:1.4;
  transition:border-color var(--d-1) var(--ease),box-shadow var(--d-2) var(--ease);
}
.campo textarea{resize:vertical;min-height:140px}
.campo input::placeholder,.campo textarea::placeholder{color:var(--texto-3);opacity:1}
.campo input:focus-visible,.campo textarea:focus-visible{outline:2px solid var(--foco);outline-offset:2px;border-color:var(--foco);box-shadow:none}
.campo.is-error input,.campo.is-error textarea{border-color:var(--error)}
.campo__error{font-size:var(--t-small);color:var(--error);min-height:0;margin:0}
.campo__error:empty{display:none}
.campo--consentimiento{grid-template-columns:auto 1fr;align-items:start;gap:4px 12px}
.campo--consentimiento input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--marino)}
.campo--consentimiento label{font-size:var(--t-small);font-weight:var(--peso-regular);color:var(--texto-2);line-height:var(--lh-small)}
.campo--consentimiento .campo__error{grid-column:2}
.formulario__pie{display:grid;gap:var(--e-titulo);margin-top:var(--e-cta);justify-items:start}
.formulario__aviso{padding:14px 16px;border-radius:var(--r-1);font-size:var(--t-small);max-width:var(--ancho-estrecho)}
.formulario__aviso--ok{background:var(--ok-fondo);color:var(--marino)} /* el verde no pasa como texto */
.formulario__aviso--error{background:var(--error-fondo);color:var(--error)}
.sedes__lista{list-style:none} /* sin filete encima de Bergondo (David, 22-10) */
.sede-item:first-child{padding-top:0}
.sede-item{display:grid;gap:4px;padding:var(--e-5) 0;border-bottom:1px solid var(--borde)}
.sede-item__rotulo{margin:0}
.sede-item__ciudad{font-family:var(--f-titulos);font-weight:var(--peso-negrita);font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--tinta)}
.sede-item__direccion{font-size:var(--t-small)}
@media (max-width:900px){
  .hablamos__rejilla .formulario,.hablamos__rejilla .sedes{grid-column:1 / -1}
}
@media (max-width:600px){
  .formulario__campos{grid-template-columns:1fr}
  .formulario__pie .btn,.formulario__pie .btn-ing{width:100%}
  .formulario__pie .btn-ing__t{flex:1 1 auto;justify-content:flex-start}
}

/* ── 12 · FOOTER ───────────────────────────────────────────────────────── */
.footer{overflow:hidden} /* mismo aire arriba y abajo (--seccion de .banda) */
.solo-lector{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Prefooter · tambor de las «T». La T es la del logotipo (marino → blanco
   sobre el fondo marino, el verde intacto), a la altura de mayúscula de
   Manrope 800; el tambor tiene el ancho de la palabra más larga para que la
   T no se mueva. */
.tes{display:grid;gap:clamp(20px,3vw,40px)}
.tes__grande{display:flex;align-items:baseline;margin:0;color:#fff;font-family:var(--f-titulos);font-weight:var(--peso-titular);
  font-size:var(--t-gigante);line-height:1;letter-spacing:-.045em}
.tes__t{flex:0 0 auto;height:.7em;width:auto;margin:0 -.07em 0 0;overflow:visible} /* David: la palabra pegada a la T, bajo el brazo como en el logotipo. 25-10: alineada por línea base (el borde inferior del SVG cae en la base del texto) y alta como una mayúscula de DM Sans (0,7 em) */
.tes__tambor{display:block;flex:0 0 auto;height:1.3em;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent)}
.tes__pista{display:flex;flex-direction:column;transition:transform .9s var(--ease-entrada)}
.tes__pista > span{display:block;height:1.3em;line-height:1.3em;white-space:nowrap}
.tes__pista.sin-transicion{transition:none}
.tes__lista{display:flex;flex-wrap:wrap;gap:6px 28px;margin:0;padding:0;list-style:none;
  font-size:var(--t-lead);font-weight:var(--peso-semi);color:rgba(255,255,255,.38)}
.tes__lista li{transition:color .5s var(--ease)}
.tes__lista li.is-on{color:#fff}
.tes__lista li.is-on::first-letter{color:var(--turquesa-logo)}
.footer__columnas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e-cta) var(--gap);
  margin-top:var(--seccion);padding-top:var(--e-cta);border-top:1px solid var(--borde)}
.footer__cab{font-size:var(--t-small);font-weight:var(--peso-semi);color:#fff;margin-bottom:var(--e-titulo)}
.footer__lista{list-style:none;display:grid;gap:10px;font-size:var(--t-small);color:var(--texto-2)}
.footer__lista a{color:var(--texto-inverso-2);text-decoration:none}
.footer__lista a:hover{color:#fff}
.footer__submarcas{color:var(--texto-3)}
.footer__legal{margin-top:var(--e-bloque);padding-top:var(--e-5);border-top:1px solid var(--borde);color:var(--texto-3)}
.footer__legal a{color:var(--texto-inverso-2);text-decoration:none}
.footer__legal a:hover{color:#fff}
.footer__logo{max-width:var(--ancho-contenido);margin:var(--e-bloque) auto 0;padding:0 var(--lat);line-height:0}
.footer__logo img{width:100%;height:auto;will-change:transform}
@media (max-width:900px){.footer__columnas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.footer__columnas{grid-template-columns:1fr}}


/* ── Revisión 2 de Juan (22-10-2026) ─────────────────────────────────── */
/* Ciclo de vida: dos columnas, foto a la izquierda; números con la misma
   familia y peso que el nombre, sin doble filete arriba y con el «+» centrado. */
/* Rejilla de 12 columnas con 20 px entre columnas: texto en 5, una libre, contenido en 6. */
/* Cifras: sin filetes, fotos más grandes y filas alternas para romper la monotonía. */
.cifras-seccion{background:var(--gris-100)}
/* Cifras al estilo de tenity.com (23-10): filas con filete fino, todas
   iguales (sin alternar). Rejilla de 12: etiqueta arriba en 3 columnas, cifra
   en 6 alineada a la derecha y centrada, foto cuadrada en las 3 últimas. */
.cifras-seccion .numlist__f{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--e-titulo) var(--gap);
  align-items:start;min-height:0;margin:0;padding:var(--e-titulo) 0;border:0;border-top:1px solid var(--borde)}
.cifras-seccion .numlist__f:last-child{border-bottom:1px solid var(--borde)}
.cifras-seccion .numlist__k{grid-column:1 / 5;grid-row:1;max-width:18ch;margin:0;
  font-family:var(--f-titulos);font-size:var(--t-h2-s);font-weight:var(--peso-titular);
  line-height:var(--lh-h2);letter-spacing:var(--ls-h2);color:var(--marino)} /* 28 → 40 px, igual que el título de las cards del ciclo */
.cifras-seccion .numlist__nota{margin-top:var(--e-titulo);font-family:var(--f-texto);font-size:var(--t-small);font-weight:var(--peso-regular);letter-spacing:0;line-height:var(--lh-small)}
.cifras-seccion .numlist__v{grid-column:5 / 10;grid-row:1;align-self:center;justify-self:end;margin:0;padding:0;
  font-family:var(--f-titulos);font-weight:var(--peso-regular);font-size:var(--t-gigante); /* 216 px a 1920 (Tenity: 320) */
  line-height:.8;letter-spacing:-.05em;color:var(--turquesa)}
.cifras-seccion .numlist__v i{margin:0}
.cifras-seccion .numlist__fig{grid-column:10 / -1;grid-row:1;position:relative;inset:auto;translate:none;
  width:100%;aspect-ratio:1;border-radius:var(--r-3)}
@media (max-width:860px){
  .cifras-seccion .numlist__f{grid-template-columns:minmax(0,1fr);gap:var(--e-titulo)}
  .cifras-seccion .numlist__k,.cifras-seccion .numlist__v,.cifras-seccion .numlist__fig{grid-column:1;grid-row:auto}
  .cifras-seccion .numlist__v{justify-self:start;font-size:clamp(4.5rem,24vw,8rem)}
  .cifras-seccion .numlist__v [data-numero]{text-align:left!important} /* el JS reserva el ancho alineado a la derecha */
  .cifras-seccion .numlist__fig{aspect-ratio:16 / 10}
}
/* Mapa: encuadre del Atlántico, menos ancho y menos alto. */
.mapa__lienzo{max-width:1280px;margin-inline:auto}
/* Obras: foto de la obra sobre el texto, que funde con él. */
.obras__t{font-size:var(--t-h2)}
.obras__paso li{font-size:var(--t-h3)}
.obras__foto{margin:0;height:min(34vh,340px);border-radius:var(--r-3);overflow:hidden;background:var(--gris-200)}
.obras__foto img{width:100%;height:100%;object-fit:cover}
/* Certificaciones: banda marina con foto, sin tanto blanco. */
.certificaciones__rejilla{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--e-bloque) var(--gap);align-items:center}
.certificaciones__foto{grid-column:1 / 6}
.certificaciones__texto{grid-column:7 / -1}
.certificaciones__foto{margin:0;aspect-ratio:4/5;border-radius:var(--r-4);overflow:hidden;background:var(--marino-2)}
.certificaciones__foto img{width:100%;height:100%;object-fit:cover}
.certificaciones__texto{display:grid;gap:var(--e-cta)}
.certificaciones__texto h2{color:#fff;max-width:18ch;margin:0}
.certs{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.cert{display:grid;grid-template-columns:clamp(240px,19vw,320px) minmax(0,1fr) auto;gap:6px var(--gap);align-items:baseline;
  padding:var(--e-6) 0;border-bottom:1px solid rgba(255,255,255,.14)}
.cert__norma{margin:0;white-space:nowrap;font-size:var(--t-h3);font-weight:var(--peso-titular);letter-spacing:var(--ls-h3);color:#fff}
.cert__texto{margin:0;color:var(--texto-inverso-2)}
.cert__codigo{margin:0;font-size:var(--t-small);color:var(--turquesa-claro);white-space:nowrap}
@media (max-width:900px){
  .certificaciones__foto,.certificaciones__texto{grid-column:1 / -1}
  .certificaciones__foto{aspect-ratio:16/10}
  .cert{grid-template-columns:1fr}
  .cert__norma{white-space:normal}
}
@media (max-width:767px){
}


/* ── Ajustes 3 (22-10-2026) ─────────────────────────────────────────────── */
/* Mapa: texto a la izquierda, mapa a la derecha. Los puntos se deshacen hacia
   los bordes (máscara radial + aclarado irregular que hace tempus.js). */
/* 24-10: sección a toda la altura de pantalla con el contenido centrado.
   Arriba, titular a la izquierda (dos líneas) y párrafo blanco a 16 px a la
   derecha, alineados por arriba; debajo, el mapa centrado (1150 px máx.). */
.mapa{min-height:calc(100svh - var(--cab-margen) * 2);display:flex;align-items:flex-start;padding-top:var(--e-bloque)} /* menos aire arriba (60 px) */
.mapa > .contenedor{width:100%}
.mapa__rejilla{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--e-bloque) var(--gap);align-items:start}
.mapa__rejilla .mapa__cabecera{display:contents}
.mapa__rejilla .mapa__cabecera h2{grid-column:1 / 7;grid-row:1;align-self:start;max-width:none;margin:0;text-wrap:nowrap}
.mapa__rejilla .mapa__texto{grid-column:8 / -1;grid-row:1;align-self:start;max-width:62ch;margin:0;font-size:var(--t-body);line-height:var(--lh-body);color:#fff}
.mapa__rejilla .mapa__lienzo{grid-column:1 / -1;grid-row:2;justify-self:center;width:min(100%,1150px);max-width:none;margin:0} /* centrado, 1150 px como mucho: la sección cabe en 1080 */
.mapa__rejilla .mapa__lista{grid-column:1 / -1}
.mapa__latido{color:rgba(255,255,255,.85)} /* el anillo de brillo que recorre los puntos */
@media (max-width:900px){
  .mapa{min-height:0;display:block}
  .mapa__rejilla .mapa__cabecera h2,.mapa__rejilla .mapa__texto,.mapa__rejilla .mapa__lienzo{grid-column:1 / -1;grid-row:auto}
  .mapa__rejilla{row-gap:var(--e-titulo)} /* título → párrafo: 24 px */
  .mapa__rejilla .mapa__lienzo{margin-top:calc(var(--e-bloque) - var(--e-titulo))} /* párrafo → mapa: 40 px */
  .mapa__rejilla .mapa__cabecera h2{text-wrap:balance}
  .mapa__br{display:none}
  .mapa__rejilla .mapa__lienzo{margin-inline:calc(var(--lat) * -1)}
}
/* Obras: las tres columnas arrancan en la misma línea y el tambor ocupa toda la altura. */
.obras__grid{align-items:stretch}
.obras__izq,.obras__col{justify-content:flex-start}
.obras__panel{aspect-ratio:auto;align-self:stretch;min-height:min(var(--lado),60vh);container-type:size}
.obras__k{height:50cqh}
/* 24-10 · tres obras. Sector y zona en mayúsculas; el hito con la etiqueta
   del hero (cuadradito que parpadea); botón «Ver proyecto completo». El
   índice es de cuadrados, como la etiqueta, y cada entrada lleva a su obra. */
.obras__m{display:flex;flex-wrap:wrap;gap:4px 0;text-transform:uppercase;letter-spacing:.06em;font-weight:var(--peso-medio);color:var(--texto-2)}
.obras__m-sep{margin:0 .7em;color:var(--texto-3)}
.obras__h.pastilla-hero{margin:4px 0 0;padding:8px 16px 8px 14px;border-top:0;display:inline-flex;align-self:start;justify-self:start;
  gap:12px;font-size:var(--t-small);line-height:1.4;font-weight:var(--peso-medio);color:var(--tinta);max-width:100%}
.obras__h.pastilla-hero{flex-wrap:nowrap;align-items:flex-start}
.obras__h.pastilla-hero::before{margin-top:5px} /* si el hito ocupa dos líneas, el cuadradito queda en la primera */
.obras__h .obras__h-k{font-weight:var(--peso-medio);color:var(--tinta)}
.obras__e .obras__btn{justify-self:start;margin-top:calc(var(--e-cta) - 14px)}
.obras__ir{display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:4px 0;border:0;background:none;
  font:inherit;letter-spacing:inherit;color:inherit;text-align:left;cursor:pointer}
.obras__paso li i{border-radius:0}
.obras__ir:hover{color:var(--tinta)}
.obras__ir:focus-visible{outline:2px solid var(--foco);outline-offset:4px}
/* 24-10 (2) · menos líneas sueltas: el tambor de logotipos estrecha y la
   tarjeta gana ancho; la descripción reparte las líneas sin dejar viudas;
   sector y zona más pequeños; el botón siempre al pie de la tarjeta. */
.obras__m{font-size:var(--t-micro);line-height:1.5}
.obras__x{text-wrap:pretty}
.obras__h.pastilla-hero{text-wrap:pretty}
@media (min-width:981px) and (min-height:760px){
  .obras__grid{--lado:min(400px,calc(100vh - 340px));grid-template-columns:minmax(0,.8fr) var(--lado) minmax(0,1.2fr)}
  .obras__x{max-width:34ch}
  .obras__h.pastilla-hero{max-width:100%} /* la etiqueta puede ocupar todo el ancho de la tarjeta: el hito en una línea */
  .obras__col{display:flex;flex-direction:column}
  .obras__es{flex:1 1 auto;grid-template-rows:minmax(0,1fr)}
  .obras__e{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
  .obras__e .obras__foto{align-self:stretch}
  .obras__e .obras__btn{margin-top:auto}
  .obras__e .obras__h{margin-bottom:calc(var(--e-cta) - 14px)}
}
/* Perfiles de cliente: iconos propios de trazo fino, animados en bucle. */
.perfil__ico{width:clamp(60px,5vw,84px);height:auto;color:var(--tinta);stroke:currentColor;overflow:visible}
.perfil__ico .ac{stroke:var(--turquesa)}
.perfil:hover .perfil__ico{color:#fff;stroke:currentColor}
.perfil:hover .perfil__ico .ac{stroke:var(--turquesa-logo)}
.perfil__ico *{transform-box:fill-box}
.ic-cable{transform-origin:50% 0;animation:ic-cable 3.6s ease-in-out infinite}
.ic-gancho{animation:ic-gancho 3.6s ease-in-out infinite}
@keyframes ic-cable{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.45)}}
@keyframes ic-gancho{0%,100%{transform:translateY(0)}50%{transform:translateY(6.3px)}}
.ic-barra{transform-origin:0 50%;animation:ic-barra 4.2s cubic-bezier(.65,0,.35,1) infinite}
.ic-barra.b2{animation-delay:.35s}.ic-barra.b3{animation-delay:.7s}.ic-barra.b4{animation-delay:1.05s}
@keyframes ic-barra{0%{transform:scaleX(.15)}40%,80%{transform:scaleX(1)}100%{transform:scaleX(.15)}}
.ic-llave{transform-origin:50% 0;animation:ic-llave 4s ease-in-out infinite}
@keyframes ic-llave{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.ic-compas{transform-origin:50% 0;animation:ic-compas 4s ease-in-out infinite}
.ic-arco{stroke-dasharray:1;stroke-dashoffset:1;animation:ic-arco 4s ease-in-out infinite}
@keyframes ic-compas{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes ic-arco{0%{stroke-dashoffset:1}50%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
.ic-ventana{opacity:.15;animation:ic-ventana 3.2s steps(1) infinite}
.ic-ventana.v2{animation-delay:.5s}.ic-ventana.v3{animation-delay:1.1s}.ic-ventana.v4{animation-delay:.8s}.ic-ventana.v5{animation-delay:1.6s}.ic-ventana.v6{animation-delay:2.1s}
@keyframes ic-ventana{0%,45%{opacity:1}50%,100%{opacity:.15}}
.ic-onda{opacity:0;animation:ic-onda 2.4s ease-out infinite}
.ic-onda.o2{animation-delay:.3s}.ic-onda.o3{animation-delay:.6s}
@keyframes ic-onda{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.ic-engranaje{transform-origin:50% 50%}
.ic-engranaje.e1{animation:ic-giro 12s linear infinite}
.ic-engranaje.e2{animation:ic-giro-inv 6.9s linear infinite}
@keyframes ic-giro{to{transform:rotate(360deg)}}
@keyframes ic-giro-inv{to{transform:rotate(-360deg)}}
.ic-bandera{transform-origin:0 50%;animation:ic-bandera 2.6s ease-in-out infinite}
@keyframes ic-bandera{0%,100%{transform:scaleX(1) skewY(0)}50%{transform:scaleX(.8) skewY(-6deg)}}
@media (prefers-reduced-motion:reduce){
  .perfil__ico *{animation:none!important}
  .ic-arco{stroke-dashoffset:0}.ic-ventana,.ic-onda{opacity:1}
}

/* ── Ciclo de vida · áreas apiladas (23-10) ──────────────────────────── */
/* Referencia de paneles: cada área es una tarjeta que monta 8 px sobre la
   anterior, en una escala de grises de claro a oscuro. Dentro, rejilla de 12:
   numeral en 3 columnas, título y contenido en 6, el «+» al final. Una abierta
   cada vez (tempus.js). Texto secundario en --texto-2: ≥ 8,3:1 en los cuatro
   grises (AAA). */
.ciclo .filas-numeradas{display:flex;flex-direction:column;border:0;max-width:none}
/* Cards (23-10): un solo gris, el de la cabecera; sin sombras ni solape,
   separadas 4 px. El título va como el del hero: DM Sans 500, marino
   siempre (marino), abiertas o cerradas. */
.ciclo details.fila-numerada{--area-fondo:var(--gris-100);--area-px:24px;position:relative;margin-top:4px;
  background:var(--area-fondo);border:0;border-radius:var(--r-3);box-shadow:none}
.ciclo details.fila-numerada:first-child{margin-top:0}
.ciclo details.fila-numerada summary{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:none;
  align-items:start;gap:0 var(--gap);padding:var(--e-titulo) var(--area-px)}
.ciclo .fila-numerada__num{grid-area:auto;grid-column:1 / 4;align-self:center;font-family:var(--f-texto);font-size:var(--t-small);
  font-weight:var(--peso-medio);line-height:1;letter-spacing:.02em;color:var(--texto-2);font-variant-numeric:tabular-nums}
.ciclo .fila-numerada__titulo{grid-area:auto;grid-column:4 / 11;font-family:var(--f-titulos);font-size:var(--t-h2-s);
  font-weight:var(--peso-titular);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);color:var(--marino)} /* 28 → 40 px · siempre marino, abierta o cerrada */
.ciclo details.fila-numerada summary:hover .fila-numerada__titulo{text-decoration:none} /* sin subrayado */
.ciclo details.fila-numerada .fila-numerada__num{color:var(--texto-2)} /* también abierta o al pasar: el verde no pasa AAA sobre gris */
.ciclo details.fila-numerada[open] .fila-numerada__num{color:var(--tinta)}
.ciclo .fila-numerada__resumen{display:none}
.ciclo .fila-numerada__mas{grid-area:auto;grid-column:12;justify-self:end;align-self:center}
.ciclo details.fila-numerada .fila-numerada__cuerpo{padding:0 var(--area-px)}
.ciclo .fila-numerada__interior{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--e-titulo);
  max-width:none;padding:0 0 var(--e-cta)}
.ciclo .fila-numerada__interior > *{grid-column:4 / 9}
/* Foto de la sala de máquinas a la derecha del área abierta (23-10): tres
   columnas, una libre de separación, alta como el contenido. */
.ciclo .fila-numerada__interior > .fila-numerada__foto{grid-column:10 / -1;grid-row:1 / span 2;align-self:stretch;
  margin:0;min-height:240px;border-radius:var(--r-3);overflow:hidden;background:var(--gris-300)}
.ciclo .fila-numerada__foto{position:relative}
.ciclo .fila-numerada__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* la foto se ajusta al alto del texto, no lo impone */
.ciclo .fila-numerada__interior > p:first-child{color:var(--texto-2);font-size:var(--t-body)}
.ciclo .fila-numerada__rotulo{margin:0}
.ciclo .lista-inline{flex-direction:column;gap:8px;color:var(--texto-2);margin-top:calc(var(--e-titulo) * -.5)}
.ciclo .lista-inline li::after{content:none}
.ciclo .fila-numerada__interior .btn--enlace{--btn-px:0} /* alineado con el texto (btn--s le ponía 14 px) */
@media (max-width:767px){
  .ciclo details.fila-numerada{--area-px:20px}
  .ciclo details.fila-numerada summary{grid-template-columns:auto minmax(0,1fr) 20px;gap:0 16px}
  .ciclo .fila-numerada__num{grid-column:1}
  .ciclo .fila-numerada__titulo{grid-column:2}
  .ciclo .fila-numerada__mas{grid-column:3}
  .ciclo .fila-numerada__interior{grid-template-columns:minmax(0,1fr)}
  .ciclo .fila-numerada__interior > *{grid-column:1 / -1}
  .ciclo .fila-numerada__interior > .fila-numerada__foto{grid-column:1 / -1;grid-row:auto;min-height:0;aspect-ratio:16 / 10}
}

/* ── Secciones-tarjeta (23-10) ─────────────────────────────────────────── */
/* Toda la web va sobre el gris del hero: cada sección es una tarjeta sangrada
   10 px (los mismos de la cabecera y el hero) y con su radio, separada de la
   siguiente por 10 px de gris. overflow:clip recorta las esquinas sin romper
   los position:sticky de dentro (ciclo, equipo). Hero y obras ya se pintan
   así por su cuenta. */
body{background:var(--gris-200)}
#contenido > section:not(.hero):not(.obras),.footer{
  margin:0 var(--cab-margen) var(--cab-margen);border-radius:var(--r-3);overflow:clip}

/* ── 13 · MOVIMIENTO REDUCIDO ──────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .mapa__pulso{animation:none;opacity:0}
  .mapa__arco{stroke-dasharray:none;stroke-dashoffset:0}
  .pal > i,.footer__logo img{transform:none!important}
  .obras__tira,.obras__e,.obras__paso li{transition-duration:.15s}
  .sector,.sector img,.sector__n,.sector__v,.perfil::before{transition-duration:.15s}
}

.footer__creditos{margin-top:var(--e-titulo);max-width:110ch;color:var(--texto-inverso-2);font-size:var(--t-micro);line-height:1.5}

/* 24-10 · Clientes y sectores: el sector abierto cede ancho al resto;
   los tipos de cliente pasan a etiquetas grises debajo de la galería */
@media (min-width:901px){.sector.is-activo{flex-grow:3.6}}
.sectores + .clientes__sub{margin-top:var(--e-bloque)}
.clientes__etq{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.clientes__etq li{padding:10px 18px;border-radius:var(--r-1);background:var(--gris-100);
  color:var(--tinta);font-size:var(--t-small);font-weight:var(--peso-medio);line-height:1.4}
@media (max-width:1024px){.clientes__etq{gap:8px}.clientes__etq li{padding:8px 14px}}
/* 24-10 · Certificaciones: foto central con el titular encima y las tres
   normas en tarjetas alrededor (01 arriba a la izquierda, 02 abajo a la
   derecha, 03 debajo de la foto). Sustituye a la foto + lista anterior. */
.certificaciones__rejilla{grid-template-rows:auto auto auto;gap:var(--gap);align-items:stretch}
.certs{display:contents;border-top:0}
.certificaciones__foto{position:relative;grid-column:4 / 10;grid-row:1 / 3;aspect-ratio:auto;
  min-height:clamp(520px,36vw,700px);border-radius:var(--r-4);isolation:isolate}
.certificaciones__foto img{position:absolute;inset:0}
.certificaciones__foto::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 50%,rgba(20,20,19,.78),rgba(20,20,19,.55) 70%,rgba(20,20,19,.45))}
.certificaciones__titular{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:var(--e-7)}
.certificaciones__titular h2{margin:0;max-width:14ch;text-align:center;color:#fff;text-wrap:balance}
.cert{display:flex;flex-direction:column;gap:0;align-items:flex-start;padding:var(--e-6);
  border:0;border-radius:var(--r-4);background:var(--marino-2);min-height:clamp(260px,18vw,340px)}
.cert--1{grid-column:1 / 4;grid-row:1;align-self:start}
.cert--2{grid-column:10 / 13;grid-row:2;align-self:end}
.cert--3{grid-column:4 / 8;grid-row:3}
.cert__cab{display:flex;justify-content:space-between;align-items:center;align-self:stretch;margin:0 0 auto;
  font-size:var(--t-small);font-weight:var(--peso-medio);color:#fff}
.cert__punto{width:10px;height:10px;background:var(--turquesa)}
.cert .cert__norma{margin:var(--e-7) 0 0;white-space:normal;font-family:var(--f-titulos);font-size:var(--t-h3);
  line-height:1.2;font-weight:var(--peso-titular);color:#fff}
.cert .cert__texto{margin:var(--e-3) 0 0;font-size:var(--t-body);line-height:1.5;color:var(--texto-inverso-2);max-width:32ch}
.cert .cert__codigo{margin:var(--e-5) 0 0;font-size:var(--t-small);color:var(--turquesa-claro);white-space:normal}
@media (max-width:1024px){
  .certificaciones__rejilla{grid-template-rows:none}
  .certificaciones__foto{grid-column:1 / -1;grid-row:auto;min-height:clamp(380px,60vw,560px)}
  .cert--1,.cert--2,.cert--3{grid-column:span 4;grid-row:auto;align-self:stretch}
  .cert{min-height:0}
  .cert .cert__norma{margin-top:var(--e-6)}
}
@media (max-width:767px){
  .cert--1,.cert--2,.cert--3{grid-column:1 / -1}
  .certificaciones__foto{min-height:360px}
  .certificaciones__titular{padding:var(--e-5)}
}
/* 24-10 (2) · Certificaciones: composición más recogida (no ocupa todo el
   grid), foto más pequeña, fondo con degradado luminoso y franjas de luz, y
   tarjetas translúcidas que dejan ver el fondo. AAA: con el brillo máximo del
   degradado debajo, el texto secundario de la tarjeta queda a ≥ 7,5:1. */
.certificaciones{position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(ellipse 55% 60% at 50% 42%,rgba(80,175,164,.28),rgba(80,175,164,0) 70%),
    radial-gradient(ellipse 60% 50% at 12% 0%,rgba(43,43,40,.9),rgba(43,43,40,0) 70%),
    radial-gradient(ellipse 60% 55% at 92% 100%,rgba(43,43,40,.9),rgba(43,43,40,0) 70%),
    var(--marino)}
.certificaciones::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 56px,rgba(255,255,255,0) 56px 112px);
  -webkit-mask:radial-gradient(ellipse 60% 70% at 50% 45%,#000,transparent 75%);
          mask:radial-gradient(ellipse 60% 70% at 50% 45%,#000,transparent 75%)}
.cert{background:rgba(20,20,19,.5);border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
@media (min-width:1025px){
  .certificaciones__rejilla{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);
    padding-inline:max(var(--lat,7.5%),calc((100% - 1280px) / 2))} /* contenido de 1280 px como máximo */
  .certificaciones__foto{grid-column:2;grid-row:1 / 3;min-height:clamp(460px,32vw,600px)}
  .cert{min-height:clamp(240px,15vw,290px)}
  .cert--1{grid-column:1;grid-row:1;align-self:start}
  .cert--2{grid-column:3;grid-row:2;align-self:end}
  .cert--3{grid-column:2;grid-row:3;width:85%}
}
/* 24-10 (3) · Párrafo único: 17 px, interlineado 1,6, regular, --texto-2 sobre
   claro y blanco sobre oscuro. No afecta a entradillas (.lead) ni subtítulos. */
.fila-numerada__interior > p,.equipo__parrafos p,.obras__x,.mapa__rejilla .mapa__texto,.cert .cert__texto{
  font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--peso-regular);letter-spacing:var(--ls-body)}
.fila-numerada__interior > p,.equipo__parrafos p,.obras__x{color:var(--texto-2)}
.obras__x{text-wrap:pretty}
.cert .cert__texto{color:#fff}
/* 24-10 · Cabecera fija: el fondo sigue a sangre y el contenido se ciñe al
   grid (85 % / 90 %) como la cabecera de arriba; el botón va sin flecha; la sección activa se marca con
   el cuadradito de la etiqueta del hero en lugar de la línea. */
.js .capsula-cabecera.is-sticky:not(.is-abierta) .capsula-cabecera__in{padding-inline:var(--lat)} /* fondo a sangre, contenido en el grid */
.capsula-cabecera.is-sticky .capsula-cabecera__cta .btn-ing__i{display:none}
.nav a::after{display:none} /* sin línea ni en activo ni en hover */
.nav a:not(.btn-ing)::before{content:"";position:absolute;left:-14px;top:50%;width:8px;height:8px;margin-top:-4px;
  background:var(--turquesa);opacity:0;transition:opacity var(--d-2) var(--ease)}
.nav a[aria-current="page"]::before{opacity:1}
@media (max-width:900px){.nav a:not(.btn-ing)::before{display:none}}
/* 24-10 · Relleno de sección unificado: --seccion (88 px · 64 en móvil)
   arriba y abajo en todas las secciones (hero y pie aparte). */
.mapa{padding-top:var(--seccion)}
.obras__card{padding-block:var(--seccion)}
/* 25-10 · Interacción al pasar el ratón. Solo con puntero fino y con
   movimiento permitido; el color de los estados ya cumplía AAA. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  /* Botón ingeniero: la flecha sale por la derecha y vuelve a entrar */
  .btn-ing__i svg{transition:transform .35s var(--ease)}
  .btn-ing:hover .btn-ing__i svg{animation:flecha-ida .45s var(--ease) both}
  @keyframes flecha-ida{0%{transform:none}49%{transform:translateX(150%)}50%{transform:translateX(-150%)}100%{transform:none}}
  /* Menú: el cuadradito asoma al pasar */
  .nav a:not(.btn-ing):hover::before{opacity:.45}
  .nav a[aria-current="page"]:hover::before{opacity:1}
  /* Tarjetas de certificación: suben, el cuadradito gira y un foco sigue al cursor */
  .cert{position:relative;overflow:hidden;transition:transform .5s var(--ease),border-color .5s var(--ease)}
  .cert::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(80,175,164,.2),transparent 70%)}
  .cert > *{position:relative}
  .cert:hover{border-color:rgba(80,175,164,.45)}
  .cert:hover::before{opacity:1}
  .cert__punto{transition:transform .5s var(--ease)}
  .cert:hover .cert__punto{transform:rotate(90deg) scale(1.3)}
  /* Fotos: acercamiento lento */
  .equipo__foto img,.certificaciones__foto img,.obras__foto img{transition:transform 1.2s var(--ease)}
  .equipo__foto:hover img,.certificaciones__foto:hover img,.obras__foto:hover img{transform:scale(1.05)}
  /* Etiquetas de cliente */
  .clientes__etq li{transition:background-color .3s var(--ease),transform .3s var(--ease)}
  .clientes__etq li:hover{background:var(--gris-200);transform:translateY(-2px)}
  /* Índice de proyectos: el cuadradito crece */
  .obras__paso li i{transition:transform .3s var(--ease),background-color .3s var(--ease)}
  .obras__ir:hover i{transform:scale(1.4)}
  /* Pie: los enlaces se desplazan un poco */
  .footer__lista a,.footer__legal a{display:inline-block;transition:transform .3s var(--ease),color .3s var(--ease)}
  .footer__lista a:hover{transform:translateX(4px)}
}
/* 25-10 · Hero: la cabecera de arriba se separa más del borde del bloque
   (10 → 32 px). La fija sigue a 8 px. */
.js .capsula-cabecera:not(.is-sticky):not(.is-abierta){padding-top:32px}
/* 25-10 · Certificaciones en movimiento: paralaje de tarjetas y foto (--py)
   y franjas del fondo que se desplazan (--fx). Las variables las mueve
   tempus.js con el scroll; sin JS o con movimiento reducido valen 0. */
.cert,.certificaciones__foto img{translate:0 var(--py,0px)}
.certificaciones__foto img{inset:-48px 0;height:calc(100% + 96px)} /* margen para que la foto no deje hueco al desplazarse */
.certificaciones::before{background-position:var(--fx,0px) 0}

/* 25-10 · Barrido de textos: cada palabra se recorta por JS (clip-path) */
.bw{display:inline-block}
.equipo__botones{margin-top:var(--e-cta)}

/* 25-10 · Equipo: pie sobre la foto (como los sectores) con la cifra y los
   perfiles que van pasando; la imagen se desplaza dentro con el scroll (--py). */
.equipo__foto{position:relative}
.equipo__foto img{position:relative;translate:0 var(--py,0px);height:calc(100% + 80px);margin-top:-40px}
.equipo__foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(20,20,19,.85),rgba(20,20,19,.2) 40%,rgba(20,20,19,0) 60%)}
.equipo__pie{position:absolute;z-index:2;left:0;right:0;bottom:0;display:grid;grid-template-columns:auto 1fr;align-items:end;
  gap:var(--e-6,24px);padding:clamp(20px,2vw,36px);color:#fff}
.equipo__dato{margin:0;display:flex;flex-direction:column;gap:6px;font-size:var(--t-small)}
.equipo__dato b{font-family:var(--f-titulos);font-weight:500;font-size:var(--t-h2);line-height:1;letter-spacing:-.025em}
.equipo__dato--rol{flex-direction:row;align-items:center;gap:12px;padding-left:var(--e-6,24px);border-left:1px solid rgba(255,255,255,.35);
  font-size:var(--t-body);min-height:2.4em}
.equipo__punto{width:10px;height:10px;flex:none;background:var(--turquesa)}
.equipo__rol{display:inline-block;overflow:hidden;vertical-align:bottom;margin-left:.3em;font-weight:500}
.equipo__rol-v{display:inline-block}
@media (max-width:767px){
  .equipo__pie{grid-template-columns:1fr}
  .equipo__dato--rol{padding-left:0;border-left:0}
}

/* 25-10 · Certificaciones: la 03 no se mueve (no pisa la foto) y el fondo
   respira solo: el brillo turquesa deriva y las franjas se deslizan sin fin. */
@property --deriva{syntax:'<length>';inherits:false;initial-value:0px}
.certificaciones{background:
    radial-gradient(ellipse 60% 50% at 12% 0%,rgba(43,43,40,.9),rgba(43,43,40,0) 70%),
    radial-gradient(ellipse 60% 55% at 92% 100%,rgba(43,43,40,.9),rgba(43,43,40,0) 70%),
    var(--marino)}
.certificaciones::after{content:"";position:absolute;inset:-20%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 34% 38% at 50% 46%,rgba(80,175,164,.3),rgba(80,175,164,0) 70%),
    radial-gradient(ellipse 22% 26% at 30% 70%,rgba(80,175,164,.14),rgba(80,175,164,0) 70%)}
.certificaciones::before{background-position:calc(var(--fx,0px) + var(--deriva)) 0}
.certs .cert--3{translate:none}
@media (prefers-reduced-motion:no-preference){
  .certificaciones::after{animation:cert-brillo 16s ease-in-out infinite alternate}
  .certificaciones::before{animation:cert-franjas 24s linear infinite}
}
@keyframes cert-brillo{
  0%{transform:translate(-6%,-3%) scale(1)}
  50%{transform:translate(5%,4%) scale(1.12)}
  100%{transform:translate(-2%,6%) scale(.95)}
}
@keyframes cert-franjas{to{--deriva:112px}}