/*
  Miembros.

  Todas las medidas de esta hoja salen de medir los píxeles de los mockups, no
  de estimarlas:

    docs/mockups/miembros/Miembros 1.jpg        escritorio, 1512 px de ancho
    docs/mockups/miembros/Miembros-movil 1.jpg  móvil, 360 px de ancho

  Cada clamp() une esos dos puntos con una recta, así que a 1512 px el diseño
  cae exactamente como en la captura y a 360 px también. El máximo se alcanza a
  1440 px, que es donde el sitio deja de crecer.
*/

/* ---------- Cabecera ---------- */

/*
  Medido en el mockup de escritorio (coordenadas desde el borde superior de la
  página, ya en píxeles CSS):

    mayúscula de "Miembros"      empieza en 169.5   alto 56.5  (Fira Sans 81 px)
    mayúscula de "DE LA RED"     empieza en 250.5   alto 18    (26 px)
    mayúscula de la bajada       empieza en 298     alto  9.5  (13.6 px)
    cresta de la curva                    388.5
    base de la cabecera                   498.5

  Y en el de móvil: 128.5 / 163 / 190.5, cresta 242.5, base 264.5.
*/
.miembros-header {
	/*
	  layout.css sube la primera sección por debajo del navbar con un margen
	  negativo y le devuelve el hueco con este padding. Aquí se cambia el
	  valor, no la regla: así el degradado empieza en el borde de la página y
	  el navbar transparente lo deja ver.
	*/
	--primera-seccion-pt: calc(var(--navbar-h) + clamp(3.48rem, 1.13vw + 3.23rem, 4.25rem));

	position: relative;
	padding-bottom: clamp(3.96rem, 11.52vw + 1.36rem, 11.74rem);
	background-image: var(--grad-miembros);
	text-align: center;
}

.miembros-header__texto {
	/* El texto va por encima de la curva. */
	position: relative;
	z-index: 2;
}

.miembros-header__titulo {
	margin: 0;
	color: var(--bg-dark);
	font-size: clamp(2.125rem, 5.625vw, 5.0625rem); /* 34 px … 81 px */
	line-height: 1;
}

.miembros-header__subtitulo {
	margin: 0.25em 0 0;
	color: var(--cyan-pale);
	font-size: clamp(0.875rem, 1.806vw, 1.625rem); /* 14 px … 26 px */
	line-height: 1.1;
	text-transform: uppercase;
}

/*
  La bajada va en minúsculas en el HTML y se sube a mayúsculas aquí: así los
  lectores de pantalla la leen como una frase y no deletreando.
*/
.miembros-header__bajada {
	margin: clamp(0.77rem, 0.81vw + 0.59rem, 1.31rem) 0 0;
	color: var(--text-1);
	font-size: clamp(0.72rem, 0.944vw, 0.85rem); /* 11.5 px … 13.6 px */
	line-height: 1.15;
	text-transform: uppercase;
}

/*
  La curva. Es un SVG a ancho completo, estirado, y su relleno es el color de
  la sección siguiente: no dibuja la curva, dibuja lo que hay debajo de ella.

  `bottom: -1px` tapa la línea de subpíxel que aparece cuando el borde cae
  entre dos píxeles.
*/
.miembros-header__curva {
	position: absolute;
	inset: auto 0 -1px;
	z-index: 1;
	width: 100%;
	height: clamp(1.375rem, 8.15vw - 0.46rem, 6.875rem); /* 22 px … 110 px */
	color: var(--bg-light);
}

/* ---------- Nuestra Comunidad Global ---------- */

/*
  Medido en el mockup de escritorio (1512 px de ancho), en píxeles CSS:

    sección                    760 de alto, 265 arriba y 112.5 abajo
    columnas                   488 (texto) · 60 de hueco · 798 (mapa y países)
    "Nuestra Comunidad Global" 31 px   ·  subtítulo 16 px  ·  párrafo 13 px
    tarjeta de país            226.5 × 55, radio 12, sin sombra
    bandera                    35 de diámetro, a 8.5 del borde
    rejilla                    3 columnas, hueco 60 y 10.5

  El mapa mide 917 de ancho: se sale 52 por la izquierda de su columna y 67
  por la derecha, hasta casi tocar el borde de la pantalla. Por eso está en
  porcentajes de su columna y no en la rejilla.
*/

