/* ═══════════════════════════════════════════════════════════════════════════
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 ![]()
dentro del , 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:20px;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}