/* =========================================================
   Sara Montecatine · Psicología
   Tipografía ET Book (de Tufte CSS) + paleta lavanda muy clara
   ========================================================= */

/* ---------- Tipografía ---------- */

@font-face {
  font-family: "et-book";
  src:
    url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff")
      format("woff"),
    url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf")
      format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "et-book";
  src:
    url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff")
      format("woff"),
    url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf")
      format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "et-book";
  src:
    url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff")
      format("woff"),
    url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf")
      format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* ---------- Paleta y medidas ---------- */

:root {
  color-scheme: light;

  --papel: #efe9f9; /* fondo general: lavanda claro pero visible */
  --papel-tono: #e8e0f5; /* secciones alternas: lavanda más marcado */
  --lavanda: #d9cdec; /* filetes y bordes */
  --lavanda-fuerte: #bfaedd;
  --tinta: #2a2633; /* texto principal, 15:1 sobre --papel */
  --tinta-suave: #574f66; /* texto secundario, 8:1 */
  --acento: #6a5891;

  --ancho: 1160px;
  --columna: 36rem; /* ancho cómodo de lectura */
  --radio: 2px;

  --paso: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Un único ritmo para toda la web: si cambias --tiempo, cambia todo a la
     vez y sigue yendo acompasado. Los otros dos son su mitad y su doble. */
  --tiempo: 0.6s;
  --tiempo-corto: 0.3s;
  --tiempo-largo: 1.2s;
}

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

* {
  box-sizing: border-box;
}

html {
  /* El desplazamiento suave lo lleva script.js; esto es el respaldo sin JS. */
  scroll-behavior: smooth;
  /* Reserva el hueco de la barra de scroll para que la página no dé un
     salto lateral al bloquearla cuando se abre el menú. */
  scrollbar-gutter: stable;
}

/* Con el menú abierto se bloquea el scroll del fondo (mantiene la posición). */
html.sin-scroll {
  overflow: hidden;
}

body {
  margin: 0;
  background-color: var(--papel);
  color: var(--tinta);
  font-family:
    "et-book", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  /* clip no crea contenedor de scroll, así que no rompe position: sticky
     como sí hace overflow: hidden en algunos navegadores móviles. */
  overflow-x: hidden; /* respaldo para navegadores sin clip */
  overflow-x: clip;
}

h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(3rem, 1.6rem + 6vw, 6rem);
  letter-spacing: -0.015em;
}

h2 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  margin-bottom: 1.6rem;
}

h3 {
  font-size: 1.22em;
  margin-bottom: 0.35rem;
}

p {
  margin: 0 0 1.35rem;
}

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

figure {
  margin: 0;
}

a {
  color: inherit;
  text-decoration-color: var(--lavanda-fuerte);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--tiempo-corto) var(--paso);
}

a:hover {
  text-decoration-color: var(--acento);
}

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 4px;
}

.saltar {
  position: absolute;
  left: -9999px;
}

.saltar:focus {
  left: 1rem;
  top: 1rem;
  z-index: 200;
  background: var(--papel);
  padding: 0.6rem 1rem;
  border: 1px solid var(--lavanda-fuerte);
}

/* ---------- Estructura ---------- */

.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

.seccion {
  padding-block: clamp(6rem, 13vh, 10.5rem);
  scroll-margin-top: 0;
}

.seccion.tono {
  background-color: var(--papel-tono);
}

.antetitulo {
  font-style: italic;
  color: var(--acento);
  letter-spacing: 0.02em;
  margin-bottom: 0.9rem;
}

.columna-texto p {
  max-width: var(--columna);
  color: var(--tinta-suave);
}

.columna-texto .dato {
  font-style: italic;
  margin-top: 2.2rem;
  margin-bottom: 0;
}

/* Título y entradilla de una sección, por encima de su contenido. */
.cabecera-seccion p {
  max-width: var(--columna);
  color: var(--tinta-suave);
}

.cabecera-seccion p:last-of-type {
  margin-bottom: 0;
}

/* ---------- Cabecera flotante y menú hamburguesa ---------- */

