/* =====================================================================
   TEAM NUNO FR · Estilos de la web
   ---------------------------------------------------------------------
   Pensado primero para el móvil: las reglas de base son para el móvil y
   los bloques «@media (min-width: ...)» del final las amplían en
   pantallas grandes. Colores y tipografías de la marca: en «:root».
   ===================================================================== */


/* ---------- Tipografías (guardadas en static/fuentes, sin Google) ---------- */

@font-face {
  font-family: "Anton";
  src: url("../fuentes/anton-latin-400.912c3c9f2621.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fuentes/inter-latin-variable.260c81a4759b.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* ---------- Colores y medidas de la marca ---------- */

:root {
  --negro: #0a0a0a;          /* fondo principal */
  --negro-2: #141414;        /* tarjetas */
  --negro-3: #262626;        /* líneas finas */
  --rojo: #e10600;           /* franjas y botones (con texto blanco) */
  --rojo-texto: #ff2d20;     /* texto rojo sobre negro (más legible) */
  --blanco: #ffffff;
  --gris: #bdbdbd;           /* texto secundario */
  --gris-oscuro: #171717;    /* fondo de la solicitud de plaza */
  --carbon: #1c1c1c;         /* fondo de «Soy Nuno» (la portada se funde en él) */
  --disco: #2e2e2e;          /* disco de pesas del fondo de «Soy Nuno» */

  --fuente-titulares: "Anton", Impact, "Arial Narrow", sans-serif;
  --fuente-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ancho-max: 1520px;       /* ancho máximo del contenido, márgenes incluidos */
  --margen: 16px;            /* margen lateral en el móvil (en el ordenador, más abajo) */
  --alto-cabecera: 56px;     /* cabecera fija de arriba */
  --alto-barra: 0px;         /* botón fijo de abajo (solo en el móvil, más abajo) */

  /* Diapositivas a pantalla completa (portada y «Soy Nuno») */
  --alto-diapo: calc(100vh - var(--alto-cabecera));  /* todo el alto visible menos la cabecera */
  --ancho-texto: min(600px, 42vw);    /* columna de texto sobre la foto (en horizontal) */
  --hueco-cara: clamp(80px, 8vw, 160px);  /* entre el texto y la cara, para el fundido */
  --solape: 80px;                     /* en vertical, cuánto se mete el texto sobre la foto */

  /* Texto de los párrafos en horizontal (ordenador y móvil girado: ver sus bloques) y
     ancho máximo cómodo de una línea: 50ch son unos 65-70 caracteres */
  --parrafo: 1.0625rem;
  --medida: 50ch;

  --suave: cubic-bezier(0.22, 0.61, 0.36, 1);  /* curva de las animaciones: arranca rápida y frena suave */

  color-scheme: dark;
}

/* En el móvil, el alto «visible» es el que queda con las barras del navegador a la vista */
@supports (height: 100svh) {
  :root {
    --alto-diapo: calc(100svh - var(--alto-cabecera));
  }
}


/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--fuente-titulares);
  font-weight: 400;          /* Anton tiene un solo grosor: evita la «negrita falsa» */
  font-synthesis: none;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

:focus-visible {
  outline: 3px solid var(--blanco);
  outline-offset: 3px;
}

.saltar {
  position: absolute;
  top: -100px;
  left: var(--margen);
  z-index: 100;
  padding: 12px 16px;
  background: var(--blanco);
  color: var(--negro);
  font-weight: 700;
}

.saltar:focus {
  top: var(--margen);
}

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen);
}


/* ---------- Marca: «TEAM» en rojo, «NUNO FR» en franja roja, sección ---------- */

.marca {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  font-family: var(--fuente-titulares);
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.marca__team,
.marca__seccion {
  color: var(--rojo-texto);
}

.marca__nombre {
  padding: 0.06em 0.16em 0.02em;
  background: var(--rojo);
  color: var(--blanco);
}

.marca__seccion {
  letter-spacing: 0.08em;
}

.marca--grande {
  margin-bottom: 1.25rem;
}

.marca--grande .marca__team {
  font-size: clamp(2.5rem, 14vw, 5.5rem);
  letter-spacing: 0.04em;
}

.marca--grande .marca__nombre {
  margin: 0.04em 0 0.14em;
  font-size: clamp(4rem, 22vw, 9.5rem);
}

.marca--grande .marca__seccion {
  font-size: clamp(1.1rem, 5.4vw, 2.1rem);
}

.marca--mini {
  flex-direction: row;
  align-items: center;
  gap: 0.3em;
  font-size: 1.5rem;
  white-space: nowrap;
}


/* ---------- Botones (grandes, fáciles de pulsar) ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 24px;
  border: 2px solid transparent;
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  position: relative;
  isolation: isolate;
  transition: transform 0.2s var(--suave);
}

/* Capa que oscurece el botón al pasar el ratón (se anima su opacidad, que es ligero) */
.boton::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;                   /* encima del fondo rojo, debajo del texto */
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.2s var(--suave);
}

/* Al pulsar (también en el móvil): se hunde un poco */
.boton:active {
  transform: scale(0.97);
}

.boton--principal {
  background: var(--rojo);
  color: var(--blanco);
}

/* Sobre fondo rojo: blanco con el texto rojo, para que contraste */
.boton--blanco {
  background: var(--blanco);
  color: var(--rojo);
}


/* ---------- Diapositivas a pantalla completa ----------
   Cada diapositiva ocupa, como mínimo, todo el alto visible menos la cabecera.
   La portada lleva la única foto de la web (la de powerlifting) de fondo, a sangre:
   se puede recortar por los bordes, pero nunca la cabeza ni la cara.
   - En vertical (móvil): la foto arriba, llenando todo el ancho y el sitio que deja
     el texto; el texto, abajo, sobre un fundido a negro que sube desde abajo. Como
     la foto ocupa justo el sitio que deja el texto, el texto nunca tapa la cara.
   - En horizontal (ordenador y móvil girado): ver «Diapositivas en horizontal».
   Dónde está la cabeza en la foto, en proporción de la foto (si se cambia la foto,
   hay que revisarlo):
     portada (powerlifting) → x 55-68 %, y 43-59 % */

.diapo {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--alto-diapo);
  overflow: hidden;
  isolation: isolate;
}

/* La foto: arriba, ocupando el sitio que deja el texto y un poco más (--solape),
   que queda por debajo del texto, ya fundido en negro */
.diapo__foto {
  position: relative;
  flex: 1 1 auto;
  min-height: calc(var(--alto-diapo) * 0.36);
  margin-bottom: calc(-1 * var(--solape));
  overflow: hidden;              /* para el acercamiento suave de la foto al cargar */
  background: var(--negro);      /* se ve mientras la foto carga */
}

.diapo__foto picture,
.diapo__foto img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.diapo__foto img {
  object-fit: cover;             /* llena el sitio sin deformar la foto */
}

