{# ==== FAQ / PREGUNTAS FRECUENTES (HubSpot Module) ==== #}
 

/* Contenedor */
.faq-accordion { display: grid; gap: 16px; }

/* Item (cerrado) */
.faq-item {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  overflow: hidden;
}

/* Cabecera / conmutador */
.faq-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px;
  background: transparent; /* se ve el fondo del item */
  border: 0;
  cursor: pointer;
  text-align: left;
}

/* Título (cerrado) */
.faq-title {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  color: #6A6A6A; /* color al cerrar */
  margin: 0;
}

/* Panel */
.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-content {
  padding: 0 22px 22px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: #2E475D; /* se sobreescribe al abrir */
}

/* ===== Abierto ===== */
.faq-item.is-open {
  background: linear-gradient(90deg, #02101C 0%, #0A67B1 100%);
}
.faq-item.is-open .faq-toggle { padding-bottom: 10px; }
.faq-item.is-open .faq-title   { color: #ffffff; }
.faq-item.is-open .faq-content { color: #ffffff; }

/* Icono */
.faq-icon { flex: 0 0 auto; display: block; }

/* Accesibilidad */
.faq-toggle:focus-visible { outline: 3px solid rgba(11,149,211,.5); outline-offset: 2px; }


/*--- Hover ---*/
.faq-toggle {
    background: transparent !important;
  }
  
  .faq-toggle:hover,
  .faq-toggle:focus,
  .faq-toggle:active {
    background: transparent !important;
    box-shadow: none !important;
  } 


  .button:active {
    background-color: #91a289;
    border: 1px solid #ffffff00 !important;
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-style: normal;
    font-weight: 600;
    text-decoration: none;
    fill: #fff; 
}

.faq-toggle:focus-visible { 
  outline: 3px solid rgba(11,149,211,.5); 
  outline-offset: 2px; 
}
 
.faq-toggle:focus, 
.faq-toggle:focus-visible {
  outline: none !important;
  box-shadow: none !important; 
}

  .button:active, .button:focus, .button:hover, .hs-button:active, .hs-button:focus, .hs-button:hover, button:active, button:focus, button:hover {
    background-color: #415239;
    border: 1px solid #ffffff00 !important;
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-style: normal;
    font-weight: 600;
    text-decoration: none;
    fill: #fff;
}

/* Responsive */
@media (max-width: 768px) {
  .faq-toggle  { padding: 18px; }
  .faq-content { padding: 0 18px 18px; }
  .faq-title   { font-size: 20px; }
}