/* Barra fija que aparece al dejar la portada. El fondo combina un
   degradado (más opaco arriba) con desenfoque, para que el texto que
   pasa por debajo se atenúe progresivamente y la cabecera se pueda
   leer siempre, sea cual sea el contenido que tenga detrás. */
.cabecera-flotante {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: clamp(5rem, 4.5rem + 2vw, 6rem);
  display: flex;
  align-items: center;
  padding-inline: clamp(1.5rem, 4vw, 2.5rem);
  background: linear-gradient(
    to bottom,
    var(--papel) 0%,
    color-mix(in srgb, var(--papel) 70%, transparent) 65%,
    transparent 100%
  );
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 55%,
    transparent 100%
  );
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  opacity: 0;
  transform: translateY(-0.6rem);
  transition:
    opacity var(--tiempo) var(--paso),
    transform var(--tiempo) var(--paso);
  pointer-events: none;
}

.cabecera-flotante.visible {
  opacity: 1;
  transform: none;
}

.cabecera-texto {
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.hamburguesa {
  position: fixed;
  top: 1.4rem;
  right: 1.6rem;
  z-index: 120;
  width: 3rem;
  height: 3rem;
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 6px;
  padding: 0.7rem;
  background: color-mix(in srgb, var(--papel) 78%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--lavanda);
  border-radius: 50%;
  cursor: pointer;
}

.hamburguesa-linea {
  display: block;
  width: 1.15rem;
  height: 1px;
  background: var(--tinta);
  transition:
    transform var(--tiempo) var(--paso),
    opacity var(--tiempo-corto) linear,
    width var(--tiempo) var(--paso);
}

.hamburguesa-linea:nth-child(2) {
  width: 0.8rem;
}

.hamburguesa[aria-expanded="true"] .hamburguesa-linea {
  width: 1.15rem;
}

.hamburguesa[aria-expanded="true"] .hamburguesa-linea:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburguesa[aria-expanded="true"] .hamburguesa-linea:nth-child(2) {
  opacity: 0;
}

.hamburguesa[aria-expanded="true"] .hamburguesa-linea:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Al abrir el menú, el velo cubre la web entera y la desenfoca. Queda por
   debajo del panel (z-index 110) y del botón (120), así que esos dos se
   siguen viendo nítidos. */
.velo {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--tinta) 16%, transparent);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--tiempo) var(--paso) 0.12s,
    -webkit-backdrop-filter var(--tiempo) var(--paso) 0.12s,
    backdrop-filter var(--tiempo) var(--paso) 0.12s,
    visibility var(--tiempo) 0.12s;
}

.velo.abierto {
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s; /* el desenfoque entra ya; al cerrar es lo último */
}

.menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 110;
  width: min(24rem, 86vw);
  height: 100%;
  padding: 7rem 2.5rem 2.5rem;
  background: var(--papel-tono);
  border-left: 1px solid var(--lavanda);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateX(100%);
  visibility: hidden;
  /* Entra y sale despacio, en consonancia con el ritmo del resto. El
     retardo solo cuenta al cerrar: así el panel espera a que los enlaces
     se hayan ido, que es justo el orden inverso de la apertura. */
  transition:
    transform var(--tiempo) var(--paso) 0.18s,
    visibility var(--tiempo) 0.18s;
}

.menu.abierto {
  transform: none;
  visibility: visible;
  transition-delay: 0s; /* al abrir, el panel es lo primero que se mueve */
}

.menu-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-lista li + li {
  margin-top: 0.5rem;
}

/* Los enlaces entran escalonados detrás del panel y salen igual, pero al
   revés: los retardos del estado base son los que rigen el cierre (de
   abajo arriba), y los de .abierto los que rigen la apertura. */
.menu-lista li,
.menu-pie {
  opacity: 0;
  transform: translateX(1.2rem);
  transition:
    opacity var(--tiempo) var(--paso),
    transform var(--tiempo) var(--paso);
}

.menu.abierto .menu-lista li,
.menu.abierto .menu-pie {
  opacity: 1;
  transform: none;
}

