/* ==========================================================================
   PÁGINA DE RAMO  (/seguro-auto, /seguro-vida, /seguro-residencial, …)
   ==========================================================================
   O desenho das páginas-pilar de ramo, as primeiras do site escritas para quem
   não tem relação nenhuma com transporte de carga. Nasceu para a /seguro-auto,
   a partir do frame /seguro-auto do Figma (411:163), e virou molde em
   29/10/2026, quando os outros quatro ramos foram escritos no mesmo formato.

   O prefixo era `sa-` enquanto havia uma página só. Perdeu o nome do ramo
   pelo mesmo motivo que os blocos de produto perderam o `sc-` de
   /seguro-de-carga: classe que carrega o nome de uma página mente assim que
   a segunda aparece. Ver tools/lib/pagina-ramo.mjs para o molde e
   documentacao/paginas/seguro-auto.md para o histórico de decisões.

   O QUE ESTE ARQUIVO NÃO TEM, de propósito:
   o hero de largura cheia vem de indices.css; a grade de quatro passos
   numerados (.rc-etapas) vem de rctr-c.css; o FAQ, o carrossel de
   seguradoras e os CTAs por intenção vêm de components.css e sections.css; e
   os dois banners rotativos são o componente .hero da home, de sections.css.
   Reusar isso não é economia de linha: é o que faz a página nova parecer do
   mesmo site, e é o que impede o quarto sistema de cartão.

   Blocos próprios:
     .ramo-migalhas    a trilha, sobre branco, antes do hero
     .ramo-cobs        as cinco coberturas, com ícone        (grade de 5)
     .ramo-assist-*    assistência: título à esquerda, 2×2 à direita
     .ramo-porque      cartão cinza fixo + banner rotativo, lado a lado
     .ramo-etapas      a moldura dos quatro passos de "Como contratar"
     .ramo-banner      o carrossel de "por que a Mundo Seguro"  (4 slides)
     .ramo-outros      o carrossel de "outros seguros"          (4 slides)

   O ÍCONE é OPCIONAL. Só a /seguro-auto tem os cinco, porque só ela tem frame
   do designer: `tools/lib/icones-auto.mjs` os insere no HTML da própria
   página (53×53 de traço, herdando `currentColor`), e não no sprite global,
   que é recortado de uma página servida e chega às 28. Os outros ramos saem
   com o cartão sem glifo — ver a pendência em
   documentacao/paginas/paginas-de-ramo.md. A assistência perdeu os ícones em
   28/10/2026, com o frame.
   ========================================================================== */

/* ---------- 0. Trilha ----------
   Mesmo desenho da trilha das páginas de carga (.carga-migalhas, em
   carga.css): fundo branco, 14px, separador ›. A lista em si (.migalhas__lista)
   é compartilhada; o que muda de página para página é a cor do fundo. */

.ramo-migalhas {
  padding-block: var(--sp-2);
  background: var(--c-white);
}

.ramo-migalhas .migalhas__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-14);
  color: var(--text-body);
}
.ramo-migalhas li + li::before { content: '›'; margin-right: var(--sp-2); color: var(--c-gray-300); }
.ramo-migalhas a { color: var(--text-body); }
.ramo-migalhas a:hover { color: var(--c-blue-text); }
.ramo-migalhas [aria-current] { font-weight: var(--fw-semibold); color: var(--c-navy); }

/* ---------- 1. Hero: as duas ações e a linha de registro ----------
   O .indice-hero não previa botão: as páginas de índice levam o visitante
   para dentro, não para o formulário. Aqui ele precisa, porque esta página é
   o fim da linha do ramo e não um índice. */

.ramo-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: clamp(var(--sp-6), 3vw, var(--sp-8));
}

/* MAIS BAIXO que os demais heros de índice, a pedido do cliente em
   28/10/2026. O `.indice-hero` pede clamp(380px, 45vw, 642px), que é a altura
   do frame da home; aqui a faixa não precisa dela, porque o conteúdo do hero
   é um título, duas linhas de texto e dois botões — e porque os cartões de
   cobertura já entram nela por baixo.

   A altura continua acompanhando a LARGURA, e não a altura da janela: em vh
   a faixa encolheria num notebook baixo e mudaria de proporção. */
