/* =============================================================================
   Seções — estilos exclusivos de cada bloco da página inicial e das internas.
   ============================================================================= */

/* --- Hero ------------------------------------------------------------------ */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--fa-space-6) var(--fa-section-y);
  overflow: hidden;
}

.hero__backdrop {
  position: absolute;
  inset: calc(var(--fa-header-h) * -1) 0 0;
  z-index: -1;
  pointer-events: none;
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--fa-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--fa-grid-line) 1px, transparent 1px);
  background-size: 3rem 3rem;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, var(--fa-brand-navy) 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, var(--fa-brand-navy) 30%, transparent 75%);
}

.hero__orb {
  position: absolute;
  width: min(560px, 80vw);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(60px);
  opacity: var(--fa-orb-opacity);
  translate: var(--px, 0) var(--py, 0);
  transition: translate var(--fa-dur-slow) var(--fa-ease-out);
}

.hero__orb--blue {
  top: -10%;
  right: -10%;
  background: radial-gradient(circle, rgba(var(--fa-brand-blue-rgb), 0.9), transparent 70%);
}

.hero__orb--gold {
  bottom: -20%;
  left: -15%;
  background: radial-gradient(circle, rgba(var(--fa-brand-gold-rgb), 0.7), transparent 70%);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fa-space-7);
  align-items: center;
}

.hero__copy {
  display: grid;
  gap: var(--fa-space-5);
  justify-items: start;
}

.hero__title {
  font-size: var(--fa-text-display);
  letter-spacing: -0.035em;
}

.hero__rotator {
  display: block;
  min-height: 2.24em;
}

.hero__word {
  display: inline-block;
  background: var(--fa-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: opacity var(--fa-dur-base) var(--fa-ease-out), translate var(--fa-dur-base) var(--fa-ease-out);
}

.hero__word.is-leaving {
  opacity: 0;
  translate: 0 -0.4em;
}

.hero__word.is-entering {
  opacity: 0;
  translate: 0 0.4em;
  transition: none;
}

.hero__text {
  max-width: 36rem;
  color: var(--fa-text-muted);
  font-size: var(--fa-text-lg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fa-space-3);
}

.hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fa-space-2) var(--fa-space-5);
  color: var(--fa-text-muted);
  font-size: var(--fa-text-sm);
  font-weight: 600;
}

.hero__points li {
  display: inline-flex;
  align-items: center;
  gap: var(--fa-space-2);
}

.hero__points .icon {
  color: var(--fa-success);
}

.hero__visual {
  position: relative;
  perspective: 1200px;
}

@media (min-width: 576px) {
  .hero__rotator {
    min-height: 1.12em;
    white-space: nowrap;
  }
}

@media (min-width: 992px) {
  .hero {
    padding-top: var(--fa-space-8);
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .hero__rotator {
    min-height: 2.24em;
    white-space: normal;
  }
}

/* --- Prévia do painel (mock) ----------------------------------------------- */

.mock {
  display: grid;
  gap: var(--fa-space-4);
  padding: var(--fa-space-4);
  border: 1px solid var(--fa-border);
  border-radius: var(--fa-radius-xl);
  background: var(--fa-surface);
  box-shadow: var(--fa-shadow-lg);
  transition: rotate var(--fa-dur-slow) var(--fa-ease-out);
}

.hero__visual.is-tilting .mock {
  rotate: var(--tilt-axis, 0 1 0) var(--tilt, 0deg);
}

.mock__bar {
  display: flex;
  align-items: center;
  gap: var(--fa-space-3);
}

.mock__dots {
  display: inline-flex;
  gap: 0.35rem;
}

.mock__dots i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--fa-radius-pill);
  background: var(--fa-surface-3);
}

.mock__dots i:first-child {
  background: var(--fa-brand-gold);
}

.mock__title {
  margin-right: auto;
  font-weight: 800;
}

.mock__kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fa-space-3);
}

.mock__kpi {
  display: grid;
  gap: var(--fa-space-1);
  padding: var(--fa-space-3);
  border-radius: var(--fa-radius-lg);
  background: var(--fa-surface-2);
}

.mock__kpi--wide {
  grid-column: 1 / -1;
  background: var(--fa-gradient-brand);
  color: var(--fa-white);
}

