/* ============================================================
   CAALF · UNA — estilos
   Todos los valores vienen de css/tokens.css.
   Orden: fuentes · base · utilidades · secciones · pie · flotante
   ============================================================ */

/* --- Fuentes ------------------------------------------------ */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

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

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

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

body {
  margin: 0;
  background: var(--color-superficie);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: var(--fs-cuerpo);
  line-height: var(--lh-cuerpo);
  font-weight: var(--peso-texto);
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-stretch: 115%;
  margin: 0;
}

p { margin: 0 0 var(--e-4); }
p:last-child { margin-bottom: 0; }

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

a { color: var(--color-morado); }
a:hover { color: var(--color-morado-hondo); }

:focus-visible {
  outline: var(--grosor-foco) solid var(--foco, var(--color-foco-claro));
  outline-offset: var(--separacion-foco);
}

::selection { background: var(--color-amarillo); color: var(--color-texto); }

.salto-contenido {
  position: absolute;
  left: var(--e-4);
  top: calc(-1 * var(--e-11));
  z-index: 20;
  background: var(--color-amarillo);
  color: var(--color-texto);
  padding: var(--e-3) var(--e-5);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  transition: top var(--dur-rapida) var(--ease);
}
.salto-contenido:focus { top: var(--e-4); color: var(--color-texto); }

/* --- Contenedores ------------------------------------------- */

.contenedor {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}
.contenedor--angosto { max-width: calc(var(--ancho-angosto) + 2 * var(--margen-lateral)); }
.contenedor--medio { max-width: calc(var(--ancho-medio) + 2 * var(--margen-lateral)); }
.contenedor--ancho { max-width: calc(var(--ancho-ancho) + 2 * var(--margen-lateral)); }

/* --- Piezas compartidas ------------------------------------- */

.titulo-seccion {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-titular);
  margin-bottom: var(--e-5);
}
.titulo-seccion--claro { color: var(--color-blanco); }

.rotulo {
  font-family: var(--fuente-texto);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tr-rotulo);
  line-height: var(--lh-rotulo);
  text-transform: uppercase;
  color: var(--color-morado);
  margin: 0 0 var(--e-3);
}
.rotulo--claro { color: var(--color-amarillo); }

.texto-guia {
  font-size: var(--fs-cuerpo-grande);
  line-height: 1.45;
  margin-bottom: var(--e-5);
}

.apunte {
  margin-top: var(--e-6);
  padding-left: var(--e-4);
  border-left: var(--borde-grueso) solid var(--color-amarillo);
  font-weight: var(--peso-medio);
}

.lista-simple {
  margin: 0 0 var(--e-4);
  padding-left: var(--e-5);
}
.lista-simple li { margin-bottom: var(--e-2); }

.pendiente {
  display: inline-block;
  background: var(--color-aviso-fondo);
  color: var(--color-aviso);
  font-size: var(--fs-menor);
  font-weight: var(--peso-medio);
  line-height: 1.4;
  padding: var(--e-1) var(--e-2);
  border-radius: var(--radio);
}
.pendiente--claro { background: var(--color-aviso-fondo); }

/* Botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--area-tactil);
  padding: var(--e-3) var(--e-6);
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-stretch: 112%;
  font-size: var(--fs-cuerpo);
  letter-spacing: var(--tr-boton);
  text-decoration: none;
  border-radius: var(--radio);
  border: var(--borde-fino) solid transparent;
  transition: background-color var(--dur-rapida) var(--ease),
              color var(--dur-rapida) var(--ease),
              border-color var(--dur-rapida) var(--ease);
}

.boton--principal {
  background: var(--color-amarillo);
  color: var(--color-texto);
  min-height: 56px;
  padding-inline: var(--e-7);
}
.boton--principal:hover {
  background: var(--color-amarillo-hondo);
  color: var(--color-texto);
}

.boton--secundario {
  background: transparent;
  color: var(--color-morado);
  border-color: var(--color-borde);
}
.boton--secundario:hover {
  background: var(--color-morado);
  color: var(--color-blanco);
  border-color: var(--color-morado);
}

/* Elemento firma: los tres puntos */

