/* Nada Más Padel. La hoja de estilo del sitio.
 *
 * Los tres colores salen del archivo original de la agencia, no de mirar una
 * captura de pantalla: azul noche #0a101a, turquesa #09bdd1 y blanco. No hay
 * un cuarto color de marca. Los grises de aquí abajo son ese mismo azul noche
 * aclarado, para que hasta el gris del sitio sea suyo.
 *
 * Poppins es la tipografía del nombre escrito del logo, así que es la de los
 * titulares y los rótulos, siempre en versal. Archivo es para leer: un párrafo
 * largo en francés compuesto en Poppins se lee peor, y la página de Marbella
 * tiene párrafos largos.
 *
 * Móvil primero. No es una frase: todo lo de aquí está escrito para una
 * pantalla estrecha, y las pantallas grandes son la excepción que se declara
 * más abajo. Su cliente está en Reims mirando el teléfono a las once de la
 * noche.
 */

/* --------------------------------------------------------------------------
   Las tipografías, servidas desde el sitio
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fuentes/Poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fuentes/Poppins-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fuentes/Archivo-400-700.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   Los colores y las medidas
   -------------------------------------------------------------------------- */

:root {
  --encre: #0a101a;
  --turquoise: #09bdd1;
  --blanc: #ffffff;

  /* El azul noche aclarado. Sirve para las tarjetas sobre fondo oscuro y para
     las líneas, y como es el mismo tono no ensucia la marca. */
  --encre-carte: #141c28;
  --encre-ligne: #26303f;

  /* Y el mismo azul rebajado del todo, para las secciones claras. Un gris
     neutro al lado de este azul se ve verdoso. */
  --clair: #f2f5f7;
  --clair-ligne: #dde4e9;

  /* El turquesa de la marca, pero un paso más oscuro, y SOLO para letra sobre
     fondo claro. Medido el 28 de septiembre de 2026: el turquesa de marca sobre
     blanco da 2,28 de contraste y la norma pide 4,5 en letra pequeña. Este da
     4,67. Donde el turquesa va de FONDO no se toca nada: ahí, con la tinta
     encima, da 8,4 y está perfecto.
     En las secciones oscuras se vuelve al de marca, más abajo. */
  --turquoise-texto: #08808f;

  --texte: #0a101a;
  --texte-doux: #55606e;
  --texte-sombre-doux: #a8b4c2;

  --titre: 'Poppins', system-ui, sans-serif;
  --texte-police: 'Archivo', system-ui, sans-serif;

  --marge: 20px;
  --ancho: 1180px;
  --radio: 4px;

  /* La altura de la cabecera fija. Se usa en dos sitios y por eso es una
     variable: si cambia en uno y no en el otro, el ancla de una sección cae
     debajo de la cabecera y no se ve el titular. */
  --cabecera: 62px;
}

/* --------------------------------------------------------------------------
   Lo de base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cabecera) + 12px);
  -webkit-text-size-adjust: 100%;
}

/* --------------------------------------------------------------------------
   El movimiento, y las dos reglas que lo gobiernan
   --------------------------------------------------------------------------

   1. NADA se esconde si no hay JavaScript. Las cosas que aparecen al bajar
      están visibles de salida, y solo se esconden cuando un guion muy pequeño
      le pone la clase `anima` al documento. Si ese guion no corre, la página
      se lee entera: es lo contrario de lo que hace medio internet, donde sin
      JavaScript queda una página en blanco.

   2. Quien ha pedido menos movimiento no ve NINGUNO. No es una preferencia
      estética: hay gente a la que el movimiento en pantalla le da mareo, y el
      sistema operativo ya lo pregunta. Aquí se respeta apagando hasta el
      aparecer, no solo suavizándolo. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .anima .revelar {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* El que aparece al llegar: sube dos centímetros y se enciende. Un solo gesto,
   y el mismo en todo el sitio. Muchos gestos distintos no se leen como
   cuidado, se leen como una plantilla. */
.anima .revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.anima .revelar.aqui {
  opacity: 1;
  transform: none;
}

/* En una rejilla, las tarjetas entran una detrás de otra. El retraso es corto
   a propósito: por encima de 90 ms por tarjeta deja de leerse como una entrada
   y empieza a leerse como una espera. */
.anima .revelar:nth-child(2) {
  transition-delay: 0.07s;
}
.anima .revelar:nth-child(3) {
  transition-delay: 0.14s;
}
.anima .revelar:nth-child(4) {
  transition-delay: 0.21s;
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--texte-police);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--titre);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 11vw, 5.2rem);
}
h2 {
  font-size: clamp(2rem, 7.5vw, 3.4rem);
}
h3 {
  font-size: clamp(1.15rem, 4vw, 1.45rem);
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}
p:last-child {
  margin-bottom: 0;
}

/* El teclado tiene que verse. Se prueba tabulando por la página entera. */
:focus-visible {
  outline: 3px solid var(--turquoise);
  outline-offset: 3px;
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--turquoise);
  color: var(--encre);
  padding: 12px 18px;
  font-family: var(--titre);
  font-weight: 600;
  z-index: 100;
}
.saltar:focus {
  left: 8px;
  top: 8px;
}

/* --------------------------------------------------------------------------
   Las piezas que se repiten
   -------------------------------------------------------------------------- */

.dentro {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--marge);
}

section {
  padding: 62px 0;
}

.oscura {
  background: var(--encre);
  color: var(--blanc);
}
.oscura .apagado {
  color: var(--texte-sombre-doux);
}
.clara {
  background: var(--clair);
}
.blanca {
  background: var(--blanc);
}
.apagado {
  color: var(--texte-doux);
}

/* El rótulo pequeño de encima de cada titular. Es el que ordena la lectura:
   dice de qué va la sección antes de que se lea el titular grande. */
.rotulo {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--turquoise-texto);
  margin: 0 0 14px;
}

.entradilla {
  font-size: 1.05rem;
  max-width: 58ch;
  margin-top: 18px;
}

em.acento {
  font-style: normal;
  color: var(--turquoise-texto);
  display: block;
}

/* Los botones. Dos, y no hay un tercero: el lleno es la acción de la página y
   el hueco es la de al lado. Si en una pantalla hubiera tres botones llenos,
   ninguno sería el importante. */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 2px solid var(--turquoise);
  background: var(--turquoise);
  color: var(--encre);
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radio);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
/* Un botón apagado se tiene que VER apagado. En el borrador el del formulario
   no envía, y si se viera igual de encendido, quien lo tocara pensaría que la
   web está rota. */
