/* ==========================================================================
   FAQ — FUNDO AZUL, 9 itens, tipografia/barras menores e topbar verde animada
   ========================================================================== */
:root{
  --faq-light:#FFFFFF; --faq-green:#95C93D; --faq-dark:#212C65; --faq-blue:#3D76BB;
  --faq-muted:#F5F7FA; --faq-border:#E1E6F2; --faq-radius:12px;
}
.faq-section{
  position: relative;
  padding: clamp(34px,6vw,66px) 1rem;
  background:
    radial-gradient(120% 140% at 85% -20%, color-mix(in srgb, var(--faq-blue) 70%, #000 30%) 0%, transparent 60%),
    linear-gradient(180deg, var(--faq-blue) 0%, color-mix(in srgb, var(--faq-dark) 85%, var(--faq-blue) 15%) 100%);
  color: var(--faq-light);
  overflow: hidden;
}
.faq-section::before,
.faq-section::after{
  content:""; position:absolute; z-index:0; pointer-events:none; opacity:.55; animation: faqFloat 18s ease-in-out infinite alternate;
}
.faq-section::before{
  width: 440px; height: 440px; left: -180px; top: -140px;
  background:
    radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--faq-green) 55%, #fff 45%), transparent 70%),
    conic-gradient(from 45deg, color-mix(in srgb, var(--faq-blue) 85%, #000 15%), transparent 40%);
  border-radius: 30% 70% 42% 58% / 58% 42% 62% 38%;
}
.faq-section::after{
  width: 560px; height: 560px; right: -220px; bottom: -180px;
  background:
    radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--faq-light) 85%, var(--faq-blue) 15%), transparent 70%),
    conic-gradient(from 180deg, color-mix(in srgb, var(--faq-dark) 70%, var(--faq-blue) 30%), transparent 45%);
  border-radius: 60% 40% 70% 30% / 42% 58% 40% 60%;
  animation-duration: 22s;
}
@keyframes faqFloat{ from{ transform: translateY(0) translateX(0) rotate(-1.5deg) } to{ transform: translateY(-14px) translateX(10px) rotate(1.5deg) } }

.faq-container{ position:relative; z-index:1; max-width:900px; margin:0 auto; text-align:left; }
.faq-topbar{
  display:block; width: clamp(160px, 32%, 320px); height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--faq-green), color-mix(in srgb, var(--faq-green) 20%, var(--faq-blue) 80%));
  margin: 0 auto 8px auto;
  animation: faqTopbarSlide 6s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes faqTopbarSlide{ from{ transform: translateX(-10px) } to{ transform: translateX(10px) } }

.faq-title{
  font-size: clamp(2.7rem, 8vw, 3rem); margin: 0 0 .35rem 0;
  text-align: center; color: var(--faq-light); font-weight: 900; letter-spacing: 6px;
}
.faq-subtitle{
  font-size: 18px; margin: 0 0 3rem 0; text-align: center; font-weight: 300;
  color: color-mix(in srgb, var(--faq-light) 88%, #0000 12%);
}

.faq-items{ display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background-color:#fff; border:1px solid var(--faq-border); border-radius: var(--faq-radius);
  box-shadow: 0 8px 22px rgba(0,0,0,.16); overflow:hidden;
  transition: box-shadow .25s ease, transform .18s ease, border-color .25s ease;
  opacity: 0; transform: translateY(18px); animation: fadeInUp .5s forwards;
}
.faq-item:nth-child(2){ animation-delay:.08s } .faq-item:nth-child(3){ animation-delay:.12s }
.faq-item:nth-child(4){ animation-delay:.16s } .faq-item:nth-child(5){ animation-delay:.20s }
.faq-item:nth-child(6){ animation-delay:.24s } .faq-item:nth-child(7){ animation-delay:.28s }
.faq-item:nth-child(8){ animation-delay:.32s } .faq-item:nth-child(9){ animation-delay:.36s }
.faq-item:hover{
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--faq-blue) 44%, var(--faq-border) 56%);
}

.faq-question{
  width:100%; padding:.85rem 1.05rem; font-size:12px; font-weight:500; letter-spacing: 2px;
  color: var(--faq-dark); background:#fff; border:0; cursor:pointer; text-align:left; outline:none;
  transition: background-color .25s ease, color .25s ease;
}
.faq-question:hover{ background:#F4F7FF; }
.faq-question[aria-expanded="true"]{ background:#F6FAFF; color: var(--faq-dark); box-shadow: inset 3px 0 0 0 var(--faq-green); }

.faq-answer{
  padding: 0 1.05rem .95rem; font-size: .9rem; color: var(--faq-dark); line-height: 1.58;
  animation: slideDown .32s ease-out forwards; border-top:1px solid var(--faq-border);
  display: none;
}
.faq-question[aria-expanded="true"] + .faq-answer{ display:block; }

.faq-question:focus-visible{
  outline:3px solid color-mix(in srgb, var(--faq-light) 70%, var(--faq-green) 30%); outline-offset:3px; border-radius:8px;
}
@keyframes fadeInUp{ 0%{ opacity:0; transform:translateY(18px) } 100%{ opacity:1; transform:translateY(0) } }
@keyframes slideDown{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:translateY(0) } }

/* Prefere redução de movimento (já existia) */
@media (prefers-reduced-motion: reduce){
  .faq-topbar{ animation: none; }
}

/* <=600px (já existia) */
@media (max-width: 600px){
  .faq-title{ font-size: 2.5rem; }
  .faq-question{ font-size: .7rem; }
  .faq-answer{ font-size: .88rem; }
}

@media (max-width: 600px){
  .faq-title{ font-size: 1.5rem; }
  .faq-subtitle{ font-size: 1.0rem;}
}

@media (max-width: 600px){
  .faq-question{ font-size: .7rem; }
}