/*
  Acordeón de preguntas frecuentes.
  El template resuelve esto con una interacción nativa de Webflow (IX2) cuyos datos de timeline
  no viajan con el export estático, así que se reimplementa con CSS + JS propio (misma lógica que
  el resto de interacciones reconstruidas del sitio).
*/

.accordion_bottom {
  display: block !important;
  height: auto !important;
  max-height: var(--faq-panel-height, 0px) !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transition: max-height 0.4s ease, opacity 0.3s ease, visibility 0s linear 0.4s !important;
}

.accordion_wrap[data-faq-open="true"] .accordion_bottom {
  opacity: 1 !important;
  visibility: visible;
  pointer-events: auto;
  transition: max-height 0.4s ease, opacity 0.3s ease, visibility 0s linear 0s !important;
}

.accordion_top {
  cursor: pointer;
}

/*
  Preguntas del acordeón: mismo tamaño que los checks de "Por qué Atelier Visión"
  (why_item-content .h6), que usan el h6 base del sitio sin override (Forum, 1.5rem).
  Antes se forzaba a 16px; se quita el override para que ambos midan igual.
*/

.accordion_arrow {
  transition: transform 0.3s ease;
}

.accordion_wrap[data-faq-open="true"] .accordion_arrow {
  transform: rotate(180deg);
}

/*
  En algunas páginas (Home) cada pregunta va envuelta en un div ".scroll-into-view"
  adicional para animar su aparición individualmente. Como ese wrapper es un hijo flex
  sin ancho propio, el acordeón dentro de él se encoge según el largo del texto de la
  pregunta. Se fuerza el wrapper a ocupar el 100% para que todas las cards midan igual.
*/
.accordion_list > .scroll-into-view {
  width: 100%;
}