/* ═══════════════════════════════════════════════════════════════════════════
   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}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAS DOS VERSIONES EN UNA · conmutador DARK / LIGHT
   ───────────────────────────────────────────────────────────────────────────
   Esto es la fusión de las dos webs V2 que ya estaban cerradas. No es una
   tercera dirección: es EXACTAMENTE la misma maqueta, con el primer tramo
   —el hero y la mezcla, que comparten un solo lienzo WebGL— pintado en
   papel blanco o en azul profundo según lo que elija quien mira.

   Del tercer paño (los socios) hacia abajo no cambia absolutamente nada,
   ni en una versión ni en la otra. Por eso todo lo que sigue cuelga de
   .zona-lienzo, que es justo el contenedor de esos dos paños, y de
   :root[data-tema="light"], que es el interruptor.

   Reglas de la casa que hay que respetar al tocar esto:
     · NINGUNA regla de aquí puede salirse de .zona-lienzo salvo la del
       filete de la cabecera, que sí es global y está marcada como tal.
     · La versión DARK es la de por defecto: sin el atributo data-tema, o
       con data-tema="dark", el CSS de arriba manda tal cual y este bloque
       no aporta nada. Si alguien borra el JS, la web sigue siendo la V2
       oscura entera, no una web rota.
     · Los velos se cruzan con OPACIDAD sobre dos pseudoelementos, no
       sustituyendo el `background`. Los degradados no interpolan, así que
       cambiar el background daría un salto seco; cruzando dos capas el
       cambio dura medio segundo y se lee como un revelado.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── El conmutador ───────────────────────────────────────────────────────
   Va pegado al botón «Hablemos», dentro de .hdr__fin, que es el único
   elemento nuevo del marcado de la cabecera.

   No es un botón ni una pastilla: son las dos palabras, separadas por un
   filete de 1 px. Al lado de un CTA que ya es una cápsula llena, una
   segunda cápsula competía con él y la cabecera pasaba a tener dos pesos
   iguales. En texto suelto el conmutador pesa lo que pesa un enlace de la
   navegación, que es exactamente lo que es.

   La que está puesta se marca con DOS cosas a la vez —tinta llena y un
   filete debajo—, nunca solo con el color: un cambio de gris a negro no es
   un indicador de estado suficiente por sí solo. El filete es el mismo
   gesto que subraya el enlace activo de la navegación (mismo alto, misma
   transición desde la izquierda), para que se lea como parte del sistema y
   no como un control aparte. */
.tema{
  position:relative;display:inline-flex;align-items:center;
  flex:0 0 auto;
}
.tema__b{
  position:relative;
  appearance:none;background:none;border:0;margin:0;cursor:pointer;
  display:inline-flex;align-items:center;
  /* el área táctil es el botón entero: 46 px de alto aunque la palabra
     ocupe 13. Sin caja visible, pero clicable de sobra. */
  min-height:46px;padding:0 clamp(.7rem,.95vw,1rem);
  font-family:var(--sans);font-size:max(11px,.8vw);font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--gris);
  transition:color .35s var(--ease);
  white-space:nowrap;
}
/* el conjunto se alinea con el borde del CTA que tiene al lado */
.tema__b:first-child{padding-left:0}
.tema__b:last-child{padding-right:0}

/* ── La barrita ──────────────────────────────────────────────────────────
   Un filete de 1 px a la altura de la caja de la mayúscula, no de la línea
   entera: si ocupa toda la altura del botón (46 px) deja de ser un
   separador y se convierte en una columna. */
.tema__b + .tema__b::before{
  content:"";position:absolute;left:0;top:50%;
  width:1px;height:1.15em;transform:translateY(-50%);
  background:var(--filete);
}

