/* =====================================================
           ESTILOS GENERALES Y CONFIGURACIÓN (FAQ SECTION)
        ===================================================== */
        :root {
            --color-principal: #c62828; /* Rojo corporativo */
            --color-oscuro: #1a1a1a;    /* Gris carbón profesional */
            --color-texto: #333333;     /* Texto principal */
            --color-suave: #555555;     /* Descripciones y textos secundarios */
            --color-fondo-item: #ffffff;/* Fondo de las tarjetas */
            --color-borde: #e5e7eb;     /* Líneas divisorias sutiles */
            --fuente-titulos: 'Montserrat', sans-serif;
            --fuente-cuerpo: 'Montserrat', sans-serif;
        }
.faq-section {
            max-width: 900px;
            margin: 60px auto;
            padding: 0 20px;
            font-family: var(--fuente-cuerpo);
            color: var(--color-texto);
            line-height: 1.6;
        }

        .faq-header {
            text-align: center;
            margin-bottom: 50px;
        }

        .faq-header h2 {
            font-family: var(--fuente-titulos);
            font-size: 2.5rem;
            color: var(--color-oscuro);
            margin-bottom: 15px;
            font-weight: 700;
        }

        .faq-header p {
            color: var(--color-suave);
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0 auto;
        }

        /* =====================================================
           CONTENEDOR DEL ACORDEÓN
        ===================================================== */
        .faq-container {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .faq-item{

            background:#fff;                               /* Fondo blanco */

            border:1px solid #2b2b2b;                      /* Borde negro fino */

            border-radius:8px;                             /* Esquinas ligeramente redondeadas */

            transition:
            background-color .30s ease,                    /* Transición del fondo */
            border-color .30s ease,                        /* Transición del borde */
            box-shadow .30s ease,                          /* Transición del brillo */
            transform .30s ease;                           /* Transición del movimiento */

        }


/* ======================================
   EFECTO AL PASAR EL RATÓN
====================================== */

.faq-item:hover{

    background:#eceff1;                              /* Gris claro elegante */

    border-color:#c00000;                        /* Borde rojo corporativo */

    box-shadow:
        0 0 6px rgba(192,0,0,.18),               /* Brillo rojo suave */
        0 8px 18px rgba(0,0,0,.08);              /* Sombra elegante */

    transform:translateY(-2px);                  /* Se eleva ligeramente */

}
        /* =====================================================
           BOTÓN / CABECERA DE PREGUNTA
        ===================================================== */
        .faq-trigger {
            width: 100%;
            background: none;
            border: none;
            padding: 22px 28px;
            text-align: left;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            outline: none;
            gap: 20px;
        }

        .faq-left-block {
            display: flex;
            align-items: center;
            gap: 18px;
            flex: 1;
        }

        /* Iconos de temática lineal */
        .faq-icon-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: var(--color-oscuro);
            transition: color 0.3s ease;
        }

        .faq-icon-wrapper svg {
            width: 32px;
            height: 32px;
        }

        .faq-question {
            font-family: var(--fuente-titulos);
            font-size: 1.15rem;
            font-weight: 600;
            color: var(--color-oscuro);
            transition: color 0.3s ease;
        }

        /* Indicador dinámico (+ / -) */
        .faq-indicator {
            position: relative;
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .faq-indicator::before,
        .faq-indicator::after {
            content: '';
            position: absolute;
            background-color: var(--color-suave);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
        }

        /* Línea horizontal del '+' */
        .faq-indicator::before {
            width: 16px;
            height: 2px;
        }

        /* Línea vertical del '+' */
        .faq-indicator::after {
            width: 2px;
            height: 16px;
        }

        /* ======================================
   ACORDEÓN ACTIVO (PREGUNTA ABIERTA)
====================================== */

.faq-item.active{

    border-color:#c00000;                           /* Cambia el borde al rojo corporativo */

    box-shadow:
        0 0 8px rgba(192,0,0,.18),                  /* Añade un brillo rojo suave alrededor */
        0 8px 20px rgba(0,0,0,.08);                 /* Añade una sombra elegante para dar profundidad */

}

/* ======================================
   COLOR DEL TÍTULO CUANDO ESTÁ ABIERTO
====================================== */

.faq-item.active .faq-question{

    color:#c00000;                                 /* Cambia el texto de la pregunta al rojo corporativo */

}

/* ======================================
   COLOR DEL ICONO CUANDO ESTÁ ABIERTO
====================================== */

.faq-item.active .faq-icon-wrapper{

    color:#c00000;                                 /* Cambia el icono al mismo rojo */

}

/* ======================================
   CONVIERTE EL + EN UN -
====================================== */

.faq-item.active .faq-indicator::after{

    transform:rotate(90deg);                       /* Gira la línea vertical */

    opacity:0;                                    /* La oculta para que solo quede la horizontal */

}

.faq-item.active .faq-indicator::before{

    background:#c00000;                           /* Cambia la línea horizontal al rojo */

    transform:rotate(180deg);                     /* Mantiene una animación suave */

}
        /* =====================================================
           PANEL DE RESPUESTA (CON ANIMACIÓN FLUIDA)
        ===================================================== */
        .faq-panel {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            background-color: #fafafa;
        }

        .faq-content {
            padding: 0 28px 24px 78px; /* Desplazado para alinearse con el inicio del texto de la pregunta */
            color: var(--color-suave);
            font-size: 1.05rem;
        }

        /* Ajustes adaptables en pantallas más pequeñas */
        @media (max-width: 768px) {
            .faq-header h2 {
                font-size: 2rem;
            }
            .faq-trigger {
                padding: 18px 20px;
                gap: 12px;
            }
            .faq-left-block {
                gap: 14px;
            }
            .faq-icon-wrapper svg {
                width: 26px;
                height: 26px;
            }
            .faq-question {
                font-size: 1.05rem;
            }
            .faq-content {
                padding: 0 20px 20px 60px;
                font-size: 0.98rem;
            }
        }

/* ==================================================
   AJUSTES DE ACCESIBILIDAD - FAQ
================================================== */

.faq-trigger:focus-visible {
    outline: 3px solid rgba(198, 40, 40, 0.35);
    outline-offset: 3px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .faq-item,
    .faq-panel,
    .faq-indicator::before,
    .faq-indicator::after {
        transition: none !important;
    }

    .faq-item:hover {
        transform: none;
    }
}