/* =============================================================================
   FAQ — página de preguntas frecuentes
   Desplegables nativos (<details>), buscador e índice de secciones.
   Se carga solo en las páginas marcadas como FAQ.
   ============================================================================= */

/* El padding de arriba no es decorativo: la cabecera es fija y, sin él,
   la primera línea de texto queda por debajo. page.php no envuelve el
   contenido en ningún contenedor, así que los márgenes laterales también van aquí. */
.mt-faq {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--mt-space-10) var(--mt-container-gutter) var(--mt-space-16);
}

/* -----------------------------------------------------------------------------
   CABECERA
   -------------------------------------------------------------------------- */

.mt-faq-header {
  margin-bottom: var(--mt-space-10);
}

.mt-faq-title {
  margin: 0 0 var(--mt-space-4);
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-3xl);
  font-weight: var(--mt-font-weight-regular);
  line-height: var(--mt-line-height-none);
  letter-spacing: var(--mt-letter-spacing-wide);
  text-transform: uppercase;
  color: var(--mt-color-text-heading);
}

.mt-faq-intro p {
  margin: 0 0 var(--mt-space-4);
  font-size: var(--mt-font-size-md);
  line-height: var(--mt-line-height-relaxed);
  color: var(--mt-color-text-secondary);
}

.mt-faq-intro p:last-child {
  margin-bottom: 0;
}

.mt-faq-count {
  display: inline-block;
  padding: var(--mt-space-1) var(--mt-space-3);
  margin: var(--mt-space-4) 0 0;
  font-size: var(--mt-font-size-xs);
  font-weight: var(--mt-font-weight-semibold);
  letter-spacing: var(--mt-letter-spacing-wide);
  text-transform: uppercase;
  color: var(--mt-color-primary-dark);
  background: var(--mt-color-primary-light);
  border-radius: var(--mt-radius-pill);
}

/* -----------------------------------------------------------------------------
   BUSCADOR
   -------------------------------------------------------------------------- */

.mt-faq-search {
  margin-bottom: var(--mt-space-6);
}

.mt-faq-search-field {
  position: relative;
  display: block;
}

.mt-faq-search-icon {
  position: absolute;
  top: 50%;
  left: var(--mt-space-5);
  transform: translateY(-50%);
  color: var(--mt-color-text-secondary);
  pointer-events: none;
  transition: var(--mt-transition-colors);
}

/* La especificidad va contra los estilos globales de input del tema, que ya
   dan una altura y un padding propios a todos los campos. */
.mt-faq .mt-faq-search-input {
  width: 100%;
  padding: var(--mt-space-4) var(--mt-space-5) var(--mt-space-4) var(--mt-space-12);
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-base);
  color: var(--mt-color-text-primary);
  background: var(--mt-color-bg-white);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-pill);
  box-shadow: var(--mt-shadow-sm);
  transition: var(--mt-transition-base);
  -webkit-appearance: none;
  appearance: none;
}

.mt-faq .mt-faq-search-input:focus {
  outline: none;
  border-color: var(--mt-color-primary-dark);
  box-shadow: 0 0 0 4px var(--mt-color-primary-light);
}

.mt-faq-search-field:focus-within .mt-faq-search-icon {
  color: var(--mt-color-primary-dark);
}

/* La crucecita nativa de Safari/Chrome dentro de un campo redondeado queda pegada
   al borde; se separa un poco. */
.mt-faq .mt-faq-search-input::-webkit-search-cancel-button {
  margin-right: var(--mt-space-2);
}

.mt-faq-empty {
  padding: var(--mt-space-6);
  margin-bottom: var(--mt-space-8);
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-secondary);
  text-align: center;
  background: var(--mt-color-bg-subtle);
  border: 1px dashed var(--mt-color-border);
  border-radius: var(--mt-radius-md);
}

/* -----------------------------------------------------------------------------
   ÍNDICE DE SECCIONES
   -------------------------------------------------------------------------- */

.mt-faq-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mt-space-2);
  margin-bottom: var(--mt-space-10);
}

