/* ================================================================
   Regularize Consultoria — CSS separado (rascunho técnico)
   ----------------------------------------------------------------
   Gerado a partir de assets/css/custom.css para a fase de separação.
   Não substitui custom.css/custom.min.css automaticamente.
   Preserve a ordem de carregamento indicada no README antes de usar.
   ================================================================ */

/* ---------- 14. Página Home: cards, serviços e hero responsivo ---------- */

.home-about-cards-grid {
  align-items: stretch;
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
}

.home-about-cards-grid > div,
.home-services-grid > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  text-align: center;
}

.home-services-grid > a > div:first-child {
  margin-left: auto;
  margin-right: auto;
}

.home-about-cards-grid h3,
.home-about-cards-grid p,
.home-services-grid h3,
.home-services-grid p {
  text-align: center;
}

@media (min-width: 768px) {
  .home-about-cards-grid {
    max-width: 70rem;
    gap: 1.25rem;
  }
}

@media (min-width: 768px) and (max-width: 911px) {
  .home-about-section {
    padding-top: 3rem;
  }

  .home-about-section {
    padding-bottom: 1.75rem;
  }

  .home-about-section > div > div:first-child {
    margin-bottom: 1.75rem;
  }

  .home-about-section h2 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    margin-bottom: 0.75rem;
  }

  .home-about-section > div > div:first-child p {
    line-height: 1.55;
    max-width: 38rem;
  }

  .home-about-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 56rem;
    gap: 1rem;
  }

  .home-about-cards-grid > div:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 48rem;
  }

  .home-about-cards-grid > div {
    padding: 1.25rem;
  }

  .home-about-cards-grid > div > div:first-child {
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.75rem;
    border-radius: 0.875rem;
  }

  .home-about-cards-grid > div > div:first-child svg {
    width: 1.35rem;
    height: 1.35rem;
  }

  .home-about-cards-grid h3 {
    margin-bottom: 0.625rem;
    font-size: 1.0625rem;
    line-height: 1.25;
  }

  .home-about-cards-grid p {
    font-size: 0.875rem;
    line-height: 1.52;
  }

  .home-services-section {
    padding-top: 2rem;
  }
}

@media (min-width: 640px) and (max-width: 1279px) {
  .home-hero-section {
    padding-top: clamp(2.5rem, 5vw, 3.25rem);
    padding-bottom: clamp(2.5rem, 5vw, 3.25rem);
  }

  .home-hero-content {
    margin-left: clamp(0.5rem, 2vw, 2rem);
  }

  .home-hero-copy > span {
    margin-bottom: 0.75rem;
  }

/* 912–1279px: usar 3 colunas — melhora o equilíbrio visual antes do breakpoint desktop maior */
@media (min-width: 912px) and (max-width: 1279px) {
  .home-about-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 62rem;
    gap: 1.25rem;
  }

  .home-about-cards-grid > div {
    padding: 1.25rem;
  }

  .home-about-cards-grid > div > div:first-child {
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.75rem;
    border-radius: 0.875rem;
  }

  .home-about-cards-grid > div > div:first-child svg {
    width: 1.35rem;
    height: 1.35rem;
  }

  .home-about-cards-grid h3 {
    margin-bottom: 0.625rem;
    font-size: 1.0625rem;
    line-height: 1.25;
  }

  .home-about-cards-grid p {
    font-size: 0.875rem;
    line-height: 1.52;
  }
}

  .home-hero-copy h1 {
    margin-bottom: 0.875rem;
    line-height: 1.06;
  }

  .home-hero-copy p {
    max-width: 48rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
  }

  .home-hero-copy .flex.flex-col.sm\:flex-row {
    gap: 0.75rem;
  }

  .home-hero-copy a {
    min-height: 3rem;
    padding: 0.75rem 1.5rem;
  }

  .home-services-section {
    padding-bottom: 2rem;
  }

  .home-services-section + section {
    padding-top: 2.75rem;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .home-hero-section {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
  }

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

  .home-hero-copy h1 {
    max-width: 58rem;
    font-size: 3rem;
    line-height: 1.05;
  }

  .home-hero-copy p {
    max-width: 56rem;
  }

  .home-about-cards-grid {
    max-width: 62rem;
    gap: 1.25rem;
  }

  .home-hero-copy {
    grid-column: auto;
  }

  .home-hero-mark {
    display: none;
  }

  .home-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .home-hero-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .home-hero-copy h1 {
    font-size: clamp(2.375rem, 5vw, 2.75rem);
  }

  .home-hero-copy p {
    max-width: 46rem;
  }
}

