/* ============================================================
   Preguntas frecuentes. La usan la página de cada curso y la home del
   catálogo, así que vive aparte de curso.css.
   El contenido lo arma assets/faqs.js.
   ============================================================ */

/* la lista va centrada y a 820 px: a ancho completo la línea de respuesta se
   pasa de los 90 caracteres y cuesta seguirla */
.cu-faqs { padding: 3.6rem 0 4.2rem }
.cu-faq-lista { display: grid; gap: .55rem; max-width: 820px; margin-inline: auto }
.cu-faq { border: 1px solid var(--linea); border-radius: 12px; background: #fff; overflow: hidden }
.cu-faq > button {
  display: flex; align-items: center; gap: 1rem; width: 100%;
  padding: 1rem 1.1rem; text-align: left; cursor: pointer;
  font-size: .97rem; font-weight: 700; letter-spacing: -.01em;
}
.cu-faq > button:hover { color: var(--bordo) }
.cu-faq .mas {
  margin-left: auto; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bordo-050); color: var(--bordo); display: grid; place-items: center;
  font-size: .95rem; font-weight: 700; line-height: 1; transition: transform .25s, background .2s;
}
.cu-faq > button[aria-expanded="true"] .mas { transform: rotate(45deg); background: var(--bordo); color: #fff }
.cu-faq .cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease }
.cu-faq > button[aria-expanded="true"] + .cuerpo { grid-template-rows: 1fr }
.cu-faq .cuerpo > div { overflow: hidden }
.cu-faq .cuerpo p { padding: 0 1.1rem 1.1rem; color: var(--tinta-2); font-size: .92rem; line-height: 1.6 }

/* El dato que la persona vino a buscar —el precio, la duración, el sí o el
   no— va en negrita: en una respuesta de cinco líneas es lo que se ve al
   pasar la vista sin leer todo. */
.cu-faq .cuerpo p b { color: var(--tinta); font-weight: 700 }