/* ==========================================================================
   faq-accordion.css — diseño real del acordeón de Preguntas frecuentes
   (bloque D, punto 8, 2026-09-14), al final de la sección Servicios.
   La neutralización de lo que impone Bootstrap (color primario azul,
   radios, ícono propio, su anillo de foco) vive aparte, en
   components/accordion-reset.css — este archivo no toca ninguna
   variable --bs-*, solo clases propias.

   Ni el plan (`aquila-capital-plan-segmentacion.md`) ni `contenido.md`
   definen este bloque: es contenido nuevo, pedido directo del cliente
   en esta tarea (ver tareas.md, registro de decisiones). Tipografía,
   color, espaciado y los tres estados (cerrado/abierto/hover) son
   decisión de esta pasada, sin referencia visual — pantallazos de los
   tres antes de darlo por bueno, como el resto del proyecto exige
   cuando el diseño no define un estado.

   Estructura:
   <div class="container aq-faq">
     <h3 class="aq-overline aq-faq__antetitulo">Preguntas frecuentes</h3>   (opcional)
     <div class="accordion aq-faq-accordion">
       <div class="accordion-item aq-faq-accordion__item">
         <h4 class="accordion-header">
           <button class="accordion-button collapsed aq-faq-accordion__button" ...>
             <span class="aq-faq-accordion__question">Pregunta</span>
             <i class="bi bi-chevron-down aq-faq-accordion__icon" aria-hidden="true"></i>
           </button>
         </h4>
         <div class="accordion-collapse collapse" ...>
           <div class="accordion-body aq-faq-accordion__body"><p>Respuesta</p></div>
         </div>
       </div>
     </div>
   </div>
   ========================================================================== */

/* --------------------------------------------------------------------
   Cierre de la sección Servicios: la sección se encola con `pb-0`
   porque cada franja de a pares (aq-service-band) ya trae su propio
   margen/padding inferior — pero este bloque es lo último dentro de
   `<section id="servicios">`, así que le repone a la sección el
   padding vertical estándar que `pb-0` le quitó (el mismo token que
   usa cualquier otra sección, no un valor nuevo).
   -------------------------------------------------------------------- */
.aq-faq {
	padding-top: var(--aq-section-padding-y);
	padding-bottom: var(--aq-section-padding-y);
}

/* --------------------------------------------------------------------
   Antetítulo — SOLO antetítulo, sin H2 propio (decisión del cliente:
   este acordeón es el cierre de Servicios, no una sección hermana; un
   H2 acá rompería la jerarquía H2-por-sección/H3-por-producto). Va en
   un <h3> por semántica (necesita nivel de encabezado), con la MISMA
   clase visual `.aq-overline` que usa el antetítulo de cualquier otra
   sección — acá solo se neutraliza lo que un <h3> trae de por sí
   (margen y peso 500 del reboot de Bootstrap) para que el resultado se
   vea IDÉNTICO a un antetítulo normal. Verificado con estilos
   computados contra un <p class="aq-overline"> de referencia.
   -------------------------------------------------------------------- */
.aq-faq__antetitulo {
	margin: 0 0 var(--aq-space-5);
	font-weight: var(--aq-fw-regular);
}

/* --------------------------------------------------------------------
   Ítems — lista con divisores horizontales, sin caja (a propósito
   distinto de aq-card: esto es una lista de preguntas, no un grupo de
   tarjetas). El borde de caja que trae Bootstrap por defecto en cada
   .accordion-item se apaga en accordion-reset.css
   (--bs-accordion-border-width: 0); acá se repone solo como un divisor
   inferior, más el superior en el primer ítem para cerrar la lista por
   arriba.
   -------------------------------------------------------------------- */
.aq-faq-accordion__item {
	border-bottom: var(--aq-border-width) solid var(--aq-gray-border);
}

.aq-faq-accordion__item:first-child {
	border-top: var(--aq-border-width) solid var(--aq-gray-border);
}