@media (min-width: 1280px) {
  .home-about-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

/* Home: ajuste de respiro entre hero, diferenciais e servicos */
.home-about-section {
  padding-top: 3rem !important;
  padding-bottom: 2.5rem !important;
}

.home-services-section {
  padding-top: 2.75rem !important;
}

@media (max-width: 767px) {
  .home-about-section {
    padding-top: 2.5rem !important;
    padding-bottom: 2rem !important;
  }

  .home-services-section {
    padding-top: 2.25rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .home-about-section {
    padding-top: 2.75rem !important;
    padding-bottom: 2rem !important;
  }

  .home-services-section {
    padding-top: 2.25rem !important;
  }
}

/* ---------- 19. Camada final aprovada: Home — Como trabalhamos e CTA ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
  main > section.pt-6.pb-10.sm\:py-16.bg-white .grid.grid-cols-1.xl\:grid-cols-3 > div:first-child {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    text-align: center;
  }

  main > section.pt-6.pb-10.sm\:py-16.bg-white .grid.grid-cols-1.xl\:grid-cols-3 > div:first-child p {
    display: inline-flex;
    width: auto;
    max-width: max-content;
    margin-left: auto;
    margin-right: auto;
  }

  main > section.pt-6.pb-10.sm\:py-16.bg-white .home-process-title {
    margin-left: auto;
    margin-right: auto;
    max-width: 42rem;
    text-align: center;
  }

  main > section.pt-6.pb-10.sm\:py-16.bg-white + .institutional-cta-section .flex.flex-col.sm\:flex-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 1rem;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
  }

  /* Altura, padding, linha e fonte dos botões: assets/css/botoes.css (desde 23/10/2026). */
  main > section.pt-6.pb-10.sm\:py-16.bg-white + .institutional-cta-section .flex.flex-col.sm\:flex-row > a {
    width: auto;
    flex: 0 1 20rem;
    text-align: center;
  }
}

/* Entre 768 e 840 px a fileira de 42rem ainda alcança o WhatsApp.
   O limite menor mantém os botões centralizados, sem estreitar o título. */
@media (min-width: 768px) and (max-width: 840px) {
  main > section.pt-6.pb-10.sm\:py-16.bg-white + .institutional-cta-section .flex.flex-col.sm\:flex-row {
    max-width: 38rem;
  }

  main > section.pt-6.pb-10.sm\:py-16.bg-white + .institutional-cta-section .flex.flex-col.sm\:flex-row > a {
    min-width: 0;
  }
}

/* Home: refinamento final do selo/pill e botões em tablet/meia-tela */
@media (min-width: 768px) and (max-width: 1279px) {
  main > section.pt-6.pb-10.sm\:py-16.bg-white .grid.grid-cols-1.xl\:grid-cols-3 > div:first-child > p {
    background-color: rgba(21, 101, 192, 0.1);
    color: var(--color-brand);
    max-width: max-content;
    margin-left: auto;
    margin-right: auto;
  }

  body:has(.home-hero-section) .institutional-cta-section:not(.about-final-cta-section) .flex.flex-col.sm\:flex-row {
    justify-content: center;
    gap: 0.75rem;
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
  }

  body:has(.home-hero-section) .institutional-cta-section:not(.about-final-cta-section) .flex.flex-col.sm\:flex-row > a {
    flex: 0 1 18rem;
    width: auto;
  }
}

/* Home: ajuste final do CTA azul em tablet/meia-tela */
@media (min-width: 768px) and (max-width: 1279px) {
  body:has(.home-hero-section) .institutional-cta-section:not(.about-final-cta-section) {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  body:has(.home-hero-section) .institutional-cta-section:not(.about-final-cta-section) .flex.flex-col.sm\:flex-row {
    justify-content: center;
    align-items: stretch;
    gap: 0.625rem;
    max-width: 35rem;
    margin-left: auto;
    margin-right: auto;
  }

  /* Altura, padding, linha e fonte dos botões: assets/css/botoes.css (desde 23/10/2026). */
  body:has(.home-hero-section) .institutional-cta-section:not(.about-final-cta-section) .flex.flex-col.sm\:flex-row > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 17rem;
    width: auto;
    text-align: center;
  }
}

/* Em tablet a fileira da home ainda encosta no WhatsApp. O recuo vale
   só para os botões e deixa o texto do bloco na largura original. */
@media (max-width: 1023px) {
  body:has(.home-hero-section) .institutional-cta-section:not(.about-final-cta-section) .flex.flex-col.sm\:flex-row {
    margin-left: auto;
    margin-right: calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - 1.5rem);
  }

  body:has(.home-hero-section) .institutional-cta-section:not(.about-final-cta-section) .flex.flex-col.sm\:flex-row > a {
    min-width: 0;
  }
}

