/* Estilos generales */
body {
    font-family: Arial, sans-serif; /* Fuente similar a la imagen */
    background-color: #f8f9fa; /* Un fondo gris muy claro */
    margin: 0;
    padding: 0px;
    color: #333; /* Color de texto principal */
}

/* Contenedor principal */
.faq-container {
    max-width: 800px; /* Ancho máximo */
    margin: 40px auto; /* Centrado horizontal y margen superior/inferior */
    background-color: #ffffff; /* Fondo blanco */
    padding: 30px;
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Título principal */
.faq-container h1 {
    text-align: center;
    color: #000000; /* Azul similar al de la imagen */
    margin-bottom: 15px;
    font-size: 1.8em; /* Tamaño de fuente */
}

/* Párrafo introductorio */
.faq-container > p { /* Selector para el párrafo directo dentro del contenedor */
    text-align: center;
    color: #555; /* Gris oscuro */
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Lista de preguntas */
.faq-list {
    margin-top: 20px;
}

/* Cada item de pregunta/respuesta */
.faq-item {
    border-bottom: 1px solid #eee; /* Línea divisoria */
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.faq-item:last-child {
    border-bottom: none; /* Quita la línea del último elemento */
    margin-bottom: 0;
    padding-bottom: 0;
}

/* La parte de la pregunta (clickeable) */
.faq-question {
    display: flex; /* Para alinear texto e icono */
    justify-content: space-between; /* Espacio entre texto e icono */
    align-items: center; /* Centrado vertical */
    cursor: pointer; /* Indica que es clickeable */
    padding: 10px 0; /* Espaciado vertical */
    font-size: 1.1em; /* Tamaño de la pregunta */
    font-weight: 500; /* Un poco más de peso */
    color: #333;
}

/* El icono (+ / -) */
.icon {
    color: #000000; /* Mismo azul que el título */
    font-weight: bold;
    font-size: 1.4em; /* Tamaño del icono */
    min-width: 20px; /* Asegura espacio para el icono */
    text-align: center;
}

/* La parte de la respuesta (inicialmente oculta) */
.faq-answer {
    display: none; /* Oculto por defecto */
    padding: 15px 0 5px 5px; /* Espaciado interno (un poco de sangría izquierda) */
    color: #555;
    line-height: 1.6;
    background-color: #fdfdfd; /* Fondo ligeramente distinto para la respuesta */
    border-left: 3px solid #f31d1d; /* Línea azul a la izquierda */
    margin-top: 5px; /* Separación de la pregunta */
}

/* Estilo para cuando la respuesta está activa/visible */
.faq-item.active .faq-answer {
    display: block; /* Muestra la respuesta */
}


/* --- Media Queries para Responsividad --- */

/* Estilos para pantallas pequeñas (ej. móviles, hasta 768px de ancho) */
@media (max-width: 768px) {

    .faq-container {
        padding: 20px; /* Reduce el padding del contenedor principal */
        margin: 20px auto; /* Reduce el margen superior/inferior */
    }

    .faq-container h1 {
        font-size: 1.5em; /* Reduce el tamaño del título principal */
    }

    .faq-container > p { /* Párrafo introductorio */
        font-size: 0.9em; /* Reduce el tamaño del texto introductorio */
        margin-bottom: 20px; /* Ajusta el margen inferior */
    }

    .faq-question {
        font-size: 1em; /* Reduce el tamaño de la fuente de la pregunta */
        padding: 8px 0; /* Ajusta ligeramente el padding */
    }

    /* Es importante apuntar a los párrafos dentro de la respuesta */
    .faq-answer p,
    .faq-answer li p, /* Si tienes párrafos dentro de listas */
    .faq-answer li { /* También afecta texto directo en li si no está en p */
        font-size: 0.9em; /* Reduce el tamaño de la fuente de la respuesta */
        line-height: 1.5; /* Ajusta interlineado si es necesario */
    }

     /* Ajusta el tamaño del icono si es necesario */
    .icon {
       font-size: 1.3em;
    }

    /* Ajusta el padding de la respuesta si es necesario */
    .faq-answer {
       padding: 10px 0 5px 8px; /* Reduce padding */
    }
}

/* Opcional: Estilos para pantallas muy pequeñas (ej. móviles pequeños, hasta 480px) */
@media (max-width: 480px) {
    .faq-container h1 {
        font-size: 1.3em; /* Aún más pequeño */
    }

     .faq-question {
        font-size: 0.95em; /* Ligeramente más pequeño */
    }

    .faq-answer p,
    .faq-answer li p,
    .faq-answer li {
        font-size: 0.85em; /* Texto de respuesta más pequeño */
    }

    .icon {
       font-size: 1.2em; /* Icono más pequeño */
    }
}