/* ═══════════════════════════════════════════════════════════════════════════
   HeliOx · componentes
   Lenguaje de interacción calcado de la referencia (tenity.com/venture-capital):
   botón de chevron que colapsa, tarjetas con punto, superficies que
   reaccionan al puntero y titulares que entran palabra a palabra.
   Color y tipografía son los de HeliOx.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --expo:cubic-bezier(.16,1,.3,1);
  --r-card:clamp(18px,1.45vw,26px);
}

/* ═══ BOTÓN ═════════════════════════════════════════════════════════════════
   Pastilla + círculo con chevron. Al pasar el puntero el círculo colapsa a
   escala 0 y el conjunto baja a opacidad .6: exactamente el gesto de la
   referencia. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:max(44px,3.333vw);
  padding:0 1.667vw;
  border:1px solid transparent;border-radius:999px;
  font-size:max(13px,1vw);font-weight:600;letter-spacing:0;
  line-height:1;text-decoration:none;cursor:pointer;
  transition:background-color .4s var(--expo),color .4s var(--expo),
             border-color .4s var(--expo),opacity .4s var(--expo);
}
.btn__i{
  flex:0 0 auto;display:grid;place-items:center;
  width:max(32px,2.25vw);aspect-ratio:1;border-radius:50%;
  border:1.5px solid currentColor;
  margin-left:clamp(.7rem,.85vw,1rem);margin-right:clamp(-1.1rem,-1.05vw,-.85rem);
  transition:width .4s var(--expo),height .4s var(--expo),
             margin .4s var(--expo),transform .4s var(--expo);
}
.btn__i svg{width:70%;height:70%;fill:currentColor;transition:opacity .3s var(--expo)}
.btn:hover{opacity:.6}
.btn:hover .btn__i{
  width:clamp(18px,1.2vw,22px);
  margin-left:clamp(-.4rem,-.35vw,-.25rem);
  transform:scale(0);
}
.btn:hover .btn__i svg{opacity:0}
.btn:focus-visible{opacity:1}

.btn--navy{background:var(--navy);color:#fff}
.btn--sup{background:var(--sup);color:var(--prof)}
.btn--linea{background:transparent;color:var(--navy);border-color:rgba(0,75,135,.45)}
.btn--linea-claro{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--sm{min-height:clamp(44px,2.7vw,50px);font-size:max(13px,1vw);
  padding:0 clamp(1.1rem,1.3vw,1.5rem)}
.btn--sm .btn__i{width:clamp(30px,1.9vw,34px);
  margin-right:clamp(-.85rem,-.8vw,-.65rem)}

/* botón que es solo el círculo (dentro de las tarjetas) */
.bflecha{
  display:grid;place-items:center;flex:0 0 auto;
  width:clamp(44px,2.9vw,56px);aspect-ratio:1;border-radius:50%;
  border:1.5px solid currentColor;color:inherit;
  transition:opacity .8s var(--expo),transform .5s var(--expo);
}
.bflecha svg{width:68%;height:68%;fill:currentColor}
.bflecha:hover{opacity:.25;transform:scale(.94)}

/* ═══ TARJETA con punto ═════════════════════════════════════════════════════ */
.card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  justify-content:space-between;gap:clamp(2.5rem,5vw,4.5rem);
  padding:clamp(1.9rem,2.5vw,3rem);
  border-radius:var(--r-card);
  background:rgba(255,255,255,.05);
  transition:background-color .4s var(--expo),transform .4s var(--expo);
  min-height:clamp(260px,22vw,330px);
}
.prof .card{background:rgba(255,255,255,.05)}
.sup-bg .card{background:rgba(3,20,30,.04)}
.card:hover{background:rgba(255,255,255,.09)}
.sup-bg .card:hover{background:rgba(3,20,30,.07)}
.card__dot{
  position:absolute;top:clamp(.9rem,.95vw,1.2rem);right:clamp(.9rem,.95vw,1.2rem);
  width:clamp(9px,.85vw,13px);aspect-ratio:1;border-radius:50%;
}
.card__dot--cielo{background:var(--cielo)}
.card__dot--naranja{background:var(--naran)}
.card__dot--claro{background:var(--grisaz)}
.card__t{font-family:var(--display);font-weight:var(--peso-display);font-size:var(--t-h4);
  line-height:1;letter-spacing:-.02em;max-width:19ch}
.card__b{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem}
.card__b p{max-width:42ch;font-size:var(--t-body);line-height:1.45}

/* ═══ SUPERFICIE LÍQUIDA que sigue al puntero ═══════════════════════════════
   Un halo radial cuyo centro son dos custom properties que actualiza el JS.
   Sin canvas, sin librerías: compuesto por la GPU. */
.liquido{position:relative;isolation:isolate;overflow:hidden}
.liquido::before{
  content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 38% at var(--mx,50%) var(--my,50%),
      rgba(0,163,224,.30) 0%,rgba(0,163,224,.12) 42%,transparent 68%),
    radial-gradient(52% 52% at calc(100% - var(--mx,50%)) calc(100% - var(--my,50%)),
      rgba(225,70,2,.16) 0%,transparent 62%);
  opacity:0;transition:opacity .6s var(--expo);
  transform:translate3d(0,0,0);
}
.liquido:hover::before,.liquido:focus-within::before{opacity:1}

/* ═══ MÉTODO HIDEOX · seis dimensiones sobre arcos concéntricos ═════════════
   Construcción del manual de marca: dos pares de arcos concéntricos que la
   sección recorta, el logotipo a la izquierda y las seis dimensiones como
   índice a la derecha. Los arcos son CSS puro: ni una imagen. */
.hdx{position:relative;isolation:isolate;overflow:hidden}
.hdx__deco{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hdx__arco{position:absolute;border:1px solid rgba(225,70,2,.55);border-radius:50%}
.hdx__arco--1{width:min(38vw,520px);aspect-ratio:1;top:-16%;left:-12%}
.hdx__arco--2{width:min(22vw,300px);aspect-ratio:1;top:-3%;left:-2%}
.hdx__arco--3{width:min(42vw,580px);aspect-ratio:1;bottom:-34%;right:-8%}
.hdx__arco--4{width:min(25vw,340px);aspect-ratio:1;bottom:-20%;right:1%}

.hdx__h{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(1.25rem,3.5vw,4rem);flex-wrap:wrap;
  padding-bottom:clamp(.9rem,1.5vw,1.4rem);
  border-bottom:1px solid var(--filete-d);
}
.hdx__h h2{flex:0 1 56%}
.hdx__h p{flex:0 1 36%;max-width:44ch;font-size:var(--t-body);line-height:1.45}

.hdx__cuerpo{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(1.75rem,4vw,4.5rem);align-items:center;
  margin-top:clamp(2.5rem,5.5vw,5rem);
}
/* logotipo de la metodología: mismos dos puntos que el de HeliOx */
.hdx__marca{
  display:flex;align-items:flex-start;
  font-family:var(--display);font-weight:var(--peso-display);line-height:1;
  font-size:var(--t-h2s);letter-spacing:-.04em;color:var(--cielo);
}
.hdx__marca i{position:relative;width:.13em;height:.42em;margin-left:.1em;
  margin-top:.12em}
.hdx__marca i::before,.hdx__marca i::after{content:"";position:absolute;left:0;
  width:100%;aspect-ratio:1;border-radius:50%;background:var(--cielo)}
.hdx__marca i::before{top:0}
.hdx__marca i::after{bottom:0}
.hdx__d{color:var(--grisaz);max-width:40ch;
  margin-top:clamp(1.1rem,1.8vw,1.6rem);font-size:var(--t-body);line-height:1.45}
.hdx__l .btn{margin-top:clamp(1.5rem,2.4vw,2.25rem)}

/* el «+» circulado, mismo recurso que el del acordeón */
.hdx__mas{
  position:relative;width:clamp(44px,3.4vw,58px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(183,201,211,.4);
}
.hdx__mas::before,.hdx__mas::after{content:"";position:absolute;top:50%;left:50%;
  background:var(--cielo);translate:-50% -50%}
.hdx__mas::before{width:38%;height:1.5px}
.hdx__mas::after{width:1.5px;height:38%}

.hdx__lista{list-style:none}
.hdx__lista li{
  display:flex;align-items:baseline;gap:clamp(.6rem,.9vw,.9rem);
  padding:clamp(.65rem,1.1vw,1rem) 0;
  border-bottom:1px solid var(--filete-d);
}
.hdx__lista li:first-child{border-top:1px solid var(--filete-d)}
.hdx__k{flex:0 0 auto;color:var(--naran);font-weight:600;font-size:var(--t-micro)}
.hdx__k::after{content:"·";margin-left:.55em;color:var(--grisaz)}
.hdx__v{font-size:var(--t-body);line-height:1.3;
  letter-spacing:.13em;text-transform:uppercase;color:#fff;font-size:var(--t-micro)}

/* ═══ NÚMEROS · índice editorial con fotografía ═════════════════════════════
   Filas separadas por filetes de 1px, cifra gigante a la izquierda y una
   fotografía pequeña ancla cada fila a la derecha: el gesto de "índice
   editorial" del kit (§5.4) en vez de tres tarjetas idénticas. */
.numlist{
  list-style:none;
  --num-foto:clamp(120px,20vw,290px);   /* lado de la fotografía */
  --num-hueco:clamp(.6rem,1.4vw,1.5rem);/* aire entre la cifra y la foto */
  --num-solape:clamp(16px,3vw,52px);    /* cuánto se monta el «+» encima */
}
/* La cifra se alinea a la derecha hasta topar con la fotografía. El «+» lleva
   un margen negativo, así que es lo único que se monta encima de la foto: la
   cifra que no lleva signo (el 3) queda limpia justo antes de la imagen. */
.numlist__f{
  position:relative;
  padding-block:clamp(1.1rem,2.2vw,1.9rem);
  border-top:1px solid var(--filete);
  min-height:clamp(170px,24vw,340px);
}
.numlist__f:last-child{border-bottom:1px solid var(--filete)}
.numlist__k{
  position:relative;z-index:3;max-width:16ch;
  font-family:var(--display);font-weight:var(--peso-display);color:var(--prof);
  font-size:var(--t-h4);line-height:1;letter-spacing:-.02em;
}
.numlist__k .muted{display:block;margin-top:.5rem;font-weight:600;
  font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase}
.numlist__v{
  position:relative;z-index:4;
  display:flex;align-items:baseline;justify-content:flex-end;
  padding-right:calc(var(--num-foto) + var(--num-hueco));
  margin-top:clamp(.25rem,.8vw,.9rem);
  font-family:var(--display);font-weight:var(--peso-display);color:var(--naran);
  font-size:var(--t-xl);
  line-height:.8;letter-spacing:-.06em;
}
.numlist__v i{font-style:normal;
  margin-right:calc(-1 * (var(--num-hueco) + var(--num-solape)))}
.numlist__fig{
  position:absolute;z-index:2;right:0;top:50%;translate:0 -50%;
  width:var(--num-foto);aspect-ratio:1;
  border-radius:clamp(14px,1.7vw,26px);overflow:hidden;margin:0;
}
.numlist__fig img{width:100%;height:100%;object-fit:cover}

/* ═══ TRES PERSPECTIVAS · fichas escalonadas sobre foto velada ══════════════
   Cuatro piezas en una retícula de 3×3 que deja huecos a propósito: la ficha
   grande ocupa el centro y las tres numeradas caen a distinta altura. El
   escalonado es el gesto; si las cuatro estuvieran alineadas sería un grid
   más. */
.tri-sec{position:relative;overflow:hidden}
.tri-sec__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:center}
.tri-sec__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(3,20,30,.9) 0%,rgba(3,20,30,.82) 45%,
    rgba(3,20,30,.93) 100%)}
/* Variante que se apoya en el lienzo del hero: sin foto propia y con un
   velo mucho más suave —solo el que necesita el texto— para que las barras
   se sigan viendo pasar por detrás. Sin isolation, para que el canvas de
   .zona-lienzo (z-index -4) llegue hasta aquí. */
/* Con padding-top:0 el párrafo de entrada caía justo en la costura, que es
   donde el velo vale 0 y las barras están más encendidas: se quedaba en
   4,07:1 contra el peor fotograma posible. Con este aire arranca al 10 %
   de la sección, donde el velo ya va por .40, y sube a 6,34:1. El fondo
   sigue siendo continuo —es el mismo lienzo—, solo empieza más abajo el
   contenido. */
.tri-sec--lienzo{padding-top:clamp(4.5rem,8vw,7rem)}
/* Arranca en 0 para empalmar con el velo del hero, que muere en 0, y sube
   a .40 en 109 px: suficiente para el texto y demasiado largo para que el
   ojo lo lea como un borde. */
.tri-sec--lienzo .tri-sec__scrim{
  background:linear-gradient(180deg,rgba(3,20,30,0) 0%,rgba(3,20,30,.40) 10%,
    rgba(3,20,30,.55) 36%,rgba(3,20,30,.64) 70%,rgba(3,20,30,.92) 100%)}

/* ── Parallax de la mezcla ───────────────────────────────────────
   Tres planos sobre un lienzo que no se mueve:
     · las tarjetas de los lados (01 y 02) son el plano de delante: corren
       más rápido y se abren un poco hacia fuera;
     · la caja de la foto y la tarjeta 03 son el plano medio y van a la
       MISMA velocidad, a propósito: así la caja sigue tocando a la 03 en
       cualquier punto del scroll, que es lo que se pidió;
     · dentro de la caja, la fotografía corre en sentido contrario y algo
       escalada —el plano del fondo—, que es lo que da la profundidad.
   Va en `translate` y `scale`, NO en `transform`: así no pisa el
   `transform` que usan las apariciones .rv, que son otra cosa. */
@media (prefers-reduced-motion:no-preference){
  .tri-sec--lienzo .tri__h,
  .tri-sec--lienzo .tri__c,
  .tri-sec--lienzo .tri__foco{
    translate:var(--px,0) var(--py,0);
    will-change:translate;
  }
  .tri-sec--lienzo .tri__foco img{
    translate:0 var(--py,0);scale:var(--sc,1.08);
    will-change:translate,scale;
  }
}

.tri__h{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:clamp(1.25rem,3vw,3rem);flex-wrap:wrap;
  padding-bottom:clamp(.9rem,1.4vw,1.25rem);
  border-bottom:1px solid var(--filete-d);
  margin-bottom:clamp(2.25rem,4.5vw,4rem);
}
.tri__h p:last-child{max-width:52ch;font-size:var(--t-body);line-height:1.45}

