/* ====== FAQ arrow (funciona com <svg>) ====== */
/* Coloque a transição no próprio SVG */
.faq-arrow {
  transition: transform 0.35s ease-in-out;
  transform-origin: center;
}

/* Rotaciona quando o checkbox (peer) está marcado */
input:checked+label .faq-arrow {
  transform: rotate(180deg);
}

/* Estado padrão (desmarcado) */
input:not(:checked)+label .faq-arrow {
  transform: rotate(0deg);
}

/* ====== Conteúdo expansível ====== */
input:not(:checked)+label+div {
  opacity: 0;
  height: 0;
  overflow: hidden;
  display: none;
  transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

input:checked+label+div {
  display: block;
  height: fit-content;
  opacity: 1;
  overflow: hidden;
  transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

/* Banner Gradient Background */

.banner-background {
  background: linear-gradient(to left, #FFEFAD 0%, #FFDF57 50%, #FFCE0C 100%);
}

html, body {
  overflow-x: hidden;
}

:root {
  /* Changed/Added colors on Figma */
  --website-background: #FFFFFF;
  --section-background: #F4F4F4;
  --card-background: #F4F4F4;
  --platform-background: #FFFFFF;
  --platform-icon-background: #F4F4F4;
  --faq-text: #000000;
  /* Not Changed */
  --primary-yellow: #FFB800;
  --grey-5: #E8E8E8;
  --common-text: #000000;
  --common-black: #000000;
}

.dark {
  /* Changed/Added colors on Figma */
  --website-background: #000000;
  --section-background: #0A0A0A;
  --card-background: #171717;
  --platform-background: #171717;
  --platform-icon-background: #353535;
  --faq-text: #ACACAC;
  /* Not Changed */
  --primary-yellow: #FFCE00;
  --grey-5: #272727;
  --common-text: #FFFFFF;
  --common-black: #000000;
}