/* ==========================================================================
   GELÉE — faq.css
   Preguntas frecuentes. Solo se carga en faq.html.

   Acordeón nativo con <details>/<summary>: sin JavaScript, sin ARIA extra.
   El navegador ya aporta el estado abierto/cerrado y el manejo de teclado.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Encabezado
   -------------------------------------------------------------------------- */
.faq__titulo { text-align: left; }

.faq__titulo::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin-top: var(--esp-24);
  background-color: var(--marca);
}

.faq__intro { margin-top: var(--esp-24); }

/* --------------------------------------------------------------------------
   2. Lista
   Separadores de 1px en --linea. Sin tarjetas, sin fondo, sin sombra.
   -------------------------------------------------------------------------- */
.faq__lista {
  max-width: var(--ancho-lectura);
  margin-top: var(--esp-40);
  border-top: 1px solid var(--linea);
}

@media (min-width: 900px) {
  .faq__lista { margin-top: var(--esp-48); }
}

.faq__item { border-bottom: 1px solid var(--linea); }

/* --------------------------------------------------------------------------
   3. Pregunta
   Se quita el triángulo por defecto: ::marker cubre los navegadores actuales
   y ::-webkit-details-marker los WebKit antiguos (Safari iOS < 16).
   -------------------------------------------------------------------------- */
.faq__pregunta {
  display: flex;
  align-items: center;
  gap: var(--esp-16);
  min-height: 56px;
  padding-block: var(--esp-16);
  cursor: pointer;
  list-style: none;
  font-family: var(--fuente-titulo);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--texto);
  transition: color var(--transicion);
}

.faq__pregunta::marker { content: ""; }
.faq__pregunta::-webkit-details-marker { display: none; }

.faq__pregunta:hover { color: var(--marca); }

/* El foco se dibuja sobre la fila completa, no sobre el texto suelto */
.faq__pregunta:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   4. Signo + / −
   Dos trazos de 1px: al abrir, el vertical rota 90° y se funde con el
   horizontal, así que el + se convierte en −. Solo transform, 160ms.
   -------------------------------------------------------------------------- */
.faq__signo {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: var(--marca);
}

.faq__signo::before,
.faq__signo::after {
  content: "";
  position: absolute;
  background-color: currentColor;
}

.faq__signo::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}

.faq__signo::after {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
  transition: transform var(--transicion);
}

.faq__item[open] .faq__signo::after {
  transform: translateX(-50%) rotate(90deg);
}

/* --------------------------------------------------------------------------
   5. Respuesta
   -------------------------------------------------------------------------- */
.faq__respuesta {
  padding-bottom: var(--esp-24);
}

.faq__respuesta p {
  max-width: none;
  line-height: 1.65;
  color: var(--texto-suave);
}

.faq__respuesta .pendiente { margin-top: 0; }

/* --------------------------------------------------------------------------
   6. Pie de página interno
   -------------------------------------------------------------------------- */
.faq__cierre {
  max-width: var(--ancho-lectura);
  margin-top: var(--esp-40);
  font-size: var(--t-chico);
  color: var(--texto-suave);
}

.faq__cierre a { color: var(--texto-suave); }
.faq__cierre a:hover { color: var(--marca); }