/* ═══ PREGUNTAS: acordeón nativo sobre crema ═══
   Va entre el naranja de Encontranos y el tinta del pie: la crema es el
   respiro que necesita el ojo antes del cierre oscuro. */
.faq { background: var(--crema); }

.faq__lista {
  display: grid;
  gap: var(--esp-1);
  margin-top: var(--esp-4);
  max-width: 52rem;
}

.faq__bloque {
  background: var(--tinte-brisa);
  border-radius: var(--radio);
  padding: var(--esp-2) var(--esp-3);
  transition: background-color var(--dur-media) var(--curva-suave);
}
.faq__bloque[open] { background: var(--hueso); }

/* Fuera el triangulito del navegador: el signo lo dibuja .faq__signo, así
   se ve igual en todos y respeta la paleta. */
.faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  min-height: 2.75rem;          /* 44px de área táctil, mínimo de WCAG */
  cursor: pointer;
  list-style: none;
}
.faq__pregunta::-webkit-details-marker { display: none; }

.faq__pregunta h3 {
  font-size: var(--paso-1);
  font-weight: 600;
  color: var(--marino);
}

/* Un más que se vuelve menos: dos trazos, cero imágenes, cero íconos nuevos.
   --marino en vez de --coral: 9.10:1 sobre --hueso y 9.86:1 sobre
   --tinte-brisa (el coral daba 2.61:1, no llega al 3:1 de UI no textual).
   El indicador real de estado sigue siendo el giro de 90° a 0°: mas cerrado,
   menos abierto, un cambio de forma que no depende del color. */
.faq__signo { position: relative; width: 1.1rem; height: 1.1rem; flex: none; }
.faq__signo::before,
.faq__signo::after {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 3px;
  border-radius: 99px;
  background: var(--marino);
  transform: translateY(-50%);
  transition: transform var(--dur-media) var(--curva-salida);
}
.faq__signo::after { transform: translateY(-50%) rotate(90deg); }
.faq__bloque[open] .faq__signo::after { transform: translateY(-50%) rotate(0deg); }

.faq__respuesta { padding-top: var(--esp-1); max-width: 46ch; }
.faq__respuesta p { font-size: var(--paso-0); color: var(--texto-suave); }
/* --marino en vez de --azul-vivo: 9.10:1 sobre --hueso y 9.86:1 sobre
   --tinte-brisa (el azul vivo daba 3.31:1 y 3.59:1, no llega al 4.5:1 de
   texto). El subrayado vuelve para que el enlace no dependa solo del color. */
.faq__respuesta a {
  color: var(--marino);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: .18em;
}
.faq__respuesta a:hover { color: var(--tinta); }

@media (prefers-reduced-motion: reduce) {
  .faq__bloque,
  .faq__signo::before,
  .faq__signo::after { transition: none; }
}