/*
  Estilos base del portal: normalización mínima y la estructura común (encabezado, contenido, pie).
  Se carga en Views/_Layout.cshtml, que usan TANTO las páginas de Umbraco COMO las de Angular,
  para que el sitio se vea como uno solo.

  Angular no debe traer su propia normalización ni su propio encabezado: los hereda de aquí.
  Todos los valores salen de tokens.css; aquí no se escribe ni un color ni una medida a mano.

  Diseño «B · Clínica» (DT-011): superficies claras, formas redondeadas, el azul del manual en la
  marca, el verde azulado en las acciones y el rojo sólo donde hay urgencia.
*/

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

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-base);
  font-size: var(--tamano-base);
  line-height: var(--interlineado);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  color: var(--color-primario);
}

a:hover {
  color: var(--color-primario-oscuro);
}

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

/* El foco tiene que verse: es la única pista de posición para quien navega con teclado. */
:focus-visible {
  outline: 2px solid var(--color-primario);
  outline-offset: 2px;
}

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

.portal-encabezado {
  border-bottom: 1px solid var(--color-linea);
  background: var(--color-fondo);
}

.portal-encabezado__interior,
.franja__interior,
.portal-pie__interior {
  width: 100%;
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding-inline: var(--espacio-3);
}

.portal-encabezado__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
  padding-block: var(--espacio-3);
}

.portal-contenido {
  /* Ya NO limita el ancho: eso lo hace .franja__interior. Así cada sección puede pintar
     su color de borde a borde y el contenido sigue centrado por dentro. */
  flex: 1;
}

/* ---------- Patrocinadores (carrusel) ---------- */

/*
  Banda-header de patrocinadores (carrusel por slides) en la parte superior de la portada. Sin
  librerías, sin paso de build. El servidor renderiza todos los logos una sola vez; un JS vanilla
  (ver Inicio.cshtml) activa la presentación paginada añadiendo la clase .portal-patrocinadores--js
  a la raíz.

  MODO BASE (sin JS): mejora progresiva. Los logos quedan en una fila con wrap centrada; el visor
  no recorta y las flechas/puntos permanecen ocultos (atributo "hidden"). Así la portada es usable
  y completa aunque el JS no corra.

  MODO CON JS (.portal-patrocinadores--js): el visor recorta el overflow (ventana de una página) y
  la pista se desplaza con translateX; cada ítem ocupa 100%/--perView del visor (2 móvil, 3 tablet,
  6 escritorio, según breakpoints en el JS). Flechas (posición absoluta) y puntos (uno por página)
  los muestra el JS cuando hay más de una página.

  Solo se usan variables de tokens.css.
*/
.portal-patrocinadores {
  --perView: 2; /* por defecto / móvil; el JS lo sobrescribe por breakpoint. */
  padding-block: var(--espacio-3);
  border-bottom: 1px solid var(--color-linea);
  /*
    SIN fondo propio, desde el 22 de octubre de 2026. Lo tenía blanco mientras la franja que la
    envuelve es teñida, así que la cinta se veía como una tarjeta blanca flotando sobre el tinte
    en vez de como una banda del sitio. El color lo pone la franja, como en el resto de la página.
  */
}

/*
  El rótulo visible de la cinta («Con el apoyo de») se retiró el 27 de octubre de 2026 por
  decisión del PO, cinco días después de ponerlo. Quien use lector de pantalla sigue oyendo el
  nombre de la región por el aria-label de la sección.
*/

/* Ancla de posicionamiento de las flechas: la fila de logos, no la sección entera. */
.portal-patrocinadores__fila {
  position: relative;
}

.portal-patrocinadores__visor {
  width: 100%;
}

/* Modo base (sin JS): fila con wrap centrada, usable sin recorte. */
.portal-patrocinadores__pista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-5);
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-patrocinadores__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logos de altura uniforme; object-fit: contain evita que se deformen. */
.portal-patrocinadores__item img {
  display: block;
  height: 3rem;
  width: auto;
  object-fit: contain;
}