/* Fundido a negro que sube desde abajo, por detrás del texto */
.diapo__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0) calc(100% - var(--solape) - 96px),
    rgba(10, 10, 10, 0.3) calc(100% - var(--solape) - 56px),
    rgba(10, 10, 10, 0.72) calc(100% - var(--solape) - 12px),
    var(--negro) calc(100% - var(--solape) * 0.35)
  );
}

.diapo__texto {
  position: relative;            /* por encima de la foto */
}


/* ---------- Portada ---------- */

/* Foto en vertical: centrada en Nuno (está a la derecha de la foto) y algo más
   cerca, para que sea él quien llene la pantalla. El acercamiento va en «scale»,
   aparte, para que el zoom lento de «Animaciones» se sume a él. */
.portada__foto img {
  object-position: 100% 90%;
  scale: 1.3;
  transform-origin: 62% 50%;
}

/* En vertical, además del fundido de abajo, uno suave desde la izquierda: deja en
   la sombra a las demás personas y el cartel, y acaba antes de la cara (27 %) */
.portada__foto::after {
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.85) 0, rgba(10, 10, 10, 0.45) 13%, rgba(10, 10, 10, 0) 27%),
    linear-gradient(
      180deg,
      rgba(10, 10, 10, 0) calc(100% - var(--solape) - 96px),
      rgba(10, 10, 10, 0.3) calc(100% - var(--solape) - 56px),
      rgba(10, 10, 10, 0.72) calc(100% - var(--solape) - 12px),
      var(--negro) calc(100% - var(--solape) * 0.35)
    );
}

/* Abajo, la portada se funde en el gris carbón de «Soy Nuno», que va justo después: así
   no hay corte entre las dos. Queda por encima de la foto y por debajo del texto. */
.portada::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(96px, 22%, 260px);
  background: linear-gradient(0deg, var(--carbon), rgba(28, 28, 28, 0));
  pointer-events: none;
}

.portada__contenido {
  padding-bottom: 40px;
}

.portada__titular {
  max-width: 20ch;
  margin-bottom: 0.6em;
  line-height: 1.15;         /* que las tildes no choquen con la línea de arriba */
  font-size: clamp(1.6rem, 7.5vw, 3rem);
}

.portada__texto {
  max-width: 42ch;
  margin-bottom: 1.75rem;
  color: var(--gris);
}

.portada__botones {
  display: grid;
  gap: 12px;
}

/* «Plazas limitadas...», debajo del botón principal */
.portada__nota {
  max-width: 42ch;
  margin-top: 14px;
  color: var(--gris);
  font-size: 0.9375rem;
}


/* ---------- Secciones ---------- */

.seccion {
  padding-block: 64px;
}

/* Recurso clave de la marca: texto blanco sobre franja roja */
.franja {
  margin-bottom: 1.5rem;
  font-size: clamp(2.25rem, 11vw, 4.25rem);
  line-height: 1.22;
}

.franja span {
  padding: 0.06em 0.3em 0;
  background: var(--rojo);
  color: var(--blanco);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.texto {
  max-width: 65ch;
  color: var(--gris);
}


/* ---------- Soy Nuno: dos diapositivas ----------
   1: fondo gris carbón con dos capas de líneas diagonales y un disco de pesas en
      contorno que se mueven muy despacio, sin robar protagonismo al texto. A la
      izquierda, una franja roja a toda la altura con «SOY NUNO» en vertical; a la
      derecha, los párrafos 1 y 2 (ver «Diapositivas en horizontal»). Con el móvil en
      vertical, la franja va arriba, en horizontal, y el texto debajo.
   2: fondo rojo (la única diapositiva roja): la frase gigante, el párrafo 3, los
      pilares numerados y el botón blanco. */

/* Diapositiva 1, en vertical (móvil): la franja arriba y, debajo, el texto, centrado en
   el sitio que queda, con hueco abajo para el botón fijo */
.quien-soy__diapo--nuno {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding-bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom, 0px));
  background: var(--carbon);
}

/* El fondo animado: decorativo (el lector de pantalla no lo lee), detrás del texto */
.quien-soy__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Arriba y abajo, el fondo se funde en el carbón liso: la portada pasa a esta
   diapositiva sin corte, y el borde con la diapositiva roja queda limpio */
.quien-soy__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--carbon) 0, rgba(28, 28, 28, 0) 16%, rgba(28, 28, 28, 0) 84%, var(--carbon) 100%);
}

/* Dos capas de líneas diagonales finas, con ángulos algo distintos. Se desplazan hacia
   la izquierda muy despacio, la de cerca más deprisa que la de lejos (profundidad).
   Cada capa es un «paso» más ancha que la pantalla y avanza justo un paso antes de
   repetirse: el dibujo coincide y no se nota el salto. En el móvil, más discretas. */
.quien-soy__lineas {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: calc(-1 * var(--paso));
  background: repeating-linear-gradient(var(--angulo), var(--linea) 0 1px, transparent 1px var(--hueco));
  opacity: 0.6;
  animation: deriva var(--duracion) linear infinite;
}

.quien-soy__lineas--lejos {
  --angulo: 118deg;
  --paso: 30px;
  --hueco: 26.49px;              /* separación entre líneas: paso × sen(ángulo) */
  --linea: #262626;
  --duracion: 16s;
}

.quien-soy__lineas--cerca {
  --angulo: 126deg;
  --paso: 44px;
  --hueco: 35.6px;
  --linea: #2c2c2c;
  --duracion: 8s;
}

/* El disco de pesas: aros concéntricos en contorno, gris muy oscuro, con «25 KG».
   En el móvil, más pequeño, en la esquina de abajo a la derecha y en parte fuera de
   la pantalla; gira muy despacio. */
.quien-soy__disco {
  --diametro: min(66vw, 38svh);
  position: absolute;
  right: calc(var(--diametro) * -0.3);
  bottom: calc(var(--alto-barra) - var(--diametro) * 0.4);
  width: var(--diametro);
  height: var(--diametro);
  fill: none;
  stroke: var(--disco);
  stroke-width: 1.5;
  animation: girar 120s linear infinite;
}

.quien-soy__disco * {
  vector-effect: non-scaling-stroke;   /* el trazo, igual de fino a cualquier tamaño */
}

.quien-soy__disco text {
  fill: var(--disco);
  stroke: none;
  font-family: var(--fuente-titulares);
  font-size: 7px;
  letter-spacing: 0.12em;
  text-anchor: middle;
}

/* La franja roja con el titular. En vertical (móvil), arriba y a todo el ancho: al
   llegar, crece de izquierda a derecha y después aparece «SOY NUNO» («Animaciones») */
.quien-soy__franja {
  position: relative;
  isolation: isolate;
  padding: 16px var(--margen) 14px;
}

.quien-soy__franja::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--rojo);
  transform-origin: left center;
}

