/* ── Color ───────────────────────────────────────────────────────────────
     Dos capas. Arriba la paleta de marca, que no cambia nunca: son los valores
     del manual. Debajo los papeles —fondo, texto, regla, acento— que sí
     cambian, porque el sitio es claro salvo en los bloques que viven sobre
     imagen o sobre el diagrama luminoso. Esos vuelven a declarar los mismos
     papeles con los valores oscuros, así que cualquier componente anidado se
     invierte solo y no hay que duplicar ni una regla. */
  :root{
    /* paleta de marca, fija */
    --navy:#11192B; --deep:#070B14; --void:#04070C; --lift:#161F33;
    --teal:#3E6067; --turq:#6EC9C8; --sand:#CCB078;

    /* papeles sobre claro */
    --bg:#FAFCFE; --bg-alt:#E8EFF8; --bg-hondo:#DCE7F5;
    /* medidos sobre blanco: 7,1:1 y 5,5:1. El primer --faint que probé,
       #6B7887, daba 4,51:1 y caía por debajo de AA sobre las tarjetas, que no
       son blanco puro */
    --ink:#11192B; --dim:#4C5A6B; --faint:#5F6A78;
    /* el turquesa de marca da 1,7:1 sobre blanco y no sirve para texto: sobre
       claro el acento es el verde azulado del manual, que da 7,3:1 */
    --acc:#2E5C63; --acc-2:#83652D;
    --line:rgba(17,25,43,.14); --hair:rgba(17,25,43,.07);
    --wash:rgba(23,54,110,.045); --wash-2:rgba(23,54,110,.08);
    --glass:rgba(23,54,110,.055); --glass-line:rgba(23,54,110,.13);
    /* El tinte estaba en 216° —azul violeta— y al lado de fotografías cálidas
       se leía apagado, como un gris lavanda. Baja a 208°, azul de cielo
       limpio, y gana saturación en el extremo hondo para que sea un color y
       no una suciedad del papel. */
    --tinte:#C6DDF2; --tinte-alto:#A9CBE6;
    --azul:#1B57A4;
    --field:rgba(23,54,110,.05); --field-line:rgba(23,54,110,.2);
    --fade:250,252,254;
    --btn-bg:var(--navy); --btn-fg:#FFFFFF; --btn-wipe:var(--acc);
    --logo:brightness(0);
    /* los logotipos ajenos conservan su color; sólo se recortan sobre oscuro */
    --logo-marca:none; --logo-marca-op:1;
    --sombra:0 22px 48px rgba(17,25,43,.1);
    --marca:linear-gradient(104deg,rgba(110,201,200,0) 4%,rgba(102,184,186,.5) 26%,
      rgba(78,138,146,.82) 48%,rgba(56,104,113,.94) 76%,rgba(46,92,99,1) 100%);
    --marca-op:.22;
    --err:#A03828;
    color-scheme:light;
  }

  /* Bloques que siguen en oscuro: el hero y la portada de sección van sobre
     vídeo o fotografía, el modelo de inversión sobre un diagrama que sólo
     brilla en negativo, y el pie cierra la página. .sec--dark es el mismo
     recurso a mano, para una franja de declaración. */
  .hero,.qh,.pin,.ft,.sec--dark,.port,.cifras,.fondofoto,.rail,.canal,.firma,.eqh,.esc,.ali2,.alz,.art__cab{
    --bg:var(--navy); --bg-alt:var(--deep); --bg-hondo:var(--void);
    --ink:#E9EDF2; --dim:#9AA7B6; --faint:#8793A3;
    --acc:var(--turq); --acc-2:var(--sand);
    --line:rgba(233,237,242,.11); --hair:rgba(233,237,242,.06);
    --wash:rgba(233,237,242,.022); --wash-2:rgba(233,237,242,.055);
    --glass:rgba(255,255,255,.075); --glass-line:rgba(255,255,255,.12);
    --tinte:rgba(233,237,242,.04); --tinte-alto:rgba(233,237,242,.075);
    --field:rgba(233,237,242,.09); --field-line:rgba(233,237,242,.2);
    --fade:7,11,20;
    --btn-bg:#FFFFFF; --btn-fg:var(--navy); --btn-wipe:var(--turq);
    --logo:brightness(0) invert(1);
    --logo-marca:brightness(0) invert(1); --logo-marca-op:.9;
    --sombra:0 22px 48px rgba(0,0,0,.3);
    --marca:linear-gradient(104deg,rgba(110,201,200,0) 4%,rgba(104,186,189,.34) 26%,
      rgba(96,163,168,.78) 48%,rgba(78,130,140,.96) 76%,rgba(58,98,110,1) 100%);
    --marca-op:.22;
    --err:#E4A597;
    color-scheme:dark;
    color:var(--ink);
  }
  .sec--dark{background:var(--navy)}

  :root{
    --max:1420px; --gut:clamp(20px,4.4vw,72px);
    --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
    --edge:calc((100vw - min(100vw,1420px))/2 + var(--gut));
    --entpad:clamp(48px,6vw,88px);
    --secpad:clamp(84px,11vw,168px);
    --r-field:10px; --r-panel:16px; --r-pill:999px;
    --mega:clamp(2.1rem,5.2vw,4.3rem);
    --disp:clamp(2.2rem,4.6vw,3.7rem);
    --h2:clamp(1.8rem,3.4vw,2.9rem);
    --fig:clamp(2.6rem,7.6vw,6.2rem);
    --e:cubic-bezier(.16,1,.3,1);
    --ui:"Archivo","Helvetica Neue",Arial,sans-serif;
    --ff:"Schibsted Grotesk","Archivo","Helvetica Neue",Arial,sans-serif;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth;background:var(--bg)}
  body{margin:0;background:var(--bg);color:var(--ink);
    font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:18px;line-height:1.65;
    -webkit-font-smoothing:antialiased;overflow-x:hidden}
  h1,h2,h3,h4{margin:0;font-family:var(--ff);line-height:1.02;font-weight:700;
    letter-spacing:-.038em;text-wrap:balance;overflow-wrap:break-word}
  /* pantallas muy angostas: palabras como "telecomunicaciones" no caben
     al tamaño mínimo del clamp y provocaban scroll horizontal */
  @media (max-width:380px){
    :root{--mega:clamp(1.9rem,8.8vw,4.3rem);--disp:clamp(1.78rem,7.9vw,3.7rem);
      --h2:clamp(1.5rem,6.6vw,2.9rem)}
  }
  .stmt{font-family:var(--ff)}
  p,ul,ol{margin:0}
  a{color:inherit}
  img{max-width:100%;display:block}
  /* Cuando iOS bloquea el autoplay —modo de bajo consumo, sobre todo— dibuja
     su propio botón de reproducción sobre el vídeo. Ocultarlo deja a la vista
     el póster, que es exactamente lo que debe verse mientras no reproduce. */
  video::-webkit-media-controls,
  video::-webkit-media-controls-start-playback-button,
  video::-webkit-media-controls-play-button{
    display:none !important;-webkit-appearance:none;opacity:0}
  button{font:inherit;color:inherit;background:none;border:0}
  :focus-visible{outline:2px solid var(--acc);outline-offset:3px}
  ::selection{background:var(--acc);color:#fff}

  .shell{width:100%;max-width:var(--max);margin-inline:auto;
    padding-left:calc(var(--gut) + var(--safe-l));
    padding-right:calc(var(--gut) + var(--safe-r))}
  /* oculto a la vista, presente para lectores de pantalla */
  .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;border:0}
  /* enlace de salto: invisible hasta recibir el foco con el teclado */
  .saltar{position:fixed;top:10px;left:10px;z-index:200;transform:translateY(-160%);
    background:var(--acc);color:#fff;font-family:var(--ui);font-size:.8rem;
    font-weight:600;letter-spacing:.06em;padding:12px 20px;border-radius:var(--r-pill);
    text-decoration:none;transition:transform .25s var(--e)}
  .saltar:focus-visible{transform:none}
  .mono{font-family:var(--ui);font-size:.72rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase}
  .mono--turq{color:var(--acc)}
  .mono--sand{color:var(--acc-2)}
  .dim{color:var(--dim)}
  .lede{color:var(--dim);max-width:60ch;font-size:clamp(1rem,1.15vw,1.12rem)}
  .measure{max-width:66ch}

  /* grain */
  body::after{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E")}

  /* ── nav ── */
  .nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:70;
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
    border-bottom:1px solid var(--hair)}
  .nav__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
  .nav__logo{width:118px;filter:var(--logo);flex:none}
  .nav__links{display:flex;gap:clamp(12px,2vw,30px);list-style:none;margin:0;padding:0}
  .nav__links a{text-decoration:none;font-family:var(--ui);font-size:.93rem;font-weight:500;
    letter-spacing:.002em;color:var(--dim);padding:8px 0;position:relative;white-space:nowrap;
    transition:color .25s var(--e)}
  .nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--acc);
    transform:scaleX(0);transform-origin:left;transition:transform .3s var(--e)}
  @media (hover:hover){.nav__links a:hover{color:var(--ink)}}
  .nav__links a[aria-current]::after{transform:scaleX(1)}
  @media (hover:hover){.nav__links a:hover::after{transform:scaleX(1)}}
  .nav__links a[aria-current]{color:var(--acc)}
  /* Las pestañas son inline-flex porque llevan el chevrón al lado; Inicio no
     tiene submenú y era el único enlace en línea. Su caja medía 8,5px menos y
     se apoyaba 1px más arriba, así que el subrayado de la página activa no
     quedaba a la misma altura que el de las pestañas. Todas las entradas de
     primer nivel comparten caja. */
  .nav__links > li > a{display:inline-flex;align-items:center}
  /* ── submenús ────────────────────────────────────────────────────────────
     La pestaña es un enlace a su página; el panel lista los subapartados, que
     son secciones de esa misma página. Por eso no hay entrada de "visión
     general": pulsar la pestaña ya lleva al principio del documento. */
  .nav__links a.nav__top{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
    font-family:var(--ui);font-size:.93rem;font-weight:500;color:var(--dim);
    padding:8px 0;position:relative;white-space:nowrap;transition:color .25s var(--e)}
  .has-sub:has(.nav__tg[aria-expanded="true"]) a.nav__top{color:var(--ink)}
  @media (hover:hover){.nav__links a.nav__top:hover{color:var(--ink)}}
  .nav__links a.nav__top[aria-current]{color:var(--acc)}
  .has-sub{position:relative;display:flex;align-items:center;gap:2px}
  /* la flecha es su propio botón: el nombre navega, la flecha despliega */
  .nav__tg{display:inline-flex;align-items:center;justify-content:center;
    background:none;border:0;margin:0;padding:10px 4px;color:var(--dim);cursor:pointer;
    line-height:0;border-radius:6px;transition:color .25s var(--e)}
  .nav__tg[aria-expanded="true"]{color:var(--ink)}
  @media (hover:hover){.nav__tg:hover{color:var(--ink)}}
  .nav__tg svg{transition:transform .3s var(--e);opacity:.75}
  .nav__tg[aria-expanded="true"] svg{transform:rotate(180deg)}
  .nav__sub{position:absolute;top:calc(100% + 10px);left:-18px;z-index:80;
    min-width:248px;list-style:none;margin:0;padding:8px;display:grid;gap:1px;
    background:color-mix(in srgb, var(--bg) 97%, transparent);backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);border-radius:var(--r-panel);
    box-shadow:inset 0 0 0 1px var(--line),var(--sombra)}
  /* El panel baja 10px para despegarse de la barra, y ese hueco no pertenecía
     a nadie: al cruzarlo para llegar a un subapartado el puntero salía del
     <li>, saltaba mouseleave y el panel se cerraba antes de poder pulsar. Esta
     banda invisible lo cose al panel sin moverlo. */
  .nav__sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
  .nav__sub[hidden]{display:none}
  /* Cada subapartado se llena de azul como una pastilla, con el mismo radio
     que los botones: el rectángulo de esquinas vivas desentonaba con el resto
     de la página. */
  .nav__sub a{display:block;position:relative;text-decoration:none;
    font-family:var(--ui);font-size:.88rem;font-weight:500;color:var(--dim);
    padding:11px 20px;border-radius:var(--r-pill);
    transition:color .2s var(--e),background .2s var(--e)}
  /* el subrayado de las entradas de primer nivel alcanza también a los
     subapartados, donde cruzaría la fila entera */
  .nav__sub a::after{display:none}
  .nav__sub a:focus-visible{color:#fff;background:var(--azul)}
  @media (hover:hover){.nav__sub a:hover{color:#fff;background:var(--azul)}}
  .nav__sub a[aria-current]{color:var(--acc)}

  /* ── notas de actualidad ──
     Fecha y procedencia a un lado, titular y cuerpo al otro. Se lista en <ol>
     para que el orden cronológico esté en el marcado y no sólo en el estilo. */
  .notas{list-style:none;margin:0;padding:0}
  .nota{display:grid;gap:clamp(12px,1.6vw,30px);padding:clamp(28px,3.4vw,46px) 0;
    border-top:1px solid var(--hair)}
  .nota:last-child{border-bottom:1px solid var(--hair)}
  @media (min-width:860px){.nota{grid-template-columns:minmax(150px,.2fr) 1fr;
    align-items:start;align-items:baseline}}
  .nota__meta{display:grid;gap:7px;align-content:start}
  .nota h3{font-size:clamp(1.12rem,1.6vw,1.45rem);line-height:1.24;
    letter-spacing:-.028em;margin-bottom:14px;max-width:34ch}
  .nota p{color:var(--dim);max-width:72ch}

  .burger{display:none;border:1px solid var(--line);border-radius:var(--r-field);padding:9px 11px;cursor:pointer;line-height:0}
  .burger span{display:block;width:17px;height:1.5px;background:var(--ink);margin:3.5px 0;transition:transform .3s var(--e)}
  /* El umbral sigue a la barra, no al revés: con seis pestañas y el selector
     de idioma mide unos 900px y desbordaba hasta cerca de los 1060. Si cambia
     el menú hay que volver a medirlo, porque una entrada de más lo desborda
     sin previo aviso. */
  @media (max-width:1080px){
    /* el <nav> queda vacío en la fila (su lista baja en absoluto) pero sigue
       contando para space-between: sin reordenar, la hamburguesa se quedaba
       a media barra en vez de pegada a la derecha */
    .burger{display:block;order:2}
    .nav__links{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
      background:var(--bg);border-bottom:1px solid var(--line);padding:6px var(--gut) 22px}
    .nav__links[hidden]{display:none}
    .nav__links a{display:block;padding:15px 0;font-size:.82rem;border-bottom:1px solid var(--hair)}
    /* en vertical la entrada ocupa el ancho, con chevrón o sin él */
    .nav__links > li > a{display:flex;width:100%}
    .nav__links a::after{display:none}
    .nav__links a.nav__top{display:flex;width:100%;justify-content:space-between;
      padding:15px 0;font-size:.82rem;border-bottom:1px solid var(--hair)}
    /* en vertical la fila es nombre + flecha, y el panel baja a lo ancho */
    .has-sub{display:grid;grid-template-columns:1fr auto;align-items:stretch;gap:0}
    .nav__tg{min-width:52px;padding:0 4px 0 20px;justify-content:flex-end;
      border-bottom:1px solid var(--hair);border-radius:0}
    .nav__sub{grid-column:1 / -1}
    .nav__sub{position:static;min-width:0;padding:0 0 6px 14px;background:none;
      backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
      border-radius:0;gap:0}
    .nav__sub::before{display:none}
    .nav__sub a{font-size:.8rem;padding:12px 0;border-radius:0;
      border-bottom:1px solid var(--hair)}
  }

  /* ── hero ── */
  .hero{position:relative;min-height:min(92vh,920px);display:flex;align-items:flex-end;
    padding-block:clamp(90px,14vh,150px) clamp(48px,7vh,80px);overflow:hidden;
    background:radial-gradient(120% 100% at 78% 42%,#1E3740 0%,#11192B 44%,#070B14 100%)}
  .hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
    opacity:.95;transform:scale(1.34) translateX(9%);pointer-events:none}
  .hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(95deg,rgba(7,11,20,.92) 0%,rgba(7,11,20,.7) 36%,rgba(7,11,20,.12) 68%),
      linear-gradient(to bottom,rgba(7,11,20,.5) 0%,rgba(7,11,20,0) 30%,rgba(7,11,20,.7) 100%)}
  /* el vídeo también se reproduce en móvil; el póster se queda detrás y
     cubre el hueco mientras carga */
  @media (max-width:820px){
    .hero{background-image:url("/assets/img/hero-git-poster.webp");background-size:cover;background-position:58% center}
  }
  .hero__mark{position:absolute;top:42%;right:3%;width:min(46vw,600px);aspect-ratio:2.049;
    transform:translateY(-50%);opacity:.2;pointer-events:none;z-index:1;
    -webkit-mask:url("/assets/logos/logo-git-iso.svg") no-repeat center/contain;
    mask:url("/assets/logos/logo-git-iso.svg") no-repeat center/contain;
    background:linear-gradient(115deg,#6EC9C8 0%,#5AA3A6 55%,#47797F 100%)}
  .motion .hero__mark{animation:isoWipe 2500ms var(--e) forwards}
  @keyframes isoWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  .hero__in{position:relative;z-index:3;width:100%}
  /* nombre corporativo sobre el titular: mayor presencia */
  .hero__eye{font-size:clamp(.88rem,1.15vw,1.12rem);font-weight:600;
    letter-spacing:.17em;color:var(--acc);display:flex;align-items:flex-start;
    gap:clamp(12px,1.2vw,18px);margin-bottom:clamp(4px,.8vw,12px)}
  .hero__eye::before{content:"";flex:none;width:clamp(26px,3.2vw,48px);height:2px;
    margin-top:.62em;background:var(--acc);transform-origin:left;transform:scaleX(0);
    transition:transform .9s var(--e) .35s}
  /* en pantallas angostas se aprieta para no partirse en dos líneas */
  @media (max-width:520px){
    .hero__eye{font-size:.79rem;letter-spacing:.12em;gap:10px}
    .hero__eye::before{width:20px}
  }
  .in .hero__eye::before,.no-motion .hero__eye::before{transform:none}
  @media (prefers-reduced-motion:reduce){.hero__eye::before{transform:none;transition:none}}
  .hero h1{font-size:var(--mega);line-height:1.06;letter-spacing:-.026em;margin-block:26px 0}
  .hero h1 .ln--b i{font-weight:700}
  .hero h1 .ln--l i{font-weight:400;color:var(--acc)}
  .hero__meta{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);align-items:flex-end;
    justify-content:space-between;margin-top:clamp(34px,5vh,54px);
    border-top:1px solid var(--line);padding-top:26px}
  .hero__lede{color:var(--dim);max-width:48ch;font-size:clamp(.98rem,1.1vw,1.08rem)}
  @media (max-width:900px){.hero{align-items:center;min-height:auto;padding-block:84px 64px}
    .hero__mark{right:-30%;width:130vw;opacity:.13}}

  /* line-mask reveal */
  /* el relleno inferior amplía la zona de recorte para que quepan los
     descendentes (g, y, p, j); el margen negativo lo anula en el flujo */
  .ln{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
  .ln > i{display:block;font-style:normal;transform:translateY(128%);
    transition:transform .82s var(--e);transition-delay:var(--d,0ms)}
  .motion .in .ln > i,.no-motion .ln > i{transform:none}
  .motion .ln > i{will-change:transform}

  /* ── buttons ── */
  .cta{display:flex;flex-wrap:wrap;gap:12px}
  .btn{font-family:var(--ui);font-size:.74rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
    padding:15px 32px;border-radius:var(--r-pill);text-decoration:none;display:inline-flex;
    align-items:center;gap:11px;border:1px solid;cursor:pointer;position:relative;overflow:hidden;
    transition:color .3s var(--e)}
  .btn span{position:relative;z-index:2}
  .btn::before{content:"";position:absolute;inset:0;background:var(--btn-wipe);
    transform:translateY(101%);transition:transform .38s var(--e)}
  @media (hover:hover){.btn:hover::before{transform:none}}
  .btn--solid{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}
  .btn--solid::before{background:var(--btn-wipe)}
  .btn--line{border-color:var(--field-line);color:var(--ink)}
  @media (hover:hover){.btn--line:hover{color:var(--btn-fg)}}
  .btn[data-off]{opacity:.42;pointer-events:none}

  /* ── section frame ── */
  .sec{position:relative;padding-block:var(--secpad)}
  /* división entre secciones: filete degradado + acento turquesa al margen */
  .sec::before,.pin::before,.rail::before,.band::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,var(--line) 0%,var(--hair) 58%,
      transparent 100%);pointer-events:none;z-index:4}
  .sec::after,.pin::after,.rail::after,.band::after{content:"";position:absolute;top:0;left:var(--edge);
    width:clamp(52px,6.2vw,92px);height:2px;
    background:linear-gradient(90deg,var(--acc) 0%,var(--acc-2) 78%,transparent 100%);
    pointer-events:none;z-index:5}
  .page > :first-child::before,.page > :first-child::after{display:none}
  /* la nav fija no debe tapar el destino de un salto: cada subapartado del
     menú es un ancla dentro de su pestaña */
  main [id]{scroll-margin-top:clamp(84px,10vh,120px)}
  /* ── Fondo de sección ──
     Tres capas: un aura muy abierta en color de marca, un degradado vertical
     dentro de la banda y el color base. El aura cambia de esquina y de color
     en las secciones pares, así que una página alterna sola sin que haya que
     marcar nada en el HTML: dos secciones seguidas nunca tienen la luz en el
     mismo sitio.
     Las opacidades son de un dígito a propósito. Por encima del 10% esto deja
     de ser profundidad y empieza a ser un fondo de color. */
  .sec--void{
    background:
      radial-gradient(118% 82% at 10% 0%, color-mix(in srgb, var(--acc) 8%, transparent) 0%, transparent 60%),
      linear-gradient(180deg, color-mix(in srgb, var(--bg-alt) 34%, var(--bg)) 0%, var(--bg) 26%,
        var(--bg) 74%, color-mix(in srgb, var(--bg-alt) 26%, var(--bg)) 100%)}
  main > .sec--void:nth-of-type(even){
    background:
      radial-gradient(104% 76% at 88% 6%, color-mix(in srgb, var(--acc-2) 7%, transparent) 0%, transparent 58%),
      linear-gradient(180deg, color-mix(in srgb, var(--bg-alt) 26%, var(--bg)) 0%, var(--bg) 24%,
        var(--bg) 76%, color-mix(in srgb, var(--bg-alt) 34%, var(--bg)) 100%)}
  .sec--navy{
    --fade:230,238,248;
    background:
      radial-gradient(96% 78% at 90% 4%, color-mix(in srgb, var(--acc) 12%, transparent) 0%, transparent 56%),
      linear-gradient(180deg, color-mix(in srgb, var(--bg) 38%, var(--bg-alt)) 0%, var(--bg-alt) 22%,
        var(--bg-alt) 72%, var(--bg-hondo) 100%)}
  main > .sec--navy:nth-of-type(even){
    background:
      radial-gradient(92% 74% at 12% 100%, color-mix(in srgb, var(--acc-2) 9%, transparent) 0%, transparent 56%),
      linear-gradient(180deg, var(--bg-hondo) 0%, var(--bg-alt) 26%,
        var(--bg-alt) 74%, color-mix(in srgb, var(--bg) 30%, var(--bg-alt)) 100%)}
  /* franja de declaración: el navy gana una luz turquesa como la del hero */
  .sec--dark{background:
    radial-gradient(84% 120% at 76% 18%, rgba(110,201,200,.13) 0%, transparent 58%),
    linear-gradient(168deg, var(--lift) 0%, var(--navy) 46%, var(--deep) 100%)}
  .hd{display:grid;gap:clamp(18px,2.4vw,30px);margin-bottom:clamp(44px,6vw,86px)}
  @media (min-width:1000px){.hd--split{grid-template-columns:1.32fr .68fr;gap:clamp(24px,3vw,56px);
    align-items:end;align-items:last baseline}}
  .hd h1,.hd h2{font-size:var(--disp)}

  /* ── cifras ── */
  .stats{display:grid;border-top:1px solid var(--line)}
  @media (min-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}
  @media (min-width:1080px){.stats{grid-template-columns:repeat(4,1fr)}}
  .stat{position:relative;transition:background .45s var(--e);
    padding:clamp(28px,3.2vw,46px) clamp(22px,2.2vw,34px) clamp(34px,4vw,58px)}
  @media (min-width:1080px){
    .stat:first-child{padding-left:0}
    .stat:last-child{padding-right:0}
  }
  @media (min-width:700px) and (max-width:1079px){
    .stat:nth-child(odd){padding-left:0}
    .stat:nth-child(even){padding-right:0}
  }
  @media (max-width:699px){.stat{padding-left:0;padding-right:0}}
  @media (hover:hover){.stat:hover{background:var(--wash)}}
  .stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line)}
  .stat:first-child::before{display:none}
  @media (max-width:1079px){
    .stat::before{display:none}
    .stat{border-top:1px solid var(--line)}
    .stat:first-child{border-top:0}
  }
  @media (min-width:700px) and (max-width:1079px){
    .stat:nth-child(2){border-top:0}
    .stat:nth-child(odd)::before{display:none}
    .stat:nth-child(even)::before{display:block}
  }
  .stat__bar{position:absolute;left:0;top:0;height:2px;width:0;background:var(--acc);
    opacity:.4;transition:width 1.1s var(--e) .12s,opacity .3s var(--e),height .3s var(--e)}
  .stat.in .stat__bar{width:100%}
  @media (hover:hover){.stat:hover .stat__bar{opacity:1;height:3px}}
  .stat__i{font-family:var(--ui);font-size:.7rem;font-weight:500;letter-spacing:.14em;color:var(--faint);
    transition:color .35s var(--e)}
  @media (hover:hover){.stat:hover .stat__i{color:var(--acc)}}
  .stat__pre{font-family:var(--ui);font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
    color:var(--faint);margin-top:26px}
  .stat__n{font-family:var(--ff);font-variant-numeric:tabular-nums;font-weight:600;
    font-size:clamp(2.5rem,4.3vw,3.8rem);line-height:.92;letter-spacing:-.052em;
    margin-top:14px;transition:transform .55s var(--e)}
  .stat:not(.stat--lead) .stat__n{margin-top:26px}
  @media (hover:hover){.stat:hover .stat__n{transform:translateY(-6px)}}
  .stat__n small{font-size:.3em;letter-spacing:.02em;color:var(--dim);margin-left:.34em;font-weight:400}
  .stat h3{font-size:1rem;letter-spacing:-.02em;margin-top:24px}
  /* El indicador sin cifra pone su titular donde las demás celdas ponen el
     número, así que crece para pesar lo mismo en la fila. El margen superior
     iguala al de .stat__n para que todos arranquen a la misma altura. */
  .stat--text h3{font-size:clamp(1.35rem,2.1vw,1.9rem);line-height:1.08;
    letter-spacing:-.035em;margin-top:26px}
  .stat .stat__d{color:var(--dim);font-size:.89rem;margin-top:9px;max-width:30ch}
  .stat--lead .stat__n{
    background:linear-gradient(100deg,#4E9E9D 0%,#6EC9C8 30%,#CFF2F1 48%,#6EC9C8 66%,#4E9E9D 100%);
    background-size:240% 100%;-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent}
  .stat--lead .stat__n small{-webkit-text-fill-color:var(--dim);color:var(--dim)}
  .motion .stat--lead .stat__n{animation:sweep 7s linear infinite}
  @keyframes sweep{from{background-position:240% 0}to{background-position:-40% 0}}
  .motion .stat[data-r]{opacity:0;transform:translateY(26px)}
  .motion .stat[data-r].in{opacity:1;transform:none;
    transition:opacity .6s var(--e),transform .7s var(--e);transition-delay:var(--d,0ms)}

  .claim{display:grid;gap:clamp(16px,2.6vw,40px);padding-block:clamp(36px,4.2vw,60px);
    border-top:1px solid var(--line)}
  @media (min-width:1080px){
    .claim{grid-template-columns:repeat(2,1fr);gap:0;align-items:center}
    .claim h3{padding-right:clamp(24px,3vw,56px)}
    .claim p{padding-left:clamp(22px,2.2vw,34px)}
  }
  .note{margin-top:clamp(24px,2.8vw,38px);color:var(--faint);font-size:.84rem;max-width:56ch}
  .claim h3{font-size:clamp(1.45rem,2.9vw,2.35rem);letter-spacing:-.032em;line-height:1.1;max-width:19ch}
  .claim h3 em{font-style:normal;color:var(--acc-2)}
  .claim p{color:var(--dim);font-size:.96rem;max-width:44ch}

  /* ── entity rows (portafolio) ── */
  .ent{border-top:1px solid var(--line);position:relative;overflow:hidden}
  .ent__wash{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--e);pointer-events:none;
    background:radial-gradient(70% 120% at 18% 50%,
      color-mix(in srgb, var(--acc) 12%, transparent),transparent 70%)}
  @media (hover:hover){.ent:hover .ent__wash{opacity:1}}
  .ent__in{display:grid;gap:clamp(26px,3.4vw,54px);padding-block:var(--entpad);position:relative;z-index:2}
  @media (min-width:1000px){
    .ent__in{grid-template-columns:.58fr 1fr;align-items:stretch}
    .ent__in > div:not(.ent__media){align-self:center}
    .ent--flip .ent__in{grid-template-columns:1fr .58fr}
    .ent--flip .ent__media{order:2}
  }
  .ent__i{font-family:var(--ui);font-size:.72rem;font-weight:500;letter-spacing:.13em;color:var(--acc);margin-bottom:16px}
  .ent__logo{filter:var(--logo-marca);opacity:var(--logo-marca-op);width:auto;margin-bottom:26px}
  .ent__logo--mov{height:124px}
  .ent__logo--ibw{height:54px}
  @media (max-width:600px){.ent__logo--mov{height:92px}.ent__logo--ibw{height:40px}}
  .ent h1,.ent h2,.ent h3{font-size:clamp(1.15rem,1.9vw,1.55rem);letter-spacing:-.025em;margin-bottom:8px}
  /* Cuando la ficha de una compañía es la página entera, su nombre es el
     titular del documento y el tamaño de ficha se queda corto. */
  .ent h1{font-size:clamp(1.75rem,3.2vw,2.6rem);margin-bottom:10px}
  .ent__sub{font-family:var(--ui);font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
    color:var(--acc-2);margin-bottom:26px}
  .ent__body{display:grid;gap:16px;max-width:64ch}
  .ent__body p{color:var(--dim);font-size:.99rem}
  /* lista de capacidades, no botones: sin borde, sin píldora, sin hover */
  .caps{display:grid;gap:11px clamp(20px,2.4vw,38px);list-style:none;padding:0;margin-top:30px;
    grid-template-columns:repeat(auto-fit,minmax(216px,1fr))}
  .caps li{font-family:var(--ui);font-size:.74rem;font-weight:500;letter-spacing:.08em;
    text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:11px}
  .caps li::before{content:"";flex:none;width:14px;height:1px;background:var(--acc);opacity:.75}
  /* Nombres propios largos —instituciones, aliados— dentro de la misma lista:
     en versalitas y con el interletrado abierto se vuelven ilegibles y parten
     en dos líneas. Va después de .caps li porque comparten especificidad. */
  .caps--nm li{text-transform:none;letter-spacing:.002em;font-size:.88rem;
    line-height:1.45;align-items:baseline}
  .caps--nm li::before{position:relative;top:-.3em}

  /* ── pinned model ── */
  .pin{position:relative}
  @media (min-width:1000px){
    .pin{height:320vh}
    /* El visor se reparte en tres —rótulo arriba, composición al medio,
       progreso abajo— en lugar de centrar un bloque corto y dejar 276px de
       aire arriba y otros tantos abajo. Es el mismo reparto del riel. */
    .pin__vp{position:sticky;top:0;height:100vh;display:grid;
      grid-template-columns:minmax(0,100%);grid-template-rows:auto 1fr auto;
      align-items:center;overflow:hidden;
      padding-block:clamp(84px,11vh,124px) clamp(26px,4vh,46px)}
  }
  .pin__grid{display:grid;gap:clamp(30px,4vw,70px);width:100%;align-self:center}
  @media (min-width:1000px){.pin__grid{grid-template-columns:.85fr 1.15fr;align-items:center}}
  /* logotipo con el claim, extraído del manual de marca. La proporción tiene
     que coincidir con la del archivo enmascarado o el barrido se descuadra:
     2.3256 este, 2.049 el isotipo suelto que se usaba antes. */
  /* El logotipo es el ancla visual de la sección: a 380px el bloque medía
     unos 300px de alto en una pantalla de 800 y dejaba 250 de aire arriba y
     abajo. Crece hasta ocupar su columna. */
  .pin__dial{--p:6;position:relative;aspect-ratio:2.3256;max-width:min(100%,620px);width:100%}
  .dial__bg,.dial__fill,.dial__glow{position:absolute;inset:0;pointer-events:none;
    -webkit-mask:url("/assets/logos/logo-git-claim.png") no-repeat center/contain;
    mask:url("/assets/logos/logo-git-claim.png") no-repeat center/contain}
  .dial__bg{background:rgba(233,237,242,.115)}
  .dial__glow{mix-blend-mode:screen;
    background:radial-gradient(26% 130% at calc(var(--p) * 1%) 50%,
      rgba(176,238,237,.5) 0%,rgba(176,238,237,.22) 38%,rgba(176,238,237,0) 72%)}
  .dial__fill{
    background:linear-gradient(90deg,
      #4CACAB 0%,
      #6EC9C8 calc(var(--p) * 1% - 30%),
      #85D3D2 calc(var(--p) * 1% - 12%),
      rgba(154,222,221,.88) calc(var(--p) * 1% - 2%),
      rgba(143,213,212,.6)  calc(var(--p) * 1% + 5%),
      rgba(130,201,200,.3)  calc(var(--p) * 1% + 11%),
      rgba(118,191,190,.11) calc(var(--p) * 1% + 17%),
      rgba(110,185,184,0)   calc(var(--p) * 1% + 24%),
      rgba(110,185,184,0) 100%)}
  /* rótulo de la sección: se mantiene fijo mientras el paso cambia */
  .pin__hd{margin-bottom:clamp(22px,2.6vw,34px);padding-bottom:15px;
    border-bottom:1px solid var(--line)}
  .pin__hd h1,.pin__hd h2{font-family:var(--ff);font-size:clamp(1.42rem,2.15vw,1.95rem);
    font-weight:600;letter-spacing:-.025em;color:var(--dim)}

  .pin__steps{position:relative}
  /* align-content:start evita que la rejilla reparta el alto sobrante entre filas */
  .pin__step{display:grid;gap:14px;align-content:start}
  @media (min-width:1000px){
    .pin__step{position:absolute;inset:0;opacity:0;transform:translateY(20px);
      transition:opacity .5s var(--e),transform .55s var(--e);pointer-events:none;
      grid-template-columns:auto 1fr;column-gap:clamp(20px,2.4vw,38px);row-gap:16px}
    .pin__step .pin__n{grid-row:1 / span 2}
    .pin__step.on{opacity:1;transform:none;pointer-events:auto}
    /* reserva fija: el pie no salta al cambiar de paso (el más alto mide 136px) */
    .pin__steps{min-height:clamp(230px,32vh,330px)}
  }
  @media (max-width:999px){
    .pin__step{padding-block:28px;border-top:1px solid var(--line)}
    .pin__dial{display:none}
  }
  .pin__n{font-family:var(--ff);font-size:clamp(2.3rem,4.2vw,3.6rem);font-weight:700;
    letter-spacing:-.045em;line-height:.82;color:rgba(110,201,200,.5);
    font-variant-numeric:tabular-nums}
  .pin__step h3{font-size:clamp(1.7rem,3.5vw,2.95rem);align-self:center}
  /* :not(.pin__n) — si no, esta regla le gana en especificidad al numeral */
  .pin__step p:not(.pin__n){color:var(--dim);max-width:50ch;font-size:1rem}
  .pin__foot{display:flex;align-items:center;gap:clamp(16px,2vw,30px);
    margin-top:clamp(26px,3vw,42px)}
  @media (max-width:999px){.pin__foot{display:none}}
  .pin__count{font-family:var(--ui);font-size:.72rem;font-weight:500;
    letter-spacing:.14em;color:var(--faint);flex:none}
  .pin__count b{color:var(--acc);font-weight:600}
  .pin__ticks{display:flex;gap:10px;flex:1;max-width:330px}
  .pin__ticks i{position:relative;display:block;flex:1;height:2px;
    background:rgba(233,237,242,.15);overflow:hidden}
  .pin__ticks i::after{content:"";position:absolute;top:0;bottom:0;left:0;
    width:var(--f,0%);background:var(--acc)}

  /* ── split blocks ── */
  .split{display:grid;gap:clamp(30px,4.2vw,72px)}
  @media (min-width:1000px){
    .split{grid-template-columns:1fr .8fr;align-items:center}
    .split--r{grid-template-columns:.8fr 1fr}
    /* liderazgo: la columna de la foto mide lo que mide la foto */
    .split--lead{grid-template-columns:auto 1fr;gap:clamp(28px,3.4vw,56px);align-items:center}
  }
  /* el titular ocupa lo que mide, no una fracción fija: acerca las columnas */
  @media (min-width:1000px){
    /* ambas columnas miden lo suyo y el conjunto se centra en la sección */
    .split--tight{grid-template-columns:auto auto;justify-content:center;
      gap:clamp(34px,4vw,64px);align-items:center}
  }
  /* panel translúcido, mismo vidrio que los mosaicos y el retrato */
  /* fit-content: la caja se ciñe a la medida de lectura y nunca excede la columna */
  .panel{position:relative;border-radius:var(--r-panel);padding:clamp(26px,2.8vw,40px);
    width:fit-content;max-width:100%;
    background:var(--glass);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .panel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    border:1px solid var(--glass-line)}
  .panel > *{position:relative;z-index:1}

  .stmt{font-size:var(--disp);letter-spacing:-.03em;font-weight:700;line-height:1.05;max-width:22ch}
  .stmt em{font-style:normal;color:var(--acc)}

  /* ── list grid ── */
  .lg{display:grid;border-top:1px solid var(--line)}
  @media (min-width:760px){.lg--2{grid-template-columns:repeat(2,1fr)}}
  @media (min-width:1080px){.lg--3{grid-template-columns:repeat(3,1fr)}.lg--5{grid-template-columns:repeat(5,1fr)}}
  .lg__i{padding:clamp(24px,2.8vw,38px) clamp(20px,2vw,30px) clamp(30px,3.4vw,46px) 0;
    border-bottom:1px solid var(--line);position:relative;transition:background .4s var(--e)}
  @media (hover:hover){.lg__i:hover{background:var(--wash)}}
  .lg__i .mono{color:var(--faint);display:block;margin-bottom:16px}
  .lg__i h3{font-size:1.14rem;letter-spacing:-.022em;margin-bottom:11px}
  .lg__i p{color:var(--dim);font-size:.94rem}

  /* ── figuras a sangre ── */
  .figbox{position:relative;overflow:hidden;background:var(--bg-alt);margin:0;
    height:100%;min-height:clamp(420px,52vw,720px)}
  /* pointer-events:none — el vídeo es decorado: sin esto, un toque en iOS
     invoca los controles nativos sobre él */
  .figbox img,.figbox video{width:100%;height:100%;object-fit:cover;display:block;
    pointer-events:none;transform:scale(1.02);transition:transform 1.4s var(--e)}
  @media (hover:hover){.ent:hover .figbox img,.split--media:hover .figbox img{transform:scale(1.08)}}
  .figbox--vid{background:#070B14 center/cover}
  .portrait{max-width:258px;width:100%;margin:0;position:relative;
    border-radius:var(--r-panel);overflow:hidden;
    background:var(--glass);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    box-shadow:var(--sombra)}
  .portrait img{width:100%;height:auto;display:block;position:relative;z-index:1}
  .portrait::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
    border-radius:inherit;border:1px solid var(--glass-line)}
  @media (max-width:999px){.portrait{max-width:216px}}
  @media (max-width:820px){
    .figbox--vid{background-image:url("/assets/img/red-poster.jpg")}
  }
  .sec--navy .figbox{--fade:17,25,43}
  .sec--void .figbox{--fade:7,11,20}
  .figbox::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(to bottom,rgba(var(--fade),.55) 0%,rgba(var(--fade),0) 22%,
      rgba(var(--fade),0) 78%,rgba(var(--fade),.55) 100%)}
  /* canto interno difuminado hacia el texto */
  .figbox::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none}
  .bleed-r.figbox::before,.bleed-r .figbox::before{
    background:linear-gradient(90deg,rgb(var(--fade)) 0%,rgba(var(--fade),.82) 8%,
      rgba(var(--fade),.34) 22%,rgba(var(--fade),.08) 36%,rgba(var(--fade),0) 48%)}
  .bleed-l.figbox::before,.bleed-l .figbox::before{
    background:linear-gradient(270deg,rgb(var(--fade)) 0%,rgba(var(--fade),.82) 8%,
      rgba(var(--fade),.34) 22%,rgba(var(--fade),.08) 36%,rgba(var(--fade),0) 48%)}
  /* la figura del perfil sangra también en vertical */
  @media (min-width:1000px){
    .split--media{align-items:stretch}
    .split--media > :not(.figbox){align-self:center}
    .split--media .figbox{margin-block:calc(-1 * var(--secpad));height:auto;align-self:stretch}
  }
  .bleed-l{margin-left:calc(-1 * var(--edge))}
  .bleed-r{margin-right:calc(-1 * var(--edge))}
  .ent .bleed-l,.ent .bleed-r{margin-block:calc(-1 * var(--entpad))}
  .split--media{align-items:stretch}
  @media (max-width:999px){
    .bleed-l,.bleed-r{margin-left:calc(-1 * var(--edge));margin-right:calc(-1 * var(--edge))}
    .ent .bleed-l,.ent .bleed-r{margin-block:0 clamp(28px,5vw,44px)}
    .figbox{min-height:clamp(320px,72vw,520px)}
    /* la figura cierra la sección: sin esto el relleno inferior queda como
       una banda muerta bajo la imagen, porque no hay nada después.
       La altura tiene que ser definida: con el 100% heredado la figura encoge
       junto a la fila y el margen negativo no llega a notarse, y con auto el
       vídeo impone su proporción y se come la pantalla entera */
    .split--media .figbox{margin-bottom:calc(-1 * var(--secpad));
      height:clamp(320px,72vw,520px)}
  }

  /* ══════ QUIÉNES SOMOS ══════ */

  /* hero de página con figura a sangre */
  .qh{position:relative;overflow:hidden;background:var(--navy);
    min-height:min(84vh,800px);display:flex;align-items:flex-end;
    padding-block:clamp(86px,12vh,140px) clamp(44px,6vh,72px)}
  .qh__fig{position:absolute;inset:0;z-index:0;overflow:hidden}
  .qh__fig img{width:100%;height:100%;object-fit:cover;object-position:58% center;transform:scale(1.03)}
  .qh__fig::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(17,25,43,.92) 0%,rgba(17,25,43,.84) 20%,
      rgba(17,25,43,.56) 42%,rgba(17,25,43,.18) 64%,rgba(17,25,43,.1) 82%,rgba(17,25,43,.32) 100%),
      linear-gradient(to bottom,rgba(7,11,20,.58) 0%,rgba(7,11,20,.08) 26%,
        rgba(7,11,20,.1) 62%,rgba(7,11,20,.72) 100%)}
  .qh__in{position:relative;z-index:2;width:100%}
  .qh h1{font-size:var(--disp);margin-block:24px 26px}
  .qh .lede{max-width:50ch}
  .qh__meta{display:grid;gap:22px;margin-top:clamp(36px,5vh,58px);
    border-top:1px solid var(--line);padding-top:24px}
  @media (min-width:700px){.qh__meta{grid-template-columns:repeat(3,auto);
    justify-content:start;gap:clamp(30px,5.5vw,84px)}}
  .qh__m b{display:block;font-family:var(--ui);font-size:.67rem;font-weight:500;
    letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-bottom:9px}
  .qh__m span{font-family:var(--ff);font-size:clamp(1.02rem,1.5vw,1.28rem);
    font-weight:600;letter-spacing:-.022em}
  @media (max-width:900px){
    .qh{min-height:auto;padding-block:76px 56px}
    .qh__fig img{object-position:78% 62%}
    .qh__fig::after{background:linear-gradient(to bottom,rgba(17,25,43,.8) 0%,
      rgba(17,25,43,.72) 26%,rgba(17,25,43,.82) 56%,rgba(17,25,43,.96) 100%)}
  }

  /* banda declarativa a sangre completa */
  .band{position:relative;overflow:hidden;display:flex;align-items:center;
    min-height:clamp(320px,42vw,520px);padding-block:clamp(56px,7vw,100px)}
  .band__fig{position:absolute;inset:0;z-index:0}
  .band__fig img{width:100%;height:100%;object-fit:cover;object-position:center 54%}
  .band__fig::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(4,7,12,.93) 0%,rgba(4,7,12,.86) 26%,
      rgba(4,7,12,.6) 44%,rgba(4,7,12,.24) 64%,rgba(4,7,12,.16) 86%,rgba(4,7,12,.34) 100%),
      linear-gradient(to bottom,rgba(4,7,12,.72) 0%,rgba(4,7,12,.14) 24%,
        rgba(4,7,12,.16) 70%,rgba(4,7,12,.82) 100%)}
  .band__in{position:relative;z-index:2;width:100%}
  @media (max-width:820px){
    .band{min-height:404px}
    .band__fig img{object-position:44% 56%}
  }
  .band__stmt{font-family:var(--ff);font-size:clamp(1.22rem,2.3vw,1.92rem);font-weight:600;
    line-height:1.24;letter-spacing:-.03em;max-width:30ch;color:var(--ink);margin-top:20px}

  /* marca de agua: isotipo GIT al fondo de sección */
  .markwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
  .sec--mark > .shell{position:relative;z-index:1}
  /* cada marca define su propio archivo y proporción con --src */
  .mark{position:absolute}
  .mark i{display:block;width:100%;height:100%;opacity:var(--op,var(--marca-op));
    -webkit-mask:var(--src) no-repeat center/contain;
    mask:var(--src) no-repeat center/contain;
    background:var(--marca);
    clip-path:inset(0 100% 0 0);transition:clip-path 2.2s var(--e) .3s}
  .mark.in i{clip-path:inset(0 0 0 0)}
  .no-motion .mark i{clip-path:none;transition:none}
  @media (prefers-reduced-motion:reduce){.mark i{clip-path:none;transition:none}}
  /* quiénes somos: isotipo solo */
  /* Estaba centrada sobre la columna de texto y ensuciaba el titular. Sangra
     por el borde izquierdo —se ve un fragmento del lazo, no un logotipo
     pegado detrás— y baja a la altura del hilo, donde el texto ya no manda. */
  /* Va al hueco blanco de la derecha del titular, no detrás de la columna de
     texto: ahí no ensucia nada y ocupa el vacío que quedaba. Sangra por el
     borde derecho para que se lea como fragmento y no como logotipo pegado. */
  .mark--co{--src:url("/assets/logos/logo-git-line.png");aspect-ratio:2.049;
    --op:.26;
    left:auto;right:calc(-1 * clamp(40px,6vw,150px));
    top:auto;bottom:clamp(10px,2vw,44px);
    width:min(46vw,620px)}
  @media (max-width:1200px){
    .mark--co{right:calc(-1 * clamp(30px,5vw,90px));width:min(54vw,520px)}}
  /* contacto: logotipo completo, ocupa el vacío sobre los tipos de consulta */
  .mark--ct{--src:url("/assets/logos/logo-git-line-full.png");aspect-ratio:3.2677;
    left:calc(-1 * clamp(30px,4vw,88px));top:clamp(10px,1.6vw,30px);
    width:min(58vw,780px)}
  @media (max-width:999px){.markwrap{display:none}}

  /* columna fija + prosa */
  .stk{display:grid;gap:clamp(28px,4vw,72px)}
  @media (min-width:1000px){
    .stk{grid-template-columns:.74fr 1fr;align-items:start;align-items:baseline}
    .stk__side{position:sticky;top:clamp(98px,12vh,142px)}
  }
  .stk__side .stmt{max-width:13ch}
  .prose{display:grid;gap:20px}
  /* Todos los párrafos comparten tratamiento. El primero llevaba entrada
     destacada —tipografía de titulares, más cuerpo y más peso— y se leía
     despegado del resto en lugar de abrir un bloque continuo. */
  .prose p{color:var(--dim);font-size:clamp(1rem,1.15vw,1.12rem);max-width:60ch}

  /* línea de tiempo horizontal fijada */
  /* ═══════════════════════════════════════════════════════════════════
     LÍNEA DE TIEMPO
     Era una franja delgada de tarjetas flotando en el centro de una pantalla
     pálida: 330px de vacío arriba y 320 abajo, el año en letra de pie de
     página y ningún hilo que uniera los hitos.

     Ahora el riel es el momento oscuro de la sección: el año manda a tamaño
     de titular, una espina recorre los ocho hitos y se enciende a tu paso, y
     las tarjetas alternan arriba y abajo de ella, que es lo que llena el alto
     y lo que hace que se lea como una línea de tiempo y no como una fila.
     ═══════════════════════════════════════════════════════════════════ */
  .rail{position:relative;--fade:7,11,20;
    background:
      radial-gradient(64% 86% at 88% 24%, rgba(110,201,200,.16) 0%, transparent 58%),
      radial-gradient(52% 74% at 6% 88%, rgba(204,176,120,.1) 0%, transparent 62%),
      linear-gradient(166deg, var(--lift) 0%, var(--navy) 44%, var(--deep) 100%)}
  @media (min-width:1000px){
    .rail{height:265vh}
    /* el visor se reparte en tres: cabecera arriba, riel al medio, escala
       abajo. Antes centraba un bloque corto y el resto era aire. */
    .rail__vp{position:sticky;top:0;height:100vh;display:grid;
      /* La columna se declara al ancho de la pantalla: sin esto la dimensiona
         el max-content del riel —3.479px— y la cabecera y la escala se iban
         fuera de la vista. */
      grid-template-columns:minmax(0,100%);grid-template-rows:auto 1fr auto;
      overflow:hidden;
      padding-block:clamp(84px,11vh,124px) clamp(26px,4vh,46px)}
    .rail__track{width:max-content;padding-inline:var(--edge);will-change:transform;
      align-self:center;justify-self:start}
  }
  @media (max-width:999px){
    .rail{padding-block:var(--secpad)}
    .rail__bar,.rail__linea,.rail__esc{display:none}
  }
  /* La cabecera vive dentro del visor fijo: la página es una sola sección,
     no una portada seguida del riel. En ancho se reparte en dos —titular a la
     izquierda, entradilla y progreso a la derecha— para no comerse el alto
     que necesita la línea de tiempo. */
  .rail__hd{margin-bottom:0;display:grid;gap:clamp(14px,2vw,40px)}
  @media (min-width:1000px){
    .rail__hd{grid-template-columns:1fr auto;align-items:end}
    .rail__hd2{justify-self:end;text-align:right;max-width:46ch}
    .rail__hd2 .rail__bar{margin-left:auto}}
  .rail__hd h1,.rail__hd h2{font-size:clamp(2rem,3.9vw,3.2rem);margin-top:clamp(12px,1.6vw,20px)}
  .rail__hd .lede{font-size:clamp(.96rem,1.05vw,1.06rem)}
  .rail__bar{position:relative;height:2px;background:rgba(233,237,242,.14);
    margin-top:clamp(18px,2.2vw,28px);max-width:320px;border-radius:var(--r-pill)}
  .rail__bar i{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:inherit;
    background:linear-gradient(90deg,var(--sand),var(--turq))}

  .rail__track{display:flex;gap:clamp(18px,2.2vw,34px);position:relative}

  /* ── la espina ──
     Recorre el riel entero por detrás de las tarjetas y se enciende hasta el
     punto en el que estás, de modo que el avance se ve sin leer nada. */
  .rail__linea{position:absolute;left:0;right:0;top:50%;height:1px;
    background:rgba(233,237,242,.16);z-index:0}
  .rail__linea i{position:absolute;left:0;top:-1px;height:3px;width:0;
    border-radius:var(--r-pill);
    background:linear-gradient(90deg,
      color-mix(in srgb, var(--sand) 70%, transparent) 0%, var(--turq) 78%, #fff 100%);
    box-shadow:0 0 18px rgba(110,201,200,.45)}

  /* ── cada hito ──
     --k lo escribe el guion: vale 1 cuando el hito está en el centro de la
     pantalla y 0 cuando está lejos. Con eso el que miras se enciende y los
     demás se retiran, sin una sola clase más. */
  .rail__c{flex:0 0 clamp(300px,28vw,420px);position:relative;z-index:1;
    display:grid;grid-template-rows:1fr auto 1fr;
    height:clamp(380px,50vh,540px);
    opacity:calc(.3 + .7 * var(--k,1));
    transition:opacity .45s var(--e)}
  /* El bloque se ancla a la espina y crece alejándose de ella. Con filas 1fr,
     un hito largo desbordaba su fila y el párrafo cruzaba la línea. */
  .rail__b{position:absolute;left:0;right:0;bottom:50%;
    margin-bottom:clamp(22px,2.8vh,34px);display:grid;gap:9px;
    transform:translateY(calc((1 - var(--k,1)) * 14px));
    transition:transform .5s var(--e)}
  /* los pares cuelgan por debajo de la espina */
  .rail__c:nth-of-type(even) .rail__b{bottom:auto;top:50%;
    margin-bottom:0;margin-top:clamp(22px,2.8vh,34px);
    transform:translateY(calc((1 - var(--k,1)) * -14px))}
  /* el trazo corto que une el nodo con el texto: sin él son tarjetas sueltas */
  .rail__b::after{content:"";position:absolute;left:0;bottom:calc(-1 * clamp(22px,2.8vh,34px));
    width:1px;height:clamp(22px,2.8vh,34px);background:rgba(233,237,242,.22)}
  .rail__c:nth-of-type(even) .rail__b::after{bottom:auto;
    top:calc(-1 * clamp(22px,2.8vh,34px))}
  .rail__c.on .rail__b::after{background:color-mix(in srgb, var(--turq) 70%, transparent)}

  .rail__nodo{grid-row:2;justify-self:start;width:13px;height:13px;border-radius:50%;
    margin-left:-6px;background:var(--deep);border:2px solid rgba(233,237,242,.3);
    transition:border-color .5s var(--e),background .5s var(--e),
      box-shadow .5s var(--e),transform .5s var(--e)}
  .rail__c.on .rail__nodo{border-color:var(--turq);background:var(--turq);transform:scale(1.15);
    box-shadow:0 0 0 7px color-mix(in srgb, var(--turq) 16%, transparent),
      0 0 22px rgba(110,201,200,.55)}

  /* el año pasa de rótulo de pie de página a protagonista */
  .rail__y{display:block;font-family:var(--ff);font-weight:700;letter-spacing:-.05em;
    line-height:.86;font-size:clamp(2.4rem,4.6vw,4.1rem);
    background:linear-gradient(164deg,#FFFFFF 0%,var(--turq) 92%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .rail__c:nth-of-type(even) .rail__y{
    background:linear-gradient(164deg,#FFFFFF 0%,var(--sand) 94%);
    -webkit-background-clip:text;background-clip:text}
  .rail__c h3{font-size:clamp(1.1rem,1.5vw,1.36rem);letter-spacing:-.026em;
    margin-top:4px;max-width:20ch}
  .rail__c p{color:var(--dim);font-size:.92rem;line-height:1.52;max-width:38ch}

  /* escala inferior: de dónde a dónde llega la línea */
  .rail__esc{display:flex;justify-content:space-between;align-items:center;
    gap:20px;font-family:var(--ui);font-size:.7rem;font-weight:500;
    letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
  .rail__esc span{display:flex;align-items:center;gap:12px}
  .rail__esc span::before{content:"";width:clamp(22px,3vw,48px);height:1px;
    background:rgba(233,237,242,.3)}

  @media (max-width:999px){
    .rail__track{flex-direction:column;gap:0;width:100%;max-width:var(--max);
      margin-inline:auto;padding-inline:var(--gut)}
    .rail__hd{margin-bottom:clamp(28px,3.6vw,52px)}
    .rail__c{flex:0 0 auto;height:auto;display:block;opacity:1;
      border-left:1px solid rgba(233,237,242,.16);padding-left:26px;
      padding-block:0 30px}
    .rail__b{position:static;padding:0;margin:0;transform:none;display:grid}
    .rail__c:nth-of-type(even) .rail__b{padding:0;transform:none}
    .rail__b::after{display:none}
    .rail__nodo{position:absolute;left:0;top:10px;margin-left:-7px}
    .rail__c{position:relative}
    .rail__y{font-size:clamp(2rem,9vw,2.8rem)}
  }

  /* índice fijo + bloques numerados */
  .idx{display:grid;gap:clamp(26px,3.6vw,68px)}
  @media (min-width:1000px){
    .idx{grid-template-columns:.7fr 1fr;align-items:start}
    .idx__side{position:sticky;top:clamp(98px,12vh,142px)}
    .idx__i{grid-template-columns:auto 1fr;gap:0 clamp(24px,3vw,50px);align-items:start}
    @media (hover:hover){.idx__i:hover{padding-left:10px}}
  }
  .idx__i{display:grid;gap:14px;position:relative;
    padding-block:clamp(28px,3.4vw,50px);border-top:1px solid var(--line);
    transition:padding-left .5s var(--e)}
  .idx__i::after{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;
    background:var(--acc);transition:width 1.1s var(--e) var(--d,0ms)}
  .idx__i.in::after{width:clamp(44px,5.4vw,80px)}
  .idx__n{font-family:var(--ff);font-size:clamp(1.9rem,3.2vw,2.9rem);font-weight:700;
    letter-spacing:-.045em;line-height:.88;color:color-mix(in srgb, var(--ink) 50%, transparent);
    transition:color .5s var(--e)}
  @media (hover:hover){.idx__i:hover .idx__n{color:var(--acc)}}
  .idx__i h3{font-size:clamp(1.18rem,1.85vw,1.55rem);letter-spacing:-.026em;margin-bottom:12px}
  .idx__i p{color:var(--dim);font-size:.98rem;max-width:56ch}

  /* renglones numerados */
  .led{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
  .led__i{display:grid;gap:8px;position:relative;
    padding-block:clamp(22px,2.6vw,34px);border-bottom:1px solid var(--line);
    transition:padding-left .5s var(--e),background .5s var(--e)}
  @media (min-width:900px){
    .led__i{grid-template-columns:clamp(70px,7.6vw,122px) minmax(0,21ch) 1fr;
      gap:0 clamp(20px,2.6vw,44px);align-items:baseline}
    @media (hover:hover){.led__i:hover{padding-left:12px;background:var(--wash)}}
  }
  .led__n{font-family:var(--ff);font-size:clamp(1.45rem,2.5vw,2.2rem);font-weight:700;
    letter-spacing:-.045em;line-height:1;color:color-mix(in srgb, var(--ink) 50%, transparent);
    transition:color .45s var(--e)}
  @media (hover:hover){.led__i:hover .led__n{color:var(--acc)}}
  .led__i h3{font-size:clamp(1.04rem,1.5vw,1.26rem);letter-spacing:-.025em}
  .led__i p{color:var(--dim);font-size:.96rem;max-width:62ch}

  /* mosaicos esmerilados */
  .tiles{display:grid;gap:clamp(12px,1.2vw,18px)}
  @media (min-width:620px){.tiles{grid-template-columns:repeat(2,1fr)}}
  @media (min-width:1080px){.tiles{grid-template-columns:repeat(5,1fr)}}
  .tile{position:relative;border-radius:var(--r-panel);overflow:hidden;
    padding:clamp(22px,2.2vw,30px);
    background:var(--glass);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    transition:transform .5s var(--e),background .5s var(--e)}
  .tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    border:1px solid var(--glass-line);transition:border-color .5s var(--e)}
  @media (hover:hover){.tile:hover{transform:translateY(-6px);
    background:var(--wash-2)}}
  @media (hover:hover){.tile:hover::after{border-color:color-mix(in srgb, var(--acc-2) 42%, transparent)}}
  .tile__n{position:absolute;top:clamp(20px,2vw,26px);right:clamp(20px,2vw,26px);
    font-family:var(--ui);font-size:.67rem;font-weight:600;
    letter-spacing:.16em;color:var(--acc-2);opacity:.72}
  .tile__g{display:block;width:clamp(44px,3.9vw,54px);height:auto;
    margin-bottom:clamp(26px,2.8vw,40px);overflow:visible}
  .tile__g path,.tile__g circle{fill:none;stroke:var(--acc-2);stroke-width:1.4;
    stroke-linecap:round;stroke-linejoin:round;opacity:.82;
    transition:opacity .45s var(--e),stroke .45s var(--e)}
  .tile__g .sld{fill:var(--acc-2);stroke:none}
  @media (hover:hover){.tile:hover .tile__g path,.tile:hover .tile__g circle{opacity:1}}
  /* trazo que se dibuja al entrar (pathLength=1 evita medir cada curva) */
  .tile__g [data-draw]{stroke-dasharray:1;stroke-dashoffset:1;
    transition:stroke-dashoffset 1.25s var(--e) var(--gd,0ms),opacity .45s var(--e)}
  .tiles.in .tile__g [data-draw]{stroke-dashoffset:0}
  .tile__g .sld{opacity:0;transition:opacity .6s var(--e) calc(var(--gd,0ms) + 700ms)}
  .tiles.in .tile__g .sld{opacity:1}
  .no-motion .tile__g [data-draw]{stroke-dashoffset:0}
  .no-motion .tile__g .sld{opacity:1}
  @media (prefers-reduced-motion:reduce){
    .tile__g [data-draw]{stroke-dashoffset:0;transition:none}
    .tile__g .sld{opacity:1;transition:none}
  }
  .tile h3{font-size:1.08rem;letter-spacing:-.024em;margin-bottom:10px}
  .tile p{color:var(--dim);font-size:.92rem}

  /* tarjetas redondeadas con acento dorado que crece al entrar */
  .lg--rule{border-top:0;gap:clamp(12px,1.2vw,18px)}
  /* La caja bajó de tono, así que el texto tiene que bajar con ella: el gris
     del cuerpo —var(--dim), pensado para papel— se quedaba en 4,4:1 sobre el
     extremo hondo del degradado. Se redefine el papel dentro de la tarjeta y
     lo heredan el párrafo y el ordinal. */
  .lg--rule .lg__i{--dim:#33455A;
    border-bottom:0;border-radius:var(--r-panel);
    padding:clamp(26px,2.6vw,36px);
    /* Más recorrido de arriba abajo: el relleno plano no se leía como una
       decisión. Abajo entra un susurro del acento para que el azul cuelgue de
       la marca y no flote solo. */
    background:linear-gradient(168deg,
      color-mix(in srgb, var(--bg) 64%, var(--tinte)) 0%, var(--tinte) 52%,
      color-mix(in srgb, var(--acc) 7%, var(--tinte-alto)) 100%);
    /* canto de luz superior: la caja capta luz como papel, no como muestra */
    box-shadow:inset 0 1px 0 rgba(255,255,255,.66),inset 0 0 0 1px var(--line);
    transition:transform .5s var(--e),background .5s var(--e),box-shadow .5s var(--e)}
  @media (hover:hover){.lg--rule .lg__i:hover{transform:translateY(-6px);
    background:linear-gradient(168deg,
      color-mix(in srgb, var(--bg) 34%, var(--tinte-alto)) 0%, var(--tinte-alto) 54%,
      color-mix(in srgb, var(--acc) 16%, var(--tinte-alto)) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5),
      inset 0 0 0 1px color-mix(in srgb, var(--acc-2) 42%, transparent),var(--sombra)}}
  .lg--rule .lg__i::before{content:"";position:absolute;
    top:clamp(26px,2.6vw,36px);left:clamp(26px,2.6vw,36px);
    height:3px;width:0;border-radius:var(--r-pill);
    background:var(--acc-2);transition:width 1.1s var(--e) var(--d,0ms)}
  .lg--rule .lg__i.in::before{width:clamp(34px,4.2vw,58px)}
  .lg--rule .lg__i .mono{margin-top:26px;color:var(--dim)}

  /* Tarjeta con fotografía. La imagen abre la tarjeta y el texto se apoya
     debajo; el filete dorado se muda al bloque de texto, porque sobre la
     fotografía se perdía. Sin <img> la tarjeta sigue siendo la de siempre:
     el apartado que todavía no tenga foto no se rompe, sólo no la enseña. */
  .lg--foto .lg__i{padding:0;overflow:hidden;display:grid;
    grid-template-rows:auto 1fr;align-content:start}
  .lg__fig{display:block;position:relative;overflow:hidden;
    aspect-ratio:16/10;background:var(--bg-alt)}
  .lg__fig img{width:100%;height:100%;object-fit:cover;display:block;
    transform:scale(1.03);transition:transform 1.3s var(--e)}
  @media (hover:hover){.lg--foto .lg__i:hover .lg__fig img{transform:scale(1.08)}}
  /* el canto superior de la foto toca el borde de la tarjeta: un velo corto
     lo asienta y evita que una imagen clara se derrame sobre el papel */
  .lg__fig::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to bottom,rgba(17,25,43,.14) 0%,rgba(17,25,43,0) 40%)}
  .lg__txt{display:block;position:relative;padding:clamp(24px,2.4vw,34px)}
  .lg--foto .lg__i::before{display:none}
  .lg--foto .lg__txt::before{content:"";position:absolute;
    top:clamp(24px,2.4vw,34px);left:clamp(24px,2.4vw,34px);
    height:3px;width:0;border-radius:var(--r-pill);
    background:var(--acc-2);transition:width 1.1s var(--e) var(--d,0ms)}
  .lg--foto .lg__i.in .lg__txt::before{width:clamp(34px,4.2vw,58px)}

  /* ── banda de medios ──
     Fotografía o vídeo al ancho del contenido, al cierre de una sección.
     Acepta <img> o un <video data-lazy> con sus data-webm/data-mp4, igual que
     el resto del sitio. Mientras no haya material se marca el hueco: un vacío
     silencioso no le dice a nadie qué falta ni dónde va. */
  .mband{margin:clamp(40px,5vw,76px) 0 0}
  /* cuando abre la sección, el aire va debajo: arriba ya está el relleno de
     la propia sección */
  .mband--ini{margin:0 0 clamp(44px,5.2vw,80px)}
  /* Si la fotografía abre la sección, el relleno superior de la propia
     sección deja un vacío largo antes de ella. Se recorta. Donde :has() no
     exista, la página sigue bien: sólo con más aire arriba. */
  .sec:has(> .shell > .mband--ini){padding-top:clamp(40px,4.4vw,70px)}
  .mband__fig{position:relative;overflow:hidden;border-radius:var(--r-panel);
    background:var(--bg-alt);aspect-ratio:21/9}
  .mband__fig img,.mband__fig video{width:100%;height:100%;object-fit:cover;
    display:block;pointer-events:none}
  .mband figcaption{margin-top:13px;font-family:var(--ui);font-size:.82rem;
    line-height:1.5;color:var(--faint);max-width:78ch}
  .mband--pendiente .mband__fig{display:flex;align-items:center;justify-content:center;
    text-align:center;padding:clamp(20px,3vw,40px);aspect-ratio:21/8;
    background:color-mix(in srgb, var(--acc-2) 5%, transparent);
    border:1px dashed color-mix(in srgb, var(--acc-2) 50%, transparent)}
  .mband--pendiente b{display:block;font-family:var(--ui);font-size:.68rem;
    font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--acc-2);margin-bottom:11px}
  .mband--pendiente p{font-size:.92rem;color:var(--dim);max-width:62ch;margin:0 auto}
  @media (max-width:700px){.mband--pendiente .mband__fig{aspect-ratio:auto;min-height:190px}}

  /* diagrama de presencia */
  .dgm{width:100%;height:auto;overflow:visible}
  /* el diagrama se pinta desde aquí para que siga al tema, no desde los
     atributos del SVG: una propiedad CSS gana a un atributo de presentación */
  .dgm__a{stop-color:var(--acc)}
  .dgm__b{stop-color:var(--acc-2)}
  .dgm__grid{stroke:var(--line)}
  .dgm .ring{stroke:var(--acc)}
  .dgm .ring--b{stroke:var(--acc-2)}
  .dgm__halo{fill:color-mix(in srgb, var(--acc) 12%, transparent)}
  .dgm__halo--b{fill:color-mix(in srgb, var(--acc-2) 12%, transparent)}
  .dgm__dot{fill:var(--acc)}
  .dgm__dot--b{fill:var(--acc-2)}
  .dgm__t{fill:var(--ink)}
  .dgm__s{fill:var(--faint)}
  .dgm .arc{stroke-dasharray:460;stroke-dashoffset:460;
    transition:stroke-dashoffset 1.9s var(--e) .25s}
  .dgm.in .arc{stroke-dashoffset:0}
  .no-motion .dgm .arc{stroke-dashoffset:0}
  .motion .dgm.in .ring{animation:ringPulse 3.4s ease-out infinite}
  .motion .dgm.in .ring--b{animation-delay:1.7s}
  .ring{transform-box:fill-box;transform-origin:center;opacity:0}
  @keyframes ringPulse{0%{opacity:.5;transform:scale(.45)}
    72%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}

  /* ── pending ── */
  .pd{border:1px dashed color-mix(in srgb, var(--acc-2) 50%, transparent);border-radius:var(--r-panel);
    padding:22px;display:flex;flex-direction:column;
    justify-content:center;gap:7px;background:color-mix(in srgb, var(--acc-2) 5%, transparent)}
  .pd b{font-family:var(--ui);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--acc-2);font-weight:500}
  .pd p{font-size:.87rem;color:var(--dim);line-height:1.5}

  /* ── form ── */
  .formwrap{background:var(--glass);border:1px solid var(--glass-line);
    border-radius:var(--r-panel);padding:clamp(24px,3vw,44px)}
  .form{display:grid;gap:18px}
  @media (min-width:760px){.form{grid-template-columns:repeat(2,1fr)}.form .c2{grid-column:span 2}}
  .fl{display:grid;gap:9px}
  .fl label{font-family:var(--ui);font-size:.69rem;font-weight:500;letter-spacing:.12em;
    text-transform:uppercase;color:var(--dim)}
  .fl label .r{color:var(--acc)}
  .fl input,.fl select,.fl textarea{font:inherit;font-size:.98rem;color:var(--ink);
    background:var(--field);border:1px solid var(--field-line);border-radius:var(--r-field);
    padding:13px 14px;width:100%;transition:border-color .25s var(--e),background .25s var(--e)}
  .fl textarea{min-height:124px;resize:vertical;border-radius:var(--r-field)}
  .fl input:focus,.fl select:focus,.fl textarea:focus{outline:none;
    border-color:var(--acc);background:var(--wash-2)}
  .fl select option{background:var(--bg);color:var(--ink)}
  .chk{display:flex;gap:13px;align-items:flex-start;font-size:.89rem;color:var(--dim);padding:2px 0}
  .chk input{margin-top:3px;accent-color:var(--acc);width:18px;height:18px;flex:none;border-radius:5px}
  .fmsg{font-size:.94rem;padding:14px 16px;border-radius:var(--r-field);border:1px solid}
  .fmsg--ok{color:var(--acc);border-color:rgba(110,201,200,.45);background:rgba(110,201,200,.09)}
  .fmsg--err{color:var(--err);border-color:color-mix(in srgb, var(--err) 45%, transparent);
    background:color-mix(in srgb, var(--err) 9%, transparent)}
  @media (min-width:1000px){.split--form{grid-template-columns:1fr 1.06fr;align-items:center}}

  /* ── accordion ── */
  .acc{border-top:1px solid var(--line)}
  .acc__i{border-bottom:1px solid var(--line)}
  .acc__b{width:100%;text-align:left;cursor:pointer;padding:26px 46px 26px 0;position:relative;
    font-size:clamp(1.02rem,1.5vw,1.25rem);font-weight:700;letter-spacing:-.025em;transition:color .3s var(--e)}
  @media (hover:hover){.acc__b:hover{color:var(--acc)}}
  .acc__b::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:1.5px;background:currentColor}
  .acc__b::before{content:"";position:absolute;right:11px;top:50%;width:1.5px;height:12px;background:currentColor;
    transform:translateY(-50%);transition:transform .35s var(--e)}
  .acc__b[aria-expanded="true"]::before{transform:translateY(-50%) scaleY(0)}
  .acc__p{padding-bottom:28px;color:var(--dim);max-width:74ch;font-size:.99rem}
  .acc__p[hidden]{display:none}

  /* ── footer ── */
  .ft{background:
      radial-gradient(70% 110% at 6% 0%, rgba(110,201,200,.1) 0%, transparent 56%),
      linear-gradient(176deg, var(--navy) 0%, #0B1120 58%, var(--void) 100%);
    border-top:1px solid var(--line);
    /* el segundo valor respeta la barra inferior de iPhone con notch */
    padding-block:clamp(52px,6vw,84px) calc(28px + env(safe-area-inset-bottom,0px))}
  .ft__grid{display:grid;gap:36px}
  @media (min-width:860px){.ft__grid{grid-template-columns:1.5fr 1fr 1fr}}
  .ft__logo{width:124px;filter:var(--logo);opacity:.9;margin-bottom:16px}
  .ft h4{font-family:var(--ui);font-size:.69rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--acc);margin-bottom:18px;font-weight:500}
  .ft ul{list-style:none;padding:0;display:grid;gap:12px}
  .ft ul a{text-decoration:none;font-size:.93rem;color:var(--dim);transition:color .25s var(--e)}
  @media (hover:hover){.ft ul a:hover{color:var(--ink)}}
  .ft__bot{margin-top:52px;padding-top:24px;border-top:1px solid var(--hair);
    display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}

  /* ── pages / motion ── */
  .page{display:none}
  .page.is-active{display:block}
  .motion [data-r]{opacity:0;transform:translateY(22px)}
  .motion [data-r].in{opacity:1;transform:none;
    transition:opacity .62s var(--e),transform .62s var(--e);transition-delay:var(--d,0ms)}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .motion [data-r]{opacity:1;transform:none;transition:none}
    .ln > i{transform:none!important}
    .btn::before{display:none}
  }

  /* ═══════════════════════════════════════════════════════════════════
     PORTADA DE PÁGINA
     Las páginas interiores abrían con el titular flotando sobre papel
     blanco: un vacío enorme, sin jerarquía y con la fotografía metida
     después en una caja. Eso es una diapositiva, no una página.

     La portada pone la imagen debajo del titular en lugar de al lado, y
     va siempre en oscuro: así el sitio alterna oscuro→claro→oscuro como
     hace el inicio, en vez de ser blanco de arriba abajo.
     ═══════════════════════════════════════════════════════════════════ */
  /* El color de base no es decorativo: si la fotografía tarda o falla, el
     texto claro se quedaba sobre el papel blanco del body, ilegible. */
  .port{position:relative;isolation:isolate;overflow:hidden;background:var(--deep);
    display:grid;align-items:end;
    min-height:clamp(430px,60vh,640px);
    padding-block:clamp(92px,12vh,148px) clamp(48px,6.4vh,84px)}
  /* remate inferior: un filete de acento a todo lo ancho cose la portada
     con la sección clara que viene debajo */
  .port::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:4;
    background:linear-gradient(90deg,
      color-mix(in srgb, var(--acc) 62%, transparent) 0%,
      color-mix(in srgb, var(--acc-2) 40%, transparent) 42%,
      transparent 86%)}
  .port__in{position:relative;z-index:3;width:100%}

  /* ── portada con fotografía ──
     El grado de color es lo que hace que fotos de origen distinto se lean
     como una sola familia: bajar saturación, subir algo de contraste y
     pasarlas todas por el mismo velo navy. Sin esto se notan de stock. */
  .port__fig{position:absolute;inset:0;z-index:0}
  .port__fig img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);
    filter:saturate(.66) contrast(1.06) brightness(.88)}
  .port__fig::after{content:"";position:absolute;inset:0;
    background:
      /* Velo del rincón donde se apoya el titular. Sin él, un claro de la
         fotografía dejaba el rótulo turquesa en 3:1: por debajo de AA. */
      radial-gradient(88% 98% at 2% 106%, rgba(7,11,20,.94) 0%, rgba(7,11,20,.6) 46%, transparent 74%),
      linear-gradient(to top, var(--deep) 0%, rgba(7,11,20,.66) 38%, rgba(7,11,20,.34) 100%),
      linear-gradient(100deg, rgba(7,11,20,.9) 0%, rgba(7,11,20,.46) 48%, rgba(7,11,20,.04) 100%),
      radial-gradient(112% 78% at 84% 8%, rgba(110,201,200,.18) 0%, transparent 60%)}
  /* la imagen entra con un acercamiento muy lento: da vida sin distraer */
  .motion .port__fig img{transform:scale(1.07);transition:transform 6s var(--e)}
  .motion .port.in .port__fig img{transform:scale(1)}
  @media (prefers-reduced-motion:reduce){.port__fig img{transform:none!important;transition:none}}

  /* ── portada gráfica, sin fotografía ──
     Para las páginas conceptuales (enfoque, principios, modelo) una foto
     de archivo sería relleno. Aquí manda la tipografía sobre una malla de
     degradados, una retícula fina y el isotipo en marca de agua. */
  .port--gr{background:
    radial-gradient(84% 126% at 79% 4%, rgba(110,201,200,.19) 0%, transparent 56%),
    radial-gradient(66% 98% at 6% 98%, rgba(204,176,120,.12) 0%, transparent 62%),
    linear-gradient(162deg, var(--lift) 0%, var(--navy) 44%, var(--deep) 100%)}
  .port--gr::before{content:"";position:absolute;inset:0;z-index:0;
    background-image:
      linear-gradient(rgba(233,237,242,.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(233,237,242,.055) 1px, transparent 1px);
    background-size:clamp(58px,7vw,98px) clamp(58px,7vw,98px);
    -webkit-mask-image:radial-gradient(125% 96% at 50% 0%, #000 18%, transparent 76%);
    mask-image:radial-gradient(125% 96% at 50% 0%, #000 18%, transparent 76%)}
  /* isotipo gigante, recortado por el borde derecho */
  .port__mark{position:absolute;z-index:1;pointer-events:none;
    right:calc(-1 * clamp(40px,6vw,132px));bottom:clamp(-30px,-2vw,-10px);
    width:min(52vw,640px);aspect-ratio:2.049;
    -webkit-mask:url("/assets/logos/logo-git-line.png") no-repeat center/contain;
    mask:url("/assets/logos/logo-git-line.png") no-repeat center/contain;
    background:var(--marca);opacity:.3}
  @media (max-width:860px){.port__mark{width:118vw;right:-40vw;opacity:.16}}
  /* cada variante la coloca en otro sitio: si sale siempre del mismo borde,
     las cinco portadas sin fotografía se leen como una sola */
  .port--gr2 .port__mark{right:auto;left:calc(-1 * clamp(70px,9vw,190px));
    top:clamp(-40px,-3vw,-14px);bottom:auto;width:min(46vw,560px);opacity:.24}
  .port--gr3 .port__mark{right:50%;translate:50% 0;bottom:auto;
    top:clamp(6px,2vw,40px);width:min(64vw,760px);opacity:.14}

  /* ── tipografía de la portada ── */
  /* ceñido al texto: como bloque a todo el ancho, su caja se extendía sobre
     la zona clara de la fotografía aunque las letras estuvieran a la izquierda */
  .port__eye{display:flex;width:max-content;max-width:100%;align-items:center;gap:clamp(12px,1.6vw,20px);
    font-family:var(--ui);font-size:.74rem;font-weight:600;letter-spacing:.17em;
    text-transform:uppercase;color:var(--acc)}
  .port__eye::before{content:"";flex:none;width:clamp(26px,3.4vw,54px);height:1px;
    background:currentColor;opacity:.8}
  /* Los rótulos numerados ya traen su propio guion largo —«01 — La compañía»—
     y con la raya delante se veían dos líneas seguidas. Ahí el guion del texto
     hace de separador y la decorativa sobra. */
  .port__eye--num::before{display:none}
  .port h1{font-size:var(--disp);line-height:1.04;letter-spacing:-.032em;
    margin-block:clamp(20px,2.4vw,30px) 0;max-width:19ch}
  .port__lede{color:var(--dim);max-width:54ch;font-size:clamp(1rem,1.15vw,1.14rem);
    margin-top:clamp(18px,2vw,26px)}
  /* dato al pie de la portada, alineado a la derecha en pantalla ancha */
  .port__pie{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
    gap:clamp(20px,3vw,48px);margin-top:clamp(26px,3.2vw,44px)}
  .port__pie .port__lede{margin-top:0}
  .port__tag{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
  .port__tag li{font-family:var(--ui);font-size:.7rem;font-weight:500;letter-spacing:.1em;
    text-transform:uppercase;color:var(--dim);padding:7px 15px;border-radius:var(--r-pill);
    border:1px solid rgba(233,237,242,.18);background:rgba(233,237,242,.05)}

  /* ═══ BANDA DE CIFRAS ═══
     Los datos que ya estaban enterrados en la prosa salen a tamaño de
     titular. No se inventa ninguno: cada cifra sale de una frase que ya
     está en esa misma página. */
  .cifras{position:relative;overflow:hidden;
    background:
      radial-gradient(78% 120% at 16% 0%, rgba(110,201,200,.14) 0%, transparent 58%),
      linear-gradient(150deg, var(--lift) 0%, var(--navy) 52%, var(--deep) 100%);
    padding-block:clamp(56px,7vw,96px)}
  .cifras__g{display:grid;gap:clamp(28px,3.4vw,56px) clamp(24px,3vw,48px);
    grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
  .cifra{display:grid;gap:10px;align-content:start;position:relative;
    padding-top:clamp(20px,2.2vw,30px);border-top:1px solid rgba(233,237,242,.16)}
  .cifra__n{font-family:var(--ff);font-weight:700;letter-spacing:-.045em;line-height:.92;
    font-size:clamp(2.5rem,5.4vw,4.2rem);
    background:linear-gradient(168deg,#FFFFFF 0%,var(--turq) 92%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .cifra__n sup{font-size:.4em;vertical-align:.9em;letter-spacing:0}
  .cifra__t{font-family:var(--ui);font-size:.76rem;font-weight:500;letter-spacing:.13em;
    text-transform:uppercase;color:var(--acc)}
  .cifra p{color:var(--dim);font-size:.94rem;max-width:32ch}

  /* ═══ REJILLA EDITORIAL ═══
     Sustituye a las listas de viñetas. Una lista de ocho instituciones en
     viñetas es una diapositiva; en rejilla numerada es una página. */
  .rej{display:grid;gap:clamp(10px,1.1vw,18px);list-style:none;padding:0;
    grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr))}
  /* El tono alterna tarjeta a tarjeta. Ocho fichas del mismo color son una
     tabla; alternando turquesa y arena la rejilla tiene ritmo propio. */
  .rej li{--tono:var(--acc)}
  .rej li:nth-child(2n){--tono:var(--acc-2)}
  .rej li{position:relative;overflow:hidden;isolation:isolate;
    display:grid;gap:9px;align-content:end;min-height:clamp(132px,13vw,168px);
    padding:clamp(20px,2.2vw,30px);border-radius:var(--r-panel);
    background:
      linear-gradient(158deg, color-mix(in srgb, var(--tono) 13%, transparent) 0%,
        transparent 58%),
      var(--glass);
    border:1px solid var(--glass-line);
    transition:transform .42s var(--e),border-color .42s var(--e),
      box-shadow .42s var(--e)}
  /* filete superior que crece cuando la ficha entra en pantalla: con el
     escalonado de --d la rejilla se va dibujando en lugar de aparecer */
  .rej li::before{content:"";position:absolute;top:0;left:0;height:2px;width:0;
    background:linear-gradient(90deg, var(--tono), transparent);
    transition:width 1.1s var(--e) var(--d,0ms)}
  .rej li.in::before{width:72%}
  /* resplandor de esquina, sólo al señalar */
  .rej li::after{content:"";position:absolute;z-index:-1;inset:0;opacity:0;
    background:radial-gradient(74% 88% at 92% 8%,
      color-mix(in srgb, var(--tono) 26%, transparent) 0%, transparent 66%);
    transition:opacity .42s var(--e)}
  @media (hover:hover){.rej li:hover{transform:translateY(-6px);
    border-color:color-mix(in srgb, var(--tono) 46%, transparent);
    box-shadow:0 20px 44px rgba(7,11,20,.28)}}
  @media (hover:hover){.rej li:hover::after{opacity:1}}
  /* el ordinal deja de ser una etiqueta y pasa a ser la marca de la ficha */
  .rej__n{position:absolute;top:clamp(12px,1.4vw,20px);right:clamp(14px,1.6vw,24px);
    font-family:var(--ff);font-size:clamp(1.7rem,2.8vw,2.5rem);font-weight:700;
    letter-spacing:-.05em;line-height:1;
    color:color-mix(in srgb, var(--tono) 56%, transparent);
    transition:color .42s var(--e),transform .42s var(--e)}
  @media (hover:hover){.rej li:hover .rej__n{color:var(--tono);transform:translateY(-2px)}}
  .rej__t{font-family:var(--ff);font-size:clamp(1rem,1.2vw,1.12rem);font-weight:600;
    letter-spacing:-.022em;line-height:1.28;max-width:22ch}
  .rej p{color:var(--dim);font-size:.9rem}

  /* ═══ CIERRE ═══
     Las páginas terminaban en seco contra el pie. Esta banda las remata y
     empuja a la siguiente. */
  /* El cierre va en claro. En oscuro, entre una sección oscura y el pie —que
     también lo es— dejaba un tramo azul larguísimo; en claro corta ese bloque
     y devuelve el balance. */
  .cierre{position:relative;overflow:hidden;
    background:
      radial-gradient(74% 120% at 84% 4%, color-mix(in srgb, var(--acc) 9%, transparent) 0%, transparent 60%),
      radial-gradient(56% 96% at 6% 96%, color-mix(in srgb, var(--acc-2) 8%, transparent) 0%, transparent 62%),
      linear-gradient(168deg, var(--bg) 0%, var(--bg-alt) 88%);
    padding-block:clamp(60px,7.4vw,104px);
    box-shadow:inset 0 1px 0 var(--line)}
  .cierre__in{display:grid;gap:clamp(24px,3vw,52px);align-items:center}
  @media (min-width:900px){.cierre__in{grid-template-columns:1.25fr auto}}
  .cierre h2{font-size:clamp(1.5rem,2.8vw,2.35rem);letter-spacing:-.03em;max-width:20ch}
  .cierre .lede{margin-top:16px}

  /* La sección que sigue a una portada no necesita su respiro superior
     completo: la portada ya lo dio. */
  .port + .sec{padding-top:clamp(56px,7vw,104px)}
  /* La portada ya remata con su filete de acento. La sección que viene detrás
     dibujaba además el suyo —una regla de 1px y un trazo de 2px— y en la
     costura se veían dos líneas pegadas. Aquí manda la de la portada. */
  .port + .sec::before,.port + .sec::after,
  .cifras + .sec::before,.cifras + .sec::after,
  .cierre + .sec::before,.cierre + .sec::after,
  .rail + .sec::before,.rail + .sec::after{display:none}
  .canal + .sec::before,.canal + .sec::after{display:none}
  .firma + .sec::before,.firma + .sec::after{display:none}
  /* la cabecera ya remata con su propio filete inferior */
  .cab + .sec::before,.cab + .sec::after{display:none}
  /* sobre fotografía el filete de sección queda como un trazo suelto */
  .fondofoto::before,.fondofoto::after{display:none}
  /* ═══ HILO ═══
     El texto corrido a dos columnas se leía como un muro: nada marca dónde
     empieza cada idea y media página queda en blanco. El hilo lo parte en
     tiempos —ordinal al margen, filete que se dibuja al entrar en pantalla—
     y ocupa el ancho entero, así no queda carril vacío al lado. */
  .hilo{display:grid;margin-top:clamp(30px,3.4vw,52px)}
  /* Dos columnas de tiempos en pantalla ancha. En una sola columna el párrafo
     ocupaba su medida cómoda y dejaba media página en blanco a la derecha. */
  @media (min-width:1080px){
    .hilo{grid-template-columns:1fr 1fr;column-gap:clamp(42px,4.6vw,86px)}}
  .hilo__1{font-family:var(--ff);font-weight:500;letter-spacing:-.022em;
    font-size:clamp(1.34rem,2.7vw,2.35rem);line-height:1.2;color:var(--ink);
    max-width:32ch;margin-bottom:clamp(30px,3.6vw,56px);text-wrap:balance}
  /* El tono alterna tiempo a tiempo, como en la rejilla de instituciones: con
     un solo color el bloque se lee como una tabla. */
  .hilo__i{--tono:var(--acc)}
  .hilo__i:nth-child(2n){--tono:var(--acc-2)}
  .hilo__i{position:relative;display:grid;gap:6px clamp(22px,2.4vw,40px);
    padding-block:clamp(26px,3vw,44px);border-top:1px solid var(--line)}
  @media (min-width:860px){
    .hilo__i{grid-template-columns:minmax(76px,auto) 1fr;align-items:start}}
  /* el filete crece desde la izquierda cuando el renglón entra en pantalla */
  .hilo__i::after{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;
    background:linear-gradient(90deg, var(--tono), transparent);
    transition:width 1.05s var(--e) var(--d,0ms)}
  .hilo__i.in::after{width:clamp(64px,8vw,132px)}
  /* El ordinal al 34% de la tinta daba 2,1:1 sobre papel: por debajo del 3:1
     que pide el texto grande. Va al 76% de su tono, que da 3,7:1. */
  .hilo__n{font-family:var(--ff);font-size:clamp(1.7rem,3vw,2.7rem);font-weight:700;
    letter-spacing:-.05em;line-height:.88;
    color:color-mix(in srgb, var(--tono) 76%, transparent);
    transition:color .5s var(--e),transform .5s var(--e)}
  @media (hover:hover){.hilo__i:hover .hilo__n{color:var(--tono);transform:translateY(-2px)}}
  /* al señalar, el tiempo se tiñe apenas: el bloque deja de ser inerte */
  .hilo__i::before{content:"";position:absolute;inset:-1px -18px 0;z-index:-1;opacity:0;
    border-radius:var(--r-panel);
    background:linear-gradient(100deg,
      color-mix(in srgb, var(--tono) 9%, transparent) 0%, transparent 72%);
    transition:opacity .45s var(--e)}
  @media (hover:hover){.hilo__i:hover::before{opacity:1}}
  .hilo{isolation:isolate}
  /* Con tres tiempos en dos columnas el último dejaba media fila en blanco.
     Ocupa la fila entera; con cuatro no se cumple y no cambia nada. */
  @media (min-width:1080px){
    .hilo__i:last-child:nth-child(odd){grid-column:1 / -1;
      grid-template-columns:minmax(76px,auto) 1fr}
    .hilo__i:last-child:nth-child(odd) p{max-width:74ch}}
  .hilo__i p{color:var(--dim);max-width:52ch;font-size:clamp(1rem,1.1vw,1.06rem)}
  .hilo__i b{color:var(--ink);font-weight:600}
  /* el renglón se desplaza un punto al señalarlo: el bloque deja de ser inerte */
  @media (min-width:860px){
    .hilo__i{transition:padding-left .5s var(--e)}
    @media (hover:hover){.hilo__i:hover{padding-left:10px}}}

  /* carril lateral con figura pegada: acompaña a la lista mientras se baja */
  .idx__fig{margin:0}
  .idx__fig img{width:100%;height:auto;border-radius:var(--r-panel);
    aspect-ratio:1/1;object-fit:cover;object-position:var(--pos,center);
    box-shadow:var(--sombra)}
  @media (max-width:999px){.idx__fig{display:none}}

  /* ═══════════════════════════════════════════════════════════════════
     COMPOSICIONES DE PÁGINA
     Una portada igual en las veinte páginas es una plantilla: se lee como
     «lo mismo con otra información». Lo que cambia de página a página no es
     el contenido dentro de la misma caja, es dónde entra la imagen y con
     qué lógica se reparte el espacio.

       arriba a sangre ....... índices de sección, Educación, Notas, Modelo
       al lado, media pantalla .. Nuestra compañía (.port--duo)
       sangrando a un borde .... Movistar (izq) · IBW (der)  → .ent
       pegada al carril ........ Enfoque de inversión        → .idx__fig
       al final, en banda ...... Principios · Sostenibilidad → .figbanda
       inserta junto al texto .. Equidad de género           → .split--ins
       de fondo ................ Formulario                  → .fondofoto
       sin fotografía .......... Presencia (diagrama) · Evolución · FAQ ·
                                 Contacto · Datos
     ═══════════════════════════════════════════════════════════════════ */

  /* ── .port--duo: la imagen ocupa media pantalla, no el fondo entero ──
     El titular no va encima de la foto, va al lado. Rompe la secuencia
     imagen-arriba/texto-abajo sin cambiar de componente. */
  @media (min-width:1000px){
    .port--duo{min-height:clamp(520px,72vh,760px);align-items:center}
    .port--duo .port__fig{left:auto;width:min(50vw,820px)}
    .port--duo .port__fig::after{
      background:
        linear-gradient(90deg, var(--deep) 0%, rgba(7,11,20,.72) 14%, rgba(7,11,20,.18) 46%, transparent 72%),
        linear-gradient(to top, rgba(7,11,20,.5) 0%, transparent 52%)}
    .port--duo .port__in{max-width:min(100%,1420px)}
    .port--duo h1{max-width:15ch;font-size:var(--mega)}
    .port--duo .port__lede,.port--duo .port__pie{max-width:44ch}
  }

  /* ── .tira: cifras en renglón, no en banda aparte ──
     Cuando los datos cierran la portada en lugar de abrir una sección
     oscura propia, la página gana un tiempo en lugar de dos. */
  .tira{display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,54px);margin:0;padding:0;list-style:none;
    margin-top:clamp(30px,3.4vw,50px);padding-top:clamp(20px,2.2vw,30px);
    border-top:1px solid rgba(233,237,242,.17)}
  .tira__i{display:grid;gap:3px}
  .tira__n{font-family:var(--ff);font-size:clamp(1.45rem,2.5vw,2.1rem);font-weight:700;
    letter-spacing:-.04em;line-height:1;
    background:linear-gradient(166deg,#FFFFFF 0%,var(--turq) 96%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .tira__t{font-family:var(--ui);font-size:.68rem;font-weight:500;letter-spacing:.12em;
    text-transform:uppercase;color:var(--dim)}

  /* ── .figbanda: la fotografía cierra la página en vez de abrirla ──
     Va fuera de .shell, a sangre completa, y come el respiro de la sección
     anterior para que no queden dos huecos seguidos. */
  .figbanda{position:relative;overflow:hidden;margin:0;background:var(--deep);line-height:0}
  .figbanda img{width:100%;height:clamp(260px,40vh,470px);object-fit:cover;
    object-position:var(--pos,center);filter:saturate(.7) contrast(1.05) brightness(.94)}
  .figbanda::after{content:"";position:absolute;inset:0;
    background:linear-gradient(to bottom, rgba(7,11,20,.34) 0%, transparent 34%, rgba(7,11,20,.26) 100%)}
  .sec:has(+ .figbanda){padding-bottom:clamp(40px,5vw,72px)}

  /* ── .split--ins: fotografía inserta junto al texto, pegada al bajar ── */
  @media (min-width:1000px){
    .split--ins{grid-template-columns:.62fr 1fr;align-items:start;gap:clamp(34px,4vw,70px)}
    .split--ins > figure{position:sticky;top:clamp(98px,12vh,142px)}}
  /* cuando la fotografía es el asunto de la sección y no una nota al margen */
  @media (min-width:1000px){
    .split--ins.split--par{grid-template-columns:1fr .92fr;align-items:center}
    .split--ins.split--par > figure{position:static}}
  .split--ins.split--par > figure img{aspect-ratio:2.34/1}
  .split--ins > figure{margin:0}
  .split--ins > figure img{width:100%;border-radius:var(--r-panel);
    aspect-ratio:5/4;object-fit:cover;box-shadow:var(--sombra)}

  /* ── .fondofoto: la sección entera se apoya en una fotografía ──
     El formulario deja de flotar sobre papel: se apoya en la sala real de
     GIT y el panel de campos va sobre cristal. */
  .fondofoto{position:relative;isolation:isolate;overflow:hidden;background:var(--deep)}
  .fondofoto__fig{position:absolute;inset:0;z-index:0}
  .fondofoto__fig img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);
    filter:saturate(.66) contrast(1.03) brightness(.84)}
  /* El velo carga hacia la derecha, donde se apoya el panel de campos, y
     suelta el flanco izquierdo: ahí está el logotipo de la pared, que es el
     motivo de usar esta fotografía y no otra. */
  .fondofoto__fig::after{content:"";position:absolute;inset:0;
    background:
      linear-gradient(98deg, rgba(7,11,20,.5) 0%, rgba(7,11,20,.6) 34%,
        rgba(7,11,20,.82) 62%, rgba(7,11,20,.9) 100%),
      radial-gradient(96% 76% at 86% 6%, rgba(110,201,200,.12) 0%, transparent 62%)}
  .fondofoto > .shell{position:relative;z-index:2}
  /* Dos columnas: el titular se apoya sobre la pared de la sala y el
     formulario al lado. Antes el titular vivía en una portada oscura aparte,
     encima; sin ella la página gana un tiempo y la fotografía se aprovecha. */
  .fondofoto__txt{display:grid;gap:0;align-content:center;
    padding-block:clamp(8px,2vh,28px) clamp(26px,4vh,48px)}
  .fondofoto__txt h1{font-size:var(--mega);line-height:1.04;letter-spacing:-.032em;
    margin-block:clamp(18px,2.2vw,28px) 0;max-width:12ch}
  @media (min-width:1080px){
    .fondofoto > .shell{display:grid;grid-template-columns:1.04fr .96fr;
      gap:clamp(30px,3.6vw,64px);align-items:center}
    .fondofoto .formwrap{grid-column:2}
    .fondofoto__txt{grid-column:1;padding-block:0}}
  /* velo propio detrás del titular: el flanco izquierdo estaba claro a
     propósito —para que se lea la pared— y ahí ahora va texto */
  .fondofoto__fig::before{content:"";position:absolute;inset:0;z-index:1;
    background:radial-gradient(58% 74% at 16% 50%,
      rgba(4,7,12,.9) 0%, rgba(4,7,12,.66) 44%, transparent 78%)}
  /* el panel de cristal sólo aparece donde hay fotografía detrás */
  /* variante sin panel: la cifra se apoya directamente en la fotografía, así
     que el velo carga parejo y un poco más, y no hay columnas */
  .fondofoto--dato .fondofoto__fig img{filter:saturate(.6) contrast(1.05) brightness(.78)}
  .fondofoto--dato .fondofoto__fig::before{display:none}
  .fondofoto--dato .fondofoto__fig::after{
    background:
      radial-gradient(70% 86% at 20% 52%, rgba(4,7,12,.9) 0%, rgba(4,7,12,.66) 48%, transparent 86%),
      linear-gradient(104deg, rgba(4,7,12,.76) 0%, rgba(4,7,12,.6) 52%, rgba(4,7,12,.5) 100%),
      radial-gradient(90% 76% at 84% 8%, rgba(110,201,200,.13) 0%, transparent 62%)}
  @media (min-width:1080px){.fondofoto--dato > .shell{display:block}}
  .fondofoto--dato .mono-dato{border-color:rgba(233,237,242,.2)}
  /* El párrafo cae en el flanco claro del velo y con el gris de siempre daba
     3,0:1. Oscurecer más la fotografía taparía los paneles —que son el motivo
     de ponerla—, así que se aclara el texto: 4,8:1 sin apagar la imagen. */
  .fondofoto--dato .mono-dato__p{color:#CBD5DF}

  .fondofoto .formwrap{background:rgba(7,11,20,.42);backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);border-radius:var(--r-panel);
    box-shadow:inset 0 0 0 1px rgba(233,237,242,.14),0 30px 70px rgba(0,0,0,.42);
    padding:clamp(24px,3.2vw,48px)}

  /* ── el diagrama como portada, sin fotografía ──
     Presencia no necesita una foto: su contenido es la relación entre dos
     países, y eso ya lo dibuja el diagrama. Aquí es el protagonista. */
  .port--dgm{min-height:clamp(560px,82vh,880px);align-items:center}
  .port--dgm .dgm{position:absolute;z-index:1;right:clamp(-60px,-3vw,0px);
    top:50%;translate:0 -50%;width:min(62vw,860px);height:auto;opacity:.95}
  .port--dgm .port__in{position:relative;z-index:3}
  .port--dgm h1{max-width:16ch}
  @media (max-width:999px){
    .port--dgm{align-items:end}
    .port--dgm .dgm{position:relative;translate:none;top:auto;right:auto;
      width:100%;margin-bottom:clamp(26px,4vw,44px);opacity:.6}}

  /* Las portadas sin fotografía también tienen que diferenciarse entre sí:
     con la misma malla en seis páginas, el recurso se nota. Cambia la esquina
     de la luz, el color y de dónde arranca la retícula. */
  .port--gr2{background:
    radial-gradient(74% 112% at 8% 8%, rgba(204,176,120,.16) 0%, transparent 56%),
    radial-gradient(82% 104% at 94% 88%, rgba(110,201,200,.15) 0%, transparent 60%),
    linear-gradient(196deg, var(--navy) 0%, var(--lift) 38%, var(--void) 100%)}
  .port--gr2::before{
    -webkit-mask-image:radial-gradient(118% 92% at 6% 50%, #000 12%, transparent 70%);
    mask-image:radial-gradient(118% 92% at 6% 50%, #000 12%, transparent 70%)}
  .port--gr3{background:
    radial-gradient(58% 90% at 50% 112%, rgba(110,201,200,.2) 0%, transparent 62%),
    linear-gradient(180deg, var(--deep) 0%, var(--navy) 58%, var(--lift) 100%)}
  .port--gr3::before{background-size:clamp(34px,4vw,56px) clamp(34px,4vw,56px);
    -webkit-mask-image:radial-gradient(90% 76% at 50% 108%, #000 6%, transparent 66%);
    mask-image:radial-gradient(90% 76% at 50% 108%, #000 6%, transparent 66%)}
  /* gr2 cambia la retícula ortogonal por rayado diagonal */
  .port--gr2::before{
    background-image:repeating-linear-gradient(118deg,
      rgba(233,237,242,.06) 0 1px, transparent 1px clamp(26px,3.2vw,52px))}
  /* gr4: arcos concéntricos en lugar de retícula */
  .port--gr4{background:
    radial-gradient(64% 96% at 88% 96%, rgba(110,201,200,.18) 0%, transparent 58%),
    linear-gradient(142deg, var(--navy) 0%, var(--deep) 56%, var(--void) 100%)}
  .port--gr4::before{
    background-image:repeating-radial-gradient(circle at 92% 104%,
      rgba(233,237,242,.075) 0 1px, transparent 1px clamp(46px,5.6vw,104px));
    -webkit-mask-image:radial-gradient(110% 110% at 92% 104%, #000 10%, transparent 82%);
    mask-image:radial-gradient(110% 110% at 92% 104%, #000 10%, transparent 82%)}
  .port--gr4 .port__mark{right:auto;left:calc(-1 * clamp(60px,7vw,150px));
    bottom:clamp(-34px,-2.4vw,-10px);width:min(42vw,500px);opacity:.2}

  /* ── .port--luz: la fotografía manda y el velo se concentra ──
     El grado estándar —pensado para que fotografías dispares se lean como una
     familia— apaga una imagen cuyo asunto es la luz: una sala con vista, un
     amanecer. Aquí la imagen se conserva casi entera y el velo se concentra en
     una elipse bajo el bloque de texto, en lugar de cubrir el cuadro. */
  .port--luz .port__fig img{filter:saturate(.82) contrast(1.03) brightness(.94)}
  /* La caja del titular llega a 19ch aunque la línea más larga mida la mitad:
     así se metía sobre el ventanal y el texto caía a 2,1:1. Se ciñe al texto. */
  .port--luz h1{width:max-content;max-width:100%}
  .port--luz .port__fig::after{
    background:
      radial-gradient(58% 80% at 10% 58%, rgba(4,7,12,.95) 0%, rgba(4,7,12,.84) 40%, rgba(4,7,12,.46) 66%, transparent 86%),
      linear-gradient(to top, rgba(4,7,12,.7) 0%, rgba(4,7,12,.2) 34%, transparent 62%),
      linear-gradient(98deg, rgba(4,7,12,.52) 0%, rgba(4,7,12,.12) 34%, transparent 56%),
      radial-gradient(108% 74% at 86% 6%, rgba(110,201,200,.12) 0%, transparent 62%)}

  /* ── .port--mapa: Presencia, vista satelital del Reino Unido ──
     El océano ocupa todo el flanco izquierdo y la franja de arriba, así que
     el texto se apoya ahí, arriba a la izquierda, y Gran Bretaña queda libre
     a la derecha. El velo es de flanco: apaga el océano, no la isla. */
  .port--mapa{min-height:clamp(560px,86vh,900px);align-items:start}
  .port--mapa .port__fig img{filter:saturate(.9) contrast(1.04) brightness(.96);
    object-position:62% 50%}
  .port--mapa .port__fig::after{
    background:
      linear-gradient(100deg, rgba(4,7,12,.9) 0%, rgba(4,7,12,.72) 30%, rgba(4,7,12,.3) 50%, transparent 64%),
      linear-gradient(to bottom, rgba(4,7,12,.6) 0%, rgba(4,7,12,.16) 30%, transparent 50%),
      linear-gradient(to top, var(--deep) 0%, rgba(7,11,20,.4) 16%, transparent 34%)}
  .port--mapa .port__lede{color:#CFD8E2;max-width:min(52ch,46vw)}
  /* Por debajo de 1300 la portada ya no es 16:9 y cover recorta a los lados:
     anclar a la izquierda empuja la isla a la derecha, fuera del texto, y un
     velo local cubre lo que aún roce la entradilla. */
  @media (min-width:861px) and (max-width:1299px){
    .port--mapa .port__fig img{object-position:8% 50%}}
  /* En pantallas anchas cover recorta arriba y abajo: Escocia sube hasta la
     entradilla. El velo local va en todo escritorio, no solo en el tramo medio. */
  @media (min-width:861px){
    .port--mapa .port__fig::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
      background:radial-gradient(48% 30% at 24% 44%, rgba(4,7,12,.9) 0%, rgba(4,7,12,.7) 55%, transparent 96%)}}
  /* En estrecho el mapa va arriba, en su propio marco, y el texto debajo.
     El marco recorta (overflow): la imagen entra con un acercamiento y, sin
     recorte, su borde inferior asomaba bajo el degradado como una franja. */
  @media (max-width:860px){
    .port--mapa{min-height:0;padding-block:0 clamp(40px,10vw,56px)}
    .port--mapa .port__fig{position:relative;inset:auto;aspect-ratio:4/3;overflow:hidden}
    .port--mapa .port__fig img{object-position:60% 50%}
    .port--mapa .port__fig::after{
      background:linear-gradient(to bottom, transparent 58%, var(--deep) 100%)}
    .port--mapa .port__in{margin-top:clamp(8px,3vw,20px)}
    .port--mapa .port__lede{max-width:none}}

  /* ── grado de color para fotografía suelta ──
     Las portadas lo llevan en su propio velo; una imagen dentro del cuerpo o
     en una tarjeta, no. Sin él, material muy saturado —los neones rojos y
     cianes del gráfico de inversión— se pelea con el navy y la arena, y salta
     al lado de las otras tarjetas del inicio, que son fotografías sobrias. */
  .grado{filter:saturate(.6) contrast(1.06) brightness(.92)}

  /* ═══════════════════════════════════════════════════════════════════
     SOSTENIBILIDAD Y COMUNICADOS
     Las dos páginas repetían el esqueleto de las demás —portada, hilo de
     tiempos, banda de foto, cierre— y con eso aplanaban su contenido.

     Sostenibilidad tiene cuatro cosas de naturaleza distinta: una
     certificación, una medición, un programa con nombre y una red de
     alianzas. En cuatro tiempos numerados iguales pesan lo mismo, y no lo
     pesan. Cada una recibe ahora la forma que le corresponde.

     Comunicados tiene un único comunicado. En una fila de lista parece una
     sección vacía; a toda página, con su fecha al margen, parece lo que es.
     ═══════════════════════════════════════════════════════════════════ */

  /* ── el sello: una certificación no es un párrafo ── */
  .sello{position:relative;display:grid;gap:12px;align-content:center;justify-items:start;
    padding:clamp(30px,3.6vw,50px);border-radius:var(--r-panel);
    background:linear-gradient(162deg,
      color-mix(in srgb, var(--acc) 11%, transparent) 0%, transparent 64%), var(--glass);
    box-shadow:inset 0 0 0 1px var(--glass-line)}
  /* doble filete interior: el gesto que distingue un sello de una tarjeta */
  .sello::after{content:"";position:absolute;inset:11px;pointer-events:none;
    border-radius:calc(var(--r-panel) - 5px);
    border:1px solid color-mix(in srgb, var(--acc) 24%, transparent)}
  .sello__n{font-family:var(--ff);font-weight:700;letter-spacing:-.048em;line-height:.88;
    font-size:clamp(2.3rem,4.4vw,3.6rem);color:var(--acc)}
  .sello__t{font-family:var(--ui);font-size:.71rem;font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;color:var(--acc-2)}
  .sello p{color:var(--dim);font-size:.94rem;max-width:30ch;margin-top:4px}

  /* ── el monumento: un dato solo, a tamaño de titular ──
     La banda de cifras sirve para tres datos de igual peso. Cuando hay uno
     solo y es el resultado de una medición, pide otra forma: el número manda
     y la frase lo explica al lado. */
  .mono-dato{display:grid;gap:clamp(20px,3vw,54px);align-items:center;
    padding-block:clamp(30px,3.6vw,52px);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  @media (min-width:900px){.mono-dato{grid-template-columns:auto 1fr}}
  .mono-dato__n{font-family:var(--ff);font-weight:700;letter-spacing:-.052em;line-height:.84;
    font-size:clamp(3.2rem,8.4vw,7rem);
    background:linear-gradient(158deg, var(--ink) 0%, var(--acc) 96%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .mono-dato__t{display:block;font-family:var(--ui);font-size:.72rem;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:var(--acc-2);margin-top:14px}
  /* Esta regla es un descendiente —(0,1,1)— y pisaba a .mono-dato__n, que es
     una sola clase: la cifra salía a tamaño de párrafo. Se acota a su clase. */
  .mono-dato__p{color:var(--dim);max-width:46ch;font-size:clamp(1rem,1.15vw,1.12rem)}

  /* ── alianzas: nombres propios, no una enumeración dentro de un párrafo ── */
  .ali{display:grid;gap:clamp(10px,1.1vw,18px);list-style:none;padding:0;
    margin-top:clamp(24px,3vw,40px);
    grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
  .ali li{--tono:var(--acc);position:relative;display:grid;gap:10px;align-content:start;
    padding:clamp(22px,2.4vw,32px);border-radius:var(--r-panel);
    background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-line);
    transition:transform .4s var(--e),box-shadow .4s var(--e)}
  .ali li:nth-child(2n){--tono:var(--acc-2)}
  .ali li::before{content:"";position:absolute;top:0;left:clamp(22px,2.4vw,32px);
    width:0;height:2px;background:var(--tono);border-radius:var(--r-pill);
    transition:width 1s var(--e) var(--d,0ms)}
  .ali li.in::before{width:clamp(30px,3.4vw,52px)}
  @media (hover:hover){.ali li:hover{transform:translateY(-5px);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tono) 40%, transparent),var(--sombra)}}
  .ali__t{font-family:var(--ff);font-size:1.04rem;font-weight:600;letter-spacing:-.022em}
  .ali p{color:var(--dim);font-size:.92rem}

  /* ── comunicado destacado ──
     Un solo comunicado en una fila de lista parece una sección vacía. A toda
     página, con la fecha al margen y el titular a tamaño de portada, parece
     lo que es: la noticia del grupo. */
  .coma{display:grid;gap:clamp(20px,3vw,56px)}
  @media (min-width:960px){
    .coma{grid-template-columns:minmax(170px,.22fr) 1fr;align-items:start}
    .coma__meta{position:sticky;top:clamp(98px,12vh,142px)}}
  .coma__meta{display:grid;gap:10px;align-content:start;
    padding-top:clamp(10px,1.4vw,18px);border-top:2px solid var(--acc)}
  .coma__f{font-family:var(--ff);font-size:clamp(1.5rem,2.4vw,2.05rem);font-weight:700;
    letter-spacing:-.04em;line-height:.94;color:var(--ink)}
  .coma__m{font-family:var(--ui);font-size:.71rem;font-weight:600;letter-spacing:.15em;
    text-transform:uppercase;color:var(--acc-2)}
  .coma h2{font-size:clamp(1.55rem,3.2vw,2.75rem);line-height:1.08;letter-spacing:-.03em;
    max-width:24ch;margin-bottom:clamp(20px,2.4vw,32px)}
  .coma__c{color:var(--dim);font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.62;
    max-width:60ch}

  /* ── canal oficial ── */
  .canal{position:relative;overflow:hidden;
    background:
      radial-gradient(64% 104% at 88% 8%, rgba(110,201,200,.16) 0%, transparent 58%),
      linear-gradient(160deg, var(--lift) 0%, var(--navy) 50%, var(--deep) 100%);
    padding-block:clamp(54px,6.6vw,92px)}
  .canal__in{display:grid;gap:clamp(22px,3vw,52px);align-items:center}
  @media (min-width:900px){.canal__in{grid-template-columns:1.3fr auto}}
  .canal h2{font-size:clamp(1.4rem,2.5vw,2.05rem);letter-spacing:-.03em;max-width:22ch}
  .canal .lede{margin-top:14px}

  /* ═══════════════════════════════════════════════════════════════════
     EQUIDAD DE GÉNERO
     Era la página más plana del sitio: una portada, una foto pequeña al
     lado y cuatro tiempos numerados. Pero su texto esconde cuatro frentes
     de trabajo dentro de una sola frase, un compromiso firmado con año, un
     programa con nombre propio y tres organizaciones aliadas. Cada cosa
     recibe su forma.
     ═══════════════════════════════════════════════════════════════════ */

  /* ── los frentes: rejilla escalonada ──
     Escalonar las pares rompe la fila y da movimiento sin animar nada; el
     arco de la esquina crece al señalar. */
  .fre{display:grid;gap:clamp(12px,1.4vw,24px);list-style:none;padding:0;
    margin-top:clamp(28px,3.4vw,48px);
    grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
  @media (min-width:1000px){
    .fre{margin-bottom:clamp(20px,3vw,48px)}
    .fre li:nth-child(even){transform:translateY(clamp(20px,3vw,48px))}
    @media (hover:hover){.fre li:nth-child(even):hover{transform:translateY(calc(clamp(20px,3vw,48px) - 6px))}}}
  .fre li{--tono:var(--acc);position:relative;overflow:hidden;isolation:isolate;
    display:grid;gap:10px;align-content:start;min-height:clamp(168px,17vw,210px);
    padding:clamp(22px,2.4vw,32px);border-radius:var(--r-panel);
    /* El cristal (--glass) está pensado para fondo oscuro: sobre papel las
       fichas casi no se distinguían. Aquí el relleno es el tinte de las
       tarjetas de índice, que sí tiene cuerpo. */
    background:linear-gradient(158deg,
      color-mix(in srgb, var(--tono) 15%, transparent) 0%,
      var(--tinte) 46%,
      color-mix(in srgb, var(--acc) 10%, var(--tinte-alto)) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px var(--line);
    transition:transform .42s var(--e),box-shadow .42s var(--e)}
  .fre li:nth-child(4n+2),.fre li:nth-child(4n+3){--tono:var(--acc-2)}
  .fre__t{color:var(--ink)}
  @media (hover:hover){.fre li:hover{transform:translateY(-6px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6),
      inset 0 0 0 1px color-mix(in srgb, var(--tono) 46%, transparent),var(--sombra)}}
  .fre__n{font-family:var(--ui);font-size:.68rem;font-weight:600;letter-spacing:.15em;
    color:color-mix(in srgb, var(--tono) 86%, transparent)}
  .fre__t{font-family:var(--ff);font-size:clamp(1.04rem,1.3vw,1.2rem);font-weight:600;
    letter-spacing:-.022em;line-height:1.26;max-width:18ch}

  /* ── el compromiso firmado ──
     Un año y una firma no son un párrafo: el año manda, la frase lo sostiene
     y un trazo cierra por debajo, como una rúbrica. */
  .firma{position:relative;overflow:hidden;
    background:
      radial-gradient(60% 104% at 84% 6%, rgba(110,201,200,.15) 0%, transparent 58%),
      linear-gradient(158deg, var(--lift) 0%, var(--navy) 52%, var(--deep) 100%);
    padding-block:clamp(56px,7vw,100px)}
  .firma__in{display:grid;gap:clamp(20px,3vw,58px);align-items:center}
  @media (min-width:900px){.firma__in{grid-template-columns:auto 1fr}}
  .firma__a{font-family:var(--ff);font-weight:700;letter-spacing:-.05em;line-height:.84;
    font-size:clamp(3.4rem,9vw,7.6rem);
    background:linear-gradient(164deg,#FFFFFF 0%,var(--turq) 94%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .firma__t{font-family:var(--ff);font-weight:500;letter-spacing:-.024em;
    font-size:clamp(1.24rem,2.3vw,2rem);line-height:1.24;color:var(--ink);max-width:30ch}
  /* la rúbrica: un trazo que se dibuja al entrar en pantalla */
  .firma__r{position:relative;display:block;height:2px;margin-top:clamp(18px,2.2vw,28px);
    max-width:340px;background:rgba(233,237,242,.14);border-radius:var(--r-pill)}
  .firma__r i{position:absolute;inset:0;width:0;border-radius:inherit;
    background:linear-gradient(90deg,var(--sand),var(--turq));
    transition:width 1.5s var(--e) .2s}
  .firma.in .firma__r i{width:100%}

  /* ── tira de organizaciones aliadas ── */
  .marcas{display:flex;flex-wrap:wrap;gap:clamp(18px,2.6vw,46px);list-style:none;padding:0;
    margin-top:clamp(24px,3vw,40px);
    padding-top:clamp(20px,2.4vw,32px);border-top:1px solid var(--line)}
  .marcas li{font-family:var(--ff);font-size:clamp(1.02rem,1.5vw,1.3rem);font-weight:600;
    letter-spacing:-.022em;color:var(--dim);
    transition:color .35s var(--e),transform .35s var(--e)}
  @media (hover:hover){.marcas li:hover{color:var(--acc);transform:translateY(-2px)}}

  /* ═══════════════════════════════════════════════════════════════════
     CABECERA COMPACTA
     La portada oscura tiene sentido cuando hay una fotografía que llene la
     banda. Sin ella —páginas conceptuales y de contacto— eran 540px de
     oscuro con el titular en una esquina y el resto vacío, repetido igual
     en seis páginas: eso es la plantilla que el cliente venía señalando.

     Estas abren con una cabecera compacta y en claro: el titular a la
     izquierda, la entradilla y los marcadores a la derecha, alineados por
     la base. Un tercio del alto, y el sitio deja de abrir siempre oscuro.
     ═══════════════════════════════════════════════════════════════════ */
  .cab{position:relative;
    padding-block:clamp(48px,6.4vh,88px) clamp(38px,4.6vw,66px);
    background:
      radial-gradient(68% 130% at 90% 0%, color-mix(in srgb, var(--acc) 15%, transparent) 0%, transparent 60%),
      radial-gradient(56% 98% at 0% 106%, color-mix(in srgb, var(--acc-2) 12%, transparent) 0%, transparent 64%),
      linear-gradient(176deg, var(--tinte) 0%, var(--bg-alt) 46%, var(--bg) 100%);
    box-shadow:inset 0 -1px 0 var(--line)}
  .cab__in{display:grid;gap:clamp(22px,3vw,58px)}
  @media (min-width:920px){
    .cab__in{grid-template-columns:1.12fr .88fr;align-items:end}
    .cab__lado{justify-self:end;text-align:right;max-width:42ch}
    .cab__lado .port__tag{justify-content:flex-end}}
  /* barra de acento que crece: el gesto de apertura, en lugar del vacío */
  .cab__eye{position:relative;display:block;width:max-content;max-width:100%;
    padding-top:clamp(16px,2vw,24px);
    font-family:var(--ui);font-size:.74rem;font-weight:600;letter-spacing:.17em;
    text-transform:uppercase;color:var(--acc)}
  .cab__eye::before{content:"";position:absolute;top:0;left:0;height:3px;width:0;
    border-radius:var(--r-pill);
    background:linear-gradient(90deg,var(--acc),var(--acc-2));
    transition:width 1.1s var(--e) var(--d,0ms)}
  .cab__eye.in::before{width:clamp(44px,5.4vw,82px)}
  .cab h1{font-size:clamp(2.25rem,4.9vw,3.9rem);line-height:1.02;letter-spacing:-.038em;
    margin-top:clamp(16px,2vw,24px);max-width:20ch}
  .cab__lede{color:var(--dim);font-size:clamp(1.02rem,1.2vw,1.16rem)}
  .cab__lado .port__tag{margin-top:clamp(18px,2.2vw,28px)}

  /* Los marcadores dejan de llevar color fijo de tema oscuro: con los papeles
     funcionan igual sobre papel claro y sobre la portada oscura. */
  .port__tag li{border-color:var(--line);background:var(--glass);color:var(--dim)}

  /* ═══════════════════════════════════════════════════════════════════
     EQUIDAD DE GÉNERO · composición sin cajas
     Todo el sitio estaba construido con el mismo recurso: un rectángulo
     redondeado con un rótulo dentro. Aquí no hay ninguno. La página se
     arma con lo que no había usado: superposición, sangrado por los
     bordes, tipografía a tamaño de imagen y escalonado asimétrico.
     Y el peso va en oscuro, no en papel.
     ═══════════════════════════════════════════════════════════════════ */

  /* ── apertura: la fotografía sangra por la izquierda y el titular la monta ──
     La fotografía es pequeña (738px de ancho), así que no se amplía: se usa a
     su tamaño, sangrando por el borde, y se disuelve con una máscara. Un
     fragmento sin marco no delata la resolución; una foto enmarcada, sí. */
  .eqh{position:relative;isolation:isolate;overflow:hidden;
    display:grid;align-items:center;
    min-height:clamp(560px,88vh,940px);
    padding-block:clamp(96px,13vh,150px) clamp(48px,7vh,90px);
    background:
      radial-gradient(58% 92% at 76% 18%, rgba(110,201,200,.16) 0%, transparent 60%),
      radial-gradient(46% 78% at 4% 96%, rgba(204,176,120,.11) 0%, transparent 64%),
      linear-gradient(162deg, var(--lift) 0%, var(--navy) 44%, var(--void) 100%)}
  .eqh__fig{position:absolute;z-index:0;margin:0;pointer-events:none;
    left:calc(-1 * clamp(70px,9vw,210px));bottom:calc(-1 * clamp(10px,2vw,44px));
    width:min(64vw,880px)}
  .eqh__fig img{width:100%;height:auto;
    filter:saturate(.72) contrast(1.05) brightness(.88);
    -webkit-mask-image:radial-gradient(86% 96% at 22% 78%, #000 26%, rgba(0,0,0,.5) 58%, transparent 84%);
    mask-image:radial-gradient(86% 96% at 22% 78%, #000 26%, rgba(0,0,0,.5) 58%, transparent 84%)}
  .eqh__in{position:relative;z-index:2;width:100%}
  @media (min-width:1000px){
    /* el titular se corre a la derecha y monta sobre el borde disuelto */
    .eqh__in > *{margin-left:auto;max-width:min(60ch,62%)}
    /* El rótulo es max-content: con margin-left:auto se iba al borde derecho
       en lugar de alinearse con el titular. Va con dos clases porque la regla
       base está más abajo en el archivo y, a igual especificidad, ganaba. */
    /* max-width en ch se mide sobre el cuerpo del propio elemento, y el del
       rótulo es diminuto: min(60ch,62%) le daba 360px y margin-left:auto lo
       dejaba flotando a media pantalla. Aquí el tope va en porcentaje. */
    .eqh .eqh__eye{width:auto;max-width:62%}}
  .eqh__eye{display:block;width:max-content;font-family:var(--ui);font-size:.74rem;
    font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--turq)}
  .eqh h1{font-size:clamp(2.6rem,7.4vw,6.4rem);line-height:.94;letter-spacing:-.045em;
    margin-block:clamp(18px,2.4vw,30px) 0;color:#F2F5F8}
  .eqh__lede{font-family:var(--ff);font-weight:500;letter-spacing:-.022em;
    font-size:clamp(1.2rem,2.3vw,2rem);line-height:1.22;color:#D8E0E8;
    margin-top:clamp(20px,2.6vw,34px);max-width:24ch}
  /* el programa, en pequeño, colgando del titular */
  .eqh__pie{margin-top:clamp(28px,3.6vw,52px);padding-top:clamp(16px,2vw,24px);
    border-top:1px solid rgba(233,237,242,.18);max-width:46ch}
  .eqh__pie b{color:#F2F5F8;font-weight:600}
  .eqh__pie p{color:#AEBAC6;font-size:clamp(.95rem,1.05vw,1.04rem);line-height:1.6}
  .eqh__ref{display:block;font-family:var(--ui);font-size:.7rem;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:var(--sand);margin-bottom:10px}
  /* En estrecho la fotografía no va detrás del titular —a media opacidad
     ensuciaba la entradilla— sino arriba, entera, disolviéndose hacia el
     texto, que queda sobre oscuro limpio. */
  @media (max-width:999px){
    .eqh{min-height:0;display:block;padding-top:0}
    /* el fundido termina antes del borde y el solape es menor: con el borde
       aún a medio disolver, el rótulo turquesa quedaba en 2,3:1 */
    .eqh__fig{position:relative;left:auto;bottom:auto;width:100%;
      margin-bottom:clamp(-20px,-4vw,-10px)}
    .eqh__fig img{
      -webkit-mask-image:linear-gradient(to bottom,#000 44%,transparent 86%);
      mask-image:linear-gradient(to bottom,#000 44%,transparent 86%)}}

  /* ── los frentes: escalera de tipografía, sin una sola caja ──
     Cada renglón entra más adentro que el anterior. La asimetría es la forma;
     no hay contenedor que rellenar. */
  .esc{list-style:none;margin:0;padding:0;counter-reset:esc}
  .esc li{position:relative;display:flex;align-items:baseline;
    gap:clamp(18px,3vw,54px);padding-block:clamp(22px,3vw,44px);
    border-top:1px solid rgba(233,237,242,.14);
    transition:padding-left .55s var(--e)}
  @media (min-width:900px){
    .esc li:nth-child(2){margin-left:7%}
    .esc li:nth-child(3){margin-left:14%}
    .esc li:nth-child(4){margin-left:21%}
    @media (hover:hover){.esc li:hover{padding-left:18px}}}
  .esc li::after{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;
    background:linear-gradient(90deg,var(--turq),transparent);
    transition:width 1.05s var(--e) var(--d,0ms)}
  .esc li:nth-child(2n)::after{background:linear-gradient(90deg,var(--sand),transparent)}
  .esc li.in::after{width:clamp(56px,7vw,120px)}
  .esc__n{flex:none;font-family:var(--ff);font-weight:700;letter-spacing:-.04em;
    font-size:clamp(.9rem,1.1vw,1.06rem);color:rgba(233,237,242,.4);
    transition:color .5s var(--e)}
  .esc li:nth-child(2n) .esc__n{color:rgba(204,176,120,.6)}
  @media (hover:hover){.esc li:hover .esc__n{color:var(--turq)}}
  @media (hover:hover){.esc li:nth-child(2n):hover .esc__n{color:var(--sand)}}
  .esc__t{font-family:var(--ff);font-weight:600;letter-spacing:-.034em;line-height:1.06;
    font-size:clamp(1.5rem,3.6vw,3.1rem);color:#EDF1F5}

  /* ── el hito: la cifra a tamaño de imagen, cortada por el borde ── */
  .hito{position:relative;overflow:hidden;
    padding-block:clamp(54px,7vw,104px)}
  /* La cifra sangra de verdad por el borde izquierdo. Antes sólo asomaba
     -.055em y la frase se le montaba encima: «Movistar» quedaba ilegible
     sobre los dígitos, medido en 1,4:1. Ahora no se solapan. */
  .hito__a{display:block;font-family:var(--ff);font-weight:700;line-height:.76;
    letter-spacing:-.07em;font-size:clamp(5.4rem,20vw,15rem);
    margin-left:calc(-1 * clamp(18px,5.4vw,118px));
    background:linear-gradient(168deg, var(--ink) 4%, var(--acc) 92%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .hito__t{font-family:var(--ff);font-weight:500;letter-spacing:-.024em;
    font-size:clamp(1.18rem,2.2vw,1.9rem);line-height:1.22;color:var(--ink);
    max-width:26ch;margin-top:clamp(16px,2vw,28px)}
  /* En diagonal —cifra arriba a la izquierda, frase abajo a la derecha— dejaba
     un cuadrante entero vacío. La frase va al costado de la cifra, centrada en
     su altura óptica: la cifra sigue sangrando por la izquierda. */
  @media (min-width:1000px){
    .hito > .shell{display:grid;grid-template-columns:auto 1fr;align-items:center;
      gap:clamp(28px,4vw,72px)}
    .hito__t{margin:0;max-width:24ch}}

  /* ── aliados: nombres a tamaño de titular, separados por filete ── */
  .ali2{list-style:none;margin:0;padding:0;display:grid}
  .ali2 li{padding-block:clamp(18px,2.2vw,32px);
    border-top:1px solid rgba(233,237,242,.14);
    font-family:var(--ff);font-weight:600;letter-spacing:-.03em;line-height:1.1;
    font-size:clamp(1.3rem,3vw,2.5rem);color:#E4EAF0;
    transition:color .4s var(--e),transform .4s var(--e)}
  @media (hover:hover){.ali2 li:hover{color:var(--turq);transform:translateX(8px)}}

  /* ── el mismo vocabulario, extendido a las demás páginas ──
     La escalera admite una línea de descripción y enlaces; con cinco renglones
     el último entra al 28%. La lista de nombres puede ir a dos columnas. */
  @media (min-width:900px){.esc li:nth-child(5){margin-left:28%}}
  .esc li{flex-wrap:wrap}
  .esc__c{display:grid;gap:8px;flex:1 1 20ch;min-width:0}
  .esc__d{color:#AEBAC6;font-size:clamp(.96rem,1.1vw,1.06rem);line-height:1.55;max-width:52ch}
  .esc a{display:flex;align-items:baseline;gap:clamp(18px,3vw,54px);width:100%;
    text-decoration:none;color:inherit}
  .esc a .esc__t{transition:color .4s var(--e)}
  @media (hover:hover){.esc a:hover .esc__t{color:var(--turq)}}
  .esc a::after{content:"→";margin-left:auto;align-self:center;font-family:var(--ui);
    font-size:clamp(1.2rem,2vw,1.7rem);color:rgba(233,237,242,.45);
    transition:transform .4s var(--e),color .4s var(--e)}
  @media (hover:hover){.esc a:hover::after{transform:translateX(8px);color:var(--turq)}}
  @media (min-width:900px){.ali2--2{grid-template-columns:1fr 1fr;column-gap:clamp(30px,4vw,72px)}}
  .ali2--2 li{font-size:clamp(1.12rem,2vw,1.7rem)}
  /* el hito admite una cifra larga (1,281.67) sin desbordar */
  .hito__a--larga{font-size:clamp(4rem,13vw,10.5rem)}

  /* Una cifra de un solo dígito con una frase corta dejaba media franja vacía
     a la derecha: la cifra crece hasta ocupar la altura y la frase sube de cuerpo. */
  .hito__a--sola{font-size:clamp(8rem,30vw,24rem)}
  .hito__t--grande{font-size:clamp(1.5rem,3.4vw,3rem);max-width:18ch}
  @media (min-width:1000px){.hito__t--grande{max-width:18ch}}
  /* La foto de paneles es clara y apaisada: con el fundido general su borde
     superior se leía como un corte recto. Aquí se disuelve antes. */
  @media (min-width:1000px){
    .eqh__fig--fundido img{
      -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 55%),radial-gradient(78% 86% at 20% 84%, #000 20%, rgba(0,0,0,.42) 50%, transparent 74%);
      -webkit-mask-composite:source-in;
      mask-image:linear-gradient(to bottom,transparent 0%,#000 55%),radial-gradient(78% 86% at 20% 84%, #000 20%, rgba(0,0,0,.42) 50%, transparent 74%);
      mask-composite:intersect}}

  /* ── portada .eqh, segunda vuelta ──
     La foto ocupaba una esquina y el resto era azul vacío, con la imagen tan
     disuelta que casi no se leía. Ahora llena toda la mitad izquierda, de
     arriba abajo, y sólo se funde hacia el titular. La portada es más baja. */
  .eqh{min-height:clamp(500px,76vh,800px);
    padding-block:clamp(64px,9vh,110px) clamp(48px,7vh,86px)}
  @media (min-width:1000px){
    .eqh .eqh__fig{top:0;bottom:0;left:0;width:52%;height:100%}
    .eqh .eqh__fig img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);
      filter:saturate(.85) contrast(1.04) brightness(.92);
      -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 58%,rgba(0,0,0,.5) 80%,transparent 100%);
      mask-image:linear-gradient(90deg,#000 0%,#000 58%,rgba(0,0,0,.5) 80%,transparent 100%);
      -webkit-mask-composite:source-over;mask-composite:add}
    .eqh__in > *{max-width:min(60ch,49%)}
    .eqh .eqh__eye{max-width:49%}
    .eqh h1{font-size:clamp(2.6rem,6.2vw,5.6rem)}}
  /* en móvil la foto se ve entera antes de fundirse */
  @media (max-width:999px){
    .eqh .eqh__fig img{
      -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
      mask-image:linear-gradient(to bottom,#000 62%,transparent 100%)}}

  /* ── la escalera entra peldaño a peldaño ──
     Cada renglón llega desde la izquierda, y dentro de él el número, el
     nombre y la frase salen uno detrás de otro. */
  .motion .esc li[data-r]{transform:translateX(-56px)}
  .motion .esc li[data-r].in{transform:none;
    transition:opacity .8s var(--e),transform .9s var(--e);transition-delay:var(--d,0ms)}
  .motion .esc li[data-r] :is(.esc__n,.esc__t,.esc__d){opacity:0;transform:translateX(-22px)}
  .motion .esc li[data-r].in :is(.esc__n,.esc__t,.esc__d){opacity:1;transform:none;
    transition:opacity .7s var(--e),transform .8s var(--e),color .5s var(--e)}
  .motion .esc li[data-r].in .esc__n{transition-delay:var(--d,0ms)}
  .motion .esc li[data-r].in .esc__t{transition-delay:calc(var(--d,0ms) + 140ms)}
  .motion .esc li[data-r].in .esc__d{transition-delay:calc(var(--d,0ms) + 280ms)}
  @media (prefers-reduced-motion:reduce){
    .motion .esc li[data-r],.motion .esc li[data-r] :is(.esc__n,.esc__t,.esc__d){opacity:1;transform:none;transition:none}}
  /* La portada más baja de escritorio venía después de la regla de móvil y la
     pisaba: dejaba 76px de azul sobre la foto y 270px vacíos bajo la
     entradilla. En estrecho la portada mide lo que su contenido, y la foto
     gana altura para no quedar como una tira. */
  @media (max-width:999px){
    .eqh{min-height:0;padding-top:0;padding-bottom:clamp(40px,8vw,64px)}
    .eqh .eqh__fig{height:clamp(240px,64vw,460px)}
    .eqh .eqh__fig img{height:100%;object-fit:cover;object-position:var(--pos,center)}}

  /* ── ajustes de celular y tablet ── */
  @media (max-width:999px){
    /* el modelo de inversión: sin relleno propio, el rótulo quedaba pegado
       al borde inferior de la portada */
    .pin__vp{padding-block:clamp(44px,8vw,72px)}
    /* la figura de Movistar e IBW sube hasta la barra: dejaba una franja
       clara encima de la foto */
    .ent .bleed-l,.ent .bleed-r{margin-top:calc(-1 * var(--entpad))}
    /* en una sola columna, el tiempo de «Nuestra compañía» ocupa el ancho */
    .hilo__i p{max-width:68ch}
  }
  /* en tablet la foto no tiene por qué comerse pantalla y media */
  @media (min-width:600px) and (max-width:999px){
    .figbox{min-height:clamp(320px,50vw,460px)}
    .split--media .figbox{height:clamp(320px,50vw,460px)}
  }
  /* En celular el bloque de texto ocupa casi todo el ancho y la elipse del
     velo no lo cubría entero: el rótulo caía a 3,1:1 sobre el ventanal. */
  @media (max-width:699px){
    .port--luz .port__fig::after{
      background:
        linear-gradient(to top, rgba(4,7,12,.9) 0%, rgba(4,7,12,.72) 46%, rgba(4,7,12,.5) 72%, rgba(4,7,12,.2) 100%),
        radial-gradient(108% 74% at 86% 6%, rgba(110,201,200,.12) 0%, transparent 62%)}}
  /* y el rótulo, en un turquesa más claro, pasa de 3,2:1 al mínimo AA */
  @media (max-width:999px){.port--luz .port__eye{color:#B8EDEA}}
  /* La foto de la torre es vertical: en una columna tomaba su proporción y
     medía más de 1000px en tablet. Altura fija, encuadrada por arriba. */
  @media (max-width:999px){
    .ent .figbox{height:clamp(300px,62vw,500px);min-height:0}
    .ent .figbox img{object-position:center 30%}}
  /* en una columna la foto de IBW va arriba, como la de Movistar: al pie,
     el margen que la sube hasta la barra la montaba sobre el botón */
  @media (max-width:999px){.ent--flip .ent__media{order:-1}}
  /* En tablet la cifra y su frase van lado a lado, como en escritorio:
     apiladas dejaban media franja vacía a la derecha. */
  @media (min-width:600px) and (max-width:999px){
    .hito > .shell{display:grid;grid-template-columns:auto 1fr;align-items:center;
      gap:clamp(24px,4vw,48px)}
    .hito__t{margin:0}}
  /* Las notas pasan a dos columnas —fecha al margen— desde tablet vertical;
     en una sola la fecha partida en dos renglones parecía un titular más. */
  /* el comunicado, en una columna, deja de ceñirse a la medida de escritorio
     y la fecha va en un renglón */
  @media (max-width:999px){
    .coma h2{max-width:28ch}
    .coma__c{max-width:none}
    .coma__f br{display:none}}

  /* ── Capacidades que se integran: las dos marcas que se suman ──
     La columna derecha quedaba vacía. Van los dos logos del portafolio,
     unidos por una cruz de filetes, y cada uno lleva a su página. */
  .duo{display:flex;align-items:center;justify-content:center;
    gap:clamp(22px,3.4vw,56px);padding-block:clamp(10px,2vw,30px);position:relative}
  .duo::before{content:"";position:absolute;inset:-18% 0;z-index:-1;pointer-events:none;
    background:radial-gradient(50% 50% at 50% 50%,
      color-mix(in srgb, var(--acc) 14%, transparent) 0%, transparent 70%)}
  .duo__i{display:block;line-height:0;transition:transform .5s var(--e)}
  .duo__mov{height:clamp(84px,9vw,132px);width:auto}
  .duo__ibw{height:clamp(38px,4vw,58px);width:auto}
  .duo__mas{position:relative;flex:none;width:clamp(26px,2.6vw,38px);aspect-ratio:1}
  .duo__mas::before,.duo__mas::after{content:"";position:absolute;left:50%;top:50%;
    background:linear-gradient(90deg,var(--acc),var(--acc-2));transform:translate(-50%,-50%)}
  .duo__mas::before{width:100%;height:2px}
  .duo__mas::after{width:2px;height:100%;background:linear-gradient(180deg,var(--acc),var(--acc-2))}
  @media (hover:hover){.duo__i:hover{transform:translateY(-6px)}}
  @media (max-width:999px){.duo{justify-content:flex-start;margin-top:8px}}

  /* el navegador no espera un segundo toque para hacer zoom: el primero ya
     sigue el enlace */
  html{touch-action:manipulation}

  /* ── .lado: una lista con su fotografía al costado ──
     Preguntas frecuentes y «Cómo trabajamos» ocupaban dos tercios del ancho y
     dejaban el resto en blanco. La foto va en la columna libre, pegada al
     borde de la pantalla y quieta mientras se recorre la lista. */
  .lado{display:grid;gap:clamp(30px,4vw,64px)}
  .lado__fig{margin:0;position:relative;overflow:hidden;line-height:0}
  .lado__fig img{width:100%;height:100%;object-fit:cover;display:block}
  @media (min-width:1000px){
    .lado{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}
    .lado__fig{position:sticky;top:clamp(96px,12vh,128px);
      margin-right:calc(-1 * var(--edge));height:clamp(420px,62vh,640px);
      border-radius:var(--r-panel) 0 0 var(--r-panel)}
    .lado__fig--alta{height:clamp(480px,74vh,760px)}
    /* en la columna estrecha el renglón del método pasa a dos líneas */
    .lado--metodo .led__i{grid-template-columns:minmax(56px,auto) 1fr}
    .lado--metodo .led__i p{grid-column:2}
    .lado--metodo .led__n{grid-row:span 2}}
  @media (max-width:999px){
    .lado__fig{order:-1;margin-inline:calc(-1 * var(--edge));height:clamp(220px,56vw,420px)}}
  .lado__fig--alta img{object-position:center 42%}

  /* ── .vista: la ciudad de noche detrás de la visión de portafolio ──
     El texto se apoya sobre el cielo, que es la parte oscura del cuadro; la
     ciudad y las estelas de luz quedan abajo, a la vista. */
  .vista{position:relative;isolation:isolate;overflow:hidden;background:#070B14;
    --ink:#F2F5F8;--dim:#C9D2DC;
    padding-block:clamp(70px,9vw,130px) clamp(280px,34vw,520px)}
  .vista__fig{position:absolute;inset:0;z-index:-1}
  .vista__fig img{width:100%;height:100%;object-fit:cover;object-position:center 78%;
    filter:saturate(.9) brightness(.92)}
  .vista__fig::after{content:"";position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(7,11,20,.94) 0%,rgba(7,11,20,.82) 30%,
      rgba(7,11,20,.35) 58%,rgba(7,11,20,0) 76%,rgba(7,11,20,.25) 100%)}
  .vista .lede{color:#D6DEE7}
  @media (max-width:999px){
    .vista{padding-bottom:clamp(220px,70vw,380px)}
    .vista__fig img{object-position:32% 82%}
    .vista__fig::after{background:linear-gradient(to bottom,rgba(7,11,20,.96) 0%,
      rgba(7,11,20,.9) 55%,rgba(7,11,20,.2) 78%,rgba(7,11,20,.1) 100%)}}
  /* La foto arranca más abajo y su cielo se funde con el fondo: el texto queda
     sobre azul limpio y la ciudad entera a la vista debajo. */
  .vista{padding-block:clamp(70px,8vw,120px) clamp(300px,36vw,560px)}
  .vista__fig{inset:auto 0 0 0;height:clamp(420px,56vw,860px)}
  .vista__fig img{object-position:center 70%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 26%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 26%)}
  .vista__fig::after{background:linear-gradient(to bottom,rgba(7,11,20,.6) 0%,
    rgba(7,11,20,.2) 30%,rgba(7,11,20,0) 60%,rgba(7,11,20,.3) 100%)}
  .vista .stmt{color:#F2F5F8}
  @media (max-width:999px){
    .vista{padding-bottom:clamp(230px,62vw,400px)}
    .vista__fig{height:clamp(300px,80vw,520px)}
    .vista__fig img{object-position:30% 70%}
    .vista__fig::after{background:linear-gradient(to bottom,rgba(7,11,20,.5) 0%,rgba(7,11,20,0) 40%)}}
  @media (min-width:1000px){.vista{padding-bottom:clamp(340px,46vw,680px)}}
  /* el último párrafo rozaba el cielo aún iluminado: el fundido llega más abajo */
  .vista__fig img{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 24%,#000 42%);
    mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 24%,#000 42%)}
  @media (max-width:999px){.vista{padding-bottom:clamp(250px,70vw,440px)}}
  /* La cifra se cortaba: sangraba por el borde a propósito y, con el
     degradado recortado al texto, lo que salía de su caja —interlineado de
     .76— quedaba sin pintar. Ahora entra entera y con aire arriba y abajo. */
  .hito__a{margin-left:0;line-height:1;padding-block:.04em;
    -webkit-box-decoration-break:clone;box-decoration-break:clone}
  @media (max-width:599px){.hito__a--larga{font-size:clamp(3.4rem,17vw,5rem)}}

  /* ── Equidad: la balanza como portada ──
     La mujer va a la izquierda y el hombre a la derecha del cuadro: la foto
     ocupa algo más y se funde más tarde, para que los dos queden a la vista. */
  @media (min-width:1000px){
    .eqh--balanza .eqh__fig{width:57%}
    .eqh--balanza .eqh__fig img{object-position:58% 50%;
      -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 70%,rgba(0,0,0,.45) 88%,transparent 100%);
      mask-image:linear-gradient(90deg,#000 0%,#000 70%,rgba(0,0,0,.45) 88%,transparent 100%)}
    .eqh--balanza .eqh__in > *{max-width:min(60ch,44%)}
    .eqh--balanza .eqh .eqh__eye,.eqh--balanza .eqh__eye{max-width:44%}}
  @media (max-width:999px){.eqh--balanza .eqh__fig img{object-position:50% 40%}}

  /* ── .vive: una foto pequeña de origen, a su tamaño ──
     La imagen de la visita técnica mide 738px: estirada a media pantalla se
     pixelaba. Aquí no pasa de su ancho real y acompaña al texto que narra
     esa misma experiencia. */
  .vive{display:grid;gap:clamp(24px,3.4vw,56px);align-items:center}
  @media (min-width:860px){.vive{grid-template-columns:minmax(0,440px) minmax(0,1fr)}}
  .vive__fig{margin:0;max-width:440px;border-radius:var(--r-panel);overflow:hidden;line-height:0;
    box-shadow:0 24px 60px -30px rgba(7,11,20,.45)}
  .vive__fig img{width:100%;height:auto;display:block}
  .vive__t{font-family:var(--ff);font-weight:500;letter-spacing:-.018em;
    font-size:clamp(1.14rem,1.8vw,1.55rem);line-height:1.36;color:var(--ink);
    max-width:40ch;margin-top:16px}
  .vive__t b{font-weight:700}
  /* Con el interletrado negativo la última cifra desborda su caja por la
     derecha, y el degradado —recortado al texto— sólo pinta dentro de ella:
     el «8» y el último «2» de «2022» perdían el borde. El relleno lateral
     devuelve ese margen. */
  .hito__a{padding-inline:.05em .12em}
  .hito > .shell{column-gap:clamp(18px,3vw,56px)}

  /* titular de cuatro renglones en el perfil corporativo del inicio: el texto
     nuevo casi dobla al anterior y, al cuerpo de siempre, ocupaba seis */
  .stmt--largo{font-size:clamp(1.9rem,3.6vw,3.35rem);max-width:none;line-height:1.06}
  @media (max-width:420px){.stmt--largo{font-size:1.66rem}}

  /* ── Alianzas estratégicas ──
     Una sola sección oscura: el titular a tamaño de portada y las dos
     alianzas como renglones de tipografía, sin cajas. Cada renglón lleva
     número, nombre, frase y el enlace a su sitio. */
  @media (min-width:900px){.esc li:nth-child(6){margin-left:35%}}
  .alz{position:relative;isolation:isolate;overflow:hidden;
    padding-block:clamp(96px,13vh,150px) clamp(70px,9vw,130px);
    background:
      radial-gradient(52% 70% at 88% 12%, rgba(110,201,200,.16) 0%, transparent 62%),
      radial-gradient(44% 60% at 0% 100%, rgba(204,176,120,.10) 0%, transparent 64%),
      linear-gradient(162deg, var(--lift) 0%, var(--navy) 46%, var(--void) 100%)}
  /* dos arcos finos, como rutas de cable, cruzan el fondo */
  .alz::before{content:"";position:absolute;z-index:-1;pointer-events:none;
    width:min(1400px,140vw);aspect-ratio:1;right:-38%;top:-58%;border-radius:50%;
    border:1px solid rgba(110,201,200,.16);
    box-shadow:0 0 0 clamp(40px,6vw,110px) rgba(110,201,200,.025)}
  .alz::after{content:"";position:absolute;z-index:-1;pointer-events:none;
    width:min(1000px,110vw);aspect-ratio:1;right:-30%;top:-34%;border-radius:50%;
    border:1px solid rgba(204,176,120,.14)}
  .alz__h{font-size:clamp(2.7rem,8vw,7rem);line-height:.92;letter-spacing:-.05em;
    color:#F2F5F8;margin-block:clamp(18px,2.4vw,30px) clamp(46px,6vw,96px)}
  .alz__l{list-style:none;margin:0;padding:0}
  .alz__i{position:relative;display:grid;gap:clamp(14px,2vw,22px) clamp(20px,3vw,54px);
    padding-block:clamp(30px,4vw,60px);border-top:1px solid rgba(233,237,242,.16)}
  .alz__i:last-child{border-bottom:1px solid rgba(233,237,242,.16)}
  @media (min-width:900px){
    .alz__i{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
    .alz__i:nth-child(2){margin-left:8%}}
  .alz__i::after{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;
    background:linear-gradient(90deg,var(--turq),transparent);
    transition:width 1.05s var(--e) var(--d,0ms)}
  .alz__i:nth-child(2)::after{background:linear-gradient(90deg,var(--sand),transparent)}
  .alz__i.in::after{width:clamp(70px,9vw,150px)}
  .alz__n{font-family:var(--ff);font-weight:700;letter-spacing:-.04em;
    font-size:clamp(1rem,1.2vw,1.12rem);color:rgba(233,237,242,.46);align-self:start;
    padding-top:.5em}
  .alz__i:nth-child(2) .alz__n{color:rgba(204,176,120,.7)}
  .alz__t{font-family:var(--ff);font-weight:600;letter-spacing:-.04em;line-height:1.02;
    font-size:clamp(1.9rem,4.6vw,4.1rem);color:#EDF1F5;margin:0 0 clamp(10px,1.2vw,16px)}
  .alz__d{color:#B8C3CE;font-size:clamp(1.02rem,1.3vw,1.22rem);line-height:1.5;max-width:46ch}
  .alz__cta{justify-self:start}
  @media (max-width:899px){.alz__i{grid-template-columns:auto 1fr}.alz__cta{grid-column:2}}
  /* la escalera también entra renglón a renglón aquí */
  .motion .alz__i[data-r]{transform:translateX(-56px)}
  .motion .alz__i[data-r].in{transform:none;
    transition:opacity .8s var(--e),transform .9s var(--e);transition-delay:var(--d,0ms)}

  /* ── Notas de actualidad: la lista de comunicados ── */
  .coma + .coma{margin-top:clamp(56px,7vw,110px)}
  .coma__a{color:inherit;text-decoration:none;
    background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
    transition:background-size .5s var(--e),color .3s var(--e)}
  @media (hover:hover){.coma__a:hover{background-size:100% 1px;color:var(--acc)}}
  .coma__leer{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(18px,2vw,26px);
    font-family:var(--ui);font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
    color:var(--acc);text-decoration:none}
  .coma__leer svg{transition:transform .4s var(--e)}
  @media (hover:hover){.coma__leer:hover svg{transform:translateX(6px)}}

  /* ── .art: la página de un comunicado ──
     Cabecera oscura con fecha, fuente y titular; el cuerpo, claro y a medida
     de lectura. Las citas llevan un filete de color al margen. */
  .art__cab{padding-block:clamp(96px,13vh,150px) clamp(54px,7vw,96px);
    background:
      radial-gradient(52% 80% at 90% 10%, rgba(110,201,200,.15) 0%, transparent 62%),
      linear-gradient(162deg, var(--lift) 0%, var(--navy) 50%, var(--void) 100%)}
  .art__vol{display:inline-flex;gap:10px;align-items:center;text-decoration:none;
    font-family:var(--ui);font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
    color:var(--turq)}
  .art__vol span{transition:transform .4s var(--e)}
  @media (hover:hover){.art__vol:hover span{transform:translateX(-6px)}}
  .art__meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:clamp(28px,3.4vw,46px);
    font-family:var(--ui);font-size:.74rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--sand)}
  .art__meta span + span{color:#AEBAC6}
  .art__h{font-size:clamp(1.8rem,3.9vw,3.5rem);line-height:1.08;letter-spacing:-.034em;
    color:#F2F5F8;max-width:28ch;margin-top:clamp(14px,1.6vw,22px);text-wrap:balance}
  .art__cuerpo{padding-block:clamp(50px,6vw,100px);background:var(--bg)}
  .art__fig{margin:0 0 clamp(36px,4.4vw,64px);max-width:980px;border-radius:var(--r-panel);
    overflow:hidden;line-height:0;margin-top:calc(-1 * clamp(90px,9vw,150px));position:relative;
    box-shadow:0 30px 70px -36px rgba(7,11,20,.55)}
  .art__fig img{width:100%;height:auto;display:block}
  .art__txt{max-width:68ch;display:grid;gap:clamp(16px,1.6vw,22px)}
  .art__txt p{color:var(--dim);font-size:clamp(1.02rem,1.15vw,1.12rem);line-height:1.72}
  .art__txt .art__ini{color:var(--ink);font-family:var(--ff);font-weight:500;letter-spacing:-.012em;
    font-size:clamp(1.14rem,1.6vw,1.4rem);line-height:1.5}
  .art__txt .art__cita{color:var(--ink);font-family:var(--ff);font-weight:500;font-size:clamp(1.08rem,1.4vw,1.28rem);
    line-height:1.55;padding-left:clamp(18px,2vw,28px);border-left:2px solid var(--acc);margin-block:8px}
  .art__txt a{color:var(--acc)}
  @media (max-width:699px){.art__fig{margin-top:calc(-1 * clamp(30px,8vw,50px))}}

  /* ESEN en la lista de instituciones de Educación lleva a su comunicado */
  .ali2__a{color:inherit;text-decoration:none;display:inline-flex;align-items:baseline;gap:12px}
  .ali2__a::after{content:"→";color:var(--turq);transition:transform .4s var(--e)}
  @media (hover:hover){.ali2__a:hover::after{transform:translateX(6px)}}
  /* subtítulos dentro del comunicado y foto vertical encuadrada en apaisado */
  .art__txt .art__sub{font-size:clamp(1.24rem,1.9vw,1.6rem);letter-spacing:-.024em;line-height:1.2;
    color:var(--ink);margin-top:clamp(18px,2.4vw,34px)}
  .art__fig--apaisada{aspect-ratio:16/8}
  .art__fig--apaisada img{height:100%;object-fit:cover;object-position:center 45%}

  /* Cada comunicado de la lista lleva su foto: la columna de la derecha
     quedaba vacía. En la página del comunicado la foto baja de tamaño. */
  .coma__img{display:block;margin:0;border-radius:var(--r-panel);overflow:hidden;line-height:0;
    aspect-ratio:4/3;background:var(--bg-alt);box-shadow:0 20px 50px -30px rgba(7,11,20,.5)}
  .coma__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--e)}
  @media (hover:hover){a.coma__img:hover img{transform:scale(1.05)}}
  @media (min-width:1100px){
    .coma{grid-template-columns:minmax(170px,.2fr) minmax(0,1fr) minmax(240px,.36fr)}}
  @media (min-width:960px) and (max-width:1099px){
    .coma__img{grid-column:2;max-width:420px}}
  @media (max-width:959px){
    .coma__img{order:-1;max-width:520px;aspect-ratio:16/9}
    .coma__meta{order:-2}}
  .art__fig{max-width:min(680px,100%)}
  /* renglón que abre una nota de un medio externo: flecha oblicua */
  .esc a.esc__ext::after{content:"↗"}
  /* al pie del comunicado, la nota publicada por un medio */
  .art__ext{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:clamp(18px,2.4vw,34px);
    padding-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--line)}
  .art__ext > span{font-family:var(--ui);font-size:.72rem;font-weight:600;letter-spacing:.15em;
    text-transform:uppercase;color:var(--acc-2)}
  /* lista dentro del cuerpo del comunicado */
  .art__lista{list-style:none;margin:0;padding:0;display:grid;gap:8px;border-left:2px solid var(--line);padding-left:clamp(16px,2vw,24px)}
  .art__lista li{color:var(--ink);font-size:clamp(1rem,1.1vw,1.08rem);line-height:1.5}
  /* notas de medios en la lista: el nombre del medio va donde iría la fecha */
  .coma--medio .coma__f{font-size:clamp(1.2rem,1.8vw,1.55rem);line-height:1.05}

  /* el nombre completo del grupo, en pequeño, bajo el logotipo */
  .nav__marca{display:inline-grid;gap:5px;justify-items:start;text-decoration:none;flex:none}
  .nav__nombre{font-family:var(--ui);font-size:.56rem;font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;color:var(--dim);white-space:nowrap;line-height:1}
  /* nombre y logotipo con el mismo ancho de tinta: el logo crece un poco y el
     nombre se ajusta en cuerpo e interletrado hasta cubrirlo de borde a borde */
  .nav__logo{width:140px;height:auto}
  .nav__nombre{font-size:7px;letter-spacing:.49px;font-weight:600}
  /* cinco pasos: el recorrido fijo crece para que cada uno dure lo mismo */
  @media (min-width:1000px){.pin{height:400vh}}
  /* cierre doble: dos compañías, cada una con su título, su frase y su botón */
  .cierre__in--duo{align-items:stretch}
  @media (min-width:900px){.cierre__in--duo{grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,110px)}}
  .cierre__par{display:grid;gap:clamp(18px,2vw,26px);align-content:start}
  @media (min-width:900px){.cierre__par + .cierre__par{border-left:1px solid var(--line);padding-left:clamp(40px,6vw,110px);margin-left:calc(-1 * clamp(20px,3vw,55px))}}
  @media (max-width:899px){.cierre__par + .cierre__par{border-top:1px solid var(--line);padding-top:clamp(24px,5vw,34px)}}
  /* sin cifra: la frase sola ocupa la franja, a tamaño de titular */
  .hito--frase > .shell{display:block}
  .hito--frase .hito__t--grande{max-width:26ch;margin:0;font-size:clamp(1.6rem,3.8vw,3.3rem);line-height:1.14;text-wrap:balance}
  /* foto del equipo técnico: el encuadre deja a la vista a las dos mujeres
     frente al monitor y a la del portátil */
  @media (min-width:1000px){.eqh--balanza .eqh__fig img{object-position:60% 50%}}
  @media (max-width:999px){.eqh--balanza .eqh__fig img{object-position:62% 45%}}

  /* datos de contacto: correo y dirección registrada, en lugar del aviso de
     contenido pendiente. En el pie, una cuarta columna con lo mismo. */
  .dato{display:grid;gap:clamp(26px,3vw,38px);margin:0}
  .dato > div{border-top:1px solid var(--line);padding-top:18px}
  .dato dt{color:var(--acc);margin-bottom:12px}
  .dato dd{margin:0;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5;color:var(--ink)}
  .dato address{font-style:normal}
  .dato a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb, var(--acc) 60%, transparent);
    text-underline-offset:.22em;text-decoration-thickness:1px;overflow-wrap:anywhere;transition:color .25s var(--e)}
  @media (hover:hover){.dato a:hover{color:var(--acc)}}
  .ft__dir{font-style:normal;font-size:.87rem;line-height:1.6;color:var(--dim);margin-top:14px}
  @media (min-width:860px){.ft__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
  /* Compliance: la dirección registrada, en franja propia bajo la portada */
  .sec--dir{padding-block:clamp(44px,5.4vw,76px)}
  .dato--uno{max-width:46ch}
  /* El volcán de noche con la ciudad y la carretera encendidas: el cielo ya
     es azul oscuro, así que el fundido de arriba es corto y no apaga la
     cima; en estrecho el recorte se centra entre el volcán y la carretera */
  .vista__fig img{object-position:center 40%}
  @media (max-width:999px){.vista__fig img{object-position:52% 40%}}
  .vista__fig img{filter:saturate(1) brightness(1);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.6) 8%,#000 18%);
    mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.6) 8%,#000 18%)}
  .vista__fig::after{background:linear-gradient(to bottom,rgba(7,11,20,.5) 0%,
    rgba(7,11,20,.12) 26%,rgba(7,11,20,0) 55%,rgba(7,11,20,.28) 100%)}

  /* ── selector de idioma ES / EN ──
     Va al final de la barra, tras el menú; en estrecho queda a la vista junto
     a la hamburguesa, sin tener que abrir el menú para cambiar de idioma. */
  .nav__in > nav{margin-left:auto}
  .nav__lang{display:flex;align-items:center;gap:2px;flex:none;
    font-family:var(--ui);font-size:.78rem;font-weight:600;letter-spacing:.08em}
  .nav__lang a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;
    color:var(--dim);text-decoration:none;transition:color .25s var(--e)}
  .nav__lang a[aria-current]{color:var(--ink)}
  .nav__lang span{color:var(--faint)}
  @media (hover:hover){.nav__lang a:hover{color:var(--acc)}}
  @media (min-width:1081px){.nav__lang{padding-left:clamp(4px,1vw,14px);border-left:1px solid var(--hair)}}
  @media (max-width:1080px){.nav__lang{order:1}}
  /* En estrecho la sección es alta (el formulario va debajo) y el velo
     radial del titular queda a media altura: el rótulo de arriba, más largo
     en inglés («Contact form»), caía sobre la pared clara de la sala. */
  @media (max-width:1079px){
    .fondofoto__fig::before{background:
      linear-gradient(to bottom, rgba(4,7,12,.72) 0%, rgba(4,7,12,.5) 22%, transparent 42%),
      radial-gradient(58% 74% at 16% 50%, rgba(4,7,12,.9) 0%, rgba(4,7,12,.66) 44%, transparent 78%)}}