.boton[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.boton:hover {
  background: transparent;
  color: var(--turquoise);
}
.boton.hueco {
  background: transparent;
  color: var(--turquoise);
}
.oscura .boton.hueco {
  border-color: var(--blanc);
  color: var(--blanc);
}
.boton.hueco:hover {
  background: var(--turquoise);
  color: var(--encre);
  border-color: var(--turquoise);
}
.botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* La flecha de los enlaces de texto. Se mueve al pasar por encima, que es la
   única animación de todo el sitio. */
.flecha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--turquoise-texto);
  text-decoration: none;
}
.flecha::after {
  content: '→';
  transition: transform 0.15s;
}
.flecha:hover::after {
  transform: translateX(5px);
}

/* --------------------------------------------------------------------------
   La cabecera
   -------------------------------------------------------------------------- */

header.alta {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--encre);
  border-bottom: 1px solid var(--encre-ligne);
  height: var(--cabecera);
  display: flex;
  align-items: center;
  transition: box-shadow 0.3s, border-color 0.3s;
}

/* Al bajar, la cabecera se despega con una sombra. Es lo que hace que se lea
   como una barra encima de la página y no como parte de ella. */
header.alta.lejos {
  border-bottom-color: transparent;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.42);
}

/* Y la barra turquesa de lo que se lleva leído. Dos píxeles, y dice cuánto
   falta sin que nadie tenga que mirar la barra del navegador. */
header.alta::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: var(--leido, 0%);
  background: var(--turquoise);
  transition: width 0.12s linear;
}
header.alta .dentro {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}
header .marca {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
/* En el móvil, el monograma solo.
 *
 * El lockup entero lleva el nombre escrito debajo del dibujo, y a 34 px de
 * alto ese nombre mide tres milímetros: no se lee, y encima le roba el sitio
 * al dibujo, que sí se reconoce. El nombre completo está en el pie, en la
 * portada y en el título de la pestaña. */
header .marca img {
  height: 36px;
  width: auto;
}
.solo-ancho {
  display: none;
}
header nav {
  display: none;
}
header .acciones {
  display: flex;
  align-items: center;
  gap: 10px;
}
header .boton {
  padding: 9px 16px;
  white-space: nowrap;
  font-size: 0.74rem;
}

/* El interruptor de idioma. Tres letras, sin banderitas: una bandera dice de
   qué país eres, no qué idioma hablas, y la mitad de sus clientes son belgas. */
.idiomas {
  display: flex;
  gap: 2px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.idiomas a {
  padding: 5px 7px;
  text-decoration: none;
  color: var(--texte-sombre-doux);
  border-radius: 3px;
}
.idiomas a[aria-current='true'] {
  color: var(--encre);
  background: var(--turquoise);
}

.abrir-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: none;
  border: 1px solid var(--encre-ligne);
  border-radius: var(--radio);
  color: var(--blanc);
  cursor: pointer;
  padding: 0;
}
.abrir-menu svg {
  width: 20px;
  height: 20px;
}

/* El menú de móvil. Se abre entero, con los dedos en mente: cada línea mide
   más de 48 px de alto. */
#menu {
  position: fixed;
  inset: var(--cabecera) 0 0;
  background: var(--encre);
  padding: 8px var(--marge) 40px;
  overflow-y: auto;
  z-index: 49;
}
#menu[hidden] {
  display: none;
}
#menu a {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid var(--encre-ligne);
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--blanc);
}
#menu a[aria-current='page'] {
  color: var(--turquoise);
}
#menu .boton {
  margin-top: 24px;
  width: 100%;
  justify-content: center;
  border-bottom: 2px solid var(--turquoise);
}

/* --------------------------------------------------------------------------
   Las fotos que suben ellos
   -------------------------------------------------------------------------- */

img.foto {
  width: 100%;
  display: block;
  background: var(--encre-carte);
}

/* La proporción va declarada para que la página no dé un salto cuando cada
   foto termina de bajar. Sin esto, el que estaba leyendo pierde la línea. */