.puntos {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  flex-shrink: 0;
}
.puntos span {
  width: 9px;
  height: 9px;
  border-radius: var(--radio-pildora);
  background: var(--color-amarillo);
  animation: latido var(--dur-latido) var(--ease) infinite;
}
.puntos span:nth-child(2) { animation-delay: 180ms; }
.puntos span:nth-child(3) { animation-delay: 360ms; }
.puntos--morado span { background: var(--color-morado); }

@keyframes latido {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Revelado en scroll */

.revelar {
  opacity: 0;
  transform: translateY(var(--desplazamiento-revelado));
  transition: opacity var(--dur-media) var(--ease), transform var(--dur-media) var(--ease);
}
.revelar.esta-visible { opacity: 1; transform: none; }

/* --- Hero ---------------------------------------------------- */

.hero {
  --foco: var(--color-foco-morado);
  position: relative;
  overflow: hidden;
  background: var(--color-morado);
  color: var(--color-blanco);
  padding-block: var(--seccion-alta);
}

.hero__marco { position: relative; z-index: 1; }

.hero__burbuja {
  position: absolute;
  right: -14%;
  bottom: -22%;
  width: min(78vw, 560px);
  height: auto;
  fill: var(--color-amarillo);
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
}

.hero__rotulo {
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tr-rotulo);
  line-height: var(--lh-rotulo);
  text-transform: uppercase;
  color: var(--color-sobre-morado);
  margin-bottom: var(--e-5);
}

.hero__titulo {
  font-size: var(--fs-h1);
  line-height: var(--lh-titular);
  letter-spacing: var(--tr-titular);
  color: var(--color-blanco);
  max-width: 16ch;
}

.hero__bajada {
  margin-top: var(--e-5);
  max-width: 56ch;
  color: var(--color-sobre-morado);
}

.hero__accion { margin-top: var(--e-6); }

.estado {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
  font-family: var(--fuente-display);
  font-weight: var(--peso-fuerte);
  font-stretch: 112%;
  font-size: var(--fs-menor);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-amarillo);
}

.hero__nota {
  margin-top: var(--e-4);
  font-size: var(--fs-menor);
  color: var(--color-sobre-morado);
}
.hero__nota a { color: var(--color-blanco); text-underline-offset: 3px; }

/* --- Isla de logos institucionales --------------------------- */

.isla-logos {
  background: var(--color-blanco);
  padding-block: var(--seccion-media);
  box-shadow: var(--sombra-isla);
}

/* En celular el logo del curso va solo arriba y los cuatro institucionales
   debajo, en rejilla de dos por dos: caben más grandes y no queda uno
   suelto en la última fila. */
.isla-logos__fila {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  align-items: center;
  gap: var(--e-5) var(--e-6);
}
.isla-logos__fila img { height: 72px; width: auto; }
.isla-logos__curso { grid-column: 1 / -1; }
.isla-logos__separador { display: none; }

.isla-logos__separador {
  width: var(--borde-fino);
  height: var(--e-6);
  background: var(--color-filete);
}

.isla-logos__pie {
  margin: 0;
  grid-column: 1 / -1;
  max-width: 34ch;
  font-size: var(--fs-rotulo);
  line-height: var(--lh-rotulo);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

/* --- Cinta de datos ------------------------------------------ */

.datos {
  background: var(--color-superficie);
  padding-block: var(--seccion-corta);
  border-bottom: var(--borde-fino) solid var(--color-filete);
}

.datos__cinta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-5) var(--e-4);
}

.dato {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dato__cifra {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-stretch: 115%;
  font-size: var(--fs-dato);
  line-height: var(--lh-dato);
  letter-spacing: var(--tr-titular);
  margin: 0;
}
.dato__cifra--menor { font-size: calc(var(--fs-dato) * 0.7); }

.dato__pie {
  margin: var(--e-2) 0 0;
  font-size: var(--fs-menor);
  line-height: 1.35;
  color: var(--color-texto-suave);
}

/* --- Por qué -------------------------------------------------- */

.por-que {
  background: var(--color-blanco);
  padding-block: var(--seccion-media);
}

/* --- Para quién (rompe la grilla) ----------------------------- */

.para-quien {
  --foco: var(--color-foco-morado);
  background: var(--color-morado);
  color: var(--color-blanco);
  padding-block: var(--seccion-media);
}

.para-quien__cuerpo { display: grid; gap: var(--e-7); }

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

.perfil {
  display: flex;
  align-items: baseline;
  gap: var(--e-4);
  padding-block: var(--e-3);
  border-bottom: var(--borde-fino) solid var(--color-borde-morado);
  font-family: var(--fuente-display);
  font-weight: var(--peso-fuerte);
  font-stretch: 112%;
  font-size: var(--fs-h3);
  line-height: 1.2;
}
.perfil:first-child { border-top: var(--borde-fino) solid var(--color-borde-morado); }

.perfil__n {
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tr-rotulo);
  color: var(--color-amarillo);
  flex-shrink: 0;
}