.comunidad {
	position: relative;
	isolation: isolate; /* el resplandor no se escapa por encima del navbar */
	padding-top: clamp(4rem, 18.4vw, 16.5625rem);    /* 64 px … 265 px */
	padding-bottom: clamp(3rem, 7.81vw, 7.03125rem); /* 48 px … 112.5 px */
	overflow: clip; /* el mapa desborda su columna; clip recorta sin romper el sticky del navbar */
}

/*
  El resplandor celeste de la esquina inferior izquierda, medido del mockup:
  llega a su punto más fuerte cerca del 5 % del ancho y el 85 % del alto.
  Va a ancho completo para que no se corte en el borde del contenedor.
*/
.comunidad::before {
	content: '';
	position: absolute;
	inset: -8rem calc(50% - 50vw);
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(26rem 20rem at 5% 84%, rgba(60, 130, 170, 0.32), transparent 72%);
}

.comunidad__grid {
	display: grid;
	/* 488 y 798 del mockup, en proporción: así la división aguanta cualquier ancho. */
	grid-template-columns: minmax(0, 488fr) minmax(0, 798fr);
	gap: 3.75rem; /* 60 px */
	align-items: center;
}

/* ---------- La columna de texto ---------- */

.comunidad__titulo {
	margin: 0;
	color: var(--bg-dark);
	font-size: clamp(1.1875rem, 2.153vw, 1.9375rem); /* 19 px … 31 px */
	line-height: 1.2;
}

.comunidad__subtitulo {
	max-width: 26rem;
	margin: 0.875rem 0 0;
	color: var(--text-4);
	font-size: clamp(0.83rem, 1.111vw, 1rem); /* 13.3 px … 16 px */
	font-weight: 700;
	line-height: 1.5;
}

.comunidad__parrafo {
	max-width: 24rem;
	margin: 1rem 0 0;
	color: var(--text-4);
	font-size: 0.8125rem; /* 13 px, fijo: es texto de lectura */
	line-height: 1.67;
}

/* ---------- El mapa y los países ---------- */

/*
  El contenedor común de los dos. Es el que escucha el hover: si lo hiciera el
  mapa, al aparecer las tarjetas encima el cursor saldría del mapa y la
  sección parpadearía en bucle.
*/
.comunidad__visual {
	position: relative;
}

/*
  El mapa está siempre, como impreso en el fondo. No aparece ni desaparece:
  solo baja de intensidad cuando las tarjetas se ponen encima, para que se
  lean sin competir con él.
*/
.comunidad__mapa {
	position: absolute;
	top: 50%;
	left: -6.6%;   /* 52 px de 798 */
	z-index: 0;
	width: 114.9%; /* 917 px de 798 */
	max-width: none;
	height: auto;
	transform: translateY(-50%);
	transition: opacity 0.4s ease;
	pointer-events: none;
}

/*
  El botón cubre toda la zona del mapa, pero va por debajo de las tarjetas:
  con las tarjetas abiertas, los dedos y el teclado llegan al deslizador, y un
  toque fuera de ellas vuelve a cerrar.
*/
.comunidad__interruptor {
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: none;
	cursor: pointer;
}

.comunidad__paises {
	position: relative;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

/* Abierto: por hover en escritorio, por clase (toque o clic) en lo demás. */
.comunidad__visual.is-open .comunidad__paises,
.comunidad__visual:focus-within .comunidad__paises {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.35s ease, visibility 0s;
}

.comunidad__visual.is-open .comunidad__mapa,
.comunidad__visual:focus-within .comunidad__mapa {
	opacity: 0.4;
}

@media (hover: hover) {
	.comunidad__visual:hover .comunidad__paises {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.35s ease, visibility 0s;
	}

	.comunidad__visual:hover .comunidad__mapa {
		opacity: 0.4;
	}
}

/* ---------- La rejilla de países ---------- */

/*
  auto-fill con un mínimo de 220 px: a 798 de ancho salen exactamente las tres
  columnas de 226 del mockup, y en pantallas menores se reacomoda sola, sin
  una regla por cada breakpoint.
*/
.comunidad__rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	column-gap: 3.75rem;  /* 60 px */
	row-gap: 0.65625rem;  /* 10.5 px */
	margin: 0;
	padding: 0;
	list-style: none;
}