@media (max-width: 639px) {
  body:has(.home-hero-section) .institutional-cta-section:not(.about-final-cta-section) .flex.flex-col.sm\:flex-row {
    margin-right: calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 0.5rem - 1rem);
  }
}

/* No celular os dois CTAs do hero esticam até a borda e entram no WhatsApp.
   O recuo vale só para essa fileira. */
@media (max-width: 639px) {
  .home-hero-copy > .flex {
    margin-right: calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 0.5rem - 1rem);
  }
}

/* ---------- Home: texto fora da coluna dos controles flutuantes ---------- */
/* Voltar ao topo e WhatsApp ficam fixos a max(1.5rem, safe-area) da direita,
   com 2.75rem até 640px e 3rem acima (components.css). Abaixo de 1360px a
   coluna cai dentro do container e cobre o texto que passa ao lado dela. A
   reserva soma esse recuo, o botão e 0.5rem de folga, menos o que o bloco já
   tem até a borda: o recuo do container (1rem; 1.5rem de 640px; 2rem de
   1024px) e, nos cards, a borda de 1px e o padding.
   Até 639px a reserva fica à direita do texto e o card mantém a largura. De
   640px em diante os blocos centralizados encolhem por igual dos dois lados
   (width em % do container), sem deslocar o eixo, e o max-width de cada um
   continua valendo. As faixas de largura vêm da medição de cada bloco. Os
   cards-link de serviços e a vitrine de Manuais saem inteiros da faixa
   (caixas clicáveis, mais abaixo). O rodapé fica de fora. */
:root {
  --home-faixa-controles: calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem);
  --home-recuo-container: 1rem;
  --home-reserva: calc(var(--home-faixa-controles) - var(--home-recuo-container));
}

@media (max-width: 640px) {
  :root {
    --home-faixa-controles: calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 0.5rem);
  }
}

@media (min-width: 640px) {
  :root {
    --home-recuo-container: 1.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --home-recuo-container: 2rem;
  }
}

@media (max-width: 639px) {
  .home-hero-copy > p,
  .home-about-section > div > div:first-child,
  .home-services-section > div > div:first-child,
  .home-services-section > div > div:last-child,
  .home-manuals-header,
  main > section.pt-6.pb-10.sm\:py-16.bg-white .grid > div,
  .institutional-cta-section > div > :is(h2, p) {
    padding-right: var(--home-reserva);
  }

  /* Cards de "Por que escolher": como a grade de serviços, a grade inteira
     sai da faixa (abaixo, layout comum de 10/10/2026); o card mantém o
     padding simétrico e o texto continua centralizado no card. */

  /* "acompanhamento" em 1.875rem não cabe na coluna que sobra abaixo de
     ~350px; o título diminui só o necessário, sem quebrar a palavra. A
     conta usa a largura útil (cqw da seção, contêiner de consulta): vw
     inclui a barra de rolagem clássica, e com ela a palavra passava da
     coluna. Sem barra, 8.2cqw = 8.2vw. */
  main > section.pt-6.pb-10.sm\:py-16.bg-white {
    container-type: inline-size;
  }

  .home-process-title {
    font-size: clamp(1.5rem, 8.2cqw, 1.875rem);
  }
}

/* Blocos centralizados do container de 80rem, que não tem margem abaixo de
   1280px. A largura vem da largura útil (o 100% do container), então a regra
   segue certa com barra de rolagem clássica; onde o max-width já deixa o
   bloco longe da coluna, ela não muda nada. */
@media (min-width: 640px) and (max-width: 1279px) {
  .home-about-section > div > div:first-child > p,
  .home-services-section > div > div:first-child > p,
  .home-manuals-title,
  .home-manuals-subtitle {
    width: calc(100% - 2 * var(--home-reserva));
  }

  /* Container de 64rem: o 100% é a largura da seção. */
  main > section.pt-6.pb-10.sm\:py-16.bg-white > div {
    width: calc(100% - 2 * var(--home-reserva));
  }
}

