/** 
 * FILE CUSTOM STYLES
 *
 */

/* 
**** Bloque de FAQs ***
*/

/* Contenedor principal */
.faq-section { padding: 60px 20px; transition: background-color 0.3s ease, color 0.3s ease; position: relative; left: -0.9375rem; width: calc(100% + 30px); height: 100%; overflow: hidden; }
.faq-section__container { max-width: 1200px; margin: 0 auto; }
.faq-section__title{ font-size: 2.5rem; font-weight: 400; text-transform: uppercase; }
/* Modificadores Dark/Light */
.faq-section--dark { background-color: #1a1a1a; color: #ffffff; }
.faq-section--dark .faq-section__question { border-bottom-color: #666; color: #fff; }
.faq-section--dark .faq-section__item:first-child { border-top: 1px solid; border-top-color: #666; }
/* Damos color solo al borde de la flecha y quitamos el fondo macizo */
.faq-section--dark .faq-section__icon::after { border-color: #fff; background-color: transparent; }
.faq-section--light { background-color: #f5f5f5; color: #1a1a1a; }
.faq-section--light .faq-section__question { border-bottom-color: #ddd; color: #1a1a1a; }
/* Damos color solo al borde de la flecha y quitamos el fondo macizo */
.faq-section--light .faq-section__icon::after { border-color: #1a1a1a; background-color: transparent; }
/* Resumen (Summary) */
.faq-section__summary { margin-bottom: 30px; margin-top: 20px; font-size: 1rem; line-height: 1.6; }
/* Elementos del Acordeón */
.faq-section__item { margin-bottom: 10px; }
.faq-section__question { width: 100%; text-align: left; background: transparent; border: none; border-bottom: 1px solid; padding: 20px 0; font-size: 1rem; font-weight: bold; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
/* --- ICONO (ANGLE DOWN / UP) --- */
.faq-section__icon { position: relative; width: 24px; height: 24px; flex-shrink: 0; margin-left: 15px; }
/* La flecha apuntando hacia abajo (Angle Down) */
.faq-section__icon::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; border-bottom: 2px solid; border-right: 2px solid;
    /* Lo centramos y lo rotamos 45 grados */
    transform: translate(-50%, -70%) rotate(45deg); transition: transform 0.3s ease;
}
/* La flecha apuntando hacia arriba (Angle Up) cuando está abierto */
.faq-section__question[aria-expanded="true"] .faq-section__icon::after { transform: translate(-50%, -30%) rotate(225deg); }


/* Animación de la Respuesta */
.faq-section__answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.faq-section__answer-inner { padding: 20px 0; line-height: 1.6; }
.faq-section__answer-inner p { font-size: 0.875rem; font-weight: 400; }
/* Botón Ver Más */
.faq-section__actions { text-align: center; margin-top: 40px; }
.faq-section--dark .faq-section__btn-more { background-color: rgba(0, 0, 0, 0); border-color: #fff; color: #fff; }
.faq-section--light .faq-section__btn-more { background-color: rgba(0, 0, 0, 0); border-color: #1a1a1a; color: #1a1a1a; }
.faq-section__btn-more:hover{ text-decoration: underline; }

/* 
**** FIN Bloque de FAQs ***
*/