/* ===========================================================================
   PREGUNTAS FRECUENTES
   Figma: 3896:8542 (escritorio), 3885:8397 (móvil), 3963:9202 (abierta).
   Componente Pregunta: 3571:4053.

   Es la misma tarjeta que el piso de preguntas de las fichas, en claro: mismas
   medidas —relleno 20, radio 12, tesela redonda de 28, pregunta de 16 y
   respuesta de 14— con la paleta del apartado.
   =========================================================================== */

.iacc-preguntas {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ===========================================================================
   EL PISO
   Figma: 3974:10186 (escritorio) y 3974:10609 (móvil).

   La misma lista, envuelta en una sección con su encabezado y su banda verde
   muy claro. Solo aparece cuando el bloque trae título o fondo propio: dentro
   de una pestaña la lista sigue yendo suelta, sin nada de esto.
   =========================================================================== */

.iacc-preguntas-piso {
	padding-block: 48px;
}

.iacc-preguntas-piso--sutil {
	background: var(--wp--preset--color--marca-sutil, #eef6e6);
}

/* La misma banda en gris, para los pisos donde el verde compite con lo que
   tienen al lado (nodo 7628:35783). Solo cambia el fondo: las tarjetas
   blancas, sus bordes y la tesela verde son los mismos. */
.iacc-preguntas-piso--gris {
	background: var(--wp--preset--color--gris-suave, #f5f6f6);
}

/* --- La banda oscura -------------------------------------------------------
   El mismo piso sobre verde muy oscuro. La paleta de las preguntas la pone el
   tono oscuro, que ya existía; aquí van los dos textos de la cabecera, que
   sobre este fondo tienen que darse la vuelta.
   ========================================================================= */
.iacc-preguntas-piso--profundo {
	background: #052027;
}

/* El verde oscuro del antetítulo desaparecería sobre este fondo: sube al claro,
   que es el que usa el tono oscuro para los enlaces y las viñetas. */
.iacc-preguntas-piso--profundo .iacc-preguntas-piso__antetitulo {
	color: var(--wp--preset--color--marca-clara, #97c866);
}

.iacc-preguntas-piso--profundo .iacc-preguntas-piso__titulo {
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-preguntas-piso__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.iacc-preguntas-piso__cabecera {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.iacc-preguntas-piso__antetitulo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;

	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	text-transform: uppercase;
	/* Sobre fondo claro, el verde oscuro: el esmeralda no llega al mínimo. */
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
}

.iacc-preguntas-piso__raya {
	flex: none;
	width: 32px;
	height: 2px;
	background: currentcolor;
}

/* La raya de cierre es del encabezado centrado, que solo existe en escritorio. */
.iacc-preguntas-piso__raya--cierre {
	display: none;
}

.iacc-preguntas-piso__titulo {
	margin: 0;

	font-size: var(--wp--preset--font-size--40, 40px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.015em;
	color: var(--wp--preset--color--texto, #272727);
}

@media (min-width: 992px) {

	.iacc-preguntas-piso {
		padding-block: 72px;
	}

	/* El encabezado se centra y recupera su raya de cierre. */
	.iacc-preguntas-piso__cabecera {
		align-items: center;
		text-align: center;
	}

	.iacc-preguntas-piso__raya--cierre {
		display: block;
	}
}

/* --- La tarjeta ---------------------------------------------------------- */

.iacc-preguntas__item {
	/* 19 con el borde de 1 da los 20 del diseño, y la cerrada mide 68. */
	padding: 19px;
	background: var(--wp--preset--color--neutral-0, #fff);
	border: 1px solid var(--wp--preset--color--gris-claro, #e1e5e5);
	border-radius: 12px;
}

.iacc-preguntas__item:hover {
	border-color: var(--wp--preset--color--gris-borde, #ccd3d4);
}

/* --- La pregunta --------------------------------------------------------- */

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

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

	/* El triángulo que pinta el navegador: la tesela ya dice lo mismo mejor. */
	list-style: none;
}

.iacc-preguntas__pregunta::-webkit-details-marker {
	display: none;
}

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

/* --- La tesela ----------------------------------------------------------- */

.iacc-preguntas__tesela {
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
	background: var(--wp--preset--color--marca-sutil, #eef6e6);
	border-radius: 999px;
	transition: transform .2s ease;
}

.iacc-preguntas__tesela svg {
	width: 16px;
	height: 16px;
}

/*
 * Abierta, el chevrón apunta arriba. Se gira el de abajo en lugar de dibujar
 * otro: es la misma geometría reflejada, como dice el propio icono en el diseño.
 */
.iacc-preguntas__item[open] .iacc-preguntas__tesela {
	transform: rotate(180deg);
}

/* --- La respuesta -------------------------------------------------------- */

.iacc-preguntas__respuesta {
	/* Los 12 de hueco del diseño, contados desde la pregunta. */
	padding-top: 12px;
	font-size: var(--wp--preset--font-size--14, 14px);
	line-height: 1.45;
	color: var(--wp--preset--color--neutral-700, #304b4d);
}

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

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

.iacc-preguntas__respuesta p {
	margin: 0 0 .8em;
}

/*
 * Un rótulo dentro de la respuesta —«Si estudias en IACC»— es una negrita del
 * mismo cuerpo, no un titular: así está en la inspección del diseño. Y por si
 * alguien escribe un encabezado en el editor, aquí se le da esa misma forma:
 * heredado del tema saldría a 28 px dentro de una tarjeta cuyo texto mide 14,
 * y además metería un escalón falso en el índice de la página.
 */
.iacc-preguntas__respuesta :is(h2, h3, h4, h5, h6) {
	margin: 0 0 .4em;

	font-size: inherit;
	font-weight: 700;
	line-height: inherit;
	color: var(--wp--preset--color--texto, #272727);
}

.iacc-preguntas__respuesta :is(h2, h3, h4, h5, h6):not(:first-child) {
	margin-top: 1em;
}

/*
 * Lo mismo para la negrita, que en estas respuestas es casi siempre un rótulo.
 *
 * Antes esto solo alcanzaba a strong:only-child, con la idea de distinguir el
 * rótulo que ocupa su propio párrafo. Pero :only-child mira las etiquetas, no
 * el texto: una negrita en mitad de una frase también es la única etiqueta de
 * su párrafo y se oscurecía igual, mientras que en cuanto había dos negritas
 * ninguna lo era y las dos se quedaban en el gris del cuerpo. El resultado era
 * que el color de una negrita dependía de cuántas hubiera al lado. Van todas
 * del mismo color, que además es el que la hace destacar.
 */
.iacc-preguntas__respuesta strong,
.iacc-preguntas__respuesta b {
	color: var(--wp--preset--color--texto, #272727);
}

/* --- Las listas de una respuesta ---------------------------------------- */

/*
 * Hay respuestas que enumeran —las etapas de un proceso, las funciones de un
 * organismo— y se leen mucho mejor en lista que en un párrafo con puntos y
 * comas. Se les da forma aquí porque el tema no tenía ninguna: sus listas son
 * todas de tarjetas con tesela, y estas son de texto corrido.
 *
 * Siguen siendo listas de verdad, con su <li>: la viñeta se pinta con ::marker,
 * así que un lector de pantalla sigue anunciando «lista de tres elementos». Con
 * un ::before y list-style:none se vería igual y se oiría como un párrafo.
 */
.iacc-preguntas__respuesta :is(ul, ol) {
	margin: .2em 0 .9em;
	/* Sitio para la viñeta sin que el texto pise el borde de la tarjeta. */
	padding-left: 1.4em;
}

.iacc-preguntas__respuesta li {
	padding-left: .2em;
}

/*
 * Los elementos respiran más entre sí que los renglones de dentro: en esta
 * lista cada punto ocupa tres o cuatro líneas, y sin ese aire se leen como un
 * bloque continuo.
 */
.iacc-preguntas__respuesta li + li {
	margin-top: .6em;
}

/* La viñeta, en verde y algo mayor que la del navegador, que casi no se ve. */
.iacc-preguntas__respuesta ul > li::marker {
	color: var(--wp--preset--color--marca, #52a400);
	font-size: 1.1em;
}

/* Y el número de una lista ordenada, en negrita: hace de rótulo del punto. */
.iacc-preguntas__respuesta ol > li::marker {
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
	font-weight: 700;
}

/*
 * Las listas de dentro de otra lista van con guion y menos sangría: repetir el
 * mismo punto en dos niveles no dice cuál cuelga de cuál.
 */
.iacc-preguntas__respuesta li :is(ul, ol) {
	margin: .5em 0 0;
	padding-left: 1.1em;
}

.iacc-preguntas__respuesta li ul > li::marker {
	content: "–  ";
	font-size: 1em;
}

/* Un párrafo dentro de un elemento no lleva el hueco de los de fuera. */
.iacc-preguntas__respuesta li > p {
	margin: 0 0 .4em;
}

.iacc-preguntas__respuesta li > p:last-child {
	margin-bottom: 0;
}

.iacc-preguntas__respuesta a {
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
}

/* --- La paleta oscura ---------------------------------------------------- */

/*
 * La del piso de preguntas de las fichas. Está aquí desde el principio para que
 * el día que se unifiquen los dos no haya que rehacer el bloque.
 */
.iacc-preguntas--oscuro .iacc-preguntas__item {
	background: var(--wp--preset--color--verde-profundo, #033934);
	border-color: #35615d;
}

.iacc-preguntas--oscuro .iacc-preguntas__item:hover {
	border-color: #4a7a75;
}

.iacc-preguntas--oscuro .iacc-preguntas__pregunta {
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-preguntas--oscuro .iacc-preguntas__tesela {
	color: var(--wp--preset--color--neutral-0, #fff);
	background: #35615d;
}

.iacc-preguntas--oscuro .iacc-preguntas__respuesta {
	color: var(--wp--preset--color--gris-claro, #e1e5e5);
}

.iacc-preguntas--oscuro .iacc-preguntas__respuesta a {
	color: var(--wp--preset--color--marca-clara, #97c866);
}

/*
 * La negrita, en blanco.
 *
 * Sobre fondo claro se le da el color del texto principal para que destaque —es
 * más oscura que el párrafo, que va en gris—. Sobre la tarjeta verde eso la
 * dejaba casi invisible: negro sobre verde profundo.
 *
 * Y alcanza a más de lo que parece: «:only-child» no cuenta los nodos de texto,
 * así que la regla de fondo claro no solo pilla el párrafo escrito entero en
 * negrita, sino también una negrita en medio de una frase, que es lo que se
 * estaba viendo.
 */
.iacc-preguntas--oscuro .iacc-preguntas__respuesta strong,
.iacc-preguntas--oscuro .iacc-preguntas__respuesta p > strong:only-child {
	color: var(--wp--preset--color--neutral-0, #fff);
}

/* Sobre el verde profundo, el verde de marca se pierde: se aclara la viñeta. */
.iacc-preguntas--oscuro .iacc-preguntas__respuesta :is(ul, ol) > li::marker {
	color: var(--wp--preset--color--marca-clara, #97c866);
}

/* --- La apertura, animada ------------------------------------------------ */

/*
 * La misma técnica que el piso de las fichas: interpolate-size deja recorrer
 * una altura que no se sabe de antemano, y content-visibility con
 * allow-discrete hace que el contenido no salga de la caja al cerrarse. Donde
 * no se entienda, la pregunta se abre de golpe: se pierde la transición, no el
 * contenido.
 */
@supports (interpolate-size: allow-keywords) and (selector(::details-content)) {

	.iacc-preguntas {
		interpolate-size: allow-keywords;
	}

	.iacc-preguntas__item::details-content {
		block-size: 0;
		overflow: hidden;
		transition:
			block-size .32s cubic-bezier(.4, 0, .2, 1),
			content-visibility .32s allow-discrete;
	}

	.iacc-preguntas__item[open]::details-content {
		block-size: auto;
	}
}

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

	.iacc-preguntas__tesela {
		transition: none;
	}

	@supports (interpolate-size: allow-keywords) and (selector(::details-content)) {

		.iacc-preguntas__item::details-content {
			transition: none;
		}
	}
}

/* --- Numeradas ----------------------------------------------------------- */

/*
 * Los números del diseño los cuenta el CSS y no se escriben en el contenido.
 * Escritos a mano, añadir una pregunta en medio obliga a renumerar las de abajo
 * y basta con que a alguien se le olvide para que la lista diga 1, 2, 2, 4.
 * Con un contador se renumeran solas al añadir, quitar o reordenar.
 *
 * El número queda fuera del texto de la pregunta a propósito: así no entra en lo
 * que se declara como pregunta frecuente para los buscadores, donde un «5.»
 * delante no aporta nada.
 */
.iacc-preguntas--numeradas {
	counter-reset: iacc-pregunta;
}

.iacc-preguntas--numeradas .iacc-preguntas__item {
	counter-increment: iacc-pregunta;
}

.iacc-preguntas--numeradas .iacc-preguntas__pregunta > span:last-child::before {
	content: counter(iacc-pregunta) ". ";
}

/* --- Lo oculto, dentro del editor --------------------------------------- */

/*
 * En el sitio esto no existe: el render no lo pinta. Aquí se enseña apagado y
 * con un rótulo, para que quien edita vea que está preparado pero no publicado
 * y pueda volver a encenderlo. Sin esto, ocultar algo sería perderlo de vista.
 *
 * Los selectores del editor solo existen ahí, así que el sitio no carga nada de
 * este bloque.
 */
.block-editor-block-list__block .iacc-preguntas__item.es-oculto {
	opacity: .45;
}

.block-editor-block-list__block .iacc-preguntas__item.es-oculto .iacc-preguntas__pregunta {
	position: relative;
}

.block-editor-block-list__block .iacc-preguntas__item.es-oculto .iacc-preguntas__pregunta::after {
	content: "OCULTO";
	flex: none;
	align-self: center;
	margin-left: auto;
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	color: #fff;
	background: #b32d2e;
	border-radius: 999px;
}

/* ===========================================================================
   LAS PREGUNTAS CON EL FORMULARIO AL LADO
   Figma: 5597:20035 (escritorio 1240×664) y 5604:24960 (móvil).

   Es el piso «Antes de decidir» de las fichas —assets/css/decidir.css— traído
   a una página. No se reutiliza aquella hoja porque depende de carrera.css, y
   son 64 KB de estilos de ficha para un piso; el marcado es de este bloque y
   la tarjeta del formulario ya viene estilada desde main.css, que es global.

   Se escribe primero la versión móvil y luego se amplía.
   =========================================================================== */

.iacc-preguntas-piso--forma {
	color: var(--wp--preset--color--neutral-0, #fff);
	background: var(--wp--preset--color--neutral-900, #022426);
	background-image: linear-gradient(135.52deg, #082129 7.04%, #033934 73.09%, #089f91 109.83%);
}

/* Sobre la banda oscura, el antetítulo recupera el esmeralda. */
.iacc-preguntas-piso--forma .iacc-preguntas-piso__antetitulo {
	color: var(--wp--preset--color--esmeralda, #2cb45f);
}

.iacc-preguntas-piso--forma .iacc-preguntas-piso__titulo {
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-preguntas-piso--forma .iacc-preguntas-piso__inner {
	gap: 32px;
}

.iacc-preguntas-piso__columna {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

/* --- El cierre bajo las preguntas ---------------------------------------- */

.iacc-preguntas-piso__cierre {
	margin: 0;

	font-size: var(--wp--preset--font-size--16, 16px);
	line-height: 1.55;
	/* Blanco al 80 %: acompaña a las preguntas sin competir con ellas. */
	color: rgb(255 255 255 / 80%);
}

.iacc-preguntas-piso__cierre a {
	color: var(--wp--preset--color--esmeralda-clara, #80d29f);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.iacc-preguntas-piso__cierre a:hover {
	text-decoration-thickness: 2px;
}

/* --- La columna del formulario -------------------------------------------- */

.iacc-preguntas-piso__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

/*
 * El WhatsApp va fuera de la tarjeta blanca y por eso se dibuja en claro: es la
 * segunda vía, no el botón principal.
 */
.iacc-preguntas-piso__wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding-inline: 24px;

	font-size: var(--wp--preset--font-size--16, 16px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--neutral-0, #fff);
	text-decoration: none;
	background: rgb(255 255 255 / 6%);
	border: 1px solid rgb(255 255 255 / 40%);
	border-radius: 12px;
	transition: background-color .2s ease, border-color .2s ease;
}

.iacc-preguntas-piso__wa:hover {
	background: rgb(255 255 255 / 12%);
	border-color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-preguntas-piso__wa:focus-visible {
	outline: 2px solid var(--wp--preset--color--esmeralda-clara, #80d29f);
	outline-offset: 3px;
}

.iacc-preguntas-piso__aviso {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;

	font-size: var(--wp--preset--font-size--14, 14px);
	line-height: 1.45;
	color: rgb(255 255 255 / 80%);
}

.iacc-preguntas-piso__aviso svg {
	flex: none;
	width: 20px;
	height: 20px;
	/* A la altura de la primera línea del texto. */
	margin-top: 1px;
	color: var(--wp--preset--color--esmeralda-clara, #80d29f);
}

/* ===========================================================================
   Escritorio: las preguntas a un lado y el formulario al otro
   =========================================================================== */

@media (min-width: 992px) {

	.iacc-preguntas-piso--forma {
		padding-block: 64px;
	}

	.iacc-preguntas-piso--forma .iacc-preguntas-piso__inner {
		display: grid;
		/* 612 de preguntas y 557 de tarjeta, con 32 de hueco: los del diseño. */
		grid-template-columns: minmax(0, 612px) minmax(0, 557px);
		justify-content: space-between;
		align-items: center;
		gap: 32px;
	}
}

/*
 * Con el formulario al lado, la cabecera vuelve a la izquierda: centrada sobre
 * una columna de 612 que tiene otra al lado se leería como si el piso entero
 * fuera solo ella. Y la raya de cierre es del encabezado centrado, así que
 * también se retira.
 */
@media (min-width: 992px) {

	.iacc-preguntas-piso--forma .iacc-preguntas-piso__cabecera {
		align-items: flex-start;
		text-align: left;
	}

	.iacc-preguntas-piso--forma .iacc-preguntas-piso__raya--cierre {
		display: none;
	}
}