/* ═══════════════════════════════════════════════════════════════════════════
   HeliOx · V5 FINAL · feedback del 5 de octubre de 2026
   ───────────────────────────────────────────────────────────────────────────
   Carga DESPUÉS de heliox.css y componentes.css (la V4). La V4 es la base
   estética, tipográfica y de experiencia; aquí solo va lo nuevo o lo que el
   PPT pide cambiar. Mismo sistema de piezas: 10 px de gris cálido alrededor,
   radio 8, Montserrat 700 en versales + Playfair cursiva para el destacado,
   Brown Pro en el cuerpo.

   COLORES DE BOTÓN · el PPT pide «Casos de éxito» SIEMPRE en cuadrado azul
   con texto blanco y «Hablemos» SIEMPRE en cuadrado naranja con texto blanco.
   El blanco no llega a AA sobre los colores de marca saturados
   (#139DD9 → 3,06:1 · #E14602 → 4,14:1), así que el fondo del botón usa la
   variante más clara de cada tono que sí pasa 4,5:1:
     azul    #0F7DAD → blanco 4,61:1  · hover #0B6A93 → 6,1:1
     naranja #D34202 → blanco 4,62:1  · hover #B43802 → 5,99:1
   El color de marca original queda como decorativo (puntos, filetes, cifras
   grandes).
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --azul-btn:#0F7DAD;   --azul-btn-h:#0B6A93;
  --naran-btn:#D34202;  --naran-btn-h:#B43802;
  --agua-fondo:#060308; /* el agua del iceberg final en su borde inferior */
  --agua-hondo:#060308;
  --navy-form:#0B2A45;
}