.portal-patrocinadores__item span {
  color: var(--color-texto-tenue);
  font-weight: 600;
}

/* Enlaces accesibles con teclado: foco visible usando el color primario. */
.portal-patrocinadores__item a:focus-visible {
  outline: 2px solid var(--color-primario);
  outline-offset: 2px;
  border-radius: var(--radio);
}

/* --- Modo con JS: presentación paginada --- */
.portal-patrocinadores--js .portal-patrocinadores__visor {
  overflow: hidden; /* ventana que muestra una página a la vez. */
}

.portal-patrocinadores--js .portal-patrocinadores__pista {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0; /* el espaciado lo da el padding de cada celda, para que una página mida 100% exacto. */
  transition: transform 400ms ease;
  will-change: transform;
}

.portal-patrocinadores--js .portal-patrocinadores__item {
  /* Cada ítem ocupa una fracción del visor: una página entera equivale a 100%. */
  flex: 0 0 calc(100% / var(--perView));
  padding-inline: var(--espacio-3);
}

/* Flechas: <button> reales posicionados a los lados del visor. */
.portal-patrocinadores__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--color-linea);
  border-radius: 50%;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-size: var(--tamano-m);
  line-height: 1;
  cursor: pointer;
}

.portal-patrocinadores__flecha--prev {
  left: var(--espacio-2);
}

.portal-patrocinadores__flecha--next {
  right: var(--espacio-2);
}

.portal-patrocinadores__flecha:hover {
  border-color: var(--color-primario);
  color: var(--color-primario);
}

.portal-patrocinadores__flecha:focus-visible {
  outline: 2px solid var(--color-primario);
  outline-offset: 2px;
}

/* Puntos indicadores: fila centrada bajo el visor; uno por página. */
.portal-patrocinadores__puntos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  justify-content: center;
  margin-block-start: var(--espacio-3);
}

.portal-patrocinadores__punto {
  width: 0.6rem;
  height: 0.6rem;
  padding: 0;
  border: 1px solid var(--color-linea);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.portal-patrocinadores__punto--activo,
.portal-patrocinadores__punto[aria-selected="true"] {
  background: var(--color-primario);
  border-color: var(--color-primario);
}

.portal-patrocinadores__punto:focus-visible {
  outline: 2px solid var(--color-primario);
  outline-offset: 2px;
}

/* Movimiento reducido: anula la transición de la pista (el autoplay ya se desactiva en el JS). */
@media (prefers-reduced-motion: reduce) {
  .portal-patrocinadores--js .portal-patrocinadores__pista {
    transition: none;
  }
}

/* ---------- Marca ---------- */

.portal-marca {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  text-decoration: none;
  color: inherit;
}

.portal-marca__logo {
  /* El alto manda: el logotipo es más ancho que alto y así nunca descuadra la cabecera. */
  height: 3.25rem;
  width: auto;
}

.portal-marca__texto {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.portal-marca__sigla {
  font-weight: 800;
  font-size: var(--tamano-m);
  letter-spacing: 0.02em;
  /* El azul del manual: aquí está la identidad, no en los botones. */
  color: var(--color-marca);
}

.portal-marca__descripcion {
  font-size: var(--tamano-s);
  color: var(--color-texto-tenue);
}

/* En pantalla chica se queda sólo el logotipo y la sigla: la descripción no cabe. */
@media (max-width: 40rem) {
  .portal-marca__descripcion {
    display: none;
  }

  .portal-marca__logo {
    height: 2.5rem;
  }
}

/* ---------- Navegación ---------- */

.portal-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
  margin-inline-start: auto;
}

.portal-nav a {
  color: var(--color-texto-tenue);
  text-decoration: none;
  font-weight: 500;
}

.portal-nav a:hover,
.portal-nav a[aria-current="page"] {
  color: var(--color-primario);
}

/*
  El selector lleva el elemento a propósito: `.portal-nav a` (clase + elemento) le gana por
  especificidad a una sola clase, así que `.portal-nav__accion` por su cuenta no alcanzaba y el
  botón salía con el color del texto tenue sobre el fondo verde: 2:1 de contraste, ilegible.
*/
.portal-nav a.portal-nav__accion,
.portal-nav a.portal-nav__accion:hover {
  color: var(--color-primario-contraste);
}

/* Enlace que sólo ven el teclado y los lectores de pantalla, para saltarse el menú. */
.salto-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primario);
  color: var(--color-primario-contraste);
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio);
  z-index: 10;
}

