/* ==========================================================================
   sotowismify · 92-faq — «Lo que me preguntan antes de empezar.»
   Protagonista: el ACORDEÓN. grid-template-rows 0fr → 1fr (GSAP + easeReverse en faq.js; con
   movimiento reducido, la clase .is-open), líneas de la respuesta enmascaradas que suben, cruz que
   gira y se vuelve «−» (barras = pseudo-elementos; --v la encoge), separadores que se dibujan.
   · Escritorio: «head list» / «ask list» (la caja del CTA cae al pie, junto a la última pregunta).
     Móvil: título → preguntas → CTA.
   · Estados: .is-active (pulsado, inmediato: caja, cruz y número) · .is-open (respuesta visible; se
     quita al terminar de cerrar) · aria-expanded en el botón, que se SIRVE en "true" (sin JS todo está
     abierto) y faq.js pasa a "false" al armar: por eso lo visual cuelga de las clases, no de aria-expanded.
   · GSAP mueve .faq-qi, .faq-n, .faq-ic y las líneas .fl → los hovers que mueven van en .faq-qt.
   · Sin JS (.no-js) o con efectos desactivados (.sw-nofx): todas las respuestas abiertas.
   · TEMA CLARO (17-oct-2026): la pregunta abierta es una caja interior en blanco roto (como .box), trazos en
     tinta con alfa y sombra cálida suave en la cruz invertida.
   ========================================================================== */

/* ---------- Rejilla ---------- */
.s-faq .faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: 'head list' 'ask list';
  column-gap: clamp(36px, 5.6vw, 88px);
  row-gap: 36px;
}
.s-faq .faq-head { grid-area: head; display: grid; gap: 18px; align-content: start; min-width: 0; }
.s-faq .faq-title { font-size: clamp(36px, 4.5vw, 66px); max-width: 11ch; }
.s-faq .faq-list { grid-area: list; align-self: start; min-width: 0; padding: 8px; border-radius: 22px; }
.s-faq .faq-ask { grid-area: ask; align-self: end; padding: 8px; border-radius: 22px; min-width: 0; }

/* ---------- Caja del CTA (caja dentro de caja) ---------- */
.s-faq .faq-ask-in { display: grid; gap: 14px; justify-items: start; padding: 22px 22px 24px; border-radius: 14px; }
.s-faq .faq-ask-t { font-size: 14px; line-height: 1.6; color: var(--fg-1); max-width: 34ch; margin-bottom: 6px; }

