/**
 * Buscador de programas.
 *
 * Figma: 3716:4439 (escritorio), 3757:4321 (móvil), 3735:3881 (estado de
 * continuidad) y 3789:4727 (capa de filtros del móvil).
 *
 * Va después de carrera.css y cuenta con ella para los antetítulos, los títulos
 * de sección y el piso de «por qué IACC».
 *
 * Se escribe primero la versión ancha y se recoge al final, como el resto de
 * las hojas de ficha.
 */

/* ==========================================================================
   Portada
   ========================================================================== */

/*
 * Mismo fondo por capas que las fichas, con una diferencia: aquí la fotografía
 * va a la derecha y sin espejar. El texto ocupa poco —un titular y dos líneas—
 * así que hay sitio de sobra para que la imagen se vea entera.
 */
.iacc-buscador__hero {
	--iacc-buscador-fondo: #06140f;

	position: relative;
	display: flex;
	align-items: center;
	min-height: 359px;
	padding-block: 64px 72px;
	overflow: hidden;
	background: var(--iacc-buscador-fondo);
	color: var(--wp--preset--color--neutral-0, #fff);
}

/* La sangría del fondo, igual que en las fichas: los degradados están
   calibrados sobre una altura mayor que la de la portada. */
.iacc-buscador__fondo {
	position: absolute;
	inset: 0 0 -134px;
}

/*
 * Al 32 % y anclada a la derecha. Aquí no se espeja: el original ya trae al
 * sujeto en ese lado, que es donde no cae el texto.
 */
/* La fotografía ocupa la portada entera y se centra.
   Antes se le reservaba el 73 % de la derecha, dejando el lado del titular en
   negro. Con fotos apaisadas y el sujeto a la derecha aquello cuadraba; con
   cualquier otra se veía el corte justo detrás del titular, que es lo que se
   nota de verdad. Cubriendo todo el ancho, el encuadre deja de depender de que
   la foto venga preparada para un hueco concreto. */
.iacc-buscador__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.32;
	object-fit: cover;
}

.iacc-buscador__aureola,
.iacc-buscador__velo,
.iacc-buscador__fundido {
	position: absolute;
	inset: 0;
}

.iacc-buscador__aureola {
	background:
		radial-gradient(130px 152px at 70% 34%, rgb(48 168 112 / 36%) 0%, rgb(24 84 56 / 18%) 29%, transparent 58%),
		radial-gradient(94px 110px at 24% 74%, rgb(30 128 86 / 22%) 0%, transparent 62%),
		radial-gradient(77px 90px at 99% 80%, rgb(90 176 20 / 18%) 0%, transparent 64%);
}

