/* Bloque de preguntas frecuentes (lo inserta scripts/build.py a partir de
   scripts/faq.py, justo antes del CTA final). Va aparte de site.css porque
   ese fichero lo regenera build.py.

   Fondo blanco; cada público tiene su escala tonal, como las FAQ en PDF:
   naranja para docentes y verde para estudiantes. Las tarjetas llevan el
   tono más claro de fondo y una barra del tono medio a la izquierda. */

#container .faq {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 90px 60px;
  background-color: #fff;
  font-family: "Titillium Web", sans-serif;
  color: #4d4d4d;
}

#container .faq--tablet,
#container .faq--mobile {
  padding: 60px 24px;
}

#container .faq__inner {
  width: 100%;
  max-width: 960px;
}

/* Escalas tonales */
#container .faq__tab--docentes,
#container .faq__audience--docentes {
  --tone-50: #fdf3ec;
  --tone-100: #fbe4d4;
  --tone-200: #f5c8a9;
  --tone-500: #f07d22;
  --tone-700: #d14900;
  --tone-800: #a83a00;
}

#container .faq__tab--estudiantes,
#container .faq__audience--estudiantes {
  --tone-50: #ebf7f5;
  --tone-100: #d2eee9;
  --tone-200: #a3dbd2;
  --tone-500: #00a191;
  --tone-700: #00796b;
  --tone-800: #005f54;
}

/* ---------- Cabecera: título y pestañas de público ---------- */
#container .faq__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
}

#container .faq__title {
  margin: 0;
  font-weight: 700;
  font-size: 48px;
  line-height: 56px;
  color: #222;
}

#container .faq__accent {
  color: #d14900;
  transition: color 0.2s ease;
}

/* Con "Estudiantes" elegido, el resaltado del título pasa al verde */
#container .faq[data-audience="estudiantes"] .faq__accent {
  color: #00796b;
}

#container .faq__audiences {
  display: inline-flex;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background-color: #f2f2f2;
}

#container .faq__tab {
  margin: 0;
  border: 0;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#container .faq__audiences .faq__tab {
  padding: 10px 28px;
  border-radius: 999px;
  background: transparent;
  color: #222;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
}

#container .faq__audiences .faq__tab:hover {
  color: var(--tone-700);
}

#container .faq__audiences .faq__tab[aria-selected="true"] {
  background-color: var(--tone-700);
  color: #fff;
}

#container .faq__tab:focus-visible {
  outline: 2px solid var(--tone-700);
  outline-offset: 2px;
}

/* ---------- Público: entradilla y pestañas de tema ---------- */
#container .faq__audience[hidden],
#container .faq__cards[hidden] {
  display: none;
}

#container .faq__intro {
  max-width: 720px;
  margin: 24px auto 40px;
  font-size: 20px;
  line-height: 28px;
  text-align: center;
}

/* Pestañas de tema: texto con filete inferior (no botones). Si no caben en
   una fila, se desplazan en horizontal; js/main.js marca con has-more-start
   / has-more-end si queda contenido oculto a cada lado, y se difumina ese
   borde. */
#container .faq__topics {
  position: relative;
  margin-bottom: 32px;
}

#container .faq__topics::before,
#container .faq__topics::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 1px;
  width: 48px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1;
}

#container .faq__topics::before {
  left: 0;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

#container .faq__topics::after {
  right: 0;
  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
}

#container .faq__topics.has-more-start::before,
#container .faq__topics.has-more-end::after {
  opacity: 1;
}

#container .faq__topics-list {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: inset 0 -1px 0 #e3e3e3;
}

#container .faq__topics-list::-webkit-scrollbar {
  display: none;
}

/* Centradas cuando caben; alineadas a la izquierda (y desplazables) cuando no */
#container .faq__topics-list > :first-child {
  margin-left: auto;
}

#container .faq__topics-list > :last-child {
  margin-right: auto;
}

#container .faq__topics .faq__tab {
  flex-shrink: 0;
  padding: 12px 0 13px;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #666;
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
}

#container .faq__topics .faq__tab:hover {
  color: var(--tone-700);
}

#container .faq__topics .faq__tab[aria-selected="true"] {
  color: var(--tone-800);
  border-bottom-color: var(--tone-700);
}

#container .faq__topics .faq__tab:focus-visible {
  outline-offset: -2px;
}

/* ---------- Tarjetas ---------- */
#container .faq__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#container .faq__card {
  border-left: 6px solid var(--tone-500);
  border-radius: 16px;
  background-color: var(--tone-50);
}

#container .faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 20px 26px;
  border-radius: 0 16px 16px 0;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: #1a1a1a;
}