/* ── La palabra y su filete ────────────────────────────────────────────── */
.tema__t{
  position:relative;display:inline-block;padding-bottom:.42em;
}
.tema__t::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:currentColor;
  transition:right .32s var(--ease);
}
.tema__b[aria-pressed="true"]{color:var(--prof)}
.tema__b[aria-pressed="true"] .tema__t::after{right:0}
.tema__b:hover{color:var(--prof)}
/* ⚠ El foco va en --navy y no en --cielo, que es lo que usa el resto de la
   web. --cielo sobre blanco da 2,87:1 y un indicador de foco necesita 3:1
   (WCAG 2.2 · 1.4.11); --navy da 8,91:1. La cabecera es blanca en las dos
   versiones, así que aquí no hay fondo oscuro que salve al cielo. */
.tema__b:focus-visible{outline:2px solid var(--navy);outline-offset:4px;
  border-radius:2px}
/* En pantalla solo cabe la palabra; «Versión» se queda para quien escucha
   la página, que es donde de verdad hace falta el sustantivo. */
.tema__q{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* el bloque final de la cabecera: conmutador + CTA como una sola unidad,
   para que .hdr__in siga repartiendo en tres (logo · nav · fin) */
.hdr__fin{display:flex;align-items:center;gap:clamp(.6rem,1.1vw,1rem);
  flex:0 0 auto}

/* Cabecera en versión clara: la píldora blanca flotaba recortada sobre el
   hero oscuro; sobre papel blanco se volvía invisible. Un filete de 1 px la
   devuelve al sitio sin convertirla en una caja.
   ⚠ Es la ÚNICA regla de este bloque que sale de .zona-lienzo: la cabecera
   es fixed y no vive dentro de ella. */
:root[data-tema="light"] .hdr__in{border:1px solid rgba(3,20,30,.08)}
:root[data-tema="light"] .hdr.is-stuck .hdr__in{border-color:rgba(3,20,30,.12)}

/* ── El conmutador en móvil ──────────────────────────────────────────────
   Por debajo de 860 px el JS mueve el MISMO nodo al panel del menú, en su
   propio <li>. La barra de la cabecera se queda exactamente como estaba en
   la V2 aprobada —logotipo, hamburguesa y «Hablemos»—, que ya iba justa de
   sitio sin nada más dentro.
   La fila repite el filete que separa los enlaces y respeta los 44 px de
   área táctil que tienen ellos. */
.nav__tema{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:56px;
}
.nav__tema-et{
  font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);
}
@media (min-width:861px){
  /* por si el JS no llega a correr: la fila nunca debe verse en escritorio */
  .nav__tema{display:none}
}

/* ═══ VERSIÓN LIGHT · los dos primeros paños ═══════════════════════════ */

/* ── El papel ───────────────────────────────────────────────────────── */
.zona-lienzo{transition:background-color .55s var(--ease),color .55s var(--ease)}
:root[data-tema="light"] .zona-lienzo{background:var(--sup);color:var(--prof)}
:root[data-tema="light"] .zona-lienzo__gl{background:var(--sup)}

/* Plan B sin WebGL: el mismo reparto, en estático y en gris */
:root[data-tema="light"] .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, cruzados ────────────────────────────────────────────────
   El velo oscuro pasa al ::before y el claro al ::after, los dos dentro de
   la misma caja y por tanto bajo la misma máscara. El ::after pinta encima,
   así que en LIGHT tapa por completo al oscuro, que además se va a 0.
   Se conservan los cortes y las paradas de cada versión: la máscara que
   mata el velo del hero antes del borde sigue haciendo falta en las dos,
   porque la costura con la mezcla se vería igual. */
.hero__scrim{background:none}
.hero__scrim::before,.hero__scrim::after{
  content:"";position:absolute;inset:0;
  transition:opacity .55s var(--ease);
}
.hero__scrim::before{
  background:linear-gradient(102deg,rgba(3,20,30,.82) 0%,rgba(3,20,30,.54) 46%,
    rgba(3,20,30,.16) 100%);
  opacity:1;
}
.hero__scrim::after{
  background:linear-gradient(102deg,rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.62) 46%,rgba(255,255,255,.20) 100%);
  opacity:0;
}
:root[data-tema="light"] .hero__scrim::before{opacity:0}
:root[data-tema="light"] .hero__scrim::after{opacity:1}