.salto-al-contenido:focus {
  left: var(--espacio-3);
  top: var(--espacio-3);
}

/* ---------- Elementos comunes ---------- */

.boton {
  display: inline-block;
  padding: var(--espacio-2) var(--espacio-4);
  border: 1px solid transparent;
  border-radius: var(--radio-pastilla);
  background: var(--color-primario);
  color: var(--color-primario-contraste);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.boton:hover {
  background: var(--color-primario-oscuro);
  color: var(--color-primario-contraste);
}

.boton--secundario {
  background: transparent;
  border-color: var(--color-linea-fuerte);
  color: var(--color-texto);
}

.boton--secundario:hover {
  background: var(--color-fondo-tenue);
  color: var(--color-texto);
}

/* Distintivo: «Desde 1977», «Nuevo», etc. */
.distintivo {
  display: inline-block;
  padding: var(--espacio-1) var(--espacio-3);
  border-radius: var(--radio-pastilla);
  background: var(--color-primario-tenue);
  color: var(--color-primario-oscuro);
  font-size: var(--tamano-s);
  font-weight: 700;
  letter-spacing: 0.04em;
}

h1 {
  font-family: var(--fuente-titulo);
  font-size: var(--tamano-xl);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.025em;
  margin-block: 0 var(--espacio-3);
}

h2 {
  font-family: var(--fuente-titulo);
  font-size: var(--tamano-l);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-block: var(--espacio-5) var(--espacio-3);
}

/* ---------- Patrocinadores del portal de Angular ---------- */

/*
  OJO: hay DOS patrocinadores en el proyecto y no son el mismo.

   - El CARRUSEL de la portada (clases .portal-patrocinadores*) lo renderiza Umbraco desde el
     contenido; sus estilos están más arriba, en la sección «Patrocinadores (carrusel)». Esa es
     la banda que se ve en el sitio público.
   - Lo de aquí abajo (clases .patrocinadores*) es el componente <app-patrocinadores> de Angular,
     que vive dentro del portal y trae su propia estructura.

  Al componente de Angular sólo se le da el aspecto del sitio: estas reglas son globales y lo
  alcanzan porque Angular usa encapsulación emulada, no shadow DOM. Se estiliza por sus clases y
  NO se toca su código.

  Sus logotipos van atenuados y recuperan color al pasar el puntero: son marcas de terceros y, a
  todo color y en fila, se comerían la jerarquía de la página.
*/
.patrocinadores {
  padding-block: var(--espacio-3);
}

.patrocinadores h2,
.patrocinadores__titulo {
  margin-block: 0 var(--espacio-2);
  font-size: var(--tamano-s);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-texto-tenue);
}

.patrocinadores__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.patrocinadores__logo {
  max-height: 2.5rem;
  width: auto;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 120ms ease, opacity 120ms ease;
}

.patrocinadores__enlace:hover .patrocinadores__logo,
.patrocinadores__enlace:focus-visible .patrocinadores__logo {
  filter: none;
  opacity: 1;
}

.patrocinadores__nombre {
  font-weight: 600;
  color: var(--color-texto-tenue);
}

.patrocinadores__status {
  margin: 0;
  font-size: var(--tamano-s);
  color: var(--color-texto-tenue);
}

.patrocinadores__status--error {
  color: var(--color-error);
}

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

.portada {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-6);
  align-items: flex-start;
  padding-block-end: var(--espacio-6);
}