.tri{
  display:grid;
  grid-template-columns:.86fr 1.2fr .86fr;
  gap:clamp(.75rem,1.15vw,1.35rem);
  align-items:start;
}
.tri__c--01{grid-column:1;grid-row:1}
/* la caja de la foto ocupa las dos primeras filas ENTERAS: con
   align-items:start en el grid se quedaba a su min-height y dejaba un
   hueco muerto sobre la tarjeta 03. Con stretch baja hasta tocarla. */
.tri__foco {grid-column:2;grid-row:1 / span 2;align-self:stretch}
.tri__c--02{grid-column:3;grid-row:2}
.tri__c--03{grid-column:2;grid-row:3}

.tri__c{gap:clamp(1.75rem,3.5vw,3.25rem);min-height:clamp(210px,17vw,270px)}
.tri__n{font-family:var(--sans);font-weight:600;font-size:var(--t-micro);
  letter-spacing:.01em;color:var(--grisaz)}
.tri__b p{margin-top:.6rem;font-size:var(--t-s);line-height:1.45}

/* ficha central: la foto va al fondo con scrim propio, texto centrado */
.tri__foco{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--r-card);
  display:grid;place-content:center;text-align:center;
  padding:clamp(1.75rem,3vw,3rem);
  min-height:clamp(320px,38vw,640px);
}
.tri__foco img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover}
.tri__foco::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(3,20,30,.62),rgba(3,20,30,.84));
}
.tri__claim{color:#fff;max-width:17ch;margin-inline:auto}
.tri__foco .btn{margin-top:clamp(1.5rem,2.4vw,2.25rem);justify-self:center}

/* ═══ MURO DE LOGOS asimétrico ══════════════════════════════════════════════ */
.logos{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(.6rem,.9vw,1rem);
}
.logo{
  display:grid;place-items:center;
  padding:clamp(1.4rem,2.4vw,2.6rem);
  border-radius:var(--r-card);
  background:rgba(3,20,30,.035);
  transition:background-color .45s var(--expo);
}
.logo img{
  max-width:min(100%,180px);max-height:clamp(34px,3.4vw,54px);
  width:auto;height:auto;object-fit:contain;
  filter:grayscale(1) opacity(.55);
  transition:filter .45s var(--expo),transform .45s var(--expo);
}
.logo:hover{background:rgba(3,20,30,.06)}
.logo:hover img{filter:none;transform:scale(1.04)}
/* la asimetría: celdas de anchos y alturas distintas */
.logo:nth-child(1){grid-column:span 3;min-height:clamp(120px,11vw,180px)}
.logo:nth-child(2){grid-column:span 3;min-height:clamp(120px,11vw,180px);
  border-radius:var(--r-card) clamp(80px,8vw,130px) clamp(80px,8vw,130px) var(--r-card)}
.logo:nth-child(3){grid-column:span 2;min-height:clamp(120px,11vw,180px)}
.logo:nth-child(4){grid-column:span 4;min-height:clamp(120px,11vw,180px);
  border-radius:clamp(80px,8vw,130px) var(--r-card) var(--r-card) clamp(80px,8vw,130px)}
.logo:nth-child(5){grid-column:span 6;min-height:clamp(110px,9vw,150px)}

/* ═══ PARALLAX ══════════════════════════════════════════════════════════════ */
.plx{position:relative;overflow:hidden;isolation:isolate}
.plx__img{
  position:absolute;left:0;top:-12%;width:100%;height:124%;z-index:-2;
  object-fit:cover;will-change:transform;
  transform:translate3d(0,var(--plx,0px),0);
}
.plx__scrim{position:absolute;inset:0;z-index:-1}

/* ═══ FAQ ═══════════════════════════════════════════════════════════════════ */
.faq{display:flex;flex-direction:column;gap:clamp(.55rem,.8vw,.85rem)}
/* El titular deja de compartir fila con las preguntas y se pone encima, a
   todo el ancho; las ocho preguntas bajan a dos columnas de cuatro.
   Rejilla y no `columns`: con `columns` el navegador reparte el contenido
   entre columnas al vuelo y al abrir un acordeón las preguntas saltan de
   sitio. Con rejilla cada pregunta se queda donde está y solo crece su
   fila. `align-items:start` para que la hermana de al lado no estire. */
.faq__t{max-width:20ch;margin-bottom:clamp(2.25rem,4.5vw,3.75rem)}
.faq--dos{
  display:grid;grid-template-columns:1fr 1fr;align-items:start;
  column-gap:clamp(.75rem,1.4vw,1.5rem);row-gap:clamp(.55rem,.8vw,.85rem);
}
.faq details{
  border:1px solid rgba(3,20,30,.13);border-radius:var(--r-card);
  background:rgba(3,20,30,.02);overflow:hidden;
  transition:background-color .4s var(--expo),border-color .4s var(--expo);
}
.faq details[open]{background:rgba(3,20,30,.045);border-color:rgba(0,75,135,.3)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:44px;padding:clamp(1.1rem,1.5vw,1.6rem) clamp(1.25rem,1.9vw,2rem);
  cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:var(--peso-display);
  /* un escalón por debajo de --t-h4: a dos columnas, 24 px apretaba
     demasiado los enunciados largos. Solo aquí; la escala no se toca. */
  font-size:clamp(1.05rem,1.39vw,1.36rem);
  line-height:1.12;letter-spacing:-.02em;
}
.faq summary::-webkit-details-marker{display:none}
.faq__i{position:relative;flex:0 0 auto;width:clamp(30px,2.1vw,38px);aspect-ratio:1;
  border-radius:50%;border:1px solid rgba(3,20,30,.24);
  transition:transform .45s var(--expo),border-color .45s var(--expo),
             background-color .45s var(--expo)}
.faq__i::before,.faq__i::after{content:"";position:absolute;top:50%;left:50%;
  width:42%;height:1.5px;background:var(--naran-txt);translate:-50% -50%;
  transition:opacity .45s var(--expo),background-color .45s var(--expo)}
.faq__i::after{rotate:90deg}
.faq details[open] .faq__i{transform:rotate(135deg);border-color:var(--navy);
  background:var(--navy)}
.faq details[open] .faq__i::before,
.faq details[open] .faq__i::after{background:#fff}
.faq details[open] .faq__i::after{opacity:0}
.faq__a{overflow:hidden}
.faq__a p{padding:0 clamp(1.25rem,1.9vw,2rem) clamp(1.25rem,1.7vw,1.8rem);
  max-width:74ch;color:var(--gris)}

/* ═══ PRE-PIE ═══════════════════════════════════════════════════════════════ */
.prepie{
  position:relative;overflow:hidden;isolation:isolate;
  /* más aire: el vídeo de fondo pide sitio para leerse como fondo y no
     como una banda estrecha */
  padding-block:clamp(7.5rem,16vw,15rem);
  min-height:min(92svh,1000px);
  display:flex;flex-direction:column;justify-content:center;
  background:var(--prof);color:#fff;text-align:center;
}
/* Fundido al pie: una banda alta que llega opaca al borde de abajo. El
   velo ya fundía, pero en 100 px; con el vídeo detrás todavía se adivinaba
   dónde acababa. Esta va por encima del vídeo y por debajo del texto. */
.prepie::after{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1;
  height:clamp(160px,26vh,300px);pointer-events:none;
  background:linear-gradient(180deg,rgba(3,20,30,0) 0%,rgba(3,20,30,.55) 42%,
    rgba(3,20,30,.88) 74%,var(--prof) 100%);
}
/* El vídeo que antes hacía de fondo del hero termina aquí. */
.prepie__vid{position:absolute;inset:0;z-index:-3;width:100%;height:100%;
  object-fit:cover;object-position:center;background:var(--prof)}
/* Dos capas en una: arriba el velo que hace legible el titular sobre el
   vídeo; abajo, un fundido a --prof que llega OPACO al borde inferior,
   de modo que la costura con el pie no se ve por ningún lado. */
.prepie__velo{position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg,rgba(3,20,30,.92) 0%,rgba(3,20,30,.62) 26%,
      rgba(3,20,30,.58) 52%,rgba(3,20,30,.86) 78%,var(--prof) 100%),
    linear-gradient(90deg,rgba(3,20,30,.45) 0%,rgba(3,20,30,0) 35%,
      rgba(3,20,30,0) 65%,rgba(3,20,30,.45) 100%)}
.prepie__t{
  font-family:var(--display);
  font-weight:var(--peso-display);font-size:var(--t-l);
  line-height:.882;letter-spacing:-.06em;
  max-width:16ch;margin-inline:auto;
}
.prepie__p{max-width:52ch;margin:clamp(1.5rem,2.4vw,2.25rem) auto 0;
  color:var(--grisaz);font-size:var(--t-body)}
.prepie__cta{margin-top:clamp(2rem,3vw,3rem);display:flex;gap:1rem;
  justify-content:center;flex-wrap:wrap}
/* fondo dinámico: ondas concéntricas que respiran y siguen al puntero */
.prepie__ondas{position:absolute;inset:0;z-index:-1;pointer-events:none;
  display:grid;place-items:center}
.prepie__ondas i{
  position:absolute;border-radius:50%;border:1px solid rgba(0,163,224,.2);
  animation:respira 9s var(--expo) infinite;
  translate:calc((var(--mx,50%) - 50%) * .06) calc((var(--my,50%) - 50%) * .06);
  transition:translate .9s var(--expo);
}
.prepie__ondas i:nth-child(1){width:26vw;aspect-ratio:1;animation-delay:0s}
.prepie__ondas i:nth-child(2){width:44vw;aspect-ratio:1;animation-delay:1.1s;
  border-color:rgba(225,70,2,.18)}
.prepie__ondas i:nth-child(3){width:64vw;aspect-ratio:1;animation-delay:2.2s}
.prepie__ondas i:nth-child(4){width:86vw;aspect-ratio:1;animation-delay:3.3s;
  border-color:rgba(225,70,2,.1)}
@keyframes respira{
  0%,100%{transform:scale(1);opacity:.55}
  50%{transform:scale(1.07);opacity:1}
}

/* ═══ TITULAR palabra a palabra ═════════════════════════════════════════════ */
.split-t .w{display:inline-block;opacity:0;transform:translateY(.5em);
  transition:opacity .75s var(--expo),transform .75s var(--expo)}
.split-t.in .w{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .split-t .w{opacity:1;transform:none;transition:none}
  .prepie__ondas i{animation:none}
  .plx__img{transform:none;top:0;height:100%}
}

/* ═══ RESPONSIVE ════════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  /* la ficha central deja de tener columna propia: pasa a ocupar todo el ancho */
  .tri{grid-template-columns:1fr 1fr}
  .tri__foco{grid-column:1 / -1;grid-row:1;min-height:clamp(300px,38vw,420px)}
  .tri__c--01{grid-column:1;grid-row:2}
  .tri__c--02{grid-column:2;grid-row:2}
  .tri__c--03{grid-column:1 / -1;grid-row:3;min-height:0}
  .logos{grid-template-columns:repeat(4,1fr)}
  .logo:nth-child(n){grid-column:span 2}
  .logo:nth-child(5){grid-column:span 4}
}
@media (max-width:860px){
  /* en móvil la foto deja de solaparse: etiqueta → cifra → foto, apiladas */
  .numlist__f{min-height:0;padding-block:clamp(1.5rem,5vw,2rem)}
  .numlist__v{justify-content:flex-start;padding-right:0;margin-top:.4rem;
    font-size:clamp(4.25rem,26vw,8rem)}
  .numlist__v i{margin-right:0}
  .numlist__fig{position:static;translate:none;width:100%;max-width:100%;
    aspect-ratio:16/10;margin-top:clamp(1rem,3vw,1.5rem)}
  .tri{grid-template-columns:1fr}
  .tri__foco,.tri__c--01,.tri__c--02,.tri__c--03{grid-column:1;grid-row:auto}
  .tri__claim{max-width:22ch}
  /* el titular y su bajada dejan de repartirse el ancho y se apilan */
  .hdx__h{flex-direction:column;align-items:flex-start;gap:1rem}
  .hdx__h h2,.hdx__h p{flex:1 1 auto}
  .logos{grid-template-columns:1fr 1fr}
  .logo:nth-child(n){grid-column:span 1;border-radius:var(--r-card);
    min-height:clamp(96px,26vw,130px)}
  .logo:nth-child(5){grid-column:span 2}
  .card{min-height:0}
  .card__b{flex-direction:column;align-items:flex-start;gap:1.5rem}
}

/* ═══ REJILLAS y piezas nuevas ══════════════════════════════════════════════ */
.rejilla-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.75rem,1vw,1.15rem)}
.rejilla-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.75rem,1vw,1.15rem)}
.card__n{display:block;font-family:var(--display);font-weight:var(--peso-display);font-size:var(--t-h4);letter-spacing:-.02em;
  line-height:1;color:var(--cielo);margin-bottom:.9rem}
.sup-bg .card__n{color:var(--navy)}
.sec--tight{padding-block:clamp(2.25rem,4vw,3.5rem)}
.split-t{display:block}

.plx__scrim{background:rgba(3,20,30,.55)}

@media (max-width:1080px){
  .rejilla-3{grid-template-columns:1fr 1fr}
  .rejilla-3>*:last-child{grid-column:1 / -1}
  .hdx__cuerpo{grid-template-columns:1fr;gap:clamp(1.75rem,3.5vw,2.5rem)}
  .hdx__mas{margin-inline:auto}
}
@media (max-width:860px){
  .rejilla-2,.rejilla-3{grid-template-columns:1fr}
  .rejilla-3>*:last-child{grid-column:auto}
}

/* Los titulares troceados en palabras crean inline-blocks cuyo min-content
   ignora el <br>: sin min-width:0 el flex item se niega a encoger. */
.hero__l,.hero__r,.split__l,.split__r,.shead__l,.shead__c{min-width:0}
.split-t{text-wrap:initial}
.split-t .w{max-width:100%}


/* Sobre una foto con parallax el fondo no es un color fijo, y aquí el velo es
   fino (55 %) para que la fotografía se vea. Acento y texto secundario suben de
   luminosidad lo justo para pasar AA sobre la zona más clara del agua. */