.requisitos {
  background: var(--color-morado-hondo);
  padding: var(--e-5);
  border-radius: var(--radio);
}
.requisitos .lista-simple { color: var(--color-sobre-morado); }

/* --- Qué va a aprender ---------------------------------------- */

.aprender {
  background: var(--color-superficie);
  padding-block: var(--seccion-media);
}

.objetivos {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: objetivo;
}

.objetivo {
  display: flex;
  align-items: flex-start;
  gap: var(--e-5);
  padding-block: var(--e-5);
  border-top: var(--borde-fino) solid var(--color-filete);
}
.objetivo:last-child { border-bottom: var(--borde-fino) solid var(--color-filete); }
.objetivo p { margin: 0; font-size: var(--fs-cuerpo-grande); line-height: 1.4; }

.objetivo__n {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-stretch: 115%;
  font-size: var(--fs-dato);
  line-height: 1;
  color: var(--color-morado);
  flex-shrink: 0;
  min-width: 1.4em;
}

/* --- Plan de estudios ----------------------------------------- */

.plan {
  background: var(--color-blanco);
  padding-block: var(--seccion-alta);
}

.modulos {
  list-style: none;
  margin: 0 0 var(--e-7);
  padding: 0;
  border-top: var(--borde-fino) solid var(--color-filete);
}

/* Filas, no tarjetas: cada módulo ocupa el ancho y cambia de peso. */
.modulo {
  display: grid;
  gap: var(--e-2);
  padding: var(--e-5) 0;
  border-bottom: var(--borde-fino) solid var(--color-filete);
}
.modulo:nth-child(2) {
  background: var(--color-superficie);
  padding-inline: var(--e-5);
  margin-inline: calc(-1 * var(--e-5));
}

.modulo__n {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-stretch: 115%;
  font-size: var(--fs-dato);
  line-height: 1;
  letter-spacing: var(--tr-titular);
  color: var(--color-morado);
  margin: 0;
}
.modulo:nth-child(2) .modulo__n { color: var(--color-amarillo-hondo); }
.modulo:nth-child(3) .modulo__n { color: var(--color-morado-hondo); }

.modulo__titulo {
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: var(--tr-titular);
  font-stretch: 112%;
}

.modulo__clases {
  margin: var(--e-2) 0 0;
  font-size: var(--fs-menor);
  color: var(--color-texto-suave);
}

.plan__descarga { margin: 0; }

/* --- Metodología y evaluación ---------------------------------- */

.metodologia {
  background: var(--color-superficie);
  padding-block: var(--seccion-media);
}

.metodologia__reja { display: grid; gap: var(--e-7); }

.evaluacion {
  background: var(--color-blanco);
  border: var(--borde-fino) solid var(--color-filete);
  padding: var(--e-5);
}
.evaluacion .rotulo { margin-top: var(--e-5); }
.evaluacion .rotulo:first-child { margin-top: 0; }

.lista-evaluacion {
  list-style: none;
  margin: 0 0 var(--e-4);
  padding: 0;
}
.lista-evaluacion li {
  display: flex;
  align-items: baseline;
  gap: var(--e-4);
  padding-block: var(--e-3);
  border-bottom: var(--borde-fino) solid var(--color-filete);
}
.lista-evaluacion li:last-child { border-bottom: 0; }

.lista-evaluacion__pct {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-stretch: 115%;
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--color-morado);
  min-width: 3.2em;
}

/* --- Facilitadora (rompe la grilla) ---------------------------- */

.facilitadora {
  --foco: var(--color-foco-morado);
  background: var(--color-morado);
  color: var(--color-blanco);
  padding-block: var(--seccion-media);
}

.facilitadora__reja { display: grid; gap: var(--e-6); }

