/* ==========================================================================
   /seguro-de-carga — blocos próprios da página
   Figma: frame "/seguro-de-carga" (220:37), medidas em material/figma/layout-220_37.txt
   ==========================================================================
   O que já existia é reaproveitado e NÃO se repete aqui:
   .indice-hero (indices.css), .card-resumo e .faq-item (seguros-obrigatorios.css),
   .btn / .link-arrow (components.css e base.css).

   O Figma desenha toda a página sobre um fundo cinza (#f3f3f3) com cartões
   brancos por cima; é o que .sc faz abaixo. As seções globais do fim (CTAs,
   formulário e rodapé) mantêm o fundo delas. */

.sc { background: var(--c-gray-100); }

/* Do fim do checklist para baixo o fundo é branco. Pedido do cliente em
   04/11/2026, e ele separa as duas metades da página: em cima a explicação,
   sobre o cinza; embaixo o fecho, onde o visitante responde (FAQ, os CTAs por
   intenção e o formulário).

   O combinador `~` em vez de listar as três seções: assim uma seção nova que
   entre depois do checklist já nasce branca, e uma que mude de lugar não
   precisa de ajuste aqui. */
.sc > .checklist ~ * { background: var(--c-white); }

/* Intro de seção: parágrafo curto logo abaixo do título */
.sc-intro {
  max-width: 460px;
  margin-top: var(--sp-4);
  font-size: var(--fs-16);
  line-height: var(--lh-prose);
  color: var(--text-body);
}

/* A introdução dos dois grupos de seguros (texto do cliente de 09/11/2026) é
   mais longa que as outras: nos 460px de .sc-intro ela viraria uma coluna de
   sete linhas encostada na esquerda de uma seção larga. */
.sc-seguros__intro { max-width: 760px; }

/* Todos os links azuis de fim de bloco no mesmo padrão: 16px e seta.
   Antes variavam entre 14 e 18 conforme a seção. */
.sc .link-arrow { font-size: var(--fs-16); }

.sc-link-forte { margin-top: var(--sp-8); }
.sc-link-forte--dir { text-align: right; }

/* ==========================================================================
   2 + 3. DEFINIÇÃO E QUEM PROTEGE O QUÊ
   ========================================================================== */

.sc-quem__grade {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(var(--sp-8), 5vw, var(--sp-16));
  align-items: start;
}

.sc-rotulo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
}

/* o "?" dentro do círculo cinza do Figma */
.sc-rotulo__marca {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--text-body);
  background: var(--c-gray-200);
  border-radius: 50%;
}

.sc-definicao {
  margin-top: var(--sp-4);
  font-size: var(--fs-14);
  line-height: var(--lh-prose);
  color: var(--text-body);
}
.sc-definicao strong { font-weight: var(--fw-semibold); }

.sc-quem__titulo { margin-top: var(--sp-10); }
.sc-quem__intro {
  margin-top: var(--sp-4);
  font-size: var(--fs-16);
  line-height: var(--lh-prose);
  color: var(--text-body);
}

.sc-quem__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}

/* ---------- cartão de papel (transportador / embarcador) ---------- */

.sc-papel {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border-radius: var(--r-card);
  overflow: hidden;
}

.sc-papel__titulo {
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  color: var(--c-navy);
  background: var(--c-blue);
}

.sc-papel__corpo {
  flex: 1;
  margin: 0;
  padding: var(--sp-6);
}

.sc-papel__rotulo {
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gray);
}
.sc-papel__rotulo:not(:first-child) { margin-top: var(--sp-5); }

.sc-papel__valor {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-16);
  line-height: 1.45;
  color: var(--text-body);
}

.sc-papel__pe {
  padding: var(--sp-4) var(--sp-6) var(--sp-5);
  border-top: 1px solid var(--c-gray-150);
}

/* ---------- nota destacada abaixo dos dois cartões ---------- */

.sc-nota {
  grid-column: 1 / -1;
  padding: var(--sp-6) var(--sp-8);
  font-size: var(--fs-14);
  line-height: var(--lh-prose);
  color: var(--text-body);
  background: #f0fbff;
  border-left: 6px solid var(--c-blue);
  border-radius: var(--r-card);
}

/* ==========================================================================
   4. OS SEGUROS DE CARGA
   ========================================================================== */

.sc-grupo__titulo {
  font-size: var(--fs-28);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
}