#container .faq__question::-webkit-details-marker {
  display: none;
}

#container .faq__question:hover .faq__question-text {
  color: var(--tone-800);
}

#container .faq__question:focus-visible {
  outline: 2px solid var(--tone-700);
  outline-offset: 2px;
}

#container .faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--tone-100);
  color: var(--tone-700);
  transition: background-color 0.2s ease, color 0.2s ease;
}

#container .faq__icon svg {
  display: block;
}

#container .faq__icon-v {
  transform-origin: center;
  transition: transform 0.2s ease;
}

#container .faq__card[open] .faq__icon {
  background-color: var(--tone-700);
  color: #fff;
}

#container .faq__card[open] .faq__icon-v {
  transform: scaleY(0);
}

#container .faq__answer {
  padding: 0 32px 24px 26px;
  font-size: 18px;
  line-height: 28px;
}

#container .faq__answer > * {
  margin: 0;
}

#container .faq__answer > * + * {
  margin-top: 12px;
}

#container .faq__answer ul,
#container .faq__answer ol {
  padding-left: 24px;
}

#container .faq__answer ul {
  list-style: disc;
}

#container .faq__answer ol {
  list-style: decimal;
}

#container .faq__answer li + li {
  margin-top: 6px;
}

#container .faq__answer li::marker {
  color: var(--tone-700);
  font-weight: 700;
}

#container .faq__answer strong {
  font-weight: 700;
  color: #222;
}

#container .faq__link {
  color: var(--tone-800);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#container .faq__link:hover {
  color: var(--tone-700);
}

#container .faq__link:focus-visible {
  outline: 2px solid var(--tone-700);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Escritorio ----------
   La fila de temas es más ancha que las tarjetas (hasta 1240px, entrando en
   el margen lateral de la sección) para que quepa entera sin desplazarse en
   cualquier ancho de escritorio, idioma y navegador (Firefox pinta la fuente
   algo más ancha). */
#container .faq--desktop .faq__topics {
  margin-left: calc((100% - min(1240px, 100vw - 48px)) / 2);
  margin-right: calc((100% - min(1240px, 100vw - 48px)) / 2);
}

#container .faq--desktop .faq__topics-list {
  gap: 20px;
}

/* ---------- Tablet ---------- */
#container .faq--tablet .faq__title {
  font-size: 36px;
  line-height: 44px;
}

/* ---------- Móvil ---------- */
#container .faq--mobile .faq__title {
  font-size: 30px;
  line-height: 38px;
}

#container .faq--mobile .faq__header {
  align-items: stretch;
  text-align: left;
  gap: 24px;
}

#container .faq--mobile .faq__audiences {
  display: flex;
}

#container .faq--mobile .faq__audiences .faq__tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 8px;
  font-size: 16px;
  text-align: center;
}

#container .faq--mobile .faq__intro {
  margin: 24px 0 24px;
  font-size: 16px;
  line-height: 24px;
  text-align: left;
}

/* En móvil, la fila de temas llega al borde de la pantalla (el tema cortado
   indica que hay más) */
#container .faq--mobile .faq__topics {
  margin: 0 -24px 24px;
}

#container .faq--mobile .faq__topics-list {
  gap: 22px;
  padding: 0 24px;
  scroll-padding-inline: 24px;
}

#container .faq--mobile .faq__topics .faq__tab {
  font-size: 15px;
}

#container .faq--tablet .faq__card,
#container .faq--mobile .faq__card {
  border-left-width: 5px;
}

#container .faq--tablet .faq__question,
#container .faq--mobile .faq__question {
  padding: 16px 16px 16px 18px;
  font-size: 18px;
  line-height: 26px;
}

#container .faq--tablet .faq__answer,
#container .faq--mobile .faq__answer {
  padding: 0 20px 20px 18px;
  font-size: 16px;
  line-height: 24px;
}

#container .faq--mobile .faq__icon {
  width: 32px;
  height: 32px;
}

/* ---------- Menú de la cabecera (escritorio) ----------
   Con la entrada "FAQ", el menú de Figma (separación fija de 36px entre
   enlaces) ya no cabe entre 1280 y 1440px, sobre todo en catalán. La
   separación pasa a ser fluida (16px a 1280px, 36px a partir de 1440px) y se
   garantiza un mínimo de aire entre el logo, los enlaces y los botones. */
#container nav .css-z8tyeb {
  column-gap: clamp(16px, calc(16px + (100vw - 1280px) / 8), 36px);
}

#container nav .css-qs5z68 {
  column-gap: 24px;
}