.ramo-hero { min-height: clamp(320px, 34vw, 480px); }

/* O rotulo "As principais coberturas" e branco e fica SOBRE o pe da foto do
   hero (ver .ramo-cobs-sec). Com os dois botoes no hero, os 48px de
   padding-block do .indice-hero deixavam o rotulo colado neles, parecendo
   legenda de botao. Pedido do cliente em 09/11/2026. */
.ramo-hero { padding-bottom: calc(var(--sp-12) + var(--sp-16)); }

/* A linha do registro SUSEP saiu do hero em 28/10/2026, a pedido do cliente.
   O registro não sumiu da página: continua no slide 4 do banner "por que
   contratar" e no rodapé. */

/* ---------- 2. Coberturas e assistência, na mesma faixa cinza ----------
   No frame as duas seções estão dentro de um retângulo #f3f3f3 só. Os
   cartões brancos de cobertura só se destacam porque o fundo é cinza; sobre
   branco eles virariam uma grade de molduras. */

.ramo-assist-sec { background: var(--c-gray-100); }

/* A SOBREPOSIÇÃO. No frame o título "As principais coberturas" fica BRANCO
   sobre a foto do hero, e os cartões entram 24px nele. O bloco inteiro sobe,
   e o cinza passa a ser pintado por um pseudo-elemento que começa só depois
   da parte sobreposta — se o fundo fosse da seção, ele taparia o hero.

   A conta do quanto subir é a altura do título mais o vão até os cartões mais
   a entrada de 24px. Ela está escrita em tokens, e não em pixels, para
   acompanhar a escala fluida: o h2 é `--fs-32` com entrelinha `--lh-tight`,
   e o vão é o `margin-top` de `.ramo-cobs`, logo abaixo. */
.ramo-cobs-sec {
  /* Menor que o h2 padrão (`--fs-32`), a pedido do cliente em 28/10/2026 e
     como no frame, que escreve este título em 18px. Ele é rótulo de faixa, e
     não manchete — o mesmo papel que o título do FAQ já tinha. */
  --ramo-titulo: var(--fs-20);
  --ramo-vao: clamp(var(--sp-8), 4vw, var(--sp-12));
  --ramo-entra: 24px;
  --ramo-sobe: calc(var(--ramo-titulo) * var(--lh-tight) + var(--ramo-vao) + var(--ramo-entra));

  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--ramo-sobe));
  padding-top: 0;
}

.ramo-cobs-sec::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: var(--ramo-sobe) 0 0 0;
  background: var(--c-gray-100);
}

/* Branco porque está em cima da foto do hero. O `.indice-hero` já escurece
   o pé da imagem, então não é preciso véu extra atrás do texto. */
.ramo-cobs-sec .section-title {
  font-size: var(--ramo-titulo);
  color: var(--c-white);
}

/* A segunda seção não repete o respiro do topo: as duas são uma faixa só, e
   dois `padding-block` cheios abririam um buraco no meio dela. */
.ramo-assist-sec { padding-top: 0; }

/* ---------- 3. As cinco coberturas ----------
   Cinco colunas numa fileira só: a leitura é de um relance, e o número cinco
   é o conteúdo do bloco. Em 1100px caem para três, e a última fileira com dois
   cartões é aceitável — quebrar em 2+2+1 seria pior. */

.ramo-cobs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-5);
  /* O mesmo vão que entra na conta de `--ramo-sobe`, acima. Mexer aqui sem
     mexer lá desalinha a sobreposição. */
  margin: var(--ramo-vao) 0 0;
  padding: 0;
  list-style: none;
}

.ramo-cob {
  padding: clamp(var(--sp-5), 2.5vw, var(--sp-6));
  background: var(--c-white);
  border: 1px solid var(--c-gray-150);
  border-radius: var(--r-btn);
}

