/**
 * responsive.css
 * Ajustes finos por breakpoint. Regras estruturais de cada componente
 * já são responsivas via clamp()/grid/flex; aqui tratamos apenas
 * exceções pontuais por dispositivo.
 * Breakpoints seguem o padrão Bootstrap 5.3:
 * xs <576  sm >=576  md >=768  lg >=992  xl >=1200  xxl >=1400
 */

/* ---------- Notebook / Desktop pequeno ---------- */
@media (max-width: 1199.98px) {
  .container-dome {
    max-width: 100%;
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 991.98px) {
  .dome-hero {
    min-height: auto;
    padding-block: var(--space-16) var(--space-12);
  }

  .dome-company-card {
    padding: var(--space-8);
  }

  .dome-cta {
    padding: var(--space-10) var(--space-6);
  }

  .dome-process {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Celular ---------- */
@media (max-width: 767.98px) {
  .dome-navbar__brand span {
    font-size: var(--fs-base);
  }

  .dome-hero__actions .btn-dome {
    width: 100%;
    justify-content: center;
  }

  .dome-cta__actions .btn-dome {
    width: 100%;
    justify-content: center;
  }

  .dome-trust {
    grid-template-columns: 1fr;
  }

  .dome-process {
    grid-template-columns: 1fr;
  }

  .dome-faq__question.accordion-button {
    padding: var(--space-4) var(--space-5);
    font-size: var(--fs-sm);
  }

  .dome-faq__answer.accordion-body {
    padding: 0 var(--space-5) var(--space-4);
  }

  .dome-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 575.98px) {
  .section-title {
    max-width: 100%;
  }

  .dome-card,
  .dome-company-card {
    padding: var(--space-6);
  }
}