/* O container do CTA (48rem) ganha margem quando a largura útil passa de
   768px e afasta o texto a partir de 880px úteis. A regra vai até 899px de
   janela para cobrir a barra de rolagem clássica; sem ela, de 880 a 899px a
   reserva sobra. */
@media (min-width: 640px) and (max-width: 899px) {
  .institutional-cta-section > div > :is(h2, p) {
    width: calc(100% - 2 * var(--home-reserva));
    margin-inline: auto;
  }
}

/* Grade de "Por que escolher" (layout comum, 10/10/2026). Antes a reserva
   afastava só o texto: até 639px pelo padding direito do card (o texto
   ficava fora do centro do card e o card, mais largo que os de serviços) e
   de 768 a 1279px pela largura da grade descontando a borda e o padding do
   card (a superfície do card continuava sob a coluna). Agora a grade
   inteira sai da faixa, pela largura útil: a seção é contêiner de consulta
   e (100cqw - 100%) / 2 é o que já existe entre o container e a borda.
   Até 639px a margem direita é a maior entre a de centralização da grade
   (largura máxima de 26rem) e a faixa: onde a grade centralizada já fica
   fora da coluna ela continua centralizada; onde não fica, ela se alinha
   pela esquerda, como a grade de serviços. De 640px em diante a grade
   encolhe dos dois lados só o que falta, sem sair do eixo, e a largura
   máxima de cada faixa continua valendo. A primeira declaração repete a
   conta com 100vw, sem var(). */
.home-about-section {
  container-type: inline-size;
}

@media (max-width: 639px) {
  .home-about-section .home-about-cards-grid {
    margin-right: max(calc((100% - min(26rem, 100%)) / 2), calc(1.5rem + 2.75rem + 0.5rem - (100vw - 100%) / 2));
    margin-right: max(calc((100% - min(26rem, 100%)) / 2), calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 0.5rem - (100cqw - 100%) / 2));
  }
}

@media (min-width: 640px) {
  .home-about-section .home-about-cards-grid {
    width: calc(100% - 2 * max(0px, 1.5rem + 3rem + 0.5rem - (100vw - 100%) / 2));
    width: calc(100% - 2 * max(0px, max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - (100cqw - 100%) / 2));
  }
}

/* Herói e cabeçalho de "Por que escolher" (layout comum, 10/10/2026). O
   herói fica no topo e o cabeçalho logo abaixo; com a janela em altura
   normal a coluna não chega a eles, mas em tela baixa (celular ou tablet em
   paisagem, 568x320 a 844x390) chega, e o título e o resumo do herói e o
   título de "Por que escolher" passavam sob os botões. A regra vale em
   qualquer altura. Herói: o título recebe a mesma reserva que o resumo já
   tinha até 639px; de 640 a 1279px (uma coluna, margem direita zero) título
   e resumo reservam a faixa menos o recuo do container; de 1280px em diante
   o texto ocupa dois terços da grade e fica longe da coluna. Título de "Por
   que escolher" (centralizado): de 640px em diante encolhe dos dois lados só
   o que falta, como a grade logo abaixo (o resumo dele já tinha a reserva
   da 1P); até 639px o cabeçalho inteiro já tinha a reserva à direita. */
@media (max-width: 639px) {
  .home-hero-copy > h1 {
    padding-right: var(--home-reserva);
  }
}

@media (min-width: 640px) and (max-width: 1279px) {
  .home-hero-copy > :is(h1, p) {
    padding-right: var(--home-reserva);
  }
}

@media (min-width: 640px) {
  .home-about-section > div > div:first-child > h2 {
    width: calc(100% - 2 * max(0px, 1.5rem + 3rem + 0.5rem - (100vw - 100%) / 2));
    width: calc(100% - 2 * max(0px, max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - (100cqw - 100%) / 2));
    margin-inline: auto;
  }
}