/* Sem moldura redonda em volta do ícone: os cinco símbolos do designer já
   vêm com área de desenho própria, e o círculo cinza de antes era a muleta
   dos ícones feitos à mão, que não tinham peso visual para ficar soltos. */
.ramo-cob__ico {
  display: block;
  color: var(--c-navy);
}
.ramo-cob__ico svg { width: 53px; height: 53px; fill: none; }

/* O filete sob o título é do frame, e faz trabalho: separa o nome da
   cobertura da frase que a explica sem precisar de mais espaço vertical. */
.ramo-cob__titulo {
  margin: var(--sp-4) 0 0;
  padding-bottom: var(--sp-3);
  /* Duas linhas reservadas, mesmo quando o título ocupa uma. Numa fileira de
     cinco cartões há sempre nome curto ("Morte") ao lado de nome longo
     ("Responsabilidade civil familiar"), e sem isto o filete de cada cartão
     para numa altura diferente. Duas linhas cobrem todos os títulos dos cinco
     ramos; um terceiro só empurra o filete daquele cartão, como antes. */
  min-height: calc(2 * 1.3em);
  border-bottom: 1px solid var(--c-gray-200);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--c-navy);
}

/* Sem ícone o título é o primeiro elemento do cartão, e aí a margem de cima
   soma com o padding. Só a /seguro-auto tem os cinco ícones do designer; os
   demais ramos caem nesta regra. */
.ramo-cob__titulo:first-child { margin-top: 0; }

.ramo-cob__texto {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--text-body);
}

/* A ressalva vem depois dos cartões, e não antes: os cinco nomes são a
   informação, o parágrafo é a condição deles. Estreito para não parecer um
   sexto cartão deitado. */
.ramo-cobs__nota {
  max-width: 54ch;
  margin: clamp(var(--sp-5), 3vw, var(--sp-8)) 0 0;
  font-size: var(--fs-14);
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: var(--text-body);
}

/* ---------- 4. Assistência ----------
   Título e parágrafo numa coluna estreita à esquerda, os quatro serviços numa
   grade 2×2 à direita. É o que o frame desenha, e resolve um problema do
   desenho anterior: com o título em cima e a grade embaixo, o parágrafo de
   abertura ficava com 1080px de largura e quebrava em duas linhas larguíssimas. */

.ramo-assist-grade {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(var(--sp-8), 6vw, var(--sp-24));
  align-items: start;
}

.ramo-assist-grade__lead {
  margin: clamp(var(--sp-5), 3vw, var(--sp-8)) 0 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: var(--text-body);
}

/* A ressalva do bloco, quando a página tem uma (d.assistencia.nota). Fica
   sob o lead, no tom de nota de rodapé: é referência, não argumento. */
.ramo-assist-grade__nota {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-14);
  line-height: var(--lh-prose);
  color: var(--text-muted);
}

.ramo-assists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--sp-6), 3vw, var(--sp-10)) clamp(var(--sp-6), 4vw, var(--sp-12));
  margin: 0;
  padding: 0;
  list-style: none;
}

.ramo-assist__nome {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: var(--text-body);
}

.ramo-assist__texto {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-14);
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: var(--text-body);
}

/* ---------- 5. Por que a Mundo Seguro ----------
   Duas colunas coladas: o cartão cinza fixo e o banner que gira. No frame o
   vão entre elas é de 4px, e é isso mesmo — os dois leem como um bloco só,
   com a metade esquerda parada e a direita trocando. */

/* O cartão de texto fica preso em 300px e o carrossel leva o resto.

   A BORDA ESQUERDA É A DAS OUTRAS SEÇÕES, e só a direita avança: o bloco está
   no `.container` de 1080, como todo o resto da página, e o que passa dele é
   uma margem negativa à direita. A primeira versão punha a seção inteira em
   `container--wide`, e aí ela começava 100px à esquerda das vizinhas — o
   cliente viu e pediu o alinhamento de volta, mantendo a largura extra.

   O QUANTO AVANÇAR é a metade da diferença entre os dois containers, mas só
   quando ela existe: abaixo de ~1160px de janela o container estreito já não
   está no teto e os dois medem o mesmo, então o avanço tem de ser zero. É o
   que o `clamp` faz — e é por isso que ele não pode ser um `100px` fixo. */
