/**
 * Acordeon de Preguntas frecuentes (schema FAQPage - ticket SP2-01).
 * Diseño tipo "cards" (ver referencia preguntas_dise-new.png).
 *
 * El toggle de cada pregunta usa la técnica "checkbox hack" (input
 * checkbox oculto + label, ver el template Twig) en vez de <details>/
 * <summary>: sin JavaScript, pero con la animación de apertura fiable en
 * cada toggle (con <details> nativo, el navegador aplica una optimización
 * interna a su contenido que hace que la transición CSS solo se vea
 * orgánica la primera vez que se abre cada pregunta).
 *
 * La apertura/cierre de .faq-accordion__answer se anima con la técnica de
 * grid-template-rows 0fr→1fr (sí es transicionable, a diferencia de la
 * altura "auto").
 */
.faq-accordion {
  /* --faq-blue hereda de --azul (variable global del tema, ver
     css/investyle.css). --faq-blue-dark/--faq-blue-light son variaciones
     propias derivadas de ese mismo azul: el tema no trae tonos claros/
     oscuros ya definidos para --azul. */
  --faq-blue: var(--azul);
  --faq-blue-dark: #2e5e8c;
  --faq-blue-light: #e5eef8;
  --faq-text: #16241c;
  --faq-text-muted: #5a6660;
  --faq-border: #e6e7e2;
  --faq-card-shadow: 0 1px 4px rgba(20, 30, 25, 0.06);
  background-color: var(--gris);
  padding: 40px 32px;
  margin-top: 40px;
  margin-bottom: 60px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.faq-accordion__kicker {
  position: relative;
  display: inline-block;
  color: var(--faq-blue-dark);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-left: 14px;
}

.faq-accordion__kicker::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 4px;
  height: 12px;
  border-radius: 2px;
  background-color: var(--faq-blue);
}

.faq-accordion__title {
  color: var(--faq-text);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.25;
  margin-bottom: 20px;
}

.faq-accordion__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 0;
  padding-top: 20px;
  border-top: 1px solid var(--faq-border);
}

.faq-accordion__item {
  position: relative;
  background-color: #ffffff;
  border: 1px solid var(--faq-border);
  border-radius: 14px;
  box-shadow: var(--faq-card-shadow);
  overflow: hidden;
}

.faq-accordion__item:has(.faq-accordion__toggle:checked) {
  border-left: 4px solid var(--faq-blue);
}

/* Checkbox visualmente oculto, pero presente en el DOM: sigue siendo
   accesible por teclado (Tab + Espacio) y anunciado por lectores de
   pantalla como un control marcado/desmarcado. */
.faq-accordion__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.faq-accordion__question {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  cursor: pointer;
}

.faq-accordion__toggle:focus-visible ~ .faq-accordion__question {
  outline: 2px solid var(--faq-blue);
  outline-offset: -2px;
}

.faq-accordion__number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--faq-blue-light);
  color: var(--faq-blue-dark);
  font-weight: 700;
  font-size: 13px;
}

.faq-accordion__question-text {
  flex: 1;
  color: var(--faq-text);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
}

.faq-accordion__icon {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  position: relative;
}

.faq-accordion__icon::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--faq-text);
  border-bottom: 2px solid var(--faq-text);
  transform: rotate(45deg);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), top 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-accordion__toggle:checked ~ .faq-accordion__question .faq-accordion__icon::before {
  top: 6px;
  transform: rotate(-135deg);
}

/* Contenedor animado: 0fr colapsa la fila del grid a altura 0, 1fr la
   expande al alto natural del contenido. visibility queda sincronizada
   para que el texto no sea enfocable/legible por lectores de pantalla
   mientras está colapsado (CSS trata 'visibility' como caso especial: al
   abrir se vuelve visible de inmediato, al cerrar solo se oculta cuando
   termina la transición — por eso comparte la misma duración). */
.faq-accordion__answer {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.35s;
}

.faq-accordion__toggle:checked ~ .faq-accordion__answer {
  grid-template-rows: 1fr;
  visibility: visible;
}

/* Este nivel es el que se colapsa (es el hijo directo del grid). Debe
   quedar SIN padding propio: el padding de un elemento no se comprime al
   forzar su fila del grid a 0fr (solo el contenido se suprime vía
   overflow), así que si el padding estuviera aquí, ese padding quedaría
   como un remanente visible ("salto de línea") incluso con la pregunta
   cerrada. Por eso el padding vive un nivel más adentro, en
   .faq-accordion__answer-content. */
.faq-accordion__answer-inner {
  overflow: hidden;
}

.faq-accordion__answer-content {
  padding: 0 24px 24px 74px;
  color: var(--faq-text-muted);
  font-size: 15px;
  line-height: 1.7;
}

.faq-accordion__answer-content p:last-child {
  margin-bottom: 0;
}