/* Accordion styles inspired by CerdoEstratega.com (2025) */

/* Section wrapper */
#preguntas-frecuentes{
  background:#ffffff;
  color:#222222;
  font-family:"Montserrat","Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
}

/* Headline */
#preguntas-frecuentes > h2{
  font-weight:700;
  color:#222222;
  text-align:center;
  margin-bottom:2.5rem;
}

/* Accordion item */
#preguntas-frecuentes .acordeon-item{
  border-bottom:1px solid #e6e6e6;
  padding:0.75rem 0;
}

/* Remove default marker */
#preguntas-frecuentes summary{
  list-style:none;
}

#preguntas-frecuentes summary::-webkit-details-marker{
  display:none;
}

/* Summary styling */
#preguntas-frecuentes summary{
  cursor:pointer;
  font-weight:600;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  font-size:1rem;
  transition:color 0.25s ease;
}

/* Plus/Minus icon */
#preguntas-frecuentes summary span{
  font-size:1.2rem;
  color:#ff0066;
  transition:transform 0.25s ease;
}

/* Rotate icon when open */
#preguntas-frecuentes details[open] summary span{
  transform:rotate(45deg); /* plus → X (close) */
}

/* Content */
#preguntas-frecuentes details > div{
  margin-top:0.75rem;
  padding-left:0.25rem;
  animation:fadein 0.25s ease;
}

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

/* Accessibility focus */
#preguntas-frecuentes summary:focus{
  outline:2px dashed #ff0066;
  outline-offset:4px;
}

/* Responsive tweaks */
@media screen and (min-width:768px){
  #preguntas-frecuentes summary{
    font-size:1.1rem;
  }
}

/* Encabezado FAQ con título y subtítulo */
#preguntas-frecuentes .faq-title{
  font-weight:700;
  text-align:center;
  margin-bottom:2.5rem;
  line-height:1.2;
  font-size:2.8rem;      /* ajusta si lo quieres más grande o pequeño */
}

/* “Preguntas” en rojo (usa el mismo tono del icono) */
#preguntas-frecuentes .faq-title-red{
  color:#ff0066;         /* rojo / fucsia corporativo */
}

/* “frecuentes” en negro */
#preguntas-frecuentes .faq-title-black{
  color:#222222;
}

/* Subtítulo debajo, en negro normal */
#preguntas-frecuentes .faq-subtitle{
  display:block;         /* forzamos salto de línea */
  font-size:1rem;
  font-weight:400;
  color:#222222;
  margin-top:0.5rem;
}