.quien-soy__titulo {
  color: var(--blanco);
  font-size: clamp(2.25rem, 11vw, 3.25rem);
  line-height: 1;
}

.quien-soy__titulo span {
  display: inline-block;
}

/* Los párrafos, en blanco roto */
.quien-soy__contenido {
  align-self: center;
  padding: clamp(24px, 4svh, 48px) var(--margen);
}

.quien-soy__contenido .texto {
  color: #e4e4e4;
}

.quien-soy__contenido .texto p {
  margin-bottom: 16px;
}

.quien-soy__contenido .texto p:last-child {
  margin-bottom: 0;
}

/* Diapositiva 2: fondo rojo, el contenido centrado en la pantalla */
.quien-soy__diapo--cierre {
  justify-content: center;
  padding-block: 48px calc(var(--alto-barra) + 32px + env(safe-area-inset-bottom, 0px));
  background: var(--rojo);
}

/* «Sin atajos. Sin promesas vacías.»: gigante, en blanco */
.quien-soy__destacado {
  margin: 0 0 1.5rem;
  font-family: var(--fuente-titulares);
  font-size: clamp(2.25rem, 12vw, 4.5rem);
  line-height: 1.12;             /* la tilde de «VACÍAS» no toca la línea de arriba */
  text-transform: uppercase;
}

/* Cada frase, en su «ventana»: al aparecer, sube desde detrás de su borde de abajo,
   una tras otra (efecto persiana, en «Animaciones»). El relleno de arriba deja sitio
   a las tildes («VACÍAS»), y el margen negativo lo compensa. */
.persiana {
  display: inline-block;
  overflow: hidden;
  padding-top: 0.2em;
  margin-top: -0.2em;
  vertical-align: top;
}

.persiana > span {
  display: inline-block;
}

.quien-soy__cierre .texto {
  color: var(--blanco);
}

/* Los tres pilares: el número grande en negro y, al lado, el título y su línea */
.pilares {
  display: grid;
  gap: 20px;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}

.pilar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  column-gap: 16px;
  padding-top: 12px;
  border-top: 3px solid var(--negro);
}

.pilar__numero {
  grid-row: span 2;
  color: var(--negro);
  font-family: var(--fuente-titulares);
  font-size: 2.5rem;
  line-height: 1;
}

.pilar h3 {
  margin-bottom: 4px;
  font-size: 1.4rem;
}

.pilar p {
  margin: 0;
}

.quien-soy__boton {
  width: 100%;
}


/* ---------- Cómo trabajamos juntos: los pasos unidos por una línea roja ----------
   Fondo negro. A la izquierda de los pasos, una línea vertical que va del punto del
   primero al del último: animaciones.js la dibuja en rojo al bajar y enciende cada
   paso cuando la línea llega a él. Sin JavaScript (o con «Reducir movimiento»), la
   línea entera y todos los pasos encendidos. */

.como-trabajamos {
  --fondo-pasos: var(--negro);
  --punto: 16px;                 /* diámetro de los puntos */
  --centro-punto: 16px;          /* del borde de arriba de cada paso al centro de su punto */
  --canal: 40px;                 /* sitio a la izquierda de los pasos, para la línea */
  display: flex;
  flex-direction: column;
  justify-content: center;       /* si sobra pantalla, el contenido va centrado */
  min-height: var(--alto-diapo);
  background: var(--fondo-pasos);
}

/* Frase debajo del titular de una sección */
.seccion__intro {
  max-width: 52ch;
  margin: -0.25rem 0 2rem;
  color: var(--gris);
  font-size: 1.125rem;
}

.linea-tiempo {
  position: relative;
}

/* La línea: del centro del primer punto hasta abajo (el último paso tapa lo que
   sobra por debajo de su punto) */
.linea-tiempo__linea {
  position: absolute;
  top: var(--centro-punto);
  bottom: 0;
  left: calc(var(--punto) / 2 - 1.5px);
  width: 3px;
  background: var(--negro-3);
}

.linea-tiempo__relleno {
  position: absolute;
  inset: 0;
  background: var(--rojo);
  transform-origin: top;
}

