/* =================================================================
   JRI Core — sección FAQ
   Calcado del diseño estático (diseños/estaticos/assets/css/style.css).
   ================================================================= */

.jri-faq { background: var(--white); }
.jri-faq-inner { max-width: var(--container); }

.jri-faq-intro {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 var(--space-7);
}

.jri-faq-list { display: flex; flex-direction: column; }

.jri-faq-item {
  background: transparent;
  border-bottom: 1px solid var(--gray-150);
}

.jri-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  color: var(--near-black);
}
.jri-faq-item summary::-webkit-details-marker { display: none; }
.jri-faq-item summary::after {
  content: "⌄";
  flex: none;
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted-2);
  transition: transform .2s;
}
.jri-faq-item[open] summary::after { transform: rotate(180deg); }

/* Foco visible por teclado sin ensuciar el clic con ratón. */
.jri-faq-item summary:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.jri-faq-answer {
  padding: 0 0 var(--space-5);
  max-width: 90ch;
  color: var(--text-muted-2);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.7;
}
.jri-faq-answer > :first-child { margin-top: 0; }
.jri-faq-answer > :last-child { margin-bottom: 0; }
.jri-faq-answer a { color: var(--near-black); text-decoration: underline; }
.jri-faq-answer a:hover { color: var(--brand-gold); }

.jri-faq-footer {
  margin: var(--space-8) 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted-2);
}
.jri-faq-footer a { color: var(--near-black); font-weight: 600; text-decoration: underline; }
.jri-faq-footer a:hover { color: var(--brand-gold); }

@media (max-width: 767px) {
  .jri-faq-item summary { font-size: 16px; }
  .jri-faq-intro { font-size: 16px; }
}


/* =================================================================
   Variante de la ficha de producto (`jri-faq--producto`)
   Mismo acordeón, pero como está en el Figma: sin título, la entrada
   alineada a la izquierda y en gris, y la pregunta un punto más
   pequeña que en la portada.
   ================================================================= */
.jri-faq--producto .jri-faq-intro {
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted-2);
  margin-bottom: var(--space-5);
}
.jri-faq--producto .jri-faq-item summary { font-size: 15px; padding: var(--space-4) 0; }
.jri-faq--producto .jri-faq-item:first-child { border-top: 1px solid var(--gray-150); }