/* Apertura: de arriba abajo, detrás del panel. */
.menu.abierto .menu-lista li:nth-child(1) {
  transition-delay: 0.2s;
}
.menu.abierto .menu-lista li:nth-child(2) {
  transition-delay: 0.26s;
}
.menu.abierto .menu-lista li:nth-child(3) {
  transition-delay: 0.32s;
}
.menu.abierto .menu-lista li:nth-child(4) {
  transition-delay: 0.38s;
}
.menu.abierto .menu-lista li:nth-child(5) {
  transition-delay: 0.44s;
}
.menu.abierto .menu-pie {
  transition-delay: 0.5s;
}

/* Cierre: de abajo arriba, y el panel se va después de los enlaces. */
.menu-pie {
  transition-delay: 0s;
}
.menu-lista li:nth-child(5) {
  transition-delay: 0.04s;
}
.menu-lista li:nth-child(4) {
  transition-delay: 0.08s;
}
.menu-lista li:nth-child(3) {
  transition-delay: 0.12s;
}
.menu-lista li:nth-child(2) {
  transition-delay: 0.16s;
}
.menu-lista li:nth-child(1) {
  transition-delay: 0.2s;
}

.menu-lista a {
  display: block;
  padding: 0.35rem 0;
  font-size: 1.45rem;
  line-height: 1.3;
  text-decoration: none;
  color: var(--tinta-suave);
  transition: color var(--tiempo-corto) var(--paso);
}

.menu-lista a:hover,
.menu-lista a.activo {
  color: var(--tinta);
}

.menu-num {
  display: inline-block;
  width: 2.4rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--acento);
  vertical-align: 0.15em;
}

.menu-pie {
  margin: 0;
  font-size: 0.95rem;
  color: var(--tinta-suave);
}

/* ---------- 01 · Portada ---------- */

.portada {
  position: relative;
  min-height: 100vh; /* respaldo sin svh */
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 7rem;
}

.portada-rejilla {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.portada-texto .rol {
  font-style: italic;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  color: var(--acento);
  margin: 0.6rem 0 2rem;
}

.portada-texto .claim {
  max-width: 22rem;
  color: var(--tinta-suave);
}

.boton {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.7rem 1.8rem;
  border: 1px solid var(--lavanda-fuerte);
  border-radius: 999px;
  text-decoration: none;
  color: var(--tinta);
  background: transparent;
  transition:
    background-color var(--tiempo) var(--paso),
    border-color var(--tiempo) var(--paso);
}

.boton:hover {
  background-color: var(--lavanda);
  border-color: var(--lavanda);
}

.portada-arte img {
  width: 100%;
  mix-blend-mode: multiply;
}

/* ---------- Dos columnas con imagen fija ---------- */

.dos-columnas {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: start;
}

.retrato img {
  width: 100%;
}

/* Solo la foto de "Quién soy" se queda quieta mientras el texto sigue
   subiendo: en "Contacto" la imagen es más corta que su columna de texto y
   quedaba pegada solo un instante, como un tirón. */
#quien-soy .retrato {
  position: sticky;
  top: max(12vh, 6rem);
}

/* ---------- 03 · Fondo en vídeo ---------- */

#como-trabajo {
  position: relative;
  /* Contexto de apilado propio: así el z-index del vídeo y del contenido
     solo compiten entre ellos y no con el menú o la cabecera. */
  isolation: isolate;
}

/* Ocupa la sección entera, incluido su relleno superior e inferior. */
.fondo-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Lo que se queda pegado. Sin esto habría que estirar el vídeo a lo alto
   de toda la sección (varias pantallas) y se vería un plano gigante y
   quieto; así siempre cubre justo lo que se está mirando.
   No hace falta recortar por fuera: sticky nunca se sale de su caja. */
.fondo-video-capa {
  position: sticky;
  top: 0;
  height: 100vh; /* respaldo sin svh */
  height: 100svh;
}

.fondo-video-capa video,
.fondo-video-anim {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El vídeo es vertical y en pantalla apaisada hay que recortarlo mucho.
     Sara, la playa y la isla están entre el 73% y el 100% del alto, así que
     centrado solo se veía cielo: lo anclamos abajo. En móvil, donde cabe
     el alto entero, este ajuste no cambia nada. */
  object-position: center bottom;
}