img.foto.tapa {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
img.foto.grande {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
img.foto.ancha {
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

/* Una foto de ejemplo, de las que ponemos nosotros para que se vea el diseño
   antes de que lleguen las suyas.

   El archivo ya lleva la banda grabada, pero la página lo recorta y la banda se
   queda fuera del recorte. Este rótulo va encima de la foto, en el rojo del
   aviso de borrador, y no se puede recortar porque no está dentro de la foto. */
.con-ejemplo {
  display: block;
  position: relative;
}
/* La foto prestada lleva una banda grabada en el archivo, abajo del todo, que
   dice «PHOTO D'EXEMPLE». Está ahí para cuando el archivo viaja solo, por
   WhatsApp o descargado; en la página el aviso lo da el rótulo rojo de arriba.
   El recorte se comía casi toda la banda pero no del todo, y asomaban catorce
   píxeles: una raya turquesa suelta debajo de la foto que no se entendía. El
   encuadre alto se come el sobrante ENTERO por abajo, que es donde está. */
.con-ejemplo > img.foto {
  object-position: 50% 0;
}
.marca-ejemplo {
  position: absolute;
  top: 0;
  left: 0;
  background: #b2242b;
  color: #fff;
  padding: 7px 14px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* La tapa de una tarjeta sale a los bordes: el recuadro tiene su relleno, y una
   foto con margen dentro de una tarjeta se ve como una foto pegada. */
.stage.con-foto,
.tarjeta.con-foto {
  padding-top: 0;
  overflow: hidden;
}
/* La foto de una de ejemplo va envuelta para poder llevar su rótulo encima, así
   que la envoltura tiene que salir a los bordes igual que la foto desnuda. Sin
   esta segunda mitad, las tarjetas con foto de ejemplo se ven con un marco
   blanco alrededor de la foto y las otras no. */
.stage.con-foto > img.foto,
.stage.con-foto > .con-ejemplo,
.tarjeta.con-foto > img.foto,
.tarjeta.con-foto > .con-ejemplo {
  margin: 0 -22px 16px;
  width: calc(100% + 44px);
  max-width: none;
}
.tarjeta.con-foto > img.foto,
.tarjeta.con-foto > .con-ejemplo {
  margin: 0 -24px 16px;
  width: calc(100% + 48px);
}

/* Y crece despacio al pasar por encima. Es el único gesto de hover del sitio
   que toca una foto, y se apaga solo en un móvil, donde no hay «encima». */
.stage.con-foto,
.tarjeta.con-foto {
  --zoom: 1;
}
@media (hover: hover) {
  .stage.con-foto:hover img.foto,
  .tarjeta.con-foto:hover img.foto {
    transform: scale(1.04);
  }
  .stage.con-foto img.foto,
  .tarjeta.con-foto img.foto {
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

.foto-grande {
  padding: 0;
  background: var(--encre);
}
.foto-grande img {
  max-height: 62vh;
}

.galeria {
  display: grid;
  gap: 14px;
  margin-top: 34px;
  grid-template-columns: 1fr;
}
.galeria figure {
  margin: 0;
}
.galeria figcaption {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-top: 8px;
}

/* La vista de Marbella, en la página que habla de Marbella. Va a sangre y
   pegada a la cabecera, sin margen entre las dos: la foto termina de decir lo
   que dice el titular («en février, il fait 18 degrés») y separarlas con una
   franja blanca rompe la frase en dos. */
.vista {
  margin: 0;
  background: var(--encre);
}
.vista img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 54vh;
  object-fit: cover;
}

/* La lista de créditos del aviso legal. */
.creditos {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.88rem;
}
.creditos li + li {
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   La portada
   -------------------------------------------------------------------------- */

.portada {
  background: var(--encre);
  color: var(--blanc);
  padding: 54px 0 62px;
  position: relative;
  overflow: hidden;
}
/* Las dos líneas del titular entran una detrás de otra, y solo en la portada.
   Es la única animación que arranca sola, sin que nadie baje: es la primera
   impresión, y dura menos de un segundo. */
.portada h1 span {
  display: block;
}
.portada h1 span:last-child {
  color: var(--turquoise);
}
.anima .portada h1 span,
.anima .portada .bajada,
.anima .portada .botones {
  animation: entrar 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.anima .portada h1 span:nth-child(2) {
  animation-delay: 0.09s;
}
.anima .portada .bajada {
  animation-delay: 0.2s;
}
.anima .portada .botones {
  animation-delay: 0.3s;
}

@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Un trazo turquesa que cruza la portada por detrás, con la misma diagonal que
   el corte del logo. Se mueve muy despacio y solo en pantallas anchas: en un
   móvil, con el texto encima, sería ruido. */
.portada::after {
  content: '';
  position: absolute;
  right: -18%;
  top: -30%;
  width: 46%;
  height: 170%;
  background: var(--turquoise);
  opacity: 0.09;
  transform: rotate(18deg);
  pointer-events: none;
}
@media (max-width: 699px) {
  .portada::after {
    opacity: 0.06;
    right: -40%;
  }
}
.anima .portada::after {
  animation: cruzar 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes cruzar {
  from {
    opacity: 0;
    transform: rotate(18deg) translateX(60px);
  }
}
.portada .bajada {
  font-size: 1.1rem;
  max-width: 46ch;
  margin-top: 22px;
  color: var(--texte-sombre-doux);
}

/* Sobre fondo oscuro manda el turquesa de la marca, que ahí brilla y llega de
   sobra al contraste. La variante oscura es solo para el fondo claro. */
.oscura,
.portada,
.cabecera-pagina,
footer {
  --turquoise-texto: var(--turquoise);
}

/* La cabecera corta de las páginas que no son la portada. */
.cabecera-pagina {
  background: var(--encre);
  color: var(--blanc);
  padding: 44px 0 46px;
}
.cabecera-pagina .entradilla {
  color: var(--texte-sombre-doux);
}

/* --------------------------------------------------------------------------
   Las tarjetas
   -------------------------------------------------------------------------- */

.rejilla {
  display: grid;
  gap: 16px;
  margin-top: 34px;
  grid-template-columns: 1fr;
}

.tarjeta {
  background: var(--blanc);
  border: 1px solid var(--clair-ligne);
  border-radius: var(--radio);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.oscura .tarjeta {
  background: var(--encre-carte);
  border-color: var(--encre-ligne);
}
.tarjeta .numero {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--turquoise-texto);
  line-height: 1;
}
.tarjeta h3 {
  margin: 0;
}
.tarjeta p {
  margin: 0;
  font-size: 0.97rem;
}
.tarjeta .flecha {
  margin-top: auto;
  padding-top: 10px;
}

/* --------------------------------------------------------------------------
   Los stages
   -------------------------------------------------------------------------- */

.stage {
  background: var(--blanc);
  border: 1px solid var(--clair-ligne);
  border-radius: var(--radio);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.oscura .stage {
  background: var(--encre-carte);
  border-color: var(--encre-ligne);
}

.stage .fechas {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
}
.stage h3 {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--turquoise-texto);
  margin: 0;
}
.stage .datos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Las etiquetas de nivel, plazas y precio. Van juntas y a la vista, porque es
   lo que se compara entre un stage y otro sin leer nada más. */
.etiqueta {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--clair-ligne);
  border-radius: 999px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.oscura .etiqueta {
  border-color: var(--encre-ligne);
}
/* El precio, en la ficha de un stage. Es la misma pastilla que «Il reste 2
   places»: color, un grado de giro y sombra de su propio color. En un teléfono
   las etiquetas se apilan y quedaba pegada a «INTERMÉDIAIRE ET AVANCÉ» sin aire,
   leyéndose como una etiqueta más y no como el precio. */
.etiqueta.fuerte {
  background: var(--turquoise);
  border-color: transparent;
  color: var(--encre);
  transform: rotate(-1.6deg);
  box-shadow: 0 10px 16px -10px rgba(9, 189, 209, 0.6), 0 2px 6px rgba(9, 189, 209, 0.28);
}

/* La fila de etiquetas de la ficha: más aire entre ellas que en una tarjeta,
   porque aquí una de las tres es una pastilla girada y necesita su sitio. */
.datos.separadas {
  gap: 10px 12px;
  align-items: center;
}
/* Y en un teléfono el precio se va a su propia línea. Apilado detrás del nivel
   se leía como la tercera etiqueta de una lista; solo, se lee como el precio. */
@media (max-width: 560px) {
  /* En bloque y no en flex: así el precio cae solo a su renglón Y se queda del
     ancho de lo que dice. Con flex-basis al 100 % bajaba, sí, pero estirado de
     borde a borde, y una pastilla estirada deja de ser una pastilla. */
  .datos.separadas {
    display: block;
  }
  .datos.separadas .etiqueta {
    margin: 0 8px 8px 0;
  }
  .datos.separadas .etiqueta.fuerte {
    display: inline-block;
    margin: 8px 0 0;
    font-size: 0.82rem;
    padding: 9px 15px;
  }
}
.etiqueta.aviso {
  border-color: var(--turquoise);
  color: var(--turquoise);
}
.etiqueta.gastado {
  opacity: 0.6;
}

.stage .precio {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stage .precio small {
  display: block;
  font-family: var(--texte-police);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texte-doux);
  margin-top: 4px;
}
.oscura .stage .precio small {
  color: var(--texte-sombre-doux);
}
/* «Sur devis» va donde va un precio, y por eso ocupa el mismo sitio. Pero no
   es una cifra, así que no se compone como una cifra: más pequeño y sin el
   apretado de los números grandes. */
.stage .precio.chico {
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* El precio, separado de las etiquetas por una raya con una cruz en cada punta.
   Antes iban pegados: veinte píxeles entre «INTERMÉDIAIRE ET AVANCÉ» y un «900 €»
   de 1,9 rem en negrita, y las dos cosas se leían como una sola.
   La cruz en la punta de una raya es el lenguaje de retícula técnica de
   pulsor.agency y de la landing de Club IA. Aquí entra donde hace falta separar
   dos bloques, no como adorno repartido por la página: una retícula de fondo en
   una web que vende un viaje al sol sería de otra marca. */
.stage .pie-tarjeta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  position: relative;
  /* El aire de arriba va en padding y NO en margin: el `margin-top: auto` de
     arriba es lo que empuja el precio y el botón al fondo de la tarjeta, y un
     `margin-top: 20px` escrito después lo borraba. Por eso las dos tarjetas de
     stage no alineaban: la que lleva la pastilla de la oferta empujaba su precio
     más abajo que la otra. */
  padding-top: 20px;
  padding-top: 22px;
  border-top: 1px solid var(--linea-tarjeta, var(--clair-ligne));
}
/* El signo va encima de la raya y se come el trozo que tiene debajo, para que
   no se vea la raya cruzándolo. Por eso lleva el fondo de la tarjeta. */
.stage .pie-tarjeta::before,
.stage .pie-tarjeta::after {
  content: '+';
  position: absolute;
  top: -1px;
  transform: translateY(-50%);
  font-family: var(--titre);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  color: var(--linea-tarjeta, var(--clair-ligne));
  background: var(--fondo-tarjeta, var(--blanc));
  padding: 0 4px;
}
.stage .pie-tarjeta::before {
  left: -5px;
}
.stage .pie-tarjeta::after {
  right: -5px;
}
.oscura .stage {
  --linea-tarjeta: var(--encre-ligne);
  --fondo-tarjeta: var(--encre-carte);
}

/* Lo que incluye y lo que no, uno al lado del otro. Está prometido por escrito
   en la respuesta 7, y por eso las dos columnas tienen el mismo peso: si una
   se ve menos que la otra, la promesa se cumple a medias. */
.incluye {
  display: grid;
  gap: 22px;
  margin-top: 22px;
}
.incluye h4 {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  margin: 0 0 12px;
  font-weight: 600;
}
.incluye .si h4 {
  color: var(--turquoise-texto);
}
.incluye ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.97rem;
}
.incluye li {
  padding: 7px 0 7px 26px;
  position: relative;
  border-top: 1px solid var(--clair-ligne);
}
.oscura .incluye li {
  border-top-color: var(--encre-ligne);
}
.incluye li:first-child {
  border-top: 0;
}
.incluye .si li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--turquoise-texto);
  font-weight: 700;
}
.incluye .no li::before {
  content: '×';
  position: absolute;
  left: 0;
  color: var(--texte-doux);
  font-weight: 700;
}
.oscura .incluye .no li::before {
  color: var(--texte-sombre-doux);
}

/* Una opinión. Va entera y con comillas de verdad, no recortada: una opinión
   cortada para que quepa deja de parecer de una persona. */
.tarjeta.opinion blockquote {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
}
.tarjeta.opinion blockquote::before {
  content: '«\00a0';
  color: var(--turquoise);
}
.tarjeta.opinion blockquote::after {
  content: '\00a0»';
  color: var(--turquoise);
}
.pequeno {
  font-size: 0.85rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Las cuatro fórmulas
   --------------------------------------------------------------------------
   Las cuatro se leen comparándolas, así que se ven de dos en dos y no de una
   en una: para elegir entre cuatro cosas hay que tener dos delante a la vez. */

.formula {
  background: var(--encre-carte);
  border: 1px solid var(--encre-ligne);
  border-radius: var(--radio);
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
}
.formula .numero {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--turquoise-texto);
  line-height: 1;
  margin: 0 0 14px;
}
.formula h3 {
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  margin: 0;
}
/* El nombre comercial de la gama, que pidieron el 18 de septiembre de 2026.
   Va debajo del nombre corto y en gris: el nombre corto es el que se busca con
   la vista, y este es el que se lee después. En mayúsculas pequeñas, como los
   demás rótulos del sitio, para que no compita con el título. */
.formula .gama {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-sombre-doux);
  margin: 8px 0 0;
}
.formula .lema {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--turquoise-texto);
  margin: 6px 0 12px;
}
.formula .marcada {
  margin-top: 18px;
}
/* El «à partir de», cuando ellos lo han puesto. La palabra va en el gris de la
   tarjeta y la cifra en blanco y grande: lo que se busca con la vista es el
   número, no la preposición. Va encima de la lista, y no al final, porque en
   una tarjeta de móvil el final queda dos pantallazos más abajo. */
.formula .desde {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--encre-ligne);
  color: var(--texte-sombre-doux);
  font-size: 0.92rem;
}
.formula .desde strong {
  display: block;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--blanc);
  letter-spacing: -0.01em;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   El bandeau
   --------------------------------------------------------------------------

   La línea que encienden y apagan desde el panel. En turquesa, que es el color
   de la marca y el único que en este sitio dice «esto es nuevo»: el rojo ya lo
   usan el aviso de borrador y las fotos de ejemplo, que son cosas nuestras y no
   suyas, y no se pueden confundir. */
.bandeau {
  background: var(--turquoise);
  color: var(--encre);
  text-align: center;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.35;
}
.bandeau p,
.bandeau a {
  display: block;
  margin: 0;
  padding: 10px var(--marge);
  color: inherit;
  text-decoration: none;
}
.bandeau a:hover,
.bandeau a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bandeau a:focus-visible {
  outline-color: var(--encre);
  outline-offset: -4px;
}
.formula .marcada li {
  font-size: 0.94rem;
}

/* Lo que llevan las cuatro. Va aparte y una sola vez: repetir cuatro líneas
   idénticas en cada tarjeta no es insistir, es ruido. */
.comun {
  border-top: 1px solid var(--encre-ligne);
  margin-top: 38px;
  padding-top: 26px;
}
.comun .marcada {
  columns: 2;
  column-gap: 34px;
  margin-top: 0;
}
.comun .marcada li {
  break-inside: avoid;
  border-top: 0;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* La misma lista de palomitas, suelta, fuera del bloque de dos columnas. */
.marcada {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.97rem;
}
.marcada li {
  padding: 7px 0 7px 26px;
  position: relative;
  border-top: 1px solid var(--encre-ligne);
}
.marcada li:first-child {
  border-top: 0;
}
.marcada li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--turquoise-texto);
  font-weight: 700;
}

/* La ficha de un stage */
.volver {
  color: inherit;
  text-decoration: none;
}
.volver:hover {
  color: var(--blanc);
}
.fechas-grandes {
  font-family: var(--titre);
  font-weight: 600;
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: 14px;
}
.datos.separadas {
  margin-top: 18px;
}
.rotulo.pegado {
  margin: 0;
}
h2.chico {
  font-size: clamp(1.4rem, 5vw, 2rem);
}
.separado {
  margin-top: 26px;
}
.dentro.estrecho {
  max-width: 70ch;
}
.dentro.estrecho h3 {
  margin-top: 30px;
  margin-bottom: 10px;
  color: var(--turquoise-texto);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  font-weight: 600;
}

.vacio {
  border: 1px dashed var(--clair-ligne);
  border-radius: var(--radio);
  padding: 28px;
  margin-top: 30px;
  max-width: 60ch;
}
.oscura .vacio {
  border-color: var(--encre-ligne);
}

/* --------------------------------------------------------------------------
   El formulario
   -------------------------------------------------------------------------- */

.formulario {
  margin-top: 26px;
  max-width: 620px;
}

/* El anzuelo contra los robots.
 *
 * Se esconde con posición y no con display:none ni visibility:hidden, porque
 * los que rellenan formularios en cadena saben mirar esas dos y se saltan el
 * campo. Y lleva aria-hidden y tabindex -1, para que quien navega con teclado
 * o con lector de pantalla no se lo encuentre nunca: si se lo encontrara y lo
 * rellenara, le estaríamos tirando el mensaje a una persona ciega. */
.anzuelo {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.campo {
  margin-bottom: 18px;
}
.campo label {
  display: block;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.campo .ayuda {
  font-size: 0.85rem;
  color: var(--texte-doux);
  margin: 6px 0 0;
}
.oscura .campo .ayuda {
  color: var(--texte-sombre-doux);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--clair-ligne);
  border-radius: var(--radio);
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--texte-police);
  font-size: 16px; /* menos de 16 y el iPhone hace zoom al tocar el campo */
  line-height: 1.4;
}
.oscura .campo input,
.oscura .campo select,
.oscura .campo textarea {
  background: var(--encre-carte);
  border-color: var(--encre-ligne);
  color: var(--blanc);
}
.campo textarea {
  min-height: 120px;
  resize: vertical;
}
.campo .obligatorio {
  color: var(--turquoise-texto);
}
.aviso-formulario {
  font-size: 0.85rem;
  color: var(--texte-doux);
  margin-top: 14px;
}
.oscura .aviso-formulario {
  color: var(--texte-sombre-doux);
}
.respuesta {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radio);
  font-size: 0.95rem;
  border: 1px solid var(--turquoise);
}
.respuesta[hidden] {
  display: none;
}
.respuesta.mal {
  border-color: #d2545a;
}

