/* ============================================================
   OG FAQ — Acordeón CSS puro para las 5 páginas de soluciones.

   MODO OSCURO: réplica del acordeón de la landing de ciberseguridad
   (--text #e4e4e7 · --text-dim · --green #73bd1e · --black #02050a)
   con RESET de Bootstrap y fondo propio del bloque, para que se vea
   idéntico al ejemplo sin depender del fondo de la sección.

   MODO CLARO: overrides con el sistema de tema de Open Group
   ([data-theme="light"] + variables --rr-color-*).

   El texto de las respuestas queda SIEMPRE en el DOM (aunque el
   acordeón esté colapsado) para que los buscadores e IA lo lean.
   ============================================================ */

.og-faq-section {
  /* tokens del acordeón (valores de la landing) */
  --ogfq-green: #73bd1e;
  --ogfq-black: #02050a;
  --ogfq-text: #e4e4e7;
  --ogfq-text-dim: #a1a1aa;   /* un punto más claro que #71717a para legibilidad sobre negro */
  --ogfq-line: rgba(115, 189, 30, .08);
  padding: 80px 0;
  position: relative;
  background: var(--ogfq-black);   /* contexto idéntico a la landing */
}

/* ---------- Encabezado ---------- */
.og-faq-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 42px;
}
.og-faq-section .og-faq-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--rr-ff-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ogfq-green);
  margin-bottom: 14px;
}
.og-faq-section .og-faq-label::before,
.og-faq-section .og-faq-label::after {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}
.og-faq-section .og-faq-title {
  font-family: var(--rr-ff-heading, 'Plus Jakarta Sans', serif);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--ogfq-text);
}
.og-faq-section .og-faq-sub {
  margin: 0 auto;
  font-family: var(--rr-ff-p, 'Plus Jakarta Sans', sans-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ogfq-text-dim);
}

/* ============================================================
   ACORDEÓN — reset de Bootstrap + estilos del ejemplo
   ============================================================ */
.og-faq-section .og-faq-accordion.accordion {
  /* reset de variables Bootstrap */
  --bs-accordion-color: var(--ogfq-text);
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: transparent;
  --bs-accordion-border-width: 0;
  --bs-accordion-inner-border-radius: 14px;
  --bs-accordion-btn-color: var(--ogfq-text);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-color: var(--ogfq-green);
  --bs-accordion-active-bg: transparent;

  background: rgba(115, 189, 30, .02);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  border: 1px solid var(--ogfq-line);
  max-width: 720px;
  margin: 0 auto;
}

.og-faq-section .accordion-item {
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ogfq-line) !important;
  border-radius: 0;
  animation: ogAccSlideIn .5s ease forwards;
  opacity: 0;
}
.og-faq-section .accordion-item:last-child { border-bottom: none !important; }
.og-faq-section .accordion-item:nth-child(1)  { animation-delay: .1s; }
.og-faq-section .accordion-item:nth-child(2)  { animation-delay: .2s; }
.og-faq-section .accordion-item:nth-child(3)  { animation-delay: .3s; }
.og-faq-section .accordion-item:nth-child(4)  { animation-delay: .4s; }
.og-faq-section .accordion-item:nth-child(5)  { animation-delay: .5s; }
.og-faq-section .accordion-item:nth-child(6)  { animation-delay: .6s; }
.og-faq-section .accordion-item:nth-child(7)  { animation-delay: .7s; }
.og-faq-section .accordion-item:nth-child(8)  { animation-delay: .8s; }
.og-faq-section .accordion-item:nth-child(9)  { animation-delay: .9s; }
.og-faq-section .accordion-item:nth-child(10) { animation-delay: 1s; }

@keyframes ogAccSlideIn {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

.og-faq-section .accordion-input { display: none; }

.og-faq-section .accordion-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 30px;
  cursor: pointer;
  background: rgba(2, 5, 10, .4);
  color: var(--ogfq-text);
  font-family: var(--rr-ff-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  transition: all .3s ease;
  position: relative;
  user-select: none;
  margin: 0;
  border-radius: 0;
}
.og-faq-section .accordion-label:hover {
  background: rgba(115, 189, 30, .04);
  padding-left: 38px;
}
.og-faq-section .accordion-label::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: rgba(115, 189, 30, .12);
  transition: all .3s ease;
  border-radius: 0 2px 2px 0;
}
.og-faq-section .accordion-label:hover::before {
  background: var(--ogfq-green);
  width: 5px;
  opacity: .6;
}

.og-faq-section .accordion-q {
  display: block;
  padding-right: 16px;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* icono + / – */
.og-faq-section .accordion-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px; min-width: 28px;
  background: rgba(115, 189, 30, .1);
  border-radius: 50%;
  transition: all .4s ease;
  flex-shrink: 0;
  margin-left: 18px;
  position: relative;
}
.og-faq-section .accordion-icon::before,
.og-faq-section .accordion-icon::after {
  content: '';
  position: absolute;
  background: var(--ogfq-green);
  transition: all .3s ease;
  border-radius: 1px;
}
.og-faq-section .accordion-icon::before { width: 12px; height: 2px; }
.og-faq-section .accordion-icon::after  { width: 2px; height: 12px; }

