nativo (grupo exclusivo por name="faq"), sin JS.
Estilo ADN: preguntas en Anton, item abierto "encendido" (tinte + filete de
acento) y marcador en chip paralelogramo. Themeable (var(--color-accent)). */
.adn-faq {
width: min(820px, var(--adn-ancho));
margin-inline: auto;
}
.adn-faq__item {
border-bottom: 1px solid #e3e4e5;
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.adn-faq__item > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: clamp(16px, 2.1vw, 22px) clamp(14px, 1.8vw, 20px);
/* Montserrat y no Anton (sep-2026). Una pregunta es un «título dentro de
página», que es el papel de --font-titulos según el sistema tipográfico.
Aquí importaba más que en otros sitios: con el acordeón cerrado —como llega
el visitante— las 18 piezas visibles de la página eran TODAS Anton, porque
el único Roboto está dentro de los desplegables. Sin nada con lo que
contrastar, la página entera se leía como un titular.
Los tres grupos y el H1 siguen en Anton: son pocos, cortos y en versales,
que es donde esa letra funciona. */
font-family: var(--font-titulos);
font-style: normal;
font-weight: 600;
font-size: clamp(16px, 1.9vw, 20px);
line-height: 1.35;
letter-spacing: 0;
color: #0d0f11;
transition: color 0.15s ease, background 0.2s ease;
}
.adn-faq__item > summary::-webkit-details-marker { display: none; }
/* Marcador: chip paralelogramo de acento con el signo en blanco (+ -> x). */
.adn-faq__item > summary::after {
content: '+';
flex: none;
display: grid;
place-items: center;
width: 36px;
height: 34px;
background: var(--color-accent);
background-image: var(--grad-marca);
/* El glifo va en blanco con contorno: en 36px la rampa se resuelve casi en
su color medio, y en triatlón ese verde-amarillo deja el blanco por debajo
de 3:1. El trazo es lo que lo sostiene. */
color: var(--color-sobre-grad);
paint-order: stroke fill;
-webkit-text-stroke: var(--trazo-sobre-grad);
font-family: var(--font-texto);
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 1;
clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
transition: background 0.2s ease;
}
.adn-faq__item[open] > summary::after { content: '\00d7'; }
.adn-faq__item > summary:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
border-radius: 2px;
}
/* Item abierto: se "enciende" con tinte de acento + filete a la izquierda. */
.adn-faq__item[open] {
background: color-mix(in srgb, var(--color-accent) 6%, #fff);
box-shadow: inset 3px 0 0 0 var(--color-accent);
}
.adn-faq__item[open] > summary { color: var(--color-accent-texto); }
.adn-faq__respuesta {
padding: 0 clamp(14px, 1.8vw, 20px) clamp(16px, 2.1vw, 22px);
color: #3a3d40;
}
.adn-faq__respuesta p { margin: 0; font-size: 16.5px; line-height: 1.65; }
.adn-faq__respuesta p + p { margin-top: 12px; }
.adn-faq__respuesta a { color: var(--color-accent-texto); text-decoration: underline; text-underline-offset: 2px; }
/* Hover (solo puntero fino): el item cerrado insinúa con un tinte muy leve. */
@media (hover: hover) and (pointer: fine) {
.adn-faq__item:not([open]) > summary:hover {
color: var(--color-accent-texto);
background: color-mix(in srgb, var(--color-accent) 4%, #fff);
}
}
/* ── Hero de página a pantalla completa en móvil ──────────────────────────────
Mismo criterio que el carrusel de la home: se descuenta el chrome (franja de
acento + barra, que van encima y en flujo) y el hero se queda con el resto.
`dvh` y no `vh`: en iOS el 100vh incluye la barra de URL y cortaría el hero.
Las variables son globales desde ago-2026; el respaldo cubre por si faltaran.
El texto ya iba anclado abajo (align-items: flex-end), así que no se toca. */
@media (max-width: 640px) {
.cabecera-pagina--hero {
min-height: calc(100vh - var(--navbar-h, 56px) - var(--topbar-h, 10px));
min-height: calc(100dvh - var(--navbar-h, 56px) - var(--topbar-h, 10px));
}
}
/* El del recorte móvil no debe crear caja: sin esto el ![]()
, que va
absoluto a inset:0, se posicionaría respecto a un elemento inline. */
.cabecera-pagina--hero picture {
display: contents;
}
/* ── Apilado: la imagen siempre primero ──────────────────────────────────────
Los adn-duo alternan por orden del DOM (contenido/media) para dar zigzag en
dos columnas. Apilados, esa alternancia deja unos bloques abriendo con foto y
otros con texto sin criterio visible, y en secciones seguidas llega a juntar
dos imágenes. Con la imagen siempre delante, cada bloque enseña de qué habla
antes de explicarlo.
EXCEPCIÓN CONSCIENTE a la nota de arriba ("no `order`, que rompe el foco por
teclado"): .adn-duo__media contiene solo un ![]()
, que no es enfocable, así
que el orden de tabulación no cambia. Lo único que se desacopla es que un
lector de pantalla oye el alt después de la lista. Si algún día ese bloque
pasa a llevar algo enfocable —un enlace, un botón, un vídeo con controles—
esta regla hay que quitarla y resolverlo por DOM. */
@media (max-width: 900px) {
.adn-duo__media {
order: -1;
}
}
/* Botón de cierre de un adn-duo, centrado al apilar. No se toca el display del
propio botón: es inline-flex y su fondo va en un ::before inclinado, así que
convertirlo en bloque le rompería la forma. Al ser de nivel inline basta con
centrar su párrafo. Afecta a los 2 bloques que llevan botón: "Descubre la app"
en /entrenamiento y "Conóceme más" en /quienes-somos. */
@media (max-width: 900px) {
.adn-duo__contenido p:has(> .adn-boton) {
text-align: center;
}
}
/* Testimonios que solo se muestran cuando hay más de una columna. Apilados en
una sola, seis seguidos son ~1700px: dos pantallas completas de prueba social,
y el quinto y el sexto no convencen a quien no se convenció con los cuatro
primeros. Se marcan con clase EXPLÍCITA en el HTML y no por posición
(:nth-child): así reordenar o añadir testimonios en el panel no cambia sin
avisar cuáles ve la mitad de los visitantes. El corte es 560px, que es donde
la retícula pasa a una columna. */
@media (max-width: 560px) {
.adn-testimonio--extra {
display: none;
}
}
/* Captación en móvil: fuera la foto, entra degradado + textura. La foto de la
pista pesa 703 KB y en 390px solo se ve el 16% del encuadre, escalado x2,6.
Como el ![]()
es lazy, con display:none el navegador ni lo pide. La textura
es la diagonal de 12 grados del sistema, al 2,8% de blanco. Escritorio se
queda con la foto: dirección de arte por breakpoint, igual que los heros. */
@media (max-width: 640px) {
.adn-captacion__foto {
display: none;
}
.adn-captacion::after {
display: none;
}
.adn-captacion {
background:
repeating-linear-gradient(-12deg, rgba(255, 255, 255, 0.028) 0 2px, transparent 2px 10px),
radial-gradient(120% 65% at 12% 0%, color-mix(in srgb, var(--color-accent) 12%, transparent) 0%, transparent 62%),
linear-gradient(180deg, #171c20 0%, #0d0f11 100%);
}
/* Aire: el antetítulo estaba a 6px del título (24px de interlínea), se leían
pegados. Y las ventajas se separaban 12px teniendo 22px de interlínea: los
ítems quedaban más juntos entre sí que sus propias líneas y la lista se
leía como una masa. Ahora los ítems se separan más de lo que separan sus
líneas, que es lo que hace que una lista parezca una lista. */
.adn-captacion__titulo {
margin-top: 12px;
}
.adn-captacion__ventajas li + li {
margin-top: 18px;
}
/* Doble de aire sobre la fila de sellos: 28 -> 56px. */
.adn-captacion__sellos {
margin-top: 56px;
}
/* El hueco hasta la tarjeta iguala al de arriba (32 -> 56px): apilados, los
sellos flotan centrados entre el argumentario y el formulario. */
.adn-captacion__inner {
row-gap: 56px;
}
}
/* ═══ ENLACES DE BIO ══════════════════════════════════════════════════════
La fila a ancho completo de una página tipo Linktree. No existía: `adn-boton`
es un CTA en línea e inclinado, y aquí hace falta lo contrario — una fila
apilada, ancha y con área táctil generosa, porque se toca con el pulgar en el
navegador interno de Instagram.
Los tres tokens de acento van cada uno en su sitio, que es donde se rompe
esto en las marcas de acento claro:
· `--color-accent` RELLENO del destacado
· `--color-sobre-acento` texto ENCIMA de ese relleno
· `--color-accent-texto` acento como LETRA sobre fondo claro
Confundirlos no se nota en paraguas y deja ilegible el amarillo de triatlón.
*/
.adn-enlaces {
display: grid;
gap: 12px;
width: min(520px, 100%);
margin-inline: auto;
}
.adn-enlace {
display: flex;
align-items: center;
gap: 14px;
/* 62px de alto mínimo: muy por encima de los 24 de área táctil, porque aquí
el objetivo es que no se falle con el pulgar en movimiento. */
min-height: 62px;
padding: 14px 18px;
background: #fff;
border: 1px solid #d9d9d6;
border-radius: 6px;
text-decoration: none;
color: #0d0f11;
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.adn-enlace__icono {
flex: none;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: color-mix(in srgb, var(--color-accent) 12%, #fff);
color: var(--color-accent-texto);
}
.adn-enlace__icono svg { width: 19px; height: 19px; display: block; }
.adn-enlace__cuerpo { min-width: 0; }
.adn-enlace__texto {
display: block;
font-family: var(--font-titulos);
font-weight: 700;
font-size: 16px;
line-height: 1.25;
}
.adn-enlace__sub {
display: block;
margin-top: 2px;
font-size: 13.5px;
line-height: 1.4;
color: #56565a;
}
.adn-enlace__chevron {
flex: none;
margin-left: auto;
color: #a8aaa9;
transition: transform 0.15s;
}
/* Destacado: el enlace que quieres que se toque. Relleno de acento y texto con
el token que le corresponde ENCIMA del acento. */
.adn-enlace--destacado {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-sobre-acento);
}
.adn-enlace--destacado .adn-enlace__sub,
.adn-enlace--destacado .adn-enlace__chevron { color: inherit; opacity: 0.82; }
.adn-enlace--destacado .adn-enlace__icono {
background: color-mix(in srgb, var(--color-sobre-acento) 16%, transparent);
color: var(--color-sobre-acento);
}
/* Misma micro-elevación que el resto de CTAs del sistema (−2px), y solo con
ratón: en táctil el hover se queda pegado tras el toque. */
@media (hover: hover) and (pointer: fine) {
.adn-enlace:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(13, 15, 17, 0.13);
border-color: var(--color-accent);
}
.adn-enlace:hover .adn-enlace__chevron { transform: translateX(3px); }
}
.adn-enlace:focus-visible {
outline: 3px solid var(--color-accent-texto);
outline-offset: 3px;
}
/* Cabecera de la página: la promesa, no la bienvenida. */
.adn-bio {
width: min(520px, 100%);
margin: 0 auto 26px;
text-align: center;
}
.adn-bio__claim {
margin: 0 0 10px;
font-family: var(--font-titulares);
font-style: italic;
text-transform: uppercase;
font-size: clamp(26px, 7vw, 34px);
line-height: 1.05;
}
.adn-bio__sub {
margin: 0;
font-size: 16px;
line-height: 1.55;
color: #56565a;
}
/* ── Feature: el icono se apila en móvil ─────────────────────────────────────
Con el icono al lado, su caja (34px) más el hueco (16) se llevan 50 de los
328 disponibles y el texto se queda en 22-33 caracteres por línea; el rango
cómodo empieza en 35. Apilado sube a 28-39. Es el mismo remedio que la home
ya aplicaba a su `.feature` local, medido y adoptado aquí en sep-2026.
Cuesta alto: +96px en /quienes-somos y +204px en /app. Decisión de Ricard.
OJO: la home NO usa esta clase. Tiene su propio `.feature` en el CSS de la
página, con la misma regla de apilado y tipografía mayor (título 28 vs 26,
texto 18 vs 16). Son dos componentes parecidos, no el mismo: si se cambia
el apilado aquí, hay que cambiarlo también allí. */
@media (max-width: 640px) {
/* Icono y título EN LA MISMA FILA, y la descripción debajo a ancho completo,
alineada con el icono. Se queda con lo bueno de las dos versiones que hubo
antes: el icono no se despega de su título (como en la fila) y el texto no
pierde ancho por la columna del icono (como en el apilado).
Medido a 390px: la descripción se queda igual de ancha que apilada —los
caracteres por línea no se mueven— y el bloque BAJA 126px en la home, 144
en /quienes-somos y 216 en /app, o sea por debajo de lo que medía con el
icono a la izquierda. El título pierde 50px de ancho y con Anton aguanta.
El HTML del CMS mete título y descripción dentro de un , así que
`display: contents` lo disuelve para que sus dos hijos sean casillas de la
retícula del padre. Mismo truco que la ficha de entreno con su columna
lateral. NO se toca el marcado: son 16 páginas. */
.adn-feature {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 16px;
row-gap: 8px;
align-items: center;
}
.adn-feature > div {
display: contents;
}
.adn-feature__icono {
grid-column: 1;
margin-bottom: 0;
}
.adn-feature__titulo {
grid-column: 2;
}
/* La separación la pone `row-gap`; su margen propio se sumaría. */
/* Interlínea 1.75 como en la home (allí el texto va a 16/28 y aquí iba a
16/24). Era la diferencia REAL entre las dos: el título medía lo mismo en
las dos —20px— y el de quienes-somos parecía menor porque su texto era un
17% más denso. */
.adn-feature__desc {
grid-column: 1 / -1;
margin-top: 0;
line-height: 1.75;
}
}
/* ── Dos redacciones para un mismo título ────────────────────────────────────
Para títulos que en un móvil estrecho se parten en dos líneas y dejan un
huérfano. Se escriben los dos textos y el CSS enseña uno u otro; NO hay JS,
que estas webs son estáticas.
El corte son 409px y está medido, no elegido: «El entrenamiento se adapta a
ti» a 22px se parte hasta 408 y entra entero desde 410. Así los móviles
anchos (Pixel 412, iPhone 414 y 430) siguen viendo el título completo, que
se lee mejor, y solo lo pierden los estrechos.
Lo oculto por CSS no lo lee el lector de pantalla ni cuenta dos veces para
Google: en cada ancho hay un solo título. */
.adn-titulo-corto {
display: none;
}
@media (max-width: 409px) {
.adn-titulo-largo {
display: none;
}
.adn-titulo-corto {
display: inline;
}
}
/* ── Grupos del acordeón de preguntas ────────────────────────────────────────
14 preguntas seguidas mezclan tres asuntos y obligan a leerlas todas para
encontrar la tuya. Los las agrupan y, de paso, dan a la página una
estructura de encabezados navegable, que antes no tenía: los no
son títulos. */
.adn-faq__grupo {
margin: 0 0 6px;
font-family: var(--font-titulares);
font-style: italic;
/* Fluido, no fijo (sep-2026). Era el ÚNICO tamaño fijo de la página: en
escritorio la pregunta sube a 20 y el grupo se quedaba en 18, o sea la
etiqueta de sección más pequeña que lo que agrupa. Y Anton es condensada
—una «E» mide 7,4px de ancho frente a los 13,4 de Montserrat—, así que
con el mismo cuerpo ya pesaría menos. Suelo 18: en móvil no cambia nada. */
/* Pendiente 2.1vw y no 1.7: la pregunta crece a 1.9vw, así que con una
pendiente menor el grupo se quedaba corto entre 950 y 1.180px —a 1.024
la pregunta medía 19,5 y el grupo 18, otra vez al revés—. Medido en
nueve anchos, de 360 a 1.600. */
font-size: clamp(18px, 2.1vw, 22px);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-accent-texto);
}
/* El primero abre la lista; los demás separan, así que necesitan aire por
arriba —y más del que hay entre dos preguntas, o no se leen como corte—. */
.adn-faq__grupo + .adn-faq__item {
border-top: 1px solid #e3e4e5;
}
.adn-faq__item + .adn-faq__grupo {
margin-top: 34px;
}
/* Iconos circulares del acento: rampa en diagonal, el ángulo del logo. */
.adn-icono-circulo {
background-image: var(--grad-marca-diag);
color: var(--color-sobre-grad, var(--color-sobre-acento));
}
, así que
`display: contents` lo disuelve para que sus dos hijos sean casillas de la
retícula del padre. Mismo truco que la ficha de entreno con su columna
lateral. NO se toca el marcado: son 16 páginas. */
.adn-feature {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 16px;
row-gap: 8px;
align-items: center;
}
.adn-feature > div {
display: contents;
}
.adn-feature__icono {
grid-column: 1;
margin-bottom: 0;
}
.adn-feature__titulo {
grid-column: 2;
}
/* La separación la pone `row-gap`; su margen propio se sumaría. */
/* Interlínea 1.75 como en la home (allí el texto va a 16/28 y aquí iba a
16/24). Era la diferencia REAL entre las dos: el título medía lo mismo en
las dos —20px— y el de quienes-somos parecía menor porque su texto era un
17% más denso. */
.adn-feature__desc {
grid-column: 1 / -1;
margin-top: 0;
line-height: 1.75;
}
}
/* ── Dos redacciones para un mismo título ────────────────────────────────────
Para títulos que en un móvil estrecho se parten en dos líneas y dejan un
huérfano. Se escriben los dos textos y el CSS enseña uno u otro; NO hay JS,
que estas webs son estáticas.
El corte son 409px y está medido, no elegido: «El entrenamiento se adapta a
ti» a 22px se parte hasta 408 y entra entero desde 410. Así los móviles
anchos (Pixel 412, iPhone 414 y 430) siguen viendo el título completo, que
se lee mejor, y solo lo pierden los estrechos.
Lo oculto por CSS no lo lee el lector de pantalla ni cuenta dos veces para
Google: en cada ancho hay un solo título. */
.adn-titulo-corto {
display: none;
}
@media (max-width: 409px) {
.adn-titulo-largo {
display: none;
}
.adn-titulo-corto {
display: inline;
}
}
/* ── Grupos del acordeón de preguntas ────────────────────────────────────────
14 preguntas seguidas mezclan tres asuntos y obligan a leerlas todas para
encontrar la tuya. Los las agrupan y, de paso, dan a la página una
estructura de encabezados navegable, que antes no tenía: los