/* --------------------------------------------------------------------
   Botón — pregunta + ícono. `.accordion-button` de Bootstrap ya es
   flex/100% ancho; `justify-content` separa los dos extremos sin
   necesitar el `margin-left:auto` que Bootstrap le pone a su propio
   ícono (el nuestro es un <i> real en el HTML, no un ::after).
   Tipografía: Public Sans (no la serif de heading que hereda del <h4>
   envoltorio, igual que el <h4> de aq-check-list — auditoría Fase 4.9),
   tamaño aq-fs-lead (mismo escalón que aq-lead, un paso arriba del
   cuerpo) y semibold (Public Sans SÍ tiene pesos — la restricción de
   "nunca font-weight en un título" es solo para Tiro Bangla). Fondo y
   bordes propios, no los de Bootstrap: `background-color: transparent`
   evita que `--bs-accordion-btn-bg` (heredado del fondo del acordeón)
   se note al no coincidir 1:1 con el color real de --aq-white.
   -------------------------------------------------------------------- */
.aq-faq-accordion__button {
	justify-content: space-between;
	gap: var(--aq-space-4);
	font-family: var(--aq-font-sans);
	font-size: var(--aq-fs-lead);
	font-weight: var(--aq-fw-semibold);
	color: var(--aq-text);
	background-color: transparent;
	transition: color var(--aq-transition-base) var(--aq-ease),
		background-color var(--aq-transition-base) var(--aq-ease);
}

.aq-faq-accordion__button:hover {
	color: var(--aq-gold);
	background-color: color-mix(in srgb, var(--aq-gold) 6%, transparent);
}

/* Estado abierto: mismo color de acento que el hover, para que "abierto"
   se lea como una variación del mismo estado activo, no un tercer color
   distinto. */
.aq-faq-accordion__button:not(.collapsed) {
	color: var(--aq-gold);
}

/* El anillo de foco global (:focus-visible, base/reset.css) alcanza en
   casi todo el sitio sin overrides — acá NO alcanza por sí solo: el
   propio `.accordion-button:focus` de Bootstrap pesa lo mismo que un
   selector de clase + :focus-visible (dos niveles: clase + pseudo-clase)
   y accordion-reset.css lo apaga a "none" para que no compita con dos
   sombras encimadas. Sin esta regla, el foco quedaría invisible en este
   botón. Se repone acá el MISMO valor exacto del anillo global (dos
   colores, para que al menos uno de los dos supere 3:1 contra
   cualquier fondo — ver el cálculo completo en reset.css), duplicado a
   propósito porque reset.css no expone esos dos colores como variable
   propia; si esos valores cambian ahí, cambian acá también. Con
   :focus-visible (no :focus): no se dispara con clic de mouse.
   Verificado tabulando de verdad, no asumido. */
.aq-faq-accordion__button:focus-visible {
	box-shadow:
		0 0 0 2px var(--aq-black-deep),
		0 0 0 4px var(--aq-white);
}

.aq-faq-accordion__question {
	min-width: 0;
}

/* --------------------------------------------------------------------
   Ícono indicador — glifo propio (Bootstrap Icons, ya instalado) en vez
   del caret embebido de Bootstrap (apagado en accordion-reset.css).
   Decorativo (aria-hidden="true" en el HTML): el estado real lo anuncia
   aria-expanded en el propio <button>, que Bootstrap ya mantiene solo.
   -------------------------------------------------------------------- */
.aq-faq-accordion__icon {
	flex-shrink: 0;
	color: var(--aq-gold);
	transition: transform var(--aq-transition-base) var(--aq-ease);
}

.aq-faq-accordion__button:not(.collapsed) .aq-faq-accordion__icon {
	transform: rotate(180deg);
}

/* --------------------------------------------------------------------
   Respuesta — cuerpo normal, sin tratamiento especial. El texto llega
   con `new_lines` vacío desde ACF (igual que el resto de las áreas de
   texto del proyecto): un salto de línea que el cliente escriba se ve
   como texto corrido, nunca con nl2br().
   -------------------------------------------------------------------- */
.aq-faq-accordion__body {
	color: var(--aq-text);
}

.aq-faq-accordion__body p {
	margin: 0;
}