/* ==========================================================================
   Preguntas frecuentes
   Doble proposito: resuelven dudas reales antes de registrarse, y son el
   contenido visible que respalda el `FAQPage` del JSON-LD. Sin ellas en
   pantalla, Google ignora ese schema — o lo penaliza.
   Ademas cubren busquedas de cola larga: cada pregunta es una consulta que
   alguien escribe tal cual en el buscador.
   ========================================================================== */

.faq {
  position: relative;
  background: linear-gradient(180deg, var(--papel) 0%, #f2f1fb 100%);
}

.faq__lista {
  display: grid;
  gap: .75rem;
  max-width: 54rem;
}

.faq__caja {
  background: var(--papel-alto);
  border: 1px solid var(--linea);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.faq__caja:hover { border-color: #c9c7e4; }
.faq__caja[open] {
  border-color: #cfccf3;
  box-shadow: var(--sombra-media);
}

.faq__pregunta {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  font-size: 1.02rem;
  font-weight: 620;
  letter-spacing: -.015em;
  cursor: pointer;
  list-style: none;
  transition: color .2s;
}
/* El triangulo por defecto de <summary> no encaja con el diseño */
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta::marker { content: ''; }

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

/* El signo que gira al abrir: dos rayas cruzadas, la vertical desaparece */
.faq__mas {
  position: relative;
  width: 20px; height: 20px;
  margin-left: auto;
  flex: 0 0 auto;
}
.faq__mas::before, .faq__mas::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--violeta);
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .3s;
}
.faq__mas::after { transform: rotate(90deg); }
.faq__caja[open] .faq__mas::after { transform: rotate(0); opacity: 0; }

.faq__respuesta {
  padding: 0 1.4rem 1.3rem;
  color: var(--tinta-media);
  font-size: .97rem;
  max-width: 62ch;
}
/* El «escribenos» de las respuestas: sin esto hereda el color del parrafo
   y se queda invisible como enlace. */
.faq__respuesta a {
  color: var(--violeta);
  text-decoration: underline;
  text-underline-offset: .16em;
  text-decoration-color: rgba(50, 45, 161, .35);
  transition: text-decoration-color .2s;
}
.faq__respuesta a:hover { text-decoration-color: var(--violeta); }

/* La apertura se anima: sin esto el contenido aparece de golpe */
@supports (interpolate-size: allow-keywords) {
  .faq__caja::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .35s cubic-bezier(.2, .8, .2, 1), content-visibility .35s allow-discrete;
  }
  .faq__caja[open]::details-content { block-size: auto; }
}

/* Cierre de la seccion: enlace a soporte para quien no encuentre su duda */
.faq__pie {
  margin-top: 2.5rem;
  font-size: .95rem;
  color: var(--tinta-suave);
}
.faq__pie a {
  color: var(--violeta);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}