#faq-view details {
    box-shadow: 0 0 4px 1px var(--pantone-313) !important; /* Usa el azul medio como sombra */
    border-radius: 6px;
    margin-bottom: 1.5rem; /* 23px ≈ 1.5rem (24px) usando unidades relativas */
    background-color: white; /* Fondo blanco para mejor contraste */
    padding: 1rem; /* Espaciado interno */
    transition: all 0.3s ease; /* Suaviza las transiciones */
}

#faq-view summary {
    color: var(--pantone-546); /* Usa el azul oscuro para el texto */
    font-weight: 700; /* Mantienes el bold */
    font-size: 1.125rem; /* ≈17.4px en rem (18px) */
    font-family: 'Montserrat', sans-serif; /* Coherencia tipográfica */
    padding: 0.5rem 0; /* Espaciado interno */
    cursor: pointer; /* Cambia el cursor a pointer */
    display: flex; /* Para alinear icono + texto */
    align-items: center;
    justify-content: space-between;
    list-style: none; /* Quita el marcador por defecto */
}

/* Quita el triángulo por defecto en algunos navegadores */
#faq-view summary::-webkit-details-marker {
    display: none;
}

/* Añade un icono personalizado (puedes usar un SVG o Font Awesome) */
#faq-view summary::after {
    content: '+';
    font-size: 1.5rem;
    color: var(--pantone-313);
    transition: transform 0.3s ease;
}

#faq-view details[open] summary::after {
    content: '-';
}

#faq-view .faq-description {
    padding: 1rem 0;
    color: var(--pantone-546); /* Texto en azul oscuro */
    font-weight: 400; /* Peso normal para mejor legibilidad */
    line-height: 1.6; /* Coherencia con el body */
}

#faq-view .faq-description p {
    margin: 0.8rem 0 0.2rem 0;
}

#faq-view summary:hover {
    color: var(--pantone-152) !important; /* Usa el naranja como hover */
}

/* Estilo cuando está abierto */
#faq-view details[open] summary {
    color: var(--pantone-313); /* Azul medio cuando está abierto */
    margin-bottom: 0.5rem;
}

/* Efecto de hover para el contenedor */
#faq-view details:hover {
    box-shadow: 0 0 6px 2px var(--pantone-313) !important;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    #faq-view details {
        margin-bottom: 1rem;
        padding: 0.75rem;
    }
    
    #faq-view summary {
        font-size: 1rem;
    }
}