.ramo-porque {
  --ramo-avanco: clamp(0px, (100vw - 2 * var(--gutter) - var(--container)) / 2, 100px);

  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--sp-1);
  align-items: stretch;
  margin-right: calc(-1 * var(--ramo-avanco));
}

.ramo-porque__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--sp-6), 3vw, var(--sp-10));
  background: var(--c-gray-100);
  border-radius: var(--r-card);
}

.ramo-porque__lead {
  margin: clamp(var(--sp-6), 3vw, var(--sp-10)) 0 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: var(--c-navy);
}

/* ---------- 6. O banner rotativo de "por que" ----------
   O componente é o `.hero` da home, com tudo o que ele já resolve (ver o
   comentário do bloco 3 em build-seguro-auto.mjs). Aqui ele muda de papel: na
   home é a primeira tela, de largura cheia e 568px de altura; aqui é meia
   coluna no meio de uma página, e precisa parecer um cartão, não um hero.

   Só o que muda está escrito abaixo. O resto — a trilha, o arrasto, o véu
   escuro, os indicadores — continua vindo de sections.css, e é de propósito:
   mexer no desenho do banner daqui não pode mexer no da home, e vice-versa. */

.ramo-banner { border-radius: var(--r-card); }

/* O cartão cinza da esquerda e a foto da direita terminam na mesma linha.
   O slide tem `aspect-ratio`, então sozinho ele para antes quando o texto do
   cartão é mais alto que a foto — foi o que o cliente viu em 10/11/2026, com
   o parágrafo "corretora não é seguradora" já maior.

   `min-height`, e não `height`: abaixo de 1100px as duas colunas viram uma só,
   a linha da grade passa a ter altura automática, e 100% de altura automática
   daria zero. Com `min-height` o aspect-ratio volta a mandar sozinho. O
   recorte fica por conta do `object-fit: cover` que o .hero__bg já tem. */
.ramo-banner .hero__track,
.ramo-banner .ramo-banner__slide { min-height: 100%; }

/* A altura acompanha a largura, e vem da própria proporção da foto: a faixa é
   de 748 para 395 (gen-img-banners-auto.mjs), e é `aspect-ratio` que garante
   que a moldura e o recorte sejam a mesma coisa em qualquer largura.

   `min-height` em vw não serve aqui: o banner mede uma fração do container,
   não da janela, então a conta em vw erra por quanto o container estiver
   longe da largura da tela. Foi o que aconteceu na primeira versão — o de
   "outros seguros" ficou 125px mais alto que a foto e o recorte passou a ser
   decidido pelo `object-fit`. */
.ramo-banner__slide {
  /* `.hero__slide` traz min-height: 568px, a altura do hero da home. Ele vence
     o aspect-ratio (o maior dos dois ganha), e sem zerar aqui o banner nasce
     173px mais alto do que a foto. */
  min-height: 0;
  aspect-ratio: 748 / 330;   /* era 748/395; mais baixo a pedido do cliente, 28/10/2026 */
  padding: clamp(var(--sp-6), 3vw, var(--sp-10));
  padding-bottom: clamp(var(--sp-12), 6vw, var(--sp-16));
}

/* O conteúdo do slide não entra num `.container`, ao contrário do hero da
   home: aqui o bloco já está dentro de um, e a margem é o padding do slide. */
.ramo-banner__conteudo { max-width: 32ch; }

/* O título é h3 aqui, e vem depois do h2 que está no cartão ao lado: não pode
   competir com ele. Azul da marca sobre o véu escuro, como no frame. */
.ramo-banner__titulo {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--c-blue);
}

.ramo-banner__lead {
  margin-top: var(--sp-4);
  font-size: var(--fs-16);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--c-gray-100);
}

