/* ═══════════════════════════════════════════════════════════════════════════
   HeliOx · VERSIÓN 3 · componentes de sección
   Los tokens y la base están en heliox.css. Aquí solo van las piezas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ BOTONES ═══════════════════════════════════════════════════════════
   El único botón de la web es ahora `.btn--ref`, y vive en `heliox.css`
   junto a la cabecera, porque es una pieza del sistema de portada. Tiene
   tres variantes:

     .btn--ref      fondo de acento, tinta negra · la llamada principal
     .btn--ref-2    fantasma, sin fondo · la secundaria sobre claro
     .btn--ref-b    fondo blanco, tinta negra · la secundaria sobre oscuro

   El juego antiguo —`.btn`, `.btn--tinta`, `.btn--linea`, `.btn--claro`,
   `.btn--sm` y `.enl`, pastillas de radio 999 con el icono dentro de un
   disco— se retiró al pasar toda la web al diseño nuevo. No queda ni un
   uso en las tres páginas.                                              */

/* ═══ 2 · ENFOQUE · la carta topográfica ══════════════════════════════════
   Sustituye a la fotografía de la orilla que cerraba la portada. Misma
   pieza que el resto del sistema —radio 8, sangrada 10 px sobre el gris de
   portada—, pero en azul marino, y clavada al scroll como los números y el
   método.

   CONTRASTE. El blanco sobre el fondo #07131D da 18,4:1. Las curvas son de
   1,15 px y nunca pasan del 62 % de opacidad, así que no bajan la medida de
   forma apreciable; aun así, un velo lateral oscurece la mitad izquierda,
   que es donde cae todo el texto, y ahí el peor caso sube a 19:1.        */
.mar{background:var(--papel);padding:0 10px 10px}
/* El recorrido baja de 260 a 200 vh: con el contenido repartido en dos
   columnas la sección ya no necesita tanto alto, y a 260 se hacía larga. */
.mar__pista{height:200vh}
.mar__fijo{position:sticky;top:74px}
.mar__card{
  position:relative;isolation:isolate;overflow:hidden;
  /* A pantalla completa: la tarjeta ocupa el alto del viewport menos la
     cápsula de la cabecera y el sangrado de abajo. */
  height:calc(100vh - 84px);
  border-radius:8px;background:var(--marino);
  --nivel:6;
}

/* Dos columnas: el texto a la izquierda y el mapa a la derecha. */
.mar__in{
  position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,38fr) minmax(0,58fr);
  gap:clamp(1.5rem,3vw,3rem);align-items:center;
  height:100%;padding:clamp(2.5rem,4vw,3.5rem) clamp(2rem,3.6vw,3.25rem);
}
.mar__t{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,.95rem + 1.6vw,2.2rem);line-height:1.16;
  letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance;
  color:var(--espuma);
}
.mar__d{margin-top:clamp(1.1rem,1.8vw,1.5rem);max-width:38ch;
  color:var(--grisaz);font-size:1.0625rem;line-height:1.55}

/* ── El mapa ─────────────────────────────────────────────────────────────
   El SVG llena el panel estirado (`preserveAspectRatio="none"`), de modo
   que un 51,5 % del viewBox es un 51,5 % del panel. Sin esa equivalencia no
   hay forma de poner un disco justo encima de una curva.               */
.mar__mapa{position:relative;width:100%;height:100%;min-height:0}
/* El SVG termina en seco en los cantos del panel y ahí se veía el corte
   recto de todas las curvas a la vez. Dos degradados cruzados —uno
   horizontal y otro vertical— lo desvanecen por los CUATRO lados. Se cruzan
   con `mask-composite: intersect`, que es lo que hace que también las
   esquinas se apaguen.

   Va sobre el SVG entero y no sobre cada trazado: así es un solo compuesto
   y no treinta. */