/* La foto se recorta con la silueta de la burbuja, dibujada para una caja
   4:5 para que no se deforme la cola. */
.retrato { margin: 0; }

.retrato__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 24%;
  background: var(--color-morado-hondo);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2080%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M6%200H74a6%206%200%200%201%206%206V78a6%206%200%200%201-6%206H34L20%20100V84H6a6%206%200%200%201-6-6V6a6%206%200%200%201%206-6Z'%20fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2080%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M6%200H74a6%206%200%200%201%206%206V78a6%206%200%200%201-6%206H34L20%20100V84H6a6%206%200%200%201-6-6V6a6%206%200%200%201%206-6Z'%20fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.retrato figcaption { margin-top: var(--e-3); }

.lista-formacion { margin-top: var(--e-2); }

.facilitadora__nombre {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-stretch: 112%;
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--color-amarillo);
  margin-bottom: var(--e-4);
}
/* El color va por herencia, no sobre cada <p>: así un aviso pendiente
   conserva el suyo sin pelear por especificidad. */
.facilitadora__texto { color: var(--color-sobre-morado); }

/* --- Lista de espera y formulario ------------------------------ */

.lista {
  background: var(--color-blanco);
  padding-block: var(--seccion-alta);
}

.formulario { margin-top: var(--e-6); }

.formulario__caja {
  position: relative;
  min-height: var(--alto-formulario);
  background: var(--color-superficie);
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--e-5);
}

.formulario__cargando {
  position: absolute;
  inset: var(--e-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  margin: 0;
  font-size: var(--fs-menor);
  color: var(--color-texto-suave);
}
.formulario__cargando[hidden] { display: none; }

.formulario__fallo {
  margin: var(--e-4) 0 0;
  font-size: var(--fs-menor);
  color: var(--color-error);
}
.formulario__fallo a { color: var(--color-error); }
.formulario__fallo[hidden] { display: none; }

/* --- Preguntas frecuentes --------------------------------------- */

.preguntas {
  background: var(--color-superficie);
  padding-block: var(--seccion-media);
}

.acordeon { border-top: var(--borde-fino) solid var(--color-filete); }

.pregunta { border-bottom: var(--borde-fino) solid var(--color-filete); }

.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--area-tactil);
  padding-block: var(--e-4);
  font-family: var(--fuente-display);
  font-weight: var(--peso-fuerte);
  font-stretch: 112%;
  font-size: var(--fs-h3);
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: "+";
  font-family: var(--fuente-display);
  font-weight: var(--peso-texto);
  font-size: var(--fs-h3);
  color: var(--color-morado);
  flex-shrink: 0;
  transition: transform var(--dur-rapida) var(--ease);
}
.pregunta[open] summary::after { transform: rotate(45deg); }

.pregunta__cuerpo { padding-bottom: var(--e-5); max-width: 62ch; }

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

.pie {
  --foco: var(--color-foco-morado);
  background: var(--color-morado);
  color: var(--color-blanco);
  padding-top: var(--seccion-media);
}

.pie__reja {
  display: grid;
  gap: var(--e-7);
  padding-bottom: var(--seccion-media);
}

.pie__nombre {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-stretch: 112%;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: var(--tr-titular);
  margin-bottom: var(--e-4);
}

.pie__adscripcion,
.pie__horario,
.pie__coordinacion {
  font-size: var(--fs-menor);
  line-height: 1.5;
  color: var(--color-sobre-morado);
}

.pie__bloque p { margin-bottom: var(--e-2); }
.pie__bloque a { color: var(--color-blanco); text-underline-offset: 3px; }

.pie__logos {
  background: var(--color-blanco);
  padding-block: var(--e-5);
}

/* --- CTA flotante (solo móvil) ----------------------------------- */

.cta-flotante {
  position: fixed;
  left: var(--e-4);
  right: var(--e-4);
  bottom: var(--e-4);
  z-index: 15;
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  min-height: 56px;
  padding: var(--e-3) var(--e-5);
  background: var(--color-amarillo);
  color: var(--color-texto);
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-stretch: 112%;
  text-decoration: none;
  border-radius: var(--radio-pildora);
  box-shadow: var(--sombra-flotante);
}
.cta-flotante:hover { color: var(--color-texto); background: var(--color-amarillo-hondo); }
.cta-flotante[hidden] { display: none; }
.cta-flotante .puntos span { animation: none; opacity: 1; }