.pais {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	height: 55px;
	padding-left: 8.5px;
	padding-right: 10px;
	border-radius: 12px;
	background-color: #FFFFFF;
}

.pais__bandera {
	flex: 0 0 auto;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	object-fit: cover;
}

.pais__datos {
	display: flex;
	flex-direction: column;
	margin-left: auto; /* el bloque se pega a la derecha, como en el mockup */
	text-align: right;
}

.pais__nombre {
	color: var(--bg-dark);
	font-size: 0.9375rem; /* 15 px */
	font-weight: 700;
	line-height: 1.2;
}

.pais__conteo {
	color: var(--text-4);
	font-size: 0.71875rem; /* 11.5 px */
	line-height: 1.2;
}

/* Los puntos del deslizador los crea el JS; en escritorio no se ven. */
.comunidad__puntos {
	display: none;
}

/* ---------- Tablet y móvil: 991 px o menos ---------- */

/*
  Apilado: primero el texto, centrado, y debajo el mapa con los países.

  No hay mockup de esta sección en tablet ni en móvil: el sitio original
  ponía el mapa a pantalla completa y debajo una lista de dieciocho países
  que no terminaba nunca. Aquí el mapa se queda del tamaño de su bloque y la
  lista se vuelve un deslizador de cuatro países por página (decisión de la
  directora, 21/09/2026).
*/
@media (max-width: 991px) {

	.comunidad__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.comunidad__texto {
		text-align: center;
	}

	.comunidad__subtitulo,
	.comunidad__parrafo {
		margin-inline: auto;
	}

	/*
	  El alto mínimo es el que ocupa el mapa: 90vw de contenedor × 1.12 de
	  desborde, dividido por su proporción (1295 / 739). Sin él, en tablet el
	  mapa se saldría por arriba y por abajo del bloque y se metería debajo
	  del texto.
	*/
	.comunidad__visual {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 58vw;
	}

	.comunidad__mapa {
		left: -6%;
		width: 112%;
	}
}

/* ---------- Móvil: 767 px o menos ---------- */

