/**
 * Piso «Antes de decidir»: preguntas frecuentes y formulario.
 *
 * Figma: 1953:5101 (continuidad) y 3780:4661 (diplomado). Son el mismo piso: la
 * misma columna de 612 con encabezado, preguntas y cierre, y la misma tarjeta de
 * 557 con las tres filas de campos, WhatsApp dentro y el aviso del escudo. Lo
 * único que cambia entre fichas es el contenido.
 *
 * ESTABA DENTRO DE continuidad.css
 * Vivía ahí con el prefijo iacc-cont__ porque solo lo usaba esa ficha. Al
 * entrar también en la de diplomado se saca a su propia hoja con un prefijo
 * neutro: cargar las 1900 líneas de continuidad en el diplomado, para usar
 * doscientas, no compensaba.
 *
 * Va después de carrera.css y cuenta con ella para los antetítulos y la
 * tarjeta del formulario.
 */

/* ==========================================================================
   La sección
   ========================================================================== */

/*
 * El degradado va en diagonal y termina en un verde encendido fuera de cuadro:
 * la esquina inferior derecha, que es donde cae el formulario, queda más viva
 * que el resto. El color plano de debajo es el respaldo por si el degradado no
 * llega a pintarse.
 */
.iacc-decidir {
	padding-block: 64px;
	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%);
}

.iacc-decidir__inner {
	display: flex;
	gap: 32px;
	align-items: center;
	justify-content: space-between;
}

.iacc-decidir__texto {
	display: flex;
	flex: 0 1 612px;
	flex-direction: column;
	gap: 32px;
}

/* Sin preguntas, la columna es un titular y una línea: centrada frente a un
   formulario alto se queda flotando a media altura. Arriba, empieza donde
   empieza la tarjeta y las dos columnas se leen juntas. */
.iacc-decidir--sin-preguntas .iacc-decidir__inner {
	align-items: flex-start;
}

.iacc-decidir--sin-preguntas .iacc-decidir__texto {
	gap: 20px;
	padding-top: 8px;
}