.portada__texto {
  /* Crece mucho más que el panel, y en pantalla chica el panel baja solo. */
  flex: 999 1 22rem;
  min-width: 0;
  max-width: var(--ancho-lectura);
}

.portada__entrada {
  font-size: var(--tamano-m);
  color: var(--color-texto-tenue);
  margin-block: var(--espacio-3) var(--espacio-5);
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  margin: 0;
}

.portada__panel {
  flex: 1 1 16rem;
  background: var(--color-fondo-tenue);
  border-radius: var(--radio-grande);
  padding: var(--espacio-4);
}

/*
  El título visible del panel («La asociación en números») se retiró el 27 de octubre de 2026 por
  decisión del PO. El panel se sigue entendiendo solo: dos cifras grandes con su leyenda debajo.
  Su nombre accesible lo lleva el aria-label del <aside>, como antes.
*/

.cifra {
  margin-block: 0 var(--espacio-3);
}

.cifra__numero {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-marca);
}

.cifra__texto {
  display: block;
  font-size: var(--tamano-s);
  color: var(--color-texto-tenue);
}

/*
  Las federaciones: mismo renglón de leyenda que una cifra, pero con los nombres debajo en vez
  de un número encima. El título repite el estilo de .cifra__texto a propósito, para que el
  panel se lea como una sola cosa y no como dos bloques distintos pegados.
*/
.federaciones__titulo {
  margin-block: 0 var(--espacio-2);
  font-size: var(--tamano-s);
  color: var(--color-texto-tenue);
}

.federaciones__lista {
  margin: 0;
  /* El sangrado estándar de una lista deja los nombres descolgados del resto del panel. */
  padding-inline-start: var(--espacio-3);
  list-style: none;
}

.federaciones__lista li {
  position: relative;
  margin-block-end: var(--espacio-2);
  font-size: var(--tamano-s);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-texto);
}

.federaciones__lista li:last-child {
  margin-block-end: 0;
}

/*
  Viñeta propia en lugar de la del navegador: un punto del color primario, alineado con la
  primera línea aunque el nombre ocupe dos. list-style quedó en none justo para esto.
*/
.federaciones__lista li::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--espacio-3) * -1);
  inset-block-start: 0.5em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--color-primario);
}

/* ---------- Tarjetas ---------- */

.tarjetas {
  display: grid;
  /* Se acomodan solas: varias columnas en escritorio, una en el teléfono, sin consultas de medios. */
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--espacio-3);
}

.tarjeta {
  display: block;
  padding: var(--espacio-4);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-grande);
  background: var(--color-fondo);
  color: inherit;
  text-decoration: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.tarjeta::before {
  /* Filete de acento: da color a la tarjeta sin teñir el texto. */
  content: "";
  display: block;
  width: 2.25rem;
  height: 4px;
  border-radius: 2px;
  background: var(--color-primario);
  margin-block-end: var(--espacio-3);
}

.tarjeta:hover,
.tarjeta:focus-visible {
  border-color: var(--color-primario);
  box-shadow: var(--sombra);
}

.tarjeta__titulo {
  font-size: var(--tamano-m);
  font-weight: 700;
  margin-block: 0 var(--espacio-2);
}

.tarjeta p {
  margin: 0;
  color: var(--color-texto-tenue);
  font-size: var(--tamano-s);
}

/* ---------- Aviso ---------- */

.aviso {
  max-width: var(--ancho-lectura);
  margin-block-start: var(--espacio-6);
  padding: var(--espacio-4);
  border-radius: var(--radio-grande);
  background: var(--color-fondo-tenue);
}

.aviso h2 {
  margin-block: 0 var(--espacio-2);
  font-size: var(--tamano-m);
}

.aviso p {
  margin: 0;
  color: var(--color-texto-tenue);
}

/* Variante de urgencia: el único lugar donde manda el rojo del manual. */
.aviso--urgente {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
  background: var(--color-urgencia-tenue);
}

.aviso__etiqueta {
  background: var(--color-urgencia-texto);
  color: var(--color-primario-contraste);
  font-size: var(--tamano-s);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--espacio-1) var(--espacio-2);
  border-radius: var(--radio);
  white-space: nowrap;
}