/*
  El deslizador. Cuatro países por página, una página por pantalla.

  Se hace con la propia rejilla: `grid-auto-flow: column` sobre cuatro filas
  llena de cuatro en cuatro hacia el costado, y cada columna mide el ancho
  entero. Así no hace falta envolver cada grupo en su propio elemento ni
  cambiar el HTML entre tamaños.
*/
@media (max-width: 767px) {

	.comunidad__rejilla {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-template-rows: repeat(4, auto);
		grid-auto-columns: 100%;
		column-gap: 1rem;

		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none; /* la barra sobra: para eso están los puntos */
	}

	.comunidad__rejilla::-webkit-scrollbar {
		display: none;
	}

	/* El primero de cada grupo de cuatro es donde se detiene el deslizador. */
	.pais:nth-child(4n + 1) {
		scroll-snap-align: start;
	}

	.comunidad__puntos {
		display: flex;
		justify-content: center;
		gap: 0.25rem;
		margin-top: 0.75rem;
	}

	.comunidad__punto {
		display: grid;
		place-items: center;
		width: 24px;  /* el punto se ve de 8 px, pero se toca en 24 */
		height: 24px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.comunidad__punto::before {
		content: '';
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: rgba(10, 14, 34, 0.25);
		transition: background-color 0.2s ease;
	}

	.comunidad__punto[aria-current="true"]::before {
		background-color: var(--cta);
	}
}

/* ---------- ¿Cómo ser parte de RIAL? ---------- */

/*
  Medido en el mockup de escritorio (1512 px), tomando como cero el borde
  superior de la banda oscura:

    banda oscura        365 de alto  ·  título a 57.5  ·  bajada a 131
    tarjetas            arrancan en 253, o sea 112 por encima del final
                        de la banda; 330 × 209 con 138 de hueco
    la del medio        36 más abajo que las otras dos
    icono               84 de diámetro, centrado en el borde de la tarjeta
    flechas             64 × 31, trazo de 4, a 161.5 del borde de la tarjeta
    botón               42 de alto, 99 por debajo de la tarjeta más baja

  El fondo de la mitad de abajo es --bg-light, como el resto de las secciones
  claras del sitio. El original lo tenía blanco y hacía que la tarjeta, que
  termina en --bg-light, se difuminara contra él. Aquí el desvanecido se
  conserva al revés: la tarjeta termina en --bg-white, un punto más clara que
  el fondo (decisión de la directora, 23/09/2026).
*/

.afiliacion {
	background-color: var(--bg-light);
	padding-bottom: clamp(3.5rem, 6.9vw, 6.25rem);
	text-align: center;
}

.afiliacion__banda {
	/* La banda va a ancho completo; el tope de 1440 lo pone el contenedor. */
	padding-top: 3.125rem;                             /* 50 px */
	padding-bottom: clamp(6.8rem, 10.63vw, 9.5625rem); /* 109 px … 153 px */
	background-color: var(--bg-dark);
	color: var(--text-2);
}

.afiliacion__titulo {
	margin: 0;
	color: var(--text-1);
	font-size: clamp(1.6875rem, 2.22vw, 2rem); /* 27 px … 32 px */
	line-height: 1.2;
}

.afiliacion__intro {
	max-width: 34rem; /* 544 px: el ancho al que corta el mockup */
	margin: clamp(1.5rem, 2.5vw, 2.25rem) auto 0;
	font-size: clamp(0.72rem, 0.55vw + 0.53rem, 0.8125rem); /* 11.5 px … 13 px */
	line-height: 1.67;
}

/* ---------- Los tres pasos ---------- */

/*
  Las tarjetas suben sobre la banda con un margen negativo. El hueco entre
  ellas se guarda en una variable porque las flechas se colocan dentro de él.
*/
.afiliacion__pasos {
	--solape: 7rem; /* 112 px: lo que la tarjeta se monta sobre la banda */
	--hueco: clamp(2.5rem, 9.58vw, 8.625rem); /*  40 px … 138 px */

	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--hueco);

	max-width: 79.125rem; /* 1266 px: 3 × 330 + 2 × 138 */
	margin: calc(var(--solape) * -1) auto 0;
	padding: 0;
	list-style: none;
}

.paso {
	position: relative;
	min-height: 13.0625rem; /* 209 px */
	padding: 3.75rem 1.5625rem 2.5rem; /* 60 arriba (deja sitio al icono), 25 a los lados */
	border-radius: 14px;

	/*
	  La tarjeta es de cristal, pero con un degradado: arriba, blanco al 21 %
	  —y por debajo se ve el fondo oscuro—; abajo, --bg-light opaco. Es lo que
	  mide el mockup, y es lo que hace que el texto de arriba pueda ser blanco
	  y el de abajo oscuro.
	*/
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.21), var(--bg-white));
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

/*
  La del medio va más abajo. Se mueve con transform y no con margen para que
  las tres conserven la misma altura: con margen, la rejilla le restaría al
  alto de la fila justo lo que se desplaza.
*/
.paso:nth-child(2) {
	transform: translateY(2.25rem); /* 36 px */
}

/* El icono se monta a caballo del borde superior de la tarjeta. */
.paso__icono {
	position: absolute;
	top: 0;
	left: 50%;
	display: grid;
	place-items: center;
	width: 5.25rem;  /* 84 px */
	height: 5.25rem;
	border-radius: 50%;
	background-color: var(--hover-cyan);
	color: var(--text-1);
	transform: translate(-50%, -50%);
}

/* La del medio lleva el cian oscuro, como en el diseño original. */
.paso:nth-child(2) .paso__icono {
	background-color: var(--cta);
}

.paso__icono .icono {
	width: 2.25rem; /* 36 px */
	height: auto;
}

.paso__titulo {
	margin: 0;
	color: var(--text-1); /* queda sobre la parte oscura de la tarjeta */
	font-size: clamp(1.3125rem, 1.67vw, 1.5rem); /* 21 px … 24 px */
	line-height: 1.2;
}

/*
  El título de la tarjeta del medio es oscuro, no blanco: al ir 36 px más
  abajo, cae por debajo del corte de la banda y sobre la parte clara de la
  tarjeta. Así está en el mockup, y es lo que lo hace legible.
*/
.paso:nth-child(2) .paso__titulo {
	color: var(--bg-dark);
}