/* Respaldo animado. Solo lo inserta el JavaScript si el vídeo no consigue
   reproducirse, que es lo que pasa con el ahorro de batería de iOS: veta los
   vídeos, pero no las imágenes animadas, así que el fondo se sigue moviendo.
   Va entre el vídeo y el velo para que este siga por encima. */
.fondo-video-anim {
  position: absolute;
  inset: 0;
}

.fondo-video-capa.con-respaldo video {
  display: none;
}

/* iOS dibuja su propio botón de play encima de los vídeos que aún no han
   arrancado (pasa siempre con el ahorro de batería puesto, que veta la
   reproducción automática). Aquí sobra: esto es un fondo, no un reproductor,
   y sin el botón se ve el primer fotograma como una foto fija.
   Cada selector va en su propia regla a propósito: son pseudoelementos no
   estándar y, si se juntaran en una lista, bastaría con que un navegador no
   reconociera uno para tirar la regla entera. */
.fondo-video-capa video::-webkit-media-controls {
  display: none !important;
}

.fondo-video-capa video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.fondo-video-capa video::-webkit-media-controls-panel {
  display: none !important;
}

.fondo-video-capa video::-webkit-media-controls-overlay-play-button {
  display: none !important;
}

/* Vela el vídeo para integrarlo con la paleta sin que tape el texto.
   Medido contra los planos reales del vídeo, al 70% el texto principal
   conserva 6,2:1 en la peor zona, holgado sobre el mínimo de 4,5:1.
   Súbelo si quieres el fondo más discreto, bájalo para verlo más: por
   debajo del 60% ya no está garantizado el contraste. */
.fondo-video-velo {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--papel) 70%, transparent);
}

/* Sobre el vídeo no se puede contar con el fondo: si el plano es oscuro,
   los tonos suaves se quedan por debajo del mínimo de contraste (4,3:1 el
   texto secundario, 3,4:1 el acento). En esta sección van con la tinta
   principal, que aguanta 8,2:1 incluso contra negro. Los números de las
   fases no lo necesitan: van dentro de un círculo con fondo propio. */
#como-trabajo .cabecera-seccion p,
#como-trabajo .paso-pin p,
#como-trabajo .antetitulo,
#como-trabajo .pasos-aviso {
  color: var(--tinta);
}

/* El contenido, por encima del fondo. */
#como-trabajo .cabecera-seccion,
#como-trabajo .escenario-pasos {
  position: relative;
  z-index: 1;
}

/* ---------- 03 · Escenario de pasos fijado ---------- */

/* Las tres fases van en una columna centrada, como una línea de tiempo: un
   riel vertical une los círculos numerados de cada fase.
   Sin JS (o con "menos movimiento") se leen seguidas, sin fijar la sección
   ni animar nada: esta es la base accesible por defecto. */
.escenario-pasos {
  position: relative;
  padding-top: 3.5rem;
}

.escenario-pin {
  display: flex;
  align-items: center;
}

.escenario-pin > .contenedor {
  width: min(100% - 2.5rem, var(--ancho));
}

/* Referencia de posición para el riel: script.js mide los círculos
   respecto a este bloque. */
.pasos-bloque {
  --circulo: 2.2rem;
  position: relative;
  max-width: 34rem;
  margin-inline: auto;
}

.pasos-pin {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
}

.paso-pin {
  position: relative;
  padding-left: calc(var(--circulo) + 1.4rem);
}

/* El número, dentro de un círculo que se apoya sobre el riel. */
.paso-pin-num {
  position: absolute;
  z-index: 1;
  left: 0;
  top: -0.2rem;
  width: var(--circulo);
  height: var(--circulo);
  display: grid;
  place-items: center;
  border: 1px solid var(--acento);
  border-radius: 50%;
  background: var(--papel);
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--acento);
  transition:
    background-color var(--tiempo) var(--paso),
    color var(--tiempo) var(--paso),
    transform var(--tiempo) var(--paso);
}

.paso-pin p {
  margin-bottom: 0;
  color: var(--tinta-suave);
}