.aviso--urgente p {
  color: var(--color-texto);
}

/* ---------- Páginas institucionales ---------- */

.pagina {
  max-width: var(--ancho-lectura);
}

.pagina__entradilla {
  font-size: var(--tamano-m);
  color: var(--color-texto-tenue);
  margin-block: 0 var(--espacio-5);
}

.pagina__cuerpo h2 {
  padding-top: var(--espacio-3);
  border-top: 1px solid var(--color-linea);
}

.pagina__cuerpo ul {
  padding-inline-start: var(--espacio-4);
}

.pagina__cuerpo li {
  margin-block: var(--espacio-2);
}

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

.portal-pie {
  background: var(--color-pie-fondo);
  color: var(--color-pie-texto);
  font-size: var(--tamano-s);
}

.portal-pie__interior {
  padding-block: var(--espacio-4);
}

.portal-pie a {
  color: var(--color-pie-texto);
}

.portal-pie__nombre {
  font-weight: 700;
  margin-block: 0 var(--espacio-2);
}

.portal-pie__filiaciones,
.portal-pie__legal {
  margin-block: 0 var(--espacio-2);
  color: var(--color-pie-tenue);
}

/* Lista de definición de los medios de contacto (vista IdentidadEmpresa). */
.datos-contacto {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espacio-2) var(--espacio-4);
  margin: 0;
}

.datos-contacto dt {
  font-weight: 700;
  color: var(--color-texto-tenue);
}

.datos-contacto dd {
  margin: 0;
}

/* ---------- Directorio ---------- */

/* El directorio necesita más ancho que una página de lectura: son tarjetas, no párrafos. */
.pagina--ancha {
  max-width: none;
}

.directorio {
  display: grid;
  /* Se acomodan solas: varias columnas en escritorio, una en el teléfono. */
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--espacio-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ficha {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-3);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-grande);
  background: var(--color-fondo);
}

.ficha__foto {
  flex: 0 0 auto;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-fondo-tenue);
}

/* Sin foto, las iniciales. Mejor que un hueco gris o una silueta genérica. */
.ficha__foto--iniciales {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primario-tenue);
  color: var(--color-primario-oscuro);
  font-weight: 800;
  font-size: var(--tamano-m);
  letter-spacing: 0.02em;
}

.ficha__datos {
  min-width: 0;
}

.ficha__nombre {
  margin: 0;
  font-weight: 700;
  color: var(--color-texto);
}

.ficha__puesto {
  margin: 0 0 var(--espacio-2);
  font-size: var(--tamano-s);
  color: var(--color-marca);
  font-weight: 600;
}

/*
  Nivel académico. Deliberadamente más apagado que el puesto: en una tarjeta con cuatro renglones
  seguidos, si todos pesan lo mismo no se distingue cuál es el cargo y cuál el grado.
*/
.ficha__nivel {
  margin: 0 0 var(--espacio-2);
  font-size: var(--tamano-s);
  color: var(--color-texto-tenue);
}

.ficha__contacto {
  margin: 0;
  font-size: var(--tamano-s);
  /* Un correo largo no debe desbordar la tarjeta en el teléfono. */
  overflow-wrap: anywhere;
}

/* ---------- Aparición al desplazarse ---------- */

/*
  Los elementos con .revelar aparecen al entrar en pantalla. Inspirado en los efectos de
  wfme.org, pero sin librerías: un IntersectionObserver de veinte líneas en _Layout.cshtml.

  MEJORA PROGRESIVA, y el orden importa: el contenido se escribe visible y sólo se oculta
  cuando el script confirma que puede animarlo (clase js-activo en <html>). Si el JavaScript
  falla, no carga o el navegador no soporta IntersectionObserver, la página se ve entera. Un
  efecto nunca debe poder esconder el contenido: aquí vive el catálogo, que es el principal
  activo de tráfico orgánico del proyecto.
*/
.js-activo .revelar {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity var(--duracion) var(--curva), transform var(--duracion) var(--curva);
}