.mock__kpi--wide .mock__label {
  color: var(--fa-brand-mist);
}

.mock__label {
  color: var(--fa-text-muted);
  font-size: var(--fa-text-xs);
  font-weight: 600;
}

.mock__value {
  font-size: var(--fa-text-2xl);
  letter-spacing: -0.02em;
}

.mock__delta {
  font-size: var(--fa-text-lg);
}

.mock__delta.is-up {
  color: var(--fa-success);
}

.mock__delta.is-down {
  color: var(--fa-danger);
}

.mock__chart {
  display: grid;
  gap: var(--fa-space-2);
}

.mock__svg {
  width: 100%;
  height: clamp(6rem, 18vw, 8.5rem);
  overflow: visible;
}

.mock__gridline {
  stroke: var(--fa-border);
  stroke-dasharray: 3 5;
}

.mock__stop-top {
  stop-color: var(--fa-primary);
  stop-opacity: 0.35;
}

.mock__stop-bottom {
  stop-color: var(--fa-primary);
  stop-opacity: 0;
}

.mock__line {
  fill: none;
  stroke: var(--fa-primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.mock__point {
  fill: var(--fa-brand-gold);
  stroke: var(--fa-surface);
  stroke-width: 2;
}

.mock__feed {
  display: grid;
  gap: var(--fa-space-2);
  padding-top: var(--fa-space-3);
  border-top: 1px solid var(--fa-border);
}

.mock__feed-head {
  display: inline-flex;
  align-items: center;
  gap: var(--fa-space-2);
  color: var(--fa-success);
  font-size: var(--fa-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mock__feed-list {
  display: grid;
  gap: var(--fa-space-2);
}

.mock__feed-item {
  display: flex;
  align-items: center;
  gap: var(--fa-space-2);
  padding: var(--fa-space-2) var(--fa-space-3);
  border-radius: var(--fa-radius-md);
  background: var(--fa-surface-2);
  font-size: var(--fa-text-sm);
  font-weight: 600;
}

.mock__feed-item .icon {
  color: var(--fa-primary);
}

.mock__feed-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock__feed-item.is-new {
  animation: fa-drop-in var(--fa-dur-slow) var(--fa-ease-out) backwards;
}

/* --- Público (faixa contínua) ---------------------------------------------- */

.audience {
  padding-block: var(--fa-space-6);
  border-block: 1px solid var(--fa-border);
  background: var(--fa-surface);
}

.audience__title {
  margin-bottom: var(--fa-space-4);
  color: var(--fa-text-muted);
  font-size: var(--fa-text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.marquee {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, var(--fa-brand-navy) 12%, var(--fa-brand-navy) 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--fa-brand-navy) 12%, var(--fa-brand-navy) 88%, transparent);
}

.marquee__track {
  display: flex;
  flex-shrink: 0;
  gap: var(--fa-space-7);
  padding-right: var(--fa-space-7);
  animation: fa-marquee var(--fa-dur-marquee) var(--fa-ease-linear) infinite;
}

.marquee:hover .marquee__track,
.marquee.is-paused .marquee__track {
  animation-play-state: paused;
}

.marquee__item {
  color: var(--fa-text);
  font-size: var(--fa-text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  opacity: 0.75;
}

.marquee__item::before {
  content: '◆';
  margin-right: var(--fa-space-7);
  color: var(--fa-brand-gold);
  font-size: var(--fa-text-sm);
  vertical-align: middle;
}

/* --- Plataforma: painel do módulo e fluxo ---------------------------------- */

.module {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fa-space-6);
  align-items: center;
  padding: var(--fa-space-5);
  border: 1px solid var(--fa-border);
  border-radius: var(--fa-radius-xl);
  background: var(--fa-surface);
  box-shadow: var(--fa-shadow-md);
}

.module.is-active {
  animation: fa-rise-in var(--fa-dur-slow) var(--fa-ease-out) backwards;
}

.module__copy {
  display: grid;
  gap: var(--fa-space-4);
}

.module__icon {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--fa-radius-lg);
  background: var(--fa-gradient-brand);
  color: var(--fa-brand-gold);
  font-size: var(--fa-text-2xl);
  box-shadow: var(--fa-shadow-glow);
}

.module__title {
  font-size: var(--fa-text-2xl);
}

.module__text {
  color: var(--fa-text-muted);
}

.flow {
  position: relative;
  display: grid;
  gap: var(--fa-space-4);
  padding: var(--fa-space-5);
  border-radius: var(--fa-radius-lg);
  background: var(--fa-surface-2);
}

.flow__rail {
  position: absolute;
  top: var(--fa-space-7);
  bottom: var(--fa-space-7);
  left: calc(var(--fa-space-5) + 1.375rem);
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--fa-border-strong) 0 6px, transparent 6px 12px);
}

/* Ocupa a altura do trilho; desliza a própria altura (translate 100%) levando o ponto. */
.flow__packet {
  position: absolute;
  inset: 0;
  animation: fa-flow-y var(--fa-dur-flow) var(--fa-ease-standard) infinite;
}

.flow__packet::before {
  content: '';
  position: absolute;
  top: -0.375rem;
  left: 50%;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: -0.375rem;
  border-radius: var(--fa-radius-pill);
  background: var(--fa-brand-gold);
  box-shadow: var(--fa-shadow-gold);
}

.flow__node {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--fa-space-3);
  padding: var(--fa-space-3);
  border: 1px solid var(--fa-border);
  border-radius: var(--fa-radius-lg);
  background: var(--fa-surface);
  box-shadow: var(--fa-shadow-xs);
  font-weight: 700;
}