/* Riel: la línea que baja por el centro de los círculos. Sin JS va de arriba
   abajo del bloque; con JS se ajusta para empezar y acabar en los círculos. */
.pasos-riel {
  position: absolute;
  top: calc(var(--circulo) / 2);
  bottom: calc(var(--circulo) / 2);
  left: calc(var(--circulo) / 2 - 0.5px);
  width: 1px;
  background: color-mix(in srgb, var(--tinta) 22%, transparent);
}

.pasos-riel-relleno,
.pasos-aviso {
  display: none;
}

/* Con JS activo (y sin pedir menos movimiento) la sección se fija en
   pantalla mientras se recorre: las tres fases están siempre a la vista y
   la actual se resalta en negrita mientras el riel se va rellenando. */
/* Alto total del tramo fijado. Restándole la pantalla (100vh) queda el
   recorrido que se reparte entre las tres fases: 250 - 100 = 150vh, es
   decir media pantalla de scroll por fase. Súbelo si quieres que haya que
   deslizar más para pasar de una a otra. */
html.js-activo:not(.motion-reducido) .escenario-pasos {
  height: 250vh;
  padding-top: 0;
}

html.js-activo:not(.motion-reducido) .escenario-pin {
  position: sticky;
  top: 0;
  height: 100vh; /* respaldo sin svh */
  height: 100svh;
  justify-content: center;
  overflow: hidden;
}

/* Hueco bajo la última fase: el riel sigue bajando hasta el aviso de
   "Desliza", y es lo que se rellena durante el último tramo. */
html.js-activo:not(.motion-reducido) .pasos-pin {
  padding-bottom: 3.2rem;
}

/* Se atenúa solo el texto: si fuera la fase entera, el círculo se volvería
   translúcido y el riel se vería a través de él. */
html.js-activo:not(.motion-reducido) .paso-pin h3,
html.js-activo:not(.motion-reducido) .paso-pin p {
  opacity: 0.5;
  transition: opacity var(--tiempo) var(--paso);
}

html.js-activo:not(.motion-reducido) .paso-pin.activo h3,
html.js-activo:not(.motion-reducido) .paso-pin.activo p {
  opacity: 1;
}

html.js-activo:not(.motion-reducido) .paso-pin.activo h3 {
  font-weight: bold;
}

/* Las fases ya recorridas y la actual llevan el círculo relleno; la actual,
   además, un poco más grande. */
html.js-activo:not(.motion-reducido) .paso-pin.hecho .paso-pin-num,
html.js-activo:not(.motion-reducido) .paso-pin.activo .paso-pin-num {
  background: var(--acento);
  color: var(--papel);
}

html.js-activo:not(.motion-reducido) .paso-pin.activo .paso-pin-num {
  transform: scale(1.15);
}

/* El relleno sigue al scroll sin retardo ni suavizado, así que cualquier
   movimiento, por pequeño que sea, se ve en pantalla. Llega a cada círculo
   justo cuando esa fase pasa a ser la actual (lo calcula script.js). */
html.js-activo:not(.motion-reducido) .pasos-riel-relleno {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: center top;
  transform: scaleY(0);
  background: var(--acento);
}

/* Aviso de "desliza": aparece solo cuando la persona se queda parada en una
   fase que no es la última, y se va en cuanto vuelve a mover el scroll.
   Va a la derecha del bloque, a la altura de la fase actual (script.js le
   pone el top), y entra con un fundido lento para que no llame de golpe.
   Es una palabra pequeña sobre una línea fina por la que baja una luz. */
html.js-activo:not(.motion-reducido) .pasos-aviso {
  position: absolute;
  left: calc(100% + 3.5rem);
  top: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  line-height: 1;
  opacity: 0;
  transform: translate(-0.5rem, -50%);
  transition:
    opacity 1.1s ease,
    transform 1.4s var(--paso);
  pointer-events: none;
}

/* Al irse, rápido: no debe quedarse flotando mientras la página se mueve. */
html.js-activo:not(.motion-reducido) .pasos-aviso:not(.visible) {
  transition-duration: var(--tiempo-corto);
}