.js-activo .revelar--izquierda {
  transform: translateX(-1.5rem);
}

.js-activo .revelar--derecha {
  transform: translateX(1.5rem);
}

.js-activo .revelar.es-visible {
  opacity: 1;
  transform: none;
}

/* Escalonado: los hijos de una rejilla entran uno tras otro, no todos de golpe. */
.js-activo .revelar:nth-child(2) { transition-delay: 90ms; }
.js-activo .revelar:nth-child(3) { transition-delay: 180ms; }
.js-activo .revelar:nth-child(4) { transition-delay: 270ms; }
.js-activo .revelar:nth-child(5) { transition-delay: 360ms; }

/*
  Quien pidió menos movimiento no ve ninguno: nada se oculta y nada se desplaza. No es un
  detalle estético, el movimiento provoca malestar real a parte de las personas.
*/
@media (prefers-reduced-motion: reduce) {
  .js-activo .revelar {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Realce al pasar el puntero ---------- */

.tarjeta,
.ficha {
  transition: border-color 160ms var(--curva), box-shadow 160ms var(--curva), transform 160ms var(--curva);
}

.tarjeta:hover,
.tarjeta:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--sombra-realce);
}

.ficha:hover {
  box-shadow: var(--sombra);
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta:hover,
  .tarjeta:focus-visible {
    transform: none;
  }
}

/* ---------- Portada: bloque de marca ---------- */

/*
  El texto de la portada va sobre un bloque sólido del azul del manual, como el hero de
  wfme.org. Aquí es donde el azul de la marca manda; el verde azulado sigue siendo el color
  de las acciones, así que el botón se mantiene y destaca sobre el azul.
*/
.portada__texto {
  background: var(--color-marca);
  color: var(--color-marca-contraste);
  padding: var(--espacio-6) var(--espacio-5);
  border-radius: var(--radio-grande);
}

.portada__texto h1 {
  color: inherit;
}

.portada__texto .portada__entrada {
  color: var(--color-marca-tenue);
}

/* El distintivo sobre azul: un velo claro en lugar del verde pálido, que ahí no contrasta. */
.portada__texto .distintivo {
  background: var(--color-marca-velo);
  color: var(--color-marca-contraste);
}

/* La acción secundaria se dibuja en claro: sobre azul, el borde gris desaparecía. */
.portada__texto .boton--secundario {
  border-color: var(--color-marca-borde);
  color: var(--color-marca-contraste);
}

.portada__texto .boton--secundario:hover {
  background: var(--color-marca-velo);
  color: var(--color-marca-contraste);
}

/* El panel de cifras queda al lado, en claro, para que el contraste haga el trabajo. */
.portada__panel {
  border: 1px solid var(--color-linea);
}

@media (max-width: 40rem) {
  .portada__texto {
    padding: var(--espacio-5) var(--espacio-4);
  }
}

/* ---------- Sólo para lectores de pantalla ---------- */

/*
  Oculta a la vista sin ocultar a los buscadores ni a los lectores de pantalla. NO se usa
  display:none ni visibility:hidden: esos sí lo esconden de todo el mundo, y entonces la página
  se queda sin encabezado principal.

  El recorte de 1×1 píxel es la técnica estándar; white-space evita que el texto se junte al
  leerlo en voz alta.
*/
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Afiliaciones del pie ---------- */

/*
  Los emblemas de las federaciones y el del aniversario, en el pie oscuro.

  Van sobre placas claras porque sus colores son azul marino y azul —los mismos del pie—, así
  que sueltos sobre el fondo oscuro se perderían. No es decoración: son marcas de terceros y
  tienen que leerse tal como son.
*/
.afiliaciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
  list-style: none;
  margin: 0 0 var(--espacio-3);
  padding: 0;
}

.afiliaciones__item {
  display: inline-flex;
  background: var(--color-fondo);
  border-radius: var(--radio);
  padding: var(--espacio-2);
}