/* Caixas clicáveis: nos cards de serviços o card inteiro é um link, e a
   vitrine de Manuais rola na horizontal. Nos dois casos não basta afastar o
   texto: a caixa do link e a janela do carrossel terminam 0.5rem antes da
   coluna. As duas seções são contêineres de consulta, então 100cqw é a
   largura útil (sem a barra de rolagem clássica) e (100cqw - 100%) / 2 é o
   que já existe entre o conteúdo do container e a borda: o recuo dele e, a
   partir de 1280px, a margem. A margem do bloco é a faixa menos esse trecho,
   nunca menor que a original; onde a coluna já fica fora, nada muda. Até
   639px a margem vale só à direita, como a reserva do texto; de 640px em
   diante, dos dois lados. */
.home-services-section,
.home-manuals-section {
  container-type: inline-size;
}

/* Grade de serviços: a reserva vai toda para a margem da grade; o padding
   dos cards fica como está. */
@media (max-width: 639px) {
  .home-services-grid {
    margin-right: max(0px, calc(var(--home-faixa-controles) - (100cqw - 100%) / 2));
  }
}

@media (min-width: 640px) {
  .home-services-grid {
    margin-inline: max(0px, calc(var(--home-faixa-controles) - (100cqw - 100%) / 2));
  }
}

/* Vitrine: quem sai da faixa é o painel (.home-manuals-carousel-shell), com a
   janela do carrossel dentro dele. Assim nenhum card aparece sob a coluna em
   nenhuma posição da rolagem horizontal, parado no encaixe ou no meio do
   movimento. A margem original do painel é -0.25rem (-0.5rem de 768px). Os
   cards se ajustam à janela (regras-base abaixo). O seletor composto vence as
   regras-base, que vêm depois. */
/* Layout comum (10/10/2026): o painel recua mais 0.5rem (folga de 1rem até a
   coluna). A seta seguinte fica na borda direita do painel e, em foco, tem
   contorno de 3px com 4px de afastamento e sombra com alcance visível de
   14px; com 0.5rem de folga o foco dela ficava sob a coluna. */