.module.is-active .flow__node {
  animation: fa-rise-in var(--fa-dur-slow) var(--fa-ease-out) backwards;
}

.module.is-active .flow__node:nth-of-type(2) { animation-delay: calc(var(--fa-stagger-step) * 1); }
.module.is-active .flow__node:nth-of-type(3) { animation-delay: calc(var(--fa-stagger-step) * 2); }
.module.is-active .flow__node:nth-of-type(4) { animation-delay: calc(var(--fa-stagger-step) * 3); }
.module.is-active .flow__node:nth-of-type(5) { animation-delay: calc(var(--fa-stagger-step) * 4); }

.flow__index {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--fa-radius-md);
  background: var(--fa-primary-soft);
  color: var(--fa-primary);
}

.flow__node:last-of-type .flow__index {
  background: var(--fa-gradient-accent);
  color: var(--fa-brand-navy);
}

@media (min-width: 768px) {
  .module {
    padding: var(--fa-space-6);
  }
}

@media (min-width: 992px) {
  .module {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: var(--fa-space-7);
  }
}

/* --- Como funciona (linha do tempo) ---------------------------------------- */

.timeline {
  position: relative;
}

.timeline__progress {
  position: absolute;
  top: 1.75rem;
  bottom: 1.75rem;
  left: 1.75rem;
  width: 2px;
  margin-left: -1px;
  background: var(--fa-border);
}

.timeline__fill {
  position: absolute;
  inset: 0;
  background: var(--fa-gradient-accent);
  transform-origin: top;
  scale: 1 var(--progress, 0);
}

.timeline__list {
  display: grid;
  gap: var(--fa-space-6);
}

.timeline__step {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: var(--fa-space-4);
  row-gap: var(--fa-space-1);
}

.timeline__icon {
  position: relative;
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--fa-border);
  border-radius: var(--fa-radius-lg);
  background: var(--fa-surface);
  color: var(--fa-primary);
  font-size: var(--fa-text-xl);
  box-shadow: var(--fa-shadow-sm);
}

.timeline__index {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--fa-radius-pill);
  background: var(--fa-brand-gold);
  color: var(--fa-brand-navy);
  font-size: var(--fa-text-xs);
  font-weight: 800;
}

.timeline__title {
  align-self: end;
  font-size: var(--fa-text-lg);
}

.timeline__text {
  color: var(--fa-text-muted);
}

@media (min-width: 992px) {
  .timeline__progress {
    top: 1.75rem;
    bottom: auto;
    left: 12.5%;
    right: 12.5%;
    width: auto;
    height: 2px;
    margin: -1px 0 0;
  }

  .timeline__fill {
    transform-origin: left;
    scale: var(--progress, 0) 1;
  }

  .timeline__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .timeline__step {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: var(--fa-space-2);
    text-align: center;
  }

  .timeline__icon {
    grid-row: auto;
    margin-bottom: var(--fa-space-3);
  }
}