.pasos {
  display: grid;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.paso {
  position: relative;            /* por encima de la línea */
  z-index: 1;
  padding-left: var(--canal);
}

/* El último paso tapa la línea por debajo de su punto, con el color del fondo */
.paso:last-child {
  background: linear-gradient(180deg, transparent var(--centro-punto), var(--fondo-pasos) 0);
}

/* El punto de cada paso: un aro gris y, encima, el punto rojo encendido */
.paso::before,
.paso::after {
  content: "";
  position: absolute;
  top: calc(var(--centro-punto) - var(--punto) / 2);
  left: 0;
  width: var(--punto);
  height: var(--punto);
  border-radius: 50%;
}

.paso::before {
  border: 3px solid var(--negro-3);
  background: var(--fondo-pasos);
}

.paso::after {
  background: var(--rojo);
  box-shadow: 0 0 0 4px rgba(225, 6, 0, 0.25), 0 0 18px rgba(225, 6, 0, 0.6);
}

/* El número, a la altura del punto (alto de línea 1: su centro cae en --centro-punto) */
.paso__numero {
  display: block;
  margin-bottom: 8px;
  color: var(--rojo-texto);
  font-family: var(--fuente-titulares);
  font-size: 2rem;
  line-height: 1;
}

.paso h3 {
  margin-bottom: 6px;
  font-size: 1.6rem;
  line-height: 1.15;
}

.paso p {
  margin: 0;
  color: var(--gris);
}

.paso__accion {
  padding-top: 20px;
}

.paso__accion .boton {
  width: 100%;
}


/* ---------- Solicitud de plaza (bloque final, gris muy oscuro, con el formulario) ---------- */

.solicitud {
  padding-block: 64px;
  background: var(--gris-oscuro);
}

.solicitud .contenedor {
  max-width: 760px;
}

.solicitud h2 {
  margin-bottom: 0.4em;
}

.solicitud__texto {
  max-width: 40ch;
  margin-bottom: 1.75rem;
  color: var(--gris);
}

/* El formulario, en una tarjeta negra con el borde de arriba rojo */
.solicitud__tarjeta {
  padding: 24px 20px;
  border-top: 4px solid var(--rojo);
  background: var(--negro);
}


/* ---------- Formulario de solicitud ---------- */

.formulario {
  display: grid;
  gap: 24px;
}

.formulario__aviso {
  margin: 0;
  padding: 12px 14px;
  border-left: 4px solid var(--rojo-texto);
  background: rgba(255, 45, 32, 0.12);
  font-weight: 700;
}

/* Campo trampa para robots: fuera de la pantalla, nadie lo ve */
.formulario__trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.campo {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.campo__etiqueta {
  padding: 0;
  font-weight: 700;
}

.campo__ayuda {
  margin: -4px 0 0;
  color: var(--gris);
  font-size: 0.875rem;
}

.campo input[type="text"],
.campo input[type="tel"] {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 2px solid #3a3a3a;
  border-radius: 0;
  background: var(--negro-2);
  color: var(--blanco);
  font: inherit;
  font-size: 1rem;           /* 16 px: así el iPhone no hace zoom al escribir */
}

.campo input::placeholder {
  color: #8a8a8a;
}

.campo input[type="text"]:focus-visible,
.campo input[type="tel"]:focus-visible {
  border-color: var(--blanco);
  outline: none;
}

.campo--error input[type="text"],
.campo--error input[type="tel"] {
  border-color: var(--rojo-texto);
}

.campo__error {
  margin: 0;
  color: #ff6b61;            /* rojo claro: se lee bien sobre negro */
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Opciones: botones grandes, fáciles de pulsar con el dedo */
.opciones {
  display: grid;
  gap: 8px;
}

.opcion {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 14px;
  border: 2px solid #3a3a3a;
  background: var(--negro-2);
  cursor: pointer;
}

.campo--error .opcion {
  border-color: rgba(255, 45, 32, 0.55);
}

.opcion:has(input:checked) {
  border-color: var(--rojo);
  background: rgba(225, 6, 0, 0.2);
}

.opcion:has(input:focus-visible) {
  outline: 3px solid var(--blanco);
  outline-offset: 2px;
}

.opcion input,
.casilla input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--rojo);
}

.casilla {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.casilla input {
  margin-top: 1px;
}

.casilla a,
.resumen-privacidad a {
  color: var(--blanco);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Resumen de privacidad (primera capa) junto al botón */
.resumen-privacidad {
  padding: 14px;
  border: 1px solid var(--negro-3);
  color: var(--gris);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.resumen-privacidad .resumen-privacidad__titulo {
  margin-bottom: 8px;
  color: var(--blanco);
  font-weight: 700;
}

.resumen-privacidad dl {
  display: grid;
  gap: 4px;
  margin: 0;
}

.resumen-privacidad dl div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
}

.resumen-privacidad dt {
  color: var(--blanco);
  font-weight: 700;
}

.resumen-privacidad dt::after {
  content: ":";
}

.resumen-privacidad dd {
  margin: 0;
}

.formulario__enviar {
  width: 100%;
}

/* Mensaje tras enviar la solicitud */
.exito {
  margin: 0;
  font-family: var(--fuente-titulares);
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  line-height: 1.15;
  text-transform: uppercase;
}


/* ---------- Páginas sencillas (privacidad) ---------- */

.barra-simple {
  border-bottom: 2px solid var(--rojo);
}

.barra-simple__contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.barra-simple__volver {
  padding: 12px 0;
  color: var(--gris);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

/* Textos legales: cómodos de leer en el móvil */
.legal h2 {
  margin: 2.25rem 0 0.75rem;
  color: var(--blanco);
  font-size: 1.5rem;
  line-height: 1.15;
}

.legal p,
.legal ul {
  margin: 0 0 0.9em;
}

.legal ul {
  padding-left: 1.25em;
}

.legal li {
  margin-bottom: 0.35em;
}

.legal li::marker {
  color: var(--rojo-texto);
}

.legal a {
  color: var(--blanco);
  overflow-wrap: anywhere;      /* los emails largos no ensanchan la página */
  text-underline-offset: 2px;
}

.legal .legal__fecha {
  margin-bottom: 1.5rem;
  color: #8a8a8a;
  font-size: 0.875rem;
}

.tabla {
  margin: 0 0 1.25em;
  overflow-x: auto;
}

.tabla table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.tabla th,
.tabla td {
  padding: 10px 12px;
  border: 1px solid var(--negro-3);
  text-align: left;
  vertical-align: top;
}

.tabla th {
  background: var(--negro-2);
  color: var(--blanco);
}


/* ---------- Pie de página ---------- */

.pie {
  padding-block: 40px;
  background: #050505;
  color: var(--gris);
  font-size: 0.875rem;
}

.pie p {
  margin-bottom: 0.5em;
}

.pie .marca {
  margin-bottom: 16px;
}

.pie .pie__aviso {
  margin-bottom: 1em;
  color: var(--blanco);
}

.pie a {
  color: var(--blanco);
  text-underline-offset: 2px;
}

/* Enlaces a los textos legales: pequeños y discretos (pero fáciles de pulsar) */
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin-top: 0.5em;
  font-size: 0.8125rem;
}

.pie .pie__legal a {
  padding-block: 8px;
  color: var(--gris);
  text-decoration: none;
}


/* ---------- Cabecera fija ----------
   En el móvil, compacta y solo con el logo; en el ordenador (más abajo),
   más grande y con el menú y el botón «Solicitar plaza». */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: var(--alto-cabecera);
  /* Sin relleno arriba y abajo: el logo va centrado y la cabecera mide justo --alto-cabecera */
  padding: 0 max(var(--margen), calc((100% - var(--ancho-max)) / 2 + var(--margen)));
  border-bottom: 2px solid var(--rojo);
  background: rgba(10, 10, 10, 0.94);
}

/* El logo redondo (static/img/logo.svg, dibujado con herramientas/crear_logo.py): en la
   cabecera y en la barra de las páginas legales. El contorno de foco sigue el círculo. */
.logo {
  display: block;
  flex: none;
  border-radius: 50%;
  line-height: 0;
}

.logo img {
  width: 44px;
  height: 44px;
}

.cabecera__nav,
.cabecera .boton {
  display: none;
}

/* Al saltar a una sección, que su titular no quede debajo de la cabecera */
section[id] {
  scroll-margin-top: var(--alto-cabecera);
}


/* ---------- Botón fijo «Solicitar plaza» (solo en el móvil) ----------
   Va pegado al borde de abajo mientras se recorre el contenido central:
   no aparece en la portada (que ya tiene su botón) y se retira al llegar
   a la solicitud, para no tapar el formulario. */

.barra-movil {
  position: sticky;
  bottom: 0;
  z-index: 50;
  padding: 12px var(--margen) calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--negro-3);
  background: rgba(10, 10, 10, 0.94);
}

.barra-movil .boton {
  width: 100%;
}


/* ---------- Efectos al pasar el ratón (solo con ratón, no en el móvil) ---------- */

@media (hover: hover) {
  .boton:hover {
    transform: translateY(-2px);
  }

  .boton:hover::after {
    opacity: 1;
  }

  .boton:active {
    transform: translateY(0) scale(0.97);
  }

  /* El botón de la cabecera, cuando está compacta, conserva su tamaño reducido */
  .cabecera--compacta > .boton:hover {
    transform: translateY(2px) scale(0.92);
  }

  .cabecera--compacta > .boton:active {
    transform: translateY(4px) scale(0.9);
  }

  .cabecera__nav a:hover,
  .barra-simple__volver:hover,
  .pie .pie__legal a:hover {
    color: var(--blanco);
  }

  .opcion:hover {
    border-color: #5a5a5a;
  }
}


/* ---------- Animaciones ----------
   Sutiles. Solo se animan la opacidad y el desplazamiento (transform), que el
   móvil mueve con fluidez. Sin librerías: estas reglas y static/js/animaciones.js.
   Si el JavaScript falla, todo se ve igual, sin animación; con «Reducir
   movimiento» activado, tampoco se anima nada. */

/* Portada, al cargar: la marca, el titular y lo de debajo entran desde la
   izquierda, uno tras otro (solo con CSS: sin esperar a nada). «backwards»: al
   acabar no deja nada puesto, y al volver a la portada desde abajo se encargan
   las clases de animaciones.js, como en el resto de bloques. */
@keyframes entrar-izquierda {
  from {
    opacity: 0;
    transform: translateX(-36px);
  }
}

.portada .marca--grande,
.portada__titular,
.portada__texto,
.portada__botones,
.portada__nota {
  animation: entrar-izquierda 0.9s var(--suave) backwards;
}

.portada .marca--grande {
  animation-delay: 0.1s;
}

.portada__titular {
  animation-delay: 0.24s;
}

.portada__texto {
  animation-delay: 0.38s;
}

.portada__botones {
  animation-delay: 0.5s;
}

.portada__nota {
  animation-delay: 0.6s;
}

/* La foto de la portada se acerca y se aleja muy despacio, sin parar (efecto
   cine), alrededor de la cara. animaciones.js la detiene mientras no se ve. */
@keyframes cine {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}

.portada__foto img {
  animation: cine 24s ease-in-out infinite alternate;
}

/* Fondo de «Soy Nuno»: cada capa de líneas avanza un paso (y vuelve a empezar sin que
   se note) y el disco da una vuelta entera, sin parar */
@keyframes deriva {
  to {
    transform: translate3d(calc(-1 * var(--paso)), 0, 0);
  }
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* animaciones.js detiene el zoom de la portada y el fondo de «Soy Nuno» mientras no se
   ven (ahorra batería) */
.diapo--fuera .portada__foto img,
.diapo--fuera .quien-soy__lineas,
.diapo--fuera .quien-soy__disco {
  animation-play-state: paused;
}

/* Bloques que aparecen cada vez que llegan a la pantalla: animaciones.js les pone
   «por-aparecer» (ocultos, un poco más abajo) cuando han salido del todo y, al
   volver a entrar, «apareciendo». */
.por-aparecer {
  opacity: 0;
  transform: translateY(28px);
}

.por-aparecer.aparece--fundido {
  transform: none;               /* solo se funde, sin moverse */
}

.por-aparecer.aparece--izquierda {
  transform: translateX(-36px);  /* entra desde la izquierda */
}

.por-aparecer.aparece--derecha {
  transform: translateX(36px);   /* entra desde la derecha */
}

.apareciendo {
  transition: opacity 0.8s var(--suave), transform 0.8s var(--suave);
}

/* «Soy Nuno»: la franja roja crece (de abajo arriba; con el móvil en vertical, de
   izquierda a derecha) y, cuando acaba, aparece el titular. El bloque no se mueve. */
.por-aparecer.aparece--franja {
  opacity: 1;
  transform: none;
}

.por-aparecer.aparece--franja::before {
  transform: scaleX(0);
}

.por-aparecer.aparece--franja > * {
  opacity: 0;
  transform: translateY(16px);
}

.apareciendo.aparece--franja::before {
  transition: transform 0.8s var(--suave);
}

.apareciendo.aparece--franja > * {
  transition: opacity 0.6s var(--suave) 0.6s, transform 0.6s var(--suave) 0.6s;
}

/* «Sin atajos. Sin promesas vacías.» (efecto persiana): el bloque no se mueve; cada
   frase espera escondida bajo el borde de su ventana y sube, una tras otra */
.por-aparecer.aparece--persiana {
  opacity: 1;
  transform: none;
}

.por-aparecer.aparece--persiana .persiana > span {
  transform: translateY(calc(100% + 0.25em));
}

.apareciendo.aparece--persiana .persiana > span {
  transition: transform 0.9s var(--suave);
}

.apareciendo.aparece--persiana .persiana:nth-child(2) > span {
  transition-delay: 0.16s;
}

.apareciendo.aparece--persiana .persiana:nth-child(3) > span {
  transition-delay: 0.32s;
}

/* «Cómo trabajamos juntos»: animaciones.js pone «linea-tiempo--animada» y va dibujando
   la línea roja (de arriba abajo) al bajar. Los pasos a los que aún no ha llegado se
   ven apagados y sin punto rojo; al llegar, se encienden («paso--activo»). */
.paso > *,
.paso::after {
  transition: opacity 0.5s var(--suave), transform 0.5s var(--suave);
}

.linea-tiempo--animada .linea-tiempo__relleno {
  transform: scaleY(0);
}

.linea-tiempo--animada .paso:not(.paso--activo) > * {
  opacity: 0.3;
}

.linea-tiempo--animada .paso:not(.paso--activo)::after {
  opacity: 0;
  transform: scale(0.3);
}

/* La cabecera se compacta un poco al bajar (se sube y encoge lo de dentro) */
.cabecera,
.cabecera > * {
  transition: transform 0.35s var(--suave);
}

.cabecera > :first-child {
  transform-origin: left center;
}

.cabecera > :last-child {
  transform-origin: right center;
}

.cabecera--compacta {
  transform: translateY(-8px);
}

.cabecera--compacta > * {
  transform: translateY(4px) scale(0.92);
}


/* ---------- Menos movimiento si el usuario lo pide en su sistema ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .por-aparecer,
  .por-aparecer .persiana > span,
  .por-aparecer.aparece--franja::before,
  .por-aparecer.aparece--franja > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .boton:hover {
    transform: none;
  }
}

@media print {
  .por-aparecer,
  .por-aparecer .persiana > span,
  .por-aparecer.aparece--franja::before,
  .por-aparecer.aparece--franja > * {
    opacity: 1;
    transform: none;
  }
}


/* ---------- Tablet (600 px o más) ---------- */

@media (min-width: 600px) {
  .portada__botones {
    display: flex;
    flex-wrap: wrap;
  }

  .opciones {
    grid-template-columns: repeat(2, 1fr);
  }

  .solicitud__tarjeta {
    padding: 32px;
  }
}


/* ---------- Ordenador (900 px o más) ---------- */

@media (min-width: 900px) {
  :root {
    --margen: clamp(24px, 5vw, 80px);  /* margen lateral: crece con la pantalla */
    --alto-cabecera: 80px;
    /* Texto de los párrafos de toda la landing, cómodo de leer a distancia: 20 px en
       pantallas de 1024, 22 px en 1280 y 26 px en 1920 (algo menos si la pantalla es baja) */
    --parrafo: clamp(1.25rem, min(0.875rem + 0.625vw, 2.75svh), 1.625rem);
  }

  .barra-movil {
    display: none;
  }

  .cabecera {
    gap: 40px;
  }

  .cabecera .boton {
    flex: none;
  }

  .cabecera .logo img {
    width: 64px;
    height: 64px;
  }

  .cabecera .boton {
    display: inline-flex;
    min-height: 50px;
    padding: 10px 22px;
    font-size: 1rem;
  }

  /* Los textos de la portada se adaptan también al alto de la pantalla: la portada
     cabe entera en una pantalla, también en portátiles (1280 × 800, 1366 × 768...) */
  .marca--grande .marca__team {
    font-size: clamp(2rem, 6svh, 4.5rem);
  }

  .marca--grande .marca__nombre {
    font-size: clamp(3rem, 10.5svh, 7.5rem);
  }

  .marca--grande .marca__seccion {
    font-size: clamp(1rem, 2.6svh, 1.75rem);
  }

  /* Como mucho 3,75rem: así cabe en tres líneas en la columna de texto (600 px) */
  .portada__titular {
    font-size: clamp(2.25rem, min(4vw, 6.2svh), 3.75rem);
  }

  .portada__texto {
    max-width: 36ch;
    margin-bottom: 1.5rem;
    font-size: var(--parrafo);
  }

  .portada__nota {
    font-size: calc(var(--parrafo) * 0.82);
  }

  .portada__botones .boton {
    min-height: 64px;
    padding: 16px 36px;
    font-size: 1.125rem;
  }

  .seccion {
    padding-block: 96px;
  }

  /* Soy Nuno: los párrafos, a tamaño de lectura y con un ancho de línea cómodo */
  .quien-soy__contenido .texto {
    max-width: var(--medida);
    font-size: var(--parrafo);
  }

  /* Sin atajos: la frase, a la medida del ancho y del alto (cabe en una pantalla) */
  .quien-soy__diapo--cierre {
    padding-block: 32px 24px;
  }

  .quien-soy__destacado {
    margin-bottom: clamp(16px, 3svh, 40px);
    font-size: clamp(3.5rem, min(9.5vw, 12svh), 9rem);
  }

  .quien-soy__cierre .texto {
    font-size: var(--parrafo);
  }

  .pilares {
    margin: clamp(24px, 3.5svh, 48px) 0;
  }

  /* Los pilares, en proporción al texto */
  .pilar__numero {
    font-size: calc(var(--parrafo) * 2.2);
  }

  .pilar h3 {
    font-size: calc(var(--parrafo) * 1.25);
  }

  .pilar p {
    font-size: var(--parrafo);
  }

  .quien-soy__boton {
    min-height: 64px;
    padding: 16px 36px;
    font-size: 1.125rem;
  }

  /* Cómo trabajamos: a la izquierda, el titular y la frase (se quedan a la vista
     mientras se bajan los pasos); a la derecha, los pasos con su línea */
  .como-trabajamos {
    --punto: 20px;
    --numero-paso: calc(var(--parrafo) * 2.1);
    --centro-punto: calc(var(--numero-paso) / 2);
    --canal: 64px;
  }

  .seccion__intro {
    max-width: var(--medida);
    font-size: var(--parrafo);
  }

  .como-trabajamos__contenido {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(48px, 6vw, 128px);
    align-items: start;
  }

  .como-trabajamos__cabeza {
    position: sticky;
    top: calc(var(--alto-cabecera) + 48px);
  }

  .pasos {
    gap: clamp(40px, 6svh, 64px);
  }

  /* Los pasos, en proporción al texto (el punto, a la altura del centro del número) */
  .paso__numero {
    font-size: var(--numero-paso);
  }

  .paso h3 {
    font-size: calc(var(--parrafo) * 1.5);
  }

  .paso p {
    max-width: var(--medida);
    font-size: var(--parrafo);
  }

  .paso__accion .boton {
    width: auto;
    min-height: 64px;
    padding: 16px 36px;
    font-size: 1.125rem;
  }

  /* Solicitud de plaza y formulario: el mismo tamaño de lectura (tarjeta algo más ancha) */
  .solicitud .contenedor {
    max-width: 880px;
  }

  .solicitud__texto,
  .formulario {
    font-size: var(--parrafo);
  }

  .campo input[type="text"],
  .campo input[type="tel"] {
    min-height: 60px;
    font-size: var(--parrafo);
  }

  .opcion {
    min-height: 60px;
  }

  .campo__ayuda {
    font-size: calc(var(--parrafo) * 0.82);
  }

  .campo__error {
    font-size: calc(var(--parrafo) * 0.86);
  }

  .resumen-privacidad {
    font-size: calc(var(--parrafo) * 0.78);
  }

  .formulario__enviar {
    min-height: 64px;
    font-size: 1.125rem;
  }

  /* Pie: el aviso de salud y lo demás, también más grandes */
  .pie {
    font-size: calc(var(--parrafo) * 0.9);
  }

  .pie__legal {
    font-size: calc(var(--parrafo) * 0.8);
  }
}


/* ---------- Diapositivas en horizontal (ordenador, y móvil girado) ----------
   La foto, de fondo a la derecha y a toda la altura; el texto, a la izquierda, sobre
   un fundido a negro desde la izquierda. La foto se coloca para que la cara quede
   siempre a la derecha del texto, con sitio para el fundido (--hueco-cara), y para
   que la cabeza nunca se corte. */

@media (orientation: landscape) and (min-width: 560px) {
  .diapo {
    /* Dónde acaba la columna de texto, contando el margen de la izquierda */
    --fin-texto: calc(max(var(--margen), (100% - var(--ancho-max)) / 2 + var(--margen)) + var(--ancho-texto));
  }

  .diapo--foto {
    justify-content: center;     /* el texto, centrado de arriba abajo */
    padding-block: clamp(20px, 5svh, 64px);
  }

  .diapo__foto {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -2;
    flex: none;
    min-height: 0;
    margin: 0;
  }

  /* El texto, siempre dentro de su columna (nunca hacia la cara) */
  .diapo .diapo__texto > * {
    max-width: var(--ancho-texto);
  }

  .diapo .diapo__texto .texto {
    max-width: min(65ch, var(--ancho-texto));
  }

  .portada .portada__contenido {
    padding-bottom: 0;
  }

  .portada .portada__titular {
    max-width: min(20ch, var(--ancho-texto));
  }

  .portada .portada__texto,
  .portada .portada__nota {
    max-width: min(42ch, var(--ancho-texto));
  }

  /* Portada: la foto llena todo el ancho (o todo el alto, si la pantalla es casi
     cuadrada), pegada a la derecha. De arriba abajo, se ve todo lo posible de abajo
     (las manos y la barra) dejando la cabeza siempre dentro, con 48 px de margen.
     Sin «unidades de contenedor» (navegadores antiguos), simplemente pegada abajo. */
  .portada__foto {
    width: max(100%, calc(var(--alto-diapo) * 1.171));
    aspect-ratio: 1206 / 1030;
    top: auto;
    bottom: 0;
  }

  @supports (top: 1cqw) {
    .portada {
      container-type: inline-size;
    }

    .portada__foto {
      --alto-foto: calc(max(100cqw, var(--alto-diapo) * 1.171) * 0.854);
      top: clamp(calc(var(--alto-diapo) - var(--alto-foto)), calc(48px - var(--alto-foto) * 0.427), 0px);
      bottom: auto;
    }
  }

  /* Sin acercamiento extra, y el zoom lento, alrededor de la cara (61 %, 51 %) */
  .portada__foto img {
    object-position: 50% 50%;
    scale: none;
    transform-origin: 61% 51%;
  }

  /* Negra por la izquierda, con las demás personas y el cartel dentro del negro, y
     transparente justo antes de la cabeza de Nuno (al 55 % del ancho de la foto).
     También se funde por la derecha y por abajo. */
  .portada__foto::after {
    background:
      linear-gradient(
        90deg,
        var(--negro) 0,
        var(--negro) 33%,
        rgba(10, 10, 10, 0.92) 40%,
        rgba(10, 10, 10, 0.76) 45%,
        rgba(10, 10, 10, 0.46) 49%,
        rgba(10, 10, 10, 0.16) 52%,
        rgba(10, 10, 10, 0) 54.5%
      ),
      linear-gradient(270deg, rgba(10, 10, 10, 0.5) 0, rgba(10, 10, 10, 0) 8%),
      linear-gradient(0deg, var(--carbon) 0, rgba(28, 28, 28, 0) 12%);
  }

  /* Soy Nuno: a la izquierda, la franja roja a toda la altura con «SOY NUNO» en vertical
     (se lee de abajo arriba, a la medida del ancho de la franja y del alto que queda
     sobre el botón fijo); al llegar, crece de abajo arriba. A la derecha, los párrafos. */
  .quien-soy__diapo--nuno {
    --ancho-franja: clamp(96px, 11vw, 200px);
    grid-template-columns: var(--ancho-franja) minmax(0, 1fr);
    grid-template-rows: none;
    align-items: center;
    padding-bottom: 0;
  }

  .quien-soy__franja {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding: 24px 0 calc(var(--alto-barra) + 24px + env(safe-area-inset-bottom, 0px));
  }

  .quien-soy__franja::before {
    transform-origin: center bottom;
  }

  .por-aparecer.aparece--franja::before {
    transform: scaleY(0);
  }

  .quien-soy__titulo {
    font-size: min(calc(var(--ancho-franja) * 0.62), calc((var(--alto-diapo) - var(--alto-barra) - 48px) / 3.8));
    writing-mode: vertical-rl;
  }

  .quien-soy__titulo span {
    transform: rotate(180deg);
  }

  .quien-soy__contenido {
    padding: clamp(24px, 5svh, 64px) var(--margen) calc(var(--alto-barra) + clamp(24px, 5svh, 64px) + env(safe-area-inset-bottom, 0px)) clamp(32px, 6vw, 112px);
  }

  /* El fondo, como en el ordenador: líneas con toda su fuerza y el disco grande, a la
     derecha, centrado de arriba abajo y en parte fuera de la pantalla */
  .quien-soy__lineas {
    opacity: 1;
  }

  .quien-soy__disco {
    --diametro: min(96svh, 64vw);
    top: calc(50% - var(--diametro) / 2);
    right: calc(var(--diametro) * -0.34);
    bottom: auto;
  }

  /* Diapositiva 2: más ancha (no hay foto), con los pilares en fila */
  .quien-soy__cierre .texto {
    max-width: var(--medida);
  }

  .pilares {
    max-width: 1240px;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .quien-soy__boton {
    width: auto;
  }
}


/* ---------- Menú de secciones en la cabecera (ordenador, 900 px o más) ---------- */

@media (min-width: 900px) {
  .cabecera__nav {
    display: flex;
    gap: 36px;
    margin-left: auto;
  }

  .cabecera__nav a {
    padding-block: 10px;
    color: var(--gris);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
  }
}


/* ---------- Móvil (pantallas estrechas, menos de 900 px) ----------
   Cada elemento con su sitio, sin solapes, y una misma escala de espacios en
   toda la página: 8 · 16 · 24 · 32 · 48 · 64 px, con 20 px de margen a los
   lados. El ordenador no usa nada de este bloque. */

@media (max-width: 899px) {
  :root {
    --margen: 20px;
    --alto-barra: 80px;            /* botón fijo de abajo: 12 + 56 + 12 */
  }

  /* Portada: la marca, más pequeña que en el ordenador (en pantallas bajas se
     quita «TEAM / NUNO FR», que ya está en la cabecera: ver más abajo) */
  .marca--grande .marca__team {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }

  .marca--grande .marca__nombre {
    margin: 0.04em 0 0.12em;
    font-size: clamp(2.75rem, 13vw, 3.5rem);
  }

  .marca--grande {
    margin-bottom: 12px;
  }

  .marca--grande .marca__seccion {
    font-size: 1.125rem;
  }

  .portada__titular {
    max-width: 26ch;
    margin-bottom: 16px;
    text-wrap: balance;
  }

  .portada__texto {
    margin-bottom: 24px;
  }

  .portada__nota {
    margin-top: 12px;
  }

  /* Secciones: misma separación arriba y abajo */
  .seccion,
  .solicitud {
    padding-block: 64px;
  }

  /* El botón fijo de abajo pasa por encima de estas secciones: al final dejan
     sitio para él, para que nunca tape lo último de cada una */
  .contenido-central > .seccion {
    padding-bottom: calc(var(--alto-barra) + 24px + env(safe-area-inset-bottom, 0px));
  }

  .franja {
    margin-bottom: 24px;
  }

  /* Soy Nuno, diapositiva 1: párrafos a la medida de la pantalla */
  .quien-soy__contenido .texto {
    font-size: clamp(0.9375rem, 2.3svh, 1.0625rem);
    line-height: 1.6;
  }

  /* Soy Nuno, diapositiva 2: frase, párrafo, pilares y botón, con aire entre ellos.
     Todo se ajusta al alto, para que quepa en una pantalla también en móviles bajos */
  .quien-soy__diapo--cierre {
    padding-block: clamp(16px, 3svh, 40px) calc(var(--alto-barra) + clamp(12px, 2svh, 28px) + env(safe-area-inset-bottom, 0px));
  }

  /* La frase, en dos líneas («SIN ATAJOS.» / «SIN PROMESAS VACÍAS.»), lo más grande
     que cabe: 10,3vw es lo máximo para que la segunda quepa a lo ancho */
  .quien-soy__destacado {
    margin-bottom: clamp(10px, 2svh, 24px);
    font-size: clamp(1.75rem, min(10.3vw, 5.6svh), 3rem);
  }

  .quien-soy__cierre .texto {
    font-size: clamp(0.8125rem, 1.95svh, 1rem);
    line-height: 1.5;
  }

  .pilares {
    gap: clamp(8px, 1.8svh, 24px);
    margin: clamp(10px, 2.2svh, 28px) 0;
  }

  .pilar {
    column-gap: 14px;
    padding-top: clamp(6px, 1.2svh, 14px);
  }

  .pilar__numero {
    font-size: clamp(1.5rem, 4.2svh, 2.5rem);
  }

  .pilar h3 {
    margin-bottom: 4px;
    font-size: clamp(1rem, 2.6svh, 1.4rem);
  }

  .pilar p {
    font-size: clamp(0.8125rem, 1.95svh, 1rem);
    line-height: 1.45;
  }

  .quien-soy__boton {
    min-height: clamp(48px, 7svh, 56px);
  }

  /* Cómo trabajamos juntos */
  .seccion__intro {
    margin: 0 0 40px;
  }

  .pasos {
    gap: 36px;
  }

  /* Sin el botón del último paso: en el móvil ya está el botón fijo de abajo, y justo
     después viene la solicitud (en el ordenador sí se ve) */
  .paso__accion {
    display: none;
  }

  /* Solicitud de plaza y formulario */
  .solicitud h2 {
    margin-bottom: 16px;
  }

  .solicitud__texto {
    margin-bottom: 32px;
  }

  .solicitud__tarjeta {
    padding: 24px 20px;
  }

  .resumen-privacidad {
    padding: 16px;
  }

  /* Pie: separado del borde de abajo del iPhone */
  .pie {
    padding-block: 48px calc(48px + env(safe-area-inset-bottom, 0px));
  }
}


/* ---------- Móviles bajos en vertical (375 × 667...) ----------
   Portada sin «TEAM / NUNO FR» (ya está en la cabecera), para que la foto y el
   texto respiren. */

@media (max-width: 899px) and (max-height: 699px) {
  .portada .marca__team,
  .portada .marca__nombre {
    display: none;
  }
}


/* ---------- Móvil en horizontal (pantalla baja) ----------
   Titulares y textos a la medida del alto, y botón fijo de abajo más fino. */

@media (orientation: landscape) and (max-height: 520px) and (max-width: 899px) {
  :root {
    --alto-barra: 58px;            /* botón fijo de abajo, más fino: 6 + 46 + 6 */
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  /* Cabecera compacta también en móviles grandes girados (932 × 430...). El texto de los
     párrafos de las diapositivas, a la medida del alto (de 15 a 17 px) para que quepan. */
  :root {
    --alto-cabecera: 56px;
    --parrafo: clamp(0.9375rem, 4.1svh, 1.0625rem);
  }

  .cabecera .logo img {
    width: 44px;
    height: 44px;
  }

  .cabecera .boton {
    min-height: 38px;
    padding: 6px 14px;
    font-size: 0.875rem;
  }

  .cabecera__nav a {
    padding-block: 6px;
    font-size: 0.875rem;
  }

  /* Portada: sin el logo grande (ya está en la cabecera), como en los móviles bajos */
  .portada .marca__team,
  .portada .marca__nombre {
    display: none;
  }

  .diapo--foto {
    padding-block: 12px;
  }

  .franja {
    font-size: clamp(2rem, 11svh, 3rem);
  }

  .quien-soy__contenido .texto,
  .quien-soy__cierre .texto,
  .pilar p {
    font-size: var(--parrafo);
    line-height: 1.5;
  }

  .quien-soy__contenido .texto p {
    margin-bottom: 10px;
  }

  .quien-soy__diapo--cierre {
    padding-block: 8px calc(var(--alto-barra) + 8px + env(safe-area-inset-bottom, 0px));
  }

  .quien-soy__destacado {
    margin-bottom: 6px;
    font-size: clamp(1.5rem, 9svh, 2.5rem);
  }

  /* El párrafo, a todo el ancho: así ocupa dos líneas y no tres */
  .quien-soy__cierre .texto {
    max-width: none;
  }

  .pilares {
    gap: 16px;
    margin: 6px 0;
  }

  .pilar {
    column-gap: 10px;
    padding-top: 8px;
  }

  .pilar__numero {
    font-size: clamp(1.5rem, 8svh, 2rem);
  }

  .pilar h3 {
    font-size: clamp(1rem, 5svh, 1.25rem);
  }

  .quien-soy__boton {
    min-height: 46px;
    padding-block: 8px;
  }

  .marca--grande {
    margin-bottom: 0.75rem;
  }

  .marca--grande .marca__team {
    font-size: clamp(1.75rem, 9svh, 3rem);
  }

  .marca--grande .marca__nombre {
    font-size: clamp(2.75rem, 15svh, 5rem);
  }

  .marca--grande .marca__seccion {
    font-size: clamp(0.9rem, 3.4svh, 1.25rem);
  }

  .portada__titular {
    margin-bottom: 0.4em;
    font-size: clamp(1.25rem, 6.6svh, 2rem);
  }

  .portada__texto {
    margin-bottom: 12px;
    font-size: var(--parrafo);
    line-height: 1.45;
  }

  .portada__botones .boton {
    min-height: 46px;
    padding: 8px 22px;
    font-size: 0.9375rem;
  }

  .portada__nota {
    margin-top: 8px;
    font-size: calc(var(--parrafo) * 0.85);
    line-height: 1.4;
  }

  /* Lo que no es una diapositiva (pasos, solicitud y pie) no tiene que caber en una
     pantalla: algo más grande que en el móvil en vertical */
  .seccion__intro,
  .paso p,
  .solicitud__texto,
  .formulario,
  .campo input[type="text"],
  .campo input[type="tel"] {
    font-size: 1.125rem;
  }

  .pie {
    font-size: 0.9375rem;
  }

  .barra-movil {
    padding-block: 6px calc(6px + env(safe-area-inset-bottom, 0px));
  }

  .barra-movil .boton {
    min-height: 46px;
    padding-block: 8px;
  }
}


/* ---------- «Soy Nuno» en el móvil girado ----------
   La franja, más estrecha, y menos aire alrededor de los párrafos. */

@media (orientation: landscape) and (min-width: 560px) and (max-height: 520px) {
  .quien-soy__diapo--nuno {
    --ancho-franja: 84px;
  }

  .quien-soy__franja {
    padding-block: 12px calc(var(--alto-barra) + 12px + env(safe-area-inset-bottom, 0px));
  }

  .quien-soy__contenido {
    padding: 12px var(--margen) calc(var(--alto-barra) + 12px + env(safe-area-inset-bottom, 0px)) 24px;
  }
}