.afiliaciones img {
  display: block;
  height: 3.5rem;
  width: auto;
}

@media (max-width: 40rem) {
  .afiliaciones img {
    height: 3rem;
  }
}

/* ---------- Titular de la portada ---------- */

.portada__titulo {
  /*
    Reparte las líneas de forma pareja en vez de dejar una palabra suelta al final. Donde no
    está soportado simplemente se ignora: el titular se ve igual que antes, no peor.
  */
  text-wrap: balance;
}

/*
  Titular largo: la vista pone esta clase cuando el texto pasa de 60 caracteres. La razón social
  completa ocupaba cuatro renglones en escritorio y ocho en teléfono, cerca de un tercio de la
  pantalla. Baja el tamaño en lugar de recortar el texto: el nombre de la asociación no se abrevia.
*/
.portada__titulo--largo {
  font-size: clamp(1.5rem, 3.4vw, 2.125rem);
  line-height: 1.18;
}

/* ---------- Texto justificado ---------- */

/*
  Justificado a petición del PO, SÓLO en el texto corrido: párrafos y listas de las páginas, la
  entrada de la portada y el aviso.

  hyphens no es opcional aquí. Justificar sin partir palabras obliga al navegador a estirar los
  espacios para cuadrar el renglón, y aparecen los «ríos»: huecos blancos verticales que cruzan
  el párrafo y cansan al leer. Con la partición activada, el navegador reparte mejor y los huecos
  se mantienen normales. Funciona porque <html lang="es"> declara el idioma: sin eso el navegador
  no sabe con qué reglas partir y no parte nada.

  NO se justifican los titulares, el menú, los botones, los rótulos de las cifras ni las
  descripciones de las tarjetas: son textos de una o dos líneas, y ahí justificar sólo consigue
  separar dos palabras de punta a punta.
*/
.pagina__cuerpo p,
.pagina__cuerpo li,
.portada__entrada,
.aviso p {
  text-align: justify;
  hyphens: auto;
}

/* ---------- Marca: tamaño del 22 de octubre de 2026 ---------- */

/*
  El PO pidió la marca un poco más grande y con la razón social completa al lado de la sigla.
  Los tres ajustes van juntos porque dependen entre sí.
*/
.portal-marca__logo {
  height: 4rem;
}

.portal-marca__sigla {
  font-size: 1.5rem;
}

/*
  La razón social mide 93 caracteres: en una sola línea empujaría el menú hasta tirarlo al
  renglón de abajo. Con el ancho limitado cae en dos líneas bajo la sigla y la cabecera se
  mantiene en una sola franja.
*/
.portal-marca__texto {
  max-width: 24rem;
}

@media (max-width: 40rem) {
  .portal-marca__logo {
    height: 3rem;
  }

  .portal-marca__sigla {
    font-size: 1.25rem;
  }
}

/* ---------- Franjas de color ---------- */

/*
  Sistema de bandas: cada sección pinta su fondo de borde a borde y centra su contenido por
  dentro. Es lo que da el ritmo de color de wfme.org con los colores del manual.

  Por qué así y no con el truco de márgenes negativos y 100vw: 100vw incluye el ancho de la
  barra de desplazamiento, así que en escritorio sobresale una franja de unos 15 px y aparece
  desplazamiento horizontal. Sacando el límite de ancho al interior de cada franja no hay
  ninguna medida de ventana en juego y el problema no existe.
*/
.franja {
  width: 100%;
}

.franja__interior {
  padding-block: var(--espacio-6);
}

/* Separación menor para franjas de servicio, como la de patrocinadores. */
.franja--compacta > .franja__interior {
  padding-block: var(--espacio-3);
}

.franja--tenue {
  background: var(--color-fondo-tenue);
}

/* Franja de marca: el azul del manual, de borde a borde. */
.franja--marca {
  background: var(--color-marca);
  color: var(--color-marca-contraste);
}

.franja--marca h1,
.franja--marca h2 {
  color: inherit;
}

