/* =============================================================================
   M&A Corretora — camada própria sobre o Bootstrap 5.

   Todos os valores abaixo foram EXTRAÍDOS do site em produção
   (cores, tipografia, espaçamentos e raios), não escolhidos por estimativa.
   O objetivo é fidelidade visual: quem conhece o site não deve perceber troca
   de tecnologia.

   Princípio: customizar por variável CSS, não sobrescrever regra do Bootstrap.
   ============================================================================= */

:root {
  /* --- Paleta medida no site atual --------------------------------- */
  --ma-azul:        #2a67bc;   /* botões, links, destaques */
  --ma-azul-hover:  #034b9a;   /* estado hover do menu e dos botões */
  --ma-navy:        #203864;   /* faixas escuras de seção (ex.: blog) */
  --ma-navy-escuro: #202945;   /* rodapé e botão "Área da Saúde" */
  --ma-cinza:       #f5f5f5;   /* fundo de seção alternada */
  --ma-tinta:       #333333;   /* texto corrido */
  --ma-tinta-forte: #090c12;   /* títulos e itens de menu */
  --ma-verde-zap:   #00a884;   /* cartão e botão flutuante do WhatsApp */
  --ma-linha:       #e3e6ea;

  /* Bootstrap lê estas variáveis: sem sobrescrita, sem !important. */
  --bs-primary: var(--ma-azul);
  --bs-primary-rgb: 42, 103, 188;
  --bs-body-color: var(--ma-tinta);
  --bs-body-font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-size: 1rem;      /* 16px, igual ao site atual */
  --bs-body-line-height: 1.5;     /* 24px, igual ao site atual */
  --bs-link-color: var(--ma-azul);
  --bs-link-hover-color: var(--ma-azul-hover);
  --bs-border-color: var(--ma-linha);
  --bs-border-radius: 0;          /* os botões do site atual são retangulares */

  /* --- Escala de espaçamento ---------------------------------------
     Uma escala só, usada por todo o site, em vez de um valor decidido a
     cada seção. É o que faz a página parecer composta e não montada.
     Os valores crescem com a tela (clamp), então o celular não recebe o
     respiro de um monitor de 27 polegadas. */
  --ma-esp-1: .5rem;
  --ma-esp-2: 1rem;
  --ma-esp-3: 1.5rem;
  --ma-esp-4: clamp(1.75rem, 3vw, 2.5rem);
  --ma-esp-5: clamp(2.75rem, 5vw, 4.5rem);   /* respiro entre seções */
  --ma-esp-6: clamp(3.5rem, 6.5vw, 6rem);    /* respiro das seções de destaque */

  /* Largura de leitura confortável: 65–75 caracteres por linha. */
  --ma-largura-texto: 44rem;

  /* --- Movimento ----------------------------------------------------
     Uma curva e três durações para o site inteiro. Movimento consistente
     é o que faz a interface parecer uma coisa só; cada componente com seu
     tempo próprio dá a sensação de remendo.
     A curva desacelera no fim, que é como objeto físico se comporta. */
  --ma-curva:    cubic-bezier(.4, 0, .2, 1);
  --ma-rapido:   .18s;   /* cor, opacidade — resposta imediata */
  --ma-medio:    .28s;   /* deslocamento, sombra */
  --ma-lento:    .45s;   /* imagem, revelação ao rolar */
}

/* Rolagem suave ao clicar numa âncora, como /seguros/#empresa. O navegador
   ignora esta linha sozinho quando o sistema pede menos animação. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* A fonte é a mesma do site atual (Open Sans), porém servida do próprio
   domínio. Nada de buscar arquivo em servidor de terceiro — foi assim que o
   site antigo ficou pedindo fonte a um staging já desligado. */
@font-face {
  font-family: "Open Sans";
  src: url("/static/fonts/open-sans-latin.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  src: url("/static/fonts/open-sans-latin-ext.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
}

body { -webkit-font-smoothing: antialiased; }
.container { max-width: 1140px; }   /* largura medida no site atual */

h1, h2, h3, h4 { color: var(--ma-tinta-forte); font-weight: 700; line-height: 1.15; }
h1 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.5rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.19rem); letter-spacing: -.01em; }  /* 35px no desktop */
/* O salto de 35px direto para 18px deixava h2 e h3 parecendo o mesmo nível
   dentro de um texto longo. 20px com entrelinha um pouco maior resolve. */
h3 { font-size: 1.25rem; line-height: 1.3; }
h4 { font-size: 1.0625rem; }

.skip-link {
  position: absolute; top: .5rem; left: .5rem; z-index: 2000;
  background: var(--ma-azul); color: #fff; padding: .6rem 1rem;
}

/* NOTA: a regra de foco visível vive agora no bloco
   "Movimento, profundidade e foco", mais abaixo, porque lá ela também
   cobre o contorno branco sobre fundo escuro. */
/* -----------------------------------------------------------------------------
   Título com a barra azul à esquerda — assinatura visual do site.
   No original é um elemento gráfico solto; aqui é um ::before, que não entra
   no fluxo de texto nem é lido por leitor de tela.
   ----------------------------------------------------------------------------- */