/* "Obrigatórios do transportador" é só a etiqueta do primeiro grupo: os cards
   abaixo já carregam o peso visual. */
.sc-seguros__grupo {
  margin: var(--sp-8) 0 var(--sp-4);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sc-seguros__compare { margin-top: var(--sp-6); text-align: right; }

/* grupos de texto: título à esquerda, três itens à direita */
.sc-grupo {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 4vw, var(--sp-12));
  margin-top: clamp(var(--sp-12), 6vw, var(--sp-16));
}

.sc-grupo__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-8);
}

.sc-item__titulo { font-size: var(--fs-18); font-weight: var(--fw-semibold); }
/* azul da marca no destaque; o tom escuro só no hover */
.sc-item__titulo a { color: var(--c-blue); }
.sc-item__titulo a:hover { color: var(--c-blue-text); }

.sc-item__texto {
  margin-top: var(--sp-2);
  font-size: var(--fs-16);
  line-height: 1.45;
  color: var(--text-body);
}

/* ==========================================================================
   FAIXA COM A FRASE (foto + gradiente + bolha azul)
   ========================================================================== */

.sc-frase { padding-bottom: clamp(var(--sp-12), 6vw, var(--sp-16)); }

.sc-frase__caixa {
  position: relative;
  margin-left: 66px;                 /* espaço para a bolha à esquerda */
  border-radius: var(--r-card);
  isolation: isolate;
  overflow: visible;
}

.sc-frase__bg {
  width: 100%;
  height: clamp(220px, 22vw, 300px);
  object-fit: cover;
  object-position: center 35%;
  border-radius: var(--r-card);
}

.sc-frase__caixa::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(2 12 28 / 0.92) 0%, rgb(2 12 28 / 0.72) 55%, rgb(2 12 28 / 0.15) 100%);
  border-radius: var(--r-card);
}

.sc-frase__marca {
  position: absolute;
  top: 50%; left: -66px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 132px; height: 132px;
  translate: 0 -50%;
  font-size: 64px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-navy);
  background: var(--c-blue);
  border: 6px solid var(--c-gray-100);
  border-radius: 50%;
}

.sc-frase__texto {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  max-width: 560px;
  margin: 0;
  padding: var(--sp-8) var(--sp-8) var(--sp-8) clamp(var(--sp-10), 7vw, 110px);
  font-size: var(--fs-20);
  line-height: 1.45;
  color: var(--c-gray-100);
}

/* ==========================================================================
   6. AVERBAÇÃO
   ========================================================================== */

.sc-averbacao__topo {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-16));
  align-items: start;
}
.sc-averbacao__topo .sc-intro { margin-top: 0; max-width: 560px; }

/* ==========================================================================
   7. EXIGÊNCIAS DAS SEGURADORAS
   ========================================================================== */

.sc-exig__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}

.sc-exig {
  padding: var(--sp-6);
  background: var(--c-gray-200);
  border-radius: 5px;
}

.sc-exig__titulo {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
}

.sc-exig__texto {
  margin-top: var(--sp-2);
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--text-body);
}

/* ==========================================================================
   8. COMO O PREÇO É FORMADO
   ========================================================================== */

/* A seção "quanto custa o seguro de carga" saiu em 04/11/2026, quando a
   página virou a de captação: o CSS dela (.sc-preco__grade e .sc-exemplo*)
   foi removido junto, porque nenhuma outra página usa essas classes. Com
   ele foi embora o exemplo de prêmio com [X], [Y] e [Z] por preencher, que
   era pendência do comercial desde setembro. */

/* ==========================================================================
   9. CASO REAL
   ========================================================================== */

.sc-caso {
  position: relative;
  padding-block: clamp(var(--sp-16), 8vw, var(--sp-24));
  isolation: isolate;
}

.sc-caso__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.sc-caso::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(2 12 28 / 0.62);
}

.sc-caso__h2 {
  font-size: var(--fs-28);
  font-weight: var(--fw-semibold);
  color: var(--c-blue);
}

.sc-caso__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

/* vidro fosco, como o efeito GLASS do Figma */
.sc-caso__card {
  padding: var(--sp-6);
  background: rgb(217 217 217 / 0.2);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 5px;
  backdrop-filter: blur(10px);
}

