/*
 * Evomarca V1.0 — estilos-faq.css
 * Acordeón de preguntas frecuentes (mismo estilo en DYO y resto de páginas).
 */

.faq-acordeon,
.dyo-faq {
  padding-block: 28px 48px;
}

.faq-acordeon h2,
.dyo-faq h2 {
  color: var(--color-principal);
  margin: 0 0 8px;
  text-align: left;
}

.faq-acordeon__lead,
.dyo-faq__lead {
  margin: 0 0 22px;
  color: var(--color-gris-700);
  font-size: 0.9375rem;
}

.faq-acordeon__item,
.dyo-faq__item {
  border-bottom: 1px solid var(--color-gris-100);
  padding: 0;
}

.faq-acordeon__item summary,
.dyo-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 4px;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-principal);
  line-height: 1.35;
  transition: color 0.25s var(--easing);
}

.faq-acordeon__item summary::-webkit-details-marker,
.dyo-faq__item summary::-webkit-details-marker {
  display: none;
}

.faq-acordeon__item summary::after,
.dyo-faq__item summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--color-principal);
  border-bottom: 2px solid var(--color-principal);
  transform: rotate(45deg);
  transition: transform 0.3s var(--easing);
  margin-top: -0.2em;
}

.faq-acordeon__item[open] summary::after,
.dyo-faq__item[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 0.15em;
}

.faq-acordeon__item summary:hover,
.dyo-faq__item summary:hover {
  color: var(--color-principal-600);
}

.faq-acordeon__item p,
.dyo-faq__item p {
  margin: 0;
  padding: 0 4px 16px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-gris-700);
  max-width: 52rem;
  animation: faq-acordeon-abrir 0.35s var(--easing) both;
}

@keyframes faq-acordeon-abrir {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#preguntas-frecuentes,
#preguntas {
  scroll-margin-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-acordeon__item p,
  .dyo-faq__item p {
    animation: none !important;
  }
}