.titulo-barra { position: relative; padding-left: 1rem; }
.titulo-barra::before {
  content: ""; position: absolute; left: 0; top: .15em;
  width: 6px; height: .95em; background: var(--ma-azul);
}
.secao-escura .titulo-barra::before { background: #fff; }

/* --- Botões — retangulares e em caixa alta, como no site atual -------- */
.btn-ma, .btn-ma-linha, .btn-ma-branco {
  border-radius: 5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .02em; font-size: .875rem; padding: .95rem 1.75rem;
}
.btn-ma { background: var(--ma-azul); border: 1px solid var(--ma-azul); color: #fff; }
.btn-ma:hover, .btn-ma:focus-visible { background: var(--ma-azul-hover); border-color: var(--ma-azul-hover); color: #fff; }
.btn-ma-linha { background: transparent; border: 1px solid var(--ma-tinta-forte); color: var(--ma-tinta-forte); }
.btn-ma-linha:hover, .btn-ma-linha:focus-visible { background: var(--ma-tinta-forte); color: #fff; }
.btn-ma-branco { background: #fff; border: 1px solid #fff; color: var(--ma-azul); }
.btn-ma-branco:hover { background: var(--ma-cinza); color: var(--ma-azul-hover); }

/* --- Cabeçalho ------------------------------------------------------- */

/* O cabeçalho é fixo no topo. Sem isto, saltar para /seguros/#empresa
   deixaria o título da seção escondido atrás dele. */
html { scroll-padding-top: 5.5rem; }

.cabecalho {
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
          backdrop-filter: saturate(180%) blur(12px);
  position: sticky; top: 0; z-index: 1030;
  transition: box-shadow .3s ease, background .3s ease;
}
/* Rolando a página, a barra encolhe e ganha sombra: sinaliza que ela está
   por cima do conteúdo e devolve altura de tela para a leitura.
   A classe é ligada pelo ma.js. */
.cabecalho.encolhido { box-shadow: 0 2px 16px rgba(32,41,69,.13); background: rgba(255,255,255,.97); }
.cabecalho .navbar { padding: 0; }
.cabecalho .navbar-brand { padding: .9rem 0; margin-right: 2rem; }
.cabecalho .navbar-brand img { transition: width .3s ease, height .3s ease; }
.cabecalho.encolhido .navbar-brand img { width: 132px; height: 49px; }
.cabecalho .nav-link {
  position: relative;
  color: var(--ma-tinta-forte); font-weight: 400; font-size: 1rem;
  padding: 1.6rem .8rem;
  transition: color .2s ease, padding .3s ease;
}
.cabecalho.encolhido .nav-link { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.cabecalho.encolhido .btn-topo { padding-top: .75rem; padding-bottom: .75rem; }

/* Traço que cresce do centro sob o item — a mesma barra azul que já é
   assinatura do site nos títulos, aqui aplicada ao menu. */
.cabecalho .nav-link::before {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 1.05rem;
  height: 2px; background: var(--ma-azul);
  transform: scaleX(0); transform-origin: center;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.cabecalho .nav-link:hover, .cabecalho .nav-link.active,
.cabecalho .nav-item.show > .nav-link { color: var(--ma-azul); }
.cabecalho .nav-link:hover::before, .cabecalho .nav-link.active::before,
.cabecalho .nav-item.show > .nav-link::before { transform: scaleX(1); }

/* Submenu de Seguros. Cantos retos e a mesma paleta do resto do site —
   o Bootstrap traz arredondado por padrão, e aqui tudo é retangular. */
.cabecalho .dropdown-menu {
  border: 0; border-top: 2px solid var(--ma-azul); border-radius: 0;
  padding: .5rem 0; margin-top: 0;
  box-shadow: 0 12px 34px rgba(32,41,69,.16); min-width: 15rem;
}
/* A animação de abertura só vale no desktop. Abaixo de 1200px o Bootstrap
   coloca o submenu no fluxo da página (position: static) dentro do menu
   sanfonado — mantê-lo com `display: block` ali abriria um buraco no
   lugar dele mesmo fechado. */
@media (min-width: 1200px) {
  .cabecalho .dropdown-menu {
    display: block; visibility: hidden; opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .cabecalho .dropdown-menu.show { visibility: visible; opacity: 1; transform: translateY(0); }
}
.cabecalho .dropdown-item {
  position: relative; color: var(--ma-tinta-forte); font-size: .95rem;
  padding: .6rem 1.1rem; transition: background .18s ease, color .18s ease, padding-left .18s ease;
}
.cabecalho .dropdown-item:hover, .cabecalho .dropdown-item:focus {
  background: var(--ma-cinza); color: var(--ma-azul); padding-left: 1.4rem;
}
.cabecalho .dropdown-divider { margin: .35rem 0; border-color: var(--ma-linha); }
.cabecalho .dropdown-toggle::after {
  margin-left: .4em; vertical-align: .15em; transition: transform .25s ease;
}
.cabecalho .nav-item.show > .dropdown-toggle::after,
.cabecalho .dropdown.show > .dropdown-toggle::after { transform: rotate(180deg); }

/* --- Hambúrguer que vira X ------------------------------------------- */
.botao-menu {
  width: 46px; height: 46px; border: 0; padding: 0;
  display: grid; place-content: center; gap: 5px; background: none;
}
.botao-menu:focus { box-shadow: none; }
.botao-menu-traco {
  display: block; width: 24px; height: 2px; background: var(--ma-tinta-forte);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
.botao-menu[aria-expanded="true"] .botao-menu-traco:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.botao-menu[aria-expanded="true"] .botao-menu-traco:nth-child(2) { opacity: 0; }
.botao-menu[aria-expanded="true"] .botao-menu-traco:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* No celular o menu já está aberto na vertical: o submenu vira lista
   indentada, sem caixa flutuante. */
@media (max-width: 1199.98px) {
  /* O padding vertical de 1.6rem existe para dar altura à barra no desktop.
     Empilhado no celular ele viraria uma lista de dois metros. */
  .cabecalho .navbar-collapse { padding-bottom: .35rem; }
  .cabecalho .nav-item + .nav-item { border-top: 1px solid var(--ma-linha); }
  .cabecalho .nav-link {
    padding: .85rem .25rem .85rem 1rem;   /* alvo de toque de 44px */
    font-weight: 600;
  }
  /* No vertical o traço embaixo não faz sentido: vira uma barra à esquerda,
     que é a mesma assinatura visual dos títulos. */
  .cabecalho .nav-link::before {
    left: 0; right: auto; top: .85rem; bottom: .85rem;
    width: 3px; height: auto;
    transform: scaleY(0); transform-origin: center;
  }
  .cabecalho .nav-link:hover::before, .cabecalho .nav-link.active::before,
  .cabecalho .nav-item.show > .nav-link::before { transform: scaleY(1); }

  .cabecalho .dropdown-menu {
    border: 0; border-top: 0; box-shadow: none;
    padding: 0 0 .5rem 1.6rem; margin: 0; background: none;
  }
  .cabecalho .dropdown-item { padding: .6rem 0; font-size: .95rem; }
  .cabecalho .dropdown-item:hover, .cabecalho .dropdown-item:focus {
    background: none; padding-left: .35rem;
  }
  .cabecalho .dropdown-divider { display: none; }
  .cabecalho.encolhido .nav-link { padding-top: .85rem; padding-bottom: .85rem; }
}

/* Os dois botões colados no canto superior direito, ocupando a altura toda. */
.btn-topo {
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #fff; text-decoration: none; font-size: .95rem; line-height: 1.2;
  padding: 1rem 1.5rem; min-height: 100%; align-self: stretch;
  transition: filter .18s ease;
}
.btn-topo:hover { color: #fff; filter: brightness(1.12); }
.btn-topo-saude { background: var(--ma-navy-escuro); }
.btn-topo-orcamento { background: var(--ma-azul); }
.btn-topo.dropdown-toggle::after { margin-left: .5em; }

/* Menu de acesso a sistemas. Cada item traz uma linha de apoio dizendo o que
   o visitante encontra do outro lado — "Área da Saúde" sozinho não diz. */
.menu-sistemas { min-width: 20rem; margin-top: 0; }
.menu-sistemas .dropdown-item {
  white-space: normal; padding: .75rem 1.1rem; font-weight: 600;
  color: var(--ma-tinta-forte);
}
.menu-sistemas .dropdown-item span {
  display: block; font-weight: 400; font-size: .85rem; color: var(--ma-tinta);
  margin-top: .15rem;
}
.menu-sistemas .dropdown-item:hover, .menu-sistemas .dropdown-item:focus {
  background: var(--ma-cinza); color: var(--ma-azul);
}
.menu-sistemas .dropdown-item:hover span { color: var(--ma-tinta); }

/* No celular a faixa vira duas linhas: acessos lado a lado, orçamento inteiro. */
.faixa-topo-mobile .btn-topo { padding: .8rem .75rem; font-size: .88rem; }
.faixa-topo-mobile .btn-topo-saude + .btn-topo-saude { border-left: 1px solid rgba(255,255,255,.18); }
.faixa-topo-mobile .btn-topo-orcamento { font-weight: 600; }

/* --- Trilha ---------------------------------------------------------- */
.trilha { background: var(--ma-cinza); padding: .7rem 0; font-size: .875rem; }
.trilha .breadcrumb-item + .breadcrumb-item::before { content: "›"; }

/* --- Hero: imagem sangrada com texto sobreposto à esquerda ------------ */
.hero {
  position: relative; min-height: 500px; display: flex; align-items: center;
  background: #dfe7f0 center/cover no-repeat;
}
/* A foto do hero tem pessoas a direita: ancorar no topo-direita evita
   cortar rosto em tela larga. */
.hero { background-position: 70% top; }
.hero-conteudo { position: relative; z-index: 2; max-width: 34rem; padding: 4rem 0 7rem; }
.hero h1 { font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.75rem); margin-bottom: 1.75rem; }
/* Véu branco só no lado do texto, para o contraste passar em qualquer foto. */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 10%, rgba(255,255,255,0) 32%);
}
@media (max-width: 767px) {
  .hero { min-height: 0; }
  .hero::before { background: rgba(255,255,255,.9); }
  .hero-conteudo { padding: 2.5rem 0 5rem; }
}

/* --- Barra de atalhos flutuante -------------------------------------- */
.atalhos { position: relative; z-index: 3; }
/* Só a barra logo abaixo do hero sobe por cima da foto. A segunda ocorrência,
   no meio da página, fica no fluxo normal. */
.hero + .atalhos { margin-top: -3.2rem; }
.atalhos + .fique-por-dentro { margin-top: -5.7rem; }
/* A mesma sobreposição nas páginas internas, como no site atual, onde a
   barra de atalhos monta em cima da faixa da foto. */
.cabecalho-pagina + .atalhos { margin-top: -3rem; }
/* A segunda ocorrência, no meio da página, respira sozinha. */
.secao + .atalhos { margin: 1rem 0 3rem; }
.atalhos-caixa { background: var(--ma-cinza); padding: 2rem 1rem; border-radius: 1.5rem; }
.lista-atalhos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: space-around; gap: 1.25rem;
}
.lista-atalhos a {
  display: flex; align-items: center; gap: .75rem;
  color: var(--ma-tinta); text-decoration: none; font-size: .95rem; line-height: 1.25;
}
.lista-atalhos a:hover { color: var(--ma-azul); }
.atalho-icone {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  color: var(--ma-azul);
}
.atalho-icone svg { width: 26px; height: 26px; }

/* --- Seções ---------------------------------------------------------- */
.secao { padding: var(--ma-esp-5) 0; }
.secao-cinza { background: var(--ma-cinza); }
.secao-escura { background: var(--ma-navy); color: rgba(255,255,255,.9); }
.secao-escura h2, .secao-escura h3 { color: #fff; }

/* Faixa escura com foto de fundo — a mesma do site atual. O navy fica por
   baixo como cor de reserva: se a imagem demorar ou falhar, o texto branco
   continua legível em vez de aparecer sobre o branco da página. */
.faixa-com-foto {
  background-color: var(--ma-navy);
  background-image: image-set(url("/static/img/faixa-solucoes.webp") type("image/webp"),
                              url("/static/img/faixa-solucoes.jpg") type("image/jpeg"));
  background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 400px; display: flex;
}
.faixa-com-foto .container {
  display: flex; align-items: center; justify-content: center;
}

@supports not (background-image: image-set(url("x.webp") type("image/webp"))) {
  .faixa-com-foto { background-image: url("/static/img/faixa-solucoes.jpg"); }
}

/* Respiro entre o título da seção e o que vem depois dele — hoje cada
   template resolvia isso na mão, com valor diferente em cada um. */
.secao > .container > h2:first-child,
.secao > .container > .titulo-barra:first-child { margin-bottom: var(--ma-esp-4); }

/* --- Grafismo: retângulo de contorno que sangra para fora da tela ------
   É o motivo gráfico do site atual, onde vinha embutido dentro das fotos de
   banner. Aqui é desenhado em CSS: escala em qualquer largura, não pesa um
   byte e pode ir para qualquer seção sem depender de um arquivo novo.

   O `overflow: hidden` na seção é o que faz o retângulo *sangrar* em vez de
   esticar a página — sem ele voltaria a rolagem horizontal. */
.com-grafismo { position: relative; overflow: hidden; isolation: isolate; }
.com-grafismo::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: clamp(18rem, 38vw, 30rem);
  height: clamp(11rem, 20vw, 19rem);
  border: 3px solid var(--ma-azul);
  opacity: .22;
}
.com-grafismo::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: clamp(18rem, 38vw, 15rem);
  height: clamp(11rem, 20vw, 24rem);
  border: 3px solid var(--ma-azul);
  opacity: .22;
}
/* Sangra pela direita: o canto arredondado é o único que fica na tela. */
.grafismo-dir::before { top: 30%; right: calc(-1 * clamp(6rem, 14vw, 12rem)); border-radius: 1.5rem 0 0 1.5rem; }
.grafismo-dir::after { top: 12%; right: calc(-1 * clamp(6rem, 14vw, 15rem)); border-radius: 1.5rem 0 0 1.5rem; }
/* Sangra pela esquerda, como no banner interno do site atual. */
.grafismo-esq::before { top: 8%;  left:  calc(-1 * clamp(6rem, 14vw, 13rem)); border-radius: 0 1.5rem 1.5rem 0; }
.grafismo-esq::after { top: 24%;  left:  calc(-1 * clamp(6rem, 14vw, 15.5rem)); border-radius: 0 1.5rem 1.5rem 0; }
/* Sobre fundo navy o traço precisa ser claro para existir. */
.secao-escura.com-grafismo::before { border-color: #fff; opacity: 1; }
.secao-escura.com-grafismo::after { border-color: #fff; opacity: 1; }
/* O conteúdo passa por cima do traço, nunca por baixo. */
.com-grafismo > .container { position: relative; z-index: 1; }

/* Em tela estreita o grafismo vira ruído atrás do texto: some. */
@media (max-width: 767.98px) {
  .com-grafismo::before { display: none; }
  .com-grafismo::after { display: none; }
}
/* Cabeçalho de página com a mesma foto de banner do site atual.
   O véu branco garante contraste do texto sobre qualquer parte da foto —
   sem ele o título some no claro da imagem. */
/* A foto muda por página: o template define --banner-webp/--banner-jpg em
   `style=`, e a escolha vem de app/banners.py. Os valores abaixo são a
   reserva, para o caso de alguém montar uma tela sem passar o banner. */
.cabecalho-pagina {
  --banner-webp: url("/static/img/banners/escritorio.webp");
  --banner-jpg:  url("/static/img/banners/escritorio.jpg");
  position: relative; padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ma-cinza) center/cover no-repeat;
  background-image: image-set(var(--banner-webp) type("image/webp"),
                              var(--banner-jpg) type("image/jpeg"));
}
/* O véu clareia o lado do texto e vai abrindo para a direita, onde a foto
   aparece. Agora que cada página tem a sua foto, vale mostrá-la mais: o
   lado esquerdo continua fechado o bastante para o título preto passar em
   contraste sobre qualquer banner, inclusive os escuros (marítimo,
   aeronáutico). */
.cabecalho-pagina {
  /* O véu como variável: o degradê muda por tamanho de tela, a montagem do
     fundo não precisa ser repetida. */
  --ma-veu: linear-gradient(90deg,
    rgba(255,255,255,.93) 0%,
    rgba(255,255,255,.80) 42%,
    rgba(255,255,255,.22) 100%);
 
  /* Primeira camada por cima, última por baixo: véu sobre a foto. */
  background-image:
    var(--ma-veu),
    image-set(var(--banner-webp) type("image/webp"),
              var(--banner-jpg)  type("image/jpeg"));
}
 
/* No celular o degradê precisa mudar de direção.
 
   O horizontal foi desenhado para o desktop, onde o título ocupa a metade
   esquerda da tela — a parte opaca. Na tela estreita o título atravessa a
   largura inteira e o fim de cada linha cai onde o véu vale .22. Some.
 
   Vertical resolve: forte em cima, onde o texto está, e aliviando para
   baixo, onde a foto continua aparecendo. */
@media (max-width: 767.98px) {
  .cabecalho-pagina {
    --ma-veu: linear-gradient(180deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.88) 10%,
      rgba(255,255,255,.70) 80%);
  }
}
 
/* Navegador sem `image-set` cai no JPG — e o véu tem que ir junto, senão
   volta o problema justamente onde há menos recurso. */
@supports not (background-image: image-set(url("x.webp") type("image/webp"))) {
  .cabecalho-pagina {
    background-image: var(--ma-veu), var(--banner-jpg);
  }
}
 
/* Garantia: se o bloco `.cabecalho-pagina::before` do véu tiver ficado no
   arquivo por engano, esta linha impede que ele volte a pintar por cima do
   grafismo. Pode remover depois de conferir que o bloco antigo saiu. */
.cabecalho-pagina::before { background: none; }
.cabecalho-pagina > .container { position: relative; z-index: 1; }
.cabecalho-pagina .lead { color: var(--ma-tinta); max-width: 46rem; font-size: 1.05rem; }
/* Navegador sem image-set cai no JPG. */
@supports not (background-image: image-set(url("x.webp") type("image/webp"))) {
  .cabecalho-pagina { background-image: var(--banner-jpg); }
}

/* --- Números / contadores -------------------------------------------- */
.intro-home {
  font-size: 1.25rem; line-height: 1.55; text-align: center;
  max-width: var(--ma-largura-texto); margin: 0 auto var(--ma-esp-5);
}
.numeros { list-style: none; padding: 0; margin: 0; }
.numero-valor { color: var(--ma-azul); font-size: 2.25rem; font-weight: 700; line-height: 1.1; }
.numero-valor small { font-size: 1.35rem; font-weight: 700; }
.numero-texto { font-size: .95rem; margin-top: .5rem; }

/* --- Abas de categoria ------------------------------------------------ */
.abas { display: flex; gap: 2rem; flex-wrap: wrap; border: 0; margin: 1.5rem 0 2rem; }
.abas .nav-link {
  border: 0; padding: 0 0 .4rem; color: var(--ma-tinta); font-weight: 600;
  background: none; border-bottom: 3px solid transparent;
}
.abas .nav-link.active { color: var(--ma-azul); border-bottom-color: var(--ma-azul); background: none; }

/* --- Cartão de produto com foto e sobreposição ------------------------ */
.card-foto {
  position: relative; display: block; overflow: hidden; border-radius: 8px;
  aspect-ratio: 3 / 4; text-decoration: none; background: var(--ma-navy);
}
.card-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.card-foto:hover img { transform: scale(1.05); }
.card-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.78) 100%);
}
.card-foto-titulo {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2;
  color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.25; margin: 0;
}
.card-vermais {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; background: var(--ma-azul-hover); color: #fff; border-radius: 8px;
  aspect-ratio: 3 / 4; text-decoration: none; font-weight: 700;
}
.card-vermais:hover { background: var(--ma-azul); color: #fff; }
.card-vermais .simbolo {
  width: 40px; height: 40px; border: 2px solid #fff; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.4rem; line-height: 1;
}

.figura-lado {
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}

.figura-lado picture img {
  display: flex;
  width: 100%;
}


/* --- Carrossel de clientes ---------------------------------------------
   Sem caixa e sem borda em volta de cada logo: a moldura antiga
   transformava as marcas em retângulos cinza e era o que mais chamava
   atenção no bloco.

   NUNCA barra de rolagem. Faixa de logos com scrollbar parece defeito. */

.cabecalho-desfile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: var(--ma-esp-3);
}

.desfile { overflow: hidden; }

/* ESTADO PADRÃO — sem JavaScript: grade estática, todos os logos visíveis,
   quebrando em linhas. Nada se move, nada fica escondido.

   Quem promove a grade para carrossel é o ma.js, marcando o contêiner com
   `data-pronto`. A direção é essa de propósito: se o script falhar, sobra
   uma grade correta em vez de uma fila cortada. */
.desfile-trilha {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  margin: 0; padding: .75rem 0;
}

/* Modo carrossel: uma linha só, sem quebra. */
.desfile[data-pronto] .desfile-trilha {
  flex-wrap: nowrap; justify-content: flex-start;
  width: max-content;
  will-change: transform;
}

.desfile-trilha li { flex: 0 0 auto; display: flex; align-items: center; }
/* Os limites são em pixel, não em `100%`: dentro de um <picture> de altura
   automática, uma porcentagem não tem contra o que ser calculada e o
   navegador simplesmente ignora — foi o que cortava os logos ao meio. */
.desfile-trilha img {
  max-height: clamp(48px, 6vw, 72px);
  max-width: clamp(130px, 17vw, 200px);
  width: auto; height: auto; display: block;
}

/* --- Setas do carrossel ------------------------------------------------ */
.desfile-setas { display: flex; gap: .5rem; flex: none; }
.desfile-setas[hidden] { display: none; }
.desfile-setas button {
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 1px solid var(--ma-linha); background: #fff; color: var(--ma-azul);
  border-radius: 50%; display: grid; place-items: center;
  transition: background var(--ma-rapido) var(--ma-curva),
              border-color var(--ma-rapido) var(--ma-curva),
              color var(--ma-rapido) var(--ma-curva);
}
.desfile-setas button:hover {
  background: var(--ma-azul); border-color: var(--ma-azul); color: #fff;
}
.desfile-setas svg { width: 18px; height: 18px; }

/* --- Cartão de artigo --------------------------------------------------
   `position: relative` é o que permite ao `stretched-link` do título cobrir
   o cartão inteiro: a área de clique passa a ser o cartão, mas continua
   existindo um único link. */
.card-post {
  position: relative; background: #fff; border-radius: 8px; overflow: hidden;
  height: 100%; display: flex; flex-direction: column;
}
/* O <picture> precisa ser bloco, senão a imagem não preenche a largura do
   cartão e sobra faixa branca na lateral. */
.card-post picture { display: block; }
/* Proporção fixa em vez de altura fixa: a foto acompanha a largura do
   cartão e todos os cartões da linha continuam iguais em qualquer tela. */
.card-post img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; }
.card-post-corpo { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }

/* Data e categoria acima do título: dizem de cara se o artigo é recente e
   sobre o que é, antes de o visitante ler a chamada. */
.card-post-meta {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: .8rem; color: #5b6472; margin: 0 0 .55rem; flex: none;
}
.etiqueta {
  background: rgba(42,103,188,.1); color: var(--ma-azul);
  font-weight: 700; font-size: .72rem; letter-spacing: .03em; text-transform: uppercase;
  padding: .2rem .5rem; border-radius: 3px;
}

.card-post h2, .card-post h3 {
  font-size: 1.05rem; line-height: 1.35; margin-bottom: .5rem;
  /* Sem corte: o título de um artigo é o que decide o clique. */
  overflow-wrap: break-word; hyphens: auto;
}
.card-post h2 a, .card-post h3 a { color: var(--ma-tinta-forte); text-decoration: none; }
.card-post h2 a:hover, .card-post h3 a:hover { color: var(--ma-azul); }
.card-post p { font-size: .9rem; color: var(--ma-tinta); }
.card-post-corpo > p:not(.card-post-meta) { flex: 1; }
.card-post .link-seta { margin-top: auto; }
.link-seta { display: inline-block; color: var(--ma-azul); font-weight: 700; text-decoration: none; font-size: .9rem; }
a.link-seta:hover { text-decoration: underline; }
.card-post:hover .link-seta { text-decoration: underline; }
.secao-escura .card-post h3 a { color: var(--ma-tinta-forte); }

/* --- Faixa de destaques da página de produto --------------------------- */
.faixa-destaques { padding: var(--ma-esp-4) 0; }
.destaque { height: 100%; padding-left: 1rem; border-left: 3px solid var(--ma-azul); }
.destaque h2 { font-size: 1.05rem; margin-bottom: .3rem; }
.destaque p { font-size: .92rem; color: var(--ma-tinta); }

/* --- Cartão de modalidade / cobertura ---------------------------------- */
.bloco-cobertura {
  height: 100%; background: #fff; border: 1px solid var(--ma-linha);
  border-radius: 8px; padding: 1.15rem 1.25rem;
  box-shadow: 0 1px 3px rgba(32,41,69,.06);
  transition: transform var(--ma-medio) var(--ma-curva), box-shadow var(--ma-medio) var(--ma-curva), border-color var(--ma-medio) var(--ma-curva);
}
.bloco-cobertura:hover {
  transform: translateY(-3px); border-color: var(--ma-azul);
  box-shadow: 0 12px 26px rgba(32,41,69,.14);
}
.bloco-cobertura h3 { font-size: 1.02rem; margin-bottom: .35rem; color: var(--ma-azul); }
.bloco-cobertura p { font-size: .9rem; color: var(--ma-tinta); }

/* --- Cartões de contato ------------------------------------------------ */
.card-contato {
  background: #fff; border: 1px solid var(--ma-linha); border-radius: 8px;
  padding: 1.5rem 1.25rem; text-align: center; height: 100%;
}
.card-contato .icone { color: var(--ma-azul); line-height: 1; }
.card-contato .icone svg { width: 30px; height: 30px; }
.card-contato h3 { font-size: 1rem; margin: .75rem 0 .35rem; }
.card-contato p, .card-contato a { font-size: .95rem; color: var(--ma-tinta); text-decoration: none; word-break: break-word; }
.card-contato-zap { background: var(--ma-verde-zap); border-color: var(--ma-verde-zap); color: #fff; }
.card-contato-zap h3, .card-contato-zap .icone, .card-contato-zap a { color: #fff; }

/* --- Prosa ------------------------------------------------------------- */
.prosa { font-size: 1.0625rem; line-height: 1.7; max-width: var(--ma-largura-texto); }
.prosa > p { margin-bottom: 1.15rem; }
/* Espaço maior ANTES do título do que depois: é o que amarra o título ao
   texto que ele abre, em vez de deixá-lo flutuando entre os dois blocos. */
.prosa h2 { margin: var(--ma-esp-4) 0 .6rem; }
.prosa h3 { margin: var(--ma-esp-3) 0 .45rem; }
.prosa ul, .prosa ol { padding-left: 1.35rem; }
.prosa li { margin-bottom: .5rem; }
.prosa img { max-width: 100%; height: auto; border-radius: 8px; }
.prosa blockquote { border-left: 4px solid var(--ma-azul); padding-left: 1.25rem; margin: 1.5rem 0; }
.prosa table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.prosa th { background: var(--ma-cinza); text-align: left; padding: .65rem .85rem; }
.prosa td { padding: .65rem .85rem; border-top: 1px solid var(--ma-linha); }

/* --- Imagem de destaque do artigo -------------------------------------- */
.figura-post { padding: 1.75rem 0 0; }
.figura-post img { width: 100%; height: auto; max-height: 460px; object-fit: cover;
                   object-position: center; border-radius: 8px; display: block; }
.meta-post { color: var(--ma-tinta); font-size: .9rem; margin-bottom: 0; }

/* --- Lateral ----------------------------------------------------------- */
.caixa-lateral { background: var(--ma-cinza); padding: 1.5rem; position: sticky; top: 7rem; }

/* --- Formulário -------------------------------------------------------- */
.form-ma .form-label { font-weight: 600; font-size: .92rem; }
.form-ma .form-control, .form-ma .form-select { border-radius: 0; padding: .7rem .9rem; }
.form-ma .form-control:focus, .form-ma .form-select:focus {
  border-color: var(--ma-azul); box-shadow: 0 0 0 .2rem rgba(42,103,188,.15);
}
.obrig { color: #b3261e; }
/* Campo isca do anti-spam: fora da tela, mas não display:none — alguns robôs
   ignoram campos ocultos justamente por saberem que são armadilha. */
.campo-isca { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* --- WhatsApp flutuante ------------------------------------------------- */
.zap-flutuante {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1040;
  width: 58px; height: 58px; border-radius: 50%; background: #25d366;
  display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.zap-flutuante svg { width: 32px; height: 32px; fill: #fff; }

/* --- Consentimento LGPD -------------------------------------------------- */
.consentimento { position: fixed; inset: auto 1rem 1rem 1rem; z-index: 1080; display: flex; justify-content: center; }
.consentimento[hidden] { display: none; }
.consentimento-caixa { background: #fff; border: 1px solid var(--ma-linha); padding: 1.25rem 1.5rem; max-width: 32rem; box-shadow: 0 8px 32px rgba(32,41,69,.2); }

/* --- Rodapé -------------------------------------------------------------- */
.rodape { background: var(--ma-navy-escuro); color: rgba(255,255,255,.82); padding: 3rem 0 0; }
.rodape h2 { color: var(--ma-azul); font-size: .95rem; font-weight: 700; margin-bottom: .9rem; }
.rodape a { color: rgba(255,255,255,.82); text-decoration: none; font-size: .93rem; }
.rodape a:hover { color: #fff; text-decoration: underline; }
.rodape li { margin-bottom: .4rem; }
.rodape-social { display: flex; gap: .55rem; }
.rodape-social a {
  width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%;
  display: grid; place-items: center;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.rodape-social a svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.rodape-social a:hover {
  background: var(--ma-azul); border-color: var(--ma-azul); color: #fff;
  transform: translateY(-2px);
}
.rodape-base { border-top: 1px solid rgba(255,255,255,.15); margin-top: 2.5rem; padding: 1.1rem 0; font-size: .82rem; }

/* --- Erros ---------------------------------------------------------------- */
.erro-codigo { font-size: 4rem; font-weight: 800; color: var(--ma-cinza); line-height: 1; margin-bottom: 0; }
.lista-404 { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: center; }

/* --- Movimento, profundidade e foco ---------------------------------------
   Regra de ouro aqui: nada pisca, nada salta, nada desloca o texto. O
   movimento serve para confirmar "isto é clicável", não para chamar atenção.
   Quem pediu menos animação no sistema recebe tudo estático — a regra
   prefers-reduced-motion no fim do arquivo zera as transições. */

/* Botões, links e campos: mesma curva, mesma duração. */
.btn, .btn-ma, .btn-ma-linha, .btn-ma-branco, .btn-topo,
a, .form-control, .form-select, .accordion-button {
  transition: color var(--ma-rapido) var(--ma-curva),
              background-color var(--ma-rapido) var(--ma-curva),
              border-color var(--ma-rapido) var(--ma-curva),
              box-shadow var(--ma-medio) var(--ma-curva),
              transform var(--ma-medio) var(--ma-curva);
}
/* Botão principal também reage: sobe 1px e ganha sombra. Sutil de propósito
   — botão que pula parece brinquedo. */
.btn-ma:hover, .btn-ma-branco:hover, .btn-ma-linha:hover {
  transform: translateY(-1px); box-shadow: 0 6px 16px rgba(32,41,69,.18);
}
.btn-ma:active, .btn-ma-branco:active, .btn-ma-linha:active {
  transform: translateY(0); box-shadow: none;
}

/* Cartão de produto: a foto avança um pouco, o cartão sobe e o degradê
   escurece para o título ganhar contraste no momento do hover. */
.card-foto {
  transition: transform var(--ma-medio) var(--ma-curva),
              box-shadow var(--ma-medio) var(--ma-curva);
  will-change: transform;
}
.card-foto img { transition: transform var(--ma-lento) var(--ma-curva); }
.card-foto::after { transition: background var(--ma-medio) var(--ma-curva); }
.card-foto:hover, .card-foto:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(32,41,69,.22);
}
.card-foto:hover::after, .card-foto:focus-visible::after {
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.85) 100%);
}
.card-foto-titulo { transition: transform .25s ease; }
.card-foto:hover .card-foto-titulo { transform: translateY(-2px); }

.card-vermais { transition: background .2s ease, transform .25s ease, box-shadow .25s ease; }
.card-vermais:hover, .card-vermais:focus-visible {
  transform: translateY(-4px); box-shadow: 0 14px 30px rgba(32,41,69,.22);
}

/* Cartão de artigo e de contato: sombra fraca em repouso, mais firme no
   hover. A borda de 1px continua lá para quem não enxerga sombra. */
.card-post, .card-contato {
  box-shadow: 0 1px 3px rgba(32,41,69,.07);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-post:hover, .card-post:focus-within,
.card-contato:hover, .card-contato:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(32,41,69,.16);
}
.card-post img { transition: transform .4s ease; }
.card-post:hover img { transform: scale(1.04); }

/* Itens de menu e atalhos: só a cor, sem deslocamento. */
.cabecalho .nav-link, .lista-atalhos a, .link-seta, .rodape a {
  transition: color .18s ease;
}
.lista-atalhos a .atalho-icone { transition: transform .2s ease; }
.lista-atalhos a:hover .atalho-icone { transform: translateY(-2px); }

/* Foco visível de verdade. O contorno padrão do navegador some sobre fundo
   escuro; este funciona nos dois. Aparece só na navegação por teclado. */
:focus-visible {
  outline: 3px solid var(--ma-azul);
  outline-offset: 3px;
  border-radius: 2px;
}
.secao-escura :focus-visible, .rodape :focus-visible, .btn-topo:focus-visible {
  outline-color: #fff;
}

/* --- Revelação ao rolar ------------------------------------------------
   As seções sobem 18px e aparecem quando entram na tela. Duas travas
   deliberadas:

   1. A classe `js-revelar` é posta no <html> pelo próprio JavaScript. Sem
      JS — ou se o script falhar — nada fica escondido, porque a regra que
      esconde depende dessa classe existir. Conteúdo nunca some por causa
      de enfeite.
   2. O deslocamento é vertical e pequeno. Elemento que entra voando da
      lateral empurra a leitura e, em tela estreita, chega a criar rolagem
      horizontal. */
.js-revelar .revelar {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--ma-lento) var(--ma-curva),
              transform var(--ma-lento) var(--ma-curva);
}
.js-revelar .revelar.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-revelar .revelar { opacity: 1; transform: none; }
}

/* --- Painel de auditoria (apenas em desenvolvimento) ---------------------- */
.painel-seo {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 2000;
  background: #14181f; color: #cfe0ff; font: 12px/1.5 ui-monospace, monospace;
  padding: .4rem .75rem; display: flex; gap: 1.25rem; flex-wrap: wrap;
}
.painel-seo .alerta { color: #ffcf7a; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .15s !important; transition-duration: .15s !important; }
}

/* --- Página institucional: linha do tempo, sócios, valores -------------
   Os blocos abaixo reproduzem a estrutura da página "Quem somos" do site
   atual. Ficam aqui, e não num CSS por página, porque qualquer página
   institucional pode usá-los só declarando o campo no conteúdo. */

.linha-tempo { position: relative; padding-left: 2.5rem; }
/* O fio vertical que liga os marcos. É decorativo: desenhado no ::before
   do <ol>, não como elemento, para não ser lido por leitor de tela. */
.linha-tempo::before {
  content: ""; position: absolute; left: .63rem; top: .6rem; bottom: .6rem;
  width: 2px; background: var(--ma-linha);
}
.linha-tempo > li { position: relative; padding-bottom: var(--ma-esp-4); }
.linha-tempo > li:last-child { padding-bottom: 0; }
.linha-tempo > li::before {
  content: ""; position: absolute; left: -2.25rem; top: .55rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--ma-azul);
}
.linha-tempo-ano {
  color: var(--ma-azul); font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 800; line-height: 1; margin: 0 0 .5rem;
}
.linha-tempo-texto { max-width: var(--ma-largura-texto); line-height: 1.7; }

.cartao-socio {
  height: 100%; background: #fff; border: 1px solid var(--ma-linha);
  border-radius: 8px; padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(32,41,69,.07);
  transition: transform var(--ma-medio) var(--ma-curva), box-shadow var(--ma-medio) var(--ma-curva);
}
.cartao-socio:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(32,41,69,.15); }
.cartao-socio h2 { font-size: 1.15rem; margin-bottom: .15rem; }
.cartao-socio .cargo {
  color: var(--ma-azul); font-weight: 700; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: .9rem;
}
.cartao-socio p { font-size: .93rem; line-height: 1.65; }

.lista-atributos {
  display: flex; flex-wrap: wrap; gap: .75rem 1rem;
  margin: var(--ma-esp-4) 0 0; padding: 0;
}
.lista-atributos li {
  background: #fff; border: 1px solid var(--ma-linha); border-radius: 999px;
  padding: .5rem 1.1rem; font-size: .9rem; font-weight: 600;
  color: var(--ma-tinta-forte);
}
/* O losango azul antes de cada atributo é decorativo. */
.lista-atributos li::before {
  content: ""; display: inline-block; width: 7px; height: 7px;
  margin-right: .55rem; vertical-align: .1em;
  background: var(--ma-azul); transform: rotate(45deg);
}

.intro-bloco { max-width: var(--ma-largura-texto); margin: 0 0 var(--ma-esp-4); }

.cartao-valor {
  height: 100%; padding: 1.5rem; background: var(--ma-cinza);
  border-top: 3px solid var(--ma-azul);
}
.cartao-valor h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.cartao-valor p { font-size: .93rem; line-height: 1.65; }

.cartao-diferencial { height: 100%; padding-left: 1rem; border-left: 3px solid #fff; }
.cartao-diferencial h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.cartao-diferencial p { font-size: .92rem; color: rgba(255,255,255,.85); }

/* --- Telefone das seguradoras ------------------------------------------ */
.busca-seguradora {
  display: flex; max-width: 100%; margin: 0 0 .75rem;
}
.busca-seguradora input {
  flex: 1; min-width: 0;
  border: 1px solid var(--ma-linha); border-right: 0; border-radius: 0;
  padding: .75rem 1rem; font-size: .95rem; background: #fff;
  transition: border-color var(--ma-rapido) var(--ma-curva), box-shadow var(--ma-rapido) var(--ma-curva);
  border-radius: 5px 0 0 5px;
}
.busca-seguradora input:focus {
  outline: none; border-color: var(--ma-azul);
  box-shadow: 0 0 0 .2rem rgba(42,103,188,.15);
}
.busca-seguradora button {
  flex: none; width: 3rem; border: 0; background: var(--ma-azul); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  border-radius: 0 5px 5px 0;
}
.busca-seguradora button:hover { background: var(--ma-azul-hover); }
.busca-seguradora button svg { width: 18px; height: 18px; }

.contagem-seguradoras {
  font-size: .85rem; color: #5b6472; margin: 0 0 var(--ma-esp-4); min-height: 1.2em;
}

.cartao-seguradora {
  height: 100%; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--ma-linha); border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(32,41,69,.07);
  transition: transform var(--ma-medio) var(--ma-curva),
              box-shadow var(--ma-medio) var(--ma-curva),
              border-color var(--ma-medio) var(--ma-curva);
}
.cartao-seguradora:hover, .cartao-seguradora:focus-within {
  transform: translateY(-3px); border-color: var(--ma-azul);
  box-shadow: 0 12px 26px rgba(32,41,69,.15);
}
/* Altura fixa para o logo: as marcas têm proporções muito diferentes e sem
   isto cada cartão começaria os telefones numa altura. */
.cartao-seguradora-logo {
  height: 34px; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem;
}
.cartao-seguradora-logo img { max-height: 30px; max-width: 100%; width: auto; display: block; }

.cartao-seguradora h3 {
  font-size: 1.07rem; margin: 0 0 .6rem;
  display: flex; align-items: center; gap: .45rem;
}
/* Ícone de fone desenhado no ::before: é decoração, não entra no texto. */
.cartao-seguradora h3::before {
  content: ""; width: 18px; height: 18px; flex: none;
  background: var(--ma-azul);
  -webkit-mask: var(--icone-fone) center/contain no-repeat;
          mask: var(--icone-fone) center/contain no-repeat;
}
.cartao-seguradora h3 + .telefones { margin-bottom: 1.1rem; }
.cartao-seguradora h3 ~ h3 { margin-top: .25rem; }

:root {
  --icone-fone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.telefones { margin: 0; }
.telefones dt { font-size: .95rem; color: #5b6472; font-weight: 400; }
.telefones dd { margin: 0 0 .5rem; }
.telefones dd a {
  color: var(--ma-tinta-forte); font-weight: 700; font-size: .9rem;
  text-decoration: none; letter-spacing: .01em;
}
.telefones dd a:hover { color: var(--ma-azul); text-decoration: underline; }
.telefones dd:last-child { margin-bottom: 0; }

.cartao-seguradora .btn { margin-top: auto; align-self: flex-start; width: 100%; }

.vazio-seguradoras { margin: var(--ma-esp-4) 0 0; color: var(--ma-tinta); }
.vazio-seguradoras[hidden] { display: none; }

/* =========================================================================
   COMPONENTES VINDOS DA PÁGINA DE RISCOS ESPECIAIS

   Dois padrões que nasceram lá e passaram a valer para o site inteiro. Nada
   acima desta linha foi alterado — estes blocos só acrescentam.
   ========================================================================= */

/* --- 1. Olho de seção --------------------------------------------------
   O rótulo pequeno em caixa alta acima do título. Serve para nomear o
   ASSUNTO da seção sem gastar o título com isso: o olho diz "sobre o quê",
   o H2 diz "o quê". Sem ele, títulos como "Fique por dentro" chegam ao
   leitor sem contexto.

   Monoespaçada de sistema, sem carregar arquivo de fonte novo. A cor muda
   com o fundo — sobre navy o azul da marca não teria contraste. */
.olho-secao {
  display: block;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ma-azul);
  margin-bottom: .75rem;
}
/* Sobre faixa escura: medido, #a8c4e8 dá 6,5:1 sobre o navy #203864.
   O azul da marca daria 1,9:1 e seria ilegível. */
.secao-escura .olho-secao,
.faixa-com-foto .olho-secao { color: #a8c4e8; }

/* Colado no título: o olho e o H2 são uma unidade, não dois blocos. */
.olho-secao + h2,
.olho-secao + h1 { margin-top: 0; }

/* --- 2. Grade de linhas ------------------------------------------------
   A grade encostada, sem cartão flutuante: as células dividem uma malha de
   1 px e a linha azul cresce da esquerda para a direita ao passar o mouse.

   O truque é a `gap: 1px` sobre um fundo da cor da linha — as bordas são o
   próprio fundo aparecendo entre as células, então nunca ficam duplicadas
   nem desalinhadas, em qualquer número de colunas.

   O crescimento é `width`, e não `transform: scaleX`, de propósito: com
   escala a linha nasceria do centro para os dois lados. Da esquerda para a
   direita é o sentido da leitura. */
.grade-linhas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ma-linha);
  border: 1px solid var(--ma-linha);
  margin: 0;
  padding: 0;
  list-style: none;
}
.grade-linhas-2 { grid-template-columns: repeat(2, 1fr); }
.grade-linhas-4 { grid-template-columns: repeat(4, 1fr); }

.linha-item {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 1.6rem 1.5rem;
  transition: background var(--ma-medio) var(--ma-curva);
}
.linha-item::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 3px;
  background: var(--ma-azul);
  transition: width var(--ma-lento) var(--ma-curva);
}
.linha-item:hover { background: var(--ma-cinza); }
.linha-item:hover::after,
.linha-item:focus-within::after { width: 100%; }

.linha-item h2, .linha-item h3, .linha-item strong {
  display: block;
  font-size: 1.03rem; font-weight: 700; line-height: 1.3;
  color: var(--ma-tinta-forte);
  margin: 0 0 .3rem;
}
.linha-item p, .linha-item span {
  display: block; margin: 0;
  font-size: .91rem; line-height: 1.5; color: var(--ma-tinta);
}
/* O item inteiro clicável, quando houver link. */
.linha-item a.esticado::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.linha-item a { color: inherit; text-decoration: none; }
.linha-item:hover h2, .linha-item:hover h3 { color: var(--ma-azul); }

/* Sobre faixa escura, a mesma grade em negativo. */
.secao-escura .grade-linhas { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.18); }
.secao-escura .linha-item { background: var(--ma-navy); }
/* Cor resolvida, não translúcida: é o navy com 6% de branco por cima, já
   calculado. Assim o contraste pode ser MEDIDO — sobre translúcido, tanto
   auditor quanto ferramenta leem a camada, não o resultado. Aferido:
   branco 9,73:1 e o azul claro do título 5,43:1 sobre este fundo. */
.secao-escura .linha-item:hover { background: #2d446d; }
.secao-escura .linha-item::after { background: #a8c4e8; }
.secao-escura .linha-item h2,
.secao-escura .linha-item h3,
.secao-escura .linha-item strong { color: #fff; }
.secao-escura .linha-item p,
.secao-escura .linha-item span { color: rgba(255,255,255,.82); }
.secao-escura .linha-item:hover h2,
.secao-escura .linha-item:hover h3 { color: #a8c4e8; }

@media (max-width: 991.98px) { .grade-linhas, .grade-linhas-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .grade-linhas, .grade-linhas-2, .grade-linhas-4 { grid-template-columns: 1fr; } }

/* Movimento desligado: a linha azul aparece inteira no hover, sem crescer.
   O retorno visual continua existindo — o que some é só o percurso. */
@media (prefers-reduced-motion: reduce) {
  .linha-item, .linha-item::after { transition: none; }
}

/* Ilustração do corpo da página de produto (modelo "padrao"). Largura cheia
   da coluna de texto, no topo. A moldura é a mesma dos modelos intercalado
   e destaque, para as três variantes não parecerem de sites diferentes.
   Sem `height`: as artes têm proporções diferentes e recortar cortaria
   justamente o desenho. */
.figura-topo { margin: 0 0 var(--ma-esp-3); }
.figura-topo picture { display: block; }
.figura-topo img {
  width: 100%; height: auto; display: block;
  border-radius: 12px; background: var(--ma-cinza);
}

/* --- Pontos de inspeção -------------------------------------------------
   O painel numerado de Riscos Especiais, generalizado para qualquer ramo e
   sem 3D. Vive aqui, e não na folha daquela página, porque agora é
   componente do site: qualquer produto liga pelo arquivo de conteúdo.

   Fica sobre faixa escura porque o conteúdo é técnico e denso — o fundo
   navy separa esse trecho do texto corrido e sinaliza "aqui muda o modo de
   leitura". */
.pontos-intro { color: rgba(255,255,255,.85); max-width: 62ch; margin-bottom: var(--ma-esp-4); }
.pontos-palco {
  display: grid; grid-template-columns: 1fr 380px;
  border: 1px solid #33436b; background: var(--ma-navy-escuro);
}

.pontos-figura { position: relative; min-height: 320px; display: grid; place-items: center; overflow: hidden; }
.pontos-figura picture { display: block; width: 100%; height: 100%; }
.pontos-figura picture[hidden] { display: none; }
.pontos-figura img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Marcador sobre a foto. Só aparece quando o conteúdo informa x e y. */
.ponto-marca {
  position: absolute; transform: translate(-50%,-50%);
  width: 30px; height: 30px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(127,176,242,.6); background: rgba(23,29,51,.72);
  color: #7fb0f2; font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: .72rem; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--ma-rapido) var(--ma-curva),
              border-color var(--ma-rapido) var(--ma-curva),
              transform var(--ma-rapido) var(--ma-curva);
}
.ponto-marca::before {
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
  border: 1px solid rgba(127,176,242,.32); animation: pontoPulso 2.6s ease-out infinite;
}
@keyframes pontoPulso { 0%{transform:scale(.72);opacity:.9} 70%{transform:scale(1.25);opacity:0} 100%{opacity:0} }
.ponto-marca:hover, .ponto-marca.ativo { background: #7fb0f2; color: #16203a; border-color: #7fb0f2; }
.ponto-marca.ativo { transform: translate(-50%,-50%) scale(1.14); }
.ponto-marca.ativo::before { animation: none; border-color: rgba(127,176,242,.8); inset: -12px; }
.ponto-marca:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.pontos-painel { background: var(--ma-navy); border-left: 1px solid #33436b; padding: 2rem 2rem 1.75rem; display: flex; flex-direction: column; }

/* Régua de números: a navegação que existe sempre, com ou sem coordenadas. */
.pontos-regua { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.4rem; }
.pontos-regua button {
  min-width: 2.1rem; padding: .35rem .1rem;
  background: transparent; border: 1px solid #33436b; color: #95a5c2;
  font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .7rem;
  cursor: pointer; transition: border-color var(--ma-rapido) var(--ma-curva),
                               color var(--ma-rapido) var(--ma-curva);
}
.pontos-regua button:hover { border-color: #7fb0f2; color: #7fb0f2; }
.pontos-regua button.ativo { border-color: #7fb0f2; background: #7fb0f2; color: #16203a; }
.pontos-regua button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.ponto-indice { display: block; font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: #95a5c2; margin-bottom: .8rem; }
.ponto-bloco h3 { color: #fff; font-size: 1.3rem; margin-bottom: .4rem; }
.ponto-bloco[hidden] { display: none; }
.ponto-norma { display: block; font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: .72rem; color: #7fb0f2; margin-bottom: 1rem; }
.ponto-bloco p { color: #c2d0e6; font-size: .95rem; line-height: 1.6; }
.ponto-bloco ul { list-style: none; margin: .4rem 0 0; padding: 0; }
.ponto-bloco li {
  position: relative; padding: .65rem 0 .65rem 1.1rem; font-size: .95rem;
  color: #c2d0e6; border-bottom: 1px solid #2b3757; line-height: 1.55;
}
.ponto-bloco li:last-child { border-bottom: 0; }
.ponto-bloco li::before { content: ""; position: absolute; left: 0; top: 1.2rem; width: 8px; height: 1px; background: #a8c4e8; }
/* Entrada do bloco que acabou de aparecer. */
.ponto-bloco.trocou { animation: pontoFade .38s ease; }
@keyframes pontoFade { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

.pontos-nav { margin-top: auto; padding-top: 1.5rem; display: flex; gap: .5rem; }
.pontos-nav button {
  flex: 1; background: transparent; border: 1px solid #33436b; color: #c2d0e6;
  font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; padding: .7rem; cursor: pointer;
  transition: border-color var(--ma-rapido) var(--ma-curva), color var(--ma-rapido) var(--ma-curva);
}
.pontos-nav button:hover { border-color: #7fb0f2; color: #7fb0f2; }
.pontos-nav button:focus-visible { outline: 2px solid #7fb0f2; outline-offset: 2px; }

@media (max-width: 991.98px) {
  .pontos-palco { grid-template-columns: 1fr; }
  .pontos-painel { border-left: 0; border-top: 1px solid #33436b; padding: 1.5rem; }
  .pontos-figura { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .ponto-marca, .ponto-marca::before, .ponto-bloco.trocou,
  .pontos-regua button, .pontos-nav button { animation: none !important; transition: none !important; }
}