/* ---------- Lista ---------- */
.s-faq .faq-item { position: relative; border-radius: 14px; transition: background 0.5s ease, box-shadow 0.5s ease; }
.s-faq .faq-item::after {
  content: ''; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px; pointer-events: none;
  background: var(--line); transform-origin: 0 50%; transform: scaleX(var(--draw, 1));
  transition: opacity 0.4s ease;
}
.s-faq .faq-item:last-child::after { display: none; }
/* pregunta abierta = caja interior */
.s-faq .faq-item.is-active {
  background: linear-gradient(165deg, #faf9f6, #f6f4ef 55%, #f2efe9);
  box-shadow: inset 0 0 0 1px rgba(15, 20, 30, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.s-faq .faq-item.is-active::after,
.s-faq .faq-item:has(+ .faq-item.is-active)::after { opacity: 0; }

.s-faq .faq-h { margin: 0; font: inherit; }
.s-faq .faq-q {
  position: relative; width: 100%;
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 34px; align-items: center; column-gap: 16px;
  padding: 19px 18px; border-radius: 14px; text-align: left; color: var(--fg);
}
.s-faq .faq-n { color: var(--fg-3); transition: color 0.4s ease; }
/* máscara de la pregunta (la línea sube dentro al entrar la lista) */
.s-faq .faq-qt { display: block; overflow: clip; padding: 0.14em 0 0.16em; margin: -0.14em 0 -0.16em; transition: translate 0.55s var(--ease); }
.s-faq .faq-qi { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.38; }
/* cruz → menos: dos barras en pseudo-elementos; GSAP gira el círculo y encoge la vertical (--v) */
.s-faq .faq-ic {
  --v: 1;
  position: relative; display: block; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-2);
  transition: background 0.45s var(--ease), border-color 0.35s ease, box-shadow 0.45s ease;
}
.s-faq .faq-ic::before,
.s-faq .faq-ic::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -0.75px 0 0 -5.5px;
  border-radius: 2px; background: var(--fg); transition: background 0.45s ease;
}
.s-faq .faq-ic::after { transform: rotate(90deg) scaleX(var(--v)); }
.s-faq .faq-item.is-active .faq-ic { background: var(--inv-bg); border-color: var(--inv-bg); box-shadow: 0 8px 20px rgba(60, 50, 35, 0.2); }
.s-faq .faq-item.is-active .faq-ic::before,
.s-faq .faq-item.is-active .faq-ic::after { background: var(--inv-fg); }
.s-faq .faq-item.is-active .faq-n { color: var(--fg); }
.s-faq .faq-q:focus-visible { outline-offset: -2px; }
@media (hover: hover) {
  .s-faq .faq-item:not(.is-active):hover { background: var(--fill-1); }
  .s-faq .faq-q:hover .faq-qt { translate: 5px 0; }
  .s-faq .faq-q:hover .faq-n { color: var(--fg-1); }
  .s-faq .faq-q:hover .faq-ic { border-color: rgba(15, 20, 30, 0.34); }
}

/* ---------- Respuesta ---------- */
.s-faq .faq-a { display: grid; grid-template-rows: 0fr; }
.s-faq .faq-a-in { min-height: 0; overflow: hidden; visibility: hidden; }
.s-faq .faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.s-faq .faq-item.is-open .faq-a-in { visibility: visible; }
.s-faq .faq-a p { padding: 0 68px 24px 62px; font-size: 14px; line-height: 1.72; color: var(--fg-2); max-width: 72ch; }
.s-faq .faq-a p a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(20, 24, 31, 0.35); transition: text-decoration-color 0.3s ease; }
.s-faq .faq-a p a:hover { text-decoration-color: rgba(20, 24, 31, 0.9); }
/* líneas de SplitText (tag span): máscara + línea en bloque */
.s-faq .faq-a .fl, .s-faq .faq-a .fl-mask { display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .s-faq .faq-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: 'head' 'list' 'ask'; row-gap: 28px; }
  .s-faq .faq-title { max-width: 14ch; }
  .s-faq .faq-ask { align-self: start; }
}
@media (max-width: 640px) {
  .s-faq .faq-list { padding: 6px; border-radius: 20px; }
  .s-faq .faq-item, .s-faq .faq-q { border-radius: 14px; }
  .s-faq .faq-q { grid-template-columns: 20px minmax(0, 1fr) 30px; column-gap: 12px; padding: 17px 12px; }
  .s-faq .faq-qi { font-size: 14.5px; }
  .s-faq .faq-ic { width: 30px; height: 30px; }
  .s-faq .faq-item::after { left: 12px; right: 12px; }
  .s-faq .faq-a p { padding: 0 14px 20px 44px; font-size: 13.5px; }
  .s-faq .faq-ask { padding: 6px; border-radius: 20px; }
  .s-faq .faq-ask-in { padding: 20px 18px 22px; }
  .s-faq .faq-ask-in .btn { width: 100%; }
}

/* con movimiento reducido (sin GSAP en el acordeón) la cruz cambia por estado; con GSAP, --v va en línea */
.s-faq .faq-item.is-active .faq-ic { --v: 0; }

/* ---------- Sin JS / efectos desactivados ----------
   Solo si falla ESTA sección (.s-faq.sw-nofx) o core no arranca (html.sw-nofx / .no-js): respuestas abiertas,
   sin cruces (no se pliegan). Un fallo en otra sección (body.sw-nofx) no cambia el acordeón. */
.no-js .s-faq .faq-a, html.sw-nofx .s-faq .faq-a, .s-faq.sw-nofx .faq-a { grid-template-rows: 1fr !important; }
.no-js .s-faq .faq-a-in, html.sw-nofx .s-faq .faq-a-in, .s-faq.sw-nofx .faq-a-in { visibility: visible !important; }
.no-js .s-faq .faq-ic, html.sw-nofx .s-faq .faq-ic, .s-faq.sw-nofx .faq-ic { visibility: hidden !important; }
.sw-nofx .s-faq .faq-a .fl, .s-faq.sw-nofx .faq-a .fl, .sw-nofx .s-faq .faq-qi, .s-faq.sw-nofx .faq-qi { transform: none !important; }
.sw-nofx .s-faq .faq-item, .s-faq.sw-nofx .faq-item { --draw: 1 !important; }
.s-faq.sw-nofx .faq-n { opacity: 1 !important; visibility: visible !important; }
@media (prefers-reduced-motion: reduce) {
  .s-faq .faq-item, .s-faq .faq-ic, .s-faq .faq-ic::before, .s-faq .faq-ic::after, .s-faq .faq-qt, .s-faq .faq-n { transition: none; }
}