.mt-faq-nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--mt-space-2);
  padding: var(--mt-space-2) var(--mt-space-4);
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-medium);
  color: var(--mt-color-text-body);
  text-decoration: none;
  background: var(--mt-color-bg-white);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-pill);
  transition: var(--mt-transition-base);
}

/* Blanco sobre primary-dark (5,06:1), como los botones: sobre el turquesa de
   marca se quedaba en 2,49:1. */
.mt-faq-nav-link:hover,
.mt-faq-nav-link:focus-visible {
  color: var(--mt-color-white);
  background: var(--mt-color-primary-dark);
  border-color: var(--mt-color-primary-dark);
}

.mt-faq-nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  padding: 0 0.35em;
  font-size: var(--mt-font-size-xs);
  font-weight: var(--mt-font-weight-semibold);
  /* primary-dark sobre primary-light: 4,64:1 (con primary, 2,28:1). */
  color: var(--mt-color-primary-dark);
  background: var(--mt-color-primary-light);
  border-radius: var(--mt-radius-pill);
  transition: var(--mt-transition-colors);
}

.mt-faq-nav-link:hover .mt-faq-nav-count,
.mt-faq-nav-link:focus-visible .mt-faq-nav-count {
  color: var(--mt-color-primary-dark);
  background: var(--mt-color-white);
}

/* -----------------------------------------------------------------------------
   SECCIONES
   -------------------------------------------------------------------------- */

.mt-faq-section {
  margin-bottom: var(--mt-space-12);
  /* Para que el ancla no quede oculta bajo la cabecera fija. */
  scroll-margin-top: calc(var(--mt-header-height) + var(--mt-space-6));
}

.mt-faq-section:last-of-type {
  margin-bottom: var(--mt-space-8);
}

.mt-faq-section-title {
  margin: 0 0 var(--mt-space-5);
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-2xl);
  font-weight: var(--mt-font-weight-regular);
  line-height: var(--mt-line-height-none);
  letter-spacing: var(--mt-letter-spacing-wide);
  text-transform: uppercase;
  color: var(--mt-color-text-heading);
}

/* -----------------------------------------------------------------------------
   DESPLEGABLES
   -------------------------------------------------------------------------- */

.mt-faq-items {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-3);
}

.mt-faq-item {
  background: var(--mt-color-bg-white);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-md);
  transition: var(--mt-transition-base);
}

.mt-faq-item:hover {
  border-color: var(--mt-color-primary);
}

.mt-faq-item[open] {
  border-color: var(--mt-color-primary);
  box-shadow: var(--mt-shadow-sm);
}

.mt-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mt-space-4);
  padding: var(--mt-space-5) var(--mt-space-6);
  cursor: pointer;
  list-style: none;
}

/* Fuera el triángulo por defecto: ponemos uno propio. */
.mt-faq-question::-webkit-details-marker {
  display: none;
}

.mt-faq-question::marker {
  content: '';
}

.mt-faq-question:focus-visible {
  outline: 2px solid var(--mt-color-primary-dark);
  outline-offset: -2px;
  border-radius: var(--mt-radius-md);
}

.mt-faq-question-text {
  margin: 0;
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-base);
  font-weight: var(--mt-font-weight-semibold);
  line-height: var(--mt-line-height-snug);
  letter-spacing: var(--mt-letter-spacing-normal);
  text-transform: none;
  color: var(--mt-color-text-primary);
  transition: var(--mt-transition-colors);
}

.mt-faq-item[open] .mt-faq-question-text,
.mt-faq-question:hover .mt-faq-question-text {
  color: var(--mt-color-primary-dark);
}

/* El signo + que gira hasta ser un − */
.mt-faq-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  background: var(--mt-color-primary-light);
  border-radius: var(--mt-radius-pill);
  transition: var(--mt-transition-base);
}

.mt-faq-toggle::before,
.mt-faq-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: var(--mt-color-primary-dark);
  border-radius: var(--mt-radius-sm);
  transform: translate(-50%, -50%);
  transition: var(--mt-transition-base);
}

.mt-faq-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.mt-faq-item[open] .mt-faq-toggle {
  background: var(--mt-color-primary);
}

