/* CRLV-e: passos com mais espaço de leitura em telas estreitas. */
@media (max-width: 480px) {
  .steps.steps--crlv {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .steps--crlv > div {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 8px;
    padding: 20px;
  }

  .steps--crlv .step-num {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .steps--crlv h3 { margin-bottom: 0; }
  .steps--crlv p { grid-column: 2; }
}

/* Centraliza o bloco limitado a 52ch quando o hero ocupa uma coluna. */
@media (max-width: 820px) {
  .hero-grid .hero-lead { justify-self: center; }
}

/* Mantém contraste do texto branco em todo o gradiente do CTA da navegação. */
.nav-cta {
  background: linear-gradient(135deg, var(--bright-teal-blue), var(--french-blue));
}

.nav-cta:hover {
  background: linear-gradient(135deg, var(--french-blue), var(--bright-teal-blue));
}

/* Diferencia links de texto corrido sem depender apenas da cor. */
.section-title p a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* O espaço visual da pergunta também participa da área acionável. */
.faq-item { padding: 0; }
.faq-item summary { padding: 18px 24px; }
.faq-item[open] summary { padding-bottom: 0; }
.faq-item p { margin: 12px 24px calc(18px + 1em); }

/* Alinha a ação secundária à largura da principal no card de preço. */
.price-card .btn-outline { width: 100%; }

/* Conteúdo de leitura do rodapé em tamanho de corpo no mobile. */
@media (max-width: 820px) {
  .site-footer li,
  .site-footer li a,
  .footer-bottom { font-size: 1rem; }
}

/* A página atual continua identificável sem hover ou dependência só de cor. */
.nav-links a[aria-current="page"] {
  color: var(--french-blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.nav-links a[aria-current="page"]::after { display: none; }

/* Blocos informativos não recebem o feedback reservado a ações. */
.feature-card:hover,
.steps--crlv > div:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: var(--light-cyan);
}
.feature-card:hover::before { width: 0; }
.feature-card:hover .feature-icon {
  transform: none;
  background: linear-gradient(135deg, var(--light-cyan), var(--frosted-blue-2));
}

/* Reduz o apoio visual dos benefícios sem comprimir o texto. */
@media (max-width: 820px) {
  .feature-card { padding: 24px 28px; }
  .feature-card .feature-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
  }
  .feature-card .feature-icon svg { width: 22px; height: 22px; }
}

/* Parágrafos longos mantêm o mesmo início de linha em telas estreitas. */
@media (max-width: 820px) {
  .section-title--reading p { text-align: left; }
}

/* Pressionamento discreto, preservando repouso, hover e foco. */
.btn-outline:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* A navegação acomoda texto ampliado sem esconder opções ou reduzir a fonte. */
@media (min-width: 821px) {
  .nav-wrap { column-gap: 24px; }
  .nav-links {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* Mantém o destino do atalho abaixo do cabeçalho, inclusive em várias linhas. */
main#main-content {
  scroll-margin-top: max(88px, var(--crlv-header-height, 88px));
}

/* As colunas acompanham o espaço disponível em relação ao tamanho do texto. */
.site-footer { container: crlv-footer / inline-size; }

@container crlv-footer (max-width: 51.25em) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-trust { grid-template-columns: 1fr; }
  .footer-trust-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-trust-badges > a.footer-trust-link {
    grid-column: 1 / -1;
    max-width: 532px;
    height: auto;
  }
}

@container crlv-footer (max-width: 32.5em) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    overflow-wrap: anywhere;
  }
}

/* Preserva os arranjos existentes, antecipando sua quebra quando a fonte cresce. */
.crlv-steps-container { container: crlv-steps / inline-size; }

@container crlv-steps (max-width: 48.75em) {
  .steps.steps--crlv { grid-template-columns: 1fr 1fr; }
  .steps--crlv > div:not(:last-child)::after { display: none; }
}

@container crlv-steps (max-width: 27.5em) {
  .steps.steps--crlv {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .steps--crlv > div {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 8px;
    padding: 20px;
  }
  .steps--crlv .step-num {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }
  .steps--crlv h3 { margin-bottom: 0; }
  .steps--crlv p { grid-column: 2; }
}