/**
 * ============================================
 * PREGUNTAS-FRECUENTES-CUSTOM.CSS
 * ============================================
 * Estilos específicos para la página de preguntas frecuentes (preguntas-frecuentes.html)
 * Incluye: tipografía, secciones colapsables FAQ
 */

/* ============================================
   TIPOGRAFÍA
   ============================================ */
body { 
  font-family: 'Noto Sans', sans-serif; 
}

.font-serif { 
  font-family: 'Noto Serif Display', serif; 
  font-weight: 100; 
}

/* ============================================
   SECCIONES COLAPSABLES FAQ
   ============================================ */
.faq-section { 
  border: 1px solid rgb(230 230 230); 
  border-radius: 0.5rem; 
  overflow: hidden; 
}

.dark .faq-section { 
  border-color: rgb(38 38 38); 
}

.faq-section + .faq-section { 
  margin-top: 0.75rem; 
}

.faq-section summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: 0.9375rem;
  text-align: center;
  cursor: pointer;
  background: rgb(245 245 245);
  color: rgb(23 23 23);
  -webkit-tap-highlight-color: transparent;
}

.dark .faq-section summary { 
  background: rgb(38 38 38); 
  color: rgb(243 244 246); 
}

.faq-section summary:hover { 
  background: rgb(230 230 230); 
}

.dark .faq-section summary:hover { 
  background: rgb(55 65 81); 
}

.faq-section summary .faq-arrow {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.2s ease;
}

.faq-section[open] summary .faq-arrow { 
  transform: rotate(180deg); 
}

.faq-section .faq-content {
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid rgb(230 230 230);
  background: white;
  color: rgb(55 65 71);
}

.dark .faq-section .faq-content { 
  border-color: rgb(38 38 38); 
  background: rgb(23 23 23); 
  color: rgb(209 213 219); 
}

.faq-content ul { 
  margin: 0; 
  padding-left: 1.25rem; 
  list-style-type: disc; 
}

.faq-content li { 
  margin-bottom: 0.5rem; 
}

.faq-content li:last-child { 
  margin-bottom: 0; 
}