.plx .eb--c{color:#7EDCFF}
.plx .muted-d{color:#C8D6DF}

/* ═══ PARALLAX POTENTE ══════════════════════════════════════════════════════
   La foto recorre mucho más que el contenido y el bloque de texto avanza en
   sentido contrario: la imagen parece quedarse atrás mientras lees. */
.plx__img{
  position:absolute;left:0;top:-22%;width:100%;height:144%;z-index:-2;
  object-fit:cover;will-change:transform;
  transform:translate3d(0,var(--plx,0px),0) scale(var(--plxz,1));
}
.plx .wrap{transform:translate3d(0,var(--plxc,0px),0);will-change:transform}

/* ═══ OPINIONES · testimonio con eje de cita ════════════════════════════════
   Calcado del tablero de marca: el glifo de cita en naranja, un filete que
   baja desde él y remata en cruz, y el texto a la derecha. */
/* Dos columnas: a la izquierda todo el testimonio, alineado a la izquierda;
   a la derecha la fotografía, con la misma caja que las del equipo —mismo
   radio, misma pastilla naranja— porque es literalmente el mismo componente
   (.socio__fig + .socio__plus), no una copia. */
.opi__grid{
  display:grid;grid-template-columns:52% 40%;
  gap:clamp(2.5rem,5vw,4.5rem);justify-content:space-between;align-items:center;
}
.opi__t{text-align:left;max-width:14ch;margin-inline:0}
/* la foto manda el alto de la fila, así que se le pone techo para que no
   estire la sección más de lo que pide el texto de al lado */
.opi__foto{max-height:min(78svh,700px)}
.opi__foto img{height:100%;object-fit:cover}
.opi__c{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(1.25rem,2.4vw,2.25rem);
  max-width:none;margin:clamp(2rem,4vw,3.25rem) 0 0;
}
.opi__eje{
  grid-column:1;grid-row:1 / span 2;
  display:flex;flex-direction:column;align-items:center;
}
.opi__marca{
  font-family:var(--display);font-weight:var(--peso-display);
  font-size:var(--t-l);line-height:.66;
  color:var(--naran);
}
.opi__filete{flex:1 1 auto;width:1px;min-height:clamp(60px,9vw,120px);
  background:linear-gradient(180deg,var(--naran),rgba(225,70,2,.15));
  margin-top:clamp(.75rem,1.4vw,1.25rem)}
.opi__cruz{position:relative;width:13px;height:13px;flex:0 0 auto}
.opi__cruz::before,.opi__cruz::after{content:"";position:absolute;
  background:var(--naran)}
.opi__cruz::before{left:50%;top:0;width:1px;height:100%;translate:-50% 0}
.opi__cruz::after{top:50%;left:0;height:1px;width:100%;translate:0 -50%}

.opi__q{grid-column:2;grid-row:1;margin:0}
.opi__q p{font-size:var(--t-lead);line-height:1.28;letter-spacing:-.02em;
  text-wrap:pretty}
.opi__q p::after{content:"\201D";color:var(--naran);margin-left:.18em;
  font-family:var(--display);font-size:1.3em;line-height:0;
  vertical-align:-.12em}
.opi__f{
  grid-column:2;grid-row:2;
  margin-top:clamp(1.5rem,2.6vw,2.5rem);text-align:left;
  display:flex;flex-direction:column;gap:.1rem;
}
.opi__n{font-weight:600}
.opi__r,.opi__e{font-size:var(--t-micro);color:var(--gris)}
.opi__e{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;margin-top:.25rem}

/* ═══ CLAIM · el texto se llena de agua y el agua sigue al puntero ══════════
   Dos capas del mismo texto: la de abajo es el fantasma y la de arriba lleva
   el degradado recortado con background-clip:text. El nivel del agua y el
   foco de luz son dos custom properties que mueve el JS. */
.agua{
  position:relative;overflow:hidden;isolation:isolate;background:var(--prof);
  padding-block:clamp(3.5rem,9vw,8rem);
  --mx:50%;--my:60%;--nivel:54%;
}
/* La sección de antes acaba en el agua oscura del iceberg y esta arranca con
   el lienzo animado: sin esto se ve el corte. El degradado va por encima del
   lienzo (z-index 1) pero el titular se pinta después, así que no lo toca. */
.agua::before{
  content:"";position:absolute;left:0;right:0;top:0;z-index:1;
  height:clamp(150px,26vh,380px);pointer-events:none;
  /* el negro de arranque es el que mide la foto del iceberg en su borde
     inferior (#00040C): así los dos planos se dan la mano en el mismo tono */
  background:linear-gradient(180deg,
    #00040C 0%,rgba(0,4,12,.9) 22%,rgba(0,4,12,.62) 48%,
    rgba(0,4,12,.28) 74%,transparent 100%);
}
/* fondo animado de UnicornStudio. El velo de encima es lo que garantiza que
   el titular se siga leyendo pase lo que pase en el lienzo. */
.agua__aura{position:absolute;inset:0;z-index:0}
.agua__aura>div{position:absolute;inset:0;width:100%;height:100%}
.agua__aura::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(3,20,30,.58)}
.agua__t{z-index:1}
.agua__t{
  position:relative;margin:0;padding-inline:clamp(1rem,2.5vw,2rem);
  text-align:center;
  font-family:var(--display);font-weight:var(--peso-display);
  /* el titular ocupa el ancho entero: la línea más larga («Transformar.»)
     casi toca los márgenes */
  font-size:var(--t-xl);
  line-height:.8;letter-spacing:-.06em;
  /* el fantasma, la parte que aún no ha cubierto el agua. Va más claro de lo
     que pediría un fondo plano porque detrás hay un lienzo animado con
     zonas claras: junto con el velo del aura, mantiene el titular legible
     en cualquier fotograma */
  color:rgba(214,230,239,.66);
  text-wrap:balance;
}
.agua__t::after{
  content:attr(data-agua);
  position:absolute;inset:0;padding-inline:inherit;
  background:
    radial-gradient(44% 48% at var(--mx) var(--my),
      rgba(170,240,255,.98) 0%,rgba(0,178,240,.9) 36%,transparent 76%),
    repeating-linear-gradient(101deg,
      rgba(255,255,255,0) 0,rgba(255,255,255,.07) 15px,
      rgba(255,255,255,0) 32px,rgba(255,255,255,0) 52px),
    linear-gradient(180deg,
      transparent 0 calc(var(--nivel) - 2.5%),
      rgba(175,240,255,.95) var(--nivel),
      rgba(0,178,240,.95) calc(var(--nivel) + 7%),
      rgba(0,120,190,.98) calc(var(--nivel) + 26%),
      #0A5285 100%);
  background-size:auto, 220% 100%, auto;
  background-position:center, var(--caustica,0%) center, center;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  pointer-events:none;
}

/* «Transformar.» es una sola palabra de doce letras. Al escalón display-xl de
   la referencia —que allí solo lleva «250+»— se sale de la pantalla en móvil,
   y no hay división de línea que lo salve. Lleva su propio par vw/px, con el
   mismo techo de 99,23 px que la referencia. */
@media (max-width:1100px){
  .agua__t{font-size:min(16.4vw,99.23px)}
}

@media (max-width:1080px){
  /* en columna la foto va debajo, entera y sin techo de alto */
  .opi__grid{grid-template-columns:1fr;gap:clamp(2.5rem,6vw,3.5rem)}
  .opi__t{max-width:20ch}
  .opi__foto{max-height:none}
  .opi__foto img{height:auto}
}

@media (max-width:860px){
  /* dos columnas de preguntas no caben en un móvil: vuelven a una */
  .faq--dos{grid-template-columns:1fr}
}

/* ⚠ Este archivo se carga DESPUÉS de heliox.css, así que el bloque de
   revisión vive aquí: muchas de las reglas que sobreescribe están
   definidas en este mismo archivo y, a igualdad de especificidad,
   ganaba siempre la de componentes. */

/* ═══════════════════════════════════════════════════════════════════════
   REVISIÓN · septiembre 2026
   Cambios pedidos sobre la v2-tipografías. Van al final, después de la
   media query de impresión, para no reordenar nada de lo anterior: todo
   lo de aquí es sobreescritura consciente de reglas que están más arriba.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · CURSIVA DE MARCA ───────────────────────────────────────────────
   Funnel Display no tiene itálica (el @font-face declara font-style:normal
   para todo el rango de pesos), así que poner font-style:italic sobre ella
   daría una oblicua sintética: el navegador inclina los contornos y las
   curvas se deforman. La cursiva se hace con IBM Plex Sans Italic, que sí
   es un trazado real y ya es el recurso de cursiva del sitio (.shead__c).
   El peso se iguala al del display para que no cante como pieza más fina. */
.cursiva,.cursiva-ac{
  font-family:var(--sans);
  font-style:italic;
  font-weight:var(--peso-display);
  /* Plex es más estrecha y de ojo menor que Funnel a igualdad de cuerpo:
     se compensa para que las dos mitades del titular pesen lo mismo. */
  font-size:1.04em;
  letter-spacing:-.03em;
}
/* Cuando la cursiva convive en el MISMO renglón con el display —el hero:
   «más» en Funnel Display y la palabra que muta en Plex Italic— las dos
   cajas se alinean por arriba, no por línea base: la caja que muta no tiene
   contenido en flujo (el JS saca las palabras del flujo para superponerlas)
   y `align-items:baseline` no tendría a qué agarrarse. Al alinear por
   arriba, la diferencia de métricas entre las dos fuentes deja la cursiva
   3,15 px por debajo del display.
   ⚠ MEDIDO EN CANVAS; hay que rehacerlo si se cambia cualquiera de las dos
   fuentes o el 1.04em de arriba. A 90,3 px de Funnel 600 la línea base cae
   a 74,86 px del borde de la caja; a 93,9 px de Plex Italic 600, a 78,01.
   Diferencia 3,15 px = 0,0336em del cuerpo de la cursiva. */
.hero__morph.cursiva{margin-top:-.0336em}
/* ⚠ Y LA CURSIVA HAY QUE BAJARLA HASTA LA LETRA. El JS parte la palabra en
   un <i> por carácter para escalonar la animación, y más arriba está
   `.hero__morph-w i{font-style:normal}` —que existe porque <i> es cursiva
   por defecto en el navegador y el diseño original no la quería—. Esa regla
   pisa la del contenedor justo en los glifos visibles: sin esto el bloque
   computa `italic` pero cada letra se dibuja recta. */
.hero__morph.cursiva .hero__morph-w i{font-style:italic}

/* La variante acentuada lleva el azul claro del punto de la i del logotipo.
   ⚠ NO es el hex literal de marca. --cielo (#00A3E0) da 2,87:1 sobre blanco
   y el mínimo para texto grande es 3:1, así que «mojan» se quedaba corto en
   la sección de socios. Bajado un punto de luminosidad —mismo tono, misma
   saturación, diferencia imperceptible— pasa a 3,01:1 sobre blanco y 4,52:1
   sobre el azul del pie, que es donde vive «mojarse». El #00A3E0 original
   sigue intacto para todo lo decorativo. */
:root{--cielo-ac:#009FDB}
.cursiva-ac{color:var(--cielo-ac)}
.h2s .cursiva-ac{font-size:1.02em}

/* ── 2 · HERO ───────────────────────────────────────────────────────────
   Sin flecha de bajada y con la mezcla pegada: el hero deja de ocupar casi
   la pantalla entera y suelta el padding inferior, que era lo que abría el
   hueco muerto entre el titular y las tres perspectivas. */
.hero{
  min-height:min(76svh,820px);
  padding-block:clamp(7rem,14vh,10rem) clamp(2.5rem,5vh,4rem);
}
/* «Consultores que van» mide 698 px a 1424 de viewport y la columna
   izquierda daba 697: se partía por 0,8 px y dejaba «van» solo en una
   línea. La columna pasa de 58 a 62 % y la de la derecha cede lo justo. */
/* ⚠ Acotado a partir de 1281 px. Sin la media query esta regla ganaba
   también a las de heliox.css de 1280 y 1080 —este archivo carga después—,
   y en móvil el descriptor se quedaba en una columna del 32 %. */
@media (min-width:1281px){
  .hero__l{flex:0 1 62%}
  .hero__r{flex:0 1 32%}
}
/* la máscara del velo se recalcula al nuevo alto: el corte tiene que
   seguir cayendo por debajo del H1, que ahora ocupa más proporción */
.hero__scrim{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 100%);
}
/* la corrección óptica de «Consultores» seguía siendo válida: la línea
   arranca con la misma C de Funnel Display 600 */

/* ── 3 · LA MEZCLA, MÁS ARRIBA ──────────────────────────────────────────
   Fuera el descriptor y su filete, y fuera el padding superior de la
   sección: el bloque de las tres perspectivas sube hasta quedar a un
   respiro del hero, que es lo pedido. */
.tri-sec--lienzo{padding-block:0 var(--sec)}

/* ── 4 · ÍNDICE DE SOCIOS CLICABLE ──────────────────────────────────────
   Los 01/02 dejan de ser decoración: son botones. Se mantiene el aspecto
   exacto que tenían (el <button> se desnuda por completo) y se les da
   área táctil de 44 px y foco visible, que un <li> muerto no tenía. */
.socios-idx li button{
  appearance:none;background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;letter-spacing:inherit;
  display:flex;align-items:center;min-height:44px;
  cursor:pointer;
}
.socios-idx li button:focus-visible{
  outline:2px solid var(--cielo);outline-offset:4px;border-radius:2px;
}
/* el subrayado que marcaba el activo vivía en el ::after del li: sigue ahí,
   pero ahora se alinea con la caja del botón, más alta */
.socios-idx li{align-items:center}
.socios-idx li:hover{opacity:.85}

/* ── 5 · MÉTODO HIDEOX ──────────────────────────────────────────────────
   a) El titular va en dos líneas por <br>, así que no necesita el reparto
      56/36 ni el filete: la cabecera pasa a columna y el descriptor cae
      justo debajo del titular, que es lo pedido.
   b) Los arcos naranjas: estaban dimensionados en vw con aspect-ratio,
      lo que los hacía círculos, pero anclados en % del alto de la sección,
      que cambia con el contenido; al recortarlos la sección se leían como
      elipses. Ahora se anclan en px desde la esquina y el par de abajo a
      la derecha —el que estaba bien— marca el patrón para el de arriba.
   c) La cruz de registro estaba en una posición fija sin relación con
      ningún arco. Ahora se coloca sobre la circunferencia del arco
      pequeño: se calcula con el radio, a 45° del centro, que es donde la
      pone el manual. */
.hdx__h{
  display:block;
  border-bottom:0;
  padding-bottom:0;
}
.hdx__h h2{max-width:none}
.hdx__h p{
  max-width:52ch;
  margin-top:clamp(1rem,1.8vw,1.5rem);
  font-size:var(--t-body);line-height:1.45;
}

/* Arcos: círculos perfectos y concéntricos por pares. El tamaño lo fija
   --r (el radio) y todo lo demás se deriva de él, así que el par nunca se
   descentra ni al cambiar el viewport. */
.hdx__arco{
  width:var(--r);height:var(--r);aspect-ratio:auto;
  border-radius:50%;
  inset:auto;
}
/* par de arriba a la izquierda · centro común en (--cx,--cy) */
.hdx__arco--1{--r:min(52vw,660px);top:calc(var(--cy) - var(--r)/2);
  left:calc(var(--cx) - var(--r)/2)}
.hdx__arco--2{--r:min(30vw,380px);top:calc(var(--cy) - var(--r)/2);
  left:calc(var(--cx) - var(--r)/2)}
.hdx__arco--1,.hdx__arco--2{--cx:2%;--cy:-40px}
/* par de abajo a la derecha · el que ya estaba bien, ahora concéntrico */
.hdx__arco--3{--r:min(52vw,660px);bottom:calc(var(--cy) - var(--r)/2);
  right:calc(var(--cx) - var(--r)/2)}
.hdx__arco--4{--r:min(30vw,380px);bottom:calc(var(--cy) - var(--r)/2);
  right:calc(var(--cx) - var(--r)/2)}
.hdx__arco--3,.hdx__arco--4{--cx:6%;--cy:-30px}


/* El «+» circulado: el trazo se centraba con translate sobre una caja de
   1,5 px, que caía en medio píxel y lo dejaba descuadrado respecto al
   círculo. Se centra con inset:0 + margin:auto, que reparte el sobrante
   por igual y no depende de redondeos. */
.hdx__mas::before,.hdx__mas::after{
  top:auto;left:auto;inset:0;margin:auto;translate:none;
}
.hdx__mas::before{width:38%;height:1px}
.hdx__mas::after{width:1px;height:38%}

/* El logotipo pasa a ser el SVG de marca, no texto compuesto */
.hdx__marca{
  display:block;width:clamp(160px,15vw,220px);height:auto;
}

/* ── 6 · CLIENTES ───────────────────────────────────────────────────────
   Sin descriptor lateral y sin filete; y la costura con «Nuestro nombre»
   se cierra: esa sección ya abre con su propio aire. */
.shead--plain{border-bottom:0;padding-bottom:0}
#clientes{padding-bottom:clamp(3rem,5vw,4.5rem)}

/* ── 7 · PRE-PIE · el cierre se releva ──────────────────────────────────
   «no es consultoría.» ⇄ «es HeliOx.» con el mismo mecanismo de caja
   elástica del hero: la frase que sale se levanta, la que entra sube, y
   el ancho de la caja se anima entre las dos. Sin JS (o con «menos
   movimiento») se queda quieta en la primera, que se lee perfectamente. */
.prepie__fijo{display:block}
.prepie__rel{position:relative;display:inline-block;text-align:center}
.prepie__rel.is-listo{transition:width .62s var(--expo)}
.prepie__rel-w{font:inherit;color:inherit;white-space:nowrap}
.prepie__rel.is-listo .prepie__rel-w{
  position:absolute;left:50%;top:0;translate:-50% 0;
}
.prepie__rel.is-listo .prepie__rel-w.is-activa{position:relative;left:auto;
  translate:none}
.prepie__rel-w i{font-style:normal;display:inline-block;white-space:pre}
.prepie__rel.is-listo .prepie__rel-w i{
  opacity:0;transform:translateY(.42em);
  transition:opacity .34s var(--ease),transform .5s var(--expo);
}
.prepie__rel.is-listo .prepie__rel-w.is-activa i{opacity:1;transform:none}
.prepie__rel.is-listo .prepie__rel-w.is-sale i{
  opacity:0;transform:translateY(-.42em);
}
/* el titular ya no lleva dos botones debajo: se le devuelve el aire que
   ocupaban para que la sección no quede descompensada por abajo */
.prepie__t{max-width:18ch}
.prepie__p{margin-top:clamp(1.75rem,2.8vw,2.5rem)}

/* ── 8 · PIE ════════════════════════════════════════════════════════════
   Estructura de azumendiarquitectos.es sobre la paleta corporativa.
   El fondo deja de ser el casi-negro --prof y pasa a azul marino: es el
   --navy de marca llevado al fondo hasta que el blanco sobre él da 13,6:1
   (AA de sobra) sin perder la familia cromática. El pre-pie funde a ese
   mismo tono, de modo que el degradado entre sección y pie sigue sin
   costura, que es lo que había que conservar. */
:root{
  --ftr-fondo:#06304F;   /* blanco 13,61:1 · grisáceo 7,97:1 · cielo 4,74:1 */
  --ftr-marca:#0F4876;   /* 1,43:1 sobre el fondo: se adivina, no compite */
  --ftr-filete:rgba(183,201,211,.22);
}
.prepie{background:var(--ftr-fondo)}
.prepie::after{
  background:linear-gradient(180deg,rgba(6,48,79,0) 0%,rgba(6,48,79,.55) 42%,
    rgba(6,48,79,.88) 74%,var(--ftr-fondo) 100%);
}
.prepie__velo{
  background:
    linear-gradient(180deg,rgba(3,20,30,.92) 0%,rgba(3,20,30,.60) 26%,
      rgba(4,32,53,.58) 52%,rgba(6,48,79,.86) 78%,var(--ftr-fondo) 100%),
    linear-gradient(90deg,rgba(3,20,30,.45) 0%,rgba(3,20,30,0) 35%,
      rgba(3,20,30,0) 65%,rgba(3,20,30,.45) 100%);
}

.ftr{
  background:var(--ftr-fondo);color:#fff;
  padding-block:clamp(4rem,8vw,7rem) 0;   /* abajo cierra el logotipo */
  overflow:hidden;
}

/* 8.1 · banda de llamada: claim a la izquierda, formulario a la derecha */
.ftr__llamada{
  align-items:start;
  padding-bottom:clamp(3.5rem,7vw,6rem);
}
.ftr__t{
  font-family:var(--display);font-weight:var(--peso-display);
  font-size:var(--t-h2s);line-height:.95;letter-spacing:-.04em;
  max-width:14ch;
}

/* 8.2 · banda de servicio: descriptor, newsletter y dos columnas de enlaces */
/* Las dos bandas comparten la MISMA partición: mitad y mitad con el mismo
   gap. Así el par «¿Qué buscas?» + «Contáctanos» arranca y acaba justo
   donde el formulario de arriba, y las dos bandas quedan a escuadra. El
   vacío entre el descriptor y los enlaces no es un gap grande: es la
   mitad izquierda de la fila, que el descriptor no llena. */
.ftr__llamada,.ftr__servicio{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--ftr-gap);
}
:root{--ftr-gap:clamp(2.5rem,5vw,5rem)}
.ftr__servicio{padding-bottom:clamp(3rem,6vw,5rem)}
/* dentro de su mitad, las dos columnas de enlaces se reparten por igual */
.ftr__cols{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--ftr-gap);
}
.ftr__des p{
  color:var(--grisaz);font-size:var(--t-body);line-height:1.5;max-width:34ch;
}
.ftr__servicio h2{
  font-family:var(--display);font-weight:var(--peso-display);
  font-size:var(--t-h4);line-height:1.1;letter-spacing:-.02em;
  margin-bottom:.75rem;
}
.ftr__col .fnav,.ftr__col .fdir{display:flex;flex-direction:column}
.ftr__col .fdir span{color:var(--grisaz)}