.paso__texto {
	margin: 1rem 0 0;
	color: var(--bg-dark); /* queda sobre la parte clara */
	font-size: 0.8125rem; /* 13 px */
	line-height: 1.65;
}

/*
  Las flechas. Van en la primera y la tercera tarjeta —no en la segunda—
  porque esas dos están a la misma altura: así las dos flechas caen donde el
  mockup las pone, sin tener que descontar el desplazamiento de la del medio.

  Se pintan con una máscara para que el color siga siendo var(--cta) y no un
  color escrito dentro de la imagen.
*/
.paso:nth-child(1)::after,
.paso:nth-child(3)::before {
	content: '';
	position: absolute;
	top: 10.09375rem; /* 161.5 px */
	width: 4rem;      /* 64 px */
	height: 1.9375rem; /* 31 px */
	background-color: var(--cta);
	-webkit-mask-image: var(--flecha);
	mask-image: var(--flecha);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	--flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 31' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 15.5h58'/%3E%3Cpath d='M46 4l14 11.5L46 27'/%3E%3C/svg%3E");
}

.paso:nth-child(1)::after {
	left: calc(100% + (var(--hueco) - 4rem) / 2);
}

.paso:nth-child(3)::before {
	right: calc(100% + (var(--hueco) - 4rem) / 2);
}

/* ---------- El botón ---------- */

.afiliacion__cta {
	/*
	  99 px por debajo de la tarjeta del medio, que es la que baja. Como esa
	  se mueve con transform, la rejilla no sabe que está más abajo: hay que
	  sumar aquí sus 36 px.
	*/
	margin: clamp(4.5rem, 9.4vw, 8.4375rem) 0 0; /* 72 px … 135 px */
}

/*
  El botón del mockup mide 284.5 de ancho para 188.5 de texto: 48 de aire a
  cada lado, el doble que el botón normal del sitio.
*/
.afiliacion__cta .button {
	padding-inline: 3rem;
}

/* ---------- Tablet y móvil ---------- */

@media (max-width: 991px) {

	/*
	  Apilados. Sin flechas: en vertical no explican nada que el orden de las
	  tarjetas no diga ya, y en el mockup de móvil tampoco están.
	*/
	.afiliacion__pasos {
		--solape: 5.5rem; /* 88 px, como en el mockup de móvil */

		grid-template-columns: minmax(0, 1fr);
		gap: 3.5rem; /* sitio de sobra para el icono de la siguiente */
		max-width: none;
	}

	.paso:nth-child(2) {
		transform: none;
	}

	.paso:nth-child(1)::after,
	.paso:nth-child(3)::before {
		content: none;
	}

	/*
	  Apiladas, solo la primera tarjeta se monta sobre la banda oscura: su
	  título puede seguir siendo blanco, pero el de las otras dos tiene que
	  ser oscuro o se pierde sobre el fondo claro. Así está en el mockup de
	  móvil.
	*/
	.paso {
		min-height: 0;
		padding-top: 2.5rem; /* 40 px: el icono también es más chico */
	}

	.paso__titulo {
		color: var(--bg-dark);
	}

	.paso:first-child .paso__titulo {
		color: var(--text-1);
	}

	/* El icono mide 56 en el mockup de móvil, no 84. */
	.paso__icono {
		width: 3.5rem;
		height: 3.5rem;
	}

	.paso__icono .icono {
		width: 1.5rem;
	}

	.afiliacion__cta {
		margin-top: 3.5rem;
	}
}

/* ---------- Nuestros Miembros: el deslizador de logos ---------- */

/*
  Medido en el mockup de escritorio (1512 px):

    columnas          330 (texto) · 50 de hueco · 980 (logos)
    píldora           123.5 × 26, --hover-cyan con texto blanco
    título            31 px, como el de "Nuestra Comunidad Global"
    rejilla de logos  4 columnas × 2 filas, centros cada 245 y cada 164
    logo              200 de ancho; el marco en que vienen diseñados es 3:2

  Los logos se deslizan de ocho en ocho. Una "página" son cuatro columnas de
  dos logos, y el paso del deslizador es justo el ancho visible más el hueco.
*/