@media (max-width: 767px) {
  .cta-flotante:not([hidden]) { display: flex; }
}

/* --- Estado de la página (lista de espera / prematrícula) --------- */

:root[data-estado="lista-espera"] [data-cuando="prematricula"] { display: none; }
:root[data-estado="prematricula"] [data-cuando="lista-espera"] { display: none; }

/* --- 768px y más --------------------------------------------------- */

@media (min-width: 768px) {

  .datos__cinta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6); }
  /* Con varias columnas, los pies se alinean abajo y la cinta queda pareja. */
  .dato__pie { margin-top: auto; padding-top: var(--e-2); }

  .para-quien__cuerpo {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--e-8);
  }

  .metodologia__reja {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--e-8);
  }

  .facilitadora__reja {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: var(--e-8);
  }

  .modulo {
    grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--e-6);
  }
  .modulo__clases { margin: 0; text-align: right; white-space: nowrap; }

  .pie__reja { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }

  .formulario__caja { min-height: var(--alto-formulario-ancho); padding: var(--e-6); }

  .isla-logos__fila {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-6);
  }
  .isla-logos__separador { display: block; }
  .isla-logos__pie { flex-basis: auto; margin-left: auto; }
  .isla-logos__fila img { height: 80px; }
}

/* --- 1024px y más -------------------------------------------------- */

@media (min-width: 1024px) {

  .hero { padding-block: var(--seccion-alta); }

  .hero__marco {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--e-6);
    row-gap: var(--e-5);
  }
  .hero__rotulo { grid-column: 1 / -1; }
  .hero__titulo { grid-column: 1 / span 7; max-width: none; }
  .hero__bajada { grid-column: 1 / span 6; margin-top: 0; }
  .hero__accion { grid-column: 9 / -1; grid-row: 2 / span 2; margin-top: var(--e-2); }
  .hero__burbuja { right: -8%; bottom: -34%; width: 620px; }

  .datos__cinta { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* Seis columnas piden una cifra más corta para que ninguna parta en dos. */
  .dato__cifra { font-size: clamp(1.5rem, 1.9vw, 2rem); }
  .dato__cifra--menor { font-size: clamp(1.25rem, 1.5vw, 1.625rem); }

  /* Rompe la grilla: los números de perfil viven en el margen */
  .perfil__n { margin-left: calc(-1 * var(--e-8)); width: var(--e-8); }
  .perfiles { padding-left: var(--e-8); }

  /* Rompe la grilla: el retrato se sale hacia el margen izquierdo */
  .facilitadora__retrato { margin-left: calc(-1 * var(--margen-lateral)); }

  .objetivo { gap: var(--e-7); }

  .isla-logos__fila img { height: 96px; }
  .isla-logos__separador { height: var(--e-8); }
}

/* --- Preferencias de movimiento -------------------------------------- */

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

/* --- Páginas simples (404 y gracias) ---------------------------------- */

.pagina-simple {
  --foco: var(--color-foco-morado);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--color-morado);
  color: var(--color-blanco);
}

.pagina-simple__cuerpo {
  flex-grow: 1;
  display: flex;
  align-items: center;
  padding-block: var(--seccion-media);
}

.pagina-simple__titulo {
  font-size: var(--fs-h1);
  line-height: var(--lh-titular);
  letter-spacing: var(--tr-titular);
  max-width: 18ch;
  margin-bottom: var(--e-5);
}

.pagina-simple__texto {
  max-width: 54ch;
  color: var(--color-sobre-morado);
  margin-bottom: var(--e-6);
}

.pagina-simple__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
}
.pagina-simple__acciones a:not(.boton) {
  color: var(--color-blanco);
  font-size: var(--fs-menor);
  text-underline-offset: 3px;
}

/* --- Área táctil de los enlaces sueltos ------------------------------- */
/* Los enlaces que ocupan su propia línea (contactos del pie, enlace
   secundario del hero) se llevan a 44 px de alto sin cambiar el texto. */

.hero__nota a,
.pie__bloque a,
.pagina-simple__acciones a:not(.boton) {
  display: inline-block;
  padding-block: var(--e-3);
}