/* =============================================================================
   Section FAQs Accordion — "Solid" variant (inspirado en ReUI accordion-1)
   Prefijo: .fa-minimal-    Ancla: #fa-minimal-section

   Cada item: rectángulo redondeado con fondo azul muy tenue, icono "plus"
   a la derecha que se transforma en minus al abrirse, contenido oculto que
   se despliega con animación de max-height (gestionado por el JS).
   ============================================================================= */

#fa-minimal-section {
    --fa-blue:        #002FD9;
    --fa-blue-dark:   #001DB0;
    --fa-snow:        #F5F9FF;
    --fa-bg:          rgba(0, 47, 217, 0.045);   /* fondo del item closed */
    --fa-bg-open:     rgba(0, 47, 217, 0.085);   /* fondo del item open */
    --fa-bg-hover:    rgba(0, 47, 217, 0.07);
    --fa-border:      rgba(0, 47, 217, 0.12);
    --fa-black:       #0A1A2E;
    --fa-gray:        #4A5A78;
    --fa-font:        -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    --fa-transition:  0.32s cubic-bezier(0.4, 0, 0.2, 1);
    --fa-radius:      14px;
    --fa-gap:         0.55rem;        /* separación entre items (≈ space-y-2 de Tailwind) */
}

/* =============================================================================
   SECCIÓN
   ============================================================================= */
#fa-minimal-section {
    position: relative;
    width: 100%;
    padding: clamp(4rem, 8vw, 7rem) 0 clamp(4rem, 7vw, 6rem);
    background: linear-gradient(180deg, #FFFFFF 0%, var(--fa-snow) 100%);
    overflow: hidden;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Reveal */
#fa-minimal-section[data-reveal]:not(.is-visible) {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
#fa-minimal-section[data-reveal].is-visible {
    opacity: 1; transform: translateY(0);
    transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}

/* Container */
#fa-minimal-section .fa-minimal-section__container {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 3rem);
}

/* =============================================================================
   ENCABEZADO
   ============================================================================= */
#fa-minimal-section .fa-minimal-section__header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}

#fa-minimal-section .fa-minimal-section__title {
    font-family: var(--fa-font) !important;
    font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
    color: var(--fa-black) !important;
    margin: 0 0 1rem !important;
    padding: 0 !important;
}

#fa-minimal-section .fa-minimal-section__subtitle {
    font-family: var(--fa-font) !important;
    font-size: clamp(1rem, 2vw, 1.12rem) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--fa-gray) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =============================================================================
   ACORDEÓN
   ============================================================================= */
#fa-minimal-section .fa-minimal-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--fa-gap);
}

/* =============================================================================
   ITEM — rectángulo solid con fondo azul tenue
   ============================================================================= */
#fa-minimal-section .fa-minimal-item {
    background: var(--fa-bg);
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-radius);
    overflow: hidden;
    transition: background var(--fa-transition), border-color var(--fa-transition);
}

#fa-minimal-section .fa-minimal-item:hover {
    background: var(--fa-bg-hover);
}

#fa-minimal-section .fa-minimal-item.is-open {
    background: var(--fa-bg-open);
    border-color: rgba(0, 47, 217, 0.20);
}

/* =============================================================================
   TRIGGER (botón con la pregunta + icono)
   ============================================================================= */
#fa-minimal-section .fa-minimal-item__trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 1rem !important;
    padding: 1.05rem 1.25rem !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    font-family: var(--fa-font) !important;
    text-align: left !important;
    line-height: 1.45 !important;
    transition: color var(--fa-transition) !important;
}

#fa-minimal-section .fa-minimal-item__trigger:focus-visible {
    outline: 2px solid var(--fa-blue);
    outline-offset: -2px;
    border-radius: var(--fa-radius);
}

/* Pregunta */
#fa-minimal-section .fa-minimal-item__question {
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: var(--fa-black) !important;
    letter-spacing: -0.01em;
    flex: 1 1 auto;
}

#fa-minimal-section .fa-minimal-item.is-open .fa-minimal-item__question {
    color: var(--fa-blue) !important;
}

/* =============================================================================
   ICONO PLUS → MINUS
   El SVG contiene dos paths: horizontal y vertical.
   Al abrirse, el SVG rota 180° y la línea vertical desaparece (rotate + opacity)
   → queda solo la horizontal, efecto "plus se convierte en minus".
   ============================================================================= */
#fa-minimal-section .fa-minimal-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--fa-blue);
    flex-shrink: 0;
}

#fa-minimal-section .fa-minimal-item__icon svg {
    display: block;
    transition: transform var(--fa-transition);
    transform: rotate(0deg);
}

#fa-minimal-section .fa-minimal-item__icon-h,
#fa-minimal-section .fa-minimal-item__icon-v {
    transform-origin: center;
    transition: transform var(--fa-transition), opacity var(--fa-transition);
}

/* Estado abierto: SVG rota 180°, línea vertical rota 90° + opacity 0 → minus */
#fa-minimal-section .fa-minimal-item.is-open .fa-minimal-item__icon svg {
    transform: rotate(180deg);
}
#fa-minimal-section .fa-minimal-item.is-open .fa-minimal-item__icon-v {
    transform: rotate(90deg);
    opacity: 0;
}

/* =============================================================================
   PANEL (respuesta) — animación de max-height vía JS
   ============================================================================= */
#fa-minimal-section .fa-minimal-item__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--fa-transition) ease;
}

#fa-minimal-section .fa-minimal-item.is-open .fa-minimal-item__panel {
    /* El JS setea max-height en px = scrollHeight para animación suave */
}

#fa-minimal-section .fa-minimal-item__answer {
    padding: 0 1.25rem 1.25rem !important;
    font-family: var(--fa-font) !important;
    font-size: 0.96rem !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    color: var(--fa-gray) !important;
    letter-spacing: -0.005em;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 768px) {
    #fa-minimal-section .fa-minimal-item__trigger {
        padding: 0.95rem 1rem !important;
    }
    #fa-minimal-section .fa-minimal-item__question {
        font-size: 0.95rem !important;
    }
    #fa-minimal-section .fa-minimal-item__answer {
        padding: 0 1rem 1.1rem !important;
        font-size: 0.92rem !important;
        line-height: 1.6 !important;
    }
}

@media (max-width: 480px) {
    #fa-minimal-section {
        padding: clamp(3rem, 7vw, 5rem) 0 clamp(3rem, 6vw, 4.5rem);
    }
    #fa-minimal-section .fa-minimal-item__trigger {
        padding: 0.9rem 0.95rem !important;
        gap: 0.75rem !important;
    }
    #fa-minimal-section .fa-minimal-item__question {
        font-size: 0.92rem !important;
    }
    #fa-minimal-section .fa-minimal-item__icon {
        width: 24px;
        height: 24px;
    }
}

/* =============================================================================
   REDUCE MOTION
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    #fa-minimal-section .fa-minimal-item,
    #fa-minimal-section .fa-minimal-item__panel,
    #fa-minimal-section .fa-minimal-item__icon svg,
    #fa-minimal-section .fa-minimal-item__icon-v {
        transition: none !important;
    }
    #fa-minimal-section[data-reveal]:not(.is-visible) {
        opacity: 1; transform: none;
    }
}