@media (max-width: 639px) {
  .home-manuals-section .home-manuals-carousel-shell {
    margin-right: max(-0.25rem, calc(var(--home-faixa-controles) + 0.5rem - (100cqw - 100%) / 2));
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  .home-manuals-section .home-manuals-carousel-shell {
    margin-inline: max(-0.25rem, calc(var(--home-faixa-controles) + 0.5rem - (100cqw - 100%) / 2));
  }
}

@media (min-width: 768px) {
  .home-manuals-section .home-manuals-carousel-shell {
    margin-inline: max(-0.5rem, calc(var(--home-faixa-controles) + 0.5rem - (100cqw - 100%) / 2));
  }
}

/* ---------- Home: vitrine de Manuais e POPs ---------- */
.home-manuals-section {
  background-color: #ffffff;
  overflow-x: hidden;
  padding-top: 2rem !important;
  padding-bottom: 1.75rem !important;
}

.home-manuals-header {
  max-width: 76rem;
  margin: 0 auto 1.375rem;
  text-align: center;
}

.home-manuals-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  border-radius: 999px;
  background-color: rgba(21, 101, 192, 0.1);
  padding: 0.375rem 0.875rem;
  color: var(--color-brand);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.home-manuals-title {
  max-width: 76rem;
  margin-inline: auto;
  color: #0f172a;
  font-size: clamp(1.625rem, 2.75vw, 2.25rem);
  font-weight: 700;
  line-height: 1.12;
}

.home-manuals-subtitle {
  max-width: 72rem;
  margin: 0.875rem auto 0;
  color: #64748b;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.home-manuals-card:focus-visible,
.home-manuals-nav:focus-visible {
  outline: 3px solid rgba(21, 101, 192, 0.35);
  outline-offset: 4px;
}

.home-manuals-carousel-shell {
  position: relative;
  margin-inline: -0.5rem;
  border-radius: 1rem;
  background-color: #eef7ff;
  padding: 0.875rem 0.75rem 1rem;
}

.home-manuals-section + section {
  padding-top: 1.5rem !important;
}

/* HOME-CARDS-ALTURA (11/10/2026): os cards ocupam a altura da linha flex, que
   é a do card de maior conteúdo entre os nove, inclusive os que estão fora da
   janela. A altura fica igual em toda a vitrine e não muda ao avançar ou
   voltar; ela acompanha a largura (cada faixa responsiva tem a sua). Antes
   (flex-start) cada card tinha a altura do próprio texto, e as bases e os
   links "Conhecer materiais" ficavam desalinhados. */
.home-manuals-carousel {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  margin-left: -0.25rem;
  margin-right: -0.25rem;
  background: transparent;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 0.25rem;
  scroll-padding-inline: 0.25rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.home-manuals-carousel::-webkit-scrollbar {
  display: none;
}

.home-manuals-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.84);
  color: var(--color-brand);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
  transform: translateY(-50%);
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.home-manuals-nav:hover {
  border-color: rgba(21, 101, 192, 0.35);
  background-color: rgba(255, 255, 255, 0.96);
  color: var(--color-brand-dark);
  transform: translateY(-50%) scale(1.04);
}

.home-manuals-nav span {
  display: block;
  margin-top: -0.125rem;
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1;
}

.home-manuals-nav--prev {
  left: 0;
}

/* O painel já termina antes da coluna fixa (faixa dos controles, acima),
   então a seta seguinte espelha a anterior. */
.home-manuals-nav--next {
  right: 0;
}

/* Até 767px um card ocupa a janela do carrossel, até 22rem; quando a janela
   passa disso, aparece um trecho do card seguinte, ainda dentro dela. */
.home-manuals-card {
  display: flex;
  flex: 0 0 min(100%, 22rem);
  flex-direction: column;
  height: auto;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background-color: #ffffff;
  color: inherit;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.home-manuals-card:hover {
  border-color: rgba(21, 101, 192, 0.35);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.home-manuals-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: #f8fafc;
}

/* O corpo cresce até a base do card (a imagem mantém 1:1) e o link, com
   margin-top: auto, desce para a base do corpo: os links ficam alinhados com
   o mesmo espaçamento até a borda. Nenhum texto é cortado, encurtado ou
   reduzido: a altura comum é a do maior conteúdo. */
.home-manuals-card-body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  min-height: 9.2rem;
  padding: 0.85rem 0.9rem 0.9rem;
}

.home-manuals-card-title {
  display: block;
  color: #0f172a;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

.home-manuals-card-text {
  display: block;
  margin-top: 0.35rem;
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.42;
}

.home-manuals-card-link {
  display: inline-flex;
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--color-brand);
  font-size: 0.875rem;
  font-weight: 700;
}

.home-manuals-card-text + .home-manuals-card-link {
  margin-top: auto;
}

@media (min-width: 768px) {
  .home-manuals-card {
    flex-basis: calc((100% - 1rem) / 2);
  }
}

@media (min-width: 900px) {
  .home-manuals-card {
    flex-basis: calc((100% - 2rem) / 3);
  }

  .home-manuals-card-body {
    min-height: 9.2rem;
  }
}

@media (min-width: 900px) and (max-width: 1023px) {
  .home-manuals-card-body {
    min-height: 10.5rem;
  }
}

@media (max-width: 767px) {
  .home-manuals-section {
    padding-top: 1.75rem !important;
    padding-bottom: 1.5rem !important;
  }

  .home-manuals-header {
    margin-bottom: 1.125rem;
  }

  .home-manuals-title {
    font-size: clamp(1.875rem, 9vw, 2.25rem);
  }

  .home-manuals-carousel-shell {
    margin-inline: -0.25rem;
    padding: 0.75rem 0.5rem;
  }

  .home-manuals-section + section {
    padding-top: 1.25rem !important;
  }

  .home-manuals-card-body {
    min-height: 9.125rem;
    padding: 0.8rem 0.875rem 0.875rem;
  }

  /* Com 44 px (desde 23/10/2026), a seta no meio da altura do painel passava
     sobre o título do card em 320 px, onde o texto quebra mais e a imagem é
     menor. Até 767 px ela fica no meio da imagem: o painel é contêiner de
     consulta, 100cqw é a largura do card (até 22rem) e a imagem é quadrada;
     1rem é o padding do painel (0.75rem) e o do carrossel (0.25rem). */
  .home-manuals-carousel-shell {
    container-type: inline-size;
  }

  .home-manuals-nav {
    display: inline-flex;
    top: calc(1rem + min(100cqw, 22rem) / 2);
    width: 2.75rem;
    height: 2.75rem;
  }

  .home-manuals-nav--prev {
    left: 0.25rem;
  }

  .home-manuals-nav--next {
    right: 0.25rem;
  }

  .home-manuals-nav span {
    font-size: 1.625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-manuals-card,
  .home-manuals-nav {
    transition: none;
  }

  .home-manuals-card:hover {
    transform: none;
  }

  .home-manuals-nav:hover {
    transform: translateY(-50%);
  }
}