.mar__curvas{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 15%,#000 87%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%);
  mask-image:
    linear-gradient(to right,transparent 0,#000 15%,#000 87%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;}

/* Las curvas de fondo: solo se ve la ventana que viaja con el scroll. */
.mar__linea{
  fill:none;stroke:var(--carta);stroke-width:2;
  vector-effect:non-scaling-stroke;
  --d:max(calc(var(--n) - var(--nivel)),calc(var(--nivel) - var(--n)));
  /* La rampa es larga a propósito (±5,5 cotas): una curva que nace lo hace
     muy tenue y tarda en llegar a su tono, de modo que nunca aparece de
     golpe al lado de otra ya encendida. Ese «salto» junto a una vecina es
     justo lo que se leía como una línea duplicada mal alineada. */
  opacity:calc((1 - var(--d) / 5.5) * .80);
}
/* Las tres de ancla NO se mueven ni se desvanecen: son las líneas sobre las
   que se apoyan los marcadores, y si parpadearan el disco quedaría
   flotando. Van un punto más marcadas que el fondo. */
.mar__ancla{
  fill:none;stroke:var(--carta);stroke-width:2.4;opacity:.95;
  vector-effect:non-scaling-stroke;
}

/* ── Los tres marcadores ─────────────────────────────────────────────────
   Cada uno se coloca por `--x`/`--y`, que son las coordenadas exactas del
   campo de alturas escritas por el generador en el HTML. El `translate`
   deja el CENTRO DEL DISCO en ese punto y la palabra a su izquierda, como
   en la referencia.                                                      */
.mar__l{position:absolute;inset:0;margin:0;padding:0;list-style:none;
  pointer-events:none}
.mar__e{
  position:absolute;left:var(--x);top:var(--y);
  display:flex;align-items:center;gap:clamp(.6rem,1vw,1rem);
  transform:translate3d(calc(-100% + var(--disco) / 2),calc(-50% + 18px),0);
  --disco:clamp(15px,1.55vw,22px);
  opacity:0;
  transition:opacity .6s var(--ease),transform .7s var(--muelle);
}
.mar__e.is-visto{
  opacity:1;
  transform:translate3d(calc(-100% + var(--disco) / 2),-50%,0);
}
.mar__v{
  font-family:var(--display);font-weight:400;white-space:nowrap;
  font-size:clamp(1.25rem,.75rem + 1.5vw,2.1rem);line-height:1.05;
  letter-spacing:-.02em;color:var(--espuma);
  /* Un halo del propio marino: la palabra cruza por encima de las curvas y
     sin esto los trazos se le meten entre las letras. */
  text-shadow:0 0 12px var(--marino),0 0 5px var(--marino);
}
.mar__p{
  flex:0 0 auto;width:var(--disco);height:var(--disco);border-radius:50%;
  background:var(--carta);
  box-shadow:0 0 0 0 rgba(47,95,224,.55);
  transition:box-shadow .9s var(--ease);
}
.mar__e.is-visto .mar__p{box-shadow:0 0 0 14px rgba(47,95,224,0)}

/* ── Sin clavar ──────────────────────────────────────────────────────────
   El mapa no cabe al lado del texto: las dos columnas se apilan y el panel
   pasa a ser una banda 4:3 debajo. Los marcadores siguen anclados a sus
   curvas —son porcentajes, no píxeles— y se ven los tres a la vez.      */
@media (max-width:980px),(max-height:759px){
  .mar__pista{height:auto}
  .mar__fijo{position:static}
  .mar__card{height:auto;--nivel:6}
  .mar__in{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(2rem,5vw,3rem);
    padding:clamp(2.5rem,7vw,4rem) clamp(1.25rem,4vw,3.5rem);
  }
  .mar__d{max-width:none}
  .mar__mapa{aspect-ratio:4/3;height:auto}
  .mar__e{opacity:1;transform:translate3d(calc(-100% + var(--disco) / 2),-50%,0)}
  .mar__card::after{background:linear-gradient(170deg,
    rgba(7,19,29,.74) 0%,rgba(7,19,29,.50) 40%,rgba(7,19,29,.12) 74%,rgba(7,19,29,0) 100%)}
}

@media (prefers-reduced-motion:reduce){
  .mar__e{transition-duration:.15s}
}

/* ═══ 3 · MÉTODO HIDEOX · clavado al scroll ══════════════════════════════
   MISMO diseño y misma mecánica que la sección de números (§4 ter del
   LEEME): tarjeta de panel sobre el gris de portada, tres columnas de
   412 px con 32 px de hueco, la tarjeta blanca en el centro con la inicial
   subiendo como un tambor y un velo que difumina los dos cantos.

   Lo único que cambia respecto a los números es la columna izquierda: ahí
   no va un índice de etiquetas, va el titular con el logotipo de HIDEOX,
   la entradilla y, debajo, las seis letras sueltas en vertical, que se van
   marcando conforme avanza el scroll.                                    */
.hdx{background:var(--papel);padding:0 10px 10px}
/* 6 dimensiones × 55 vh de recorrido, más la pantalla que se come el pin. */
.hdx__pista{height:430vh}
.hdx__fijo{position:sticky;top:74px}
.hdx__card{
  position:relative;display:flex;flex-direction:column;
  height:calc(100vh - 84px);
  padding:70px 60px;
  background:var(--panel);border-radius:8px;overflow:hidden;
}
/* Aquí la rejilla NO lleva alto fijo, al contrario que en los números: la
   columna izquierda —titular, logotipo, entradilla e índice de letras— pasa
   de 412 px y, con un alto fijo, la fila crecía igual y la tarjeta blanca
   dejaba de ser cuadrada. Se deja crecer la rejilla y el cuadrado lo
   garantiza el `aspect-ratio` del panel. */
.hdx__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;
  min-height:412px;align-items:center;margin-block:auto;
}

/* ── 1 · titular, entradilla e índice de letras ──────────────────────── */
/* El índice a 28 px ocupa 334 px él solo, así que el hueco de la columna se
   aprieta un punto para que el titular, la entradilla y el índice quepan
   dentro de la tarjeta sin desbordarla. */
.hdx__izq{display:flex;flex-direction:column;justify-content:center;
  gap:clamp(1.1rem,1.8vw,1.6rem)}
.hdx__t{font-size:var(--t-h2s);color:var(--grafito);max-width:14ch;text-wrap:balance}
/* El logotipo va dentro del titular, alineado con la línea base del texto
   y a su misma altura de mayúscula. Al ser un <img> dentro del <h2>, el
   `alt` es el que completa la frase: «Un método contrastado: HIDEOX». */
/* Un punto más grande que antes (.62em → .78em) y con 10 px de aire por
   arriba. El `translateY` es lo que lo BAJA: al ir alineado a la línea base,
   el margen superior no lo mueve, solo abre la caja de línea. Con .05em
   quedaba alto respecto a «contrastado:»; a .17em las dos cosas se apoyan
   en el mismo renglón óptico. */
.hdx__logo{display:inline-block;width:auto;height:.78em;
  margin-top:10px;vertical-align:baseline;transform:translateY(.17em)}
.hdx__d{max-width:40ch;color:var(--gris);font-size:.975rem;line-height:1.5}

/* ── El índice ───────────────────────────────────────────────────────────
   Medidas calcadas de la referencia de composición:

     cuerpo          28 px, peso 400, interlineado 1,4 (39,2 px de caja)
     hueco entre dos 20 px
     disco           10 × 10, a 10 px del texto
     pendientes      opacidad .5

   CONTRASTE. A 28 px esto es «texto grande» y el mínimo baja a 3:1. Los
   pendientes van en `--grafito` al 50 %, que da **3,62:1** sobre el panel;
   con `--gris` al 50 % se quedaban en 2,5:1 y no pasaban. Los marcados van
   en `--acento-txt`, 4,61:1, que pasa incluso como texto normal.        */
.hdx__paso{display:flex;flex-direction:column;gap:20px;
  margin:0;padding:0;list-style:none}
.hdx__paso li{
  display:flex;align-items:center;gap:10px;
  font-size:28px;line-height:1.4;letter-spacing:-.02em;
  color:var(--grafito);opacity:.5;
  transition:color .45s var(--ease),opacity .45s var(--ease),
    transform .45s var(--ease);
}
.hdx__paso li i{
  flex:0 0 auto;width:10px;height:10px;border-radius:50%;
  background:currentColor;opacity:.55;
  transition:background-color .45s var(--ease),opacity .45s var(--ease),
    transform .45s var(--muelle);
}
.hdx__paso li.is-hecha{color:var(--acento-txt);opacity:1}
.hdx__paso li.is-hecha i{background:var(--acento);opacity:1}
.hdx__paso li.is-activa{transform:translateX(5px)}
.hdx__paso li.is-activa i{transform:scale(1.3)}

/* ── 2 · el tambor de la inicial ─────────────────────────────────────── */
.hdx__panel{position:relative;overflow:hidden;border-radius:8px;background:#fff;
  aspect-ratio:1;align-self:center}
.hdx__tira{
  position:absolute;left:0;right:0;top:50%;
  transform:translate3d(0,-50%,0);
  transition:transform .85s cubic-bezier(.65,0,.35,1);
}
.hdx__k{
  height:264px;display:flex;align-items:center;justify-content:center;
  margin:0;font-family:var(--display);font-size:190px;font-weight:300;
  line-height:190px;letter-spacing:-.02em;color:var(--grafito);
}
.hdx__velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(#fff,rgba(255,255,255,0) 30%,
    rgba(255,255,255,0) 70%,#fff);
}

/* ── 3 · el nombre de la dimensión y qué significa ───────────────────── */
/* Más separada de la tarjeta blanca de lo que da el hueco de la rejilla:
   la descripción estaba pegada al canto del tambor. */
.hdx__col{display:flex;flex-direction:column;justify-content:center;
  padding-left:clamp(1rem,2.2vw,2.5rem)}
.hdx__es{display:grid}
.hdx__e{
  grid-area:1/1;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s;
}
.hdx__e.is-activa{opacity:1;visibility:visible;transition-delay:0s,0s}
/* El nombre ya no se repite a la derecha: vive en el índice de la
   izquierda. `.hdx__n` solo entra en juego cuando el índice se oculta, que
   es en apilado. */
.hdx__n{display:none}
/* Dos puntos más que antes: 18 → 20 px. */
.hdx__x{margin:0;font-size:1.25rem;line-height:1.45;letter-spacing:-.02em;
  color:var(--grafito);max-width:32ch}

/* ── Sin clavar ──────────────────────────────────────────────────────────
   Igual que en los números: las tres columnas se deshacen con
   `display: contents` y las seis dimensiones se leen apiladas —inicial,
   nombre y explicación—. No se duplica contenido.                        */
@media (max-width:980px),(max-height:759px){
  .hdx__pista{height:auto}
  .hdx__fijo{position:static}
  .hdx__card{height:auto;padding:clamp(2.5rem,7vw,4.5rem) clamp(1.25rem,4vw,3.5rem)}
  .hdx__grid{grid-template-columns:minmax(0,1fr);gap:0;min-height:0;align-items:start}
  .hdx__panel{aspect-ratio:auto}

  /* La columna izquierda se queda entera arriba; solo se deshacen el
     tambor y la columna de textos, que son los que hay que intercalar. */
  .hdx__izq{grid-row:1;margin-bottom:clamp(2.5rem,6vw,4rem)}
  /* En apilado el índice sobra: los seis nombres se repiten justo debajo,
     uno por dimensión, junto a su inicial. */
  .hdx__paso{display:none}
  /* Y como el índice se va, el nombre vuelve junto a su explicación. */
  .hdx__n{display:block;margin:0 0 .5rem;
    font-family:var(--display);font-size:var(--t-h3);line-height:1.15;
    letter-spacing:-.02em;color:var(--grafito)}
  .hdx__panel,.hdx__tira,.hdx__col,.hdx__es{display:contents}
  .hdx__velo{display:none}

  .hdx__k{
    height:auto;justify-content:flex-start;
    font-size:clamp(4rem,19vw,7.5rem);line-height:.92;
    margin:.2rem 0 .35rem;color:var(--acento-txt);
  }
  .hdx__e{
    opacity:1;visibility:visible;grid-area:auto;
    padding-bottom:clamp(2rem,6vw,3rem);
    border-bottom:1px solid var(--filete);
  }
  .hdx__x{max-width:72ch;font-size:1rem}

  /* Cada dimensión ocupa dos filas: la inicial y el bloque de texto. */
  .hdx__k:nth-child(1){grid-row:2}  .hdx__e:nth-child(1){grid-row:3}
  .hdx__k:nth-child(2){grid-row:4}  .hdx__e:nth-child(2){grid-row:5}
  .hdx__k:nth-child(3){grid-row:6}  .hdx__e:nth-child(3){grid-row:7}
  .hdx__k:nth-child(4){grid-row:8}  .hdx__e:nth-child(4){grid-row:9}
  .hdx__k:nth-child(5){grid-row:10} .hdx__e:nth-child(5){grid-row:11}
  .hdx__k:nth-child(6){grid-row:12} .hdx__e:nth-child(6){grid-row:13}
  .hdx__e:nth-child(6){border-bottom:0;padding-bottom:0}
}

@media (prefers-reduced-motion:reduce){
  .hdx__tira{transition-duration:.15s}
  .hdx__paso li,.hdx__e{transition-duration:.15s}
}

/* ═══ FONDO RISOGRÁFICO ══════════════════════════════════════════════════
   Era el fondo de la columna izquierda de «Empresas que no hace falta
   nombrar». Esa sección se retiró, pero el fondo se conserva: ahora viste
   la sección de opiniones, a sangre completa. Es el mismo elemento, el
   mismo CSS y el mismo JS.                                              */

/* Papel, tres bandas verticales que se disuelven hacia arriba, grano de
   risografía y viñeta, todo en blancos y grises neutros. Con degradados y
   un SVG en línea: cero imágenes y cero peticiones.

   Y es interactivo: el halo de luz, las bandas y el grano siguen al
   puntero con desplazamientos de pocos píxeles y un suavizado exponencial.
   El movimiento es mínimo a propósito —lo contrario de un efecto de
   videojuego—: lo que se busca es que el papel parezca tener luz real.

   Las variables las escribe el JS sobre el propio elemento; los valores de
   aquí son el estado en reposo, centrado, para que el fondo se vea bien
   aunque el script no llegue a cargar o no haya ratón.               */
.riso{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  --raton-x:50%; --raton-y:50%;
  --desp-x:0px;  --desp-y:0px;
  --col-1-x:0px; --col-1-y:0px;
  --col-2-x:0px; --col-2-y:0px;
  --col-3-x:0px; --col-3-y:0px;
  --grano-x:0px; --grano-y:0px;
  --luz:.16; --vineta:.10;
  background:
    radial-gradient(ellipse 52% 44% at var(--raton-x) var(--raton-y),
      rgba(255,255,255,.55) 0%,rgba(255,255,255,.22) 27%,transparent 72%),
    /* La masa de tinta de la esquina inferior izquierda: era petróleo
       (#2E474F) y ahora es gris neutro. Su punto más oscuro es #C8C9CE,
       que con la tinta #0B1B24 encima da 11,2:1. */
    radial-gradient(ellipse 108% 88% at 6% 108%,
      #C8C9CE 0%,#CFD0D4 28%,rgba(214,215,219,.88) 45%,
      rgba(226,227,230,.43) 62%,rgba(247,247,248,0) 82%),
    radial-gradient(ellipse 85% 66% at 93% 95%,
      rgba(205,206,211,.30) 0%,rgba(223,224,228,.11) 42%,transparent 73%),
    linear-gradient(145deg,#FFFFFF 0%,#F8F8F9 44%,#F1F1F3 100%);
}

/* Bruma de iluminación: se mueve muy poco respecto al puntero. */
.riso__bruma{
  position:absolute;z-index:1;inset:-15%;opacity:.8;mix-blend-mode:soft-light;
  background:
    radial-gradient(ellipse 46% 35% at var(--raton-x) var(--raton-y),
      rgba(255,255,255,.30) 0%,rgba(255,255,255,.12) 32%,transparent 72%),
    radial-gradient(ellipse 75% 42% at 38% 45%,
      rgba(255,255,255,.18) 0%,transparent 74%);
  transform:translate3d(var(--desp-x),var(--desp-y),0);
  will-change:transform;
}

/* Reflejo móvil, más definido y más rápido que la bruma. */
.riso__reflejo{
  position:absolute;z-index:3;inset:-20%;opacity:var(--luz);
  background:radial-gradient(ellipse 28% 22% at var(--raton-x) var(--raton-y),
    rgba(255,255,255,.75) 0%,rgba(255,255,255,.26) 35%,transparent 75%);
  filter:blur(22px);mix-blend-mode:screen;
  transform:translate3d(calc(var(--desp-x) * 1.8),calc(var(--desp-y) * 1.8),0);
  will-change:transform,opacity;
}

/* Las tres bandas: nítidas abajo, disueltas arriba. */
.riso__cols{
  position:absolute;z-index:2;inset:0;display:grid;
  grid-template-columns:25.4% 25.4% 24.8%;justify-content:end;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 15%,
    rgba(0,0,0,.1) 22%,rgba(0,0,0,.53) 32%,#000 46%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,transparent 15%,
    rgba(0,0,0,.1) 22%,rgba(0,0,0,.53) 32%,#000 46%,#000 100%);
}
.riso__col{position:relative;height:100%;opacity:.9;will-change:transform}
/* Cada banda a distinta velocidad: no es 3D, son capas de papel separadas. */
.riso__col:nth-child(1){
  background:linear-gradient(to bottom,rgba(171,173,180,.06) 0%,
    rgba(171,173,180,.40) 38%,rgba(171,173,180,.62) 73%,rgba(171,173,180,.66) 100%);
  transform:translate3d(var(--col-1-x),var(--col-1-y),0);
}
.riso__col:nth-child(2){
  background:linear-gradient(to bottom,rgba(182,184,190,.05) 0%,
    rgba(182,184,190,.36) 38%,rgba(182,184,190,.58) 72%,rgba(182,184,190,.64) 100%);
  transform:translate3d(var(--col-2-x),var(--col-2-y),0);
}
.riso__col:nth-child(3){
  background:linear-gradient(to bottom,rgba(193,195,200,.05) 0%,
    rgba(193,195,200,.34) 38%,rgba(193,195,200,.55) 72%,rgba(193,195,200,.62) 100%);
  transform:translate3d(var(--col-3-x),var(--col-3-y),0);
}
.riso__cols::after{
  content:"";position:absolute;inset:0;opacity:.72;mix-blend-mode:soft-light;
  background:
    radial-gradient(ellipse 46% 35% at var(--raton-x) var(--raton-y),
      rgba(255,255,255,.22) 0%,transparent 73%),
    linear-gradient(to bottom,rgba(255,255,255,.16) 0%,transparent 40%,
      rgba(120,123,130,.05) 100%);
}

/* Grano de risografía en dos frecuencias, embebido como SVG. */
.riso__grano{
  position:absolute;z-index:5;inset:-35%;opacity:.38;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='4' seed='27' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1.9 0 0 0 -0.45 0 1.9 0 0 -0.45 0 0 1.9 0 -0.45 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.82'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:180px 180px;
  background-position:var(--grano-x) var(--grano-y);
  will-change:background-position;
}
.riso__grano::after{
  content:"";position:absolute;inset:0;opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='95' height='95' viewBox='0 0 95 95'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.15' numOctaves='2' seed='8'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.44'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:95px 95px;
}

/* Viñeta tenue, también centrada en el puntero. */
.riso__vineta{
  position:absolute;z-index:6;inset:0;opacity:var(--vineta);
  mix-blend-mode:multiply;
  background:radial-gradient(ellipse 85% 75% at var(--raton-x) var(--raton-y),
    transparent 35%,rgba(120,123,130,.08) 74%,rgba(120,123,130,.20) 100%);
}

/* Velo. Antes iba al revés: el texto era blanco y el velo lo oscurecía
   todo para poder calarlo. Ahora el fondo es blanco y el texto es tinta,
   así que el velo hace lo contrario —aclarar el tercio bajo, que es donde
   la masa de gris y las tres bandas se juntan y donde cae el botón—. Peor
   caso medido con la tinta #0B1B24 encima: 10,4:1. */
.riso__velo{
  position:absolute;z-index:7;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.16) 30%,
    rgba(255,255,255,.30) 58%,rgba(255,255,255,.42) 80%,rgba(255,255,255,.46) 100%);
}