.sc-caso__titulo { font-size: var(--fs-20); font-weight: var(--fw-semibold); color: var(--c-gray-100); }
.sc-caso__texto {
  margin-top: var(--sp-4);
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--c-gray-100);
}

/* ==========================================================================
   10. POR TIPO DE CARGA
   ========================================================================== */

.sc-tipos__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: clamp(var(--sp-8), 5vw, var(--sp-16));
  align-items: start;
}

.sc-tipos__texto { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }

.sc-tipos__lista { display: grid; gap: var(--sp-3); }

.sc-carga {
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  align-items: stretch;
  background: var(--c-white);
  border-radius: 6px;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sc-carga:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); text-decoration: none; }

.sc-carga__media { display: block; height: 115px; }
.sc-carga__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.sc-carga__corpo {
  display: grid;
  align-content: center;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
}

.sc-carga__titulo { font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--c-navy); }
.sc-carga__texto { font-size: var(--fs-14); line-height: 1.35; color: var(--c-navy-frio); }

/* ==========================================================================
   HERO: botões (o .indice-hero não tem ações nas outras páginas)
   ========================================================================== */

/* O hero desta página é o único do site com formulário dentro, porque ela é
   a página do tráfego pago: quem chega por anúncio precisa ver onde pedir a
   cotação sem rolar. Daí a altura maior e as duas colunas. */
.sc-hero { min-height: clamp(520px, 46vw, 680px); }
.sc-hero .indice-hero__title { font-size: var(--fs-40); }

/* O painel do frame (Rectangle 338: 1159x411, raio 11) tem fill #020c1c a
   20% e efeito GLASS. Vidro é isso: quase transparente, e o que dá leitura
   não é a cor, é o desfoque do que está atrás. Daí os 0.20 e o blur alto.

   O -webkit- fica: Safari ainda pede o prefixo para backdrop-filter. */
.sc-hero__painel {
  position: relative;
  z-index: 3;
  padding: clamp(var(--sp-8), 4vw, var(--sp-12));
  border-radius: var(--r-card);
  background: rgb(2 12 28 / 0.20);
  border: 1px solid rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  backdrop-filter: blur(22px) saturate(120%);
}

/* Sem suporte a backdrop-filter o painel ficaria com 20% de preto sobre uma
   foto noturna cheia de faróis, e o texto branco sumiria. Aí o fundo volta a
   ser opaco: feio perto do vidro, legível perto de ilegível. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sc-hero__painel { background: rgb(2 12 28 / 0.88); }
  .sc-hero__caixa { background: rgb(2 12 28 / 0.55); }
}

.sc-hero__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: clamp(var(--sp-8), 4vw, var(--sp-12));
  align-items: center;
}

/* Sem o max-width de 560px que vale no hero de índice: aqui quem limita a
   medida de leitura é a própria coluna da grade. */
.sc-hero .indice-hero__content { max-width: none; }

.sc-hero__provas {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding: 0;
  list-style: none;
  font-size: var(--fs-16);
  line-height: var(--lh-prose);
  color: rgb(255 255 255 / 0.92);
}

.sc-hero__provas li {
  position: relative;
  padding-left: var(--sp-6);
}

/* O traço entra por CSS e não no HTML: é ornamento, e leitor de tela já
   anuncia a lista. */
.sc-hero__provas li::before {
  content: '';
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 10px;
  height: 2px;
  background: var(--c-green);
}

.sc-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

/* ---------- O formulário do hero ----------
   O .cta__form já traz o vidro fosco, o espaçamento e o botão; aqui só entra
   o que é desta página. O painel escuro atrás existe porque a foto do hero
   tem céu claro no lado direito, e o texto branco do formulário sumiria nele. */
/* A caixa do formulário dentro do painel (Rectangle 342: 477x316, raio 13).
   Um tom acima do painel, sem sombra: ela não flutua sobre a foto, ela está
   dentro de uma superfície que já é opaca. */
/* No frame o e-mail é bem mais largo que o telefone (407x46 na primeira
   linha; 257 e 141 na segunda). Endereço de e-mail é mais comprido que
   telefone, então a proporção não é capricho: é o campo caber. */
/* Só a partir de 900px: abaixo disso o .cta__row do sections.css empilha os
   dois campos, e esta regra, sendo mais específica, estava vencendo a dele e
   deixando "Telefone" cortado no celular. */
@media (min-width: 901px) {
  .sc-hero__form .cta__row { grid-template-columns: 1.8fr 1fr; }
}

