/**
 * Estilos del bloque `ipropanel/faq-accordion` (desktop + mobile).
 *
 * Verificado vía MCP contra Figma: 489:817 (desktop) y 625:6099 (mobile).
 * Reutiliza el patrón visual del dropdown "Recursos técnicos" del header
 * (mismo componente de librería, docs/INTERACTIONS.md §FAQ): card
 * redondeada, sombra `shadow-faq-item`, chevron que rota 180° al abrir
 * y el fix `[hidden] { display: none }` documentado en
 * docs/TECHNICAL.md tras el bug de especificidad hallado en S2.1.
 * Fondo de sección aproximado con 2 velos de gradiente sobre tokens ya
 * existentes (`near-black`, `overlay-scrim`) en vez de replicar los
 * ángulos exactos del diseño — la textura de fondo apenas se percibe
 * bajo el degradado, el contraste del contenido es lo que importa.
 * **S16.3:** esos dos velos eran `::before`/`::after` de la sección y
 * pasaron a elementos reales dentro de `__capas`, ANTES del contenido.
 * El porqué, en el docblock de `render.php` (`RD-07`). Los dos `fade`
 * de los bordes son `RD-05`.
 * Breakpoint único del proyecto: 768px, desktop-first.
 */

.ipropanel-faq-accordion {
	position: relative;
	overflow: hidden;
	background-color: var( --wp--preset--color--near-black );
}

/* Todo lo decorativo vive acá dentro, y `__capas` es hermano ANTERIOR de
   `__inner`: el orden del DOM es lo único que decide qué pinta encima —no hay
   un solo `z-index` en este archivo, ni hace falta— y ese orden es el que
   declara el archivo (`489:818`/`489:819` antes de `489:820`). `RD-07`. */
.ipropanel-faq-accordion__capas {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ipropanel-faq-accordion__fondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.8;
}

.ipropanel-faq-accordion__velo {
	position: absolute;
	inset: 0;
}

.ipropanel-faq-accordion__velo--multiply {
	mix-blend-mode: multiply;
	background-image: linear-gradient( 100deg, transparent 16%, var( --wp--preset--color--near-black ) 75% );
}

.ipropanel-faq-accordion__velo--scrim {
	background-image: linear-gradient( 211deg, transparent 41%, var( --wp--custom--color--overlay-scrim ) 72% );
}

/* `RD-05` — gradación a negro en los dos bordes.
   Alturas del archivo, idénticas en los dos breakpoints: 147 arriba
   (`489:818` / `625:6100`) y 152 abajo (`489:819` / `625:6101`). Van en píxeles
   y no en porcentaje a propósito: el alto de la sección lo decide cuántas
   preguntas cargue el CMS (**R1**, el repeater no tiene tope), así que un
   porcentaje daría una franja distinta con 4 preguntas que con 8. Los 0 % van
   como `transparent` — no hace falta token nuevo, y `settings.color.gradients`
   sigue vacío a propósito. */
.ipropanel-faq-accordion__fade {
	position: absolute;
	inset-inline: 0;
}

.ipropanel-faq-accordion__fade--top {
	inset-block-start: 0;
	height: 147px;
	background-image: linear-gradient( to bottom, var( --wp--preset--color--near-black ), transparent );
}

.ipropanel-faq-accordion__fade--bottom {
	inset-block-end: 0;
	height: 152px;
	background-image: linear-gradient( to top, var( --wp--preset--color--near-black ), transparent );
}

.ipropanel-faq-accordion__inner {
	position: relative;
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
	padding-inline: var( --wp--preset--spacing--section-padding-inline );
	padding-block: 64px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ipropanel-faq-accordion__item {
	border-radius: var( --wp--custom--border-radius--lg );
	box-shadow: var( --wp--preset--shadow--shadow-faq-item );
	overflow: hidden;
}

.ipropanel-faq-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 8px 24px;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: var( --wp--preset--font-size--boton );
	/* 40px literal: es el `leading-[40px]` del componente `Dropdown`
	   (489:858/489:853), y no hay preset de line-height en theme.json.
	   Con `line-height: normal` el trigger medía 33-36px en vez de los
	   56 del frame (hug = 8 + 40 + 8), que es el hallazgo D-18/A-11/C-3.
	   Va como line-height y NO como `height` fija: el contenedor debe
	   seguir siendo hug para no romper el estado abierto. */
	line-height: 40px;
	color: var( --wp--preset--color--neutral-black );
	background-color: var( --wp--custom--color--faq-card-bg );
	/* El efecto glass va en el trigger y en el panel, no en `__item`: ese
	   contenedor tiene `overflow: hidden` para recortar el radio, y un
	   `backdrop-filter` ahí crea un contexto de composición que anula el
	   recorte de las esquinas del panel. */
	backdrop-filter: var( --wp--custom--effect--glass-blur );
	transition: background-color var( --wp--custom--motion--duration-suave ) var( --wp--custom--motion--easing-suave );
}

/* El `<h3>` que envuelve al trigger (S11.3) es semántica pura: existe para
   que las preguntas entren en el índice de encabezados de un lector de
   pantalla. Se neutralizan sus estilos de agente de usuario —margen y
   tamaño de fuente— para que el botón siga midiendo y pesando exactamente
   lo mismo que antes de envolverlo. Cero cambio visual, verificado contra
   el baseline de Home. */