@media (max-width:640px){
  .riso__cols{grid-template-columns:26% 25% 24%}
  .riso__grano{opacity:.32}
  .riso__reflejo{filter:blur(28px)}
}
@media (hover:none),(pointer:coarse){.riso__reflejo{opacity:.14}}
@media (prefers-reduced-motion:reduce){
  .riso__bruma,.riso__reflejo,.riso__col,.riso__grano{
    transform:none!important;will-change:auto}
}

/* ═══ 4 · SOCIOS · humanizamos la transformación ══════════════════════════
   El retrato es un círculo: los dos puntos del logotipo convertidos en
   sistema. Detrás, dos anillos concéntricos de 1 px.                     */
.soc{position:relative;overflow:hidden;
  padding-bottom:clamp(3rem,5.5vw,5rem)}
.soc__in{display:grid;gap:clamp(2.5rem,5vw,5rem);
  grid-template-columns:minmax(0,55fr) minmax(0,38fr);align-items:center}
.soc__t{max-width:15ch}
.soc__q{margin:clamp(1.5rem,2.6vw,2rem) 0 0;max-width:34ch;
  font-family:var(--display);
  font-size:clamp(1.25rem,1rem + 1.1vw,1.8rem);line-height:1.42;
  color:var(--tinta)}

.soc__fig{position:relative;margin:0;display:grid;place-items:center;
  isolation:isolate;width:100%;max-width:min(100%,430px);justify-self:end}
.soc__fig img{border-radius:50%;width:100%;aspect-ratio:1;object-fit:cover}
.soc__anillo{
  position:absolute;border-radius:50%;border:1px solid var(--filete-fuerte);
  z-index:-1;pointer-events:none;
}
.soc__anillo--1{inset:-7%}
.soc__anillo--2{inset:-17%;border-color:var(--filete)}
.soc__anillo--3{inset:-28%;border-style:dashed;border-color:var(--filete)}

/* Los cuatro pilares. Antes iban en una fila de cuatro columnas debajo de
   la sección; ahora van en COLUMNA, de arriba abajo, ocupando el sitio que
   dejaron los nombres y las biografías de los socios: el numeral a la
   izquierda y el texto a su derecha, con un filete entre pilar y pilar.  */
.pil{list-style:none;display:flex;flex-direction:column;
  margin-top:clamp(2rem,3.5vw,3rem);padding:0}
.pil li{
  display:flex;align-items:flex-start;gap:clamp(1rem,1.6vw,1.35rem);
  padding-block:clamp(1.1rem,1.9vw,1.5rem);
  border-top:1px solid var(--filete);
}
.pil li:last-child{border-bottom:1px solid var(--filete)}

/* El numeral: cuadrado macizo, sin radio y sin anillo.

   Va EXACTAMENTE con el mismo par de colores que los botones azules —fondo
   `--acento` (#139DD9) y tinta `--acento-tinta` (#0B0B0B)—, que es lo que
   se pidió. La cifra no puede ser blanca: sobre ese azul el blanco se queda
   en **3,06:1** y no llega a AA, mientras que la tinta del botón da
   **6,42:1**. Es el mismo criterio que ya sigue el botón.               */