.iacc-buscador__velo {
	background:
		linear-gradient(110.7deg, #06140f 6.9%, rgb(7 22 17 / 84%) 24.14%, rgb(8 28 21 / 50%) 34.49%, rgb(8 28 21 / 18%) 43.97%, transparent 53.45%),
		linear-gradient(0deg, #06140f 0%, rgb(7 20 15 / 50%) 9%, transparent 24%);
}

.iacc-buscador__fundido {
	background: linear-gradient(180deg, rgb(6 20 15 / 0%) 0%, rgb(6 20 15 / 0%) 42%, rgb(6 20 15 / 35%) 62%, #06140f 83.6%, #06140f 100%);
}

.iacc-buscador__hero-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
	width: 100%;
}

/* Los dos sellos de la portada: informativos, no controles. */
.iacc-buscador__sellos {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iacc-buscador__sellos li {
	padding: 7px 15px;
	font-size: var(--wp--preset--font-size--13, 0.8125rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	text-transform: uppercase;
	background: rgb(255 255 255 / 8%);
	border: 1px solid rgb(255 255 255 / 16%);
	border-radius: 999px;
}

.iacc-buscador__titulo {
	max-width: 820px;
	margin: 0;
	font-size: clamp(2rem, 1.4rem + 1.9vw, 3rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.iacc-buscador__bajada {
	max-width: 720px;
	margin: -8px 0 0;
	font-size: var(--wp--preset--font-size--18, 1.125rem);
	line-height: 1.55;
	opacity: 0.82;
}

/*
 * La bajada llega del editor, así que puede traer varios párrafos y listas.
 * El primero y el último se pegan al borde para que una bajada de una sola
 * línea mida exactamente lo que medía cuando esto era un <p>.
 */
.iacc-buscador__bajada > :first-child {
	margin-top: 0;
}

.iacc-buscador__bajada > :last-child {
	margin-bottom: 0;
}

.iacc-buscador__bajada p,
.iacc-buscador__bajada ul,
.iacc-buscador__bajada ol {
	margin: 0 0 12px;
}

.iacc-buscador__bajada ul,
.iacc-buscador__bajada ol {
	padding-left: 1.25em;
}

.iacc-buscador__bajada li + li {
	margin-top: 4px;
}

/* La portada va sobre fondo oscuro: el enlace toma el color del texto. */
.iacc-buscador__bajada a {
	color: inherit;
	text-decoration: underline;
}

.iacc-buscador__resumen {
	margin: 0;
	font-size: var(--wp--preset--font-size--13, 0.8125rem);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--gris-borde, #ccd3d4);
}

/* ==========================================================================
   Barra de control
   ========================================================================== */

/*
 * Esta barra recibe el foco al llegar con un ancla, para que quien navega con
 * teclado siga desde aquí y no desde el principio del documento. Es un destino,
 * no un control, así que el recuadro del navegador sobraría. Se anula solo en
 * :focus —el foco que se mueve a mano—, nunca en :focus-visible: lo que sí se
 * pulsa conserva su marca.
 */
[data-iacc-cima]:focus {
	outline: none;
}

.iacc-buscador__barra {
	padding-block: 32px;
	background: var(--wp--preset--color--neutral-0, #fff);
	border-bottom: 1px solid var(--wp--preset--color--gris-claro, #e1e5e5);
}

.iacc-buscador__barra-inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

/* --- El buscador ---------------------------------------------------------- */

.iacc-buscador__fila-busqueda {
	display: flex;
	gap: 24px;
	align-items: center;
	width: 100%;
}

.iacc-buscador__campo {
	position: relative;
	flex: 0 0 520px;
}

.iacc-buscador__input {
	width: 100%;
	height: 52px;
	padding: 0 48px 0 16px;

	font-family: inherit;
	font-size: var(--wp--preset--font-size--16, 1rem);
	line-height: 1.55;
	color: var(--wp--preset--color--texto, #272727);

	background: var(--wp--preset--color--neutral-0, #fff);
	border: 1.5px solid var(--wp--preset--color--gris-borde, #ccd3d4);
	border-radius: 12px;
	appearance: none;
}

/* El placeholder es texto y cumple el contraste: por eso no es más claro. */
.iacc-buscador__input::placeholder {
	color: var(--wp--preset--color--texto-medio, #4e6667);
	opacity: 1;
}

.iacc-buscador__input:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--marca-oscura, #3d7a00);
	border-width: 2px;
}

/* La cruz que algunos navegadores añaden al type="search" descuadra la lupa. */
.iacc-buscador__input::-webkit-search-cancel-button {
	appearance: none;
}

.iacc-buscador__lupa {
	position: absolute;
	top: 50%;
	right: 16px;
	display: grid;
	place-items: center;
	pointer-events: none;
	transform: translateY(-50%);
	color: var(--wp--preset--color--texto-medio, #4e6667);
}

.iacc-buscador__lupa svg {
	width: 20px;
	height: 20px;
}

.iacc-buscador__conteo {
	margin: 0;
	font-size: var(--wp--preset--font-size--16, 1rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--texto, #272727);
}

/* --- El interruptor de continuidad ---------------------------------------- */

/*
 * La casilla real está escondida pero sigue siendo la que manda: recibe el
 * foco, se marca con la barra espaciadora y se anuncia como casilla. Lo que se
 * ve es la etiqueta.
 */
.iacc-buscador__check {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.iacc-buscador__switch {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	cursor: pointer;
}

.iacc-buscador__via {
	position: relative;
	flex: none;
	width: 48px;
	height: 28px;
	background: var(--wp--preset--color--gris-tenue, #ebedee);
	border: 1px solid var(--wp--preset--color--gris-borde, #ccd3d4);
	border-radius: 999px;
	transition: background .15s ease, border-color .15s ease;
}

.iacc-buscador__perilla {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: var(--wp--preset--color--neutral-0, #fff);
	border-radius: 999px;
	box-shadow: 0 1px 3px rgb(8 33 41 / 20%);
	transition: transform .18s ease;
}

.iacc-buscador__check:checked + .iacc-buscador__switch .iacc-buscador__via {
	background: var(--wp--preset--color--marca-oscura, #3d7a00);
	border-color: var(--wp--preset--color--marca-oscura, #3d7a00);
}

.iacc-buscador__check:checked + .iacc-buscador__switch .iacc-buscador__perilla {
	transform: translateX(20px);
}

.iacc-buscador__check:focus-visible + .iacc-buscador__switch .iacc-buscador__via {
	outline: 2px solid var(--wp--preset--color--marca-oscura, #3d7a00);
	outline-offset: 3px;
}

/* En pantalla ancha la ayuda va al lado del título, separada por un punto. */
.iacc-buscador__switch-textos {
	display: flex;
	gap: 8px;
	align-items: baseline;
}

.iacc-buscador__switch-titulo {
	font-size: var(--wp--preset--font-size--16, 1rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--neutral-700, #304b4d);
}

.iacc-buscador__switch-ayuda {
	font-size: var(--wp--preset--font-size--14, 0.875rem);
	line-height: 1.45;
	color: var(--wp--preset--color--texto-medio, #4e6667);
}

.iacc-buscador__switch-ayuda::before {
	content: "· ";
}

/* --- Los filtros ---------------------------------------------------------- */

/* El botón que abre la capa solo existe en el formato pequeño. */
.iacc-buscador__abrir-filtros {
	display: none;
}

.iacc-buscador__filtros {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

/* La cabecera y el pie son de la capa: en ancho no hay capa. */
.iacc-buscador__filtros-cabecera,
.iacc-buscador__filtros-pie {
	display: none;
}

/* Más aire entre los dos grupos que entre un rótulo y sus chips: si no, el
   rótulo de abajo parece el pie de la fila anterior. */
.iacc-buscador__filtros-cuerpo {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

/*
 * EL RÓTULO VA ENCIMA, NO AL LADO
 * Al lado obligaba a un nombre de dos palabras para que el ancho fijo de la
 * columna no descuadrara las dos filas de filtros entre sí. Encima, el rótulo
 * dispone de la línea entera: cabe el nombre completo, es el mismo sitio en
 * móvil y en escritorio, y los chips arrancan del margen en las dos filas.
 */
.iacc-buscador__grupo {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	border: 0;
}

.iacc-buscador__grupo[hidden] {
	display: none;
}

/* Es un encabezado de sección, pero no se ve como tal: el tamaño y el peso son
   los del rótulo del diseño, que es lo que sigue siendo para quien mira. */
.iacc-buscador__rotulo {
	flex: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--13, 0.8125rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-medio, #4e6667);
}

/*
 * El texto explicativo que cierra un grupo de filtros, bajo sus botones.
 * Ocupa el ancho entero: el grupo es una caja flexible alineada al principio,
 * así que sin esto el párrafo se encoge a lo que miden sus renglones.
 */
.iacc-buscador__nota {
	align-self: stretch;
	font-size: var(--wp--preset--font-size--16, 1rem);
	line-height: 1.4;
	color: var(--wp--preset--color--texto, #272727);
}

.iacc-buscador__nota > :first-child {
	margin-top: 0;
}

.iacc-buscador__nota > :last-child {
	margin-bottom: 0;
}

.iacc-buscador__nota p,
.iacc-buscador__nota ul,
.iacc-buscador__nota ol {
	margin: 0 0 8px;
}

.iacc-buscador__nota ul,
.iacc-buscador__nota ol {
	padding-left: 1.25em;
}

.iacc-buscador__nota li + li {
	margin-top: 4px;
}

.iacc-buscador__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/*
 * El chip es un botón de dos estados, no un enlace: aria-pressed dice si está
 * puesto, y así un lector de pantalla lo anuncia sin depender del color.
 */
/* Los de escuela son botones y los de tipo enlaces a las otras páginas: se ven
   igual a propósito, porque para quien mira son la misma fila de filtros. De
   ahí que aquí se apague el subrayado y se iguale la caja. */
.iacc-buscador__chip {
	display: inline-flex;
	align-items: center;
	padding: 7px 19px;

	font-family: inherit;
	font-size: var(--wp--preset--font-size--14, 0.875rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--neutral-700, #304b4d);
	text-decoration: none;

	background: var(--wp--preset--color--neutral-0, #fff);
	border: 1px solid var(--wp--preset--color--gris-borde, #ccd3d4);
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.iacc-buscador__chip:hover {
	border-color: var(--wp--preset--color--marca-oscura, #3d7a00);
}

.iacc-buscador__chip.es-activo {
	color: var(--wp--preset--color--neutral-0, #fff);
	background: var(--wp--preset--color--verde-profundo, #033934);
	border-color: var(--wp--preset--color--verde-profundo, #033934);
}

.iacc-buscador__chip:focus-visible {
	outline: 2px solid var(--wp--preset--color--marca-oscura, #3d7a00);
	outline-offset: 2px;
}

/* ==========================================================================
   Resultados
   ========================================================================== */

.iacc-buscador__resultados {
	padding-block: 56px;
	background: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-buscador__rejilla {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iacc-buscador__item[hidden] {
	display: none;
}

/*
 * El catálogo cambia con un desvanecido.
 *
 * Filtrar cambiaba la rejilla de golpe y costaba ver qué había pasado. Se
 * desvanece la lista entera y no cada tarjeta por separado, y la razón es el
 * hueco: una tarjeta que se está yendo sigue ocupando su sitio hasta que
 * termina de desaparecer, así que al filtrar veinticuatro programas a ocho la
 * página se quedaba un rato larga y luego se encogía mil setecientos píxeles
 * de una vez. Más brusco todavía que no animar nada.
 *
 * Así el cambio de tamaño ocurre con la lista invisible, que es cuando no
 * molesta a nadie. La salida es más corta que la entrada: irse rápido y llegar
 * con calma se lee mejor que al revés.
 *
 * La clase la pone el JavaScript; sin él no hay filtros que animar.
 */
.iacc-buscador--vivo .iacc-buscador__rejilla {
	transition: opacity .16s ease-out;
}

/*
 * Quien ha pedido menos movimiento no ve el desvanecido: el cambio es
 * instantáneo, igual que antes. No se pierde nada —el conteo de arriba ya dice
 * cuántos programas quedan—, y una lista que parpadea es justo lo que ese
 * ajuste pide evitar.
 */
@media (prefers-reduced-motion: reduce) {
	.iacc-buscador--vivo .iacc-buscador__rejilla {
		transition: none;
	}
}

.iacc-buscador--vivo .iacc-buscador__rejilla.esta-cambiando {
	opacity: 0;
	transition-duration: .11s;
	/* Mientras se desvanece no se puede pulsar lo que está a punto de irse. */
	pointer-events: none;
}

/*
 * Toda la tarjeta es el enlace, como pide el diseño: no lleva un enlace de
 * texto aparte. El «Ver programa» del pie es parte del enlace, no otro.
 */
.iacc-buscador__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;

	text-decoration: none;
	background: var(--wp--preset--color--neutral-0, #fff);
	border: 1px solid var(--wp--preset--color--gris-claro, #e1e5e5);
	border-radius: 16px;
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.iacc-buscador__card:hover {
	border-color: var(--wp--preset--color--gris-borde, #ccd3d4);
	box-shadow: 0 8px 24px rgb(8 33 41 / 12%);
	transform: translateY(-2px);
}

.iacc-buscador__card:focus-visible {
	outline: 2px solid var(--wp--preset--color--marca-oscura, #3d7a00);
	outline-offset: 3px;
}

.iacc-buscador__card-foto {
	display: block;
	flex: none;
	height: 150px;
	overflow: hidden;
	background: var(--wp--preset--color--gris-suave, #f5f6f6);
}

.iacc-buscador__card-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * El programa que no tiene fotografía.
 *
 * Con el gris de fondo a secas la tarjeta parecía rota —una imagen que no
 * termina de cargar—, así que el hueco se pinta con el verde de marca y la
 * sigla en marca de agua. Ocupa lo mismo que una foto, de modo que la rejilla
 * no se descuadra, y se lee como una decisión y no como un error.
 */
.iacc-buscador__card-foto--vacia {
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, #033934 0%, #022426 100%);
}

.iacc-buscador__card-sigla {
	font-size: 34px;
	font-weight: 700;
	letter-spacing: .16em;
	color: rgb(255 255 255 / 14%);
	text-indent: .16em;
}

.iacc-buscador__card-cuerpo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	padding: 16px 20px 20px;
}

.iacc-buscador__card-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.iacc-buscador__card-chip {
	padding: 4px 8px;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--neutral-700, #304b4d);
	background: var(--wp--preset--color--gris-suave, #f5f6f6);
	border-radius: 999px;
}

.iacc-buscador__card-escuela {
	font-size: var(--wp--preset--font-size--13, 0.8125rem);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
}

/*
 * LA CAJA DEL TÍTULO RESERVA TRES LÍNEAS
 * Lo pide el diseño y resuelve algo concreto: los nombres del catálogo van de
 * dos palabras a doce, y sin una altura fija la rejilla queda escalonada. Tres
 * líneas es lo que ocupa el más largo, así que reservarlas iguala las tarjetas
 * sin truncar a nadie.
 */
.iacc-buscador__card-titulo {
	display: -webkit-box;
	min-height: calc(1.3em * 3);
	overflow: hidden;

	font-size: var(--wp--preset--font-size--16, 1rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--texto, #272727);

	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.iacc-buscador__card-duracion {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: auto;
}

.iacc-buscador__card-plazo {
	font-size: var(--wp--preset--font-size--14, 0.875rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--texto, #272727);
}

.iacc-buscador__card-apoyo {
	font-size: var(--wp--preset--font-size--13, 0.8125rem);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--texto-medio, #4e6667);
}

.iacc-buscador__card-ver {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	font-size: var(--wp--preset--font-size--16, 1rem);
	font-weight: 700;
	line-height: 1.55;
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
}

.iacc-buscador__card-ver svg {
	flex: none;
	width: 18px;
	height: 18px;
	transition: transform .15s ease;
}

.iacc-buscador__card:hover .iacc-buscador__card-ver svg {
	transform: translateX(3px);
}

/* --- Sin resultados y cargar más ------------------------------------------ */

.iacc-buscador__vacio {
	margin: 0;
	padding: 48px 0;
	font-size: var(--wp--preset--font-size--16, 1rem);
	line-height: 1.55;
	color: var(--wp--preset--color--neutral-700, #304b4d);
	text-align: center;
}

.iacc-buscador__mas {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	margin-top: 40px;
}

/*
 * Sin esto el atributo hidden no esconde nada: el display:none del navegador
 * viene de su propia hoja y el display:flex de arriba lo gana. Es la misma
 * guarda que llevan las tarjetas, los grupos de filtros y las capas del
 * encabezado; cada componente que declara display necesita la suya.
 */
.iacc-buscador__mas[hidden] {
	display: none;
}

.iacc-buscador__progreso {
	margin: 0;
	font-size: var(--wp--preset--font-size--13, 0.8125rem);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--texto-medio, #4e6667);
}

/* --- Botones -------------------------------------------------------------- */

.iacc-buscador__boton {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;

	font-family: inherit;
	font-size: var(--wp--preset--font-size--16, 1rem);
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;

	border: 0;
	border-radius: 12px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.iacc-buscador__boton svg {
	flex: none;
	width: 16px;
	height: 16px;
}

.iacc-buscador__boton--primario {
	color: var(--wp--preset--color--neutral-900, #022426);
	background: var(--wp--preset--color--marca, #52a400);
	box-shadow: 0 4px 16px rgb(8 33 41 / 10%);
}

.iacc-buscador__boton--primario:hover {
	background: var(--wp--preset--color--marca-clara, #97c866);
}

.iacc-buscador__boton--contorno {
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
	background: var(--wp--preset--color--neutral-0, #fff);
	border: 1.5px solid var(--wp--preset--color--verde-profundo, #033934);
}

.iacc-buscador__boton--contorno:hover {
	background: var(--wp--preset--color--marca-sutil, #eef6e6);
}

.iacc-buscador__boton:focus-visible {
	outline: 2px solid var(--wp--preset--color--verde-profundo, #033934);
	outline-offset: 2px;
}

/* ==========================================================================
   Ayuda a la decisión
   ========================================================================== */

.iacc-buscador__ayuda {
	padding-block: 72px;
	background: var(--wp--preset--color--marca-sutil, #eef6e6);
}

.iacc-buscador__ayuda-cabecera {
	margin-bottom: 40px;
	text-align: center;
}

.iacc-buscador__caminos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iacc-buscador__camino {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 15px 19px;
	background: var(--wp--preset--color--neutral-0, #fff);
	border: 1px solid var(--wp--preset--color--gris-claro, #e1e5e5);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgb(8 33 41 / 10%);
}

.iacc-buscador__camino-tesela {
	display: grid;
	flex: none;
	place-items: center;
	width: 56px;
	height: 56px;
	color: var(--wp--preset--color--esmeralda, #2cb45f);
	background: var(--wp--preset--color--verde-profundo, #033934);
	border-radius: 12px;
}

.iacc-buscador__camino-tesela svg {
	width: 28px;
	height: 28px;
}

.iacc-buscador__camino-cuerpo {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.iacc-buscador__camino-titulo {
	font-size: var(--wp--preset--font-size--16, 1rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--texto, #272727);
}

.iacc-buscador__camino-texto {
	font-size: var(--wp--preset--font-size--14, 0.875rem);
	line-height: 1.45;
	color: var(--wp--preset--color--neutral-700, #304b4d);
}

.iacc-buscador__ayuda-accion {
	margin: 40px 0 0;
	text-align: center;
}

/* ==========================================================================
   Por debajo de 1024
   ========================================================================== */

@media (max-width: 1023px) {

	.iacc-buscador__hero {
		min-height: 0;
		padding-block: 32px;
	}

	.iacc-buscador__fondo {
		inset: 0 0 -107px;
	}

	.iacc-buscador__hero-inner {
		gap: 20px;
	}

	.iacc-buscador__bajada {
		margin-top: -4px;
		font-size: var(--wp--preset--font-size--16, 1rem);
		line-height: 1.45;
	}

	.iacc-buscador__barra {
		padding-block: 20px;
	}

	.iacc-buscador__barra-inner {
		gap: 16px;
	}

	/* El buscador ocupa el ancho y el recuento baja junto al botón de filtros. */
	.iacc-buscador__fila-busqueda {
		display: block;
	}

	.iacc-buscador__campo {
		flex: none;
	}

	.iacc-buscador__input {
		height: 48px;
	}

	.iacc-buscador__fila-busqueda .iacc-buscador__conteo {
		display: none;
	}

	/* La ayuda del interruptor pasa a una segunda línea. */
	.iacc-buscador__switch-textos {
		flex-direction: column;
		gap: 2px;
		align-items: flex-start;
	}

	.iacc-buscador__switch-titulo {
		font-size: var(--wp--preset--font-size--14, 0.875rem);
		color: var(--wp--preset--color--texto, #272727);
	}

	.iacc-buscador__switch-ayuda::before {
		content: none;
	}

	/*
	 * EL BOTÓN DE FILTROS Y SU CAPA
	 * Los filtros no caben en una barra de 350 px, así que se guardan tras un
	 * botón. Es el mismo marcado que en pantalla ancha: aquí el CSS lo saca del
	 * flujo y lo pone en una capa a pantalla completa.
	 */
	.iacc-buscador__abrir-filtros {
		display: inline-flex;
		gap: 8px;
		align-items: center;

		min-height: 44px;
		padding: 12px 20px;

		font-family: inherit;
		font-size: var(--wp--preset--font-size--14, 0.875rem);
		font-weight: 700;
		line-height: 1;
		color: var(--wp--preset--color--neutral-700, #304b4d);

		background: var(--wp--preset--color--neutral-0, #fff);
		border: 1px solid var(--wp--preset--color--gris-borde, #ccd3d4);
		border-radius: 999px;
		cursor: pointer;
	}

	.iacc-buscador__abrir-filtros svg {
		width: 20px;
		height: 20px;
	}

	/* El recuento acompaña al botón, que es donde lo pone el diseño pequeño. */
	.iacc-buscador__abrir-filtros + .iacc-buscador__filtros::before {
		content: none;
	}

	.iacc-buscador__filtros {
		position: fixed;
		inset: 0;
		/* Por encima de la cabecera pegajosa, que va a 100: si no, la tapa. */
		z-index: 1001;

		gap: 0;
		background: var(--wp--preset--color--neutral-0, #fff);

		/*
		 * Entra deslizando desde la izquierda, no apareciendo: el gesto dice de
		 * dónde sale la capa y hacia dónde se va al cerrarla, que con un fundido
		 * no se sabe.
		 *
		 * Cerrada no se pinta ni recibe foco. Se usa visibility y no display
		 * porque display: none corta la transición en seco.
		 */
		visibility: hidden;
		transform: translateX(-100%);
		transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility .28s;
	}

	.iacc-buscador__filtros.es-abierta {
		visibility: visible;
		transform: translateX(0);
	}

	.iacc-buscador__filtros-cabecera {
		display: flex;
		gap: 12px;
		align-items: center;
		padding: 16px 20px;
		border-bottom: 1px solid var(--wp--preset--color--gris-claro, #e1e5e5);
	}

	.iacc-buscador__filtros-titulo {
		flex: 1 1 auto;
		margin: 0;
		font-size: var(--wp--preset--font-size--24, 1.5rem);
		font-weight: 700;
		line-height: 1.25;
		letter-spacing: -0.01em;
		color: var(--wp--preset--color--texto, #272727);
	}

	.iacc-buscador__cerrar-filtros {
		display: grid;
		flex: none;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		color: var(--wp--preset--color--texto, #272727);
		background: none;
		border: 0;
		border-radius: 12px;
		cursor: pointer;
	}

	.iacc-buscador__cerrar-filtros svg {
		width: 24px;
		height: 24px;
	}

	.iacc-buscador__filtros-cuerpo {
		flex: 1 1 auto;
		gap: 32px;
		padding: 28px 20px;
		overflow-y: auto;
	}

	.iacc-buscador__chips {
		gap: 8px;
	}

	.iacc-buscador__filtros-pie {
		display: flex;
		gap: 12px;
		padding: 16px 20px;
		background: var(--wp--preset--color--neutral-0, #fff);
		border-top: 1px solid var(--wp--preset--color--gris-claro, #e1e5e5);
	}

	.iacc-buscador__filtros-pie .iacc-buscador__boton {
		flex: 1 1 0;
	}

	/* Con la capa abierta, el fondo no se desplaza. */
	body.iacc-sin-scroll {
		overflow: hidden;
	}

	/* --- Resultados ------------------------------------------------------- */

	.iacc-buscador__resultados {
		padding-block: 32px;
	}

	.iacc-buscador__rejilla {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.iacc-buscador__card-foto {
		height: 180px;
	}

	.iacc-buscador__mas {
		margin-top: 32px;
	}

	.iacc-buscador__mas .iacc-buscador__boton {
		width: 100%;
	}

	/* --- Ayuda a la decisión ---------------------------------------------- */

	.iacc-buscador__ayuda {
		padding-block: 48px;
	}

	.iacc-buscador__ayuda-cabecera {
		margin-bottom: 28px;
		text-align: left;
	}

	.iacc-buscador__caminos {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.iacc-buscador__camino {
		gap: 12px;
		align-items: flex-start;
	}

	.iacc-buscador__camino-tesela {
		width: 48px;
		height: 48px;
	}

	.iacc-buscador__camino-tesela svg {
		width: 24px;
		height: 24px;
	}

	.iacc-buscador__ayuda-accion .iacc-buscador__boton {
		width: 100%;
	}
}

/* Entre 1024 y 1280 no caben cuatro columnas con este ancho de tarjeta. */
@media (min-width: 1024px) and (max-width: 1279px) {

	.iacc-buscador__rejilla {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {

	.iacc-buscador__card,
	.iacc-buscador__card-ver svg,
	.iacc-buscador__perilla,
	.iacc-buscador__via,
	.iacc-buscador__filtros {
		transition: none;
	}

	/* La capa aparece en su sitio en vez de entrar deslizando. */
	.iacc-buscador__filtros {
		transform: none;
	}

	.iacc-buscador__card:hover {
		transform: none;
	}
}

/* El rótulo que encabeza la rejilla. Mismo aspecto que los de los filtros —es
   la misma clase— y solo se le da el aire que lo separa de la fila de botones
   de arriba y de las tarjetas de abajo. */
.iacc-buscador__rotulo--listado {
	margin: 0 0 16px;
}

.iacc-buscador__rotulo--listado[hidden] {
	display: none;
}