/* Um botão só, e pequeno: o banner gira, e quem está lendo o slide 2 não pode
   ser obrigado a escolher entre duas ações antes de ele virar. */
.ramo-banner__acoes { margin-top: clamp(var(--sp-6), 3vw, var(--sp-8)); }

/* Os indicadores sobem e encolhem para o tamanho do frame (32x7, e 52 no
   ativo): no hero da home eles ficam a 32px do pé de uma faixa de 568px e o
   ativo tem 70px, que num banner de meia coluna atravessa um terço da
   largura. Os dois banners desta página usam a mesma medida. */
.ramo-banner__dots,
.ramo-outros__dots { bottom: var(--sp-5); }
.ramo-banner__dots .hero__dot,
.ramo-outros__dots .hero__dot { width: 32px; height: 7px; }
.ramo-banner__dots .hero__dot[aria-selected="true"],
.ramo-outros__dots .hero__dot[aria-selected="true"] { width: 52px; }

/* ---------- 7. Como contratar ----------
   A grade é .rc-etapas (rctr-c.css). O frame põe cada passo dentro de uma
   moldura de canto arredondado, o que as páginas de carga não fazem; é a
   única diferença, e ela mora aqui para não mexer naquelas. */

.ramo-etapa {
  padding: clamp(var(--sp-4), 2vw, var(--sp-6));
  /* Branco porque a seção virou cinza: a moldura sozinha, que bastava sobre
     branco, vira um contorno vazio sobre o cinza. É o mesmo tratamento dos
     cartões de cobertura, que estão na outra faixa cinza da página. */
  background: var(--c-white);
  border: 1px solid var(--c-gray-150);
  border-radius: var(--r-input);
}

/* O cinza é o mesmo da faixa das coberturas, e entra aqui para a página
   voltar a alternar: cinza (coberturas e assistência), branco (por que
   contratar), cinza (como contratar), branco daí em diante. Sem ele, quatro
   seções brancas seguidas corriam juntas. */
.ramo-contratar-sec { background: var(--c-gray-100); }

/* O botão que fecha os quatro passos. Alinhado à esquerda, como o título da
   seção e como tudo o mais nesta página: centralizá-lo criaria um eixo que
   não existe em nenhum outro bloco. */
.ramo-contratar__acoes { margin-top: clamp(var(--sp-8), 4vw, var(--sp-10)); }

@media (max-width: 720px) {
  .ramo-contratar__acoes .btn { width: 100%; justify-content: center; }
}

/* ---------- 8. Outros seguros ----------
   O segundo carrossel: largura inteira do container, faixa de 2,686 para 1.
   Mesmo componente, outra proporção — ver o porquê em gen-img-banners-auto.mjs. */

.ramo-outros { border-radius: var(--r-card); }

.ramo-outros__slide {
  min-height: 0;   /* mesma razão do `.ramo-banner__slide`, acima */
  aspect-ratio: 1061 / 395;
  padding: clamp(var(--sp-6), 3vw, var(--sp-10)) clamp(var(--sp-6), 5vw, var(--sp-16));
  padding-bottom: clamp(var(--sp-12), 6vw, var(--sp-16));
}

.ramo-outros__conteudo { max-width: 34ch; }

.ramo-outros__titulo {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--c-blue);
}

.ramo-outros__lead {
  margin-top: var(--sp-4);
  font-size: var(--fs-16);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--c-gray-100);
}

.ramo-outros__acoes { margin-top: clamp(var(--sp-6), 3vw, var(--sp-8)); }

/* ---------- 9. FAQ ----------
   AS REGRAS SAÍRAM DAQUI EM 04/11/2026. A coluna de faixas cinzas nasceu
   nestas páginas, como exceção ao FAQ de duas colunas do resto do site; o
   cliente pediu o mesmo desenho em todas, e ele virou o padrão em
   components.css, seção "FAQ (acordeão)". A classe `.ramo-faq` saiu da
   marcação junto: regra sem marcação correspondente é peso que ninguém
   cobra e que, meses depois, ninguém sabe se pode apagar. */