html.js-activo:not(.motion-reducido) .pasos-aviso.visible {
  opacity: 0.85;
  transform: translate(0, -50%);
}

.pasos-aviso-guia {
  position: relative;
  display: block;
  width: 1px;
  height: 3.4rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--tinta) 16%, transparent);
}

/* La luz que baja: un tramo con degradado que recorre la línea y se desvanece
   al llegar abajo, una y otra vez, sin prisa. */
.pasos-aviso-guia::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 45%;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--acento) 70%,
    transparent
  );
  animation: bajar-luz 2.4s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}

@keyframes bajar-luz {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(230%);
    opacity: 0;
  }
}

/* ---------- 04 · Áreas ---------- */

.rejilla-areas {
  list-style: none;
  margin: 3.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2.6rem clamp(2rem, 4vw, 3.5rem);
}

.rejilla-areas li {
  padding-top: 1.3rem;
  border-top: 1px solid var(--lavanda);
}

.rejilla-areas p {
  margin-bottom: 0;
  color: var(--tinta-suave);
  font-size: 0.96em;
}

/* ---------- 05 · Contacto ---------- */

/* La foto del cielo ocupa el lado izquierdo sin márgenes: de arriba abajo de
   la sección y hasta el borde de la pantalla. El texto va a la derecha. */
#contacto {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  padding-block: 0;
  min-height: min(100vh, 56rem); /* respaldo sin svh */
  min-height: min(100svh, 56rem);
}

.contacto-cielo {
  position: relative;
}

.contacto-cielo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Abajo están los tonos dorados y la punta del campanario: se ancla ahí. */
  object-position: center bottom;
}

.contacto-texto {
  align-self: center;
  padding-block: clamp(6rem, 13vh, 10.5rem);
  padding-left: clamp(2.5rem, 6vw, 6rem);
  /* A la derecha, el mismo margen que deja .contenedor en el resto. */
  padding-right: max(1.25rem, calc((100vw - var(--ancho)) / 2));
}

.contacto-datos {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}

.contacto-datos li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.contacto-datos li + li {
  margin-top: 1rem;
}

.icono {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  color: var(--acento);
}

/* ---------- 05 · Formulario de contacto ---------- */

/* Campos sin caja, solo con una línea debajo, en la línea sobria del resto
   de la web. */
.formulario {
  max-width: var(--columna);
  margin-top: 2.2rem;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 1.4rem;
}

.campo-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  column-gap: 1.8rem;
}

.campo label {
  font-style: italic;
  font-size: 0.92rem;
  color: var(--tinta-suave);
}

.campo-opcional {
  font-size: 0.9em;
  opacity: 0.8;
}

.campo input,
.campo textarea {
  width: 100%;
  font: inherit;
  color: var(--tinta);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lavanda-fuerte);
  border-radius: 0;
  padding: 0.35rem 0;
  transition:
    border-color var(--tiempo-corto) var(--paso),
    box-shadow var(--tiempo-corto) var(--paso);
}

/* El mensaje crece solo según se escribe, sin barra de desplazamiento ni
   tirador. field-sizing lo hace sin JS donde está soportado; en el resto,
   script.js ajusta la altura en cada pulsación. */
.campo textarea {
  min-height: 7.5rem;
  resize: none;
  overflow: hidden;
  field-sizing: content;
  line-height: 1.6;
}

/* El foco se marca engrosando la línea en el color de acento. */
.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-bottom-color: var(--acento);
  box-shadow: 0 1px 0 var(--acento);
}

/* Sin esto, el autocompletado de Chrome pinta los campos de azul. */
.campo input:-webkit-autofill {
  -webkit-text-fill-color: var(--tinta);
  box-shadow: 0 0 0 100px var(--papel) inset;
}

.casilla {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0.2rem 0 1.6rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--tinta-suave);
  cursor: pointer;
}

.casilla input {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.2rem 0 0;
  accent-color: var(--acento);
}

.formulario-verificacion:not(:empty) {
  margin-bottom: 1rem;
}

.formulario .boton {
  margin-top: 0;
  font: inherit;
  cursor: pointer;
}