.pil__k{
  flex:0 0 auto;display:grid;place-items:center;
  width:38px;height:38px;border-radius:0;
  background:var(--acento);color:var(--acento-tinta);
  font-size:.8rem;font-weight:500;line-height:1;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.pil__c{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.pil__t{font-family:var(--display);font-size:1.22rem;line-height:1.2}
.pil__d{font-size:.925rem;line-height:1.6;color:var(--gris);max-width:46ch}
@media (max-width:980px){
  .soc__in{grid-template-columns:1fr}
}

/* ═══ 5 · OPINIONES ══════════════════════════════════════════════════════
   La sección va sobre el fondo risográfico, a sangre de lado a lado. Hace
   falta que sea un contexto posicionado y con `overflow` recortado, porque
   el `.riso` es `position:absolute; inset:0` y sus capas se salen de la
   caja a propósito (`inset:-15%`, `-20%`, `-35%`).

   CONTRASTE sobre el punto más denso del fondo, que con el velo aligerado
   es #B0B2B8 y cae en la esquina inferior izquierda:
     cita #0B1B24 → 8,28:1   nombre #0B1B24 → 8,28:1
     cargo #3C4046 → 4,92:1  empresa #08425B → 5,10:1
   Todos pasan AA. Ver la nota de los dos textos pequeños más abajo.     */
.opi{position:relative;isolation:isolate;overflow:hidden}
.opi__in{position:relative;z-index:1}

/* ── Las tres bandas, aquí sin cantos ────────────────────────────────────
   En la columna estrecha para la que se diseñó el fondo, las bandas iban en
   rejilla pegadas a la derecha y ocupaban el 75,6 % del ancho: el canto
   izquierdo del grupo caía al 24 % y se leía como un elemento más.

   A sangre y con la cita encima, ese canto es un corte vertical justo bajo
   el texto. Aquí las bandas se sacan de la rejilla, se **superponen** y
   cada una lleva un degradado de máscara horizontal, de modo que entran y
   salen fundidas en vez de empezar de golpe.

   La primera —que es la de gris más denso— arranca **fuera del borde
   izquierdo** y está maciza desde el píxel 0: el tono más oscuro empieza a
   la izquierda del todo y no hay ningún canto que ver. El −2 % del `left`
   es para que el seguimiento del puntero, que la desplaza hasta 3 px, no
   llegue a descubrir una franja clara en el borde.                       */
.opi .riso__cols{display:block}
.opi .riso__col{position:absolute;top:0;bottom:0;height:auto}
.opi .riso__col:nth-child(1){
  left:-2%;width:56%;
  -webkit-mask-image:linear-gradient(to right,#000 0 52%,transparent 100%);
  mask-image:linear-gradient(to right,#000 0 52%,transparent 100%);
}
.opi .riso__col:nth-child(2){
  left:32%;width:46%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 34% 62%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 34% 62%,transparent 100%);
}
.opi .riso__col:nth-child(3){
  left:60%;width:52%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 36%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 36%,#000 100%);
}

/* La banda de la izquierda es la más densa de las tres, y aquí se sube un
   punto más: es la que tiene que leerse como «el gris más oscuro», y tiene
   que leerse desde el borde. */
.opi .riso__col:nth-child(1){
  background:linear-gradient(to bottom,rgba(163,166,174,.14) 0%,
    rgba(163,166,174,.52) 30%,rgba(163,166,174,.74) 62%,rgba(163,166,174,.80) 100%);
}

/* El desvanecido vertical del grupo se afloja. El original disolvía las
   bandas hasta el 46 % de la altura porque en la columna estrecha el texto
   caía arriba; aquí la cita está a media altura y con aquel valor las
   bandas no llegaban a verse donde hacen falta. */
.opi .riso__cols{
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.30) 0%,
    rgba(0,0,0,.62) 26%,rgba(0,0,0,.88) 52%,#000 78%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.30) 0%,
    rgba(0,0,0,.62) 26%,rgba(0,0,0,.88) 52%,#000 78%);
}

/* El velo se aligera mucho. Estaba puesto para garantizar el contraste de
   un texto sobre papel casi blanco, pero apagaba justo lo que ahora se
   quiere ver. Peor caso medido con la tinta #0B1B24 sobre el punto más
   denso del fondo (#B0B2B8): **8,6:1**. Sigue sobrado de AA.            */
.opi .riso__velo{
  background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,
    rgba(255,255,255,.10) 50%,rgba(255,255,255,.14) 100%);
}
.opi__c{margin:0;display:grid;
  grid-template-columns:clamp(3.5rem,7vw,7rem) minmax(0,1fr);
  gap:clamp(1.25rem,3vw,3rem);margin-top:clamp(2.5rem,4.5vw,4rem)}
.opi__eje{display:flex;flex-direction:column;align-items:center;gap:1rem;
  color:var(--acento-txt)}
.opi__marca{font-family:var(--display);font-size:clamp(3.5rem,7vw,6rem);
  line-height:.6;color:var(--acento)}
.opi__filete{flex:1 1 auto;width:1px;background:var(--filete-fuerte);min-height:3rem}
.opi__q{margin:0}
.opi__q p{font-family:var(--display);font-size:clamp(1.4rem,1rem + 1.8vw,2.4rem);
  line-height:1.3;letter-spacing:-.008em;max-width:31ch}
/* El `padding-bottom` es el aire que pedía David bajo el pie de la cita:
   el nombre quedaba pegado al canto de la sección. */
.opi__f{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.1rem;
  margin-top:clamp(1.75rem,3vw,2.5rem);padding-top:1.25rem;
  padding-bottom:clamp(2.5rem,5vw,4.5rem);
  border-top:1px solid var(--filete)}
.opi__n{font-weight:500}
/* ── Los dos textos pequeños del pie de cita ─────────────────────────────
   Caen en la esquina inferior izquierda, que con el velo aligerado es justo
   el punto más denso del fondo (#B0B2B8). Ahí los colores de la casa no
   llegan: `--gris` se queda en 3,32:1 y `--acento-txt` en 2,39:1. Los dos
   se oscurecen solo aquí:

     cargo    #3C4046 → 4,92:1 sobre el punto denso · 10,00:1 sobre el claro
     empresa  #08425B → 5,10:1 sobre el punto denso · 10,82:1 sobre blanco

   El azul vivo NO se retira de la sección: sigue en la comilla y en el
   filete, que son grafismo y no tienen que cumplir contraste de texto.   */
.opi__r,.opi__e{font-size:.9rem;color:#3C4046}
.opi__e{font-size:var(--t-lab);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:#08425B}

/* ═══ 6 · CLAIM ═════════════════════════════════════════════════════════
   La única sección profunda de la web, y está justificada: un velero
   escorado con la tripulación colgada de la banda. Mojarse, literal.

   El velo ya NO cubre la sección entera. Es un degradado que sube desde
   abajo y llega a 0 a media altura, así que la fotografía se ve limpia por
   arriba —la tripulación, la vela, el cielo— y solo se oscurece la franja
   baja, que es donde cae el texto.

   Al quitarse la entradilla y bajar el titular al cuerpo de «Enfoque», el
   bloque de texto pasó de 335 px a ~130 px y ocupa solo del 28 % al 10 %
   de la altura contando desde abajo. El velo se ha recortado en
   consecuencia: fuerte hasta ese 28 % y a 0 en el 66 %, así que se ve más
   fotografía limpia que antes. CONTRASTE sobre el punto más claro que
   queda bajo el texto (la espuma de la proa, #EDEFF1):
     titular, en su borde alto (velo .78) → **9,8:1**
     titular y botón, abajo (velo .90)    → **14,9:1**
   Si se cambia la fotografía por otra más clara abajo, hay que volver a
   medirlo: ahora mismo no hay velo que salve la mitad alta.             */
.claim{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--prof);color:var(--espuma);
  /* Un punto más alta que antes (88 → 96 svh) y con tope mayor. */
  min-height:min(96svh,940px);
  display:grid;align-items:end;justify-items:center;text-align:center;
  /* El contenido se alinea abajo, pero con aire: no pegado al canto. */
  padding-block:clamp(4rem,8vw,6rem) clamp(3.5rem,6vw,5.5rem);
}
.claim__bg{position:absolute;inset:0;z-index:-4;width:100%;height:100%;
  object-fit:cover;object-position:50% 38%}
/* Grano de película sobre la fotografía y DEBAJO del velo: el ruido tiene
   que ensuciar la imagen, no el degradado. Es el mismo SVG de turbulencia
   que ya usa `.grano` en el resto de la web, a más frecuencia y más suave,
   porque aquí va sobre una foto y no sobre papel. */
.claim__grano{
  position:absolute;inset:0;z-index:-3;pointer-events:none;
  opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='fg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23fg)' opacity='.62'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
.claim__velo{
  position:absolute;inset:0;z-index:-2;
  background:linear-gradient(to top,
    rgba(3,20,30,.90) 0%,
    rgba(3,20,30,.87) 18%,
    rgba(3,20,30,.78) 29%,
    rgba(3,20,30,.50) 40%,
    rgba(3,20,30,.20) 52%,
    rgba(3,20,30,0)   66%);
}
/* Mismo tratamiento que el titular de «Enfoque»: versales, peso 400 y la
   misma escala. Los dos titulares de las secciones a sangre quedan así
   emparejados. */
.claim__t{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,.95rem + 1.6vw,2.2rem);line-height:1.16;
  letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance;
  max-width:22ch;margin-inline:auto;
}
.claim__t em{font-style:normal;color:var(--acento)}
.claim__cta{margin-top:clamp(2rem,3.5vw,3rem);display:flex;gap:1rem;
  flex-wrap:wrap;justify-content:center}

/* ═══ 7 · CONTACTO ═══════════════════════════════════════════════════════ */
.pre{position:relative;isolation:isolate;overflow:hidden;
  /* Cierra en el MISMO tono con el que arranca el pie: si acabara en
     --aire-2 se vería la costura entre los dos. */
  background:linear-gradient(180deg,var(--espuma) 0%,var(--aire-2) 52%,var(--aire) 100%);
  padding-block:clamp(5rem,10vw,8.5rem)}
.pre__in{display:flex;justify-content:space-between;align-items:flex-end;
  gap:clamp(2rem,4vw,4rem);flex-wrap:wrap}
.pre__t{max-width:16ch}
.pre__p{margin-top:clamp(1.25rem,2.2vw,1.85rem);max-width:42ch;color:var(--gris)}
.pre__cta{display:flex;gap:1rem;flex-wrap:wrap}
/* Anillos concéntricos: los círculos de la marca a escala de página. */
.pre__anillos{position:absolute;right:-12vw;top:50%;translate:0 -50%;z-index:-1;
  width:min(64vw,760px);aspect-ratio:1;pointer-events:none}
.pre__anillos i{position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(0,75,135,.16)}
.pre__anillos i:nth-child(2){inset:13%}
.pre__anillos i:nth-child(3){inset:26%;border-style:dashed}
.pre__anillos i:nth-child(4){inset:39%}
/* Los anillos son un grafismo, no una señal: se quedan quietos. Una
   oscilación lenta a pantalla completa distrae sin comunicar nada. */

/* ═══ CABECERA DE SECCIÓN asimétrica ═════════════════════════════════════
   Titular a la izquierda, descriptor a la derecha, sobre el filete. Las
   proporciones nunca son 50/50.                                          */
.sh{display:grid;grid-template-columns:minmax(0,56fr) minmax(0,38fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:end;
  padding-top:clamp(1.25rem,2vw,1.75rem);border-top:1px solid var(--filete)}
.sh__t{max-width:17ch}
.sh__d{color:var(--gris);max-width:40ch;justify-self:end}
.prof .sh,.mez .sh{border-color:rgba(255,255,255,.28)}
.prof .sh__d,.mez .sh__d{color:rgba(255,255,255,.82)}
@media (max-width:860px){
  .sh{grid-template-columns:1fr;align-items:start}
  .sh__d{justify-self:start}
}

/* Segundo socio: un círculo menor que solapa el borde del grande. Los dos
   puntos del logotipo, a tamaño de retrato. */
.soc__fig img.soc__fig2{
  position:absolute;left:-9%;bottom:-8%;z-index:2;
  width:46%;aspect-ratio:1;border-radius:50%;object-fit:cover;
  /* El archivo ya viene recortado cuadrado y centrado en la cara, así que
     aquí no hay ventana que desplazar: antes era un 4:5 y el `18 %` movía
     el encuadre en vertical, pero en horizontal no había holgura y la cara
     se quedaba a la derecha del centro del círculo. */
  box-shadow:0 0 0 9px var(--aire);
}
@media (max-width:980px){
  .soc__fig{justify-self:start;max-width:min(100%,330px)}
  .soc__fig img.soc__fig2{left:auto;right:-8%;bottom:-6%;width:50%}
}

/* Campo con error: el filete se tiñe. El mensaje ya lo pinta el JS. */
.f--err input,.f--err textarea{border-color:#FF9C84}
.ck.f--err input{outline:2px solid #FF9C84;outline-offset:3px}
.legal .f--err input,.legal .f--err textarea{border-color:#B43802}

/* ═══ v5 · TIPOGRAFÍA DE TÍTULOS ═════════════════════════════════════════
   Todos los títulos de la web pasan a una combinación de palo seco + serifa:

   · Montserrat 700 en versales, interlineado cerrado (1.02) y −0.01em.
     Se elige Montserrat —y no otra grotesca— porque la referencia es una
     geométrica de versales anchas tipo Gotham, y de Google Fonts es la que
     tiene esas mismas proporciones (O redonda, M abierta, E ancha).
   · Playfair Display cursiva a peso 400, en minúsculas, para la palabra o
     la frase que se destaca (`<em>` dentro del título). Va un 12 % más
     grande porque su altura de x es menor que la altura de las versales.

   El cuerpo de texto, la pastilla monoespaciada y las citas de opiniones
   no cambian: siguen en Brown Pro y Chivo Mono.
   Va al final de componentes.css porque esa hoja carga después de
   heliox.css y, si no, sus reglas de sección ganarían. */
:root{
  --titulo:"Montserrat","Brown Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif-it:"Playfair Display",Georgia,"Times New Roman",serif;
}
.xl,.h1,.h2,.h2s,.h3,
.hero__t,.mar__t,.claim__t,.hdx__n,.pil__t,.legal h1,.legal h2{
  font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  letter-spacing:-.01em;
}
.hero__t,.xl,.h1{line-height:1.02}
.h2,.mar__t,.claim__t{line-height:1.06}
.h2s,.h3,.hdx__n,.pil__t,.legal h1,.legal h2{line-height:1.14}
/* Las etiquetas del mapa y las letras gigantes de HIDEOX son piezas de la
   misma familia: cambian de fuente pero conservan su peso. */
.mar__v{font-family:var(--titulo);font-weight:600;text-transform:uppercase;letter-spacing:0}
.hdx__k{font-family:var(--titulo)}
/* La comilla de las opiniones pasa a la serifa cursiva: es un signo, no un
   título, y en Playfair tiene el dibujo con gota que en palo seco no hay. */
.opi__marca{font-family:var(--serif-it);font-style:italic;font-weight:400}

/* El destacado. `text-transform:none` para que la cursiva vaya en
   minúsculas, como en la referencia; el color lo hereda del título. */
.xl em,.h1 em,.h2 em,.h2s em,.h3 em,
.hero__t em,.mar__t em,.claim__t em{
  font-family:var(--serif-it);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:0;font-size:1.12em;line-height:.9;
}
@media (max-width:767px){
  .hero__t{font-size:31px} /* «EUFEMISMOS:» en bold ocupa todo el ancho a 375 px */
}

/* v5 · El titular del hero va SIEMPRE en dos líneas: arriba la palo seco,
   abajo la cursiva. El `<em>` se hace bloque y ninguna de las dos líneas
   puede partirse; en pantallas estrechas el cuerpo baja con el ancho para
   que «TRATO BOUTIQUE» quepa entero. */
.hero__t{white-space:nowrap}
.hero__t em{display:block}
@media (max-width:1024px){
  .hero__t{font-size:min(56px,6.9vw)}
}
@media (max-width:767px){
  .hero__t{font-size:min(31px,8.4vw)}
}

/* ═══ v5 · 2 · NUESTRA FORMA DE ACOMPAÑAR · tarjetas en «D» ═══════════════
   Réplica del `card-dropdown` de la referencia, medido sobre el original:

   · tarjeta = rectángulo con el canto derecho en semicírculo
     (border-radius 0 R R 0, con R = la mitad del alto), filete de 1 px;
   · tres tarjetas seguidas, sin hueco: cada una arranca donde acaba el
     rectángulo de la anterior y su semicírculo se monta sobre la siguiente;
   · 26,6 vw de ancho × 32 vw de alto, relleno de 4 vw / 4 vw;
   · titular arriba y, abajo, texto + pastilla con el círculo y el chevrón;
   · la activa se rellena de blanco con la tinta en negro; las demás son
     solo filete blanco sobre el fondo, con el texto en blanco.

   Mismo marco que el resto de piezas: 10 px de gris y radio 8.
   Sin velo sobre los fondos. Contraste del blanco medido sobre cada imagen
   (percentil 95 de luminancia): abstracto-1 ≥ 7:1 · abstracto-2 ~2,7:1 ·
   abstracto-3 ~2,3:1 en sus zonas más claras.               */
.acp{background:var(--papel);padding:0 10px 10px}
.acp__card-sec{position:relative;isolation:isolate;overflow:hidden;
  border-radius:8px;color:var(--tinta);background:#fff;
  transition:color .5s cubic-bezier(.16,1,.3,1)}
.acp__fondos{position:absolute;inset:0;z-index:-1}
.acp__fondo{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;opacity:0;transition:opacity .8s cubic-bezier(.16,1,.3,1)}
.acp__fondo.is-activo{opacity:1}
/* v5 · sin velo: los fondos abstractos se ven tal cual */

.acp__in{padding:6vw 0 5vw}

/* cabecera asimétrica: titular a la izquierda, entradilla a la derecha,
   sobre un filete de 1 px */
.acp__cab{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,34fr);
  gap:4vw;align-items:end;margin:0 6.9vw 4.2vw;padding-bottom:2vw;
  border-bottom:1px solid rgba(255,255,255,.35)}
.acp__h{margin:0;font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,1.2rem + 2.6vw,3.6rem);line-height:1.02;letter-spacing:-.01em}
.acp__h em{font-family:var(--serif-it);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:0;font-size:1.12em;line-height:.9}
.acp__sub{margin:0 0 .5rem;font-family:var(--titulo);font-weight:700;
  text-transform:uppercase;font-size:clamp(1rem,.85rem + .45vw,1.3rem);
  line-height:1.2;letter-spacing:.01em}
.acp__lead{margin:0;font-size:1.125rem;line-height:1.6;color:inherit}

/* la fila de tarjetas */
/* Las tres «D» se reparten el mismo ancho que el filete de la cabecera:
   mismo margen lateral (6,9 vw) y cada una un tercio exacto. El alto sale
   de la proporción de la referencia (26,6 × 32). */
.acp__l{display:flex;margin:0;padding:0 6.9vw;list-style:none}
.acp__it{flex:1 1 0;min-width:0;display:flex}
.acp__card{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  box-sizing:border-box;width:100%;aspect-ratio:26.6/32;padding:4vw;
  /* 9999px: el navegador escala los radios hasta que caben, así que el
     canto derecho sale siempre en semicírculo exacto, mida lo que mida. */
  border:1px solid rgba(255,255,255,.85);border-radius:0 9999px 9999px 0;
  background:transparent;color:#fff;cursor:pointer;
  transition:background-color .4s cubic-bezier(.16,1,.3,1),color .4s cubic-bezier(.16,1,.3,1),
    border-color .4s cubic-bezier(.16,1,.3,1);
}
.acp__card:hover{background:rgba(255,255,255,.06)}
.acp__card.is-activa{background:#fff;color:#000;border-color:#000}
.acp__t{margin:0;max-width:15vw;font-family:var(--titulo);font-weight:700;
  text-transform:uppercase;font-size:1.9vw;line-height:1.04;letter-spacing:-.01em}
.acp__t em{display:block;font-family:var(--serif-it);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:0;font-size:1.12em;line-height:1}
.acp__pie{display:flex;flex-direction:column;align-items:flex-start;gap:1.7vw}
.acp__d{margin:0;max-width:15vw;font-size:max(16px,1.1vw);line-height:1.45}

/* El botón es el mismo `.btn--ref-2` del hero (rectángulo de radio 2,
   48 px, versales a 13 px, flecha visible que se va al pasar por encima):
   filete blanco sobre las tarjetas apagadas y filete negro sobre la activa.
   `position: static` para que su ::after estire el área pulsable a toda la
   tarjeta; el efecto de la flecha salta también al pasar por la tarjeta. */
/* Es un <button>: se le quita el borde nativo en relieve del navegador,
   que es lo que salía como bisel. */
.acp__btn{position:static;border:0;-webkit-appearance:none;appearance:none}
.acp__btn::after{content:"";position:absolute;inset:0;border-radius:0 9999px 9999px 0}
/* activa → el botón principal del hero («Hablemos»): azul macizo */
.acp__card.is-activa .acp__btn{background:var(--acento);color:var(--acento-tinta);box-shadow:none}
.acp__card.is-activa .acp__btn:hover,
.acp__card.is-activa:hover .acp__btn{background:var(--acento-hover)}
/* apagada → el secundario del hero sobre el vídeo («Casos de éxito»):
   filete blanco de 1 px, sin fondo */
.acp__card:not(.is-activa) .acp__btn{background:transparent;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.acp__card:not(.is-activa):hover .acp__btn{background:rgba(255,255,255,.12)}
.acp__card:hover .acp__btn .btn__i{opacity:0;transform:translateX(10px)}
.acp__card:hover .acp__btn .btn__tx{transform:translateX(12.5px)}
.acp__btn:focus-visible{outline:none}
.acp__card:has(.acp__btn:focus-visible){outline:3px solid var(--cielo,#7FC4E8);outline-offset:4px}

.acp__cierre{margin:5vw 6.9vw 0;text-align:center;font-family:var(--titulo);
  font-weight:700;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.3rem,.9rem + 1.2vw,2.1rem);line-height:1.1}
.acp__cierre em{display:block;font-family:var(--serif-it);font-style:italic;
  font-weight:400;text-transform:none;letter-spacing:0;font-size:1.12em}

/* tablet: las tres tarjetas ya no caben en fila → carril horizontal con
   imán, como hace la referencia en pantallas estrechas */
@media (max-width:1100px){
  .acp__in{padding:64px 0 56px}
  .acp__cab{grid-template-columns:1fr;gap:20px;margin:0 32px 40px}
  .acp__l{overflow-x:auto;scroll-snap-type:x mandatory;padding:0 32px 8px;
    scroll-padding-inline:32px;
    scrollbar-width:none}
  .acp__l::-webkit-scrollbar{display:none}
  .acp__it{flex:0 0 auto;scroll-snap-align:start}
  .acp__card{width:44vw;height:56vw;aspect-ratio:auto;padding:5vw}
  .acp__t{font-size:3.2vw;max-width:26vw}
  .acp__d{max-width:26vw}
  .acp__cierre{margin:40px 32px 0}
}
@media (max-width:767px){
  .acp__cab{margin:0 20px 32px}
  .acp__l{padding:0 20px 8px;scroll-padding-inline:20px}
  .acp__card{width:80vw;height:104vw;padding:30px}
  .acp__t{font-size:24px;max-width:48vw}
  .acp__d{max-width:48vw}
  .acp__cierre{margin:32px 20px 0}
}
@media (prefers-reduced-motion:reduce){
  .acp__fondo,.acp__card{transition-duration:.01s}
}

/* ═══ v5 · 3 · MÉTODO HIDEOX · el descenso ═══════════════════════════════
   Tira de seis columnas a lo ancho, cada una un tramo más de profundidad.
   Acordeón horizontal: la activa crece (flex 4,6) y las demás se quedan en
   una franja con la letra gigante abajo y el nombre en vertical arriba.
   El contenido va en una caja de ancho FIJO para que el texto no se
   recoloque mientras la columna se abre: solo se descubre.            */
.hx{background:var(--papel);padding:0 10px 10px}
.hx__card{border-radius:8px;background:#fff;overflow:hidden;
  padding:clamp(56px,7vw,112px) clamp(20px,4.2vw,60px) clamp(20px,4.2vw,60px)}

/* cabecera: antetítulo con filete, y debajo titular / entradilla en
   asimetría 58 / 34 */
.hx__eye{display:flex;align-items:center;gap:18px;margin:0 0 clamp(28px,3.4vw,48px);
  font-family:var(--titulo);font-weight:600;font-size:0.75rem;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--navy)}
.hx__eye i{display:block;width:56px;height:2px;background:var(--navy);flex:0 0 auto}
.hx__cab-fila{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,34fr);
  gap:clamp(24px,6vw,96px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.hx__t{margin:0;font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,1.2rem + 2.6vw,3.6rem);line-height:1.02;letter-spacing:-.01em;
  color:var(--tinta)}
.hx__t em{font-family:var(--serif-it);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:0;font-size:1.12em;line-height:.9}
.hx__d{margin:0;max-width:44ch;font-size:1.125rem;line-height:1.6;color:var(--gris,#555960)}

/* la tira */
.hx__l{display:flex;height:clamp(560px,46vw,720px);margin:0;padding:0;list-style:none;
  border-radius:8px;overflow:hidden}
.hx__p{
  --fondo:#EAF4F8;--tx:#0B1B24;--k:#004B87;--fil:rgba(11,27,36,.14);
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;
  background:var(--fondo);color:var(--tx);
  transition:flex-grow .8s cubic-bezier(.16,1,.3,1);
}
.hx__p + .hx__p{box-shadow:inset 1px 0 0 var(--fil)}
.hx__p:nth-child(2){--fondo:#BFE3F1}
.hx__p:nth-child(3){--fondo:#139DD9;--k:#0B1B24;--fil:rgba(11,27,36,.2)}
.hx__p:nth-child(4){--fondo:#004B87;--tx:#fff;--k:#7FD0F0;--fil:rgba(255,255,255,.16)}
.hx__p:nth-child(5){--fondo:#0A2E4D;--tx:#fff;--k:#00A3E0;--fil:rgba(255,255,255,.12)}
.hx__p:nth-child(6){--fondo:#07131D;--tx:#fff;--k:#00A3E0;--fil:rgba(255,255,255,.12)}
.hx__p.is-activa{flex-grow:4.6}

/* la letra gigante: todas en la misma línea de base, abajo a la izquierda */
/* Cerrada, la letra cabe entera en la franja (9 vw ≈ el ancho de una
   columna estrecha); al abrirse crece 1,7× desde su esquina inferior. */
.hx__k{position:absolute;left:clamp(12px,1.3vw,26px);bottom:-.12em;z-index:0;
  font-family:var(--titulo);font-weight:700;line-height:1;letter-spacing:-.04em;
  font-size:clamp(72px,9vw,170px);color:var(--k);pointer-events:none;
  transform-origin:0 100%;
  transition:transform .8s cubic-bezier(.16,1,.3,1)}
.hx__p.is-activa .hx__k{transform:scale(1.7)}

/* el nombre: botón que cubre toda la columna (su ::after) */
.hx__h{margin:0}
.hx__btn{position:static;display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  width:100%;padding:clamp(20px,2vw,32px) clamp(14px,1.6vw,28px) 0;
  background:none;border:0;-webkit-appearance:none;appearance:none;color:inherit;
  font:inherit;text-align:left;cursor:pointer}
.hx__btn::after{content:"";position:absolute;inset:0;z-index:1}
.hx__btn:focus-visible{outline:none}
.hx__p:has(.hx__btn:focus-visible){outline:3px solid #7FC4E8;outline-offset:-3px}
.hx__num{font-family:var(--mono);font-size:0.8125rem;letter-spacing:.04em;opacity:.8}
.hx__w{font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  letter-spacing:2.6px;font-size:0.9375rem;line-height:1.25;white-space:nowrap;
  writing-mode:vertical-rl;transform:rotate(180deg);transition:opacity .3s}
.hx__p.is-activa .hx__w{writing-mode:horizontal-tb;transform:none;white-space:normal;
  font-size:clamp(15px,1.2vw,18px)}

/* el contenido de la abierta */
.hx__c{position:relative;z-index:2;pointer-events:none;
  width:clamp(300px,30vw,440px);padding:clamp(24px,2.6vw,40px) clamp(14px,1.6vw,28px) 0;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1),visibility 0s .35s}
.hx__p.is-activa .hx__c{opacity:1;visibility:visible;transform:none;
  transition:opacity .5s ease .28s,transform .7s cubic-bezier(.16,1,.3,1) .28s,visibility 0s}
.hx__s{margin:0 0 18px;font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.5rem,1rem + 1.3vw,2.3rem);line-height:1.04;letter-spacing:-.01em}
.hx__s em{display:block;font-family:var(--serif-it);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:0;font-size:1.12em;line-height:1.02}
.hx__x{margin:0;max-width:36ch;font-size:1.0625rem;line-height:1.6}
.hx__x b{font-weight:600}

/* móvil y tablet estrecha: la tira se tumba en seis filas */
@media (max-width:860px){
  .hx__cab-fila{grid-template-columns:1fr;gap:18px}
  .hx__l{flex-direction:column;height:auto}
  .hx__p{flex:none;min-height:96px;transition:none}
  .hx__p + .hx__p{box-shadow:inset 0 1px 0 var(--fil)}
  .hx__btn{flex-direction:row;align-items:center;gap:16px;min-height:96px;
    padding:0 20px 0 112px}
  .hx__w,.hx__p.is-activa .hx__w{writing-mode:horizontal-tb;transform:none;
    white-space:normal;font-size:0.9375rem}
  .hx__k{left:18px;top:6px;bottom:auto;font-size:84px}
  .hx__k,.hx__p.is-activa .hx__k{transform:none}
  .hx__c{display:none;width:auto;padding:0 20px 28px 112px;transform:none}
  .hx__p.is-activa .hx__c{display:block}
}
@media (max-width:480px){
  .hx__btn{padding-left:92px}
  .hx__c{padding:0 20px 28px 20px}
  .hx__k{font-size:72px}
}
@media (prefers-reduced-motion:reduce){
  .hx__p,.hx__k,.hx__c,.hx__p.is-activa .hx__c{transition:none}
}

/* ═══ v5 · 3 bis · NÚMEROS · el mapa es agua ═════════════════════════════
   Composición de la referencia: cifras apiladas a la izquierda con su
   etiqueta al lado, flecha a mano, frase a la derecha y, debajo, el mapa de
   puntos desplazado hacia la derecha (arranca al 22 % del ancho). */
.cif{background:var(--papel);padding:0 10px 10px}
.cif__card{position:relative;border-radius:8px;background:#fff;overflow:hidden;
  padding:clamp(56px,6.5vw,104px) clamp(20px,4.2vw,60px) clamp(28px,3vw,48px)}

.cif__top{display:grid;grid-template-columns:minmax(0,52fr) minmax(0,40fr);
  gap:clamp(24px,4vw,64px);align-items:start;position:relative;z-index:2}
.cif__l{display:flex;flex-direction:column;gap:clamp(4px,1vw,14px);margin:0;padding:0;list-style:none}
.cif__it{display:flex;align-items:center;gap:clamp(16px,2vw,28px)}
.cif__v{margin:0;display:flex;align-items:flex-start;font-family:var(--titulo);font-weight:700;
  font-size:clamp(4.2rem,2rem + 7vw,9.6rem);line-height:.9;letter-spacing:-.045em;
  color:var(--naran);font-variant-numeric:tabular-nums}
.cif__u{font-size:.5em;line-height:1.1;letter-spacing:0;margin-left:.06em}
.cif__lab{margin:0;max-width:12ch;font-size:clamp(16px,1.25vw,20px);line-height:1.3;color:var(--tinta)}
.cif__lab em{font-family:var(--serif-it);font-style:italic;font-size:1.15em}

.cif__frase{position:relative;padding-top:clamp(6px,1vw,16px)}
.cif__t{margin:0;font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,1.1rem + 2.7vw,3.8rem);line-height:1.02;letter-spacing:-.01em;color:var(--tinta)}
.cif__t em{display:block;font-family:var(--serif-it);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:0;font-size:1.14em;line-height:1;color:var(--naran)}
/* la flecha a mano apunta de la frase a las cifras y se dibuja sola */
.cif__flecha{position:absolute;right:calc(100% + 8px);top:clamp(10px,1.4vw,24px);
  width:clamp(90px,9vw,150px);height:auto;overflow:visible}
.cif__flecha path{fill:none;stroke:var(--tinta);stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round}
.js .cif__flecha-l{stroke-dasharray:160;stroke-dashoffset:160}
.js .cif__flecha-p{stroke-dasharray:44;stroke-dashoffset:44}
.cif.is-dentro .cif__flecha-l{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) .5s}
.cif.is-dentro .cif__flecha-p{stroke-dashoffset:0;transition:stroke-dashoffset .4s cubic-bezier(.65,0,.35,1) 1.5s}

/* el mapa: sube bajo las cifras, como en la referencia */
/* El lienzo deja una celda de aire por cada lado (146 × 73) para que los
   puntos que crecen o se apartan en los bordes nunca se corten, y lleva un
   difuminado suave de arriba abajo: el Ártico se funde con el blanco. */
.cif__mapa{position:relative;margin:clamp(24px,3vw,48px) 0 0 22%;aspect-ratio:146/73;
  cursor:crosshair;touch-action:manipulation}
.cif__cv{display:block;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.18) 0%,rgba(0,0,0,.7) 22%,#000 48%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.18) 0%,rgba(0,0,0,.7) 22%,#000 48%)}
.cif__hint{position:absolute;left:-28%;bottom:4%;margin:0;display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:0.8125rem;letter-spacing:-.01em;text-transform:uppercase;color:var(--gris)}
.cif__hint i{width:9px;height:9px;background:var(--naran);flex:0 0 auto;
  animation:tag-latido 3.2s cubic-bezier(.4,0,.6,1) infinite}

@media (max-width:980px){
  .cif__top{grid-template-columns:1fr}
  .cif__flecha{display:none}
  .cif__mapa{margin:32px 0 0}
  .cif__hint{position:static;margin-top:16px}
}
/* móvil: el mapa entero sería una nube de puntos de 2 px; se agranda y se
   encuadra en Europa y África, que es de donde sale la onda */
@media (max-width:600px){
  .cif__mapa{margin:28px -20px 0;aspect-ratio:auto;overflow:hidden}
  .cif__cv{width:210%;height:auto;aspect-ratio:146/73;margin-left:-50%}
  .cif__hint{margin:12px 20px 0}
}
@media (prefers-reduced-motion:reduce){
  .cif__hint i{animation:none}
  .js .cif__flecha-l,.js .cif__flecha-p{stroke-dashoffset:0;transition:none}
}

/* ═══ v5 · 4 · EQUIPO · humanizamos la transformación ════════════════════
   Mosaico de 4 × 4 piezas con 10 px de junta —la misma que separa todas
   las piezas de la web— y radio 6.

       tit tit  a   b
       cit  d  nar  p1
       p2  grp grp  c
       p3  p4  tal tal

   Contraste: pilares en tinta sobre #F4F4F3 (16,1:1), numerales en
   naranja #E14602 a 64 px (3,5:1, texto grande); cita en tinta sobre
   #EAF4F8 (15,7:1).                                                    */
.eq{background:var(--papel);padding:0 10px 10px}
.eq__card{border-radius:8px;background:#fff;padding:10px}
.eq__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:clamp(250px,23vw,400px);gap:10px;
  grid-template-areas:
    "tit tit a   b"
    "cit d   nar p1"
    "p2  grp grp c"
    "p3  p4  tal tal"}
.eq__pils{display:contents;margin:0;padding:0;list-style:none}
.eq__t{position:relative;overflow:hidden;border-radius:6px;margin:0}
.eq__tit{grid-area:tit}
.eq--a{grid-area:a} .eq--b{grid-area:b} .eq--c{grid-area:c} .eq--d{grid-area:d}
.eq__cita{grid-area:cit} .eq__naran{grid-area:nar}
.eq--grupo{grid-area:grp} .eq--taller{grid-area:tal}
.eq--p1{grid-area:p1} .eq--p2{grid-area:p2} .eq--p3{grid-area:p3} .eq--p4{grid-area:p4}

/* cabecera: en blanco, sin pieza, abajo a la izquierda */
.eq__tit{display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(20px,3vw,48px) clamp(16px,2.4vw,40px)}
.eq__eye{display:flex;align-items:center;gap:18px;margin:0 0 22px;
  font-family:var(--titulo);font-weight:600;font-size:0.75rem;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--navy)}
.eq__eye i{display:block;width:56px;height:2px;background:var(--navy)}
.eq__h{margin:0;font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.1rem,1.1rem + 3vw,4.2rem);line-height:1.01;letter-spacing:-.01em;
  color:var(--tinta)}
.eq__h em{display:block;font-family:var(--serif-it);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:0;font-size:1.12em;line-height:1}

/* retratos: dos poses apiladas que se funden; la B entra al pasar el
   puntero o cuando le toca en la rotación */
.eq__foto{background:#000}
.eq__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 16%;
  transition:opacity .9s ease,transform 1.4s cubic-bezier(.16,1,.3,1)}
.eq__img--b{opacity:0}
.eq__foto.is-b .eq__img--b{opacity:1}
.eq__foto:hover .eq__img{transform:scale(1.04)}
.eq__foto--ancha .eq__img{object-position:50% 40%}
.eq--taller .eq__img{object-position:50% 28%}

/* la cita */
.eq__cita{display:flex;align-items:flex-end;background:#EAF4F8;
  padding:clamp(20px,2.2vw,36px)}
.eq__cita::before{content:"«";position:absolute;left:clamp(16px,1.8vw,30px);top:-.18em;
  font-family:var(--serif-it);font-style:italic;font-size:clamp(7rem,10vw,11rem);
  line-height:1;color:var(--naran)}
.eq__cita p{margin:0;font-family:var(--serif-it);font-style:italic;font-weight:400;
  font-size:clamp(1.25rem,.9rem + .9vw,1.8rem);line-height:1.22;color:var(--tinta)}
.eq__cita em{color:var(--naran-txt)}

/* el bloque naranja: tres anillos que se abren como la onda del mapa */
.eq__naran{background:var(--naran)}
.eq__naran i{position:absolute;left:50%;top:50%;width:40%;aspect-ratio:1;
  border:1px solid rgba(255,255,255,.75);border-radius:50%;
  transform:translate(-50%,-50%) scale(.2);opacity:0}
.eq.is-dentro .eq__naran i{animation:eq-onda 4.2s cubic-bezier(.2,.6,.3,1) infinite}
.eq.is-dentro .eq__naran i:nth-child(2){animation-delay:1.4s}
.eq.is-dentro .eq__naran i:nth-child(3){animation-delay:2.8s}
@keyframes eq-onda{
  0%{transform:translate(-50%,-50%) scale(.2);opacity:0}
  15%{opacity:1}
  100%{transform:translate(-50%,-50%) scale(2.6);opacity:0}
}

/* los pilares */
.eq__pil{display:flex;flex-direction:column;justify-content:space-between;
  background:#F4F4F3;padding:clamp(18px,2vw,32px)}
.eq__pn{font-family:var(--titulo);font-weight:700;font-size:clamp(3rem,2rem + 2.4vw,4.6rem);
  line-height:.9;letter-spacing:-.04em;color:var(--naran)}
.eq__pt{margin:0 0 10px;font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  font-size:clamp(15px,1.1vw,18px);letter-spacing:.02em;line-height:1.2;color:var(--tinta)}
.eq__pd{margin:0;max-width:30ch;font-size:1rem;line-height:1.55;color:var(--tinta)}
.eq__pil > div{margin-top:auto}

/* la entrada: cada pieza se destapa de abajo arriba, en cascada */
.js .eq__t{clip-path:inset(100% 0 0 0)}
.js .eq__t .eq__img{transform:scale(1.18)}
.eq.is-dentro .eq__t{clip-path:inset(0 0 0 0);
  transition:clip-path 1s cubic-bezier(.77,0,.18,1) calc(var(--i,0) * 85ms)}
.eq.is-dentro .eq__t .eq__img{transform:none;
  transition:opacity .9s ease,transform 1.6s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 85ms)}
.eq.is-dentro .eq__foto:hover .eq__img{transform:scale(1.04)}

@media (max-width:900px){
  .eq__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(56vw,auto);
    grid-template-areas:
      "tit tit" "a b" "cit cit" "d nar" "p1 p2" "grp grp" "c p3" "p4 p4" "tal tal"}
  .eq__tit{min-height:0;padding:28px 12px 20px}
  .eq__cita{min-height:56vw}
}
@media (prefers-reduced-motion:reduce){
  .js .eq__t{clip-path:none}
  .js .eq__t .eq__img{transform:none}
  .eq.is-dentro .eq__naran i{animation:none}
  .eq__img{transition:opacity .2s linear}
}

/* ═══ v5 · 5 · CONTACTO sobre el velero ═════════════════════════════════
   El botón principal es el azul del hero; el secundario, el bordeado en
   blanco que se usa sobre el vídeo. La entradilla, en blanco al 88 %
   sobre el tramo del velo al 90 % (>12:1). */
.claim__p{margin:clamp(1rem,1.8vw,1.5rem) auto 0;max-width:44ch;font-size:1.125rem;
  line-height:1.6;color:rgba(255,255,255,.88)}
.claim .btn--ref-2{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.claim .btn--ref-2:hover{background:rgba(255,255,255,.12)}
.claim :focus-visible{outline-color:#fff}

/* ═══ v5 · PIE · la marca se llena de agua ══════════════════════════════ */
.ftr--v5{background:#fff;color:var(--tinta);padding:clamp(56px,6vw,96px) 0 0;
  border-top:0;overflow:hidden}
.ftr__top{display:grid;grid-template-columns:minmax(0,52fr) minmax(0,40fr);
  gap:clamp(32px,6vw,96px);align-items:end;
  padding:0 clamp(20px,4.2vw,60px) clamp(40px,5vw,72px)}
.ftr__eye{display:flex;align-items:center;gap:18px;margin:0 0 22px;
  font-family:var(--titulo);font-weight:600;font-size:0.75rem;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--navy)}
.ftr__eye i{display:block;width:56px;height:2px;background:var(--navy)}
.ftr__frase{margin:0 0 clamp(24px,3vw,40px);font-family:var(--titulo);font-weight:700;
  text-transform:uppercase;font-size:clamp(1.9rem,1rem + 2.6vw,3.6rem);line-height:1.02;
  letter-spacing:-.01em}
.ftr__frase em{display:block;font-family:var(--serif-it);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:0;font-size:1.12em;line-height:1}
.ftr__dir{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px;font-style:normal}
.ftr--v5 .ftr__dir a{display:inline-flex;min-height:44px;align-items:center;
  color:var(--tinta);text-decoration:none;background:linear-gradient(currentColor,currentColor)
  0 calc(100% - 6px)/0 1px no-repeat;transition:background-size .45s cubic-bezier(.65,0,.35,1),color .25s}
.ftr--v5 .ftr__dir a:hover{color:var(--naran-txt);background-size:100% 1px}
.ftr--v5 .ftr__mail{font-family:var(--titulo);font-weight:600;font-size:clamp(1.15rem,.8rem + 1vw,1.7rem);
  letter-spacing:-.01em}
.ftr--v5 .ftr__tel{font-size:1.125rem}

.ftr__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ftr__ct{margin:0 0 10px;font-family:var(--titulo);font-weight:600;font-size:0.75rem;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--gris)}
.ftr--v5 .ftr__col ul{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.ftr--v5 .ftr__col a{display:inline-flex;align-items:center;min-height:44px;
  font-size:1rem;color:var(--tinta);text-decoration:none;transition:color .25s,transform .35s cubic-bezier(.16,1,.3,1)}
.ftr--v5 .ftr__col a:hover{color:var(--naran-txt);transform:translateX(6px)}

/* el logotipo a todo el ancho, con el agua dentro. El logotipo es la
   máscara: fuera de las letras no se pinta nada. */
.ftr__xl{position:relative;margin:0 clamp(20px,4.2vw,60px);aspect-ratio:220/53.7;
  background:#EEF3F6;
  -webkit-mask:url("../img/logo-heliox.svg") center/100% 100% no-repeat;
  mask:url("../img/logo-heliox.svg") center/100% 100% no-repeat;
  --nivel:.08}
/* El agua ocupa todo el alto y se desplaza con `transform` (va por la
   GPU, sin recalcular la maqueta en cada fotograma de scroll). */
.ftr__agua{position:absolute;left:0;right:0;top:0;bottom:0;
  background:linear-gradient(to bottom,#00A3E0 0%,#004B87 45%,#0A2E4D 100%);
  transform:translate3d(0,calc((1 - var(--nivel)) * 100%),0);
  transition:transform .6s cubic-bezier(.16,1,.3,1);will-change:transform}
/* la cresta: una ola que se mece, del mismo azul que la superficie */
.ftr__agua::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 22' preserveAspectRatio='none'%3E%3Cpath d='M0 12C30 2 60 2 90 12s60 10 90 0 45-10 60-6V22H0Z' fill='%2300A3E0'/%3E%3C/svg%3E")
    0 100%/240px 22px repeat-x;
  animation:ftr-ola 6s linear infinite}
.ftr__agua::after{content:"";position:absolute;left:0;right:0;bottom:100%;height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 16' preserveAspectRatio='none'%3E%3Cpath d='M0 9C22 1 45 1 68 9s45 8 68 0 32-7 44-4V16H0Z' fill='%237FD0F0' fill-opacity='.7'/%3E%3C/svg%3E")
    0 100%/180px 16px repeat-x;
  animation:ftr-ola 4.2s linear infinite reverse}
@keyframes ftr-ola{to{background-position-x:240px}}

.ftr--v5 .ftr__base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:12px 32px;margin:clamp(24px,3vw,40px) clamp(20px,4.2vw,60px) 0;
  padding:18px 0 22px;border-top:1px solid var(--filete)}
.ftr--v5 .ftr__legal{margin:0;max-width:none;font-size:0.875rem;color:var(--gris)}
.ftr__arriba{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-family:var(--titulo);font-weight:600;font-size:0.8125rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta);text-decoration:none}
.ftr__arriba span{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.ftr__arriba:hover{color:var(--naran-txt)}
.ftr__arriba:hover span{transform:translateY(-4px)}

@media (max-width:980px){
  .ftr__top{grid-template-columns:1fr;align-items:start}
}
@media (max-width:560px){
  .ftr__cols{grid-template-columns:1fr 1fr}
  .ftr__cols .ftr__col:last-child{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){
  .ftr__xl{--nivel:.5 !important}
  .ftr__agua{transition:none}
  .ftr__agua::before,.ftr__agua::after{animation:none}
}

/* ═══ v5 · REPASO «APPLE» ════════════════════════════════════════════════
   Pulido sobre lo que ya hay, sin tocar el diseño. Cuatro frentes:
   respuesta inmediata, material, tipografía y accesibilidad.            */

/* ── 1 · Respuesta: el feedback vive en la pulsación, y es instantáneo ──
   Todo lo pulsable se hunde un 3 % al presionarlo (100 ms) y vuelve con
   el mismo gesto al soltar. `touch-action: manipulation` quita el retraso
   del doble toque en móvil. */
a,button,.acp__card,.hx__p,.cif__mapa{touch-action:manipulation}
.btn--ref{transition:background-color .3s var(--ease),color .3s var(--ease),
  box-shadow .3s var(--ease),transform .2s cubic-bezier(.2,.8,.2,1)}
.btn--ref:active{transform:scale(.97);transition-duration:.1s}
.acp__card{transition:background-color .4s cubic-bezier(.16,1,.3,1),color .4s cubic-bezier(.16,1,.3,1),
  border-color .4s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.2,.8,.2,1)}
.acp__card:active{transform:scale(.985);transition-duration:.1s}
.hx__btn:active ~ .hx__c,.hx__p:active .hx__k{opacity:.92}
.nav a:active,.ftr--v5 a:active,.hdr__logo:active{opacity:.6;transition:opacity .1s}
.burger:active .burger__b{opacity:.6}

/* ── 2 · Material de la cabecera ────────────────────────────────────────
   El peso del material marca la jerarquía y tiene que sostener el texto.
   Sobre el vídeo del hero se queda LIGERO (el 40 % que se eligió); en
   cuanto la cápsula deja de tener el vídeo debajo pasa a un material más
   denso (72 %), porque sobre las secciones blancas el 40 % dejaba el menú
   blanco en ~2,6:1. Con el 72 % queda en ~7,9:1 sobre blanco. El cambio
   es un fundido de 0,5 s, como un material que se espesa.
   Un filete de luz de 1 px en el canto superior: la luz que coge el
   cristal. */
html:is(:has(.hero--video),.pag-int) .hdr__in{
  background:rgba(8,16,24,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.08),
    0 10px 30px -18px rgba(3,12,20,.55);
  transition:background-color .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1)}
html:is(:has(.hero--video),.pag-int) .hdr.sobre-hero .hdr__in{
  background:rgba(8,16,24,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.1)}
/* el desplegable de móvil nace del botón que lo abre (arriba a la derecha)
   y vuelve a él por el mismo camino */
@media (max-width:760px){
  .hdr__nav{transform-origin:calc(100% - 28px) -12px;transform:scale(.96) translate3d(0,-6px,0)}
  .hdr.is-abierta .hdr__nav{transform:none}
}
@media (prefers-contrast:more){
  html:is(:has(.hero--video),.pag-int) .hdr__in,
  html:is(:has(.hero--video),.pag-int) .hdr.sobre-hero .hdr__in{background:#07131D;
    -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px #fff}
  .acp__card:not(.is-activa){border-color:#fff;background:rgba(4,12,20,.55)}
  .hx__p + .hx__p{box-shadow:inset 1px 0 0 rgba(0,0,0,.5)}
}
@media (prefers-reduced-transparency:reduce){
  html:is(:has(.hero--video),.pag-int) .hdr.sobre-hero .hdr__in{background:#0C1720;
    -webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ── 3 · Tipografía ──────────────────────────────────────────────────────
   Titulares con reparto equilibrado de líneas (sin una palabra sola al
   final) y párrafos con `pretty`, que evita viudas. Las cifras, tabulares
   para que no bailen al contar. */
.acp__h,.acp__sub,.hx__t,.hx__s,.cif__t,.eq__h,.eq__pt,.claim__t,.ftr__frase{text-wrap:balance}
.hero__p,.acp__lead,.acp__d,.hx__d,.hx__x,.eq__pd,.eq__cita p,.claim__p,.cif__lab{text-wrap:pretty}
.hx__num,.eq__pn{font-variant-numeric:tabular-nums}

/* ── 4 · Anclas: el titular no queda debajo de la cápsula al saltar ───── */
section[id]{scroll-margin-top:clamp(84px,7vw,100px)}
#inicio{scroll-margin-top:0}

/* ═══ v5 · NUESTRA FORMA DE ACOMPAÑAR · reposo en blanco ════════════════
   De inicio la sección es TODA BLANCA: titular y texto en tinta, tarjetas
   en filete oscuro y botones bordeados en oscuro. Solo mientras el puntero
   está sobre una tarjeta (`.acp.is-viva`) entra su foto a sangre y todo
   pasa a blanco sobre ella; la tarjeta de debajo del puntero se rellena de
   blanco con el botón azul. Al salir de la fila vuelve al blanco.
   Contraste en reposo: tinta sobre blanco 17,5:1.                       */
.acp__cab{border-bottom-color:rgba(11,27,36,.18);transition:border-color .5s}
.acp__card{border-color:rgba(11,27,36,.8);color:var(--tinta)}
.acp__card:hover{background:transparent}
.acp__card:not(.is-activa) .acp__btn{color:var(--tinta);box-shadow:inset 0 0 0 1px rgba(11,27,36,.8)}
.acp__card:not(.is-activa):hover .acp__btn{background:rgba(11,27,36,.06)}

.acp.is-viva .acp__card-sec{color:#fff}
.acp.is-viva .acp__cab{border-bottom-color:rgba(255,255,255,.35)}
.acp.is-viva .acp__card{border-color:rgba(255,255,255,.85);color:#fff}
.acp.is-viva .acp__card.is-activa{background:#fff;color:#000;border-color:#000}
.acp.is-viva .acp__card:not(.is-activa) .acp__btn{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.acp.is-viva .acp__card:not(.is-activa):hover .acp__btn{background:rgba(255,255,255,.12)}
.acp:not(.is-viva) .acp__fondo{opacity:0}
.acp .acp__card-sec :focus-visible{outline-color:var(--navy)}
.acp.is-viva .acp__card-sec :focus-visible{outline-color:#fff}
@media (prefers-contrast:more){
  .acp:not(.is-viva) .acp__card:not(.is-activa){background:transparent;border-color:var(--tinta)}
}