/* abierto */
.og-faq-section .accordion-input:checked + .accordion-label {
  background: rgba(115, 189, 30, .05);
  color: var(--ogfq-green);
}
.og-faq-section .accordion-input:checked + .accordion-label::before {
  background: var(--ogfq-green);
  width: 5px;
  opacity: 1;
}
.og-faq-section .accordion-input:checked + .accordion-label .accordion-icon {
  transform: rotate(180deg);
  background: var(--ogfq-green);
}
.og-faq-section .accordion-input:checked + .accordion-label .accordion-icon::before { background: var(--ogfq-black); }
.og-faq-section .accordion-input:checked + .accordion-label .accordion-icon::after  { opacity: 0; }

/* contenido — el texto sigue en el DOM aunque esté colapsado */
.og-faq-section .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s cubic-bezier(.4, 0, .2, 1);
  background: rgba(0, 0, 0, .2);
  padding: 0;
  border: 0;
}
.og-faq-section .accordion-input:checked ~ .accordion-content { max-height: 320px; }
.og-faq-section .accordion-content-inner {
  padding: 20px 30px 28px 30px;
  font-family: var(--rr-ff-p, 'Plus Jakarta Sans', sans-serif);
  color: var(--ogfq-text-dim);
  line-height: 1.7;
  font-size: .92rem;
}
.og-faq-section .accordion-content-inner p { margin: 0; color: inherit; }
.og-faq-section .accordion-content-inner strong {
  color: var(--ogfq-green);
  font-weight: 600;
}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 991px) {
  .og-faq-section { padding: 60px 0; }
  .og-faq-section .og-faq-title { font-size: 27px; }
}
@media only screen and (max-width: 767px) {
  .og-faq-section { padding: 50px 0; }
  .og-faq-section .og-faq-title { font-size: 23px; }
  .og-faq-section .og-faq-sub { font-size: 14px; }
  .og-faq-section .accordion-label { padding: 18px 20px; font-size: .96rem; }
  .og-faq-section .accordion-label:hover { padding-left: 24px; }
  .og-faq-section .accordion-content-inner { padding: 16px 20px 22px 20px; }
  .og-faq-section .og-faq-accordion.accordion { border-radius: 12px; }
  .og-faq-section .accordion-input:checked ~ .accordion-content { max-height: 620px; }
}

/* ============================================================
   MODO CLARO — patrón de tema de Open Group
   ============================================================ */
[data-theme="light"] .og-faq-section {
  --ogfq-text: var(--rr-color-heading-primary, #11151c);
  --ogfq-text-dim: var(--rr-color-text-body-light, #74787c);
  --ogfq-line: var(--rr-color-border-light, #e4e4e4);
  background: var(--rr-color-common-white, #ffffff);
}
[data-theme="light"] .og-faq-section .og-faq-title {
  color: var(--rr-color-heading-primary, #11151c);
}
[data-theme="light"] .og-faq-section .og-faq-sub {
  color: var(--rr-color-text-body-light, #74787c);
}
[data-theme="light"] .og-faq-section .og-faq-accordion.accordion {
  --bs-accordion-bg: transparent;
  background: var(--rr-color-common-white, #ffffff);
  border-color: var(--rr-color-border-light, #e4e4e4);
  box-shadow: 0 10px 30px rgba(17, 21, 28, .08);
}
[data-theme="light"] .og-faq-section .accordion-item {
  background-color: transparent !important;
  border-bottom-color: var(--rr-color-border-light, #e4e4e4) !important;
}
[data-theme="light"] .og-faq-section .accordion-label {
  background: var(--rr-color-grey-light, #f2f3f4);
  color: var(--rr-color-heading-primary, #11151c);
}
[data-theme="light"] .og-faq-section .accordion-label:hover {
  background: rgba(115, 189, 30, .07);
}
[data-theme="light"] .og-faq-section .accordion-input:checked + .accordion-label {
  background: rgba(115, 189, 30, .1);
  color: var(--rr-color-theme-primary, #73bd1e);
}
[data-theme="light"] .og-faq-section .accordion-content {
  background: var(--rr-color-common-white, #ffffff);
}
[data-theme="light"] .og-faq-section .accordion-content-inner {
  color: var(--rr-color-text-body-light, #74787c);
}

/* accesibilidad: foco visible */
.og-faq-section .accordion-input:focus-visible + .accordion-label {
  outline: 2px solid var(--ogfq-green);
  outline-offset: -2px;
}

/* movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .og-faq-section .accordion-item { animation: none; opacity: 1; }
  .og-faq-section .accordion-content { transition: none; }
}