/* ═══════════════════════════════════════════════════════════════════════════
   HeliOx · V6 · feedback del 7 de octubre de 2026 (vídeo de Alfredo)
   ───────────────────────────────────────────────────────────────────────────
   Carga DESPUÉS de heliox.css, componentes.css y v5final.css. Aquí solo va
   lo que pide el feedback; el sistema (piezas con 10 px de gris, radio 8,
   Montserrat + Playfair cursiva, Brown Pro) no cambia.

   Contraste nuevo (contraste.py):
     blanco / azul LinkedIn #0A66C2 ......... 5,69:1
     blanco / navy #004B87 (Voz del cliente)  8,91:1
     #D5E2EA / #004B87 ...................... 6,75:1
     #7FD0F0 / #004B87 (antetítulo) ......... 5,17:1
     #004B87 / blanco (siglas, nombres) ..... 8,91:1
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ CABECERA · el descriptor sube junto al logo ═════════════════════════ */
.hdr__logo{gap:14px;color:#fff;text-decoration:none}
.hdr__desc{display:block;padding-left:14px;border-left:1px solid rgba(255,255,255,.4);
  font-family:var(--titulo);font-weight:600;font-size:.6875rem;line-height:1.35;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;white-space:nowrap}
.hdr__desc span{display:block}
.hdr__izq{gap:36px}
/* portátil estrecho: el menú se aprieta antes de tocar el descriptor */
@media (max-width:1180px) and (min-width:761px){
  .hdr__izq{gap:24px}
  .nav{gap:20px}
  .hdr__desc{font-size:.625rem;letter-spacing:.08em}
}
@media (max-width:960px) and (min-width:761px){
  .hdr__desc{white-space:normal;width:132px}
  .hdr__desc span{display:inline}
  .nav{gap:16px;flex-wrap:nowrap}
  .nav a{font-size:.8125rem}
  .hdr__cta.btn--ref{padding-inline:10px}
}
/* móvil: el descriptor ocupa el hueco del menú recogido. La hamburguesa
   se queda solo con el icono (la palabra «Menú» sigue para el lector). */
@media (max-width:760px){
  .hdr__in{padding-left:12px;gap:8px}
  .hdr__logo{gap:10px;min-width:0}
  .hdr__logo img{width:88px}
  .hdr__desc{white-space:normal;width:auto;max-width:200px;padding-left:10px;
    font-size:.625rem;letter-spacing:.05em;line-height:1.3;text-wrap:balance}
  .hdr__desc span{display:inline}
  .burger{width:44px;height:44px;justify-content:center;gap:0}
  .burger__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ═══ HERO · la frase en cuatro líneas, arriba y en grande ════════════════
   Montserrat 600 en caja mixta: en versales, una línea de 42 caracteres no
   cabe a un tamaño que se lea como titular. Las cuatro líneas alineadas a
   la izquierda (V6.1: la cuarta ya no va sangrada a la derecha).
   «crecimiento» con el mismo tratamiento que «más a fondo» (Playfair
   cursiva en minúscula), al mismo cuerpo óptico que el resto del titular
   (1,12 em, como todas las cursivas de la web) y con un trazo naranja.
   «Consultores que van más…» y los botones bajan al pie del vídeo, entre
   dos filetes: el de arriba los separa del vídeo y el de abajo de la
   franja de credenciales. */
.hero--video .hero__cont{justify-content:flex-start;gap:0;
  padding-top:clamp(112px,15vh,150px)}
.hero__frase{position:relative;z-index:2;margin:0;width:100%;
  font-family:var(--titulo);font-weight:600;text-transform:none;color:#fff;
  font-size:min(3.55vw,4.1rem);line-height:1.08;letter-spacing:-.028em}
.hero__fl{display:block;white-space:nowrap}
.hero__crece{position:relative;display:inline-block;font-family:var(--serif-it);font-style:italic;
  font-weight:400;font-size:1.12em;line-height:.9;letter-spacing:0;color:#fff}
.hero__crece svg{position:absolute;left:0;bottom:-.12em;width:94%;height:.18em;overflow:visible}
.hero__crece path{fill:none;stroke:var(--naran);stroke-width:3.5;stroke-linecap:round;
  vector-effect:non-scaling-stroke;stroke-dasharray:420;stroke-dashoffset:0}
.js .hero__crece path{stroke-dashoffset:420;animation:v6-trazo 1.1s cubic-bezier(.65,0,.35,1) 1.3s forwards}
@keyframes v6-trazo{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.js .hero__crece path{animation:none;stroke-dashoffset:0}}

/* «Consultores que van más…» baja: base del vídeo, junto a los botones */
.hero--video .hero__bloque{max-width:none;width:100%;flex-direction:row;align-items:center;
  justify-content:space-between;gap:24px 48px;flex-wrap:wrap;
  margin-top:auto;padding:clamp(20px,2.4vw,28px) 0;
  border-top:1px solid rgba(255,255,255,.24);border-bottom:1px solid rgba(255,255,255,.24)}
.hero--video .hero__frase{margin-bottom:clamp(48px,8vh,96px)}
.hero--video .hero__t{font-size:clamp(1.5rem,.9rem + 1.5vw,2.5rem);line-height:1.02}
.hero--video .hero__acc{flex:0 0 auto}

/* Velo: al de abajo a la izquierda (V5) se suma uno arriba, detrás de la
   frase. Va en píxeles, no en %, para que cubra la frase sea cual sea el
   alto de la ventana: no baja del 44 % hasta 520 px (la frase termina
   antes de 480 px en escritorio y en móvil). Peor caso calculado: el plano
   del hielo del vídeo (#E8EEF0) bajo un velo #040E1A al 44 % → blanco
   3,4:1 (la frase es texto grande, ≥ 24 px: mínimo 3:1); al 62 % de
   arriba, 6,1:1. Sobre el agua oscura queda muy por encima. */
.hero--video .hero__cont::before{
  background:
    linear-gradient(to bottom,rgba(4,14,26,.62) 0,rgba(4,14,26,.5) 300px,rgba(4,14,26,.44) 520px,rgba(4,14,26,0) 720px),
    radial-gradient(120% 90% at 0% 100%,rgba(4,14,26,.62) 0%,rgba(4,14,26,.42) 38%,rgba(4,14,26,0) 66%)}

@media (max-width:900px){
  .hero__frase{font-size:clamp(1.65rem,1rem + 3vw,2.4rem);line-height:1.12}
  .hero__fl{white-space:normal}
}
.hero__nw{white-space:nowrap}
@media (max-width:767px){
  .hero--video .hero__cont{padding-top:96px}
  .hero__frase{font-size:min(27px,7.2vw);line-height:1.14}
  .hero--video .hero__bloque{flex-direction:column;align-items:flex-start}
  .hero--video .hero__t{font-size:min(23px,6.1vw)}
}

/* ═══ ICEBERG ═════════════════════════════════════════════════════════════
   El origen se queda con una sola frase y gana tamaño. */
.sup__origen{width:min(38%,520px)}
.sup__origen-k{font-size:.875rem;margin-bottom:18px}
.sup__origen-k span{height:34px;padding:0 14px}
.sup__origen-t{margin:0;font-size:clamp(1.2rem,.85rem + .95vw,1.85rem);line-height:1.38;
  letter-spacing:-.005em}
/* número del punto: solo en móvil */
.sup__aro b{display:none}

/* Tablet: los rótulos no pueden desbordar la imagen */
@media (max-width:1100px) and (min-width:861px){
  .sup__tx{max-width:min(200px,20vw);font-size:.9375rem}
  .sup__pt{--lin:clamp(36px,4.5vw,64px)}
}

/* Móvil: los puntos llevan su número y la lista de debajo, el mismo
   número; así se sabe qué texto va con qué punto. La imagen se recorta más
   vertical (4:5) para que el iceberg salga más grande. */
@media (max-width:860px){
  .sup__aro{display:grid;place-items:center}
  .sup__aro b{display:block;font-family:var(--titulo);font-weight:700;font-size:.8125rem;
    line-height:1;color:#fff}
  .sup__aro{background:rgba(3,18,40,.55)}
  .sup__mov{padding:8px 20px 4px}
  .sup__mov ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;counter-reset:pt;margin-bottom:28px}
  .sup__mov li{counter-increment:pt;align-items:flex-start;font-size:1rem;line-height:1.35}
  .sup__mov li::before{content:counter(pt);display:grid;place-items:center;width:26px;height:26px;
    font-family:var(--titulo);font-weight:700;font-size:.75rem;line-height:1;color:#fff}
  .sup__mov .sup__origen-k{margin:0 0 14px}
  .sup__mov .sup__origen-t{margin:0 0 8px;font-size:1.1875rem;line-height:1.45}
}
@media (max-width:600px){
  .sup__mar{aspect-ratio:4/5}
  .sup__img{object-position:50% 50%}
  /* a 4:5 la foto (1,37:1) enseña el 58,3 % central de su ancho */
  .sup__pt{left:calc((var(--x) - 20.85%) / .583)}
}

/* ═══ NÚMEROS + SECTORES ══════════════════════════════════════════════════ */
.num5__card{display:block}
.num5__frase{margin-bottom:clamp(24px,3vw,40px)}
.num5__t em{display:inline}
.num5__l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.num5__it{padding:4px clamp(16px,2vw,32px);box-shadow:inset 1px 0 0 var(--filete)}
.num5__it:first-child{padding-left:0;box-shadow:none}
.num5__v{font-size:clamp(2.8rem,1.4rem + 3.6vw,5.6rem)}
.num5__v--pend{color:var(--naran-txt);letter-spacing:-.02em}
.num5__lab{max-width:9ch}
@media (max-width:860px){
  .num5__l{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .num5__it:nth-child(3){padding-left:0;box-shadow:none}
}

.sec6{display:grid;grid-template-columns:minmax(0,22fr) minmax(0,72fr);gap:16px clamp(24px,4vw,64px);
  align-items:baseline;margin-top:clamp(36px,4.5vw,64px);padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--filete)}
.sec6__t{margin:0;font-family:var(--titulo);font-weight:600;font-size:.75rem;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--navy)}
.sec6__l{display:flex;flex-wrap:wrap;gap:12px 30px;margin:0;padding:0;list-style:none}
.sec6__l li{font-family:var(--titulo);font-weight:600;font-size:clamp(.9375rem,.8rem + .4vw,1.1875rem);
  letter-spacing:.01em;text-transform:uppercase;color:var(--tinta)}
.sec6__l li::before{content:"";display:inline-block;width:6px;height:6px;margin:0 .6em .2em 0;
  border-radius:50%;background:var(--naran);vertical-align:middle}
@media (max-width:760px){.sec6{grid-template-columns:1fr}}

/* ═══ CASOS · rejilla homogénea ═══════════════════════════════════════════
   Cuatro columnas iguales; la pieza «El vuestro es el siguiente» ocupa dos
   huecos y cierra la segunda fila. Sector en #B43802 sobre #F4F4F3 → 5,44:1. */
.cas__mos{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto}
.caso5{grid-column:auto;grid-row:auto;min-height:clamp(280px,24vw,340px);background:#F4F4F3;
  color:var(--tinta);padding:clamp(20px,2vw,30px);gap:0}
.caso5:not(.caso5--cta):hover{background:#EAF4F8}
.caso5__logo{display:flex;align-items:center;height:clamp(56px,5vw,72px);margin:clamp(18px,2vw,28px) 0 auto}
.caso5__sig{font-size:clamp(1.9rem,1.2rem + 1.5vw,2.8rem);margin:0}
.caso5__sig--logo img{height:clamp(48px,4.4vw,64px);width:auto}
.caso5__cab{margin-top:clamp(24px,3vw,40px);padding-top:16px;border-top:1px solid var(--filete)}
.caso5__cli{display:flex;flex-direction:column;gap:4px;margin:0 0 10px;letter-spacing:0;text-transform:none;
  font-family:var(--sans);font-weight:400;color:var(--tinta)}
.caso5__sec{font-family:var(--titulo);font-weight:600;font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--naran-txt)}
.caso5__emp{font-family:var(--titulo);font-weight:700;font-size:.9375rem;line-height:1.25;letter-spacing:.01em}
.caso5__t{font-size:clamp(1rem,.9rem + .3vw,1.1875rem);line-height:1.3;max-width:none;padding-right:0}
.caso5--cta{grid-column:span 2;min-height:0;justify-content:space-between;gap:24px;background:#EAF4F8}
.caso5__cta-t{font-size:clamp(1.6rem,1rem + 1.6vw,2.6rem);line-height:1.02;max-width:14ch}
@media (max-width:1100px){
  .cas__mos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .caso5--cta{grid-column:1 / -1}
}
@media (max-width:640px){
  .cas__mos{grid-template-columns:1fr}
  .caso5{min-height:0}
  .caso5--cta{grid-column:auto}
}

/* ═══ VOZ DEL CLIENTE · en azul ═══════════════════════════════════════════
   Casos (blanco) → Voz (azul) → Por qué HeliOx (blanco) → Ecosistema
   (marino) → Equipo (blanco) → Alianzas (azul) → HIDEOX (blanco). */
.voz--azul .voz__card{background:#004B87;color:#fff}
.voz--azul .eye{color:#7FD0F0}
.voz--azul .voz__h{color:#fff}
.voz--azul .voz__h em{color:#BFE3F1}
.voz--azul .voz__lead{color:#D5E2EA}
.voz--azul :focus-visible{outline-color:#fff}
.voz--azul .vz6 :focus-visible{outline-color:var(--navy)}

.voz6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.vz6{display:flex;flex-direction:column;gap:14px;min-width:0;padding:clamp(22px,2.2vw,32px);
  border-radius:6px;background:#fff;color:var(--tinta)}
.js .vz6[data-mas]:not(.is-vista){display:none}
.vz6.is-nueva{animation:v6-entra .6s cubic-bezier(.16,1,.3,1) both}
@keyframes v6-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.vz6__in{display:flex;flex-direction:column;gap:20px;flex:1 1 auto;margin:0}
.vz6__logo{display:flex;align-items:center;height:44px;margin:0}
.vz6__logo img{height:36px;width:auto;max-width:170px;object-fit:contain}
.vz6__logo--sig{font-family:var(--titulo);font-weight:700;font-size:1.75rem;line-height:1;
  letter-spacing:.01em;color:var(--navy)}
.vz6__q{margin:0}
.vz6__q p{margin:0;font-family:var(--sans);font-size:1.125rem;line-height:1.5;color:var(--tinta)}
.vz6__f{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:16px;
  border-top:1px solid var(--filete)}
.vz6__n{font-family:var(--titulo);font-weight:700;font-size:1.25rem;line-height:1.15;
  letter-spacing:-.005em;color:var(--tinta)}
.vz6__r{font-size:.9375rem;line-height:1.4;color:#3C4046}
.vz6__e{color:var(--navy);font-weight:500}
.vz6 .vz__leer{margin-top:-4px}

.voz--azul .voz__pie{justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.voz__mas{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;
  border:0;border-radius:4px;background:transparent;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);color:#fff;
  font-family:var(--sans);font-size:.875rem;font-weight:500;letter-spacing:-.02em;text-transform:uppercase}
.voz__mas:hover{background:rgba(255,255,255,.12)}
.voz__mas{display:none}
.js .voz__mas{display:inline-flex}
.js .voz__mas[hidden]{display:none}
@media (max-width:1100px){.voz6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.voz6{grid-template-columns:1fr}}

/* el detalle: logotipo arriba y la cita ENTRE COMILLAS (es literal) */
.vzd__logo{display:flex;align-items:center;height:40px;margin:0 0 18px}
.vzd__logo img{height:34px;width:auto;max-width:170px;object-fit:contain}
.vzd__logo b{font-family:var(--titulo);font-weight:700;font-size:1.6rem;color:var(--navy)}
.vzd__logo:empty{display:none}
.vzd__f b{font-family:var(--titulo);font-weight:700;font-size:1.125rem}

/* ═══ ECOSISTEMA · solo el primer mensaje ═════════════════════════════════ */
.eco__cuerpo .eco__p{font-size:clamp(1.0625rem,.95rem + .35vw,1.3125rem);line-height:1.6;color:#D5E2EA;
  max-width:46ch}

/* ═══ EQUIPO · la foto de la moto ═════════════════════════════════════════ */
.tm__grupo{aspect-ratio:4/3}
.tm__grupo img{object-position:50% 50%}

/* ═══ ALIANZAS · la lista arranca hacia la mitad ══════════════════════════
   Titular y entradilla a la izquierda; las dos alianzas a la derecha, con
   el logotipo grande en su propia celda para que se lea como logotipo. El
   nombre queda para el lector de pantalla: el logotipo ya lo dice. */
.ali__card{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,56fr);
  gap:clamp(32px,6vw,96px);align-items:start;padding-bottom:clamp(56px,6.5vw,104px)}
.ali__cab{display:block;margin:0;padding:0;border:0}
.ali__lead{margin-top:clamp(18px,2vw,28px);max-width:40ch}
.ali__l{border-top:1px solid rgba(255,255,255,.22)}
.ali__it{grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:clamp(20px,3vw,48px)}
.ali__logo{justify-content:center;min-height:clamp(110px,10vw,150px);padding:20px;border-radius:6px;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ali__logo img{max-height:78px;max-width:min(240px,100%)}
@media (max-width:900px){
  .ali__card{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ali__it{grid-template-columns:1fr}
}

/* ═══ PIE ════════════════════════════════════════════════════════════════
   V6.2: la cita, la firma y los botones van alineados a la izquierda, al
   mismo canto que el resto de la web (60 px a 1440). El desplazamiento en
   escalera de la V6 descompensaba el bloque frente a la foto. */
.ftr--v6 .dir{margin-top:0}

.btn-in{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:12px 16px;
  border-radius:4px;background:#0A66C2;color:#fff;text-decoration:none;
  font-family:var(--sans);font-size:.875rem;font-weight:500;line-height:1.4;letter-spacing:-.02em;
  text-transform:uppercase;transition:background-color .3s var(--ease)}
.ftr .btn-in,.ftr .btn-in:hover{color:#fff}
.btn-in:hover{background:#004182}
.ftr--v6 .dir__acc > *{flex:0 0 auto}
.btn-in__logo{width:18px;height:18px;fill:currentColor;flex:0 0 auto}

.ftr--v6 .ftr__base{margin-top:0;padding:16px 0;border-top:1px solid var(--filete);
  border-bottom:0;font-size:.8125rem}
.ftr--v6 .ftr__legal{font-size:.8125rem}
.ftr__leg ul{display:flex;flex-wrap:wrap;gap:0 24px;margin:0;padding:0;list-style:none}
.ftr__leg a{display:inline-flex;align-items:center;min-height:44px;font-size:.8125rem;
  color:var(--gris);text-decoration:none}
.ftr__leg a:hover{color:var(--naran-txt);text-decoration:underline;text-underline-offset:4px}
.ftr__leg .ftr__arriba{font-family:var(--sans);font-weight:400;letter-spacing:0;text-transform:none}
.ftr--v6 .ftr__xl{margin-top:clamp(12px,1.6vw,24px);margin-bottom:clamp(16px,2vw,28px)}