.iacc-decidir .iacc-carrera__antetitulo {
	color: var(--wp--preset--color--esmeralda, #2cb45f);
}

.iacc-decidir .iacc-carrera__raya {
	background: var(--wp--preset--color--esmeralda, #2cb45f);
}

.iacc-decidir__titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--40, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

/* ==========================================================================
   Las preguntas
   ========================================================================== */

.iacc-decidir__faqs {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/*
 * Cada pregunta es una tarjeta con cuerpo propio, no una fila separada por una
 * línea: sobre el degradado hace falta un fondo que la despegue del fondo.
 */
.iacc-decidir__faq {
	/* 19 con el borde de 1 px da los 20 del diseño, y la tarjeta cerrada los 68. */
	padding: 19px;
	background: var(--wp--preset--color--verde-profundo, #033934);
	border: 1px solid #35615d;
	border-radius: 12px;
}

.iacc-decidir__faq-pregunta {
	display: flex;
	gap: 12px;
	align-items: center;
	font-size: var(--wp--preset--font-size--16, 1rem);
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}

/* Safari pinta su propio triángulo si no se le quita por aquí. */
.iacc-decidir__faq-pregunta::-webkit-details-marker {
	display: none;
}

.iacc-decidir__faq-pregunta:focus-visible {
	outline: 2px solid var(--wp--preset--color--esmeralda, #2cb45f);
	outline-offset: 4px;
	border-radius: 4px;
}

/* El chevron vive en una tesela redonda: es el asa de la pregunta. */
.iacc-decidir__faq-icono {
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	color: var(--wp--preset--color--neutral-0, #fff);
	background: #35615d;
	border-radius: 999px;
	transition: transform 0.2s ease;
}

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

.iacc-decidir__faq[open] .iacc-decidir__faq-icono {
	transform: rotate(180deg);
}

/*
 * La respuesta viene del editor y puede traer párrafos, listas o negritas: el
 * hueco entre lo que haya dentro lo pone ella, y cada pieza va sin margen
 * propio, para que dos párrafos y un párrafo con lista debajo respiren igual.
 */
.iacc-decidir__faq-respuesta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 12px 0 0;
	font-size: var(--wp--preset--font-size--14, 0.875rem);
	line-height: 1.45;
	color: var(--wp--preset--color--gris-claro, #e1e5e5);
}

.iacc-decidir__faq-respuesta > * {
	margin: 0;
}

.iacc-decidir__faq-respuesta :is(ul, ol) {
	padding-left: 1.3em;
}

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

.iacc-decidir__faq-respuesta ul li::marker {
	color: var(--wp--preset--color--esmeralda, #2cb45f);
}

/* En blanco entero: sobre esta banda, el gris de alrededor ya es claro y una
   negrita del mismo color no se distingue del resto. */
.iacc-decidir__faq-respuesta :is(strong, b) {
	font-weight: 700;
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-decidir__faq-respuesta a {
	color: var(--wp--preset--color--neutral-0, #fff);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.iacc-decidir__cierre {
	margin: 0;
	font-size: var(--wp--preset--font-size--16, 1rem);
	line-height: 1.55;
	color: var(--wp--preset--color--gris-claro, #e1e5e5);
}

/* Un botón que parece un enlace: abre el asistente, no navega a ninguna parte. */
.iacc-decidir__enlace-chat {
	padding: 0;
	font: inherit;
	font-weight: 700;
	color: var(--wp--preset--color--esmeralda, #2cb45f);
	background: none;
	border: 0;
	cursor: pointer;
}

.iacc-decidir__enlace-chat:hover,
.iacc-decidir__enlace-chat:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   La tarjeta del formulario
   ========================================================================== */

.iacc-decidir__form {
	flex: 0 0 557px;
	padding: 32px;
	background: var(--wp--preset--color--neutral-0, #fff);
	border-radius: 16px;
	box-shadow: 0 4px 16px rgb(8 33 41 / 10%);
}

/* La tarjeta ya pone el fondo y el respiro: la de dentro no los repite. */
.iacc-decidir__form .iacc-form {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.iacc-decidir__form .iacc-form__titulo {
	font-size: var(--wp--preset--font-size--22, 1.375rem);
	line-height: 1.3;
	color: var(--wp--preset--color--neutral-900, #022426);
}

/*
 * El de WhatsApp va en claro: aquí el fondo es blanco y la variante de la
 * portada —pensada para el oscuro— quedaría en verde sobre verde.
 */
.iacc-decidir__wa {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	margin-top: 12px;
	padding: 12px 24px;
	border-radius: 12px;

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

	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);
	transition: background .15s ease;
}

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

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

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

/* La frase de confianza cierra la tarjeta, bajo los dos botones. */
.iacc-decidir__aviso {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 12px 0 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);
}

.iacc-decidir__aviso svg {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--wp--preset--color--marca, #52a400);
}

/* ==========================================================================
   En pantalla estrecha, todo en columna
   ========================================================================== */

@media (max-width: 1023px) {

	.iacc-decidir {
		padding-block: 32px;
		/* En vertical el degradado recorre la columna en lugar de la diagonal. */
		background-image: linear-gradient(97.59deg, #082129 7.04%, #033934 73.09%, #089f91 109.83%);
	}

	.iacc-decidir__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	.iacc-decidir__texto,
	.iacc-decidir__form {
		flex: none;
	}

	.iacc-decidir__titulo {
		font-size: var(--wp--preset--font-size--30, 1.875rem);
		letter-spacing: -0.011em;
	}

	.iacc-decidir__form {
		padding: 20px 16px;
	}

	.iacc-decidir__form .iacc-form__titulo {
		font-size: var(--wp--preset--font-size--20, 1.25rem);
	}
}

/* ==========================================================================
   Las preguntas se despliegan con calma
   ==========================================================================
   Son <details> nativos: el navegador los abre y los cierra de golpe. Se anima
   la caja de contenido que el propio navegador expone, sin envolverla en nada
   ni tocar el marcado.

   Hace falta permitir la interpolación hacia alturas por palabra clave, porque
   lo que se anima va de cero a "lo que ocupe la respuesta", que no se conoce de
   antemano. Donde el navegador no lo soporte, sigue abriendo de golpe: se
   pierde la transición, no el contenido.
   ======================================================================== */

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

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

	.iacc-decidir__faq::details-content {
		block-size: 0;
		overflow: hidden;

		/* content-visibility va con allow-discrete: sin eso el contenido sale de
		   la caja al cerrar y la salida no se llega a ver. */
		transition:
			block-size .32s cubic-bezier(.4, 0, .2, 1),
			content-visibility .32s allow-discrete;
	}

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

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

	.iacc-decidir__faq-icono,
	.iacc-decidir__faq::details-content,
	.iacc-decidir__wa {
		transition: none;
	}
}