.tri-sec--lienzo .tri-sec__scrim{background:none}
.tri-sec--lienzo .tri-sec__scrim::before,
.tri-sec--lienzo .tri-sec__scrim::after{
  content:"";position:absolute;inset:0;
  transition:opacity .55s var(--ease);
}
.tri-sec--lienzo .tri-sec__scrim::before{
  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%);
  opacity:1;
}
.tri-sec--lienzo .tri-sec__scrim::after{
  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%);
  opacity:0;
}
:root[data-tema="light"] .tri-sec--lienzo .tri-sec__scrim::before{opacity:0}
:root[data-tema="light"] .tri-sec--lienzo .tri-sec__scrim::after{opacity:1}

/* ── La tinta ───────────────────────────────────────────────────────── */
.zona-lienzo .hero h1,.zona-lienzo .hero__p,.zona-lienzo .card__t,
.zona-lienzo .tri__claim,.zona-lienzo .hero__sub,.zona-lienzo .muted-d,
.zona-lienzo .tri__n{transition:color .55s var(--ease)}
:root[data-tema="light"] .zona-lienzo .hero h1,
:root[data-tema="light"] .zona-lienzo .hero__p,
:root[data-tema="light"] .zona-lienzo .card__t,
:root[data-tema="light"] .zona-lienzo .tri__claim{color:var(--prof)}
:root[data-tema="light"] .zona-lienzo .hero__sub,
:root[data-tema="light"] .zona-lienzo .muted-d,
:root[data-tema="light"] .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{
  border:1px solid transparent;
  transition:background-color .55s var(--ease),border-color .55s var(--ease),
             transform .4s var(--ease);
}
:root[data-tema="light"] .zona-lienzo .card{
  background:rgba(255,255,255,.76);
  border-color:rgba(3,20,30,.07);
}
:root[data-tema="light"] .zona-lienzo .card:hover{background:rgba(255,255,255,.88)}
/* el punto gris claro desaparecía sobre la tarjeta clara */
.zona-lienzo .card__dot{transition:background-color .55s var(--ease)}
:root[data-tema="light"] .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.86 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{transition:opacity .55s var(--ease)}
.zona-lienzo .tri__foco::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.92));
  opacity:0;transition:opacity .55s var(--ease);
}
:root[data-tema="light"] .zona-lienzo .tri__foco::after{opacity:0}
:root[data-tema="light"] .zona-lienzo .tri__foco::before{opacity:1}

/* ── 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 para las dos versiones. */
.zona-lienzo .btn--sup,.zona-lienzo .btn--linea-claro{
  transition:background-color .55s var(--ease),color .55s var(--ease),
             border-color .55s var(--ease),opacity .8s var(--ease);
}
:root[data-tema="light"] .zona-lienzo .btn--sup{background:var(--navy);color:var(--blanco)}
:root[data-tema="light"] .zona-lienzo .btn--sup:hover{background:var(--prof)}
:root[data-tema="light"] .zona-lienzo .btn--linea-claro{
  color:var(--navy);border-color:rgba(0,75,135,.45)}
:root[data-tema="light"] .zona-lienzo .btn--linea-claro:hover{background:rgba(0,75,135,.07)}

/* ── 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){
  .hero__scrim::after{
    background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.78) 55%,rgba(255,255,255,.30) 100%);
  }
}

/* ── Quien pide menos movimiento, cambia de versión de golpe ───────────── */
@media (prefers-reduced-motion:reduce){
  .tema__b,.tema__t::after,.zona-lienzo,.hero__scrim::before,.hero__scrim::after,
  .tri-sec--lienzo .tri-sec__scrim::before,.tri-sec--lienzo .tri-sec__scrim::after,
  .zona-lienzo .hero h1,.zona-lienzo .hero__p,.zona-lienzo .card__t,
  .zona-lienzo .tri__claim,.zona-lienzo .hero__sub,.zona-lienzo .muted-d,
  .zona-lienzo .tri__n,.zona-lienzo .card,.zona-lienzo .card__dot,
  .zona-lienzo .tri__foco::before,.zona-lienzo .tri__foco::after,
  .zona-lienzo .btn--sup,.zona-lienzo .btn--linea-claro{transition:none}
}