/* A caixa do formulário (Rectangle 342: 477x316, raio 13) tem o MESMO fill e
   o MESMO efeito do painel. Vidro sobre vidro: os dois desfoques se somam, e
   é isso que faz a caixa aparecer sem precisar de borda forte nem sombra. */
.sc-hero__caixa {
  position: relative;
  z-index: 3;
  padding: var(--sp-6);
  border-radius: var(--r-card);
  background: rgb(2 12 28 / 0.20);
  border: 1px solid rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.sc-hero__caixa-titulo {
  font-size: var(--fs-24);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--c-white);
}

.sc-hero__caixa-lead {
  margin-top: var(--sp-1);
  font-size: var(--fs-14);
  color: rgb(255 255 255 / 0.82);
}

/* O formulário já está dentro de um painel: o vidro de novo escureceria
   demais, e a borda viraria caixa dentro de caixa. */
.sc-hero__form {
  margin-top: var(--sp-4);
  padding: 0;
  background: none;
  border: 0;
  backdrop-filter: none;
}

/* ==========================================================================
   COMO COTAR
   ========================================================================== */

/* No frame são duas colunas: 284 de texto e 807 de carrossel, dentro de um
   bloco de 1114. A proporção abaixo é essa. */
.sc-cotar__grade {
  display: grid;
  grid-template-columns: minmax(0, 284fr) minmax(0, 807fr);
  gap: clamp(var(--sp-8), 4vw, var(--sp-12));
  align-items: center;
}

.sc-cotar__lead {
  margin-top: var(--sp-4);
  color: var(--text-muted);
}

/* ⚠️ `min-height: 0` NÃO É OPCIONAL: .hero__slide traz 568px do componente do
   hero da home, e sem zerar isso a altura dele ganha do aspect-ratio. Foi a
   mesma pedra dos banners das páginas de ramo. */
.sc-cotar__slide {
  min-height: 0;
  aspect-ratio: 807 / 395;
  display: grid;
  align-items: center;
  /* O azul fica de reserva: é o que se vê no instante antes de a foto chegar,
     e é o que sobra se ela faltar. O frame mostrava o cartão azul porque a
     foto ainda não tinha sido escolhida; ela chegou em 04/11/2026. */
  background: var(--c-blue);
  border-radius: var(--r-card);
  overflow: hidden;
}

/* O véu. Vem da esquerda, que é onde o texto mora, e abre para a direita, que
   é onde o assunto das quatro fotos está. Sem ele o texto branco cai sobre
   colete refletivo e céu claro. */
.sc-cotar__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgb(2 12 28 / 0.92) 0%,
    rgb(2 12 28 / 0.82) 42%,
    rgb(2 12 28 / 0.35) 100%);
}

.sc-cotar__conteudo {
  position: relative;
  z-index: 2;
  max-width: 46ch;
  padding: clamp(var(--sp-6), 4vw, var(--sp-10));
}

.sc-cotar__num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.22);
  color: var(--c-white);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.sc-cotar__titulo {
  margin-top: var(--sp-4);
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--c-white);
}

.sc-cotar__texto {
  margin-top: var(--sp-2);
  color: rgb(255 255 255 / 0.92);
}

/* Os tracinhos do frame: 29x7 cinza, e o ativo 47x7 azul. Ficam embaixo do
   carrossel, alinhados à esquerda como lá. */
.sc-cotar__dots {
  justify-content: flex-start;
  gap: var(--sp-1);
  margin-top: var(--sp-4);
}

.sc-cotar__dots button {
  width: 29px;
  height: 7px;
  border-radius: 999px;
  background: #d9d9d9;
  transition: width 160ms ease, background 160ms ease;
}

.sc-cotar__dots button[aria-selected="true"] {
  width: 47px;
  background: var(--c-blue);
}

/* ==========================================================================
   AVERBAÇÃO: as três linhas com balão
   ========================================================================== */

/* Três colunas no frame: 252 de título, 420 de texto e 347 das linhas. */
.sc-averbacao__grade {
  display: grid;
  grid-template-columns: minmax(0, 252fr) minmax(0, 420fr) minmax(0, 347fr);
  gap: clamp(var(--sp-6), 3vw, var(--sp-12));
  align-items: start;
}