.formulario .boton:disabled {
  opacity: 0.6;
  cursor: progress;
}

.columna-texto .formulario-estado {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  color: var(--tinta);
}

.formulario-estado:empty {
  display: none;
}

.columna-texto .formulario-estado.error {
  color: #8e2f4f; /* 6,6:1 sobre --papel */
}

/* Lo que sustituye al formulario una vez enviado. */
.formulario-gracias {
  max-width: var(--columna);
  margin-top: 2.2rem;
  padding-left: 1.2rem;
  border-left: 1px solid var(--acento);
}

.formulario-gracias:focus {
  outline: none;
}

.formulario-gracias h3 {
  margin-bottom: 0.5rem;
}

.contacto-alternativa {
  margin-top: 3rem;
}

.columna-texto .contacto-alternativa + .contacto-datos {
  margin-top: 1rem;
}

/* Tras enviar el formulario la frase de la alternativa se oculta y los datos
   de contacto recuperan su separación normal. */
.columna-texto .contacto-alternativa[hidden] + .contacto-datos {
  margin-top: 2.5rem;
}

/* ---------- Pie ---------- */

.pie {
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--lavanda);
  font-size: 0.9rem;
  color: var(--tinta-suave);
}

.pie-rejilla {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
}

.pie p {
  margin: 0;
}

.pie strong {
  font-weight: normal;
  color: var(--tinta);
}

.pie-legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
}

.pie-legal a[aria-current="page"] {
  color: var(--tinta);
  text-decoration-color: var(--acento);
}

/* ---------- Páginas legales ---------- */

/* Aviso legal y Política de Privacidad. No cargan script.js: son texto
   corrido, sin menú, apariciones ni parallax. */

.legal-cabecera {
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--lavanda);
}

.legal-cabecera-rejilla {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
}

.legal-marca {
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinta-suave);
}

.legal-volver {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--acento);
}

.legal {
  padding-block: clamp(3.5rem, 9vh, 6rem);
}

.legal-texto {
  max-width: 40rem;
}

.legal-texto h1 {
  font-size: clamp(2.4rem, 1.7rem + 3vw, 3.8rem);
  margin-bottom: 2.5rem;
}

.legal-texto h2 {
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem);
  margin: 3rem 0 1rem;
}

.legal-num {
  font-style: italic;
  color: var(--acento);
}

.legal-texto p,
.legal-texto li {
  color: var(--tinta-suave);
}

.legal-texto strong {
  color: var(--tinta);
}

.legal-texto ul {
  margin: 0 0 1.35rem;
  padding-left: 1.3rem;
}

.legal-texto li + li {
  margin-top: 0.35rem;
}

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

.legal-ficha {
  padding-left: 1.2rem;
  border-left: 1px solid var(--lavanda-fuerte);
}

.legal-fecha {
  margin-top: 3.5rem;
  font-style: italic;
}

/* ---------- Animaciones de aparición ---------- */