/* ---------- 10. Quebras ---------- */

@media (max-width: 1100px) {
  .ramo-cobs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  /* O cartão cinza e o banner deixam de caber lado a lado bem antes de a
     tela virar celular: a 1000px o texto do slide já está em oito linhas
     dentro de uma coluna de 400px. Empilhados, o cartão vira a abertura da
     seção e o banner ocupa a largura inteira, que é o que ele precisa. */
  .ramo-porque { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .ramo-porque__texto { justify-content: flex-start; }
  .ramo-banner__conteudo { max-width: 42ch; }

  .ramo-assist-grade { grid-template-columns: minmax(0, 1fr); gap: clamp(var(--sp-6), 4vw, var(--sp-10)); }
}

@media (max-width: 900px) {
  /* A SOBREPOSIÇÃO SAI. O hero encolhe junto com a tela, e a 390px o título
     branco das coberturas cai em cima da linha do registro SUSEP. A conta de
     `--ramo-sobe` não tem como saber disso: ela mede o próprio bloco, não o que
     sobrou do hero. Abaixo de 900px o bloco volta ao fluxo, com o cinza na
     seção e o título escuro. */
  .ramo-cobs-sec {
    margin-top: 0;
    padding-top: clamp(var(--sp-12), 6vw, var(--sp-20));
    background: var(--c-gray-100);
  }
  .ramo-cobs-sec::before { content: none; }
  .ramo-cobs-sec .section-title { color: var(--text-strong); }   /* o tamanho menor continua valendo */

  /* Em tela estreita o véu da home vem da esquerda e deixa o texto sobre a
     parte clara da foto. O mesmo remédio do hero da home: o véu passa a vir
     de baixo, e o conteúdo desce para o pé do slide. */
  .ramo-banner__slide::before,
  .ramo-outros__slide::before {
    background: linear-gradient(
      180deg,
      rgb(2 12 28 / 0.35) 0%,
      rgb(2 12 28 / 0.80) 55%,
      rgb(2 12 28 / 0.92) 100%
    );
  }
  .ramo-banner__slide,
  .ramo-outros__slide { align-items: flex-end; }
  .ramo-banner__conteudo,
  .ramo-outros__conteudo { max-width: none; }

  /* Em tela estreita quem manda é o texto: com a proporção da foto, um slide
     de 360px de largura teria 190px de altura e o texto transbordaria. A foto
     volta a ser cortada pelo `object-fit`, que aqui é o certo. */
  .ramo-banner__slide,
  .ramo-outros__slide { aspect-ratio: auto; min-height: 340px; }
}

@media (max-width: 720px) {
  .ramo-cobs    { grid-template-columns: minmax(0, 1fr); }
  .ramo-assists { grid-template-columns: minmax(0, 1fr); }

  /* O botão pequeno vira alvo de largura cheia, como os do hero. */
  .ramo-banner__acoes .btn,
  .ramo-outros__acoes .btn { width: 100%; justify-content: center; }

  /* Espaço para os indicadores: eles são absolutos no pé do slide, e com o
     botão de largura cheia a folga padrão os encosta nele. */
  .ramo-banner__slide,
  .ramo-outros__slide { padding-bottom: var(--sp-12); }

  /* No hero estreito os dois botões ficam melhor um sobre o outro do que
     divididos em duas colunas de 40% com o texto quebrando dentro. */
  .ramo-hero__acoes { flex-direction: column; align-items: stretch; }
  .ramo-hero__acoes .btn { width: 100%; }
}

/* Alvo de toque de 44px: a mesma regra dos demais links do site. */
@media (hover: none) and (pointer: coarse) {
  .ramo-hero__acoes .btn { min-height: 44px; }
  /* .btn--sm nasce com 40px, que é alvo pequeno demais para o dedo. No dedo
     ele volta aos 44px; no mouse continua pequeno, que é o pedido. */
  .ramo-banner__acoes .btn--sm,
  .ramo-outros__acoes .btn--sm { min-height: 44px; }
}