/* ---------- La portada sobre la franja de marca ---------- */

/*
  El bloque azul del hero desaparece como tarjeta: ahora el color lo pone la franja entera. El
  texto se queda sin fondo propio y el panel de cifras pasa a ser la pieza clara sobre el azul,
  que es justo el contraste que hace funcionar el hero de la referencia.
*/
.franja--marca .portada__texto {
  background: none;
  padding: 0;
  border-radius: 0;
}

.franja--marca .portada__panel {
  background: var(--color-fondo);
  border-color: transparent;
}

.franja--marca .cifra__numero {
  color: var(--color-marca);
}

.franja--marca .cifra__texto {
  color: var(--color-texto-tenue);
}

/* ---------- Superficies teñidas ---------- */

/*
  Las tarjetas dejan de ser blancas con borde gris. Sobre franja blanca van en tinte; sobre
  franja teñida se invierten a blanco, para que nunca se confundan con su fondo.
*/
.tarjeta {
  background: var(--color-fondo-tenue);
  border-color: transparent;
}

.franja--tenue .tarjeta,
.franja--tenue .ficha {
  background: var(--color-fondo);
  border-color: transparent;
}

.tarjeta:hover,
.tarjeta:focus-visible {
  border-color: var(--color-primario);
}

.ficha {
  background: var(--color-fondo-tenue);
  border-color: transparent;
}

/* El aviso ya vive sobre una franja teñida: se invierte para no desaparecer en ella. */
.franja--tenue .aviso {
  background: var(--color-fondo);
}

/* ---------- Cinta de la página actual ---------- */

/*
  Marca en qué sección estás. Hasta ahora sólo cambiaba el color del texto, que es una señal
  débil: alguien con dificultad para distinguir colores no la percibe. La cinta añade una pista
  de FORMA, que no depende del color.

  Se dibuja con ::after y posición absoluta para que no empuje nada: el renglón del menú mide lo
  mismo con cinta y sin ella, así que al cambiar de página el menú no da un salto.

  El marcador real sigue siendo aria-current="page", que es lo que anuncia un lector de pantalla;
  esto es su equivalente visual, no un adorno aparte.
*/
.portal-nav a {
  position: relative;
  padding-block: var(--espacio-1);
}

.portal-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -0.35rem;
  height: 3px;
  border-radius: 2px;
  background: var(--color-primario);
  /* Escala en el eje X: aparece creciendo desde el centro en lugar de encenderse de golpe. */
  transform: scaleX(0);
  transition: transform 160ms var(--curva);
}

.portal-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Al pasar el puntero se insinúa, para que el menú responda sin competir con la página actual. */
.portal-nav a:hover::after {
  transform: scaleX(1);
  opacity: 0.45;
}

.portal-nav a[aria-current="page"]:hover::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .portal-nav a::after {
    transition: none;
  }
}

/* ---------- Pie centrado y emblemas repartidos ---------- */

/*
  El pie pasa a estar centrado y los emblemas a repartirse de lado a lado, a petición del PO.
  El orden de lectura no cambia: razón social, emblemas, fundación y aviso legal.
*/
.portal-pie__interior {
  text-align: center;
}

.afiliaciones {
  /*
    Centrados y agrupados, en línea con el resto del pie. Se probó repartirlos de lado a lado
    (space-between) y con el texto centrado encima quedaban demasiado sueltos: el ojo los leía
    como tres elementos aislados y no como un grupo.
  */
  justify-content: center;
  gap: var(--espacio-6);
  /* Margen arriba también, porque ya no es el segundo bloque pegado al nombre. */
  margin-block: var(--espacio-4);
}

.afiliaciones img {
  /* Con más sitio alrededor pueden crecer un poco sin apretar el pie. */
  height: 4rem;
}

/* En pantalla angosta se juntan más, para que quepan dos por renglón antes de envolver. */
@media (max-width: 48rem) {
  .afiliaciones {
    gap: var(--espacio-4);
  }

  .afiliaciones img {
    height: 3.25rem;
  }
}