/* --- Simulador ------------------------------------------------------------- */

.simulator {
  display: grid;
  gap: var(--fa-space-4);
  padding: var(--fa-space-5);
}

.range-field__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--fa-space-3);
  font-weight: 700;
}

.range-field__value {
  color: var(--fa-primary);
  font-size: var(--fa-text-lg);
}

.simulator__result {
  display: grid;
  gap: var(--fa-space-5);
  align-items: center;
  margin-top: var(--fa-space-2);
  padding: var(--fa-space-5);
  border-radius: var(--fa-radius-lg);
  background: var(--fa-gradient-brand);
  color: var(--fa-white);
}

.simulator__main {
  display: grid;
  gap: var(--fa-space-1);
}

.simulator__label {
  color: var(--fa-brand-mist);
  font-size: var(--fa-text-sm);
  font-weight: 600;
}

.simulator__installment {
  font-size: var(--fa-text-3xl);
  letter-spacing: -0.03em;
}

.simulator__installment.is-bumped {
  animation: fa-bump var(--fa-dur-base) var(--fa-ease-spring);
}

.simulator__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fa-space-3);
  margin-top: var(--fa-space-3);
}

.simulator__details dt {
  color: var(--fa-brand-mist);
  font-size: var(--fa-text-xs);
}

.simulator__details dd {
  font-weight: 700;
}

.simulator__disclaimer {
  display: flex;
  gap: var(--fa-space-2);
  color: var(--fa-text-subtle);
  font-size: var(--fa-text-xs);
}

.simulator__disclaimer .icon {
  margin-top: 0.2em;
}

.donut {
  display: flex;
  align-items: center;
  gap: var(--fa-space-4);
}

.donut__svg {
  width: 6.5rem;
  height: 6.5rem;
  rotate: -90deg;
}

.donut__track,
.donut__value {
  fill: none;
  stroke-width: 6;
}

.donut__track {
  stroke: rgba(var(--fa-white-rgb), 0.85);
}

.donut__value {
  stroke: var(--fa-brand-gold);
  stroke-linecap: round;
  transition: stroke-dasharray var(--fa-dur-slow) var(--fa-ease-out);
}

.donut__legend {
  display: grid;
  gap: var(--fa-space-2);
  font-size: var(--fa-text-sm);
}

.donut__legend li {
  display: flex;
  align-items: center;
  gap: var(--fa-space-2);
}

.donut__swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--fa-radius-pill);
}

.donut__swatch--principal {
  background: var(--fa-white);
}

.donut__swatch--interest {
  background: var(--fa-brand-gold);
}

@media (min-width: 576px) {
  .simulator {
    padding: var(--fa-space-6);
  }

  .simulator__result {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .donut {
    flex-direction: column;
  }
}

/* --- Assistente de IA (chat) ----------------------------------------------- */

.chat {
  display: grid;
  border: 1px solid var(--fa-border);
  border-radius: var(--fa-radius-xl);
  background: var(--fa-surface);
  box-shadow: var(--fa-shadow-lg);
  overflow: hidden;
}

.chat__head {
  display: flex;
  align-items: center;
  gap: var(--fa-space-3);
  padding: var(--fa-space-3) var(--fa-space-4);
  border-bottom: 1px solid var(--fa-border);
}

.chat__avatar {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--fa-radius-md);
  background: var(--fa-gradient-accent);
  color: var(--fa-brand-navy);
}

.chat__who {
  display: grid;
  margin-right: auto;
  line-height: 1.3;
}

.chat__who small {
  display: inline-flex;
  align-items: center;
  gap: var(--fa-space-2);
  color: var(--fa-success);
  font-size: var(--fa-text-xs);
  font-weight: 600;
}

.chat__body {
  display: grid;
  gap: var(--fa-space-4);
  align-content: start;
  min-height: 27rem;
  padding: var(--fa-space-4);
}

.chat__bubble {
  max-width: 88%;
  padding: var(--fa-space-3) var(--fa-space-4);
  border-radius: var(--fa-radius-lg);
}