.mt-faq-item[open] .mt-faq-toggle::before,
.mt-faq-item[open] .mt-faq-toggle::after {
  background: var(--mt-color-white);
}

.mt-faq-item[open] .mt-faq-toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.mt-faq-answer {
  padding: 0 var(--mt-space-6) var(--mt-space-5);
}

.mt-faq-answer p {
  margin: 0 0 var(--mt-space-3);
  font-size: var(--mt-font-size-base);
  line-height: var(--mt-line-height-relaxed);
  color: var(--mt-color-text-body);
}

.mt-faq-answer p:last-child {
  margin-bottom: 0;
}

.mt-faq-answer a {
  color: var(--mt-color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mt-faq-answer a:hover {
  color: var(--mt-color-primary-darker);
}

/* La apertura se anima solo si la persona no ha pedido menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
  .mt-faq-item[open] .mt-faq-answer {
    animation: mt-faq-reveal 0.25s ease;
  }
}

@keyframes mt-faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Oculto por el buscador */
.mt-faq-item[hidden],
.mt-faq-section[hidden] {
  display: none !important;
}

/* -----------------------------------------------------------------------------
   BLOQUE DE AYUDA FINAL
   -------------------------------------------------------------------------- */

.mt-faq-help {
  padding: var(--mt-space-10) var(--mt-space-6);
  margin-top: var(--mt-space-12);
  text-align: center;
  background: var(--mt-color-primary-subtle);
  border: 1px solid var(--mt-color-primary-band);
  border-radius: var(--mt-radius-lg);
}

.mt-faq-help-title {
  margin: 0 0 var(--mt-space-3);
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-xl);
  font-weight: var(--mt-font-weight-regular);
  line-height: var(--mt-line-height-none);
  letter-spacing: var(--mt-letter-spacing-wide);
  text-transform: uppercase;
  color: var(--mt-color-text-heading);
}

.mt-faq-help-text {
  margin: 0 0 var(--mt-space-6);
  font-size: var(--mt-font-size-base);
  color: var(--mt-color-text-body);
}

.mt-faq-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mt-space-3);
  justify-content: center;
}

/* Los botones se definen aquí y no se reaprovecha .mt-btn porque ese vive
   en woocommerce.css, que en esta página no se carga —ni merece la pena
   cargar una hoja entera de tienda para dos enlaces—. El aspecto es el
   mismo: mismas variables, mismas medidas. */
.mt-faq-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--mt-space-2);
  padding: var(--mt-space-3) var(--mt-space-6);
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--mt-radius-pill);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.mt-faq-btn--primary {
  color: var(--mt-color-white);
  background-color: var(--mt-color-primary-dark);
  border-color: var(--mt-color-primary-dark);
}

.mt-faq-btn--primary:hover,
.mt-faq-btn--primary:focus-visible {
  color: var(--mt-color-white);
  transform: translateY(-1px);
}

.mt-faq-btn--outline {
  color: var(--mt-color-text-secondary);
  background-color: transparent;
  border-color: var(--mt-color-border);
}

.mt-faq-btn--outline:hover,
.mt-faq-btn--outline:focus-visible {
  color: var(--mt-color-primary-dark);
  border-color: var(--mt-color-primary-dark);
  transform: translateY(-1px);
}

/* -----------------------------------------------------------------------------
   A PARTIR DE TABLET
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .mt-faq {
    padding-top: var(--mt-space-16);
    padding-bottom: var(--mt-space-20);
  }

  .mt-faq-title {
    font-size: var(--mt-font-size-4xl);
  }

  .mt-faq-section-title {
    font-size: var(--mt-font-size-3xl);
  }

  .mt-faq-question {
    padding: var(--mt-space-6) var(--mt-space-8);
  }

  .mt-faq-question-text {
    font-size: var(--mt-font-size-md);
  }

  .mt-faq-answer {
    padding: 0 var(--mt-space-8) var(--mt-space-6);
  }

  .mt-faq-help {
    padding: var(--mt-space-12) var(--mt-space-10);
  }

  .mt-faq-help-title {
    font-size: var(--mt-font-size-2xl);
  }
}