/* ═══════════════════════════════════════════════════════════════════════
   PREGUNTAS FRECUENTES — Acordeón minimalista (ref. Kudos / NK Studio).

   SISTEMATIZADO con el design system del sitio (gemelo del acordeón de
   servicios .sva-*):
     · Eyebrow  → var(--font-mono)     (cofo-sans-mono)
     · Títulos / preguntas (H2/H3) → var(--font-header)  (Geist)
     · Cuerpo   → var(--font-reading)  (IBM Plex Sans, 300)
     · Ink      → var(--bg-dark) + rgba(29,30,28, x); acento amarillo institucional
   Interacción idéntica a servicios: toggle "+" que colapsa a "−", hover que
   corre la pregunta y tiñe el índice/ícono de amarillo.

   Grilla profesional: columnas fijas [nº · pregunta · toggle] → todas las
   preguntas arrancan alineadas; la respuesta indenta bajo la pregunta.
   Entrada: "fade in up" con stagger (java/faq.js, GSAP ScrollTrigger).
   ═══════════════════════════════════════════════════════════════════════ */

.faq-section {
    --faq-line: rgba(29, 30, 28, 0.14);
    --faq-numw: clamp(2rem, 3vw, 2.6rem);   /* ancho fijo del índice → alinea preguntas */
    --faq-gap: clamp(16px, 2.4vw, 34px);
    position: relative;
    background-color: #EDEDE6;              /* claro corporativo (opaco, sin silk detrás) */
    color: var(--bg-dark);
    padding: clamp(72px, 10vw, 140px) 0;
}

.faq-inner {
    width: min(1180px, 90vw);
    margin: 0 auto;
}

/* ── Encabezado ── */
.faq-head {
    max-width: 780px;
    margin-bottom: clamp(40px, 5.5vw, 72px);
}

.faq-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: rgba(29, 30, 28, 0.5);
    margin-bottom: 18px;
}

.faq-title {
    margin: 0 0 22px;
    font-family: var(--font-header);        /* Geist — titular de sección (H2), referencia del sistema */
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--bg-dark);
}

.faq-sub {
    margin: 0;
    max-width: 62ch;
    font-family: var(--font-reading);
    font-weight: 300;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: rgba(29, 30, 28, 0.68);
}

/* ── Lista / acordeón ── */
.faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--faq-line);
}

.faq-item {
    border-bottom: 1px solid var(--faq-line);
}

/* Fila = grilla [nº · pregunta · toggle], alineada a la 1ª línea (baseline) */
.faq-q {
    display: grid;
    grid-template-columns: var(--faq-numw) 1fr auto;
    align-items: baseline;
    column-gap: var(--faq-gap);
    width: 100%;
    padding: clamp(22px, 2.5vw, 32px) 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: var(--bg-dark);
    -webkit-tap-highlight-color: transparent;
}

.faq-q-num {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.1em;
    color: rgba(29, 30, 28, 0.4);
    transition: color 0.4s var(--ease-expo);
}

.faq-q-text {
    font-family: var(--font-header);        /* Geist — nivel H3, como .sva-name */
    font-weight: 500;
    font-size: var(--fs-h3);
    line-height: 1.3;
    letter-spacing: var(--ls-h);
    color: var(--bg-dark);
    transition: transform 0.55s var(--ease-expo);
}

/* Toggle "+" → colapsa a "−" al abrir (idéntico a .sva-toggle) */
.faq-icon {
    position: relative;
    width: clamp(18px, 1.6vw, 22px);
    height: clamp(18px, 1.6vw, 22px);
    align-self: center;
    color: rgba(29, 30, 28, 0.55);
    transition: color 0.4s var(--ease-expo);
    transform: translateY(0.15em);          /* nudge fino sobre la 1ª línea */
}
.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transition: transform 0.45s var(--ease-expo), opacity 0.45s var(--ease-expo);
}
.faq-icon::before { width: 100%; height: 1.5px; transform: translate(-50%, -50%); }   /* horizontal */
.faq-icon::after  { width: 1.5px; height: 100%; transform: translate(-50%, -50%); }   /* vertical  */

/* Hover (solo puntero fino) — misma firma que servicios */
@media (hover: hover) and (pointer: fine) {
    .faq-item:hover .faq-q-text { transform: translateX(8px); }
    .faq-item:hover .faq-q-num,
    .faq-item:hover .faq-icon { color: var(--amarillo-acento); }
}

/* Sin contorno de NINGÚN tipo (ni azul del navegador ni amarillo) al hacer
   foco/click/desplegar. */
.faq-q:focus,
.faq-q:focus-visible { outline: none; }
/* Foco por TECLADO: señal SIN caja (misma afordancia que el hover) para no
   perder accesibilidad. */
.faq-q:focus-visible .faq-q-text { transform: translateX(8px); }
.faq-q:focus-visible .faq-q-num,
.faq-q:focus-visible .faq-icon { color: var(--amarillo-acento); }

/* Estado ABIERTO: acento amarillo + la barra vertical colapsa → "−" */
.faq-item.open .faq-q-num,
.faq-item.open .faq-icon { color: var(--amarillo-acento); }
.faq-item.open .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }

/* Panel de respuesta: grid 0fr→1fr (anima el alto sin medir) */
.faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.55s var(--ease-expo);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }

.faq-a-inner {
    min-height: 0;                          /* imprescindible para que 0fr colapse */
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s var(--ease-expo), transform 0.5s var(--ease-expo);
}
.faq-item.open .faq-a-inner { opacity: 1; transform: none; }

.faq-a-inner p {
    margin: 0;
    /* indentada bajo la pregunta (salta el índice + gap) → alineación pro */
    padding: 2px calc(var(--faq-numw) + var(--faq-gap)) clamp(28px, 3vw, 40px)
             calc(var(--faq-numw) + var(--faq-gap));
    max-width: 68ch;
    font-family: var(--font-reading);
    font-weight: 300;
    font-size: var(--fs-body);
    line-height: 1.7;
    color: rgba(29, 30, 28, 0.72);
}

/* ── Scroll reveal (fade in up con stagger) ──
   Estado oculto solo si el JS marcó .js-faq (failsafe: sin JS, todo visible).
   El delay en cascada lo pone faq.js vía --faq-d. */
.js-faq .faq-section [data-faq-reveal] {
    opacity: 0;
    transform: translateY(30px);
}
.faq-section.faq-in [data-faq-reveal] {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--faq-d, 0s);
}

/* ── Responsive ── */
@media (max-width: 720px) {
    .faq-section { --faq-numw: 0px; --faq-gap: 16px; }
    .faq-q {
        grid-template-columns: 1fr auto;    /* se oculta la columna del índice */
        column-gap: 18px;
        padding: 20px 0;
    }
    .faq-q-num { display: none; }
    .faq-a-inner p { padding-left: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .js-faq .faq-section [data-faq-reveal] { opacity: 1; transform: none; }
    .faq-section.faq-in [data-faq-reveal] { transition: none; }
    .faq-q-text,
    .faq-icon,
    .faq-icon::before,
    .faq-icon::after,
    .faq-a,
    .faq-a-inner { transition: none; }
}