.chat__bubble--user {
  justify-self: end;
  border-bottom-right-radius: var(--fa-space-1);
  background: var(--fa-primary-solid);
  color: var(--fa-text-on-solid);
  font-weight: 600;
}

.chat__bubble--agent {
  display: grid;
  gap: var(--fa-space-3);
  border-bottom-left-radius: var(--fa-space-1);
  border: 1px solid var(--fa-border);
  background: var(--fa-surface-2);
}

.chat__thinking {
  display: grid;
  gap: var(--fa-space-1);
  color: var(--fa-text-muted);
  font-size: var(--fa-text-sm);
}

.chat__thinking li {
  display: flex;
  align-items: center;
  gap: var(--fa-space-2);
}

.chat__thinking .icon {
  color: var(--fa-success);
}

.chat__input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fa-space-3);
  margin: 0 var(--fa-space-4) var(--fa-space-4);
  padding: var(--fa-space-2) var(--fa-space-2) var(--fa-space-2) var(--fa-space-4);
  border: 1px solid var(--fa-border);
  border-radius: var(--fa-radius-pill);
  color: var(--fa-text-subtle);
  font-size: var(--fa-text-sm);
}

.chat__send {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--fa-radius-pill);
  background: var(--fa-primary-solid);
  color: var(--fa-text-on-solid);
}

/* Estados controlados pelo JS durante a demonstração */
.chat [data-chat-step].is-pending,
.chat .chat__thinking li.is-pending {
  display: none;
}

.chat [data-chat-step].is-shown,
.chat .chat__thinking li.is-shown {
  animation: fa-rise-in var(--fa-dur-slow) var(--fa-ease-out) backwards;
}

.chat .is-typing::after {
  content: '▍';
  margin-left: 1px;
  color: var(--fa-brand-gold);
  animation: fa-blink var(--fa-dur-blink) steps(1) infinite;
}

.bars {
  display: grid;
  gap: var(--fa-space-2);
}

.bars__caption {
  color: var(--fa-text-muted);
  font-size: var(--fa-text-xs);
  font-weight: 700;
}

.bars__plot {
  width: 100%;
  max-width: 20rem;
  overflow: visible;
}

.bars__bar {
  transform-box: fill-box;
  transform-origin: bottom;
}

.bars__bar--in {
  fill: var(--fa-primary);
}

.bars__bar--out {
  fill: var(--fa-brand-gold);
}

.bars__label {
  fill: var(--fa-text-muted);
  font-size: 9px;
  font-weight: 700;
}

.bars.is-growing .bars__bar {
  animation: fa-grow-y var(--fa-dur-reveal) var(--fa-ease-out) backwards;
}

.bars.is-growing .bars__bar:nth-of-type(2n) {
  animation-delay: var(--fa-stagger-step);
}

/* --- Números --------------------------------------------------------------- */

.stats {
  padding-block: var(--fa-space-7);
  background: var(--fa-gradient-brand);
  color: var(--fa-white);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fa-space-5);
}

.stat {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--fa-space-1);
  padding-left: var(--fa-space-4);
  border-left: 2px solid rgba(var(--fa-brand-gold-rgb), 0.6);
}