.ipropanel-faq-accordion__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.ipropanel-faq-accordion__trigger[ aria-expanded='true' ] {
	background-color: var( --wp--preset--color--neutral-white );
	color: var( --wp--preset--color--primary-light-blue );
}

/* Hover = `Variant3` del componente `Dropdown` (489:1092, leído vía MCP):
   el fondo pasa de blanco 80 % a blanco sólido; el color del texto NO
   cambia (sigue negro), a diferencia del estado abierto que sí va a
   teal. Es una variante del sistema, no un adorno. `:active` cubre
   tablet/mobile (INTERACTIONS.md §4: sin hover táctil, mismo look al
   presionar). Solo aplica al estado cerrado — el abierto ya es blanco, o sea
   que YA ES el destino del hover: no lleva regla propia y no es un olvido
   (verificado en S11.1).
   Guarda `@media ( hover: hover )` y reglas separadas por S11.1 — el porqué,
   en la forma canónica de `blocks/project-info/style.css`. */
@media ( hover: hover ) {
	.ipropanel-faq-accordion__trigger[ aria-expanded='false' ]:hover {
		background-color: var( --wp--preset--color--neutral-white );
	}
}

.ipropanel-faq-accordion__trigger[ aria-expanded='false' ]:active {
	background-color: var( --wp--preset--color--neutral-white );
}

.ipropanel-faq-accordion__pregunta strong {
	font-weight: 700;
}

/* `RD-06` — el color del chevron sale de tokens, no del respaldo quemado del
   SVG. Cerrado en `neutral-black` (`489:859` / `625:6129`: `stroke="black"`),
   abierto en `badge-teal` (`489:854` / `625:6126`: `#00ADB5`). El porqué de
   `mask` en vez de `<img>`, en el docblock de `render.php`. Se toca también el
   abierto porque el nodo lo declara distinto —y porque hoy es blanco sobre
   blanco, 1,00 : 1 medido. */
.ipropanel-faq-accordion__chevron {
	display: block;
	flex-shrink: 0;
	width: 17px;
	height: 8px;
	background-color: var( --wp--preset--color--neutral-black );
	mask: var( --ipropanel-icono ) no-repeat center / 100% 100%;
	-webkit-mask: var( --ipropanel-icono ) no-repeat center / 100% 100%;
	transition:
		transform var( --wp--custom--motion--duration-estado ) var( --wp--custom--motion--easing-estado ),
		background-color var( --wp--custom--motion--duration-estado ) var( --wp--custom--motion--easing-estado );
}

.ipropanel-faq-accordion__trigger[ aria-expanded='true' ] .ipropanel-faq-accordion__chevron {
	background-color: var( --wp--preset--color--badge-teal );
	transform: rotate( 180deg );
}

.ipropanel-faq-accordion__panel {
	padding: 16px 24px 8px;
	background:
		linear-gradient( var( --wp--custom--color--faq-respuesta-overlay ), var( --wp--custom--color--faq-respuesta-overlay ) ),
		linear-gradient( var( --wp--custom--color--header-backdrop ), var( --wp--custom--color--header-backdrop ) );
	backdrop-filter: var( --wp--custom--effect--glass-blur );
}

.ipropanel-faq-accordion__panel[ hidden ] {
	display: none;
}

/*
 * `DT.16` — el cuerpo de la respuesta desbordaba con una URL larga.
 *
 * Medido en la verificación de S16.3: con texto largo, una URL de 78 caracteres
 * y una palabra de 54, el párrafo se salía **143 px a 414**. No lo introdujo esa
 * fase y **el archivo sí lo declara**: `I489:893;489:856` trae
 * `word-break: break-word`.
 *
 * Se escribe `overflow-wrap: anywhere`, que es el estándar vigente equivalente
 * —`word-break: break-word` está deprecado y sólo sobrevive por compatibilidad—
 * y es además lo que el tema ya usa en `projects-hero` y `sustainability-features`
 * para el mismo problema. Una sola forma de resolverlo en todo el tema.
 *
 * El `overflow: hidden` del `__item` padre RECORTA el desborde en vez de
 * romperlo, así que esto no se veía como texto salido de la caja sino como texto
 * cortado: por eso ninguna sonda funcional lo delataba y hace falta medir
 * `scrollWidth` contra `clientWidth`.
 */
.ipropanel-faq-accordion__respuesta {
	overflow-wrap: anywhere;
	margin: 0 0 16px;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: var( --wp--preset--font-size--boton );
	line-height: 1.6;
	color: var( --wp--preset--color--neutral-white );
}

.ipropanel-faq-accordion__respuesta:last-child {
	margin-bottom: 0;
}

@media ( max-width: 767px ) {
	.ipropanel-faq-accordion__inner {
		/* 40, no 32: `625:6099` declara `py-40` en el frame de 414. */
		padding-block: 40px;
	}

	.ipropanel-faq-accordion__trigger {
		font-size: var( --wp--preset--font-size--footer-body );
	}
}