/* 8.3 · cierre: filete a sangre, barra legal y logotipo */
.ftr__filete{
  border:0;height:1px;margin:0;
  background:var(--ftr-filete);
}
.fbase{
  display:flex;justify-content:space-between;align-items:center;
  gap:1.5rem;flex-wrap:wrap;
  padding-block:clamp(1.25rem,2.2vw,1.75rem);
  font-size:var(--t-s);color:var(--grisaz);
}
.fbase__legal{
  list-style:none;display:flex;gap:clamp(1rem,2.2vw,2rem);flex-wrap:wrap;
}
.fbase__legal a{
  display:flex;align-items:center;min-height:44px;
  color:var(--grisaz);text-decoration:none;
  transition:color .25s var(--ease);
}
.fbase__legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}

/* El logotipo a sangre cierra la página, como en la referencia: ancho
   completo, pegado al borde inferior y un punto más claro que el fondo.
   Es decorativo (aria-hidden), así que no tiene que cumplir contraste:
   justo lo contrario, tiene que quedarse en el umbral de lo perceptible. */
.ftr__pie{line-height:0;margin-top:clamp(1.5rem,4vw,3rem)}
.ftr__marca{
  display:block;width:100%;height:auto;
  color:var(--ftr-marca);
  /* se recorta por abajo un pelo para que el trazo muera en el borde
     en vez de dejar el aire propio del SVG */
  margin-bottom:calc(-1 * clamp(2px,.6vw,10px));
}

/* Responsive del pie */
@media (max-width:1080px){
  /* el descriptor pasa a ocupar la fila entera y los enlaces bajan debajo,
     ya repartidos en dos por su propio contenedor */
  .ftr__servicio{grid-template-columns:1fr;gap:2.5rem}
}
@media (max-width:860px){
  .ftr__llamada{grid-template-columns:1fr;gap:2.5rem}
  .ftr__t{max-width:none}
  .ftr__servicio,.ftr__cols{grid-template-columns:1fr;gap:2.5rem}
  .fbase{flex-direction:column;align-items:flex-start;gap:.25rem}
}

/* ═══════════════════════════════════════════════════════════════════════
   VARIANTE «HERO BLANCO»
   Los dos primeros paños —el hero y la mezcla, que comparten el mismo
   lienzo WebGL— se dan la vuelta: papel blanco, tinta oscura y el fondo
   animado en grises. Del tercer paño (los socios) en adelante no cambia
   absolutamente nada.

   Todo va colgado de .zona-lienzo, que es justo el contenedor de esos dos
   paños: así ninguna regla se escapa al resto de la página.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── El papel ───────────────────────────────────────────────────────── */
.zona-lienzo{background:var(--sup);color:var(--prof)}
.zona-lienzo__gl{background:var(--sup)}

/* Plan B sin WebGL: el mismo reparto, en estático y en gris */
.zona-lienzo--plano .zona-lienzo__gl{
  background:
    radial-gradient(120% 60% at 72% 26%,rgba(3,20,30,.06) 0%,transparent 62%),
    linear-gradient(102deg,#FFFFFF 0%,#F4F6F8 42%,#E9EDF1 70%,#FFFFFF 100%);
}

/* ── Los velos, al revés ────────────────────────────────────────────────
   Eran negros para levantar texto blanco; ahora son blancos para levantar
   texto oscuro. Se conservan los mismos cortes y las mismas paradas: la
   máscara que mata el velo del hero antes del borde sigue haciendo falta,
   porque la costura con la mezcla se vería igual. */
.zona-lienzo .hero__scrim{
  background:linear-gradient(102deg,rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.62) 46%,rgba(255,255,255,.20) 100%);
}
.zona-lienzo .tri-sec--lienzo .tri-sec__scrim{
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,
    rgba(255,255,255,.52) 10%,rgba(255,255,255,.66) 36%,
    rgba(255,255,255,.74) 70%,rgba(255,255,255,.94) 100%);
}

/* ── La tinta ───────────────────────────────────────────────────────── */
.zona-lienzo .hero h1,
.zona-lienzo .hero__p,
.zona-lienzo .card__t,
.zona-lienzo .tri__claim{color:var(--prof)}
.zona-lienzo .hero__sub,
.zona-lienzo .muted-d,
.zona-lienzo .tri__n{color:var(--gris)}

/* ── Las tarjetas ────────────────────────────────────────────────────────
   ⚠ NO son una tinta al 4 % como las de .sup-bg, y la diferencia es de
   contraste, no de gusto. En el resto de la página esas tarjetas se apoyan
   en un fondo plano; aquí se apoyan en el lienzo, que en su banda más
   oscura llega a rgb(92,99,107). Y la mezcla arranca justo en la costura
   con el hero, donde el velo vale 0 a propósito —si no valiera 0 se vería
   una raya horizontal—, así que ahí no hay nada que las levante.
   Con una tinta al 4 % el cuerpo gris de las tarjetas se quedaba en
   1,11:1 contra ese peor fotograma. Un blanco al 76 % lo sube a 5,01:1 y
   el titular a 13,30:1, y de paso convierte las tarjetas en papel opaco
   sobre el patrón, que es lo que pide una maqueta en blanco.
   El filete hace el resto: sin él, sobre las bandas claras del lienzo la
   tarjeta perdía el borde. */
.zona-lienzo .card{
  background:rgba(255,255,255,.76);
  border:1px solid rgba(3,20,30,.07);
}
.zona-lienzo .card:hover{background:rgba(255,255,255,.88)}
/* el punto gris claro desaparecía sobre la tarjeta clara */
.zona-lienzo .card__dot--claro{background:var(--acero)}

/* ── La ficha de la foto ─────────────────────────────────────────────────
   Es el único sitio donde hay fotografía en estos dos paños. Con un velo
   blanco alto la imagen no se pierde: se queda en clave alta, como un
   papel impreso a una tinta, y deja pasar texto oscuro encima. El 0.88 no
   es decorativo: por debajo de 0.84 el claim no llegaba a 4,5:1 contra las
   zonas más oscuras de la cueva. */
.zona-lienzo .tri__foco::after{
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.92));
}

/* ── Los botones ─────────────────────────────────────────────────────────
   .btn--sup es blanco sobre oscuro y .btn--linea-claro es blanco calado:
   los dos desaparecen sobre papel. Pasan a sus equivalentes oscuros sin
   tocar el marcado, que sigue siendo el mismo archivo para las dos webs. */
.zona-lienzo .btn--sup{background:var(--navy);color:var(--blanco)}
.zona-lienzo .btn--sup:hover{background:var(--prof)}
.zona-lienzo .btn--linea-claro{color:var(--navy);border-color:rgba(0,75,135,.45)}
.zona-lienzo .btn--linea-claro:hover{background:rgba(0,75,135,.07)}

/* ── La cabecera ─────────────────────────────────────────────────────────
   La píldora es blanca y flota sobre lo que haya debajo: sobre el hero
   oscuro se recortaba sola, sobre papel blanco se volvía invisible. Un
   filete de 1 px la devuelve al sitio sin convertirla en una caja. */
.hdr__in{border:1px solid rgba(3,20,30,.08)}
.hdr.is-stuck .hdr__in{border-color:rgba(3,20,30,.12)}

/* ── Responsive ──────────────────────────────────────────────────────────
   Por debajo de 1080 px el hero pierde el min-height y el velo del hero se
   queda corto para el titular; se cierra un punto. */
@media (max-width:1080px){
  .zona-lienzo .hero__scrim{
    background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.78) 55%,rgba(255,255,255,.30) 100%);
  }
}

/* ═══ HERO CON VÍDEO · v4 ═════════════════════════════════════════════════
   El hero lleva su propio vídeo (hero-v4-heliox.mp4), SIN velo: se ve limpio.
   Tapa el lienzo WebGL solo en el alto del hero; la mezcla sigue sobre el
   lienzo claro. Sin velo, la tinta vuelve a blanco: el vídeo es de tonos
   medios (mar verdoso y arena) y la tinta oscura no se leería encima. */