.instituciones {
	background-color: var(--bg-light);
	padding-block: clamp(3.5rem, 11.9vw, 11.25rem); /* 56 px … 180 px */
}

.instituciones__grid {
	display: grid;
	grid-template-columns: minmax(0, 330fr) minmax(0, 980fr);
	gap: 3.125rem; /* 50 px */
	align-items: center;
}

/* ---------- La columna de texto ---------- */

.instituciones__pildora {
	display: inline-block;
	margin: 0;
	padding: 0.25rem 1.25rem;
	border-radius: var(--radius-pill);
	background-color: var(--hover-cyan);
	color: var(--text-1);
	font-size: 0.8125rem; /* 13 px */
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
}

.instituciones__titulo {
	margin: 0.875rem 0 0;
	color: var(--bg-dark);
	font-size: clamp(1.1875rem, 2.153vw, 1.9375rem); /* 19 px … 31 px */
	line-height: 1.2;
}

.instituciones__parrafo {
	max-width: 20.5rem; /* 328 px: donde corta el mockup */
	margin: 1.5rem 0 0;
	color: var(--text-4);
	font-size: 0.8125rem; /* 13 px */
	line-height: 1.67;
}

/* ---------- La rejilla que se desliza ---------- */

.instituciones__deslizador {
	--columnas-logos: 4;
	--hueco-logos: 2.8125rem; /* 45 px */
}

/*
  `grid-auto-flow: column` sobre dos filas llena de dos en dos hacia el
  costado, y cada columna mide una cuarta parte de lo que se ve. Es la misma
  técnica del deslizador de países: el HTML no cambia entre tamaños, solo
  cambia cuántas columnas caben.
*/
.instituciones__rejilla {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, auto);
	grid-auto-columns: calc((100% - (var(--columnas-logos) - 1) * var(--hueco-logos)) / var(--columnas-logos));
	column-gap: var(--hueco-logos);
	row-gap: 4rem; /* 64 px */

	margin: 0;
	padding: 0;
	list-style: none;

	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none; /* la barra sobra: para eso están las flechas */
}

.instituciones__rejilla::-webkit-scrollbar {
	display: none;
}

/*
  Cada columna es un punto de parada. Como una página son cuatro columnas
  justas, las flechas siempre caen en el sitio y un deslizado con el dedo se
  queda en una columna entera en vez de a medias.
*/
.logo {
	scroll-snap-align: start;
	display: grid;
	place-items: center;
}

.logo__img {
	width: 100%;
	max-width: 12.5rem; /* 200 px */
	height: auto;
}

/* ---------- Flechas y contador ---------- */

/* Los crea el JS: sin él, la rejilla se sigue deslizando con el dedo. */
.instituciones__controles {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 2.5rem;
}

.instituciones__flecha {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--cta);
	border-radius: 50%;
	background-color: transparent;
	color: var(--cta);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.instituciones__flecha:hover:not(:disabled),
.instituciones__flecha:focus-visible:not(:disabled) {
	background-color: var(--cta);
	color: var(--text-1);
}

.instituciones__flecha:disabled {
	opacity: 0.35;
	cursor: default;
}

.instituciones__flecha svg {
	width: 0.875rem;
	height: 0.875rem;
}

.instituciones__contador {
	margin: 0;
	min-width: 4rem;
	color: var(--text-4);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/*
  Entre 992 y 1200 la columna de los logos se queda en unos 630 px y cuatro
  columnas dejarían cada logo en 124 px, ilegible. Tres columnas mantienen el
  tamaño del mockup.
*/
@media (max-width: 1200px) {

	.instituciones__deslizador {
		--columnas-logos: 3;
	}
}

/* ---------- Tablet y móvil ---------- */

@media (max-width: 991px) {

	.instituciones__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.instituciones__texto {
		text-align: center;
	}

	.instituciones__parrafo {
		margin-inline: auto;
	}

	.instituciones__deslizador {
		--columnas-logos: 3;
		--hueco-logos: 2rem;
	}

	.instituciones__rejilla {
		row-gap: 2.5rem;
	}
}

@media (max-width: 767px) {

	.instituciones__deslizador {
		--columnas-logos: 2;
		--hueco-logos: 1.5rem;
	}
}