/* Lo que se ofrece justo después de mandar: el mismo mensaje, ya escrito, por
   WhatsApp. El botón va dentro del recuadro y en su propia línea, para que se
   lea como una oferta y no como un segundo formulario que hay que rellenar. */
.respuesta.wa-despues {
  margin-top: 12px;
  border-style: dashed;
}
.respuesta.wa-despues .boton {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   El botón fijo de WhatsApp
   --------------------------------------------------------------------------
   Prometido por escrito en la respuesta 10: «le bouton pour vous écrire reste
   visible en permanence». Así que está en todas las páginas y en todos los
   tamaños de pantalla, y no se esconde al bajar. */

.wa-fijo {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  border-radius: 999px;
  background: var(--turquoise);
  color: var(--encre);
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(10, 16, 26, 0.28);
}
.wa-fijo svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* En el teléfono, solo el icono. Con la palabra al lado el botón mide el doble
   y aterriza encima de un párrafo: en el escritorio cae en una esquina vacía,
   pero en una pantalla angosta no hay esquina vacía. El nombre sigue estando
   para quien escucha la página, en el aria-label. */
/* La cabecera en un teléfono. Medido a 375 px: el logo, los tres idiomas, el
   botón y la hamburguesa suman 299 px, y con los huecos y los márgenes pasaban
   de 375. Al no caber, «Nous écrire» partía en dos renglones y se comía la
   barra entera. Se aprieta lo que no se lee (los huecos y el relleno del
   botón) y no se toca ni una palabra. */
@media (max-width: 560px) {
  header.alta .dentro {
    gap: 8px;
  }
  header .acciones {
    gap: 8px;
  }
  header .boton {
    padding: 9px 11px;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 560px) {
  .wa-fijo {
    padding: 14px;
    gap: 0;
  }
  .wa-fijo span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   El pie
   -------------------------------------------------------------------------- */

footer {
  background: var(--encre);
  color: var(--texte-sombre-doux);
  padding: 46px 0 96px; /* el hueco de abajo es para el botón fijo */
  font-size: 0.94rem;
}
footer img.logo {
  height: 54px;
  width: auto;
  margin-bottom: 14px;
}
footer .columnas {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
}
footer h4 {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blanc);
  margin: 0 0 12px;
}
footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
footer li {
  margin-bottom: 7px;
}
footer a {
  color: inherit;
  text-decoration: none;
}
footer a:hover {
  color: var(--turquoise);
}
footer .abajo {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--encre-ligne);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  font-size: 0.84rem;
}

/* --------------------------------------------------------------------------
   El aviso de borrador
   --------------------------------------------------------------------------
   Solo sale con --borrador, y se ve desde el otro lado de la habitación a
   propósito: un borrador que se pueda confundir con el sitio publicado es un
   borrador que alguien va a enseñarle al cliente. */

.borrador {
  background: #b2242b;
  color: #fff;
  padding: 10px var(--marge);
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}
.falta {
  display: inline-block;
  background: #b2242b;
  color: #fff;
  padding: 1px 8px;
  border-radius: 3px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Las pantallas grandes
   -------------------------------------------------------------------------- */

@media (min-width: 700px) {
  :root {
    --marge: 32px;
  }
  section {
    padding: 84px 0;
  }
  .rejilla {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .incluye {
    grid-template-columns: 1fr 1fr;
    gap: 34px;
  }
  .portada {
    padding: 90px 0 100px;
  }
  .cabecera-pagina {
    padding: 70px 0 74px;
  }
  footer .columnas {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
  .wa-fijo {
    right: 24px;
    bottom: 24px;
  }
}

@media (min-width: 1000px) {
  :root {
    --cabecera: 74px;
  }
  header nav {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
  }
  header nav a {
    font-family: var(--titre);
    font-weight: 600;
    font-size: 0.76rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--blanc);
    padding: 4px 0;
    border-bottom: 2px solid transparent;
  }
  header nav a:hover {
    color: var(--turquoise);
  }
  header nav a[aria-current='page'] {
    border-bottom-color: var(--turquoise);
  }
  header .marca img {
    height: 46px;
  }
  .solo-movil {
    display: none;
  }
  .solo-ancho {
    display: block;
  }
  .abrir-menu {
    display: none;
  }
  #menu {
    display: none !important;
  }
  .rejilla.de-cuatro {
    grid-template-columns: repeat(4, 1fr);
  }
  .rejilla.de-tres {
    grid-template-columns: repeat(3, 1fr);
  }
  .rejilla.de-dos {
    grid-template-columns: repeat(2, 1fr);
  }
  .dos-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   La firma
   --------------------------------------------------------------------------
   «Le padel te fait venir. L’expérience te fera revenir.» Es de ellos, y va al
   final de todas las páginas, justo antes del pie.

   Y se anima, pero no por adornar. La frase es un montaje y un remate: la
   primera línea dice por qué vienes, la segunda por qué vuelves.

   Lo que lo une es la pelota. Cruza, REBOTA EN EL CRISTAL de la derecha y
   vuelve, y la segunda línea llega justo con el rebote. No es un adorno con
   forma de pelota: es la frase dibujada. En pádel la pelota vuelve, y eso no
   pasa en ningún otro deporte de raqueta. Ese rebote es el deporte entero.

   Pasa por DETRÁS del texto, no por delante. Por delante sería una mosca
   cruzando la pantalla; por detrás es el fondo moviéndose y el texto quieto.

   Todo con transform, que es lo único que un navegador mueve sin recalcular la
   página. Y todo apagado para quien pidió menos movimiento: ahí no hay pelota,
   hay una frase. */

.firma {
  background: var(--turquoise);
  color: var(--encre);
  padding: 68px 0 64px;
  text-align: center;
  overflow: hidden;
  position: relative;
}
.firma .dentro {
  position: relative;
}
.firma p {
  margin: 0;
  font-family: var(--titre);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 6vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1; /* el texto por delante de la pelota */
}

/* La ventanilla por la que sube cada línea. */
.firma .linea {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em; /* sitio para las colas de la g y la p */
}
.firma .sube {
  display: block;
}
.firma .acento {
  color: var(--blanc);
}

/* El carril: ancho de la banda entera. Es LO QUE VIAJA, y por eso mide lo que
   mide: un porcentaje en un transform se calcula sobre el ancho del propio
   elemento, así que la pelota tenía que ir dentro de algo tan ancho como su
   recorrido. Con la pelota viajando sola, cruzaba veintiséis píxeles. */
.firma .carril {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}
.firma .pelota {
  display: block;
  width: clamp(18px, 2.4vw, 26px);
  height: clamp(18px, 2.4vw, 26px);
  margin-top: calc(clamp(18px, 2.4vw, 26px) / -2);
}
.firma .pelota svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* --------------------------------------------------------------------------
   Y cómo se mueve

   El bloque entero lleva la clase que mira el guion, pero NO se desvanece como
   el resto: lo que se mueve son las líneas y la pelota. Por eso se le quita
   aquí la regla general. */

.anima .revelar.firma {
  opacity: 1;
  transform: none;
  transition: none;
}

.anima .firma .sube {
  transform: translateY(110%);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* La segunda línea espera al rebote. Ese medio segundo no es un tiempo de
   carga: es la pausa de la frase, y ahora además tiene un motivo que se ve. */
.anima .firma .linea:nth-child(2) .sube {
  transition-delay: 0.45s;
}

.anima .firma.aqui .sube {
  transform: none;
}

/* El viaje. Va en dos capas porque el ida y vuelta y el arco no llevan la
   misma cadencia: una sola animación tendría que elegir, y elegiría mal.

   Cada tramo lleva su propia curva, por eso la animación es `linear` y las
   curvas van dentro de los fotogramas. Ida rápida, golpe, y vuelta más lenta,
   como una pelota de verdad contra un cristal. */
.anima .firma.aqui .carril {
  animation: cruzar 1.5s linear forwards;
}
.anima .firma.aqui .pelota {
  animation: botar 1.5s linear forwards;
}

@keyframes cruzar {
  0% {
    transform: translateX(-6%);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.35, 0, 0.5, 1);
  }
  6% {
    opacity: 1;
  }
  /* El golpe contra el cristal. */
  30% {
    transform: translateX(95%);
    animation-timing-function: cubic-bezier(0.25, 0.9, 0.45, 1);
  }
  /* Y la vuelta, más lenta y sin llegar tan lejos. Esta es la mitad que
     importa: la primera versión se apagaba antes de volver, y volver es
     justamente lo que dice la frase. Por eso se mantiene encendida hasta el
     final del recorrido y se apaga en el último suspiro. */
  82% {
    transform: translateX(18%);
    opacity: 1;
    animation-timing-function: linear;
  }
  100% {
    transform: translateX(8%);
    opacity: 0;
  }
}

/* El arco y el giro. Sube y baja una vez por trayecto, y gira todo el rato. */
@keyframes botar {
  0% {
    transform: translateY(12px) rotate(0deg);
  }
  15% {
    transform: translateY(-15px) rotate(140deg);
  }
  30% {
    transform: translateY(2px) rotate(290deg);
  }
  55% {
    transform: translateY(-11px) rotate(410deg);
  }
  82% {
    transform: translateY(4px) rotate(520deg);
  }
  100% {
    transform: translateY(0) rotate(570deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .anima .firma .sube {
    transform: none !important;
    transition: none !important;
  }
  /* Ni pelota ni rebote: una frase, quieta. */
  .anima .firma .carril,
  .anima .firma.aqui .carril,
  .anima .firma.aqui .pelota {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Los toques finos
   --------------------------------------------------------------------------

   Puestos el 27 de septiembre de 2026, cuando Federico pidió «algunos toques
   premium y animaciones ligeras». Ni un color, ni una tipografía, ni el logo:
   eso es la marca de ellos y no se toca. Lo de aquí es cómo se comporta lo que
   ya hay cuando alguien lo toca con el dedo o con el ratón.

   La regla que se siguió: cada gesto tiene que poder explicarse en una frase.
   Si hace falta un párrafo para justificar una animación, sobra.

   Todo va en `translate`, `scale` y `opacity`, que el navegador resuelve sin
   volver a calcular la página. Y `translate` a propósito en vez de `transform`:
   las tarjetas ya llevan un `transform` puesto por la animación de entrada, y
   son dos propiedades distintas que se suman en vez de pisarse.
   -------------------------------------------------------------------------- */

/* 1. Las tarjetas se levantan un poco. Tres píxeles y una sombra larga: lo
      justo para que se note que la tarjeta entera es la que responde, y no
      solo el enlace de dentro. En un móvil no existe el «encima», así que
      esto no se carga siquiera. */
@media (hover: hover) {
  /* Van los nombres de propiedad sueltos y no el atajo "transition", y el
     selector repetido con .revelar delante. Las tarjetas ya llevan una
     transición puesta por la animación de entrada (.anima .revelar), que pesa
     más que .stage a secas: con el atajo, la de arriba borraba esta entera y
     el levantón salía de golpe, sin suavizar. Se vio midiéndolo en el
     navegador, no leyéndolo. */
  .stage,
  .tarjeta,
  .formula,
  .anima .revelar.stage,
  .anima .revelar.tarjeta,
  .anima .revelar.formula {
    transition-property: opacity, transform, translate, box-shadow, border-color;
    transition-duration: 0.55s, 0.55s, 0.4s, 0.4s, 0.4s;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .stage:hover,
  .tarjeta:hover {
    translate: 0 -3px;
    box-shadow: 0 18px 38px -22px rgba(10, 16, 26, 0.5);
    border-color: #c6d0d9;
  }
  .oscura .tarjeta:hover,
  .formula:hover {
    translate: 0 -3px;
    box-shadow: 0 22px 46px -26px rgba(0, 0, 0, 0.75);
    border-color: rgba(9, 189, 209, 0.4);
  }
}

/* 2. Un botón que se hunde al apretarlo. Un píxel, y el dedo cree que el
      botón hizo algo antes de que llegue la página siguiente. */
.boton {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s, translate 0.08s ease;
}
.boton:active {
  translate: 0 1px;
}
/* Los enlaces pierden el destello azul del móvil, pero NO se quedan sin
   respuesta: quitar el destello y no poner nada es lo que hace que un enlace
   parezca roto al tocarlo. Se apagan un momento, que es lo mismo que hace el
   destello pero con el color de la página. */
.flecha,
nav a,
footer a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.1s ease;
}
.flecha:active,
nav a:active,
footer a:active {
  opacity: 0.55;
}

/* 3. Los números, todos del mismo ancho. «900 €» y «1 150 €» uno al lado del
      otro con cifras de ancho distinto bailan, y un precio que baila se lee
      como un precio poco serio. */
.stage .precio,
.stage .datos,
.formula .desde,
.formula .desde strong,
.evento .precio {
  font-variant-numeric: tabular-nums;
}

/* 4. Un hilo de luz en el borde de arriba de las tarjetas oscuras. Es lo que
      hace que una tarjeta sobre fondo oscuro parezca tener un canto y no un
      dibujo de canto. Se ve a media luz y nadie sabría decir que está. */
.formula {
  position: relative;
  overflow: hidden;
}
.formula::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1) 22%,
    rgba(9, 189, 209, 0.5) 50%,
    rgba(255, 255, 255, 0.1) 78%,
    transparent
  );
  pointer-events: none;
}

/* 5. La entrada escalonada llegaba hasta la cuarta tarjeta. La quinta y la
      sexta entraban todas juntas, y se notaba justo en la página de stages
      cuando hay más de cuatro. */
.anima .revelar:nth-child(5) {
  transition-delay: 0.28s;
}
.anima .revelar:nth-child(6) {
  transition-delay: 0.35s;
}

/* 6. Que el navegador sepa que el formulario oscuro es oscuro.
      Los campos ya se pintan a mano, pero la lista que se despliega al tocar
      un «choisis» la dibuja el sistema, y sobre un formulario negro salía en
      blanco. Va SOLO en los campos oscuros: el cuerpo de la página es blanco,
      y ponerlo en :root dejaría la barra de desplazamiento negra en una
      página clara. */
.oscura .campo input,
.oscura .campo select,
.oscura .campo textarea {
  color-scheme: dark;
}

/* Las caras de Sandy y Hervé, en «Qui sommes-nous».
   Van en 3/2 apaisado, igual que la tapa de un stage, y eso no es pereza: las
   dos están TOMADAS así, en 1,40 y 1,34. Metidas en un cuadrado había que
   recortarlas de alto, y en la de Hervé el fotógrafo ya lo encuadró pegado
   arriba: no hay de dónde sacar aire, y le cortaba la cabeza. La forma del
   marco la manda la foto, no al revés. */
.tarjeta.cara > img.foto {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 0;
}

/* --------------------------------------------------------------------------
   La cruz, probada en dos sitios más (28 de septiembre de 2026)
   --------------------------------------------------------------------------

   Federico pidió verla en las fórmulas y en los rótulos. Es la misma marca que
   separa el precio en la tarjeta de un stage, y viene del lenguaje de retícula
   técnica de pulsor.agency y de la landing de Club IA.

   Ojo con el peso: en las dos referencias esa marca va al 13 % sobre claro. Si
   se sube de ahí deja de ser una marca y pasa a ser un adorno, y este sitio
   vende cuatro días de sol, no software.
   -------------------------------------------------------------------------- */

/* 1. Las cuatro esquinas de cada tarjeta de fórmula.
      Van en un solo pseudo-elemento con cuatro capas de fondo, porque una
      tarjeta no tiene cuatro esquinas donde colgar cuatro elementos. El hilo de
      luz de arriba sigue en ::before, así que esto va en ::after. */
.formula::after {
  content: '';
  position: absolute;
  inset: 9px;
  pointer-events: none;
  background-image: var(--cruz-clara), var(--cruz-clara), var(--cruz-clara), var(--cruz-clara);
  background-repeat: no-repeat;
  background-position: left top, right top, left bottom, right bottom;
  background-size: 9px 9px;
}
:root {
  --cruz-clara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='rgba(255,255,255,0.26)' stroke-width='1'/%3E%3C/svg%3E");
}

/* 2. El rótulo de cada sección, con su cruz delante.
      Es lo que hace que un rótulo se lea como una marca de sección y no como
      una línea de texto pequeña que sobró. */
.rotulo::before {
  content: '+';
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.55;
  margin-right: 9px;
}
/* Salvo el de volver, que ya lleva su flecha: «+ ← TOUS LES STAGES» son dos
   signos seguidos y ninguno de los dos se entiende. */
.rotulo:has(> .volver)::before {
  content: none;
}

/* --------------------------------------------------------------------------
   La pastilla de «il reste 2 places»
   --------------------------------------------------------------------------

   Es la firma de pulsor.agency, la que Federico señaló en la landing de
   Club IA: un rectángulo redondeado de color, girado unos grados, con una
   sombra de su propio color.

   Estuvo un rato en el titular y se quitó: el titular lo escribieron ellos y
   tocarlo obliga a validarlo otra vez. Aquí no hace falta, porque el texto ya
   existía y ya lo aprobaron («Il reste 2 places»), y porque el número sale de
   lo que cargan ellos.

   Y es el sitio donde más trabaja: de todo lo que hay en una tarjeta, lo que
   hace escribir hoy en vez de la semana que viene es que queden dos plazas.

   Dos cosas que NO se copian de la referencia, las dos porque tocarían la
   marca: la letra (la de ellos es monoespaciada y este sitio no tiene ninguna)
   y el color (el de ellos es su terracota; aquí el turquesa de la marca con la
   tinta encima, la misma pareja del botón principal, 8,4 de contraste).
   -------------------------------------------------------------------------- */

.etiqueta.aviso {
  border-color: transparent;
  background: var(--turquoise);
  color: var(--encre);
  transform: rotate(-2deg);
  box-shadow: 0 10px 16px -10px rgba(9, 189, 209, 0.6), 0 2px 6px rgba(9, 189, 209, 0.28);
}

/* Girada, la pastilla pide un poco más de sitio a los lados que una etiqueta
   normal: si no, la esquina de abajo toca a la de al lado. */
.stage .datos {
  align-items: center;
}
.etiqueta.aviso + .etiqueta,
.etiqueta + .etiqueta.aviso {
  margin-left: 2px;
}

/* --------------------------------------------------------------------------
   La oferta de lanzamiento
   --------------------------------------------------------------------------

   Sandy abrió una el 28 de septiembre de 2026 para el stage de octubre. Son
   tres piezas y ninguna sobra: la pastilla que dice que hay oferta, el precio
   de antes tachado al lado del de ahora, y el último día escrito.

   La pastilla va turquesa PLANA, sin giro y sin sombra, a propósito: en la ficha
   cae justo al lado del precio, que es la pastilla girada y con brillo. Dos
   pastillas giradas seguidas se pelean; una plana y una girada se leen como una
   sola cosa, «offre de lancement / 780 €», que es lo que es. */

.etiqueta.oferta {
  border-color: transparent;
  background: var(--turquoise);
  color: var(--encre);
}

/* El precio de antes. Va más pequeño que el de ahora porque ya no es el
   precio: es la referencia. Y tachado de verdad, con una línea que se ve. */
.stage .precio s {
  font-size: 0.62em;
  font-weight: 600;
  color: var(--texte-doux);
  margin-right: 9px;
  text-decoration-thickness: 1.5px;
}
.oscura .stage .precio s {
  color: var(--texte-sombre-doux);
}

/* Hasta cuándo dura, debajo de la fila de etiquetas de la ficha. Pequeño: una
   oferta sin fecha de fin no es una oferta, pero la fecha no es el titular. */
.hasta-cuando {
  margin: 14px 0 0;
  /* El precio de antes vive aquí y no dentro de la pastilla. Dentro quedó
     apretado: dos cifras, un tachado y un punto en cinco píxeles de relleno.
     Aquí tiene su sitio, y al lado de la fecha las dos cosas se leen como lo que
     son, las que explican por qué el precio de arriba es ese. */
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texte-sombre-doux);
}

/* --------------------------------------------------------------------------
   El video de fondo de la portada
   --------------------------------------------------------------------------

   Es suyo: seis segundos de las pistas de La Cala al amanecer. Reemplaza al
   trazo turquesa en diagonal que había antes, que a Federico no le convencía y
   tenía razón: al 9 % de opacidad no se leía como una forma, se leía como una
   mancha más clara en una esquina.

   Tres cosas que no son opcionales en un video de fondo:

   - Sin sonido y en bucle. Un video que suena solo se cierra la pestaña.
   - Un cuadro quieto detrás. Es lo que se ve mientras el video baja, y en una
     conexión mala puede ser lo único que se vea nunca.
   - Y se apaga entero si quien entra pidió menos movimiento. No es cortesía:
     hay gente a la que un fondo en movimiento le da mareo de verdad.
   -------------------------------------------------------------------------- */

.portada.con-video {
  background: var(--encre);
}
/* El trazo viejo no va cuando hay video: dos fondos discutiendo. */
.portada.con-video::after {
  display: none;
}

.fondo-portada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* El velo. Sin él el titular blanco sobre un césped claro no se lee, y eso no
   es una cuestión de gusto: es el único texto que tiene que leerse sí o sí.
   Va más denso a la izquierda, que es donde está el texto, y se abre a la
   derecha para que el video se vea. */
.velo-portada {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
      100deg,
      var(--encre) 0%,
      rgba(10, 16, 26, 0.88) 30%,
      rgba(10, 16, 26, 0.74) 50%,
      rgba(10, 16, 26, 0.38) 70%,
      rgba(10, 16, 26, 0.22) 100%
    ),
    linear-gradient(to bottom, rgba(10, 16, 26, 0.55) 0%, rgba(10, 16, 26, 0) 28%);
}

.portada.con-video > .dentro {
  position: relative;
  z-index: 2;
}

/* La bajada va blanca cuando hay video detrás, en el teléfono y en el
   escritorio. El gris de la marca se queda en 3,18 sobre el cuadro más claro
   del video y hace falta 4,5. Hay dos formas de arreglarlo: tapar más el video,
   que es lo que había y por eso no se veía nada, o subir el texto. Sube el
   texto: en blanco pasa de 8 y el video puede respirar. El gris sigue siendo el
   de la marca en todo lo demás; aquí hay una foto en movimiento debajo. */
.portada.con-video .bajada {
  color: #fff;
}

/* En un teléfono el texto ocupa casi todo el ancho, así que el velo no puede
   abrirse a un lado: tiene que abrirse ARRIBA, que es la única franja de la
   portada donde no hay letra.

   Historia corta, porque explica los números: el velo de antes iba de 0,62 a
   opaco y tapaba el video entre un 72 % y del todo. Era pagar 366 kB por una
   mancha azul, así que se quitó el video del teléfono. Federico lo quiere
   moviendo en el móvil, que es donde entra su cliente, y tiene razón: entonces
   hay que hacer que se VEA, no devolverlo debajo del mismo velo.

   Así que el velo baja donde no hay texto y sube donde sí lo hay. Los cortes no
   son de gusto: están medidos contra dónde cae cada cosa a 375 px. Arriba, la
   pista se ve; desde el titular hacia abajo, el texto se lee. */
@media (max-width: 699px) {
  .portada.con-video {
    background: var(--encre) var(--quieta) center / cover no-repeat;
  }
  /* Los cortes van en PÍXELES, no en porcentajes, y eso sí es importante: el
     bloque de texto empieza siempre 54 px por debajo del borde de la portada,
     en los tres idiomas y con la franja de borrador puesta, porque esos 54 px
     son relleno. Lo que cambia de un idioma a otro es el ALTO de la portada (el
     castellano ocupa 488 px y el francés 459), así que un corte en porcentaje
     que acierta en francés cae en otro sitio en castellano. Medido. */
  .velo-portada {
    background: linear-gradient(
      to bottom,
      rgba(10, 16, 26, 0.18) 0,
      rgba(10, 16, 26, 0.26) 34px,
      rgba(10, 16, 26, 0.64) 56px,
      rgba(10, 16, 26, 0.72) 118px,
      rgba(10, 16, 26, 0.86) 100%
    );
  }

}

@media (prefers-reduced-motion: reduce) {
  .fondo-portada {
    display: none;
  }
  /* El cuadro quieto viene en una variable que pone la página, sacada de
     NEGOCIO.portada. Escrito aquí a mano se quedó apuntando al video de antes,
     y quien pide menos movimiento veía una foto que no era la del video. */
  .portada.con-video {
    background: var(--encre) var(--quieta) center / cover no-repeat;
  }
}