.reveal {
  opacity: 0;
  transform: translateY(1.8rem);
  transition:
    opacity var(--tiempo-largo) var(--paso),
    transform var(--tiempo-largo) var(--paso);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Escalonado entre hermanos, para que entren uno detrás de otro. */
.reveal:nth-child(2) {
  transition-delay: 0.08s;
}
.reveal:nth-child(3) {
  transition-delay: 0.16s;
}
.reveal:nth-child(4) {
  transition-delay: 0.24s;
}
.reveal:nth-child(5) {
  transition-delay: 0.32s;
}
.reveal:nth-child(6) {
  transition-delay: 0.4s;
}

/* ---------- Pantallas medianas y móvil ---------- */

@media (max-width: 900px) {
  .portada-rejilla,
  .dos-columnas {
    grid-template-columns: 1fr;
  }

  .portada {
    min-height: auto;
    padding-block: 8rem 5rem;
  }

  .portada-arte {
    max-width: 22rem;
    margin-inline: auto;
  }

  .portada-texto {
    order: -1;
  }

  .retrato {
    max-width: 26rem;
    margin-inline: auto;
  }

  /* En móvil la foto tampoco se queda fija: molesta más que suma. */
  #quien-soy .retrato {
    position: static;
  }

  /* Al apilarse todo en una columna, la foto de "Quién soy" quedaría pegada
     a la ilustración de la portada. Se deja al final de su sección para que
     siempre quede texto entre imagen e imagen. */
  #quien-soy .retrato {
    order: 2;
  }

  /* En Contacto el cielo pasa a ser una franja a lo ancho, encima del texto:
     la sección anterior no tiene imágenes, así que no se juntan dos. */
  #contacto {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .contacto-cielo {
    height: 42vh; /* respaldo sin svh */
    height: 42svh;
  }

  .contacto-texto {
    padding-block: 4.5rem 6rem;
    padding-inline: 1.25rem;
  }

  .cabecera-flotante {
    height: 4.7rem;
    padding-inline: 1.25rem;
  }

  .cabecera-texto {
    font-size: 0.9rem;
  }

  /* La animación de las fases sí funciona en móvil: el título y la
     entradilla quedan fuera del bloque fijado, así que dentro solo hay que
     encajar las tres fases, que caben de sobra. */
  html.js-activo:not(.motion-reducido) .escenario-pasos {
    height: 230vh;
  }

  .pasos-pin {
    gap: 2rem;
  }

  .paso-pin {
    padding-left: calc(var(--circulo) + 1rem);
  }

  /* En móvil no hay sitio a la derecha: el aviso va bajo el riel, con la
     línea justo en su prolongación, como si el propio riel siguiera. */
  html.js-activo:not(.motion-reducido) .pasos-aviso {
    position: static;
    flex-direction: row;
    gap: 0.9rem;
    margin-top: 0.3rem;
    padding-left: calc(var(--circulo) / 2 - 0.5px);
    transform: translateY(-0.4rem);
  }

  html.js-activo:not(.motion-reducido) .pasos-aviso.visible {
    transform: none;
  }

  html.js-activo:not(.motion-reducido) .pasos-aviso-texto {
    order: 2;
  }
}

/* ---------- Pantallas muy bajas (móvil en horizontal) ---------- */

/* Con menos de ~520px de alto, fijar una pantalla entera resulta agobiante
   y el contenido no respira. Se vuelve a la lista corrida de los tres
   pasos. Va después del bloque de móvil para poder ganarle. */
@media (max-height: 520px) {
  html.js-activo:not(.motion-reducido) .escenario-pasos {
    height: auto;
    padding-top: 3.5rem;
  }

  html.js-activo:not(.motion-reducido) .escenario-pin {
    position: static;
    height: auto;
    overflow: visible;
  }

  html.js-activo:not(.motion-reducido) .pasos-pin {
    padding-bottom: 0;
  }

  html.js-activo:not(.motion-reducido) .paso-pin h3,
  html.js-activo:not(.motion-reducido) .paso-pin p {
    opacity: 1;
  }

  html.js-activo:not(.motion-reducido) .paso-pin.activo h3 {
    font-weight: normal;
  }

  html.js-activo:not(.motion-reducido) .paso-pin.hecho .paso-pin-num,
  html.js-activo:not(.motion-reducido) .paso-pin.activo .paso-pin-num {
    background: var(--papel);
    color: var(--acento);
    transform: none;
  }

  html.js-activo:not(.motion-reducido) .pasos-riel-relleno,
  html.js-activo:not(.motion-reducido) .pasos-aviso {
    display: none;
  }
}

/* ---------- Respeto por quien pide menos movimiento ---------- */

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

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Un vídeo en bucle constante es justo lo que evita quien pide menos
     movimiento: se retira y la sección se queda con su color de fondo. */
  .fondo-video {
    display: none;
  }

  /* El menú sigue desenfocando el fondo, pero sin deslizamientos ni
     escalonados: aparece y desaparece directamente. */
  .menu,
  .velo,
  .menu-lista li,
  .menu-pie,
  .hamburguesa-linea {
    transition: none;
  }

  .menu.abierto .menu-lista li,
  .menu.abierto .menu-pie {
    transition-delay: 0s;
  }
}