/* ── Botones de la V5 FINAL ─────────────────────────────────────────────── */
.btn--naranja,.btn--azul{color:#fff}
.btn--naranja{background:var(--naran-btn)}
.btn--naranja:hover{background:var(--naran-btn-h)}
.btn--azul{background:var(--azul-btn)}
.btn--azul:hover{background:var(--azul-btn-h)}
.btn--blanco{background:#fff;color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta)}
.btn--blanco:hover{background:#F1F3F4}
.hero--video .btn--naranja,.hero--video .btn--azul{color:#fff}
.hdr__cta.btn--naranja{color:#fff}
/* en el desplegable de móvil, «Hablemos» también es el cuadrado naranja */
@media (max-width:760px){
  .hdr.is-abierta .nav__cta a{justify-content:center;margin-top:12px;border:0;
    background:var(--naran-btn);color:#fff;border-radius:2px}
}

/* ── Antetítulo común ───────────────────────────────────────────────────── */
.eye{display:flex;align-items:center;gap:18px;margin:0 0 clamp(20px,2.4vw,32px);
  font-family:var(--titulo);font-weight:600;font-size:0.75rem;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--navy)}
.eye i{display:block;width:56px;height:2px;background:currentColor;flex:0 0 auto}
.eye--claro{color:#7FD0F0}

/* Títulos de sección nuevos: misma pareja que la V4. */
.sup__h,.mez5__h,.cas__h,.voz__h,.eco__h,.tm__h,.ali__h{
  margin:0;font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,1.2rem + 2.6vw,3.6rem);line-height:1.02;letter-spacing:-.01em;
  text-wrap:balance}
.sup__h em,.mez5__h em,.cas__h em,.voz__h em,.eco__h em,.tm__h em,.ali__h em{
  font-family:var(--serif-it);font-style:italic;font-weight:400;text-transform:none;
  letter-spacing:0;font-size:1.12em;line-height:.9}

/* Todas las piezas nuevas siguen el marco de la V4. */
.sup,.mez5,.num5,.cas,.voz,.eco,.tm,.ali{background:var(--papel);padding:0 10px 10px}
.sup__card,.mez5__card,.num5__card,.cas__card,.voz__card,.eco__card,.tm__card,.ali__card{
  position:relative;border-radius:8px;overflow:hidden;background:#fff}

/* ═══ 01 · HERO · titular de la V1 con el diseño de la V4 ═════════════════ */
.hero__t-l1{display:block}
.hero--video .hero__acc{gap:12px}
.hero__crece{font-weight:600;
  text-decoration:underline;text-decoration-color:var(--naran);
  text-decoration-thickness:2px;text-underline-offset:5px}
.hero--video .hero__tag i{background:var(--naran)}

/* La palabra que cambia (portada de la V1). Sin JS se queda en «a fondo.». */
.mrf{position:relative;display:inline-block;vertical-align:baseline}
.mrf__w{white-space:nowrap}
.mrf.is-listo .mrf__w{position:absolute;left:0;top:0;width:max-content}
.mrf__w i{font-style:inherit;display:inline-block;white-space:pre}
.mrf.is-listo .mrf__w i{opacity:0;transform:translateY(.28em);
  transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .52s cubic-bezier(.16,1,.3,1)}
.mrf.is-listo .mrf__w.is-activa i{opacity:1;transform:none}
.mrf.is-listo .mrf__w.is-sale i{opacity:0;transform:translateY(-.3em);
  transition:opacity .26s ease,transform .32s ease}

/* ── 02 · Credenciales: franja estable dentro del cristal del hero ─────── */
.cred{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:6px 0 14px;
  list-style:none}
.cred__it{min-width:0}
.cred__it + .cred__it{box-shadow:inset 1px 0 0 rgba(255,255,255,.22)}
.cred__a{display:flex;flex-direction:column;gap:14px;height:100%;
  padding:22px clamp(16px,1.8vw,30px) 18px;color:#fff;text-decoration:none}
a.cred__a:hover .cred__tx b{text-decoration:underline;text-underline-offset:3px}
.cred__logo{display:flex;align-items:center;height:32px}
.cred__logo img{height:30px;width:auto;max-width:130px;object-fit:contain;
  filter:brightness(0) invert(1)}
.cred__logo--sig{font-family:var(--titulo);font-weight:700;font-size:1.55rem;
  letter-spacing:.02em;line-height:1}
.cred__tx{font-size:.9375rem;line-height:1.45}
.cred__tx b{display:block;font-weight:500;margin-bottom:2px}
.hero--video :focus-visible{outline-color:#fff}
@media (max-width:1100px){
  .cred{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .cred::-webkit-scrollbar{display:none}
  .cred__it{flex:0 0 min(300px,78vw);scroll-snap-align:start}
}

/* ═══ 03 · SUPERFICIE Y PROFUNDIDAD · el iceberg nuevo ════════════════════
   Contraste: etiquetas en blanco sobre pastilla rgba(3,18,40,.55) con
   desenfoque → ≥ 9:1 en el peor caso (el cielo claro junto a la punta).
   El origen va en blanco sobre el agua del iceberg final (#06030A a
   #0A1A3A) → ≥ 16:1.     */
.sup__cab{padding:clamp(56px,7vw,112px) clamp(20px,4.2vw,60px) clamp(28px,3.2vw,48px)}
.sup__cab-fila{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,34fr);
  gap:clamp(24px,6vw,96px);align-items:end}
.sup__h{color:var(--tinta)}
.sup__lead{margin:0;font-family:var(--titulo);font-weight:600;text-transform:uppercase;
  letter-spacing:.02em;font-size:clamp(1rem,.8rem + .6vw,1.35rem);line-height:1.3;color:var(--navy)}

.sup__mar{position:relative;aspect-ratio:2616/1907;overflow:hidden;background:var(--agua-fondo)}
.sup__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
/* la superficie: del blanco de la cabecera al cielo, sin corte */
/* La superficie: del blanco de la cabecera al cielo de la foto. Fundido
   largo (32 % del alto, termina antes de la punta del iceberg) y con
   curva suave —muchas paradas en vez de dos— para que no se lea ningún
   corte. A media altura el blanco vira a un azul muy claro, el del propio
   cielo, en vez de agrisarse sobre el azul. */
.sup__mar::before{content:"";position:absolute;left:0;right:0;top:0;height:32%;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    #fff 0%,
    rgba(255,255,255,.97) 6%,
    rgba(248,252,255,.9) 13%,
    rgba(236,245,252,.78) 21%,
    rgba(222,238,250,.62) 30%,
    rgba(206,229,248,.45) 40%,
    rgba(190,220,246,.29) 51%,
    rgba(176,212,244,.16) 63%,
    rgba(165,205,242,.07) 76%,
    rgba(160,202,240,.02) 89%,
    rgba(160,202,240,0) 100%)}

.sup__pts{position:absolute;inset:0;z-index:2;margin:0;padding:0;list-style:none}
.sup__pt{position:absolute;left:var(--x);top:var(--y);width:0;height:0;
  --lin:clamp(56px,7vw,120px);--lado:1}
.sup__pt--izq{--lado:-1}
.sup__aro{position:absolute;left:0;top:0;width:clamp(34px,3.6vw,54px);aspect-ratio:1;
  border-radius:50%;transform:translate(-50%,-50%);
  border:1.5px solid rgba(255,255,255,.9);
  background:radial-gradient(circle,rgba(255,255,255,.28) 0 18%,rgba(255,255,255,.06) 19% 100%)}
.sup__aro::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.7);animation:sup-pulso 3.4s cubic-bezier(.2,.6,.3,1) infinite}
.sup__pt:nth-child(2) .sup__aro::after{animation-delay:.8s}
.sup__pt:nth-child(3) .sup__aro::after{animation-delay:1.6s}
.sup__pt:nth-child(4) .sup__aro::after{animation-delay:2.4s}
@keyframes sup-pulso{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
/* la línea arranca en el canto del aro y termina en un circulito */
.sup__lin{position:absolute;top:0;height:1px;width:var(--lin);background:rgba(255,255,255,.85);
  left:calc(var(--lado) * clamp(17px,1.8vw,27px));transform-origin:left center;
  transform:scaleX(var(--lado))}
.sup__lin::after{content:"";position:absolute;right:-4px;top:-3.5px;width:8px;height:8px;
  border-radius:50%;border:1px solid #fff;background:rgba(255,255,255,.35)}
.sup__tx{position:absolute;top:0;margin:0;transform:translateY(-50%);
  width:max-content;max-width:min(260px,22vw);padding:8px 14px;border-radius:4px;
  background:rgba(3,18,40,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:clamp(.9375rem,.85rem + .3vw,1.125rem);line-height:1.3;color:#fff}
.sup__pt:not(.sup__pt--izq) .sup__tx{
  left:calc(clamp(17px,1.8vw,27px) + var(--lin) + 10px)}
.sup__pt--izq .sup__tx{
  right:calc(clamp(17px,1.8vw,27px) + var(--lin) + 10px)}

.sup__origen{position:absolute;z-index:2;left:clamp(20px,4.2vw,60px);bottom:9%;
  width:min(30%,420px);color:#fff}
.sup__origen-k{margin:0 0 14px;font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;
  text-transform:uppercase;color:#BFE3F1}
.sup__origen-k span{display:inline-flex;align-items:center;height:30px;padding:0 12px;white-space:nowrap;
  border:1px solid rgba(191,227,241,.6);border-radius:999px;text-transform:none}
.sup__origen-k sub{font-size:.75em;vertical-align:-.25em}
.sup__origen-t{margin:0 0 12px;font-size:clamp(1.0625rem,.95rem + .4vw,1.3rem);line-height:1.45}
.sup__origen-d{margin:0;font-size:1rem;line-height:1.6;color:rgba(255,255,255,.86)}

.sup__pie{background:linear-gradient(var(--agua-fondo),var(--agua-hondo) 70%);color:#fff;
  padding:clamp(24px,3vw,48px) clamp(20px,4.2vw,60px) clamp(40px,4.5vw,72px)}
/* «Transformar. Acompañar. Crecer.» con el degradado de la referencia */
.tac{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--sans);font-weight:500;
  font-size:clamp(3rem,1.2rem + 8vw,9.5rem);line-height:.96;letter-spacing:-.035em}
.tac span{width:max-content;background:linear-gradient(100deg,#7FD0F0 0%,#139DD9 38%,#B7C9D3 72%,#7FA7C7 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sup__acc{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 32px;
  margin-top:clamp(28px,3.5vw,56px);padding-top:24px;border-top:1px solid rgba(255,255,255,.18)}
.enl-sub{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#fff;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:5px}
.enl-sub:hover{text-decoration-color:#fff}
.enl-sub b{font-weight:600}
.sup :focus-visible{outline-color:#fff}
.sup__cab :focus-visible{outline-color:var(--navy)}

@media (max-width:860px){
  .sup__cab-fila{grid-template-columns:1fr;gap:16px}
  .sup__mar{aspect-ratio:1/1}
  .sup__img{object-position:50% 0}
  /* a 1:1 la foto (1,37:1) se recorta un 13,6 % por cada lado: los puntos
     se recolocan sobre el mismo sitio del iceberg */
  .sup__pt{left:calc((var(--x) - 13.55%) / .729)}
  /* en móvil los puntos se quedan sobre el iceberg y los textos bajan a
     una lista bajo la imagen */
  .sup__lin,.sup__tx{display:none}
  .sup__origen{display:none}
}
@media (prefers-reduced-motion:reduce){.sup__aro::after{animation:none;opacity:0}}

/* bloque de textos solo para móvil (lo pinta el CSS desde la misma lista) */
.sup__mov{display:none}
@media (max-width:860px){
  .sup__mov{display:block;background:var(--agua-fondo);color:#fff;
    padding:28px 20px 0}
  .sup__mov ol{margin:0 0 24px;padding:0;list-style:none;display:grid;gap:10px}
  .sup__mov li{display:flex;gap:12px;align-items:center;font-size:1.0625rem}
  .sup__mov li::before{content:"";flex:0 0 auto;width:14px;height:14px;border-radius:50%;
    border:1.5px solid #fff}
  .sup__mov .sup__origen-t{margin-top:8px}
}

/* ═══ 04 · LA MEZCLA HELIOX · moléculas de agua ═══════════════════════════ */
.mez5__card{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,38fr);
  gap:clamp(24px,5vw,80px);align-items:center;background:#F2F7F9;
  padding:clamp(56px,6.5vw,104px) clamp(20px,4.2vw,60px)}
.mez5__vis{position:relative;aspect-ratio:600/560;width:100%;max-width:720px;justify-self:center}
/* ── La ilustración: tres círculos que se superponen ──────────────────────
   Referencia del cliente: tres anillos de filete fino, cada uno con un
   anillo interior más tenue y un punto sobre la circunferencia, una retícula
   técnica de fondo y HeliOx en la intersección. Aquí, en claro y con tres
   tiempos de movimiento:
     1 · al entrar en pantalla, los círculos llegan desde fuera hasta
         solaparse y HeliOx aparece en el centro;
     2 · en reposo cada círculo respira (se acerca y se aleja unos px) y su
         punto orbita despacio; del centro sale una onda lenta;
     3 · al pasar por la lista, su círculo se rellena.
   Sin rellenos: solo filetes y un brillo azul suave en la intersección,
   que late despacio. */
.mzv__brillo{transform-box:view-box;transform-origin:300px 292px;animation:mzv-late 6s ease-in-out infinite alternate}
@keyframes mzv-late{from{opacity:.65;transform:scale(.92)}to{opacity:1;transform:scale(1.06)}}
.js .mez5:not(.is-dentro) .mzv__brillo{opacity:0}
.mzv{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mzv text{font-family:var(--titulo);font-weight:600;font-size:15px;letter-spacing:3px;
  text-anchor:middle;fill:#0B1B24}
.mzv__rej line{stroke:rgba(0,75,135,.10);stroke-width:1}
.mzv__cruz{stroke:rgba(0,75,135,.38);stroke-width:1;fill:none}
.mzv__c{transform-box:view-box;
  transition:transform 1.6s cubic-bezier(.16,1,.3,1),opacity 1s ease}
.mzv__f{fill:var(--c);fill-opacity:0;stroke:var(--c);stroke-width:1.6;
  transition:fill-opacity .5s}
.mzv__in{fill:none;stroke:var(--c);stroke-width:1;stroke-opacity:.28}
.mzv__p{fill:var(--c)}
.mzv__halo{fill:var(--c);fill-opacity:.18}
.mzv__r{transform-box:view-box;animation:mzv-respira 7s ease-in-out infinite alternate}
.mzv__c--neg .mzv__r{animation-duration:8.2s;animation-delay:-2s}
.mzv__c--equ .mzv__r{animation-duration:7.6s;animation-delay:-4s}
/* cada círculo respira en la dirección que lo aleja del centro */
.mzv__c--cli{--dx:0;--dy:-1}
.mzv__c--neg{--dx:-.87;--dy:.5}
.mzv__c--equ{--dx:.87;--dy:.5}
@keyframes mzv-respira{from{transform:translate(0,0)}
  to{transform:translate(calc(var(--dx) * 7px),calc(var(--dy) * 7px))}}
.mzv__orb{transform-box:view-box;transform-origin:var(--cx) var(--cy);
  animation:mzv-orbita 38s linear infinite}
.mzv__orb--inv{animation-direction:reverse;animation-duration:44s}
@keyframes mzv-orbita{to{transform:rotate(360deg)}}
.mzv__halo{transform-box:fill-box;transform-origin:center;animation:mzv-halo 2.8s ease-out infinite}
@keyframes mzv-halo{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.9);opacity:0}}

.mzv__hx{transform-box:view-box;transform-origin:300px 292px;
  transition:transform 1s cubic-bezier(.16,1,.3,1) .9s,opacity .6s ease .9s}
.mzv__disco{fill:#fff;filter:drop-shadow(0 10px 18px rgba(0,40,80,.22))}
.mzv__aro{fill:none;stroke:#004B87;stroke-width:1;stroke-opacity:.35}
.mzv__onda{fill:none;stroke:#004B87;stroke-width:1;transform-box:view-box;transform-origin:300px 292px;
  opacity:0;animation:mzv-onda 4.8s cubic-bezier(.2,.6,.3,1) infinite 1.8s}
.mzv__onda--2{animation-delay:4.2s}
@keyframes mzv-onda{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.6);opacity:0}}

/* estado inicial (solo con JS): separados y sin HeliOx */
.js .mez5:not(.is-dentro) .mzv__c--cli{transform:translate(0,-60px);opacity:0}
.js .mez5:not(.is-dentro) .mzv__c--neg{transform:translate(-56px,34px);opacity:0}
.js .mez5:not(.is-dentro) .mzv__c--equ{transform:translate(56px,34px);opacity:0}
.js .mez5:not(.is-dentro) .mzv__hx{transform:scale(.4);opacity:0}
.mzv__c--neg{transition-delay:.12s} .mzv__c--equ{transition-delay:.24s}

/* encendido desde la lista */
.mzv__c.is-on .mzv__f{fill-opacity:.07;stroke-width:2.6}
.mzv__hx.is-on .mzv__aro{stroke-opacity:.9;stroke-width:1.6}

@media (prefers-reduced-motion:reduce){
  .mzv__r,.mzv__orb,.mzv__halo,.mzv__onda,.mzv__brillo{animation:none}
  .mzv__c,.mzv__hx{transition:none}
  .js .mez5:not(.is-dentro) .mzv__c,.js .mez5:not(.is-dentro) .mzv__hx{transform:none;opacity:1}
}

.mez5__h{color:var(--tinta)}
.mez5__lead{margin:clamp(18px,2vw,28px) 0 clamp(24px,3vw,40px);font-size:1.1875rem;line-height:1.55;
  color:var(--tinta);max-width:44ch}
.mez5__l{margin:0 0 clamp(28px,3vw,40px);padding:0;list-style:none}
.mez5__it{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--filete);
  transition:background-color .3s}
.mez5__it:last-child{border-bottom:1px solid var(--filete)}
.mez5__dot{flex:0 0 auto;width:12px;height:12px;margin-top:6px;border-radius:50%}
.mez5__dot--cli{background:#E14602} .mez5__dot--neg{background:#2F6FD0}
.mez5__dot--equ{background:#1FA7B8} .mez5__dot--hx{background:#fff;box-shadow:inset 0 0 0 2px var(--navy)}
.mez5__t{margin:0 0 4px;font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  font-size:.9375rem;letter-spacing:.06em;color:var(--tinta)}
.mez5__d{margin:0;font-size:1rem;line-height:1.55;color:#3F434A;max-width:52ch}
.mez5__it--hx .mez5__t{color:var(--navy)}
@media (max-width:980px){
  .mez5__card{grid-template-columns:1fr}
  .mez5__vis{max-width:520px}
}

/* ═══ XX · NÚMEROS · banda sin imagen ═════════════════════════════════════
   Cifras en el naranja de marca #E14602 a ≥ 64 px: 4,14:1, válido como
   texto grande. Etiquetas y frase en tinta (17,5:1). */
.num5__card{display:grid;grid-template-columns:minmax(0,52fr) minmax(0,40fr);
  gap:clamp(24px,5vw,80px);align-items:center;
  padding:clamp(40px,4.5vw,72px) clamp(20px,4.2vw,60px)}
.num5__l{display:flex;flex-wrap:wrap;gap:12px clamp(28px,4vw,64px);margin:0;padding:0;list-style:none}
.num5__it{display:flex;align-items:center;gap:16px}
.num5__v{margin:0;display:flex;align-items:flex-start;font-family:var(--titulo);font-weight:700;
  font-size:clamp(4rem,2rem + 5.2vw,8rem);line-height:.9;letter-spacing:-.045em;color:var(--naran);
  font-variant-numeric:tabular-nums}
.num5__u{font-size:.5em;line-height:1.1;letter-spacing:0;margin-left:.06em}
.num5__lab{margin:0;max-width:10ch;font-size:clamp(16px,1.2vw,19px);line-height:1.3;color:var(--tinta)}
.num5__lab em{font-family:var(--serif-it);font-style:italic;font-size:1.15em}
.num5__frase{position:relative}
.num5__t{margin:0;font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.8rem,1rem + 2.3vw,3.3rem);line-height:1.02;letter-spacing:-.01em;color:var(--tinta)}
.num5__t em{display:block;font-family:var(--serif-it);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:0;font-size:1.14em;line-height:1;color:var(--naran)}
.num5__flecha{position:absolute;right:calc(100% + 10px);top:6px;width:clamp(80px,8vw,140px);height:auto;overflow:visible}
.num5__flecha path{fill:none;stroke:var(--tinta);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:980px){
  .num5__card{grid-template-columns:1fr}
  .num5__flecha{display:none}
}

/* ═══ 05 · CASOS DE ÉXITO · mosaico ═══════════════════════════════════════
   Boceto del cliente: una grande, dos medianas apiladas y una columna de
   pequeñas. La grande es la nº 1 del ranking y va en marino.
   Contraste: cliente·sector en #B43802 sobre #F4F4F3 → 5,44:1; en la grande,
   #7FD0F0 sobre #0A2E4D → 8,06:1; titulares en tinta o blanco (>13:1).    */
.cas__card{padding:clamp(56px,6.5vw,104px) clamp(20px,4.2vw,60px) clamp(20px,4.2vw,60px)}
.cas__cab,.voz__cab,.ali__cab{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,34fr);
  gap:clamp(24px,6vw,96px);align-items:end;margin-bottom:clamp(36px,4.5vw,64px);
  padding-bottom:clamp(20px,2vw,28px);border-bottom:1px solid var(--filete)}
.cas__h,.voz__h,.ali__h{color:var(--tinta)}
.cas__lead,.ali__lead{margin:0;font-size:1.125rem;line-height:1.6;color:var(--gris);max-width:44ch}

.cas__mos{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);
  grid-auto-rows:minmax(150px,auto);gap:10px;margin:0;padding:0;list-style:none}
.caso5{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;
  padding:clamp(20px,2.2vw,34px);border-radius:6px;background:#F4F4F3;color:var(--tinta);
  transition:background-color .35s cubic-bezier(.16,1,.3,1)}
.caso5--xl{grid-column:1;grid-row:1 / span 4;background:#0A2E4D;color:#fff}
.caso5--m:nth-child(2){grid-column:2;grid-row:1 / span 2}
.caso5--m:nth-child(3){grid-column:2;grid-row:3 / span 2}
.caso5--s{grid-column:3;background:#fff;box-shadow:inset 0 0 0 1px var(--filete);
  padding:clamp(16px,1.6vw,24px)}
.caso5:not(.caso5--cta):hover{background:#EAF4F8}
.caso5--xl:hover{background:#0C3760}
.caso5__n{margin:0;font-family:var(--mono);font-size:.8125rem;letter-spacing:.04em;opacity:.8}
.caso5__sig{margin:0;font-family:var(--titulo);font-weight:700;line-height:.9;letter-spacing:-.02em;
  font-size:clamp(2.2rem,1.2rem + 2.6vw,4rem)}
.caso5--xl .caso5__sig{font-size:clamp(4rem,2rem + 6vw,8.6rem);margin-top:auto}
.caso5--s .caso5__sig{font-size:clamp(1.6rem,1rem + 1.2vw,2.3rem)}
.caso5__sig--logo img{height:clamp(42px,4vw,58px);width:auto}
.caso5__cli{margin:0 0 8px;font-family:var(--titulo);font-weight:600;font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--naran-txt)}
.caso5--xl .caso5__cli{color:#7FD0F0}
.caso5__t{margin:0;font-family:var(--sans);font-weight:500;font-size:clamp(1.15rem,.95rem + .6vw,1.5rem);
  line-height:1.25;letter-spacing:-.01em;max-width:28ch;padding-right:52px}
.caso5--xl .caso5__t{font-size:clamp(1.4rem,1rem + 1.2vw,2.2rem);max-width:20ch}
.caso5--s .caso5__t{font-size:1.0625rem;line-height:1.3}
.caso5__voz{margin:clamp(12px,2vw,28px) 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.22)}
.caso5__voz p{margin:0;font-family:var(--serif-it);font-style:italic;font-size:clamp(1.15rem,.95rem + .6vw,1.5rem);
  line-height:1.3}
.caso5__voz .caso5__voz-f{margin-top:10px;font-family:var(--sans);font-style:normal;font-size:.875rem;color:rgba(255,255,255,.82)}
.caso5__i{position:absolute;right:clamp(16px,1.8vw,26px);top:clamp(16px,1.8vw,26px);
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  box-shadow:inset 0 0 0 1px currentColor;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.caso5__i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.caso5:hover .caso5__i{transform:rotate(45deg)}
.caso5--cta{justify-content:space-between;background:#EAF4F8;box-shadow:none}
.caso5__cta-t{margin:0;font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  font-size:1.15rem;line-height:1.1}
.caso5__cta-t em{display:block;font-family:var(--serif-it);font-style:italic;font-weight:400;
  text-transform:none;font-size:1.15em}
.caso5--cta .btn--ref{align-self:flex-start}
@media (max-width:1100px){
  .cas__mos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .caso5--xl{grid-column:1 / -1;grid-row:auto;min-height:420px}
  .caso5--m:nth-child(2),.caso5--m:nth-child(3){grid-column:auto;grid-row:auto}
  .caso5--s{grid-column:auto}
}
@media (max-width:640px){
  .cas__mos{grid-template-columns:1fr}
  .cas__cab,.voz__cab,.ali__cab{grid-template-columns:1fr;gap:16px}
}

/* ═══ 06 · VOZ DEL CLIENTE · mosaico ══════════════════════════════════════ */
.voz__card{padding:clamp(56px,6.5vw,104px) clamp(20px,4.2vw,60px) clamp(28px,3vw,48px)}
.voz__lead{margin:0;font-size:1.125rem;line-height:1.6;color:var(--gris);max-width:40ch}
.voz__h{font-size:clamp(2.4rem,1.2rem + 4vw,5.2rem);max-width:16ch}
.voz__mos{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:10px}
.vz{position:relative;margin:0;display:flex;flex-direction:column;gap:18px;min-width:0;
  padding:clamp(22px,2.4vw,40px);border-radius:6px;background:#F4F4F3}
.vz--xl{grid-column:1;grid-row:1 / span 2;background:#EAF4F8}
.vz--m:nth-of-type(2){grid-column:2;grid-row:1}
.vz--m:nth-of-type(3){grid-column:2;grid-row:2}
.vz__k{margin:0;font-family:var(--titulo);font-weight:600;font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:#08425B}
.vz__q{margin:0}
/* Testimonios: textos largos para leer → tipografía de párrafo (Brown Pro),
   no la cursiva de titulares. */
.vz__q p{margin:0;font-family:var(--sans);font-style:normal;font-weight:400;color:var(--tinta);
  font-size:1.0625rem;line-height:1.6}
.vz--xl .vz__q p{font-size:clamp(1.15rem,.95rem + .55vw,1.45rem);line-height:1.6}
.vz--xl .vz__q::before{content:"\201C";display:block;height:.55em;font-family:var(--serif-it);
  font-size:clamp(5rem,8vw,8rem);line-height:1;color:var(--naran)}
.vz__f{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:16px;
  border-top:1px solid var(--filete);font-size:.9375rem;line-height:1.4;color:#3C4046}
.vz__f b{display:block;font-weight:600;color:var(--tinta)}
.vz__e{color:#08425B}
.vz__mono{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--navy);color:#fff;font-family:var(--titulo);font-weight:600;font-size:.8125rem;
  letter-spacing:.06em}
.vz__leer{align-self:flex-start;min-height:44px;padding:0;background:none;border:0;cursor:pointer;
  font-family:var(--titulo);font-weight:600;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--azul-btn);text-decoration:underline;text-underline-offset:5px}
.vz__leer:hover{color:var(--azul-btn-h)}

.voz__peq{grid-column:3;grid-row:1 / span 2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr;gap:10px;margin:0;padding:0;list-style:none}
.vzs{min-width:0}
.vzs__b{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;height:100%;
  min-height:120px;padding:14px;border:0;border-radius:6px;background:#fff;cursor:pointer;text-align:left;
  box-shadow:inset 0 0 0 1px var(--filete);transition:background-color .3s,box-shadow .3s}
.vzs__b:hover{background:#EAF4F8;box-shadow:inset 0 0 0 1px rgba(0,75,135,.3)}
.vzs__b .vz__mono{width:34px;height:34px;font-size:.6875rem;margin-bottom:4px}
.vzs__n{font-weight:600;font-size:.875rem;line-height:1.25;color:var(--tinta)}
.vzs__e{font-size:.8125rem;line-height:1.3;color:#3C4046}
.vzs__l{margin-top:auto;font-family:var(--titulo);font-weight:600;font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--azul-btn)}
.voz__pie{display:flex;justify-content:flex-end;margin-top:clamp(20px,2.4vw,32px)}

.vzd{width:min(680px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:0;
  border-radius:8px;background:#fff;color:var(--tinta);box-shadow:0 40px 90px -30px rgba(3,20,30,.6)}
.vzd::backdrop{background:rgba(3,20,30,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.vzd__in{position:relative;padding:clamp(28px,4vw,48px)}
.vzd__x{position:absolute;right:12px;top:12px;width:44px;height:44px;border:0;border-radius:50%;
  background:#F4F4F3;cursor:pointer;font-size:1.6rem;line-height:1;color:var(--tinta)}
.vzd__x:hover{background:#EAF4F8}
.vzd__k{margin:0 0 18px;padding-right:48px;font-family:var(--titulo);font-weight:600;font-size:.6875rem;
  letter-spacing:.16em;text-transform:uppercase;color:#08425B}
.vzd__q{margin:0}
.vzd__q p{margin:0;font-family:var(--sans);font-style:normal;font-weight:400;font-size:1.125rem;
  line-height:1.65}
.vzd__f{margin:24px 0 0;padding-top:16px;border-top:1px solid var(--filete);font-size:.9375rem;color:#3C4046}
.vzd__f b{color:var(--tinta)}

@media (max-width:1100px){
  .voz__mos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vz--xl{grid-column:1 / -1;grid-row:auto}
  .vz--m:nth-of-type(2),.vz--m:nth-of-type(3){grid-column:auto;grid-row:auto}
  .voz__peq{grid-column:1 / -1;grid-row:auto;grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:700px){
  .voz__mos{grid-template-columns:1fr}
  .voz__peq{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ═══ 07 · POR QUÉ HELIOX · mosaico sin retratos ══════════════════════════ */
.eq--v5f .eq__grid{grid-template-areas:
    "tit tit fa  fa"
    "cit p1  nar p2"
    "p3  fb  fc  p4"}
.eq--fa{grid-area:fa} .eq--fb{grid-area:fb} .eq--fc{grid-area:fc}
.eq--v5f .eq__tit{justify-content:flex-end}
.eq__cta{align-self:flex-start;margin-top:clamp(20px,2.4vw,32px)}
.eq--v5f .eq--fa .eq__img{object-position:50% 45%}
.eq--v5f .eq--fc .eq__img{object-position:40% 50%}
@media (max-width:900px){
  .eq--v5f .eq__grid{grid-template-areas:
    "tit tit" "fa fa" "cit cit" "p1 nar" "p2 p3" "fb fc" "p4 p4"}
}

/* ═══ XX · ECOSISTEMA · el sónar ══════════════════════════════════════════
   Blanco sobre #07131D → 18,4:1. Las listas, en #BFD0DA → 12,1:1.        */
.eco__card{display:grid;grid-template-columns:minmax(0,35fr) minmax(0,59fr);
  gap:clamp(28px,5vw,80px);align-items:center;background:#07131D;color:#fff;
  padding:clamp(56px,6.5vw,104px) clamp(20px,4.2vw,60px) clamp(36px,4vw,56px)}
.eco__lead{margin:16px 0 22px;font-family:var(--serif-it);font-style:italic;font-size:clamp(1.25rem,1rem + .7vw,1.6rem);
  color:#BFE3F1}
.eco__p{margin:0 0 14px;font-size:1rem;line-height:1.62;color:#BFD0DA;max-width:52ch}
.eco__p--b{color:#fff;font-weight:500;font-size:1.0625rem}
.eco__vis{align-self:center;padding:clamp(70px,7vw,96px) clamp(40px,11vw,180px) 0}
/* El radar, más transparente que antes: los textos van encima. */
.son{position:relative;aspect-ratio:1;width:100%;max-width:446px;margin-inline:auto;isolation:isolate}
.son__r{position:absolute;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(127,208,240,.26)}
.son__r--3{inset:0;background:rgba(31,110,143,.16)}
.son__r--2{inset:17%;background:rgba(31,110,143,.18)}
.son__r--1{inset:34%;background:rgba(36,130,168,.24)}
.son__barrido{position:absolute;inset:0;border-radius:50%;z-index:1;
  background:conic-gradient(from 0deg,rgba(127,208,240,0) 0deg,rgba(127,208,240,0) 296deg,
    rgba(127,208,240,.16) 352deg,rgba(191,227,241,.45) 360deg);
  animation:son-gira 6s linear infinite}
@keyframes son-gira{to{transform:rotate(360deg)}}
.son__blip{position:absolute;inset:0;z-index:2;transform:rotate(var(--a));pointer-events:none}
.son__blip::after{content:"";position:absolute;left:50%;top:calc(50% - var(--d) / 2);
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#7FD0F0;opacity:.25;
  animation:son-blip 6s linear infinite;animation-delay:var(--t,0s)}
@keyframes son-blip{0%{opacity:1;box-shadow:0 0 0 0 rgba(127,208,240,.7)}
  30%{opacity:.55;box-shadow:0 0 0 12px rgba(127,208,240,0)}100%{opacity:.25}}
.son__logo{position:absolute;left:50%;top:50%;z-index:2;width:18%;height:auto;transform:translate(-50%,-50%);
  filter:brightness(0) invert(1);opacity:.9}

/* Los tres puntos con su texto, sobre el radar */
.son__l{position:absolute;inset:0;z-index:3;margin:0;padding:0;list-style:none}
.son__g{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.son__pt{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:#7FD0F0;
  opacity:.4;animation:son-blip 6s linear infinite;animation-delay:var(--t)}
.son__lab{position:absolute;width:min(220px,34vw);
  opacity:.28;filter:blur(1.4px);
  animation:son-luz 6s linear infinite;animation-delay:var(--t)}
/* arriba: centrado encima del punto · abajo: debajo, hacia fuera */
/* arriba: centrado encima del punto, por fuera del círculo · a los lados:
   a media altura, hacia fuera del borde (pueden sobresalir del círculo) */
/* Las cajas van FUERA del círculo grande. Los puntos no se mueven: la
   distancia se mide con `cqw` (porcentaje del ancho del radar, que es
   cuadrado), así que «8cqw» es justo lo que hay del punto al borde.
   arriba: punto al 9 % → la caja termina 12 px por encima del círculo
   lados: punto al 8 % del borde → la caja arranca 14 px fuera del círculo */
.son{container-type:inline-size}
.son__g--1 .son__lab{left:0;bottom:calc(9cqw + 12px);transform:translateX(-50%);text-align:center;width:250px}
.son__g--2 .son__lab{right:calc(8cqw + 14px);top:0;transform:translateY(-50%);text-align:right;width:204px}
.son__g--3 .son__lab{left:calc(8cqw + 14px);top:0;transform:translateY(-50%);text-align:left;width:204px}
/* se enciende justo cuando pasa el barrido, aguanta y vuelve a difuminarse */
@keyframes son-luz{
  0%{opacity:1;filter:blur(0)}
  32%{opacity:1;filter:blur(0)}
  68%{opacity:.28;filter:blur(1.4px)}
  100%{opacity:.28;filter:blur(1.4px)}}
.son__t{margin:0 0 6px;font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  font-size:.875rem;letter-spacing:.08em;color:#fff}
.son__x{margin:0;font-size:.875rem;line-height:1.5;color:#D5E2EA}
@media (max-width:1300px){
  .eco__card{grid-template-columns:1fr}
  .eco__vis{padding-inline:clamp(40px,22vw,260px)}
}
/* tablet y móvil: el radar no da para los textos; bajan a una lista debajo */
@media (max-width:900px){
  /* el radar reserva su cuadrado (::before) y la lista va debajo, en flujo.
     Las capas se colocan con márgenes en %, que se miden sobre el ANCHO, así
     siguen siendo círculos aunque la caja crezca hacia abajo. */
  .son{max-width:440px;aspect-ratio:auto}
  .son::before{content:"";display:block;width:100%;aspect-ratio:1}
  .son__r,.son__barrido,.son__blip{inset:auto;top:0;height:auto;aspect-ratio:1}
  .son__r--3,.son__barrido,.son__blip{left:0;width:100%}
  .son__r--2{left:17%;width:66%;margin-top:17%}
  .son__r--1{left:34%;width:32%;margin-top:34%}
  .son__logo{top:0;margin-top:50%}
  .son__l{position:static;display:grid;gap:18px;margin-top:24px;width:100%}
  .son__g{position:static;width:auto;height:auto;display:flex;gap:12px}
  .son__pt{position:static;flex:0 0 auto;margin-top:4px}
  .son__lab,.son__g--1 .son__lab,.son__g--2 .son__lab,.son__g--3 .son__lab{position:static;transform:none;
    text-align:left;width:auto;opacity:1;filter:none;animation:none}
  .eco__vis{padding:0 0 8px}
}
@media (prefers-reduced-motion:reduce){
  .son__barrido{animation:none;opacity:.4}
  .son__blip::after,.son__pt{animation:none;opacity:.8}
  .son__lab{animation:none;opacity:1;filter:none}
}
.eco__cierre{grid-column:1 / -1;margin:clamp(16px,2vw,28px) 0 0;padding-top:clamp(20px,2.4vw,32px);
  border-top:1px solid rgba(255,255,255,.18);font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.3rem,.9rem + 1.3vw,2.2rem);line-height:1.08;letter-spacing:-.01em}
.eco__cierre em{font-family:var(--serif-it);font-style:italic;font-weight:400;text-transform:none;
  letter-spacing:0;font-size:1.1em;color:#7FD0F0}

/* ═══ 08 · EQUIPO · carrusel ══════════════════════════════════════════════ */
.tm__card{padding:clamp(56px,6.5vw,104px) clamp(20px,4.2vw,60px) clamp(28px,3vw,48px)}
.tm__cab{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,56fr);gap:clamp(24px,5vw,80px);
  align-items:end}
.tm__h{color:var(--tinta)}
.tm__lead{margin:20px 0 0;font-size:1.125rem;line-height:1.6;color:var(--gris);max-width:40ch}
.tm__grupo{margin:0;border-radius:6px;overflow:hidden;aspect-ratio:2.1/1;background:#E9EBEC}
.tm__grupo img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}

.tm__fila{display:flex;align-items:flex-end;gap:12px;margin:clamp(40px,5vw,72px) 0 0;padding:0;list-style:none;
  min-height:clamp(420px,36vw,540px)}
.tm__p{display:flex;align-items:flex-end;gap:clamp(20px,2.4vw,36px);flex:0 0 auto}
.tm__foto{display:block;padding:0;border:0;background:#E9EBEC;border-radius:8px;overflow:hidden;cursor:pointer;
  width:clamp(110px,10.5vw,152px);aspect-ratio:3/4}
.tm__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;
  filter:grayscale(1) contrast(.95) brightness(.92);transition:filter .5s,transform 1s cubic-bezier(.16,1,.3,1)}
.tm__foto:hover img{filter:grayscale(.3)}
.tm__p.is-activa .tm__foto{width:clamp(280px,27vw,400px);cursor:default}
.tm__p.is-activa .tm__foto img{filter:none;animation:tm-foto .7s cubic-bezier(.16,1,.3,1) both}
/* el cambio de tamaño es instantáneo; lo que se anima es la entrada de la
   foto (opacidad + escala), que no obliga a recalcular la maqueta */
@keyframes tm-foto{from{opacity:.35;transform:scale(1.06)}to{opacity:1;transform:none}}
.tm__info{display:none;width:clamp(240px,22vw,320px);padding-bottom:8px}
.tm__p.is-activa .tm__info{display:block;animation:tm-entra .6s cubic-bezier(.16,1,.3,1) both}
@keyframes tm-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tm__n{margin:0 0 18px;font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;color:var(--gris)}
.tm__k{margin:0;font-size:1.0625rem;line-height:1.6;color:#3F434A}
.tm__fil{display:block;width:44px;height:2px;margin:22px 0 18px;background:var(--naran)}
.tm__nom{margin:0 0 8px;font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.4rem,1rem + 1vw,1.9rem);line-height:1.05;letter-spacing:-.01em;color:var(--tinta)}
.tm__nom b{font-family:var(--serif-it);font-style:italic;font-weight:400;text-transform:none;font-size:1.1em}
.tm__in{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--titulo);
  font-weight:600;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--azul-btn);
  text-decoration:underline;text-underline-offset:5px}
.tm__in:hover{color:var(--azul-btn-h)}
.tm__pie{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:clamp(28px,3vw,44px);
  padding-top:20px;border-top:1px solid var(--filete)}
.tm__nav{display:flex;gap:8px}
.tm__flecha{width:48px;height:48px;border:0;border-radius:2px;background:#F4F4F3;cursor:pointer;
  font-size:1.2rem;color:var(--tinta);box-shadow:inset 0 0 0 1px var(--filete-fuerte)}
.tm__flecha:hover{background:#EAF4F8}
@media (max-width:1100px){
  .tm__cab{grid-template-columns:1fr}
  .tm__fila{overflow-x:auto;scroll-snap-type:x mandatory;align-items:stretch;min-height:0;gap:20px;
    padding-bottom:8px;scrollbar-width:thin}
  .tm__p{flex-direction:column;align-items:flex-start;gap:16px;scroll-snap-align:start;width:min(300px,78vw)}
  .tm__foto,.tm__p.is-activa .tm__foto{width:100%}
  .tm__foto img{filter:none}
  .tm__info{display:block;width:100%}
  .tm__nav{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tm__p.is-activa .tm__foto img,.tm__p.is-activa .tm__info{animation:none}
}

/* ═══ 09 · ALIANZAS ═══════════════════════════════════════════════════════ */
.ali__card{padding:clamp(56px,6.5vw,104px) clamp(20px,4.2vw,60px) clamp(28px,3vw,48px)}
.ali__l{margin:0;padding:0;list-style:none}
.ali__it{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr) auto;gap:clamp(20px,4vw,64px);
  align-items:center;padding:clamp(22px,2.4vw,34px) 0;border-bottom:1px solid var(--filete)}
.ali__cab{margin-bottom:0}
.ali__logo{display:flex;align-items:center}
.ali__logo img{height:auto;max-height:64px;width:auto;max-width:180px}
.ali__n{margin:0 0 6px;font-family:var(--titulo);font-weight:700;text-transform:uppercase;font-size:1rem;
  letter-spacing:.04em;color:var(--tinta)}
.ali__k{margin:0 0 6px;font-family:var(--serif-it);font-style:italic;font-size:1.25rem;color:var(--navy)}
.ali__d{margin:0;font-size:1rem;line-height:1.55;color:var(--gris)}
.ali__web{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--titulo);font-weight:600;
  font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta);
  text-decoration:underline;text-underline-offset:5px}
.ali__web:hover{color:var(--naran-txt)}
@media (max-width:760px){
  .ali__it{grid-template-columns:1fr;gap:12px}
}

/* ═══ 10 · PROPÓSITO · las tarjetas en «D» de la V4, ahora cuatro ═══════ */
.acp--v5f .acp__lead--xl{font-family:var(--serif-it);font-style:italic;font-size:clamp(1.25rem,1rem + .8vw,1.75rem);
  line-height:1.3;margin-bottom:18px}
.acp--v5f .acp__sub{margin:0}
.acp--v5f .acp__t{font-size:1.3vw;max-width:13vw;margin-top:1.2vw}
.acp--v5f .acp__d{max-width:14vw;display:flex;flex-direction:column;gap:10px}
.acp__paso{font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;opacity:.8}
.acp--v5f .acp__card{padding:3.4vw}
.acp--v5f .acp__card:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
.acp__flujo{display:grid;grid-template-columns:minmax(0,64fr) minmax(0,30fr);gap:3vw;align-items:center;
  margin:4vw 6.9vw 0;padding-top:2vw;border-top:1px solid rgba(11,27,36,.18);transition:border-color .5s}
.acp.is-viva .acp__flujo{border-top-color:rgba(255,255,255,.35)}
.acp__ruta{margin:0;display:flex;flex-wrap:wrap;gap:6px 0;font-family:var(--titulo);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;font-size:clamp(.75rem,.62rem + .3vw,.9375rem)}
.acp__ruta span + span::before{content:"→";margin:0 .7em;color:var(--naran)}
.acp__puente{margin:0;font-size:1.0625rem;line-height:1.55}
.acp__puente a{font-weight:600;text-underline-offset:4px}
@media (max-width:1100px){
  .acp--v5f .acp__t{font-size:3vw;max-width:28vw}
  .acp--v5f .acp__d{max-width:28vw}
  .acp__flujo{grid-template-columns:1fr;margin:40px 32px 0;padding-top:24px}
}
@media (max-width:767px){
  .acp--v5f .acp__t{font-size:22px;max-width:52vw}
  .acp--v5f .acp__d{max-width:52vw}
  .acp__flujo{margin:32px 20px 0}
}

/* ═══ HIDEOX · las tres parejas como primera lectura ══════════════════════ */
.hx3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 clamp(28px,3vw,44px);
  padding:0;list-style:none}
.hx3__it{display:flex;flex-direction:column;gap:10px;padding:20px 0 0;border-top:2px solid var(--navy)}
.hx3__k{font-family:var(--mono);font-size:.8125rem;letter-spacing:.12em;color:var(--navy)}
.hx3__t{font-family:var(--titulo);font-weight:700;text-transform:uppercase;font-size:clamp(1.05rem,.85rem + .7vw,1.5rem);
  line-height:1.1;letter-spacing:-.005em;color:var(--tinta)}
.hx3__t em{display:block;font-family:var(--serif-it);font-style:italic;font-weight:400;text-transform:none;
  letter-spacing:0;font-size:1.12em}
.hx__pie{display:flex;justify-content:flex-end;margin-top:clamp(20px,2.4vw,32px)}
@media (max-width:760px){.hx3{grid-template-columns:1fr}}

/* ═══ 11 · CIERRE · el velero ═════════════════════════════ */
.claim__t em{color:#7FD0F0}

/* ═══ 12 · CIERRE DEL SOCIO DIRECTOR + PIE ════════════════════════════════ */
.ftr__top--dir{grid-template-columns:minmax(0,52fr) minmax(0,42fr);align-items:center}
.dir{margin:clamp(8px,1vw,16px) 0 clamp(24px,2.6vw,36px);padding-left:20px;border-left:2px solid var(--naran)}
.dir__nom{margin:0;font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.3rem,1rem + .9vw,1.8rem);line-height:1.1;letter-spacing:-.005em}
.dir__nom b{font-family:var(--serif-it);font-style:italic;font-weight:400;text-transform:none;font-size:1.1em}
.dir__cargo{margin:4px 0 6px;font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris)}
.dir__acc{display:flex;flex-wrap:wrap;gap:12px}
.dir__foto{margin:0;border-radius:8px;overflow:hidden;aspect-ratio:4/3;background:#EEF1F2}
.dir__foto img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}

/* la cita del socio director: toda en Playfair cursiva y entre comillas */
.ftr__cita{margin:0 0 clamp(24px,3vw,40px);padding:0}
.ftr__cita p{margin:0;font-family:var(--serif-it);font-style:italic;font-weight:400;
  font-size:clamp(2.1rem,1.2rem + 3vw,4.2rem);line-height:1.08;letter-spacing:-.005em;color:var(--tinta);
  text-wrap:balance;max-width:16ch}
/* el logotipo líquido de la V4, al final del todo */
.ftr--v5f .ftr__xl{margin-top:clamp(40px,5vw,72px)}
.ftr__nav5{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  margin:clamp(28px,3.5vw,48px) clamp(20px,4.2vw,60px) 0}
@media (max-width:980px){
  .ftr__top--dir{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ftr__nav5{grid-template-columns:1fr 1fr}
}

/* ── Hero · velo SOLO detrás del bloque de texto ─────────────────────────
   La V4 dejó el vídeo sin velo. Con el titular nuevo en dos líneas, el
   plano del hielo (blanco) dejaba la entradilla por debajo de 3:1. Se añade
   un degradado que nace en la esquina inferior izquierda y muere antes del
   centro: el resto del vídeo se sigue viendo tal cual. Peor caso medido
   (hielo #E8EEF0 bajo el 52 % del velo) → blanco ≈ 4,9:1. */
.hero--video .hero__cont::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 0% 100%,rgba(4,14,26,.62) 0%,rgba(4,14,26,.42) 38%,rgba(4,14,26,0) 66%)}
.hero--video .hero__bloque{position:relative;z-index:2}
/* el fondo del agua se funde con el pie de la sección, sin costura */
.sup__mar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;z-index:1;pointer-events:none;
  background:linear-gradient(rgba(6,3,8,0),var(--agua-fondo))}

/* ── Móvil estrecho ─────────────────────────────────────────────────────
   «CONSULTORES QUE VAN» no cabe en una línea a 375 px: la primera línea se
   deja partir y la cursiva sigue en la suya. Los titulares de sección bajan
   un punto para que palabras largas («TRANSFORMACIONES») no se corten. */
@media (max-width:560px){
  .hero__t{white-space:normal;font-size:min(34px,9vw)}
  .hero__t em{white-space:nowrap}
  .sup__h,.mez5__h,.cas__h,.voz__h,.eco__h,.tm__h,.ali__h,.acp__h,.hx__t,.eq__h,.num5__t{
    font-size:clamp(1.55rem,1rem + 3vw,2rem);overflow-wrap:break-word}
  .voz__h{font-size:clamp(1.7rem,1rem + 4vw,2.2rem)}
  .tac{font-size:clamp(2.6rem,1rem + 9vw,3.4rem)}
}

/* ═══ MÁRGENES · todo alineado al mismo canto ═════════════════════════════
   Regla de toda la web: el contenido de cada pieza arranca a
   clamp(20px, 4.2vw, 60px) de su canto (60 px a 1440), igual que el titular
   del hero. */

/* Hero · la franja de credenciales arranca y termina en la misma vertical
   que el titular: el primer y el último elemento no llevan relleno exterior. */
.cred{padding-inline:60px;scroll-padding-inline:60px}
.cred__it:first-child .cred__a{padding-left:0}
.cred__it:last-child .cred__a{padding-right:0}
@media (max-width:1100px){
  .cred__it:last-child .cred__a{padding-right:clamp(16px,1.8vw,30px)}
}
@media (max-width:767px){
  .cred{padding-inline:20px;scroll-padding-inline:20px}
}

/* Propósito · las tarjetas en «D» venían de la V4 con 6,9 vw de margen; se
   ajustan al mismo ancho que el resto de secciones. */
.acp--v5f .acp__in{padding:clamp(56px,6.5vw,104px) 0 clamp(40px,4.5vw,72px)}
.acp--v5f .acp__cab{margin:0 clamp(20px,4.2vw,60px) clamp(36px,4.5vw,64px)}
.acp--v5f .acp__l{padding-inline:clamp(20px,4.2vw,60px);scroll-padding-inline:clamp(20px,4.2vw,60px)}
.acp--v5f .acp__flujo{margin:clamp(32px,4vw,56px) clamp(20px,4.2vw,60px) 0}

/* Retrato en lugar de iniciales: mismo círculo, la foto lo llena */
.vz__mono--foto{object-fit:cover;padding:0;background:#DDE5EA}

/* ═══ 09 · ALIANZAS · en el azul corporativo, contenido invertido ═════════
   Fondo PANTONE 301C (#004B87, el navy de marca). Todo el contenido pasa a
   claro. Contraste sobre #004B87: blanco 8,91:1 · #D5E2EA 6,75:1 ·
   #7FD0F0 5,17:1. Los logotipos se pasan a blanco. */
.ali__card{background:#004B87;color:#fff}
.ali .eye{color:#7FD0F0}
.ali__h{color:#fff}
.ali__h em{color:#BFE3F1}
.ali__lead,.ali__d{color:#D5E2EA}
.ali__cab,.ali__it{border-color:rgba(255,255,255,.22)}
.ali__n{color:#fff}
.ali__k{color:#7FD0F0}
.ali__logo img{filter:brightness(0) invert(1)}
.ali__web{color:#fff;text-decoration-color:rgba(255,255,255,.5)}
.ali__web:hover{color:#BFE3F1;text-decoration-color:#BFE3F1}
.ali :focus-visible{outline-color:#fff}

/* ═══ ECOSISTEMA · texto arriba, radar debajo ════════════════════════════
   Las cajas del radar van FUERA del círculo grande; en dos columnas no
   había sitio para ellas sin tocar el borde de la pieza. El texto se
   reparte arriba en asimetría 46/48 (titular | párrafos) y el radar ocupa
   el ancho completo debajo, más grande. */
.eco__card{grid-template-columns:minmax(0,1fr)}
.eco__txt{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,48fr);gap:clamp(24px,5vw,80px);align-items:start}
.eco__cuerpo{padding-top:clamp(0px,4vw,56px)}
.eco__vis{padding:clamp(80px,8vw,110px) 0 clamp(16px,2vw,28px)}
.son{max-width:min(500px,46vw)}
@media (max-width:1300px){.eco__vis{padding-inline:0}}
@media (max-width:900px){
  .eco__txt{grid-template-columns:1fr;gap:8px}
  .eco__cuerpo{padding-top:0}
  .son{max-width:440px}
}

/* ═══ RADAR · un solo reloj ══════════════════════════════════════════════
   Con JS, la línea, los puntos y las cajas NO llevan animación CSS: los
   mueve v5final.js desde el mismo reloj (ángulo de la línea en cada
   fotograma), así cada caja se enciende exactamente cuando la línea pasa
   por su punto. Sin JS siguen las animaciones CSS de arriba. */
.js .son__barrido,.js .son__lab,.js .son__pt,.js .son__blip::after{animation:none}
.js .son__lab{opacity:calc(.28 + .72 * var(--k,0));filter:blur(calc((1 - var(--k,0)) * 1.4px))}
.js .son__pt{opacity:calc(.4 + .6 * var(--k,0));transform:scale(calc(1 + .5 * var(--p,0)));
  box-shadow:0 0 0 calc(var(--p,0) * 10px) rgba(127,208,240,calc(var(--p,0) * .35))}
.js .son__blip::after{opacity:calc(.25 + .75 * var(--k,0));transform:scale(calc(1 + .6 * var(--p,0)))}
@media (max-width:900px){.js .son__lab{opacity:1;filter:none}}
/* los párrafos del ecosistema llegan hasta el margen derecho común (60 px) */
.eco__cuerpo .eco__p{max-width:none}

/* «Transformar. Acompañar. Crecer.» sube un poco (se monta sobre el fondo
   oscuro de la foto, que ya es del mismo negro que el pie) y deja más aire
   por debajo, antes de «Hablemos». */
.sup__pie .tac{position:relative;z-index:2;margin-top:clamp(-110px,-6vw,-36px)}
.sup__acc{margin-top:clamp(56px,6.5vw,104px)}


/* ═══ AJUSTES 6 OCT ═════════════════════════════════════════════════════ */
/* Antetítulos sin la línea delante, en todas las secciones */
.eye i,.hx__eye i,.eq__eye i,.ftr__eye i{display:none}

/* Radar: los textos que no está tocando la línea se apagan un poco pero NO
   se emborronan; siempre se pueden leer. Apagado: blanco al 50 % sobre el
   marino ≈ 5:1. */
@media (min-width:901px){.js .son__lab{filter:none;opacity:calc(.5 + .5 * var(--k,0))}}
@keyframes son-luz{0%{opacity:1}32%{opacity:1}68%{opacity:.5}100%{opacity:.5}}
.son__lab{filter:none}

/* Iceberg: sin filete entre «Transformar. Acompañar. Crecer.» y los botones */
.sup__acc{border-top:0;padding-top:0}

/* ═══ La mezcla + Números + Casos · UNA sola pieza ═══════════════════════
   Las tres secciones se leen seguidas: sin la junta gris de 10 px entre
   ellas y con las esquinas redondeadas solo arriba (mezcla) y abajo
   (casos). El azulado de la mezcla se funde en blanco hacia los números. */
.mez5{padding-bottom:0}
.mez5__card{border-radius:8px 8px 0 0;
  background:linear-gradient(to bottom,#F2F7F9 0%,#F2F7F9 55%,#FFFFFF 100%)}
.num5{padding-bottom:0}
.num5__card{border-radius:0}
.cas__card{border-radius:0 0 8px 8px}

/* Casos y Voz del cliente: sin filete bajo el titular, y la entradilla de
   la derecha llega hasta el margen derecho común (60 px), como el resto */
.cas__cab,.voz__cab{border-bottom:0;padding-bottom:0}
.cas__lead,.voz__lead{max-width:none}