.stat__value {
  color: var(--fa-brand-gold);
  font-size: var(--fa-text-3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.stat__label {
  color: var(--fa-brand-mist);
  font-size: var(--fa-text-sm);
}

@media (min-width: 992px) {
  .stats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- Segurança (grade de recursos) ----------------------------------------- */

.feature-grid {
  display: grid;
  gap: var(--fa-space-4);
}

.feature {
  display: grid;
  gap: var(--fa-space-3);
  align-content: start;
  padding: var(--fa-space-5);
  border: 1px solid var(--fa-border);
  border-radius: var(--fa-radius-xl);
  background: var(--fa-surface);
  box-shadow: var(--fa-shadow-xs);
  transition: border-color var(--fa-dur-base) var(--fa-ease-standard), box-shadow var(--fa-dur-base) var(--fa-ease-standard);
}

.feature:hover {
  border-color: var(--fa-border-strong);
  box-shadow: var(--fa-shadow-md);
}

.feature__icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--fa-radius-md);
  background: var(--fa-primary-soft);
  color: var(--fa-primary);
  font-size: var(--fa-text-xl);
  transition: rotate var(--fa-dur-slow) var(--fa-ease-spring), scale var(--fa-dur-slow) var(--fa-ease-spring);
}

@media (hover: hover) {
  .feature:hover .feature__icon {
    rotate: -8deg;
    scale: 1.08;
  }
}

.feature__title {
  font-size: var(--fa-text-lg);
}

.feature__text {
  color: var(--fa-text-muted);
}

@media (min-width: 768px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Dúvidas --------------------------------------------------------------- */

.faq {
  display: grid;
  gap: var(--fa-space-3);
}

.faq__item {
  border: 1px solid var(--fa-border);
  border-radius: var(--fa-radius-lg);
  background: var(--fa-surface);
  transition: border-color var(--fa-dur-base) var(--fa-ease-standard), box-shadow var(--fa-dur-base) var(--fa-ease-standard);
}

.faq__item[open] {
  border-color: var(--fa-border-strong);
  box-shadow: var(--fa-shadow-md);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fa-space-4);
  min-height: 3.5rem;
  padding: var(--fa-space-3) var(--fa-space-5);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__chevron {
  color: var(--fa-primary);
  transition: rotate var(--fa-dur-base) var(--fa-ease-out);
}

.faq__item[open] .faq__chevron {
  rotate: 180deg;
}

.faq__answer {
  padding: 0 var(--fa-space-5) var(--fa-space-5);
  color: var(--fa-text-muted);
}

.faq__item[open] .faq__answer {
  animation: fa-rise-in var(--fa-dur-slow) var(--fa-ease-out) backwards;
}

/* --- Contato --------------------------------------------------------------- */

.cta-band {
  position: relative;
  display: grid;
  gap: var(--fa-space-4);
  align-items: center;
  margin-bottom: var(--fa-section-y);
  padding: var(--fa-space-6) var(--fa-space-5);
  border-radius: var(--fa-radius-xl);
  background: var(--fa-gradient-brand);
  color: var(--fa-white);
  overflow: hidden;
  box-shadow: var(--fa-shadow-lg);
}

.cta-band::after {
  content: '';
  position: absolute;
  inset: auto -10% -60% auto;
  width: min(420px, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--fa-brand-gold-rgb), 0.35), transparent 65%);
}

.cta-band__title {
  font-size: var(--fa-text-2xl);
}

.cta-band__text {
  margin-top: var(--fa-space-2);
  color: var(--fa-brand-mist);
}

.cta-band__mark {
  display: none;
}

@media (min-width: 768px) {
  .cta-band {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--fa-space-7);
  }

  .cta-band__mark {
    position: relative;
    z-index: 1;
    display: block;
    animation: fa-float var(--fa-dur-float) ease-in-out infinite;
  }
}

.contact__grid {
  align-items: start;
}

.contact__channels-title {
  margin-top: var(--fa-space-3);
  font-weight: 700;
}

.contact__card {
  padding: var(--fa-space-5);
}

.contact__success {
  display: grid;
  gap: var(--fa-space-3);
  justify-items: center;
  padding-block: var(--fa-space-6);
  text-align: center;
  animation: fa-scale-in var(--fa-dur-slow) var(--fa-ease-spring) backwards;
}

.contact__success:focus {
  outline: none;
}

.contact__success-icon {
  display: inline-grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--fa-radius-pill);
  background: var(--fa-success-soft);
  color: var(--fa-success);
  font-size: var(--fa-text-2xl);
}

.contact__success p {
  color: var(--fa-text-muted);
}

@media (min-width: 576px) {
  .contact__card {
    padding: var(--fa-space-6);
  }
}

/* --- Páginas internas ------------------------------------------------------ */

.page-hero .container {
  display: grid;
  gap: var(--fa-space-4);
  justify-items: start;
}

.prose {
  display: grid;
  gap: var(--fa-space-5);
  margin-block: var(--fa-space-5);
}

.prose h2 {
  margin-bottom: var(--fa-space-2);
  font-size: var(--fa-text-xl);
}

.prose p {
  color: var(--fa-text-muted);
}

.not-found .container {
  justify-items: center;
  text-align: center;
}

.not-found__code {
  background: var(--fa-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(5rem, 3rem + 10vw, 9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
}