.sc-passos {
  display: grid;
  gap: var(--sp-2);
  padding: 0;
  list-style: none;
}

.sc-passo {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: 39px;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-white);
  border-radius: var(--r-input);
}

.sc-passo__nome {
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
}

/* O círculo tem 19px no frame, e 19px é alvo de toque pequeno demais: o
   mínimo do projeto é 44. Então o BOTÃO tem 44x44 de verdade, transparente, e
   o círculo cinza é o <span> de dentro. A margem negativa devolve os 25px de
   diferença para a linha não engordar além dos 39px do frame.

   A primeira versão usava um ::after de 44px para aumentar a área. Aumentava
   mesmo, mas o test-toque mede a caixa do elemento, e com razão: quem audita
   o site por fora mede o mesmo. */
.sc-passo__ajuda {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -12px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.sc-passo__ajuda > [aria-hidden] {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #d9d9d9;
  color: var(--text-body);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  line-height: 1;
}

.sc-passo__ajuda:hover > [aria-hidden],
.sc-passo__ajuda:focus-visible > [aria-hidden] { background: var(--c-blue); color: var(--c-white); }

/* O balão. Sutil, como pedido: aparece com uma transição curta, não salta. */
.sc-passo__dica {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 4;
  width: max-content;
  max-width: min(300px, 80vw);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-navy);
  color: var(--c-white);
  border-radius: var(--r-input);
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.22);
  font-size: var(--fs-14);
  line-height: var(--lh-prose);
  opacity: 0;
  /* `pointer-events` em vez de `visibility`: visibilidade é propriedade de
     transição discreta, e o balão ficava invisível com opacidade 1 enquanto
     a transição corria. Com opacidade zero ele já não aparece, e sem eventos
     de ponteiro ele não intercepta clique nenhum. */
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

/* A setinha do balão, apontando para o "?". */
.sc-passo__dica::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 14px;
  border: 6px solid transparent;
  border-top-color: var(--c-navy);
}

.sc-passo:hover .sc-passo__dica,
.sc-passo:focus-within .sc-passo__dica,
.sc-passo[data-aberto] .sc-passo__dica {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Quem pediu menos movimento recebe o balão sem a subida. */
@media (prefers-reduced-motion: reduce) {
  .sc-passo__dica { transition: none; transform: none; }
}

/* ==========================================================================
   TELAS MENORES
   ========================================================================== */

@media (max-width: 1080px) {
  .sc-quem__grade,
  .sc-averbacao__topo,
  .sc-tipos__grade,
  .sc-grupo { grid-template-columns: minmax(0, 1fr); }

  /* O formulário desce para baixo do texto antes de a coluna apertar: a
     partir daqui ele teria menos de 320px, e o par e-mail/telefone já
     quebraria em duas linhas. */
  .sc-hero__grade { grid-template-columns: minmax(0, 1fr); }
  .sc-hero { min-height: 0; }
  .sc-cotar__grade,
  .sc-averbacao__grade { grid-template-columns: minmax(0, 1fr); }

  /* Empilhado, o slide deixa de ser uma faixa larga e vira um cartão: a
     proporção do frame só faz sentido ao lado do texto. */
  .sc-cotar__slide { aspect-ratio: auto; min-height: 260px; }

  .sc-tipos__texto { position: static; }
  .sc-intro { max-width: 620px; }
  .sc-grupo__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-exig__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .sc-exemplo__corpo,
  .sc-caso__grade { grid-template-columns: minmax(0, 1fr); }

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

  /* a bolha do "!" volta para dentro da faixa */
  .sc-frase__caixa { margin-left: 0; }
  .sc-frase__marca {
    top: var(--sp-5); left: var(--sp-5);
    width: 64px; height: 64px;
    translate: 0;
    font-size: 34px;
    border-width: 4px;
  }
  .sc-frase__bg { height: 380px; }
  .sc-frase__texto {
    align-content: end;
    max-width: none;
    padding-top: 96px;
  }
}

@media (max-width: 680px) {
  .sc-grupo__lista,
  .sc-exig__grade { grid-template-columns: minmax(0, 1fr); }

  .sc-seguros__compare,
  .sc-link-forte--dir { text-align: left; }

  .sc-carga { grid-template-columns: 120px minmax(0, 1fr); }
  .sc-carga__media { height: 100%; min-height: 96px; }

  .sc-hero__acoes .btn { width: 100%; }
}