.hero--video{isolation:isolate;background:var(--prof)}
.hero__vid{position:absolute;inset:0;z-index:-1;width:100%;height:100%;
  object-fit:cover;object-position:center;background:var(--prof)}
.zona-lienzo .hero--video h1,
.zona-lienzo .hero--video .hero__p{color:#fff}
.zona-lienzo .hero--video .hero__sub{color:rgba(255,255,255,.86)}
.hero--video .hero__p strong{font-weight:600;color:#fff}
.hero__acc{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.zona-lienzo .hero--video .btn--sup{background:#fff;color:var(--prof)}
.zona-lienzo .hero--video .btn--sup:hover{background:var(--sup)}
.zona-lienzo .hero--video .btn--linea-claro{color:#fff;border-color:rgba(255,255,255,.6)}
.zona-lienzo .hero--video .btn--linea-claro:hover{background:rgba(255,255,255,.1)}
.hero--video :focus-visible{outline-color:#fff}
.zona-lienzo .hero--video .btn--linea-claro{background:rgba(3,20,30,.38)}
.zona-lienzo .hero--video .btn--linea-claro:hover{background:rgba(3,20,30,.52)}

/* ═══ 2 · LA MEZCLA · la O como ojo de buey · v4 ══════════════════════════
   Sale del moodboard: la O de HeliOx es una ventana ovalada que deja ver la
   foto de fondo, y el claim va debajo. Toda la sección en marino; las tres
   perspectivas flotan alrededor en un marino un punto más claro.

   Contraste (medido con contraste.py):
     blanco   sobre fondo #05213A  16,34:1 · sobre tarjeta #092C4A 14,28:1
     grisaz   sobre fondo           9,58:1 · sobre tarjeta          8,37:1
     #8DBFE8  (la O) sobre tarjeta  7,31:1 → sirve para los números
     cielo    solo en los puntos decorativos */
.ojo-sec{
  --ojo-fondo:#05213A;
  --ojo-carta:#092C4A;
  --ojo-anillo:#8DBFE8;
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--ojo-fondo);color:#fff;
  /* mucho más aire arriba: el hero ya no se come a la mezcla */
  padding-block:clamp(7rem,12vw,12.5rem) clamp(6rem,10vw,10rem);
}
.ojo-sec :focus-visible{outline-color:var(--ojo-anillo)}

.ojo-grid{
  display:grid;
  grid-template-columns:.92fr 1.16fr .92fr;
  grid-template-areas:
    "c1 centro ."
    ".  centro c2"
    ".  c3     .";
  column-gap:clamp(1.5rem,3.5vw,4rem);
  align-items:start;
}
.ojo-centro{grid-area:centro;display:flex;flex-direction:column;align-items:center;
  text-align:center}

/* ── La O ──────────────────────────────────────────────────────────────────
   Dos óvalos: el de fuera es el anillo; el de dentro, la ventana. El trazo
   de una O de imprenta es grueso en los lados y fino arriba y abajo, así que
   la ventana se mete un 17 % por los lados y solo un 3,5 % por arriba. */
.ojo{
  position:relative;width:min(100%,clamp(250px,27vw,430px));aspect-ratio:4/5.1;
  border-radius:50%;background:var(--ojo-anillo);
}
.ojo__ventana{
  position:absolute;inset:3.5% 17%;border-radius:50%;overflow:hidden;
  background:var(--prof);
  /* Safari recorta mal un overflow:hidden con radio si el hijo se mueve */
  -webkit-mask-image:-webkit-radial-gradient(white,black);
}
.ojo__ventana img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
@media (prefers-reduced-motion:no-preference){
  .ojo__ventana img{translate:0 var(--py,0);scale:var(--sc,1.1);
    will-change:translate,scale}
}

.ojo__claim{
  margin-top:clamp(1.75rem,3vw,3rem);
  font-family:var(--display);font-weight:var(--peso-display);
  font-size:clamp(2.1rem,3.7vw,4.25rem);line-height:1.02;letter-spacing:-.03em;
  max-width:15ch;color:#fff;text-wrap:balance;
}
.ojo-centro .btn{margin-top:clamp(1.75rem,2.6vw,2.5rem)}
.ojo-sec .btn--linea-claro{color:#fff;border-color:rgba(141,191,232,.55)}
.ojo-sec .btn--linea-claro:hover{background:rgba(141,191,232,.12)}

/* ── Las tres perspectivas, flotando ──────────────────────────────────────
   Un marino más claro que el fondo, una sombra larga hacia abajo y un
   vaivén lento, cada una a su ritmo: se leen como piezas suspendidas
   alrededor de la O, no como un grid. El vaivén va en `transform` y el
   parallax del scroll en `translate`: no se pisan. */
.flota{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(1.6rem,2.3vw,2.6rem);
  border-radius:var(--r-card,22px);
  background:var(--ojo-carta);
  border:1px solid rgba(141,191,232,.12);
  /* sombra apenas insinuada: sobre marino, cualquier negro denso se lee
     como un agujero, no como algo que flota */
  box-shadow:0 28px 56px -32px rgba(0,8,20,.32),0 6px 14px -10px rgba(0,8,20,.18);
  min-height:clamp(220px,17vw,280px);
}
.flota--01{grid-area:c1;margin-top:clamp(2rem,7vw,7.5rem)}
.flota--02{grid-area:c2;margin-top:clamp(0rem,2vw,2rem)}
.flota--03{grid-area:c3;margin-top:clamp(3rem,5vw,5rem);width:100%;max-width:30rem;
  justify-self:center;min-height:0}
.flota__n{font-family:var(--sans);font-weight:600;font-size:max(13px,var(--t-micro));
  letter-spacing:.02em;color:var(--ojo-anillo);margin-bottom:auto}
.flota__t{margin-top:clamp(2rem,3.5vw,3.25rem);
  font-family:var(--display);font-weight:var(--peso-display);font-size:var(--t-h4);
  line-height:1;letter-spacing:-.02em;color:#fff}
.flota__p{margin-top:.7rem;font-size:max(16px,var(--t-s));line-height:1.55;
  color:var(--grisaz);max-width:40ch}

@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:no-preference){
  .flota{animation:flotar 7s ease-in-out infinite;
    translate:var(--px,0) var(--py,0);will-change:transform,translate}
  .flota--02{animation-duration:8.5s;animation-delay:-3s}
  .flota--03{animation-duration:7.8s;animation-delay:-5.5s}
}

@media (max-width:1080px){
  .ojo-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"centro centro" "c1 c2" "c3 c3";
    row-gap:clamp(1rem,2.5vw,1.5rem);
  }
  .ojo-centro{margin-bottom:clamp(2.5rem,6vw,4rem)}
  .flota--01,.flota--02,.flota--03{margin-top:0}
  .flota--03{max-width:none}
}
@media (max-width:640px){
  .ojo-grid{grid-template-columns:1fr;grid-template-areas:"centro" "c1" "c2" "c3"}
  .ojo{width:min(78vw,340px)}
  .flota{min-height:0}
}
/* apiladas, el parallax de cada tarjeta a su velocidad descuadra los huecos
   entre ellas: por debajo de 1080 px solo queda el vaivén */
@media (max-width:1080px){.flota{translate:none!important}}

/* ═══ 3 · EQUIPO · v4 ══════════════════════════════════════════════════════
   Titular + foto del equipo andando, y debajo el carrusel de retratos. En
   escritorio las dos partes viven en UNA pantalla: la sección entera se
   queda fija mientras dura la pista y el scroll solo mueve a las personas.
   La fila es circular: el JS pone copias a los dos lados, así que a la
   izquierda de la primera persona siempre asoman las últimas.
   Contraste sobre blanco: tinta 18,71:1 · bio (--gris) 7,04:1 · cargo
   (--naran-txt) 5,99:1. El naranja de marca (4,14:1) va solo en el filete. */
.equipo-sec{position:relative;background:var(--sup);
  --suave:cubic-bezier(.45,0,.2,1)}   /* entra y sale despacio: sin tirones */
.equipo-fijo{padding-block:var(--sec)}
.equipo-intro{
  display:grid;grid-template-columns:36% 58%;justify-content:space-between;
  align-items:end;gap:clamp(2rem,4vw,4rem);
}
.equipo-txt{padding-bottom:clamp(.25rem,1vw,1rem)}
.equipo-foto{margin:0;overflow:hidden;border-radius:var(--r-card)}
.equipo-foto img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 62%;
  transform-origin:50% 60%}

/* ── el carrusel ──────────────────────────────────────────────────────── */
.carrusel{margin-top:clamp(3rem,6vw,6rem)}
.carrusel__fila{
  /* sin JS: medidas razonables; con JS se sustituyen por píxeles exactos */
  --s:150px;--b:340px;--i:300px;--g:16px;--x:0px;
  list-style:none;margin:0;padding:0;
  display:flex;align-items:flex-end;gap:var(--g);
  width:max-content;
  transform:translateX(var(--x));
  transition:transform 1.05s var(--suave);
}
.carrusel__fila.sin-trans,.carrusel__fila.sin-trans *{transition:none!important}
.miembro{display:flex;align-items:flex-start;gap:0;transition:gap .95s var(--suave)}
.miembro.is-activo{gap:var(--g)}

.miembro__foto{
  appearance:none;border:0;padding:0;margin:0;background:none;cursor:pointer;
  display:block;flex:0 0 auto;width:var(--s);aspect-ratio:4/5;
  border-radius:var(--r-card);overflow:hidden;
  transition:width .95s var(--suave);
}
.miembro.is-activo .miembro__foto{width:var(--b);cursor:default}
.miembro__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;
  filter:grayscale(1);opacity:.78;
  transition:filter .9s var(--suave),opacity .9s var(--suave),scale .6s var(--ease)}
.miembro__foto:hover img{opacity:1;scale:1.03}
.miembro.is-activo .miembro__foto img{filter:none;opacity:1;scale:1}
.miembro__foto:focus-visible{outline:2px solid var(--navy);outline-offset:4px}

/* la ventana: se abre a la derecha de la foto, pegada arriba */
.miembro__info{
  flex:0 0 auto;width:0;height:0;overflow:hidden;
  opacity:0;visibility:hidden;
  transition:width .95s var(--suave),opacity .3s var(--ease),visibility 0s .95s;
}
.miembro.is-activo .miembro__info{
  width:var(--i);height:auto;opacity:1;visibility:visible;
  transition:width .95s var(--suave),opacity .6s .45s var(--ease),visibility 0s;
}
.miembro__info > *{width:var(--i)}
.miembro__n{font-size:max(12px,var(--t-micro));font-weight:600;letter-spacing:.18em;
  color:var(--gris);padding-top:.35rem}
.miembro__bio{margin-top:clamp(.9rem,1.4vw,1.35rem);font-size:max(16px,var(--t-body));
  line-height:1.6;color:var(--gris);max-width:34ch;text-wrap:pretty}
.miembro__filete{display:block;width:44px!important;height:2px;background:var(--naran);
  margin-top:clamp(1.1rem,1.8vw,1.6rem)}
.miembro__nom{margin-top:clamp(.9rem,1.3vw,1.15rem);font-family:var(--display);
  font-weight:var(--peso-display);font-size:var(--t-h4);line-height:1.05;
  letter-spacing:-.02em;color:var(--prof)}
.miembro__cargo{margin-top:.45rem;font-size:max(12px,var(--t-micro));font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--naran-txt)}
/* las copias de los lados solo existen con JS y solo en escritorio */
.miembro--copia{display:none}

/* ── modo pista: escritorio, con movimiento y con alto suficiente ────────
   Una sola pantalla: arriba titular + foto, abajo el carrusel. La foto del
   grupo se aplana a banda para dejar sitio al carrusel. */
@media (min-width:1081px){
  .equipo-sec.is-fijo .miembro--copia{display:flex}
  .equipo-sec.is-fijo .equipo-pista{height:var(--pista,400svh)}
  .equipo-sec.is-fijo .equipo-fijo{
    position:sticky;top:0;height:100svh;overflow-x:clip;
    /* anclado ARRIBA, no centrado: si el bloque se centrara, cada cambio de
       alto del carrusel recolocaría también el titular y la foto */
    display:flex;flex-direction:column;justify-content:flex-start;
    padding-block:calc(var(--hdr-h,74px) + var(--aire-sup,3svh)) 0;
  }
  /* en banda se ve solo la mitad de la foto: el encuadre sube hasta dejar
     las cabezas dentro y corta por las rodillas */
  .equipo-sec.is-fijo .equipo-foto img{aspect-ratio:auto;height:var(--foto-h,30svh);
    object-position:50% 36%;transform-origin:50% 40%}
  /* el carrusel mide siempre lo que el retrato grande: cambiar de persona
     (bios de distinta longitud) no altera el alto de nada */
  .equipo-sec.is-fijo .carrusel{margin-top:var(--hueco,7svh);height:var(--alto-c,420px);
    display:flex;align-items:flex-end}
  .equipo-sec.is-fijo .carrusel__marco{width:100%}
  /* la fila sangra hasta los bordes de la pantalla: la vuelta se ve entera */
  .equipo-sec.is-fijo .carrusel__marco{overflow:visible}
}

@media (prefers-reduced-motion:reduce){
  .carrusel__fila,.miembro,.miembro__foto,.miembro__info,.miembro__foto img{transition:none}
}

/* ── tablet y móvil: sin pista. Las fotos en fila y debajo la ventana de
   la persona activa, a todo el ancho ─────────────────────────────────── */
@media (max-width:1080px){
  .equipo-intro{grid-template-columns:1fr;align-items:start}
  .equipo-txt{padding-bottom:0}
  .carrusel__marco{overflow:hidden}
  .carrusel__fila{
    display:grid;grid-template-columns:repeat(4,1fr);width:auto;transform:none;
    column-gap:clamp(.5rem,2vw,1rem);row-gap:clamp(1.5rem,4vw,2.25rem);align-items:end;
  }
  .miembro{display:contents}
  .miembro__foto,.miembro.is-activo .miembro__foto{width:100%;grid-row:1}
  .miembro__info{grid-row:2;grid-column:1 / -1;width:auto;height:auto;display:none}
  .miembro.is-activo .miembro__info{display:block;width:auto}
  .miembro__info > *{width:auto}
  .miembro__bio{max-width:52ch}
}
/* `.miembro{display:contents}` de móvil pisaba a `.miembro--copia` y las
   copias (creadas si la página se abrió en escritorio) salían en la fila */
.equipo-sec:not(.is-fijo) .miembro--copia{display:none!important}

/* ═══ 5 · HIDEOX EN SEIS COLUMNAS · v4 ═════════════════════════════════════
   Seis columnas entre filetes de 1 px, con la palabra en vertical. La activa
   (hover o foco) se llena de naranja, la palabra pasa a horizontal con su
   descripción y debajo se enciende su letra: en fila, las seis letras
   deletrean HIDEOX.
   Contraste: blanco sobre el naranja de marca #E14602 da 4,14:1 y NO llega
   para la descripción. El panel va en #C63D02 (5,16:1), un punto más
   oscuro; el #E14602 original queda para las letras, que son decorativas. */
.hdc-lista{
  --hdc-panel:#C63D02;
  list-style:none;margin:clamp(3rem,6vw,6rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);
}
.hdc{display:flex;flex-direction:column;align-items:stretch;
  border-right:1px solid rgba(183,201,211,.3)}
.hdc:first-child{border-left:1px solid rgba(183,201,211,.3)}

.hdc__col{
  appearance:none;border:0;margin:0;background:none;color:#fff;cursor:pointer;
  font:inherit;text-align:left;
  position:relative;display:block;width:100%;
  height:clamp(360px,34vw,540px);padding:0;
}
/* la palabra en vertical, leyendo de abajo arriba, apoyada abajo */
.hdc__vert{
  position:absolute;left:50%;bottom:clamp(1.25rem,2vw,2rem);
  writing-mode:vertical-rl;rotate:180deg;translate:-50% 0;
  font-family:var(--display);font-weight:var(--peso-display);
  font-size:clamp(1.9rem,3.5vw,3.75rem);line-height:.95;letter-spacing:-.01em;
  text-transform:uppercase;white-space:nowrap;
  transition:opacity .45s var(--ease);
}
/* el panel naranja: ocupa la columna entre filetes */
.hdc__panel{
  position:absolute;inset:0 clamp(6px,.7vw,12px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(1.1rem,1.6vw,1.6rem);
  background:var(--hdc-panel);
  opacity:0;clip-path:inset(100% 0 0 0);
  transition:clip-path .6s var(--expo),opacity .3s var(--ease);
}
.hdc__t{font-family:var(--display);font-weight:var(--peso-display);
  font-size:clamp(1.1rem,1.5vw,1.6rem);line-height:1.05;letter-spacing:-.01em;
  text-transform:uppercase}
.hdc__d{margin-top:.8rem;font-size:max(15px,var(--t-s));line-height:1.5;color:#fff}
.hdc__panel > *{opacity:0;translate:0 10px;
  transition:opacity .4s var(--ease),translate .5s var(--expo)}

/* la letra de abajo: apagada en todas, encendida en la activa */
.hdc__k{
  display:block;text-align:center;margin-top:clamp(1.25rem,2vw,2rem);
  font-family:var(--display);font-weight:var(--peso-display);
  font-size:clamp(2.5rem,4.4vw,4.75rem);line-height:1;letter-spacing:-.02em;
  color:rgba(255,255,255,.12);
  transition:color .45s var(--ease),translate .6s var(--expo);
}

.hdc.is-activo .hdc__vert{opacity:0}
.hdc.is-activo .hdc__panel{opacity:1;clip-path:inset(0 0 0 0)}
.hdc.is-activo .hdc__panel > *{opacity:1;translate:0 0;transition-delay:.18s}
.hdc.is-activo .hdc__k{color:var(--naran);translate:0 -4px}
.hdc__col:focus-visible{outline:2px solid #fff;outline-offset:-2px}

@media (prefers-reduced-motion:reduce){
  .hdc__vert,.hdc__panel,.hdc__panel > *,.hdc__k{transition:none}
}

/* ── tablet y móvil: las columnas se tumban en filas, todo a la vista ─── */
@media (max-width:860px){
  .hdc-lista{grid-template-columns:1fr}
  .hdc,.hdc:first-child{border-left:0;border-right:0;
    border-bottom:1px solid rgba(183,201,211,.3);
    flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:1rem}
  .hdc:first-child{border-top:1px solid rgba(183,201,211,.3)}
  .hdc__col{height:auto;cursor:default;padding-block:1.25rem}
  .hdc__vert{display:none}
  .hdc__panel,.hdc.is-activo .hdc__panel{position:static;opacity:1;clip-path:none;
    background:none;padding:0}
  .hdc__panel > *{opacity:1;translate:none}
  .hdc__k,.hdc.is-activo .hdc__k{margin:0;flex:0 0 2.2ch;font-size:2.25rem;
    color:var(--naran);translate:none}
}
/* los filetes acaban con la columna, no bajan hasta las letras */
@media (min-width:861px){
  .hdc,.hdc:first-child{border:0}
  .hdc__col{border-right:1px solid rgba(183,201,211,.3)}
  .hdc:first-child .hdc__col{border-left:1px solid rgba(183,201,211,.3)}
}

/* ═══ 7 · CLIENTES · v4 ════════════════════════════════════════════════════
   Estructura de la referencia, en claro: dos filas entre filetes de 1 px con
   la etiqueta a la izquierda. Arriba, fijos y grandes, los tres clientes
   principales; abajo, una cinta sin fin que se funde por los bordes.
   Fondo: el lienzo WebGL claro de barras (el del hero de la versión clara).
   Los logos van a una tinta —negro al 86 %— para que convivan sobre el gris
   animado sin que ninguno grite; al pasar el ratón recuperan su color. */
.ptn{padding-block:clamp(4.5rem,9vw,8.5rem)}
.ptn__fila{
  display:grid;grid-template-columns:24% 1fr;align-items:center;gap:clamp(1.5rem,3vw,3rem);
  border-top:1px solid rgba(3,20,30,.16);
}
.ptn__fila--b{border-bottom:1px solid rgba(3,20,30,.16)}
.ptn__fila--a{min-height:clamp(180px,16vw,250px)}
.ptn__fila--b{min-height:clamp(150px,13vw,210px)}
.ptn__et{font-family:var(--display);font-weight:var(--peso-display);
  font-size:clamp(1.5rem,2.3vw,2.4rem);line-height:1.02;letter-spacing:-.025em;
  color:var(--prof);padding-left:clamp(0rem,3vw,3.5rem)}
.ptn__et--s{font-size:clamp(1.1rem,1.5vw,1.55rem);line-height:1.15;letter-spacing:-.01em}

.ptn__fijos{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);align-items:center;
  gap:clamp(1.5rem,4vw,4rem)}
.ptn__fijo{display:flex;justify-content:center}
.ptn__logo{display:block;width:auto;height:clamp(44px,5vw,78px);max-width:100%;
  object-fit:contain;filter:brightness(0);opacity:.86;
  transition:filter .5s var(--ease),opacity .5s var(--ease)}
.ptn__fijo:hover .ptn__logo,.ptn__grupo li:hover .ptn__logo{filter:none;opacity:1}
/* Fenin y SERHS son apaisados: a la misma altura pesan el doble */
.ptn__logo[src*="fenin"]{height:clamp(38px,4.2vw,64px)}
.ptn__logo--s{height:clamp(26px,2.4vw,38px)}
.ptn__logo--s[src*="serhs"]{height:clamp(22px,2vw,32px)}

/* ── la cinta ─────────────────────────────────────────────────────────── */
.ptn__cinta{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.ptn__pista{display:flex;width:max-content;animation:cinta 38s linear infinite}
.ptn__cinta:hover .ptn__pista{animation-play-state:paused}
.ptn__grupo{list-style:none;margin:0;padding:0;display:flex;align-items:center;
  gap:clamp(3rem,6vw,6.5rem);padding-right:clamp(3rem,6vw,6.5rem)}
.ptn__grupo li{flex:0 0 auto;display:flex;align-items:center}
/* hueco visible para los logos que faltan (marcador, no diseño final) */
.ptn__hueco{display:inline-flex;align-items:center;justify-content:center;
  height:clamp(34px,3vw,44px);padding-inline:1.1rem;border:1px dashed rgba(3,20,30,.35);
  border-radius:999px;font-size:13px;letter-spacing:.04em;color:var(--gris);
  background:rgba(255,255,255,.55);white-space:nowrap}
@keyframes cinta{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ptn__pista{animation:none}
  .ptn__grupo[aria-hidden]{display:none}
  .ptn__cinta{-webkit-mask-image:none;mask-image:none}
  .ptn__grupo{flex-wrap:wrap;row-gap:1.5rem}
}

@media (max-width:860px){
  .ptn__fila{grid-template-columns:1fr;gap:1.5rem;padding-block:2rem}
  .ptn__et{padding-left:0}
  .ptn__fijos{gap:1.25rem}
  .ptn__logo{height:clamp(30px,8vw,48px)}
}
/* La Sirena es casi cuadrada: a la altura de las demás se queda en un sello */
.ptn__logo--s[src*="sirena"]{height:clamp(40px,3.6vw,56px)}

/* ═══ OPINIONES + CLIENTES · un solo fondo · v4 ════════════════════════════
   El lienzo cubre las dos secciones y va muy rebajado: al 28 % sobre blanco
   el suelo más oscuro del patrón queda en #D4D6D9, y ahí el gris de texto
   (--gris) aún da 4,83:1 —el peor punto teórico, no el habitual—. Al 34 %
   se quedaba en 4,42:1. */
.zona-lienzo--suave{background:var(--sup)}
.zona-lienzo--suave .zona-lienzo__gl{opacity:.28}
/* sin corte entre las dos: la de clientes arranca pegada al testimonio */
.zona-lienzo--suave .opi{padding-bottom:clamp(3rem,6vw,5.5rem)}
.zona-lienzo--suave .ptn{padding-top:0}
/* los tres fijos, un 30 % más pequeños: misma posición, menos peso */
.ptn__fijo .ptn__logo{height:clamp(32px,3.5vw,54px)}
.ptn__fijo .ptn__logo[src*="fenin"]{height:clamp(28px,2.9vw,45px)}
@media (max-width:860px){.ptn__fijo .ptn__logo{height:clamp(24px,6vw,36px)}}

/* ═══ HERO · ajustes v4 (2) ══════════════════════════════════════════════
   Sin sombra en el texto. Todo el contenido apoyado abajo, con aire por
   abajo y a los lados. Encima del vídeo, dos capas: un degradado leve de
   abajo arriba —que además asienta el texto, que ahora vive abajo— y un
   grano de película bien visible. */
.hero--video{align-items:flex-end;
  padding-bottom:clamp(3.5rem,7vw,6.5rem);min-height:min(92svh,980px)}
.hero--video .hero__in{position:relative;z-index:2;align-items:flex-end}
.hero--video .hero__r{padding-top:0}

.hero--video::before,
.hero--video::after{content:"";position:absolute;inset:0;pointer-events:none}
/* degradado: casi nada arriba, un velo suave solo en el tercio de abajo */
.hero--video::before{z-index:0;
  background:linear-gradient(0deg,rgba(3,20,30,.46) 0%,rgba(3,20,30,.22) 28%,
    rgba(3,20,30,0) 62%)}
/* grano: ruido fractal en SVG, en capa `overlay` para que ensucie claros y
   oscuros por igual, y a saltos de 8 fps como un negativo de verdad */
.hero--video::after{z-index:1;inset:-50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 2.2 -.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:220px 220px;
  mix-blend-mode:overlay;opacity:.72}
@keyframes grano{
  0%{transform:translate(0,0)}      12%{transform:translate(-4%,3%)}
  25%{transform:translate(3%,-5%)}  37%{transform:translate(-6%,-2%)}
  50%{transform:translate(5%,4%)}   62%{transform:translate(-2%,6%)}
  75%{transform:translate(6%,-3%)}  87%{transform:translate(-5%,-6%)}
  100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:no-preference){
  .hero--video::after{animation:grano 1s steps(8) infinite}
}
@media (max-width:860px){
  .hero--video{min-height:min(88svh,760px)}
  .hero--video .hero__in{align-items:flex-start}
}

/* ═══ 8 · EL ICEBERG · v4 ════════════════════════════════════════════════════
   El póster del moodboard llevado a la web con la tipografía de la casa.
   La ESCENA mantiene siempre la proporción de la foto (3038 × 1944): los
   puntos se colocan en % de la foto y nunca se despegan del iceberg.
     · ancho mínimo 1100 px → en móvil la escena se recorta por los lados
       y el iceberg sigue centrado y entero;
     · ancho máximo 1560 px → en pantallas enormes no pasa de ~1000 px de
       alto; los lados se completan con el mismo blanco roto y el mismo
       negro, partidos en la línea de flotación (44 %), y la foto se funde.
   Titular, logo, líneas y textos viven en capas del tamaño de la SECCIÓN,
   no de la escena: así nunca se recortan en pantallas estrechas.
   Contraste: tinta sobre el blanco roto #EBE8E1 15,29:1 · blanco sobre el
   agua (≈ #000209) 16,95:1. */
.ice{
  --flot:44%;
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#EBE8E1 0,#EBE8E1 calc(var(--flot) - .4%),
    #0a0f15 calc(var(--flot) + .4%),#000209 100%);
}
.ice__escena{
  position:relative;left:50%;translate:-50% 0;
  width:clamp(1100px,100vw,1560px);aspect-ratio:3038 / 1944;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
@media (max-width:1560px){
  .ice__escena{-webkit-mask-image:none;mask-image:none}
}
.ice__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ── capa de textos fijos: titular arriba, logo abajo ───────────────────── */
.ice__capa{position:absolute;inset:0;z-index:3;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:clamp(3rem,6.5%,6rem) var(--gut) clamp(1.75rem,4.5%,3.5rem)}
.ice__h{
  max-width:34ch;text-align:center;color:var(--prof);
  font-family:var(--display);font-weight:var(--peso-display);
  font-size:clamp(1.15rem,2.15vw,2.35rem);line-height:1.2;
  letter-spacing:.07em;text-transform:uppercase;text-wrap:balance;
}
.ice__pie{position:relative;display:flex;justify-content:center;width:100%}
.ice__logo{width:clamp(104px,9vw,150px);height:auto;opacity:.95}
.ice__mas{position:absolute;right:22%;top:-35%;width:14px;height:14px}
.ice__mas::before,.ice__mas::after{content:"";position:absolute;background:rgba(255,255,255,.75)}
.ice__mas::before{left:50%;top:0;width:1px;height:100%}
.ice__mas::after{top:50%;left:0;height:1px;width:100%}

/* ── los puntos ─────────────────────────────────────────────────────────── */
.ice__pts{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.ice__pt{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.ice__aro{
  --d:clamp(58px,5.6vw,96px);
  appearance:none;padding:0;margin:0;cursor:pointer;
  position:absolute;left:calc(var(--d) / -2);top:calc(var(--d) / -2);
  width:var(--d);height:var(--d);border-radius:50%;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.72);
  transition:background .5s var(--ease),border-color .5s var(--ease),scale .6s var(--expo);
}
/* la punta está sobre blanco roto: allí el aro va en tinta */
.ice__pt--sup .ice__aro{border-color:rgba(3,20,30,.5)}
/* el latido que invita a pasar el ratón */
.ice__aro::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid currentColor;color:rgba(255,255,255,.55);opacity:0}
.ice__pt--sup .ice__aro::after{color:rgba(3,20,30,.35)}
@media (prefers-reduced-motion:no-preference){
  .ice__aro::after{animation:latido 3.2s var(--ease) infinite}
  .ice__pt:nth-child(2) .ice__aro::after{animation-delay:.8s}
  .ice__pt:nth-child(3) .ice__aro::after{animation-delay:1.6s}
  .ice__pt:nth-child(4) .ice__aro::after{animation-delay:2.4s}
}
@keyframes latido{0%{opacity:.9;scale:1}70%,100%{opacity:0;scale:1.45}}
.ice__pt.is-on .ice__aro{background:rgba(255,255,255,.10);scale:1.06}
.ice__pt.is-on .ice__aro::after{animation:none;opacity:0}
.ice__aro:focus-visible{outline:2px solid #fff;outline-offset:4px}
.ice__pt--sup .ice__aro:focus-visible{outline-color:var(--navy)}

/* ── líneas y textos (los coloca el JS en coordenadas de la sección) ────── */
.ice__lineas{position:absolute;inset:0;width:100%;height:100%;z-index:2;
  pointer-events:none;overflow:visible}
.ice__lineas line{stroke:rgba(255,255,255,.8);stroke-width:1;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .55s var(--expo)}
.ice__lineas circle{fill:none;stroke:rgba(255,255,255,.9);stroke-width:1;
  opacity:0;scale:.4;transform-box:fill-box;transform-origin:center;
  transition:opacity .3s var(--ease) .35s,scale .4s var(--expo) .35s}
.ice__lineas .sup line,.ice__lineas .sup circle{stroke:rgba(3,20,30,.55)}
.ice__lineas g.is-on line{stroke-dashoffset:0}
.ice__lineas g.is-on circle{opacity:1;scale:1}

.ice__txt{
  /* left/top los pone el JS, relativos al centro del círculo */
  position:absolute;left:0;top:0;margin:0;z-index:4;pointer-events:none;
  width:max-content;max-width:15ch;
  font-family:var(--sans);font-weight:400;
  font-size:clamp(15px,1.3vw,21px);line-height:1.35;color:#fff;
  opacity:0;translate:0 6px;
  transition:opacity .35s var(--ease),translate .45s var(--expo);
}
.ice__pt--sup .ice__txt{color:var(--prof)}
.ice__pt.is-on .ice__txt{opacity:1;translate:0 0;transition-delay:.4s}

@media (prefers-reduced-motion:reduce){
  .ice__lineas line,.ice__lineas circle,.ice__txt,.ice__aro{transition:none}
}
/* Móvil: a los lados del iceberg no queda sitio y la etiqueta acaba encima
   del cristal, donde el blanco se pierde. Una pastilla translúcida detrás
   del texto la hace legible caiga donde caiga (clara en la punta, que vive
   sobre el blanco roto). En móvil se abre un punto cada vez, al tocarlo. */
@media (max-width:700px){
  .ice__txt{max-width:14ch;font-size:14px;line-height:1.35;
    padding:.5rem .7rem;border-radius:10px;
    background:rgba(0,8,20,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .ice__pt--sup .ice__txt{background:rgba(235,232,225,.94)}
  .ice__aro{--d:52px}
}

/* ═══ ICEBERG · ajustes v4 (2) ════════════════════════════════════════════
   Foto con la parte de arriba BLANCA (ICEBERG-BLANCO, 3038 × 2610): más alta,
   con más aire sobre el titular, y sin corte con la sección de clientes, que
   también acaba en blanco (su patrón se desvanece antes de llegar abajo).
   Línea de flotación al 45,5 %. Todo un punto más grande. */
.ice{--flot:45.5%;
  background:linear-gradient(180deg,#fff 0,#fff calc(var(--flot) - .5%),
    #0a0f15 calc(var(--flot) + .5%),#000306 100%)}
.ice__escena{width:clamp(900px,100vw,1560px);aspect-ratio:3038 / 2610}
.ice__capa{padding:clamp(4.5rem,12.5%,10.5rem) var(--gut) clamp(2.25rem,6%,5rem)}
.ice__h{font-size:clamp(1.3rem,2.55vw,2.8rem);line-height:1.22;max-width:33ch}
.ice__aro{--d:clamp(60px,6.4vw,112px)}
.ice__txt{font-size:clamp(16px,1.5vw,24px);max-width:15ch}
.ice__logo{width:clamp(120px,10.5vw,178px)}
/* el patrón de la zona de clientes se apaga antes del borde: la sección
   del iceberg arranca en blanco puro y no se ve la costura */
.zona-lienzo--suave .zona-lienzo__gl{
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%)}
@media (max-width:700px){
  .ice__txt{font-size:15px}
  .ice__aro{--d:54px}
}
/* sin logo ni cruz al pie: el titular queda solo arriba */
.ice__capa{justify-content:flex-start}
/* Alianzas: hueco grande para los logos pendientes (Conecta, Talentum) */
.ptn__hueco--l{height:clamp(46px,4.2vw,64px);padding-inline:1.5rem;font-size:14px}
/* en la cinta, los cinco logos a la misma presencia que antes tenían arriba
   Coca-Cola, Romeu y Fenin, un punto más contenidos */
.ptn__logo--s[src*="coca"],.ptn__logo--s[src*="romeu"]{height:clamp(28px,2.6vw,40px)}
.ptn__logo--s[src*="fenin"]{height:clamp(24px,2.2vw,34px)}
.ptn__logo--s[src*="fenin"]{height:clamp(20px,1.8vw,27px)}

/* Alianzas: los dos logos al tamaño que tenían los fijos, en la misma tinta */
.ptn__fijo .ptn__logo--alz{height:clamp(30px,3.2vw,48px)}
.ptn__fijo .ptn__logo--alz[src*="talentum"]{height:clamp(24px,2.5vw,38px)}

/* ═══ 2 · MEZCLA · fondo fotográfico · v4 ═════════════════════════════════
   Foto submarina detrás de la O. Tres pasos para que no entre de golpe:
   se apaga (opacidad), se tiñe del marino de la sección (el velo va en
   `color` sobre la foto) y se funde a marino liso arriba y abajo, así la
   costura con el hero y con el equipo sigue siendo el mismo #05213A. */
.ojo-sec__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:50% 30%;opacity:.62;
  filter:saturate(.75) brightness(.9)}
.ojo-sec__velo{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,var(--ojo-fondo) 0%,rgba(5,33,58,.35) 18%,
      rgba(5,33,58,.25) 50%,rgba(5,33,58,.55) 80%,var(--ojo-fondo) 100%),
    rgba(5,33,58,.28)}

/* ═══ ICEBERG → CLAIM · menos hueco y fundido más largo · v4 ═══════════════
   La foto tenía una franja negra vacía bajo el iceberg: la escena se recorta
   por abajo (la foto se ancla arriba) y los puntos se recolocan en %. La
   línea de flotación pasa del 45,5 % al 53,3 % de la nueva altura. */
.ice{--flot:53.3%}
.ice__escena{aspect-ratio:3038 / 2230}
.ice__img{object-position:50% 0}
/* el agua del iceberg acaba en el mismo negro con el que arranca el claim */
/* va DENTRO de la escena, entre la foto y los puntos: oscurece el fondo
   sin tapar la etiqueta de abajo */
.ice__pts{z-index:2}
.ice__escena::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;
  z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,4,12,0) 0%,#00040C 100%)}
.agua{padding-top:clamp(1.5rem,4vw,3.5rem)}
.agua::before{height:clamp(220px,40vh,480px);
  background:linear-gradient(180deg,
    #00040C 0%,rgba(0,4,12,.94) 14%,rgba(0,4,12,.78) 32%,rgba(0,4,12,.52) 52%,
    rgba(0,4,12,.26) 74%,rgba(0,4,12,.08) 90%,transparent 100%)}

/* ═══ OPINIONES · dos testimonios · v4 ═════════════════════════════════════
   Todos los testimonios (y sus fotos) comparten la misma celda del grid: la
   sección mide lo que el más largo y el cambio no mueve nada de alrededor.
   El «+» de la foto deja de ser decoración: es el botón «siguiente». */
.opi__slides{display:grid}
.opi__slide{grid-area:1 / 1;transition:opacity .6s var(--ease),translate .7s var(--expo)}
.opi__slide:not(.is-activo){opacity:0;translate:0 14px;visibility:hidden;
  transition:opacity .35s var(--ease),translate .5s var(--expo),visibility 0s .5s}
/* el testimonio largo: un punto más pequeño para que no se coma la foto */
.opi__q--largo p{font-size:clamp(1.05rem,1.3vw,1.3rem);line-height:1.4}
.opi__q--largo p + p{margin-top:.9em}
/* la comilla de cierre, solo al final del último párrafo */
.opi__q p::after{content:none}
.opi__q p:last-child::after{content:"\201D"}
.opi__cuenta{margin-top:clamp(1.5rem,2.4vw,2.25rem);padding-left:clamp(2.5rem,4.2vw,3.75rem);
  font-size:var(--t-micro);font-weight:600;letter-spacing:.18em;color:var(--gris)}
.opi__cuenta span{color:var(--naran-txt)}

.opi__fotos{position:relative;display:grid;align-self:stretch}
.opi__fotos .opi__foto{grid-area:1 / 1;margin:0;
  transition:opacity .7s var(--ease),scale .9s var(--expo)}
.opi__fotos .opi__foto:not(.is-activo){opacity:0;scale:.985;pointer-events:none}
.opi__fotos .opi__foto img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-card)}
/* marcador visible mientras no llega la foto de RPV */
.opi__pendiente{width:100%;height:100%;min-height:360px;border-radius:var(--r-card);
  display:grid;place-items:center;padding:2rem;text-align:center;
  font-size:14px;color:var(--gris);border:1px dashed rgba(3,20,30,.3);
  background:repeating-linear-gradient(135deg,#eef1f4 0 12px,#e3e8ed 12px 24px)}
.opi__sig{cursor:pointer;z-index:3;font:inherit;font-family:var(--display);
  font-weight:var(--peso-display);font-size:var(--t-h4);
  transition:background .35s var(--ease),color .35s var(--ease),rotate .6s var(--expo)}
.opi__sig:hover{background:var(--naran);color:#fff}
.opi__sig:active{rotate:90deg}
.opi__sig:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
@media (prefers-reduced-motion:reduce){
  .opi__slide,.opi__fotos .opi__foto,.opi__sig{transition:none}
}
/* la caja de fotos mide lo que la foto (4:5, con techo de alto): así el «+»
   vuelve a morder la esquina de la foto aunque el testimonio largo estire
   la columna de al lado */
.opi__fotos{align-self:center;justify-self:end;width:100%;
  aspect-ratio:4 / 5;max-height:min(78svh,700px)}
.opi__fotos .opi__foto{max-height:none;height:100%;width:100%}
.opi__pendiente{min-height:0}
@media (max-width:1080px){.opi__fotos{max-height:none;justify-self:stretch}}

/* ═══ 10 · CASOS DE ÉXITO · v4 ═════════════════════════════════════════════
   Índice editorial: una fila por caso entre filetes de 1 px. Columnas:
   número · siglas del cliente (grande) · cliente + titular · icono. El
   cuerpo (resumen, capacidades, enlace) se despliega con hover o foco —el
   mismo gesto que el acordeón de la FAQ— animando la fila de 0fr a 1fr.
   Sin nada activo, el primero se queda abierto: nunca hay un índice mudo.
   Contraste sobre blanco: siglas en naranja al activarse (#E14602, 4,14:1,
   texto ≥ 40 px: vale para texto grande) · cliente --naran-txt 5,99:1 ·
   resumen --gris 7,04:1. */
.casos{border-bottom:1px solid var(--filete)}
.caso{
  position:relative;display:grid;
  grid-template-columns:clamp(2.5rem,4vw,4rem) minmax(0,22%) minmax(0,1fr) auto;
  grid-template-rows:auto auto;column-gap:clamp(1rem,2.5vw,2.5rem);
  align-items:center;padding-block:clamp(1.5rem,2.4vw,2.25rem);
  border-top:1px solid var(--filete);
  transition:background-color .5s var(--ease);
}
.caso__n{grid-column:1;grid-row:1;font-size:var(--t-micro);font-weight:600;
  letter-spacing:.18em;color:var(--gris)}
.caso__sig{grid-column:2;grid-row:1;margin:0;
  font-family:var(--display);font-weight:var(--peso-display);
  font-size:clamp(2.6rem,5.2vw,5.4rem);line-height:.9;letter-spacing:-.04em;
  color:var(--prof);transition:color .5s var(--ease),translate .6s var(--expo)}
.caso__cab{grid-column:3;grid-row:1;min-width:0}
.caso__cli{font-size:max(12px,var(--t-micro));font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--naran-txt)}
.caso__t{margin-top:.55rem;font-family:var(--display);font-weight:var(--peso-display);
  font-size:clamp(1.25rem,1.9vw,2rem);line-height:1.12;letter-spacing:-.02em;
  color:var(--prof);max-width:32ch;text-wrap:balance}
/* icono: el «+» de la FAQ, que se convierte en flecha al abrir */
.caso__i{grid-column:4;grid-row:1;position:relative;width:clamp(40px,3vw,50px);aspect-ratio:1;
  border-radius:50%;border:1px solid rgba(0,75,135,.35);
  transition:background .45s var(--ease),border-color .45s var(--ease),rotate .6s var(--expo)}
.caso__i::before,.caso__i::after{content:"";position:absolute;top:50%;left:50%;
  width:36%;height:1.5px;background:var(--navy);translate:-50% -50%;
  transition:background .45s var(--ease),opacity .35s var(--ease)}
.caso__i::after{rotate:90deg}

/* cuerpo desplegable */
.caso__cuerpo{grid-column:3 / span 2;grid-row:2;display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .7s var(--expo)}
.caso__in{overflow:hidden;min-height:0;opacity:0;transition:opacity .4s var(--ease)}
.caso__res{margin-top:clamp(1rem,1.6vw,1.5rem);max-width:62ch;font-size:max(16px,var(--t-body));
  line-height:1.6;color:var(--gris);text-wrap:pretty}
.caso__caps{list-style:none;margin:clamp(1rem,1.5vw,1.4rem) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.45rem}
.caso__caps li{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--prof);padding:.45rem .8rem;border-radius:999px;
  border:1px solid rgba(3,20,30,.16);background:rgba(255,255,255,.6)}
.caso__ver{display:inline-flex;align-items:center;min-height:44px;margin-top:clamp(.9rem,1.4vw,1.25rem);
  font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:.3em;
  text-decoration-thickness:1px}
.caso__ver:hover{color:var(--naran-txt)}
.caso__ver:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:4px}

/* abierto: hover, foco dentro, o el primero cuando no hay otro activo */
.caso:hover,.caso:focus-within,
.casos:not(:hover):not(:focus-within) .caso:first-child{background:rgba(3,20,30,.025)}
.caso:hover .caso__cuerpo,.caso:focus-within .caso__cuerpo,
.casos:not(:hover):not(:focus-within) .caso:first-child .caso__cuerpo{grid-template-rows:1fr}
.caso:hover .caso__in,.caso:focus-within .caso__in,
.casos:not(:hover):not(:focus-within) .caso:first-child .caso__in{opacity:1;transition-delay:.15s}
.caso:hover .caso__sig,.caso:focus-within .caso__sig,
.casos:not(:hover):not(:focus-within) .caso:first-child .caso__sig{color:var(--naran);translate:.08em 0}
.caso:hover .caso__i,.caso:focus-within .caso__i,
.casos:not(:hover):not(:focus-within) .caso:first-child .caso__i{
  background:var(--navy);border-color:var(--navy);rotate:135deg}
.caso:hover .caso__i::before,.caso:hover .caso__i::after,
.caso:focus-within .caso__i::before,.caso:focus-within .caso__i::after,
.casos:not(:hover):not(:focus-within) .caso:first-child .caso__i::before,
.casos:not(:hover):not(:focus-within) .caso:first-child .caso__i::after{background:#fff}

@media (prefers-reduced-motion:reduce){
  .caso,.caso__sig,.caso__i,.caso__cuerpo,.caso__in{transition:none}
}
/* sin ratón (táctil) o en pantallas estrechas: todo abierto, a la vista */
@media (hover:none),(max-width:860px){
  .caso__cuerpo{grid-template-rows:1fr}
  .caso__in{opacity:1}
}
@media (max-width:860px){
  .caso{grid-template-columns:auto minmax(0,1fr);row-gap:.6rem;align-items:start}
  .caso__n{grid-column:1;grid-row:1;padding-top:.35rem}
  .caso__sig{grid-column:2;grid-row:1;font-size:clamp(2.4rem,12vw,3.4rem)}
  .caso__cab{grid-column:1 / -1;grid-row:2}
  .caso__i{display:none}
  .caso__cuerpo{grid-column:1 / -1;grid-row:3}
}

/* ── Opiniones · dots (sustituyen al «+», que vuelve a ser decorativo) ──── */
.opi__dots{display:flex;justify-content:center;gap:.35rem;
  margin-top:clamp(2.5rem,4.5vw,4rem)}
.opi__dot{appearance:none;border:0;background:none;cursor:pointer;padding:0;
  width:44px;height:44px;display:grid;place-items:center}
.opi__dot::before{content:"";width:10px;height:10px;border-radius:999px;
  background:rgba(3,20,30,.22);transition:width .5s var(--expo),background .4s var(--ease)}
.opi__dot:hover::before{background:rgba(3,20,30,.45)}
.opi__dot.is-activo::before{width:30px;background:var(--naran)}
.opi__dot:focus-visible{outline:2px solid var(--navy);outline-offset:-4px;border-radius:999px}
/* más aire hasta la fila de logos */
.zona-lienzo--suave .opi{padding-bottom:clamp(4.5rem,8.5vw,8rem)}
/* ⚠ heliox.css trae un `.caso` de la sección de proyectos retirada (gap de
   72 px y margen entre casos): sin esto las filas cerradas dejaban un hueco */
.casos .caso{row-gap:0;margin-top:0}
@media (max-width:860px){.casos .caso{row-gap:.6rem}}

/* ── Casos · versión estática (v4 · 2) ────────────────────────────────────
   Sin despliegue ni hover: la fila no cambia al pasar por encima. El «+»
   pasa a flecha y no enlaza todavía. Se anulan TODOS los estados de arriba. */
.casos .caso,
.casos .caso:hover,.casos .caso:focus-within,
.casos:not(:hover):not(:focus-within) .caso:first-child{background:none}
.casos .caso .caso__sig,
.casos:not(:hover):not(:focus-within) .caso:first-child .caso__sig,
.casos .caso:hover .caso__sig{color:var(--prof);translate:none}
.casos .caso{grid-template-rows:auto;padding-block:clamp(1.75rem,2.8vw,2.6rem)}
.casos .caso__i,
.casos .caso:hover .caso__i,
.casos:not(:hover):not(:focus-within) .caso:first-child .caso__i{
  background:none;border-color:rgba(0,75,135,.35);rotate:none;
  display:grid;place-items:center;margin-right:clamp(.5rem,1.5vw,1.5rem)}
.casos .caso__i::before,.casos .caso__i::after{content:none}
.casos .caso__i svg{width:44%;height:44%;fill:none;stroke:var(--navy);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){
  .casos .caso__i{display:grid;grid-column:2;grid-row:1;justify-self:end;margin-right:0}
}

/* ═══ MEZCLA · tarjetas de cristal · v4 ════════════════════════════════════
   Las tres perspectivas dejan de ser sólidas: cristal translúcido que
   desenfoca la foto submarina de detrás. Un tinte marino muy leve y un
   filete de luz arriba-izquierda (como el canto de un vidrio) les dan
   cuerpo sin taparla. Con un tinte tan bajo el contraste depende del
   fondo: la foto está oscurecida por el velo de la sección (≈ #05213A–
   #0B3A5E detrás de las tarjetas), así que el blanco sigue >11:1 y el
   grisáceo >6:1. Si el navegador no soporta backdrop-filter, se cae a un
   marino translúcido más denso. */
.flota{
  background:linear-gradient(135deg,rgba(141,191,232,.14) 0%,rgba(141,191,232,.05) 45%,
    rgba(9,44,74,.18) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),
    inset -1px -1px 0 rgba(255,255,255,.04),
    0 24px 50px -30px rgba(0,8,20,.35);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .flota{background:rgba(9,44,74,.82)}
}

/* ── Equipo · el bloque entero apoyado ABAJO de su pantalla (v4) ─────────
   Anclado arriba, en pantallas altas sobraba aire por debajo y la sección
   de números quedaba lejísimos. Ahora el hueco sobrante queda encima. Como
   el carrusel tiene alto fijo, cambiar de persona sigue sin mover nada. */
@media (min-width:1081px){
  .equipo-sec.is-fijo .equipo-fijo{justify-content:flex-end;
    padding-top:calc(var(--hdr-h,74px) + 2svh);padding-bottom:clamp(1.5rem,4svh,3rem)}
}

/* ── Equipo · título arriba y grupo de cuerpo entero (v4) ─────────────────
   El titular se alinea con el borde superior de la foto. La foto se abre a
   una banda de ~2:1 que enseña a los cuatro de la cabeza a los pies (en el
   original ocupan del 25 % al 90 % del alto). El conjunto se centra en su
   pantalla: el carrusel tiene alto fijo, así que no hay saltos. */
.equipo-intro{align-items:start}
.equipo-txt{padding-bottom:0;padding-top:clamp(.25rem,.8vw,.75rem)}
@media (min-width:1081px){
  .equipo-sec.is-fijo .equipo-fijo{justify-content:center;
    padding-top:calc(var(--hdr-h,74px) + 1svh);padding-bottom:1.5svh}
  .equipo-sec.is-fijo .equipo-foto img{object-position:50% 70%;transform-origin:50% 70%}
}

/* ── Equipo · responsive revisado (v4) ────────────────────────────────────
   El JS calcula alto, ANCHO y encuadre de la foto del grupo para que se vea
   siempre de cuerpo entero (cabeza y pies dentro): si falta alto, la foto
   se estrecha y se apoya a la derecha, nunca se recorta más. El texto de la
   ficha va un punto más contenido para no crecer más que el retrato. */
@media (min-width:1081px){
  .equipo-sec.is-fijo .equipo-foto{width:var(--foto-w,100%);justify-self:end}
  .equipo-sec.is-fijo .equipo-foto img{object-position:50% var(--foto-op,60%)}
  .equipo-sec.is-fijo .miembro__bio{font-size:clamp(15px,1.02vw,17px);line-height:1.55;
    max-width:none}
  .equipo-sec.is-fijo .miembro__n{padding-top:0}
}
/* sin pista (tablet, móvil, pantallas bajas): la foto entera, 3:2, sin
   recorte: nunca corta cabezas ni pies */
.equipo-sec:not(.is-fijo) .equipo-foto img{aspect-ratio:3 / 2;height:auto;object-position:50% 50%}

/* ═══ MEZCLA · perspectivas sin tarjeta · v4 ═══════════════════════════════
   Ni fondo, ni cristal, ni borde, ni sombra: solo el texto flotando junto a
   la O. El punto de color sustituye al número y va justo encima del título.
   Sin la tarjeta que los levantaba, los textos quedan directamente sobre la
   foto oscurecida por el velo marino: blanco y grisáceo siguen legibles. */
.flota,.flota:hover{
  background:none;border:0;box-shadow:none;border-radius:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  padding:0;min-height:0}
.flota .card__dot{position:static;display:block;margin-bottom:clamp(.9rem,1.3vw,1.2rem)}
.flota__t{margin-top:0}
.flota__p{color:#D3DEE5}
/* sin la sección de números, el equipo desemboca directo en el método
   (oscuro): aire propio por debajo para que no se peguen */
.equipo-sec{padding-bottom:clamp(4rem,8vw,8rem)}
/* sin tarjetas, las tres perspectivas necesitan aire entre sí al apilarse */
@media (max-width:1080px){.ojo-grid{row-gap:clamp(2.25rem,6vw,3.25rem)}}

/* ═══ v4 · ajustes varios ═══════════════════════════════════════════════════ */
/* Partners / Clientes: las dos etiquetas, al mismo tamaño */
.ptn__et,.ptn__et--s{font-size:clamp(1.5rem,2.3vw,2.4rem);line-height:1.02;letter-spacing:-.025em}

/* Iceberg: todo abierto; el latido de los círculos sigue aunque estén
   abiertos. Los círculos ya no son interactivos: sin cursor de mano. */
.ice__pt.is-on .ice__aro::after{animation:latido 3.2s var(--ease) infinite}
.ice__pt:nth-child(2).is-on .ice__aro::after{animation-delay:.8s}
.ice__pt:nth-child(3).is-on .ice__aro::after{animation-delay:1.6s}
.ice__pt:nth-child(4).is-on .ice__aro::after{animation-delay:2.4s}
@media (prefers-reduced-motion:reduce){.ice__pt.is-on .ice__aro::after{animation:none}}
.ice__aro{cursor:default}
.ice__pt.is-on .ice__aro{scale:1}
/* escalonado al abrir: cada punto despliega un poco después del anterior */
.ice__pt:nth-child(2) .ice__txt{transition-delay:.55s}
.ice__pt:nth-child(3) .ice__txt{transition-delay:.7s}
.ice__pt:nth-child(4) .ice__txt{transition-delay:.85s}
.ice__lineas g:nth-child(2) line{transition-delay:.15s}
.ice__lineas g:nth-child(3) line{transition-delay:.3s}
.ice__lineas g:nth-child(4) line{transition-delay:.45s}

/* Pie · el cierre en claro: blanco, textos oscuros y logotipo en sus colores.
   Contraste sobre blanco: tinta 18,71:1 · enlaces --gris 7,04:1. */
.ftr__claro{background:var(--sup);color:var(--prof)}
.ftr__claro .ftr__filete{background:rgba(3,20,30,.12)}
.ftr__claro .fbase{color:var(--gris);border-top:0}
.ftr__claro .fbase p{color:var(--gris)}
.ftr__claro .fbase__legal a{color:var(--gris)}
.ftr__claro .fbase__legal a:hover{color:var(--navy)}
.ftr__claro .fbase__legal a:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.ftr__claro .ftr__pie{margin-top:clamp(1.5rem,4vw,3rem)}
.ftr__claro .ftr__marca{color:var(--navy)}
/* los dos puntos de la i, intercambiados respecto al logotipo original:
   arriba marino, abajo azul claro */
.ftr__claro .ftr__punto-a{fill:var(--navy)}
.ftr__claro .ftr__punto-b{fill:var(--cielo)}
/* los dos puntos de la i se van pasando el azul claro en bucle: uno se
   enciende mientras el otro vuelve a marino. Mismo ciclo, medio desfasado.
   Con «menos movimiento» se quedan fijos (arriba marino, abajo azul claro). */
@keyframes punto-i{
  0%,38%{fill:var(--navy)}
  50%,88%{fill:var(--cielo)}
  100%{fill:var(--navy)}
}
@media (prefers-reduced-motion:no-preference){
  .ftr__claro .ftr__punto-a,
  .ftr__claro .ftr__punto-b{animation:punto-i 3.6s var(--ease) infinite}
  .ftr__claro .ftr__punto-b{animation-delay:-1.8s}
}

/* ═══ MEZCLA · las tres perspectivas en fila · v4 ═══════════════════════════
   La O, el claim y el botón arriba, centrados; debajo, justo después del
   botón, Cliente · Negocio · Equipos en tres columnas iguales y alineadas
   a la misma altura (se acaban los desfases y el parallax lateral).
   Tres columnas hasta 861 px; por debajo, una sola columna. */
.ojo-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-areas:"centro centro centro" "c1 c2 c3";
  column-gap:clamp(2.5rem,6vw,6.5rem);row-gap:0;
}
.ojo-centro{margin-bottom:clamp(3.5rem,7vw,6rem)}
.flota--01,.flota--02,.flota--03{margin-top:0;max-width:none;width:auto;justify-self:stretch}
.flota--01{grid-area:c1}
.flota--02{grid-area:c2}
.flota--03{grid-area:c3}
.flota{translate:none!important}
.flota__p{max-width:34ch}
@media (max-width:1080px){
  .ojo-grid{grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-areas:"centro centro centro" "c1 c2 c3";column-gap:clamp(1.75rem,4vw,3rem)}
}
@media (max-width:860px){
  .ojo-grid{grid-template-columns:1fr;grid-template-areas:"centro" "c1" "c2" "c3";
    row-gap:clamp(2.25rem,6vw,3.25rem)}
  .ojo-centro{margin-bottom:clamp(1.5rem,5vw,2.5rem)}
}
/* en fila, el vaivén de cada una a su ritmo las descuadraba: quietas */
.flota{animation:none!important;will-change:auto}