/*
  Projeto: Site institucional - Advocacia Empresarial
  Autor: Pedro Max
  Arquivo: estilos.css

  Ajustes desta versão:
  - Corrigi o “escorregão” da seção Informações profissionais (centralização + largura segura)
  - Mobile com a MESMA experiência visual do desktop (sem “quebrar tudo”):
      > em vez de virar 1 coluna gigante, os grids viram “carrossel” horizontal (swipe)
      > hero só empilha quando realmente não cabe
      > tamanhos/ritmo reduzidos via variáveis (fica igual, só menor)
  - Animações mais presentes no site todo (entrada + microinterações), mantendo cara premium
  - Paleta concentrada no :root (fácil editar as cores)
*/


/* =========================
   FONTES (copy arredondada)
   ========================= */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap");











/* =========================
   1) BASE / VARIÁVEIS
   ========================= */

:root{
  /* =========================
     PALETA (edite aqui)
     ========================= */

  /* Base institucional (azuis) */
  --cor-primaria: #061738;
  --cor-primaria-2: #061738;
  --cor-bloco: #061738;
  --cor-bloco-2: #0e416f;

  /* Premium (bege/areia) */
  --cor-destaque: #face8b;
  --cor-clara: #face8b;
  --cor-areia: #face8b;

  /* Texto em fundo escuro */
  --cor-branco: #ffffff;
  --cor-texto: rgba(255,255,255,.92);
  --cor-texto-suave: rgba(255,255,255,.82);
  --cor-borda: rgba(255,255,255,.12);

  /* Texto em fundo claro */
  --cor-texto-escuro: #1b1b1b;
  --cor-texto-escuro-suave: rgba(0,0,0,.74);

  /* =========================
     COMPAT (mantém seu CSS antigo funcionando)
     ========================= */
  --azul-fundo: var(--cor-primaria);
  --azul-fundo-2: var(--cor-primaria-2);
  --azul-bloco: var(--cor-bloco);
  --azul-bloco-2: var(--cor-bloco-2);

  --bege-destaque: var(--cor-destaque);
  --bege-claro: var(--cor-clara);
  --areia: var(--cor-areia);

  --branco: var(--cor-branco);
  --texto-claro: var(--cor-texto);
  --texto-suave: var(--cor-texto-suave);
  --borda-suave: var(--cor-borda);

  --texto-escuro: var(--cor-texto-escuro);
  --texto-escuro-suave: var(--cor-texto-escuro-suave);

  /* Sombras (bem discretas) */
  --sombra-1: 0 10px 30px rgba(0,0,0,.18);
  --sombra-2: 0 16px 50px rgba(0,0,0,.25);

  /* Tipografia */
  --fonte-titulo: Georgia, "Times New Roman", Times, serif;
  --fonte-texto: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Medidas */
  --miolo: 1120px;
  --raio: 14px;
  --raio-grande: 18px;

  /* Ritmo (desktop) */
  --esp-1: 8px;
  --esp-2: 12px;
  --esp-3: 16px;
  --esp-4: 22px;
  --esp-5: 30px;
  --esp-6: 44px;
  --esp-7: 64px;

  /* Layout “seguro” */
  --gutter: clamp(16px, 3vw, 22px);
  --respiro-texto: 6px;

  /* Velocidade */
  --transicao: 180ms ease;

  /* Para a experiência ficar “igual, só menor” no mobile
     (vou ajustar essas variáveis em media queries) */
  --fator-mobile: 1;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
}

body{
  font-family: var(--fonte-texto);
  background: var(--azul-fundo);
  color: var(--texto-claro);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* evita qualquer “escorregada” lateral */
}

main{
  overflow-x: hidden;
}

img{
  max-width: 100%;
  height: auto;
  display: block;
}

a{
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline: 2px solid rgba(209,165,122,.9);
  outline-offset: 3px;
  border-radius: 10px;
}

code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: rgba(255,255,255,.08);
  padding: 2px 6px;
  border-radius: 8px;
}

/* Miolo padrão (o “container” do site) */
.miolo{
  max-width: var(--miolo);
  width: min(var(--miolo), 100%);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Se por acaso alguma seção ficou sem .miolo,
   isso impede o conteúdo de “cair da tela” e melhora a centralização. */
.sessao > *{
  max-width: 100%;
}

/* Um respiro bom entre seções */
.sessao{
  padding: var(--esp-7) 0;
}

.sessao--institucional{
  background: linear-gradient(180deg, var(--azul-fundo) 0%, var(--azul-fundo-2) 100%);
}

.sessao--vitrine{
  background: var(--azul-fundo);
}

.linha-separadora{
  height: 1px;
  background: var(--borda-suave);
  margin: var(--esp-6) 0;
}

/* =========================
   2) TIPOGRAFIA / TÍTULOS
   ========================= */

.titulo-pagina,
.titulo-secao{
  font-family: var(--fonte-titulo);
  font-weight: 700;
  color: var(--branco);
  letter-spacing: .3px;
}

.titulo-pagina{
  font-size: clamp(30px, 4vw, 48px);
  margin: 0 0 var(--esp-3) 0;
}

.titulo-secao{
  font-size: clamp(22px, 2.8vw, 32px);
  margin: 0 0 var(--esp-3) 0;
}

/* Correção objetiva: quando um título estiver “solto” (fora do .miolo),
   ele não fica colado na esquerda. */
.sessao > .titulo-secao,
.sessao > .titulo-pagina{
  padding: 0 var(--gutter);
  max-width: var(--miolo);
  margin-left: auto;
  margin-right: auto;
}

.texto-secao{
  margin: 0 0 var(--esp-3) 0;
  color: var(--texto-claro);
  text-align: justify;
  padding-right: var(--respiro-texto);
}

/* Frase com “cara de destaque” */
.frase-destaque{
  margin-top: var(--esp-4);
  padding: calc(var(--esp-4) + 2px);
  border-left: 4px solid var(--bege-destaque);
  background: rgba(255,255,255,.06);
  border-radius: var(--raio);
  color: rgba(255,255,255,.94);
  font-style: italic;
  text-align: justify;
}

/* =========================
   3) CABEÇALHO / MENU
   ========================= */

.cabecalho{
  position: sticky;
  top: 0;
  z-index: 50;
background: color-mix(in srgb, var(--cor-primaria) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.cabecalho__miolo{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: 72px;
}

.marca{
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 10px 0;
}

.marca__logo{
  width: 130px;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.12));
}

.menu-principal{
  display: flex;
  align-items: center;
  gap: var(--esp-4);
}

.menu-principal__link{
  font-family: var(--fonte-titulo);
  font-size: 16px;
  color: rgba(255,255,255,.92);
  padding: 10px 8px;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transicao), color var(--transicao), transform var(--transicao);
  white-space: nowrap;
}

.menu-principal__link:hover{
  color: var(--branco);
  border-bottom-color: rgba(209,165,122,.65);
  transform: translateY(-1px);
}

.menu-principal__link--ativo{
  color: var(--branco);
  border-bottom-color: var(--bege-destaque);
}

.cabecalho__acoes{
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

/* =========================
   4) BOTÕES
   ========================= */

.botao{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  color: var(--branco);
  background: rgba(255,255,255,.08);
  transition: transform var(--transicao), background var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
  cursor: pointer;
  font-family: var(--fonte-titulo);
  letter-spacing: .2px;
}

.botao:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}

.botao:active{ transform: translateY(0); }

.botao--destaque{
  background: var(--bege-destaque);
  border-color: rgba(0,0,0,.12);
  color: #1c1c1c;
  box-shadow: 0 10px 22px rgba(209,165,122,.18);
}

.botao--destaque:hover{ background: #ddb089; }

.botao--grande{
  padding: 14px 20px;
  font-size: 16px;
}

/* =========================
   5) HERO (HOME)
   ========================= */

.hero{
  padding: calc(var(--esp-7) - 10px) 0 var(--esp-7) 0;
  background:
    radial-gradient(1200px 500px at 70% 30%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, var(--azul-fundo) 0%, var(--azul-fundo-2) 100%);
}

.hero__miolo{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--esp-6);
  align-items: center;
}

.hero__foto{
  border-radius: var(--raio-grande);
  overflow: hidden;
  box-shadow: var(--sombra-2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.hero__foto:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
}

.hero__foto img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__conteudo{
  padding-right: var(--esp-2);
}

.hero__rotulo{
  margin: 0 0 var(--esp-2) 0;
  font-family: var(--fonte-titulo);
  color: rgba(255,255,255,.88);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 13px;
}

.hero__titulo{
  margin: 0 0 var(--esp-3) 0;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(34px, 4.2vw, 56px);
  color: var(--branco);
  line-height: 1.05;
}

.hero__oab{
  font-family: var(--fonte-texto);
  font-weight: 500;
  color: rgba(255,255,255,.82);
  font-size: clamp(14px, 1.4vw, 18px);
}

.hero__texto{
  margin: 0 0 var(--esp-4) 0;
  color: var(--texto-claro);
  text-align: justify;
  max-width: 52ch;
}

.hero__botoes{
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
  margin-bottom: var(--esp-5);
}

.hero__telefone{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  transition: background var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}

.hero__telefone:hover{
  background: rgba(255,255,255,.11);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
}

.hero__telefone-icone{ font-size: 16px; opacity: .95; }

.hero__telefone-texto{
  font-family: var(--fonte-titulo);
  letter-spacing: .3px;
}

.hero__selos{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-3);
}

.selo{
  padding: var(--esp-3);
  border-radius: var(--raio);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  transition: transform var(--transicao), background var(--transicao), border-color var(--transicao);
}

.selo:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
}

.selo__titulo{
  margin: 0 0 6px 0;
  font-family: var(--fonte-titulo);
  color: var(--branco);
  font-weight: 700;
}

.selo__texto{
  margin: 0;
  color: var(--texto-suave);
  text-align: justify;
  font-size: 14px;
}

/* =========================
   6) CARDS / GRADES
   ========================= */

.cartao{
  border-radius: var(--raio-grande);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: var(--sombra-1);
  overflow: hidden;
  transition: transform var(--transicao), background var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}

.cartao:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
}

.cartao__midia{
  background: rgba(0,0,0,.12);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.cartao__midia img{
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.cartao__conteudo{
  padding: calc(var(--esp-4) + 4px);
}

.cartao__titulo{
  margin: 0 0 var(--esp-2) 0;
  font-family: var(--fonte-titulo);
  font-size: 20px;
  color: var(--branco);
}

.cartao__texto{
  margin: 0 0 var(--esp-2) 0;
  color: var(--texto-claro);
  text-align: justify;
  font-size: 14.6px;
}

.cartao__acoes{
  margin-top: var(--esp-3);
}

.cartao--beneficio{
  padding: calc(var(--esp-4) + 4px);
}

.cartao--beneficio .cartao__titulo{ font-size: 18px; }

/* Grids (desktop) */
.grade-beneficios{
  margin-top: var(--esp-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-4);
}

.grade-servicos{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-4);
  margin-top: var(--esp-5);
}

.grade-servicos--pagina{
  grid-template-columns: repeat(3, 1fr);
}

.grade-cases{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-4);
  margin-top: var(--esp-4);
}

.acao-centralizada{
  margin-top: var(--esp-5);
  display: flex;
  justify-content: center;
}

/* =========================
   7) LISTAS CURTAS / DETALHE
   ========================= */

.lista-curta{
  margin: var(--esp-3) 0 0 18px;
  padding: 0;
  color: rgba(255,255,255,.88);
}

.lista-curta li{
  margin: 8px 0;
  text-align: justify;
}

.lista-detalhe{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,.90);
}

.lista-detalhe li{
  margin: 10px 0;
  text-align: justify;
}

/* =========================
   8) FAIXA CTA
   ========================= */

.faixa-cta{
  margin-top: var(--esp-6);
  padding: var(--esp-5);
  border-radius: var(--raio-grande);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  transition: transform var(--transicao), border-color var(--transicao);
}

.faixa-cta:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
}

.faixa-cta__titulo{
  margin: 0 0 8px 0;
  font-family: var(--fonte-titulo);
  color: var(--branco);
  font-size: 22px;
}

.faixa-cta__descricao{
  margin: 0;
  color: rgba(255,255,255,.86);
  text-align: justify;
}

.faixa-cta__acoes{
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* =========================
   9) BANNERS INTERNOS (sobre/serviços/cases/contato)
   ========================= */

.banner-interno{
  padding: var(--esp-7) 0 var(--esp-6) 0;
  background:
    linear-gradient(90deg, rgba(240,223,205,.97) 0%, rgba(240,223,205,.97) 58%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, var(--azul-fundo) 0%, var(--azul-fundo-2) 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.banner-interno .titulo-pagina,
.banner-interno .titulo-secao{
  color: var(--texto-escuro);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

.banner-interno__miolo{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--esp-6);
  align-items: center;
}

.banner-interno__texto{
  color: var(--texto-escuro);
  padding-right: var(--esp-2);
}

.banner-interno__texto .texto-secao{
  color: var(--texto-escuro-suave);
  text-align: justify;
}

.banner-interno__foto{
  border-radius: var(--raio-grande);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  background: rgba(0,0,0,.06);
}

.banner-interno__foto img{
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.banner-interno .frase-destaque{
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.76);
  border-left-color: rgba(0, 0, 0, 0.95);
}

.banner-interno__foto--faixa{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  background: rgba(0,0,0,.06);
}

.banner-interno__foto--faixa img{
  height: 180px;
  border-radius: 12px;
  object-fit: cover;
}

/* =========================
   10) BARRA DE FILTROS (cases.html)
   ========================= */

.barra-filtros{
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  align-items: flex-end;
  padding: calc(var(--esp-4) + 2px);
  border-radius: var(--raio-grande);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

.campo{
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 220px;
}

.campo--curto{ max-width: 320px; }

.campo__rotulo{
  font-family: var(--fonte-titulo);
  color: rgba(255,255,255,.94);
  font-size: 14px;
}

.campo__controle{
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: var(--branco);
  outline: none;
  transition: border-color var(--transicao), background var(--transicao);
}

.campo__controle:focus{
  border-color: rgba(209,165,122,.9);
  background: rgba(255,255,255,.10);
}

.campo__controle option{
  background: #0b2f52;
  color: #fff;
}

.aviso-lista-vazia{
  grid-column: 1 / -1;
  padding: var(--esp-5);
  border-radius: var(--raio-grande);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

/* =========================
   11) DETALHE DO CASE (case.html)
   ========================= */

.caminho{
  margin: 0 0 var(--esp-2) 0;
  color: rgba(0,0,0,.70);
  font-family: var(--fonte-texto);
}

.caminho a{
  color: rgba(0,0,0,.78);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bloco-detalhe{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-6);
}

.bloco-detalhe__coluna .titulo-secao{ margin-top: 0; }

.bloco-detalhe__coluna .texto-secao{
  color: rgba(255,255,255,.90);
}

.banner-interno--detalhe-case{
  background:
    linear-gradient(90deg, rgba(240,223,205,.97) 0%, rgba(240,223,205,.97) 56%, rgba(255,255,255,0) 56%),
    linear-gradient(180deg, var(--azul-fundo) 0%, var(--azul-fundo-2) 100%);
}

/* =========================
   12) CONTATO (layout e formulário)
   ========================= */

.grade-contato{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-6);
  align-items: start;
}

.bloco-whats, .bloco-formulario{
  padding: calc(var(--esp-5) + 4px);
  border-radius: var(--raio-grande);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: var(--sombra-1);
}

.botoes-grandes{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-3);
  margin: var(--esp-4) 0;
}

.formulario{
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

.formulario__linha{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-3);
}

.formulario__acoes{
  margin-top: var(--esp-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.formulario__aviso{
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: 13.5px;
  text-align: justify;
}

/* =========================
   13) RODAPÉ
   ========================= */

.rodape{
  margin-top: var(--esp-7);
  padding: var(--esp-6) 0;
  background: var(--areia);
  color: #1c1c1c;
}

.rodape__linha{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  flex-wrap: wrap;
}

.rodape__nome{
  margin: 0 0 6px 0;
  font-family: var(--fonte-titulo);
  font-size: 16px;
  letter-spacing: .2px;
}

.rodape__oab{
  font-family: var(--fonte-texto);
  font-weight: 500;
}

.rodape__direitos{
  margin: 0;
  font-size: 13.5px;
  color: rgba(0,0,0,.72);
}

.rodape__redes{
  display: flex;
  align-items: center;
  gap: 10px;
}

.rodape__icone{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.10);
  transition: transform var(--transicao), background var(--transicao);
}

.rodape__icone:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.75);
}

.rodape__icone img{
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* =========================
   14) BOTÃO WHATS FIXO
   ========================= */

.botao-whats-fixo{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--bege-destaque);
  color: #1c1c1c;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 16px 35px rgba(0,0,0,.24);
  transition: transform var(--transicao), background var(--transicao), box-shadow var(--transicao);
}

.botao-whats-fixo:hover{
  transform: translateY(-2px);
  background: #ddb089;
  box-shadow: 0 22px 45px rgba(0,0,0,.28);
}

.botao-whats-fixo__texto{
  font-family: var(--fonte-titulo);
  letter-spacing: .2px;
}

/* =========================
   15) PÁGINA 404
   ========================= */

.sessao--404{
  min-height: calc(100vh - 140px);
  display: flex;
  align-items: center;
}

.cartao--404{
  padding: var(--esp-6);
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.cartao--404 .texto-secao{
  text-align: center;
}

/* =========================
   16) ANIMAÇÕES (site todo)
   ========================= */

@media (prefers-reduced-motion: no-preference){

  @keyframes surgir-suave{
    from{ opacity: 0; transform: translateY(10px); filter: blur(2px); }
    to{ opacity: 1; transform: translateY(0); filter: blur(0); }
  }

  @keyframes revelar-pagina{
    from{ opacity: 0; }
    to{ opacity: 1; }
  }

  /* Entrada da página (bem sutil) */
  body{
    animation: revelar-pagina 420ms ease both;
  }

  /* Elementos principais surgindo */
  .cabecalho,
  .hero,
  .banner-interno,
  .sessao,
  .rodape{
    animation: surgir-suave 520ms ease both;
  }

  .titulo-pagina,
  .titulo-secao,
  .texto-secao,
  .botao,
  .hero__telefone,
  .cartao,
  .faixa-cta,
  .bloco-whats,
  .bloco-formulario,
  .barra-filtros{
    animation: surgir-suave 650ms ease both;
  }

  /* Sequência dentro do hero e banner (fica “premium”) */
  .hero__conteudo > *{ animation: surgir-suave 740ms ease both; }
  .hero__conteudo > *:nth-child(1){ animation-delay: 40ms; }
  .hero__conteudo > *:nth-child(2){ animation-delay: 110ms; }
  .hero__conteudo > *:nth-child(3){ animation-delay: 170ms; }
  .hero__conteudo > *:nth-child(4){ animation-delay: 230ms; }
  .hero__conteudo > *:nth-child(5){ animation-delay: 290ms; }

  .banner-interno__texto > *{ animation: surgir-suave 720ms ease both; }
  .banner-interno__texto > *:nth-child(1){ animation-delay: 40ms; }
  .banner-interno__texto > *:nth-child(2){ animation-delay: 110ms; }
  .banner-interno__texto > *:nth-child(3){ animation-delay: 170ms; }
  .banner-interno__texto > *:nth-child(4){ animation-delay: 230ms; }
}

/* =========================
   17) RESPONSIVIDADE
   (mesma experiência do desktop, só menor)
   ========================= */

/* Tablet: reduz ritmo e mantém layout por mais tempo */
@media (max-width: 980px){

  :root{
    /* “fica igual, só menor” */
    --esp-7: 54px;
    --esp-6: 38px;
    --esp-5: 26px;
    --esp-4: 20px;
  }

  /* mantém 2 colunas no hero, mas com gap menor */
  .hero__miolo{
    gap: var(--esp-5);
    grid-template-columns: 1.05fr .95fr;
  }

  /* grids diminuem para 2 colunas (sem virar “um paredão” de 1 coluna) */
  .grade-beneficios{ grid-template-columns: repeat(2, 1fr); }
  .grade-servicos,
  .grade-servicos--pagina{ grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: mesma cara do desktop, porém:
   - hero empilha só quando realmente não cabe
   - cards em linha com swipe (carrossel elegante)
   - menu continua visível (scroll lateral discreto)
*/
@media (max-width: 720px){

  :root{
    --esp-7: 46px;
    --esp-6: 34px;
    --esp-5: 22px;
    --esp-4: 18px;
    --esp-3: 14px;
  }

  .cabecalho{
    background: rgba(6, 43, 78, .97);
  }

  .cabecalho__miolo{
    gap: 10px;
    min-height: 66px;
  }

  .marca__logo{
    width: 112px;
  }

  .menu-principal{
    display: flex;
    gap: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    scrollbar-width: thin;
    max-width: 56vw;
  }

  .menu-principal::-webkit-scrollbar{ height: 6px; }
  .menu-principal::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.18);
    border-radius: 999px;
  }

  .menu-principal__link{
    font-size: 15px;
    padding: 8px 6px;
  }

  /* Hero: a partir daqui, empilha (é o único jeito de “ajustar a tela” sem esmagar texto) */
  .hero__miolo{
    grid-template-columns: 1fr;
  }
  .hero__selos{
    grid-template-columns: 1fr 1fr; /* mantém “cara desktop” */
  }

  /* Carrossel premium (mantém sensação igual ao desktop) */
  .grade-beneficios,
  .grade-servicos,
  .grade-servicos--pagina,
  .grade-cases{
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 82%);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: var(--esp-3);
    padding-bottom: 8px;
    padding-right: 6px;
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }

  .grade-beneficios > *,
  .grade-servicos > *,
  .grade-servicos--pagina > *,
  .grade-cases > *{
    scroll-snap-align: start;
  }

  .formulario__linha{
    grid-template-columns: 1fr;
  }

  .botao-whats-fixo__texto{
    display: none;
  }

  .banner-interno__miolo{
    grid-template-columns: 1fr;
  }

  .banner-interno{
    background:
      linear-gradient(180deg, rgba(240,223,205,.97) 0%, rgba(240,223,205,.97) 340px, rgba(255,255,255,0) 340px),
      linear-gradient(180deg, var(--azul-fundo) 0%, var(--azul-fundo-2) 100%);
  }

  .banner-interno__foto img{
    height: 280px;
  }

  .banner-interno__foto--faixa{
    grid-template-columns: 1fr;
  }

  .banner-interno__foto--faixa img{
    height: 160px;
  }

  /* Faixa CTA fica igual, só com quebra interna */
  .faixa-cta{
    flex-direction: column;
    align-items: flex-start;
  }
  .faixa-cta__acoes{
    justify-content: flex-start;
  }

  /* Seção Informações profissionais: garante centralização mesmo se vier sem .miolo */
  .sessao .cartao,
  .sessao .faixa-cta,
  .sessao .barra-filtros{
    margin-left: auto;
    margin-right: auto;
  }
}

/* Celular pequeno */
@media (max-width: 480px){

  :root{
    --esp-7: 40px;
    --esp-6: 30px;
    --esp-5: 20px;
    --esp-4: 16px;
  }

  .cabecalho__acoes .botao{
    padding: 10px 14px;
    font-size: 14px;
  }

  .botao{
    width: 100%;
    justify-content: center;
  }

  .hero__botoes{
    width: 100%;
  }

  .hero__telefone{
    width: 100%;
    justify-content: center;
  }

  .hero__selos{
    grid-template-columns: 1fr; /* aqui 2 colunas já fica espremido demais */
  }

  .faixa-cta{
    padding: var(--esp-4);
  }

  .cartao__midia img{
    height: 200px;
  }

  .botao-whats-fixo{
    right: 14px;
    bottom: 14px;
  }
}
/* =========================================================
   NAV MOBILE IGUAL AO PC (sem dock, sem scroll)
   Cole no FINAL do estilos.css
   ========================================================= */

@media (max-width: 720px){

  /* Se você colou o patch do “dock”, isso aqui anula ele */
  body{ padding-bottom: 0 !important; }

  .menu-principal{
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    z-index: auto !important;
    mask-image: none !important;
    overflow: visible !important;
    max-width: none !important;
  }

  /* Header igual PC: logo | menu | botão */
  .cabecalho__miolo{
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    min-height: 72px; /* igual PC */
  }

  /* Logo só diminui um pouco pra caber */
  .marca__logo{
    width: 112px;
  }

  /* Botão “Contato” compacto, mas igual PC */
  .cabecalho__acoes .botao{
    padding: 10px 14px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* Menu NO TOPO, igual PC — sem scroll */
  .menu-principal{
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;          /* se não couber em 1 linha, vai pra 2 (sem scroll) */
    gap: 10px;                /* mais compacto */
  }

  /* Links com a mesma “cara” do PC (underline/borda embaixo) */
  .menu-principal__link{
    font-size: 14px;          /* menor que PC, mas mesma estética */
    padding: 8px 6px;
    border-bottom: 2px solid transparent; /* mantém o underline */
    border-radius: 0;         /* evita “cara de botão” */
    background: transparent;
  }

  /* garante que o item ativo apareça certinho */
  .menu-principal__link--ativo{
    border-bottom-color: var(--bege-destaque);
  }
}

/* Celulares menores: compacta mais pra caber sem ficar feio */
@media (max-width: 420px){

  .cabecalho__miolo{
    gap: 8px;
  }

  .marca__logo{ width: 104px; }

  .menu-principal{
    gap: 8px;
  }

  .menu-principal__link{
    font-size: 13px;
    padding: 7px 5px;
  }

  .cabecalho__acoes .botao{
    padding: 9px 12px;
    font-size: 13px;
  }
}




/* =========================
   BLOCO COMERCIAL (HOME) — PREMIUM / CHAMATIVO
   ========================= */

.sessao--comercial{
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(209,165,122,.14), transparent 60%),
    radial-gradient(900px 420px at 80% 30%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, var(--azul-fundo) 0%, var(--azul-fundo-2) 100%);
  padding-top: var(--esp-6);
  padding-bottom: var(--esp-7);
  position: relative;
  overflow: hidden;
}


.cartao--comercial{
  position: relative;
  border-radius: calc(var(--raio-grande) + 6px);
  overflow: hidden;

  /* “vidro” premium */
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
  backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 18px 55px rgba(0,0,0,.30),
    0 1px 0 rgba(255,255,255,.10) inset;
  transform: translateZ(0);
}

/* borda dourada sutil (cara de escritório premium) */
.cartao--comercial::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(209,165,122,.85),
    rgba(255,255,255,.10),
    rgba(209,165,122,.55)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .85;
}


.cartao--comercial .cartao__conteudo{
  padding: clamp(18px, 3vw, 32px);
}

/* rótulo “Início” mais elegante */
.comercial__rotulo{
  margin: 0 0 12px 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-family: var(--fonte-titulo);
  letter-spacing: 2.4px;
  text-transform: uppercase;
  font-size: 12px;

  color: rgba(255,255,255,.78);
}

.comercial__rotulo::before{
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 999px;
  background: rgba(209,165,122,.95);
  box-shadow: 0 6px 16px rgba(209,165,122,.22);
}

/* título com impacto (sem ficar “brega”) */
.comercial__titulo{
  margin: 0 0 var(--esp-3) 0;
  line-height: 1.06;
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: .2px;
  text-shadow: 0 14px 40px rgba(0,0,0,.35);
}

/* texto: mais legível e “corpo” */
.comercial__texto{
  max-width: 88ch;
  color: rgba(255,255,255,.90);
  font-size: 15.5px;
}

/* bloco de chamada com visual “assinatura” */
.comercial__chamada{
  margin: var(--esp-4) 0 0 0;
  padding: 16px 18px;
  border-radius: calc(var(--raio) + 6px);
  border: 1px solid rgba(209,165,122,.30);
  background:
    linear-gradient(180deg, rgba(209,165,122,.16), rgba(255,255,255,.05));
  color: rgba(255,255,255,.95);
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}

/* CTA: vira uma “faixa” bonita */
.comercial__cta{
  margin-top: var(--esp-4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-2);
  align-items: stretch;
}

.comercial__cta-texto{
  grid-column: 1 / -1;
  margin: 0 0 6px 0;
  color: rgba(255,255,255,.86);
  font-family: var(--fonte-titulo);
  font-size: 15px;
  letter-spacing: .2px;
}

/* botão destaque: “ouro premium” com leve brilho */
.comercial__cta .botao--destaque{
  position: relative;
  overflow: hidden;
  box-shadow:
    0 18px 45px rgba(0,0,0,.22),
    0 10px 24px rgba(209,165,122,.18);
}

.comercial__cta .botao--destaque::after{
  content: "";
  position: absolute;
  top: -30%;
  left: -40%;
  width: 60%;
  height: 180%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.45),
    transparent
  );
  transform: rotate(18deg);
  opacity: .35;
  transition: transform 420ms ease, opacity 420ms ease;
}

.comercial__cta .botao--destaque:hover::after{
  transform: translateX(220%) rotate(18deg);
  opacity: .55;
}

/* botão secundário: mais sóbrio, mas com presença */
.comercial__cta .botao:not(.botao--destaque){
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.20);
}

/* observação final */
.comercial__obs{
  margin: var(--esp-4) 0 0 0;
  color: rgba(255,255,255,.74);
  font-size: 13.5px;
  max-width: 90ch;
}

/* micro-animação no hover do bloco (premium) */
.cartao--comercial:hover{
  transform: translateY(-2px);
  box-shadow:
    0 26px 70px rgba(0,0,0,.34),
    0 1px 0 rgba(255,255,255,.12) inset;
}

/* =========================
   Mobile
   ========================= */

@media (max-width: 720px){
  .sessao--comercial{
    padding-top: var(--esp-5);
  }

  .comercial__cta{
    grid-template-columns: 1fr;
  }

  .comercial__texto{
    font-size: 15px;
  }
}

@media (max-width: 480px){
  .cartao--comercial .cartao__conteudo{
    padding: 18px;
  }
}



/* =========================
   PATCH — COMERCIAL MAIS PREMIUM (GLOW NO FRAME)
   Cole no FINAL do CSS
   ========================= */

/* 1) Remove o brilho/sombra estranha do fundo da seção */
.sessao--comercial{
  background:
    radial-gradient(1200px 520px at 18% 10%, rgba(209,165,122,.10), transparent 62%),
    radial-gradient(900px 520px at 82% 30%, rgba(255,255,255,.05), transparent 58%),
    linear-gradient(180deg, var(--azul-fundo) 0%, var(--azul-fundo-2) 100%);
}

.sessao--comercial::before{
  /* desliga o “blob” que estava ficando esquisito */
  content: none !important;
}

/* 2) Glow premium ao redor do card (aura + borda viva) */
.cartao--comercial{
  position: relative;
  isolation: isolate; /* garante que o glow não “vaze” errado */
}

/* Aura externa (glow) */
.cartao--comercial::after{
  content: "";
  position: absolute;
  inset: -14px;              /* “para fora” do card */
  border-radius: calc(var(--raio-grande) + 18px);
  z-index: -1;
  pointer-events: none;

  /* Glow dual (dourado + azul), bem premium */
  background:
    radial-gradient(70% 70% at 30% 20%, rgba(209,165,122,.38), transparent 60%),
    radial-gradient(70% 70% at 78% 76%, rgba(120,170,255,.18), transparent 62%),
    linear-gradient(135deg, rgba(209,165,122,.26), rgba(255,255,255,.06), rgba(120,170,255,.10));

  filter: blur(18px);
  opacity: .95;
  transform: translateZ(0);
}

/* Borda “viva” (mais limpa que a anterior) */
.cartao--comercial::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(209,165,122,.95),
    rgba(255,255,255,.12),
    rgba(209,165,122,.55)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .9;
}

/* 3) Glow “respira” no hover (chamativo e bonito) */
@media (prefers-reduced-motion: no-preference){
  .cartao--comercial{
    transition: transform 220ms ease, box-shadow 220ms ease;
  }

  .cartao--comercial::after{
    transition: filter 280ms ease, opacity 280ms ease, inset 280ms ease;
  }

  .cartao--comercial:hover{
    transform: translateY(-3px);
    box-shadow:
      0 30px 75px rgba(0,0,0,.36),
      0 1px 0 rgba(255,255,255,.12) inset;
  }

  .cartao--comercial:hover::after{
    inset: -18px;
    filter: blur(22px);
    opacity: 1;
  }

  /* Um “shine” passando no título */
  .comercial__titulo{
    position: relative;
  }
  .comercial__titulo::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
      transparent,
      rgba(255,255,255,.35),
      transparent
    );
    opacity: .0;
    transform: translateX(-18%);
    filter: blur(0px);
    pointer-events: none;
  }
  .cartao--comercial:hover .comercial__titulo::after{
    opacity: .22;
    transform: translateX(18%);
    transition: transform 520ms ease, opacity 520ms ease;
  }
}

/* 4) Texto e CTA mais “impacto” */
.comercial__titulo{
  text-shadow:
    0 16px 45px rgba(0,0,0,.42),
    0 1px 0 rgba(255,255,255,.08);
}

.comercial__chamada{
  border-color: rgba(209,165,122,.38);
  background:
    linear-gradient(180deg, rgba(209,165,122,.20), rgba(255,255,255,.05));
}

/* 5) Mobile: glow menos “pesado” pra não ficar exagerado */
@media (max-width: 480px){
  .cartao--comercial::after{
    inset: -12px;
    filter: blur(16px);
    opacity: .9;
  }
}


/* =========================
   BANNER PRINCIPAL (CAPA GRANDE)
   ========================= */

.capa-destaque{
  padding: calc(var(--esp-6)) 0 calc(var(--esp-4)) 0;
  background:
    radial-gradient(900px 420px at 30% 10%, rgba(209,165,122,.12), transparent 60%),
    radial-gradient(900px 420px at 70% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, var(--azul-fundo) 0%, var(--azul-fundo-2) 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.capa-destaque__miolo{
  display: grid;
  gap: var(--esp-4);
}

.capa-destaque__frame{
  margin: 0;
  border-radius: calc(var(--raio-grande) + 6px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  box-shadow:
    0 18px 60px rgba(0,0,0,.35),
    0 0 0 1px rgba(209,165,122,.10),
    0 0 42px rgba(209,165,122,.18); /* glow externo */
  position: relative;
  isolation: isolate;
}

/* Glow “premium” que parece moldura viva */
.capa-destaque__frame::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(500px 240px at 18% 20%, rgba(209,165,122,.28), transparent 60%),
    radial-gradient(520px 260px at 82% 30%, rgba(255,255,255,.10), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  opacity: .55;
  z-index: 0;
  pointer-events: none;
}

.capa-destaque__img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;

  /* IMPORTANTÍSSIMO: não corta a imagem */
  object-fit: contain;
  background: rgba(0,0,0,.05);
}

/* ações (botões) */
.capa-destaque__acoes{
  display: flex;
  gap: var(--esp-2);
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* =========================
   ANIMAÇÃO (BANNER)
   ========================= */
@media (prefers-reduced-motion: no-preference){
  @keyframes capa-entrar{
    from{ opacity: 0; transform: translateY(14px); filter: blur(2px); }
    to{ opacity: 1; transform: translateY(0); filter: blur(0); }
  }

  @keyframes glow-pulsar{
    0%   { box-shadow: 0 18px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(209,165,122,.10), 0 0 34px rgba(209,165,122,.14); }
    50%  { box-shadow: 0 22px 70px rgba(0,0,0,.38), 0 0 0 1px rgba(209,165,122,.14), 0 0 52px rgba(209,165,122,.22); }
    100% { box-shadow: 0 18px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(209,165,122,.10), 0 0 34px rgba(209,165,122,.14); }
  }

  .capa-destaque__frame{
    animation: capa-entrar 680ms ease both, glow-pulsar 3.2s ease-in-out infinite;
  }
}

/* =========================
   RESPONSIVO
   ========================= */
@media (max-width: 720px){
  .capa-destaque{
    padding: calc(var(--esp-5)) 0 calc(var(--esp-3)) 0;
  }

  .capa-destaque__acoes .botao{
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   PATCH HOME (Banner + Comercial + Resumo + Menu Mobile PC-like)
   Autor: Pedro Max
   ========================================================= */

/* ---------- 1) BANNER CAPA ---------- */

.capa-destaque{
  padding: calc(var(--esp-6) + 10px) 0 var(--esp-6) 0;
  background:
    radial-gradient(1000px 520px at 30% 15%, rgba(209,165,122,.10), transparent 55%),
    radial-gradient(900px 480px at 70% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, var(--azul-fundo) 0%, var(--azul-fundo-2) 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.capa-destaque__miolo{
  display: grid;
  gap: var(--esp-4);
  justify-items: center;
}

.capa-destaque__frame{
  width: min(980px, 100%);
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);

  /* Glow premium (sem “sombra suja”) */
  box-shadow:
    0 26px 70px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

.capa-destaque__frame::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  pointer-events: none;

  /* Glow em volta */
  background: radial-gradient(60% 70% at 50% 20%, rgba(209,165,122,.28), transparent 60%);
  filter: blur(10px);
  opacity: .55;
}

.capa-destaque__img{
  width: 100%;
  height: auto;
  display: block;
  transform: translateZ(0);
}

.capa-destaque__acoes{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
  width: min(980px, 100%);
}

/* Microinteração suave no banner */
@media (prefers-reduced-motion: no-preference){
  .capa-destaque__frame{
    transition: transform 220ms ease, box-shadow 220ms ease;
  }
  .capa-destaque__frame:hover{
    transform: translateY(-2px);
    box-shadow:
      0 34px 90px rgba(0,0,0,.40),
      0 0 0 1px rgba(255,255,255,.08) inset;
  }
}

/* ---------- 2) BLOCO COMERCIAL (bem chamativo, mas sofisticado) ---------- */

.sessao--comercial{
  padding-top: calc(var(--esp-6) + 8px);
  background:
    radial-gradient(900px 500px at 50% 20%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, var(--azul-fundo-2) 0%, var(--azul-fundo) 100%);
}

.cartao--comercial{
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
}

.cartao--comercial::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 24px;
  pointer-events:none;
  background:
    radial-gradient(70% 70% at 20% 20%, rgba(209,165,122,.24), transparent 55%),
    radial-gradient(60% 60% at 80% 0%, rgba(255,255,255,.10), transparent 55%);
  filter: blur(12px);
  opacity: .55;
}

.cartao--comercial .cartao__conteudo{
  position: relative;
  padding: clamp(18px, 3.2vw, 34px);
}

.comercial__rotulo{
  margin: 0 0 10px 0;
  font-family: var(--fonte-titulo);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.78);
}

.comercial__titulo{
  margin-bottom: var(--esp-3);
  line-height: 1.12;
  text-shadow: 0 8px 26px rgba(0,0,0,.22);
}

.comercial__texto{
  max-width: 78ch;
}

.comercial__chamada{
  margin: var(--esp-4) 0 var(--esp-3) 0;
  padding: 14px 16px;
  border-left: 4px solid var(--bege-destaque);
  border-radius: 14px;
  background: rgba(0,0,0,.12);
  color: rgba(255,255,255,.92);
  text-align: justify;
}

.comercial__cta{
  margin-top: var(--esp-4);
  display: grid;
  gap: 12px;
}

.comercial__cta-texto{
  margin: 0;
  color: rgba(255,255,255,.86);
  text-align: justify;
}

.comercial__botoes{
  display: flex;
  gap: var(--esp-3);
  flex-wrap: wrap;
}

/* ---------- 3) RESUMO (foto + pilares) ---------- */

.sessao--resumo{
  background: var(--azul-fundo);
  padding-top: var(--esp-6);
}

.resumo__miolo{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: var(--esp-6);
  align-items: center;
}

.resumo__foto{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 22px 60px rgba(0,0,0,.26);
}

.resumo__foto img{
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.resumo__rotulo{
  margin: 0 0 var(--esp-2) 0;
  font-family: var(--fonte-titulo);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.78);
}

.resumo__titulo{
  margin-bottom: var(--esp-3);
}

.resumo__texto{
  max-width: 70ch;
}

.resumo__pilares{
  margin-top: var(--esp-4);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-3);
}

.pilar{
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: transform var(--transicao), background var(--transicao), border-color var(--transicao);
}

.pilar:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

.pilar__titulo{
  margin: 0 0 6px 0;
  font-family: var(--fonte-titulo);
  color: var(--branco);
}

.pilar__texto{
  margin: 0;
  color: rgba(255,255,255,.82);
  text-align: justify;
  font-size: 13.8px;
}

.resumo__acoes{
  margin-top: var(--esp-4);
  display: flex;
  gap: var(--esp-3);
  flex-wrap: wrap;
}

/* ---------- 4) MENU MOBILE IGUAL AO DESKTOP (sem scroll, tudo aparece) ---------- */

@media (max-width: 720px){

  /* deixa o cabeçalho mais “organizado” e com tudo visível */
  .cabecalho__miolo{
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 10px;
  }

  /* Logo centralizada numa linha */
  .marca{
    flex: 0 0 100%;
    justify-content: center;
    padding: 6px 0;
  }

  /* Menu em duas linhas se precisar (sem barra de rolagem) */
  .menu-principal{
    flex: 0 0 100%;
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
    max-width: none;
    padding-bottom: 0;
    gap: 12px 14px;
  }

  /* Links compactos, mas iguais aos do desktop */
  .menu-principal__link{
    font-size: 15px;
    padding: 8px 8px;
  }

  /* Botão de contato centralizado abaixo */
  .cabecalho__acoes{
    flex: 0 0 100%;
    justify-content: center;
  }

  .cabecalho__acoes .botao{
    width: min(360px, 100%);
  }

  /* Resumo empilha bonito no mobile */
  .resumo__miolo{
    grid-template-columns: 1fr;
  }

  .resumo__foto img{
    height: 320px;
  }

  .resumo__pilares{
    grid-template-columns: 1fr;
  }

  .capa-destaque__frame{
    border-radius: 18px;
  }
}

/* ---------- 5) Ajustes mobile do bloco comercial ---------- */

@media (max-width: 480px){
  .comercial__botoes .botao{
    width: 100%;
  }
}


/* =========================
   HERO VÍDEO
   ========================= */

.hero__midia{
  position: relative;
}

/* vídeo ocupa o frame inteiro igual a imagem */
.hero__video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;      /* não distorce */
  object-position: center;
  border-radius: inherit; /* respeita o raio do frame */
}

/* botão de som por cima (premium) */
.hero__som{
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(6, 43, 78, .55);
  color: rgba(255,255,255,.95);

  backdrop-filter: blur(10px);
  cursor: pointer;

  font-family: var(--fonte-titulo);
  transition: transform var(--transicao), background var(--transicao), border-color var(--transicao);
}

.hero__som:hover{
  transform: translateY(-1px);
  background: rgba(6, 43, 78, .68);
  border-color: rgba(255,255,255,.28);
}

/* quando o som já estiver ativo, você pode esconder o botão via JS */
.hero__som.is-hidden{
  display: none;
}


/* =========================
   VÍDEO DO HERO (tamanho + moldura)
   ========================= */

.midia-hero{
  position: relative;
  width: 100%;
  border-radius: var(--raio-grande);
  overflow: hidden;
}

/* controla o “ficou grande” */
.midia-hero__video{
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10;   /* mantém proporção elegante */
  max-height: 520px;       /* limita no desktop */
  object-fit: cover;       /* não deforma, só recorta */
  background: rgba(255,255,255,.04);
}

/* no mobile diminui mais */
@media (max-width: 720px){
  .midia-hero__video{
    max-height: 340px;
    aspect-ratio: 16 / 11;
  }
}

/* botão de som (aparece por cima do vídeo) */
.midia-hero__som{
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(6, 43, 78, .72);
  color: #fff;
  font-family: var(--fonte-titulo);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform var(--transicao), background var(--transicao), opacity var(--transicao);
}

.midia-hero__som:hover{
  transform: translateY(-1px);
  background: rgba(6, 43, 78, .85);
}

/* quando som já foi ativado, some o botão */
.midia-hero--som-on .midia-hero__som{
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   VÍDEO VERTICAL (story) — NÃO CORTA DE JEITO NENHUM
   ========================================================= */

/* Use no mesmo bloco onde estava a imagem (hero__foto ou seu frame) */
.hero__foto,
.capa-destaque__frame,
.midia-hero{
  position: relative;
  width: 100%;
  border-radius: var(--raio-grande);
  overflow: hidden;

  /* fundo bonito pra “faixas” quando o vídeo for vertical */
  background:
    radial-gradient(900px 340px at 35% 15%, rgba(209,165,122,.18), transparent 60%),
    radial-gradient(700px 280px at 70% 55%, rgba(255,255,255,.08), transparent 60%),
    rgba(0,0,0,.24);

  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 18px 55px rgba(0,0,0,.28);
}

/* Altura controlada no desktop pra não ficar enorme */
.hero__foto,
.midia-hero{
  height: clamp(360px, 46vh, 560px);
}

/* Se for o banner/capa grande, um pouco mais alto */
.capa-destaque__frame{
  height: clamp(320px, 52vh, 620px);
}

/* O VÍDEO em si */
.hero__foto video,
.capa-destaque__frame video,
.midia-hero video,
.midia-hero__video{
  width: 100%;
  height: 100%;
  display: block;

  object-fit: contain;     /* ✅ NÃO CORTA */
  object-position: center; /* centraliza */

  /* deixa a imagem mais “premium” */
  filter: contrast(1.02) saturate(1.02);
}

/* Mobile: mantém a mesma experiência, só ajusta a altura do frame */
@media (max-width: 720px){
  .hero__foto,
  .midia-hero{
    height: clamp(420px, 62vh, 680px);
  }

  .capa-destaque__frame{
    height: clamp(420px, 68vh, 760px);
  }
}

/* Micro brilho (glow) no frame quando passar o mouse (desktop) */
@media (hover: hover){
  .hero__foto:hover,
  .capa-destaque__frame:hover,
  .midia-hero:hover{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.08) inset,
      0 18px 55px rgba(0,0,0,.30),
      0 0 34px rgba(209,165,122,.18);
    transform: translateY(-1px);
    transition: transform var(--transicao), box-shadow var(--transicao);
  }
}

/* =========================================
   AJUSTE: texto longe da borda nos cards
   (Serviços em destaque)
   ========================================= */

/* garante respiro interno do card (quando não existe .cartao__conteudo no HTML) */
.cartao--servico{
  padding: 18px 18px 20px;
}

/* como a imagem fica em cima, remove padding dela e mantém no texto */
.cartao--servico .cartao__midia{
  margin: -18px -18px 14px; /* “encosta” a imagem nas bordas sem afetar o texto */
  border-radius: calc(var(--raio-grande) - 2px);
  overflow: hidden;
}

/* título e texto com espaçamento mais “premium” */
.cartao--servico .cartao__titulo{
  margin: 6px 0 10px 0;
  line-height: 1.15;
}

.cartao--servico .cartao__texto{
  margin: 0;
  line-height: 1.6;
  color: rgba(255,255,255,.88);
}

/* melhora leitura: limita largura do parágrafo pra não grudar e nem ficar “longo demais” */
.cartao--servico .cartao__texto{
  max-width: 46ch;
}

/* mobile: um pouco mais de respiro */
@media (max-width: 720px){
  .cartao--servico{
    padding: 18px;
  }

  .cartao--servico .cartao__midia{
    margin: -18px -18px 12px;
  }
}



/* =========================
   CHATBOT (Pré-atendimento)
   ========================= */

.chatbot{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.chatbot.is-ativo{
  display: block;
}

.chatbot__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.chatbot__janela{
  position: absolute;
  right: 18px;
  bottom: 90px; /* sobe um pouco pra não brigar com o botão flutuante */
  width: min(420px, calc(100vw - 36px));
  max-height: min(640px, calc(100vh - 140px));
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(6, 43, 78, .98);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 22px 60px rgba(0,0,0,.38),
    0 0 0 1px rgba(209,165,122,.10),
    0 0 32px rgba(209,165,122,.18); /* glow bonito */
  animation: chatbotSubir .22s ease both;
}

@keyframes chatbotSubir{
  from{ transform: translateY(10px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}

.chatbot__topo{
  padding: 14px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.chatbot__topo-titulo{
  margin: 0;
  font-family: var(--fonte-titulo);
  color: var(--branco);
  font-size: 16px;
  letter-spacing: .2px;
}

.chatbot__topo-sub{
  margin: 2px 0 0 0;
  color: rgba(255,255,255,.80);
  font-size: 13px;
}

.chatbot__fechar{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--branco);
  cursor: pointer;
  transition: transform var(--transicao), background var(--transicao);
}
.chatbot__fechar:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }

.chatbot__corpo{
  padding: 14px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chatbot__msg{
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  line-height: 1.45;
  font-size: 14px;
  animation: msgAparecer .18s ease both;
}

@keyframes msgAparecer{
  from{ transform: translateY(6px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}

.chatbot__msg--bot{
  align-self: flex-start;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.92);
}

.chatbot__msg--user{
  align-self: flex-end;
  background: rgba(209,165,122,.90);
  color: #141414;
  border-color: rgba(0,0,0,.10);
}

.chatbot__rodape{
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  display: grid;
  gap: 10px;
}

.chatbot__campo{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.chatbot__input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  color: var(--branco);
  outline: none;
}

.chatbot__input:focus{
  border-color: rgba(209,165,122,.90);
  background: rgba(255,255,255,.10);
}

.chatbot__enviar{
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: var(--bege-destaque);
  color: #141414;
  font-family: var(--fonte-titulo);
  cursor: pointer;
  transition: transform var(--transicao), background var(--transicao);
}
.chatbot__enviar:hover{ transform: translateY(-1px); background: #ddb089; }

.chatbot__acoes{
  display: flex;
  gap: 10px;
}

.chatbot__acao{
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  transition: transform var(--transicao), background var(--transicao);
}
.chatbot__acao:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }

.chatbot__acao--sec{
  opacity: .9;
}

/* Mobile: janela centralizada e maior */
@media (max-width: 720px){
  .chatbot__janela{
    left: 18px;
    right: 18px;
    bottom: 100px;
    width: auto;
  }
}



/* =========================
   CORREÇÃO: BOTÃO WHATS FIXO NÃO APARECE
   (cola no FINAL do estilos.css)
   ========================= */

.botao-whats-fixo{
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 99999 !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 12px 16px !important;
  border-radius: 999px !important;

  background: var(--bege-destaque, #d1a57a) !important;
  color: #1c1c1c !important;

  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 16px 35px rgba(0,0,0,.24) !important;

  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateZ(0) !important;
}

.botao-whats-fixo:hover{
  transform: translateY(-2px) !important;
}

.botao-whats-fixo__texto{
  font-family: var(--fonte-titulo, Georgia, "Times New Roman", Times, serif) !important;
  letter-spacing: .2px !important;
}

/* Se algum container estiver “cortando” o fixo */
.escala-layout{
  overflow: visible !important;
}

/* Mobile: não deixa o botão ficar gigante */
@media (max-width: 720px){
  .botao-whats-fixo{
    right: 14px !important;
    bottom: 14px !important;
    padding: 12px 14px !important;
  }
}


.botao-whats-fixo__icone{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--bege-destaque, #d1a57a);
  display: grid;
  place-items: center;
}

.botao-whats-fixo__icone{
  background-image: url("../img/icone-whats.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

/* =========================
   PATCH MOBILE - CABEÇALHO (não quebrar / ficar igual ao PC)
   Cole NO FINAL do estilos.css
   ========================= */

@media (max-width: 720px){

  /* impede o header de virar “coluna” e bagunçar */
  .cabecalho__miolo{
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* garante que a marca não “empurre” tudo */
  .marca{
    flex: 0 0 auto !important;
    padding: 8px 0 !important;
  }

  /* menu sempre em UMA linha e com scroll horizontal discreto */
  .menu-principal{
    flex: 1 1 auto !important;
    min-width: 0 !important;               /* isso é o segredo p/ não quebrar */
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;

    justify-content: center !important;
    gap: 18px !important;

    padding: 0 !important;
    margin: 0 8px !important;

    scrollbar-width: none;                 /* Firefox: some a barra */
    -ms-overflow-style: none;              /* IE/Edge antigo */
  }

  .menu-principal::-webkit-scrollbar{
    display: none;                         /* Chrome/Safari: some a barra */
  }

  .menu-principal__link{
    display: inline-flex !important;
    flex: 0 0 auto !important;
    padding: 10px 8px !important;
    line-height: 1 !important;
  }

  /* botão “Contato” não pode esmagar o menu */
  .cabecalho__acoes{
    flex: 0 0 auto !important;
  }

  .cabecalho__acoes .botao{
    width: auto !important;
    white-space: nowrap !important;
  }
}

/* =========================
   PATCH MOBILE - FRAMES (capa/vídeo) não esticar
   ========================= */

@media (max-width: 720px){

  /* Frame do banner principal */
  .capa-destaque__frame{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 62vh !important;          /* impede ficar gigante */
    overflow: hidden !important;
    border-radius: var(--raio-grande) !important;
  }

  /* Imagem do banner: nunca corta, só reduz mantendo proporção */
  .capa-destaque__img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Se seu vídeo está dentro de algum “frame”/foto do hero */
  .hero__foto{
    height: auto !important;
    max-height: 70vh !important;          /* limita o estrago */
    overflow: hidden !important;
  }

  /* Vídeo/imagem dentro do hero: NÃO CORTAR */
  .hero__foto video,
  .hero__foto iframe,
  .hero__foto img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    background: rgba(0,0,0,.12);
  }
}

/* =========================================================
   PATCH MOBILE (<= 720px)
   - Cabeçalho em 2 linhas: logo em cima / menu embaixo
   - Menu centralizado, 1 linha, sem quebrar
   - Frame do vídeo sem ficar gigante (sem “vazio” enorme)
   Cole NO FINAL do estilos.css
   ========================================================= */

@media (max-width: 720px){

  /* ---------- HEADER EM 2 LINHAS ---------- */
  .cabecalho__miolo{
    display: grid !important;
    grid-template-columns: 1fr auto !important; /* logo | botão */
    grid-template-areas:
      "marca acoes"
      "menu  menu" !important;
    gap: 10px !important;
    align-items: center !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .marca{ grid-area: marca !important; }
  .menu-principal{ grid-area: menu !important; }
  .cabecalho__acoes{ grid-area: acoes !important; }

  /* logo um pouco maior e bem alinhada */
  .marca__logo{
    width: 140px !important;
    max-width: 44vw !important;
    height: auto !important;
  }

  /* botão contato não pode esmagar o menu */
  .cabecalho__acoes .botao{
    width: auto !important;
    padding: 10px 14px !important;
    white-space: nowrap !important;
  }

  /* ---------- MENU BONITO E USÁVEL ---------- */
  .menu-principal{
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;

    gap: 18px !important;
    padding: 6px 2px 2px !important;

    overflow-x: auto !important;   /* se faltar espaço, desliza */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    scrollbar-width: none !important; /* some a barra */
    -ms-overflow-style: none !important;
  }

  .menu-principal::-webkit-scrollbar{ display:none !important; }

  .menu-principal__link{
    flex: 0 0 auto !important;
    display: inline-flex !important;
    white-space: nowrap !important;
    padding: 10px 8px !important;
    line-height: 1 !important;
    font-size: 15px !important;
  }

  /* deixa o ativo mais “cara de PC” */
  .menu-principal__link--ativo{
    border-bottom-width: 2px !important;
  }


  /* ---------- FRAME/VÍDEO (sem esticar e sem vazio gigante) ---------- */


  /* Vídeo sem cortar (contain) */
  .hero__foto video{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;  /* NÃO CORTA */
    display: block !important;
    background: rgba(0,0,0,.18) !important; /* disfarça as “barras” */
  }

  /* Se você tiver um frame separado do banner */
  .capa-destaque__frame{
    width: 100% !important;
    max-height: 62vh !important;
    height: auto !important;
    overflow: hidden !important;
  }
}

/* =========================
   MOBILE: MENU 100% EM 1 LINHA (AUTO-ADAPT)
   ========================= */
@media (max-width: 720px){



  /* menu SEM QUEBRAR e centralizado */
  .menu-principal{
    display: flex !important;
    flex-wrap: nowrap !important;     /* 1 linha sempre */
    justify-content: center !important;
    align-items: center !important;

    gap: clamp(6px, 1.4vw, 14px) !important;

    /* permite o centro encolher sem estourar */
    min-width: 0 !important;
    overflow: hidden !important;      /* não cria barra de rolagem */
  }

  /* links diminuem conforme a tela */
  .menu-principal__link{
    white-space: nowrap !important;
    font-size: clamp(11px, 2.8vw, 15px) !important;
    padding: clamp(6px, 1.2vw, 10px) clamp(4px, 1.0vw, 8px) !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }

  /* botão Contato “encolhe” junto */
  .cabecalho__acoes .botao{
    padding: clamp(7px, 1.4vw, 10px) clamp(10px, 2.2vw, 14px) !important;
    font-size: clamp(11px, 2.7vw, 14px) !important;
    white-space: nowrap !important;
  }
}

/* Se ainda faltar 1 ou 2px em celulares bem pequenos, aplica um micro-scale no menu */
@media (max-width: 380px){
  .menu-principal{
    transform: scale(0.94) !important;
    transform-origin: center !important;
  }
}

@media (max-width: 720px){
  .cabecalho{
    background: color-mix(in srgb, var(--cor-primaria) 92%, transparent) !important;
  }
}











/* =========================================================
   SOBRE — FOTO PNG SEM FUNDO (SEM MOLDURA) + TEXTO PROFISSIONAL
   Autor: Pedro Max
   ========================================================= */

.sobre-hero{
  padding: calc(var(--esp-7) - 10px) 0 var(--esp-6) 0;
  background:
    radial-gradient(1000px 520px at 20% 10%, rgba(209,165,122,.12), transparent 60%),
    radial-gradient(900px 520px at 80% 30%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, var(--azul-fundo) 0%, var(--azul-fundo-2) 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.sobre-hero__grid{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: var(--esp-6);
  align-items: center;
}

.sobre-hero__rotulo{
  margin: 0 0 10px 0;
  font-family: var(--fonte-titulo);
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.78);
}

.sobre-hero__titulo{
  margin-bottom: var(--esp-3);
}

/* FOTO PNG: sem moldura, só integração (sombra discreta) */
.sobre-hero__foto{
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.sobre-hero__foto img{
  width: min(380px, 100%);
  height: auto;
  display: block;

  /* “integra” no site sem criar moldura */
  filter: drop-shadow(0 22px 60px rgba(0,0,0,.35));
  transform: translateZ(0);
}

/* Texto */
.sobre-hero__texto{
  max-width: 78ch;
}

/* Citação com cara premium (sem caixa “pesada”) */
.sobre-hero__citacao{
  margin: var(--esp-4) 0 0 0;
  padding: 14px 16px;
  border-left: 4px solid var(--bege-destaque);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.94);
  font-style: italic;
}

/* Botões */
.sobre-hero__botoes{
  margin-top: var(--esp-4);
  display: flex;
  gap: var(--esp-3);
  flex-wrap: wrap;
}

/* Chips */
.sobre-hero__chips{
  margin-top: var(--esp-4);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  font-size: 13.5px;
  letter-spacing: .1px;
}

/* Grades do sobre */
.grade-informacoes{
  margin-top: var(--esp-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-4);
}

.cartao--info{
  padding: calc(var(--esp-4) + 4px);
}

.grade-ajuda{
  margin-top: var(--esp-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-4);
}

.cartao--ajuda{
  padding: calc(var(--esp-4) + 4px);
}

/* =========================
   RESPONSIVO (mobile)
   ========================= */
@media (max-width: 980px){
  .sobre-hero__grid{
    grid-template-columns: 1fr;
    gap: var(--esp-5);
  }

  .sobre-hero__foto{
    order: -1; /* foto primeiro no mobile/tablet */
  }

  .sobre-hero__foto img{
    width: min(340px, 92%);
  }
}

@media (max-width: 720px){
  .sobre-hero{
    padding: var(--esp-6) 0 var(--esp-5) 0;
  }

  .sobre-hero__foto{
    align-items: center;
  }

  .sobre-hero__foto img{
    width: min(320px, 88%);
  }

  .sobre-hero__botoes .botao{
    width: 100%;
    justify-content: center;
  }

  .grade-informacoes,
  .grade-ajuda{
    grid-template-columns: 1fr; /* evita ficar espremido */
  }
}









/* =========================================
   SOBRE (Quem sou eu) — glow atrás do PNG
   Autor: Pedro Max
   Cole no FINAL do estilos.css
   ========================================= */

.sobre-hero{
  background:
    radial-gradient(1000px 520px at 30% 15%, rgba(209,165,122,.10), transparent 60%),
    radial-gradient(900px 520px at 70% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, var(--azul-fundo) 0%, var(--azul-fundo-2) 100%);
  padding: var(--esp-6) 0;
}

.sobre-hero__grid{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: var(--esp-6);
  align-items: center;
}

/* Sem moldura, só “integração” */
.sobre-hero__foto{
  margin: 0;
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate; /* garante que o brilho fique atrás */
}

/* Glow premium atrás dela */
.sobre-hero__foto::before{
  content: "";
  position: absolute;
  inset: -6%;
  z-index: -1;

  border-radius: 999px;
  background:
    radial-gradient(50% 60% at 45% 35%, rgba(209,165,122,.42), transparent 62%),
    radial-gradient(60% 70% at 60% 65%, rgba(120,170,255,.16), transparent 68%);

  filter: blur(22px);
  opacity: .95;
  transform: translateZ(0);
}

/* Um “halo” suave extra, dá profundidade */
.sobre-hero__foto::after{
  content: "";
  position: absolute;
  width: 86%;
  height: 18%;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  z-index: -1;

  background: radial-gradient(closest-side, rgba(0,0,0,.35), transparent 70%);
  filter: blur(14px);
  opacity: .55;
}

/* PNG sem fundo */
.sobre-hero__foto img{
  width: min(420px, 92%);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.35));
}

/* Texto/estrutura (caso ainda não tenha no CSS) */
.sobre-hero__rotulo{
  margin: 0 0 var(--esp-2) 0;
  font-family: var(--fonte-titulo);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.78);
}

.sobre-hero__citacao{
  margin: var(--esp-4) 0 0 0;
  padding: 14px 16px;
  border-left: 4px solid var(--bege-destaque);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}

.sobre-hero__botoes{
  margin-top: var(--esp-4);
  display: flex;
  gap: var(--esp-3);
  flex-wrap: wrap;
}

.sobre-hero__chips{
  margin-top: var(--esp-4);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip{
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  font-size: 13px;
}

/* Responsivo: empilha e centraliza a foto */
@media (max-width: 720px){
  .sobre-hero__grid{
    grid-template-columns: 1fr;
    gap: var(--esp-5);
  }

  .sobre-hero__foto img{
    width: min(360px, 92%);
  }

  .sobre-hero__botoes .botao{
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   PATCH SOBRE (banner-interno--sobre)
   - mobile bonito: foto não vira "poster"
   - 2 colunas em celular médio (foto | texto)
   - sem cortar PNG (object-fit: contain)
   Cole no FINAL do estilos.css
   ========================================================= */

.banner-interno--sobre .banner-interno__foto{
  /* tira cara de "moldura/caixa" e integra */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* brilho/AURA atrás do PNG (premium) */
.banner-interno--sobre .banner-interno__foto{
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.banner-interno--sobre .banner-interno__foto::before{
  content:"";
  position:absolute;
  inset: -10%;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(55% 55% at 45% 30%, rgba(250,206,139,.28), transparent 62%),
    radial-gradient(60% 60% at 60% 55%, rgba(255,255,255,.10), transparent 68%);
  filter: blur(18px);
  opacity: .95;
}

/* imagem: sem corte, mas SEM ficar gigante */
.banner-interno--sobre .banner-interno__foto img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* NÃO CORTA */
  filter: drop-shadow(0 18px 45px rgba(0,0,0,.28));
}

/* MOBILE PEQUENO: empilha, mas foto com altura controlada */
@media (max-width: 519px){
  .banner-interno--sobre{
    padding: 34px 0 34px 0 !important; /* reduz “respiro” */
  }

  .banner-interno--sobre .banner-interno__miolo{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .banner-interno--sobre .banner-interno__foto img{
    width: min(320px, 86vw) !important;
    max-height: 46vh !important; /* ✅ evita virar poster */
  }

  .banner-interno--sobre .titulo-pagina{
    margin-top: 6px !important;
  }
}

/* CELULAR MÉDIO/GRANDE: FOTO AO LADO DO TEXTO (fica MUITO melhor) */
@media (min-width: 520px) and (max-width: 860px){
  .banner-interno--sobre{
    padding: 38px 0 44px 0 !important;
  }

  .banner-interno--sobre .banner-interno__miolo{
    grid-template-columns: 0.9fr 1.1fr !important; /* foto | texto */
    gap: 18px !important;
    align-items: center !important;
  }

  .banner-interno--sobre .banner-interno__foto{
    justify-self: start !important;
  }

  .banner-interno--sobre .banner-interno__foto img{
    width: min(340px, 42vw) !important;
    max-height: 62vh !important;
  }

  .banner-interno--sobre .banner-interno__texto{
    padding-right: 0 !important;
  }

  .banner-interno--sobre .texto-secao{
    max-width: 58ch !important;
  }
}


/* =========================================================
   SOBRE — CAPA EDITORIAL (foto gigante + texto por cima)
   Cole NO FINAL do estilos.css
   ========================================================= */

.sobre-capa{
  padding: 0;
  background:
    radial-gradient(1000px 520px at 25% 20%, rgba(209,165,122,.12), transparent 60%),
    linear-gradient(180deg, var(--azul-fundo) 0%, var(--azul-fundo-2) 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.sobre-capa__miolo{
  position: relative;
  min-height: clamp(540px, 78vh, 820px);
  display: grid;
  align-items: end;
  padding: clamp(18px, 4vw, 36px) var(--gutter);
}

/* FOTO GIGANTE como “capa” */
.sobre-capa__midia{
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0;
  pointer-events: none;
}

/* brilho/aura atrás */
.sobre-capa__midia::before{
  content:"";
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(55% 55% at 45% 18%, rgba(250,206,139,.40), transparent 62%),
    radial-gradient(60% 60% at 70% 58%, rgba(255,255,255,.10), transparent 68%);
  filter: blur(26px);
  opacity: .95;
}

/* degradês para leitura do texto */
.sobre-capa__midia::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(80% 60% at 75% 30%, rgba(0,0,0,.12), transparent 60%),
    linear-gradient(90deg, rgba(6,23,56,.92) 0%, rgba(6,23,56,.70) 42%, rgba(6,23,56,.18) 70%, rgba(6,23,56,0) 100%),
    linear-gradient(180deg, rgba(6,23,56,.25) 0%, rgba(6,23,56,.65) 70%, rgba(6,23,56,.92) 100%);
}

/* IMAGEM: recorte artístico (metade do rosto / destaque) */
.sobre-capa__img{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* aqui a gente QUER recortar */
  object-position: 18% 20%; /* ✅ ajusta o “meio rosto” (mude se quiser) */
  filter: drop-shadow(0 26px 70px rgba(0,0,0,.40));
  transform: translateZ(0);
}

/* CONTEÚDO em cima (premium) */
.sobre-capa__conteudo{
  position: relative;
  z-index: 2;
  width: min(680px, 100%);
  padding: clamp(14px, 2.6vw, 22px);
  border-radius: 18px;

  /* vidro sutil: mantém elegante e legível */
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 60px rgba(0,0,0,.30);
  backdrop-filter: blur(10px);
}

.sobre-capa__rotulo{
  margin: 0 0 10px 0;
  font-family: var(--fonte-titulo);
  letter-spacing: 2.4px;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.74);
}

.sobre-capa__titulo{
  margin: 0 0 12px 0;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.08;
  font-size: clamp(28px, 3.4vw, 46px);
  text-shadow: 0 14px 40px rgba(0,0,0,.35);
}

.sobre-capa__texto{
  margin: 0 0 12px 0;
  color: rgba(255,255,255,.92);
  text-align: justify;
}

.sobre-capa__frase{
  margin: 14px 0 0 0;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(209,165,122,.28);
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.92);
  font-style: italic;
  text-align: justify;
}

.sobre-capa__acoes{
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* MOBILE: deixa “editorial” mesmo */
@media (max-width: 720px){
  .sobre-capa__miolo{
    min-height: 86vh; /* dá presença */
  }

  /* no mobile, recorte mais forte pra aparecer “metade do rosto” */
  .sobre-capa__img{
    object-position: 50% 14%;
  }

  .sobre-capa__conteudo{
    width: 100%;
  }

  .sobre-capa__acoes .botao{
    width: 100%;
    justify-content: center;
  }
}

/* CELULAR MUITO PEQUENO: texto mais compacto */
@media (max-width: 390px){
  .sobre-capa__miolo{
    min-height: 88vh;
    padding: 16px var(--gutter);
  }
  .sobre-capa__texto{ font-size: 14.4px; }
}

/* =========================================
   SOBRE > INFORMAÇÕES PROFISSIONAIS
   Corrige o card "Registro" menor que os outros
   Cole NO FINAL do estilos.css
   ========================================= */

/* garante que a grade trate todos igual */
.grade-informacoes{
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch; /* mesma altura visual */
}

/* todos os cards ocupam 100% do "slot" */
.grade-informacoes .cartao{
  width: 100%;
  height: 100%;
}

/* o registro estava "encolhendo": força ele a acompanhar */
.grade-informacoes .cartao--info{
  width: 100%;
}

/* Mobile: vira 1 coluna e todos ficam iguais */
@media (max-width: 720px){
  .grade-informacoes{
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   PATCH FINAL (FUNCIONA COM SEU HTML ATUAL)
   SOBRE — foto completa à esquerda + texto com foto “fantasma” atrás (PC)
   Autor: Pedro Max
   Cole no FINAL do estilos.css
   ========================================================= */

@media (min-width: 861px){

  /* Grid do topo */
  .sobre-hero__grid{
    grid-template-columns: 1.05fr .95fr !important;
    align-items: center !important;
    gap: 42px !important;
  }

  /* =========================
     ESQUERDA: FOTO COMPLETA (SEM MOLDURA)
     ========================= */
  .sobre-hero__foto{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    border-radius: 0 !important;

    position: relative !important;
    display: grid !important;
    place-items: center !important;
    isolation: isolate !important;
  }

  /* Glow atrás dela */
  .sobre-hero__foto::before{
    content: "" !important;
    position: absolute !important;
    inset: -12% !important;
    z-index: -1 !important;
    border-radius: 999px !important;
    background:
      radial-gradient(55% 60% at 45% 28%, rgba(250,206,139,.28), transparent 62%),
      radial-gradient(60% 70% at 65% 65%, rgba(120,170,255,.12), transparent 70%) !important;
    filter: blur(22px) !important;
    opacity: .95 !important;
  }

  /* A imagem NÃO pode ter altura fixa e NÃO pode ser cover */
  .sobre-hero__foto img{
    width: min(520px, 100%) !important;
    height: auto !important;
    max-height: 620px !important;

    object-fit: contain !important; /* ✅ não corta */
    object-position: center !important;

    filter: drop-shadow(0 22px 60px rgba(0,0,0,.32)) !important;
    transform: translateZ(0) !important;
  }

  /* =========================
     DIREITA: TEXTO SEM BORDA + FOTO “FANTASMA” ATRÁS
     ========================= */
  .sobre-hero__conteudo{
    position: relative !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;

    isolation: isolate !important;
  }

  /* Foto fantasma atrás do texto */
  .sobre-hero__conteudo::before{
    content: "" !important;
    position: absolute !important;
    inset: -34px -28px -34px -34px !important;
    z-index: -2 !important;

    background-image: url("assets/img/sobre-advogada.png") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 58% 18% !important;

    opacity: .14 !important;
    filter: saturate(.95) contrast(1.03) !important;
    transform: scale(1.03) !important;
    pointer-events: none !important;
  }

  /* Camada escura pra leitura (sem virar “caixa”) */
  .sobre-hero__conteudo::after{
    content: "" !important;
    position: absolute !important;
    inset: -34px -28px -34px -34px !important;
    z-index: -1 !important;

    background:
      radial-gradient(90% 70% at 62% 18%, rgba(0,0,0,.20), transparent 60%),
      linear-gradient(180deg, rgba(6,23,56,.22), rgba(6,23,56,.60)) !important;

    pointer-events: none !important;
  }

  /* Dá mais “destaque” no texto do lado direito */
  .sobre-hero__rotulo{
    color: rgba(255,255,255,.84) !important;
    letter-spacing: 2.6px !important;
  }

  .sobre-hero__conteudo .titulo-pagina{
    color: #fff !important;
    text-shadow: 0 18px 46px rgba(0,0,0,.36) !important;
    margin-bottom: 16px !important;
  }

  .sobre-hero__conteudo .texto-secao{
    color: rgba(255,255,255,.90) !important;
    max-width: 62ch !important;
  }

  .sobre-hero__citacao{
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.94) !important;
    border-left-color: rgba(250,206,139,.95) !important;
  }

  /* =========================
     CORRIGE “REGISTRO” MENOR QUE OS OUTROS
     ========================= */
  .grade-informacoes{
    align-items: stretch !important;
  }

  .grade-informacoes .cartao{
    height: 100% !important;
    min-height: 180px !important;
  }

  .grade-informacoes .cartao--info{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
}

/* =========================================================
   PATCH FORÇA BRUTA — SOBRE (PC)
   - esquerda: foto completa SEM moldura
   - direita: SEM card, texto com foto atrás (ghost) + overlay
   Arquivo CSS: assets/css/estilos.css  -> imagens em assets/img/
   ========================================================= */

@media (min-width: 861px){

  /* Layout do topo */
  body .sobre-hero .sobre-hero__grid{
    grid-template-columns: 1.05fr .95fr !important;
    gap: 44px !important;
    align-items: center !important;
  }

  /* =========================
     ESQUERDA — FOTO SEM MOLDURA
     ========================= */
  body .sobre-hero .sobre-hero__foto{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;

    position: relative !important;
    display: grid !important;
    place-items: center !important;
    isolation: isolate !important;
    padding: 0 !important;
  }

  /* Glow atrás da foto */
  body .sobre-hero .sobre-hero__foto::before{
    content: "" !important;
    position: absolute !important;
    inset: -12% !important;
    z-index: -1 !important;
    border-radius: 999px !important;
    background:
      radial-gradient(55% 60% at 45% 28%, rgba(250,206,139,.30), transparent 62%),
      radial-gradient(60% 70% at 65% 65%, rgba(120,170,255,.12), transparent 70%) !important;
    filter: blur(22px) !important;
    opacity: .95 !important;
    pointer-events: none !important;
  }

  /* Foto NÃO corta e NÃO fica com “frame” */
  body .sobre-hero .sobre-hero__foto img{
    width: min(560px, 100%) !important;
    height: auto !important;
    max-height: 680px !important;

    object-fit: contain !important;   /* ✅ não corta */
    object-position: center !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    filter: drop-shadow(0 26px 70px rgba(0,0,0,.35)) !important;
    background: transparent !important;
  }

  /* =========================
     DIREITA — REMOVE O “CARD” e põe imagem atrás
     ========================= */
  body .sobre-hero .sobre-hero__conteudo{
    /* mata qualquer estilo de card */
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;

    position: relative !important;
    isolation: isolate !important;
  }

  /* Imagem atrás do texto (ghost) — caminho CERTO */
  body .sobre-hero .sobre-hero__conteudo::before{
    content: "" !important;
    position: absolute !important;
    inset: -40px -28px -40px -40px !important;
    z-index: -2 !important;

    background-image: url("../img/sobre-advogada.png") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 58% 18% !important;

    opacity: .14 !important;
    filter: saturate(.95) contrast(1.03) !important;
    pointer-events: none !important;
  }

  /* Overlay pra leitura (não vira caixa) */
  body .sobre-hero .sobre-hero__conteudo::after{
    content: "" !important;
    position: absolute !important;
    inset: -40px -28px -40px -40px !important;
    z-index: -1 !important;

    background:
      radial-gradient(90% 70% at 62% 18%, rgba(0,0,0,.22), transparent 60%),
      linear-gradient(180deg, rgba(6,23,56,.22), rgba(6,23,56,.62)) !important;

    pointer-events: none !important;
  }

  /* Texto com mais presença */
  body .sobre-hero .sobre-hero__conteudo .titulo-pagina{
    text-shadow: 0 18px 46px rgba(0,0,0,.36) !important;
  }

  body .sobre-hero .sobre-hero__conteudo .texto-secao{
    max-width: 62ch !important;
    color: rgba(255,255,255,.90) !important;
  }

  /* =========================
     CARDS “Registro/Áreas/Atuação” iguais
     ========================= */
  body .grade-informacoes{
    align-items: stretch !important;
  }

  body .grade-informacoes .cartao.cartao--info{
    height: 100% !important;
    width: 100% !important;
    min-height: 180px !important;
  }
}
html{ outline: 8px solid #ff00ff !important; }

/* =========================================================
   HERO — FOTO no tamanho original (DESKTOP)
   - a div .hero__foto vira "moldura" que abraça o tamanho real
   - o <img> não é esticado
   Cole no FINAL do estilos.css
   ========================================================= */

/* Desktop / PC */
@media (min-width: 721px){

  /* a coluna da foto não precisa ocupar tudo */
  .hero__miolo{
    align-items: center;
  }

  /* moldura vira "fit-content" pra respeitar tamanho real */
  .hero__foto{
    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: fit-content;
    max-width: 100%;         /* segurança */
    overflow: visible;       /* não corta */
    background: transparent; /* sem “placa” atrás */
    border: 0;               /* se quiser sem borda */
    box-shadow: none;        /* se quiser sem sombra */
  }

  /* imagem no tamanho original */
  .hero__foto img{
    width: auto !important;      /* ✅ não estica */
    max-width: 100%;             /* ✅ não estoura a coluna */
    height: auto !important;
    object-fit: unset !important;

    /* opcional: mantém a estética premium sem "moldura" */
    filter: drop-shadow(0 22px 60px rgba(0,0,0,.35));
    display: block;
  }
}
/* =========================================================
   HERO — FOTO QUADRADA GRANDE (PC) + bordas redondas
   Cole no FINAL do estilos.css
   ========================================================= */

@media (min-width: 721px){

  

  .hero__foto img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
  }
}


/* =========================================================
   SOBRE-CAPA (PC) — texto mais largo (menos quebras)
   Cole no FINAL do estilos.css
   ========================================================= */
@media (min-width: 721px){

  /* o “card” do texto fica mais largo */
  .sobre-capa__conteudo{
    width: clamp(720px, 54vw, 980px) !important;
    max-width: none !important; /* mata o limite antigo */
  }

  /* parágrafos mais “horizontais” */
  .sobre-capa__texto,
  .sobre-capa__frase{
    max-width: 82ch !important;
  }

  /* título quebra menos */
  .sobre-capa__titulo{
    max-width: 26ch !important;
  }
}

/* =========================================================
   SOBRE-CAPA (PC) — centralizar e NÃO cortar quando aumentar
   Cole no FINAL do estilos.css
   ========================================================= */
@media (min-width: 721px){

  /* garante um layout em 2 colunas com espaço correto */
  .sobre-capa__miolo{
    display: grid !important;
    grid-template-columns: clamp(420px, 42vw, 720px) minmax(520px, 1fr) !important;
    gap: clamp(24px, 4vw, 72px) !important;
    align-items: center !important;
  }

  /* card do texto: ocupa a coluna inteira e fica centralizado nela */
  .sobre-capa__conteudo{
    width: 100% !important;          /* não estoura */
    max-width: 980px !important;     /* limite “premium” */
    justify-self: center !important; /* ✅ centraliza na coluna */
    margin-inline: auto !important;
    padding-right: clamp(16px, 2vw, 28px) !important; /* respiro pra não cortar */
    box-sizing: border-box;
  }

  /* evita o título encostar na borda */
  .sobre-capa__titulo{
    max-width: 100% !important;
    padding-right: clamp(10px, 1.5vw, 24px) !important;
  }
}

/* =========================================================
   HERO (PC) — puxar o conjunto mais pra ESQUERDA
   Cole no FINAL do estilos.css
   ========================================================= */
@media (min-width: 721px){

  /* o grid do hero */
  .hero__miolo{
    display: grid !important;

    /* mantém 2 colunas, mas com mais espaço pra foto */
    grid-template-columns: minmax(520px, 1.05fr) minmax(520px, 0.95fr) !important;

    gap: clamp(20px, 3vw, 56px) !important;
    align-items: center !important;

    /* ✅ isso “encosta” mais no lado esquerdo do miolo */
    justify-content: start !important;

    /* ✅ garante que não tem centralização via margin */
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* se o texto estiver “empurrado”, puxa a coluna do conteúdo */
  .hero__conteudo,
  .hero__texto,
  .hero__card,
  .sobre-hero__conteudo{
    justify-self: start !important;
  }

  /* opcional: puxa o bloco do texto alguns px pra esquerda */
  .sobre-hero__conteudo,
  .hero__conteudo{
    transform: translateX(-40px);
  }
}

/* =========================================================
   AJUSTE FINO (PC) — menos pra esquerda + fundo da direita 100%
   Cole no FINAL do estilos.css
   ========================================================= */
@media (min-width: 721px){

  /* 1) HERO: volta pro centro, com leve ajuste (bem menor) */
  .hero__miolo{
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* se você tinha aplicado translateX grande, reduz aqui */
  .sobre-hero__conteudo,
  .hero__conteudo{
    transform: translateX(-12px) !important; /* era -40px (muito). Agora é sutil. */
  }

  /* 2) FUNDO DA DIREITA: a mídia tem que ocupar o card inteiro */
  .sobre-capa{
    position: relative !important;
    overflow: hidden !important;
  }

  .sobre-capa__miolo{
    position: relative !important;
  }

  /* a camada da imagem vira “background” do card e cobre tudo */
  .sobre-capa__midia{
    position: absolute !important;
    inset: 0 !important;               /* ✅ preenche 100% */
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: inherit !important;  /* ✅ acompanha borda do card */
    z-index: 0 !important;
    pointer-events: none !important;
  }

  .sobre-capa__img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;       /* ✅ preenche sem distorcer */
    object-position: right center !important; /* puxa a pessoa mais pra direita */
    display: block !important;
    transform: translateX(0) !important; /* garante que não ficou empurrada */
  }

  /* texto sempre acima do fundo */
  .sobre-capa__conteudo{
    position: relative !important;
    z-index: 2 !important;
  }
}



/* =========================
   HERO (MOBILE) — empilhado, sem cortes
   ========================= */

@media (max-width: 720px){

  .hero__miolo{
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    justify-items: center;
    padding-top: 18px;
    padding-bottom: 10px;
  }

  .hero__foto{
    width: 100%;
    max-width: 520px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
  }

  .hero__foto img{
    width: 100%;
    height: auto;
    display: block;
  }

  .sobre-capa{
    width: 100%;
    max-width: 520px;
    border-radius: 22px;
    overflow: hidden;
  }

  /* no mobile a mídia vira “textura” mais leve pra não atrapalhar leitura */
  .sobre-capa__midia{
    opacity: .12;
  }

  .sobre-capa__conteudo{
    padding: 18px 16px 16px;
  }

  .sobre-capa__titulo{
    font-size: clamp(28px, 7vw, 38px);
    line-height: 1.08;
    margin: 8px 0 12px;
  }

  .sobre-capa__texto{
    font-size: 15px;
    line-height: 1.6;
  }

  .sobre-capa__acoes{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 14px;
  }

  .sobre-capa__acoes .botao{
    width: 100%;
    justify-content: center;
  }
}
/* =========================================
   SOBRE-CAPA — FUNDO (MOBILE) APARECER
   ========================================= */
@media (max-width: 720px){

  .sobre-capa{
    position: relative;              /* necessário pro fundo absoluto */
    isolation: isolate;              /* evita bug de z-index em alguns casos */
  }

  .sobre-capa__midia{
    position: absolute;
    inset: 0;                        /* preenche o card inteiro */
    z-index: 0;
    pointer-events: none;
    opacity: .9990;                    /* controla o “quanto aparece” */
  }

  .sobre-capa__midia::after{
    content: "";
    position: absolute;
    inset: 0;
    /* “neblina” por cima pra não atrapalhar o texto */
    background: linear-gradient(
      180deg,
      rgba(6, 23, 56, .55) 0%,
      rgba(6, 23, 56, .78) 55%,
      rgba(6, 23, 56, .92) 100%
    );
  }

  .sobre-capa__img{
    width: 100%;
    height: 100%;
    object-fit: cover;               /* preenche sem distorcer */
    object-position: center;         /* centraliza o recorte */
    display: block;
    filter: saturate(1.05) contrast(1.05);
  }

  .sobre-capa__conteudo{
    position: relative;
    z-index: 1;                      /* texto acima do fundo */
  }
}
/* =========================================
   CHIPS — CENTRALIZAR (PC e MOBILE)
   ========================================= */

.sobre-hero__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;   /* ✅ centraliza os chips */
  align-items: center;
  width: 100%;
  margin: 18px auto 0;       /* ✅ centraliza o bloco */
}

/* se o "miolo" estiver alinhando tudo pra esquerda,
   isso garante que o bloco não fique "preso" */
.sobre-hero__chips[aria-label]{
  text-align: center;
}

/* =========================================================
   CASES — Intro + Destaque + Cards + Detalhe (PC + Mobile)
   Cole no FINAL do estilos.css
   ========================================================= */

.cases-intro{
  padding: 46px 0 18px;
}
.cases-intro__miolo{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items: stretch;
}
.cases-intro__rotulo{
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .78rem;
  opacity: .75;
  margin: 0 0 12px;
}
.cases-intro__titulo{
  margin: 0 0 14px;
  line-height: 1.06;
}
.cases-intro__subtitulo{
  margin: 0 0 18px;
  max-width: 58ch;
}
.cases-intro__mini-cta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Case destaque */
.case-destaque{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
  min-height: 340px;
}
.case-destaque__midia{
  position:absolute;
  inset:0;
}
.case-destaque__midia img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.02);
  transform: scale(1.02);
  opacity: .42;
}
.case-destaque__conteudo{
  position: relative;
  z-index: 1;
  padding: 22px 22px 20px;
}
.case-destaque__rotulo{
  margin: 0 0 10px;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .75;
}
.case-destaque__titulo{
  margin: 0 0 12px;
  line-height: 1.05;
}
.case-destaque__meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.case-pill{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-size: .85rem;
}
.case-destaque__linha{
  margin: 0 0 10px;
}
.case-destaque__resultado{
  font-weight: 700;
}
.case-destaque__acoes{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Cards */
.grade-cases{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.cartao--case .cartao__midia--case{
  border-radius: 18px;
  overflow: hidden;
}
.cartao--case .cartao__midia--case img{
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: center;
  display:block;
}
.cartao--case .cartao__cabecalho{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.badge-metrica{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  font-weight: 700;
  font-size: .82rem;
  white-space: nowrap;
}
.badge-metrica--grande{
  padding: 10px 12px;
  font-size: .86rem;
}
.cartao--case .cartao__texto--meta{
  opacity: .95;
}
.cartao--case .cartao__rodape{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.cartao--case .cartao__tags{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tag-case{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-size: .78rem;
  opacity: .92;
}
.botao--mini{
  padding: 10px 14px;
  border-radius: 999px;
}

/* Aviso vazio */
.aviso-lista-vazia{
  grid-column: 1 / -1;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

/* CTA final na página cases */
.faixa-cta--cases{
  margin-top: 26px;
}

/* Detalhe do case (meta) */
.case-meta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Mobile */
@media (max-width: 900px){
  .cases-intro__miolo{
    grid-template-columns: 1fr;
  }
  .case-destaque{
    min-height: 320px;
  }
  .grade-cases{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PATCH MOBILE — CASES não sobrepor (grade-cases + cards)
   Cole no FINAL do estilos.css
   ========================================================= */

@media (max-width: 900px){

  /* 1) mata qualquer “carrossel”/flex herdado em grade-cases */
  .grade-cases{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;

    overflow: visible !important;
    scroll-snap-type: none !important;
    padding-right: 0 !important;
  }

  .grade-cases > *{
    min-width: 0 !important;
    flex: none !important;
    scroll-snap-align: unset !important;
  }

  /* 2) garante que o card não tenha position/transform herdado */
  .cartao--case{
    position: relative !important;
    transform: none !important;
    height: auto !important;
  }

  /* 3) imagem do card sempre “normal” (sem absolute/altura estranha) */
  .cartao--case .cartao__midia--case{
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .cartao--case .cartao__midia--case img{
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;

    position: static !important; /* mata qualquer absolute herdado */
  }

  /* 4) tipografia e layout interno do card no mobile */
  .cartao--case .cartao__conteudo{
    padding: 14px 14px 16px !important;
  }

  .cartao--case .cartao__cabecalho{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .cartao--case .cartao__titulo{
    font-size: 1.15rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  .badge-metrica{
    white-space: normal !important;
  }

  .cartao--case .cartao__rodape{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .cartao--case .botao--mini{
    width: 100% !important;
    text-align: center !important;
  }

  /* 5) destaque: deixa a foto aparecer mais */
  .case-destaque__midia img{
    opacity: .60 !important;
    transform: none !important;
    filter: none !important;
  }



  .case-destaque__thumb img{
    width: 100% !important;
    height: 170px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
}

/* Desktop: thumb do destaque escondida (só fundo) */
.case-destaque__thumb{ display:none; }

/* =========================================================
   FIX DEFINITIVO: CASES no mobile SEM carrossel/sem sobrepor
   Cole NO FINAL do estilos.css
   ========================================================= */
@media (max-width: 900px){

  .grade-cases{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: initial !important;
    grid-auto-columns: initial !important;

    overflow: visible !important;
    scroll-snap-type: none !important;
    mask-image: none !important;

    gap: 16px !important;
    padding: 0 !important;
  }

  .grade-cases > *{
    min-width: 0 !important;
    scroll-snap-align: unset !important;
  }
}

/* =========================================================
   MOBILE — Cases: foto sem corte + cards com altura consistente
   Cole NO FINAL do estilos.css
   ========================================================= */
@media (max-width: 900px){

  /* Card vira “coluna” firme */
  .cartao--case{
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  /* Frame da imagem: mesmo tamanho pra todos */
  .cartao--case .cartao__midia--case{
    border-radius: 18px !important;
    overflow: hidden !important;

    /* ✅ define um tamanho consistente */
    aspect-ratio: 16 / 9 !important;
    background: rgba(0,0,0,.18) !important;  /* disfarça barras */
    border: 1px solid rgba(255,255,255,.10) !important;
  }

  /* Imagem SEM cortar (tamanho original proporcional) */
  .cartao--case .cartao__midia--case img{
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;     /* ✅ não corta */
    object-position: center !important;

    display: block !important;
  }

  /* Conteúdo ocupa o restante e alinha o rodapé */
  .cartao--case .cartao__conteudo{
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
  }

  /* Rodapé sempre “colado” embaixo, igual em todos */
  .cartao--case .cartao__rodape{
    margin-top: auto !important;
  }
}


/* =========================================================
   PATCH — CARDS COM A MESMA ALTURA (mesmo com textos diferentes)
   Cole NO FINAL do estilos.css
   ========================================================= */

/* 1) Grades sempre esticam os itens */
.grade-beneficios,
.grade-servicos,
.grade-servicos--pagina,
.grade-cases,
.grade-informacoes,
.grade-ajuda{
  align-items: stretch !important;
}

/* 2) Cada item ocupa toda a altura da “linha” da grade */
.grade-beneficios > *,
.grade-servicos > *,
.grade-servicos--pagina > *,
.grade-cases > *,
.grade-informacoes > *,
.grade-ajuda > *{
  height: 100% !important;
}

/* 3) Card vira “coluna” e ocupa a altura inteira */
.grade-beneficios .cartao,
.grade-servicos .cartao,
.grade-servicos--pagina .cartao,
.grade-cases .cartao,
.grade-informacoes .cartao,
.grade-ajuda .cartao{
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 4) Conteúdo cresce e empurra ações/rodapé para baixo */
.grade-beneficios .cartao__conteudo,
.grade-servicos .cartao__conteudo,
.grade-servicos--pagina .cartao__conteudo,
.grade-cases .cartao__conteudo{
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Se tiver ações, fica sempre no “fundo” do card */
.cartao__acoes,
.cartao__rodape{
  margin-top: auto !important;
}

/* 5) No mobile-carrossel: garante mesma altura visual também */
@media (max-width: 720px){
  .grade-beneficios,
  .grade-servicos,
  .grade-servicos--pagina,
  .grade-cases{
    align-items: stretch !important;
  }
}

/* =========================================================
   PATCH — pills menores (sem quebrar / sem ficar esquisito)
   Cole NO FINAL do estilos.css
   ========================================================= */

/* chips/pills menores e mais “compactos” */
.case-pill,
.tag-case{
  font-size: 0.78rem !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;

  white-space: nowrap !important;      /* 1 linha */
  overflow: hidden !important;
  text-overflow: ellipsis !important;  /* mantém “...” se precisar */
  max-width: 100% !important;
}

/* o “benefício”/pill de destaque (o que aparece grande) */
.case-destaque__meta .case-pill{
  font-size: 0.80rem !important;
  padding: 7px 12px !important;
}

/* no mobile fica ainda mais compacto */
@media (max-width: 720px){
  .case-pill,
  .tag-case{
    font-size: 0.74rem !important;
    padding: 6px 9px !important;
  }
}
/* =========================================================
   PATCH (PC) — pill “benefícios” menor (sem ficar esquisito)
   Cole NO FINAL do estilos.css
   ========================================================= */
@media (min-width: 901px){

  /* pills/pílulas menores e mais compactas no desktop */
  .case-pill,
  .tag-case{
    font-size: 0.78rem !important;
    padding: 6px 10px !important;

    white-space: nowrap !important;      /* 1 linha */
    overflow: hidden !important;
    text-overflow: ellipsis !important;  /* “...” se passar */
    max-width: 100% !important;
  }

  /* a linha onde ficam os pills (benefícios) pode encolher sem empurrar */
  .case-destaque__meta,
  .cartao--case .cartao__tags{
    gap: 8px !important;
    min-width: 0 !important;
  }
}
.case-hero__midia{
  width: 100%;
  height: 100%;
  min-height: 320px; /* ajusta se quiser */
  border-radius: 24px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(255,255,255,0.04); /* fallback */
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}


/* ===== Detalhe do case: bege premium só no banner ===== */
.banner-interno--detalhe-case{
  background: var(--cor-areia); /* #face8b */
  color: #061738; /* texto escuro pra contrastar */
}

.banner-interno--detalhe-case .caminho,
.banner-interno--detalhe-case .caminho a,
.banner-interno--detalhe-case .titulo-pagina,
.banner-interno--detalhe-case .texto-secao{
  color: #061738;
}

/* pills e métrica com “cara premium” em cima do bege */
.banner-interno--detalhe-case .case-pill{
  border-color: rgba(6, 23, 56, .25);
  color: #061738;
  background: rgba(255, 255, 255, .25);
}

.banner-interno--detalhe-case .badge-metrica{
  background: #061738;
  color: #face8b;
}

/* =========================
   CONTATO (layout premium)
   Autor: Pedro Max
   ========================= */

.contato-hero{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: center;
}

.contato-hero__acoes{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.contato-hero__info{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.contato-info{
  border: 1px solid rgba(233, 217, 201, .18);
}

.contato-nota{
  border-radius: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(233, 217, 201, .16);
  background: rgba(6, 23, 56, .30);
}

.contato-hero__midia img{
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(233, 217, 201, .18);
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
}

/* bloco topo da seção */
.contato-topo-sessao{
  max-width: 820px;
  margin-bottom: 18px;
}

/* =========================
   GALERIA
   ========================= */

.sessao--contato-galeria{
  padding-top: 36px;
}

.contato-galeria{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  margin-top: 18px;
}

.contato-foto{
  grid-column: span 4;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(233, 217, 201, .18);
  background: rgba(6, 23, 56, .25);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
}

.contato-foto--wide{
  grid-column: span 12;
}

.contato-foto img{
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.contato-foto:hover img{
  transform: scale(1.04);
}

/* CTA final mais “corporativo” */
.faixa-cta--contato{
  margin-top: 22px;
}

/* =========================
   RESPONSIVO
   ========================= */

@media (max-width: 980px){
  .contato-hero{
    grid-template-columns: 1fr;
  }

  .contato-hero__midia img{
    max-height: 340px;
  }

  .contato-foto{
    grid-column: span 6;
  }

  .contato-foto img{
    height: 230px;
  }
}

@media (max-width: 560px){
  .contato-hero__acoes{
    flex-direction: column;
  }

  .contato-foto{
    grid-column: span 12;
  }

  .contato-foto img{
    height: 220px;
  }
}





/* =========================
   CONTATO (ajuste final com vars do :root)
   Autor: Pedro Max
   ========================= */

/* Garante o fundo correto do banner no contato (sem “estranheza”) */
.banner-interno--contato{
  background: radial-gradient(1200px 520px at 12% 22%, rgba(14, 65, 111, .40), transparent 58%),
              radial-gradient(900px 520px at 88% 20%, rgba(250, 206, 139, .10), transparent 60%),
              var(--cor-primaria);
  border-bottom: 1px solid rgba(250, 206, 139, .14);
}

/* Layout do hero */
.contato-hero{
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 26px;
  align-items: center;
  padding-top: 18px;
  padding-bottom: 22px;
}

/* Coluna esquerda vira um “cartão areia” premium */
.banner-interno--contato .banner-interno__texto{
  background: linear-gradient(180deg, rgba(250, 206, 139, .92), rgba(250, 206, 139, .86));
  color: var(--cor-primaria);
  border-radius: 22px;
  padding: 26px 26px 20px;
  border: 1px solid rgba(6, 23, 56, .10);
  box-shadow: 0 22px 55px rgba(0,0,0,.22);
  position: relative;
  overflow: hidden;
}

/* brilho discreto no canto (premium) */
.banner-interno--contato .banner-interno__texto::before{
  content:"";
  position:absolute;
  inset:-40px -80px auto auto;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 65%);
  transform: rotate(12deg);
  pointer-events:none;
}

/* Breadcrumb em areia com link “institucional” */
.banner-interno--contato .caminho,
.banner-interno--contato .caminho a{
  color: rgba(6, 23, 56, .78);
}
.banner-interno--contato .caminho a{
  text-decoration-color: rgba(6, 23, 56, .25);
}
.banner-interno--contato .caminho a:hover{
  text-decoration-color: rgba(6, 23, 56, .50);
}

/* Texto do hero com contraste bom */
.banner-interno--contato .titulo-pagina{
  color: var(--cor-primaria);
}
.banner-interno--contato .texto-secao{
  color: rgba(6, 23, 56, .80);
}

/* Botões do hero: destaque com azul + areia */
.contato-hero__acoes{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* Ajuste fino nos botões só dentro do contato */
.banner-interno--contato .botao--destaque{
  background: var(--cor-primaria);
  color: var(--cor-areia);
  border: 1px solid rgba(6, 23, 56, .12);
  box-shadow: 0 14px 30px rgba(6, 23, 56, .20);
}
.banner-interno--contato .botao--destaque:hover{
  filter: brightness(1.05);
}

.banner-interno--contato .botao:not(.botao--destaque){
  background: rgba(255,255,255,.28);
  color: var(--cor-primaria);
  border: 1px solid rgba(6, 23, 56, .14);
  backdrop-filter: blur(6px);
}
.banner-interno--contato .botao:not(.botao--destaque):hover{
  background: rgba(255,255,255,.36);
}

/* Blocos de info dentro do cartão */
.contato-hero__info{
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.contato-info{
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(6, 23, 56, .12);
  border-radius: 16px;
}
.contato-info .cartao__texto{
  color: rgba(6, 23, 56, .88);
}

/* Nota inferior (sem ficar “cinza estranho”) */
.contato-nota{
  border-radius: 16px;
  padding: 14px 14px;
  border: 1px solid rgba(6, 23, 56, .12);
  background: rgba(255,255,255,.18);
}
.contato-nota .texto-secao{
  color: rgba(6, 23, 56, .82);
}

/* Coluna direita: imagem com moldura premium */
.contato-hero__midia{
  position: relative;
}

.contato-hero__midia::before{
  content:"";
  position:absolute;
  inset: -12px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(250,206,139,.22), rgba(14,65,111,.25));
  filter: blur(0px);
  z-index: 0;
}

.contato-hero__midia img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(250, 206, 139, .22);
  box-shadow: 0 22px 55px rgba(0,0,0,.26);
}

/* =========================
   GALERIA (com cara premium)
   ========================= */

.sessao--contato-galeria{
  padding-top: 34px;
}

.contato-topo-sessao{
  max-width: 860px;
}

.contato-galeria{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  margin-top: 16px;
}

/* Cartão da foto */
.contato-foto{
  grid-column: span 4;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(250, 206, 139, .14);
  background: linear-gradient(180deg, rgba(14, 65, 111, .18), rgba(6, 23, 56, .28));
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
}

.contato-foto--wide{
  grid-column: span 12;
}

.contato-foto img{
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  transition: transform .35s ease, filter .35s ease;
  filter: saturate(1.02) contrast(1.02);
}

.contato-foto:hover img{
  transform: scale(1.04);
}

/* CTA final encaixada com paleta */
.faixa-cta--contato{
  margin-top: 18px;
  border: 1px solid rgba(250, 206, 139, .14);
  background: linear-gradient(180deg, rgba(14, 65, 111, .14), rgba(6, 23, 56, .34));
}

/* =========================
   RESPONSIVO
   ========================= */

@media (max-width: 980px){
  .contato-hero{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* No tablet/mobile: imagem primeiro, cartão depois (fica mais bonito) */
  .banner-interno--contato .banner-interno__foto{
    order: -1;
  }

  .contato-hero__midia img{
    max-height: 320px;
  }

  .contato-foto{
    grid-column: span 6;
  }

  .contato-foto img{
    height: 230px;
  }
}

@media (max-width: 560px){
  .banner-interno--contato .banner-interno__texto{
    padding: 20px 16px 16px;
    border-radius: 18px;
  }

  .contato-hero__acoes{
    flex-direction: column;
  }

  .contato-hero__midia::before{
    inset: -8px;
    border-radius: 22px;
  }

  .contato-hero__midia img{
    border-radius: 18px;
    max-height: 260px;
  }

  .contato-foto{
    grid-column: span 12;
  }

  .contato-foto img{
    height: 220px;
  }
}




/* =========================
   CONTATO — FOTO RECORTADA (SEM FUNDO) À DIREITA
   Autor: Pedro Max
   ========================= */

.contato-hero{
  align-items: center;
}

/* coluna da direita */
.contato-hero__midia--recorte{
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: clamp(320px, 36vw, 520px);
  overflow: visible;
}

/* brilho premium atrás */
.contato-hero__midia--recorte::before{
  content:"";
  position:absolute;
  inset: -10% -20% -20% -20%;
  background:
    radial-gradient(500px 360px at 55% 40%, rgba(250,206,139,0.20), transparent 60%),
    radial-gradient(520px 420px at 45% 70%, rgba(14,65,111,0.35), transparent 70%);
  filter: blur(1px);
  pointer-events: none;
  opacity: .9;
}

/* a imagem (png sem fundo) */
.contato-hero__recorte{
  width: min(520px, 44vw);
  height: auto;
  max-height: 560px;
  object-fit: contain;        /* ✅ não corta */
  object-position: bottom center;
  display:block;
  filter: drop-shadow(0 26px 44px rgba(0,0,0,0.40));
  transform: translateY(8px);
}

/* RESPONSIVO */
@media (max-width: 980px){
  .contato-hero__recorte{
    width: min(460px, 56vw);
    max-height: 520px;
  }
}

@media (max-width: 860px){
  /* empilha no mobile e centraliza */
  .contato-hero{
    grid-template-columns: 1fr;
  }

  .contato-hero__midia--recorte{
    order: -1;                 /* foto vem primeiro (fica “uau”) */
    min-height: 280px;
    margin-bottom: 16px;
  }

  .contato-hero__recorte{
    width: min(360px, 86vw);
    max-height: 420px;
    transform: translateY(0);
  }
}

/* =========================
   CONTATO — FOTO RECORTADA (SEM FUNDO) SEM CORTAR
   (override no final do CSS)
   ========================= */

/* garante que NADA vai cortar */
.banner-interno--contato .contato-hero__midia--recorte{
  overflow: visible !important;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: clamp(420px, 42vw, 640px); /* mais alto = não corta */
}

/* mata a regra global do banner que corta (height + cover) */
.banner-interno--contato .contato-hero__midia--recorte .contato-hero__recorte{
  height: auto !important;
  width: min(560px, 46vw);
  max-height: none !important;
  object-fit: contain !important;     /* ✅ não corta */
  object-position: bottom center !important;
  display: block;
  filter: drop-shadow(0 26px 44px rgba(0,0,0,0.40));
}

/* se você estiver usando “moldura/card” com overflow hidden em outro wrapper,
   isso impede corte também */
.banner-interno--contato .banner-interno__foto{
  overflow: visible !important;
}

/* MOBILE */
@media (max-width: 860px){
  .banner-interno--contato .contato-hero{
    grid-template-columns: 1fr;
  }

  .banner-interno--contato .contato-hero__midia--recorte{
    order: -1;
    min-height: 320px;
    margin-bottom: 16px;
  }

  .banner-interno--contato .contato-hero__midia--recorte .contato-hero__recorte{
    width: min(380px, 92vw);
    object-position: bottom center !important;
  }
}



/* =========================
   HERO (VÍDEO) — REMOVER “MOLDURA DUPLA” / BLOCO VAZIO
   Cole no FINAL do estilos.css
   ========================= */

/* 1) Se o seu container da mídia já é a moldura,
      garanta que NÃO exista “segunda moldura” interna */
.banner-interno__foto .cartao,
.banner-interno__foto .moldura,
.banner-interno__foto .midia,
.banner-interno__foto .video,
.banner-interno__foto .video-wrapper,
.banner-interno__foto .hero-video,
.banner-interno__foto .hero__video {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 2) Se a moldura extra estiver vindo de pseudo-elemento */
.banner-interno__foto::before,
.banner-interno__foto::after,
.banner-interno__foto .video-wrapper::before,
.banner-interno__foto .video-wrapper::after,
.banner-interno__foto .midia::before,
.banner-interno__foto .midia::after {
  content: none !important;
  display: none !important;
}

/* 3) Evita o “retângulo grande vazio” (altura sobrando) */
.banner-interno__foto{
  min-height: auto !important;
  height: auto !important;
}

/* 4) Deixa o vídeo com tamanho fixo bonito e sem sobrar área */
.banner-interno__foto video,
.banner-interno__foto iframe{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; 
  border-radius: 18px;
}
.midia-hero__som--ativo{
  filter: brightness(1.02);
  transform: translateY(-1px);
}

/* =========================================
   FIX: Moldura duplicada atrás do vídeo (Hero)
   Autor: Pedro Max
   ========================================= */

/* 1) Remove a moldura/caixa do container externo */
.hero__foto{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Se existir pseudo-elemento criando “placa” atrás */
.hero__foto::before,
.hero__foto::after{
  content: none !important;
  display: none !important;
}

/* 2) Mantém a moldura apenas no bloco do vídeo */
.midia-hero{
  position: relative;
  overflow: hidden;
  border-radius: 26px;           /* ajuste fino */
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

/* Se tiver pseudo-elemento duplicando moldura no midia-hero */
.midia-hero::before,
.midia-hero::after{
  /* Se você usa brilho/efeito aqui, apague este bloco.
     Se não usa, deixe assim pra garantir que não duplique. */
  content: none;
}

/* 3) Vídeo ocupa certinho sem criar outra “borda” */
.midia-hero__video{
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  outline: 0;
}







/* =========================
   SOBRE (hero) — foto esquerda maior + bordas arredondadas
   Cole no FINAL do estilos.css
   ========================= */

/* dá mais “peso” pra coluna da foto (desktop) */
.hero__miolo{
  grid-template-columns: 1.15fr 1.85fr; /* foto maior */
  gap: 44px;
}

/* container da foto */
.hero__foto{
  width: 100%;
  max-width: 620px;        /* aumenta */
  aspect-ratio: 4 / 3;     /* deixa mais “retangular” e imponente */
  border-radius: 28px;     /* borda arredondada */
  overflow: hidden;
  margin: 0;               /* garante que não fica pequeno por margin auto */
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 65px rgba(0,0,0,.35);
}

/* imagem em si */
.hero__foto img,
.hero__foto-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* mobile: foto grande, centralizada, sem “quadradão” */
@media (max-width: 860px){
  .hero__miolo{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .hero__foto{
    max-width: 92vw;
    aspect-ratio: 1 / 1;   /* no celular fica mais “premium” */
    border-radius: 24px;
    margin-inline: auto;
  }
}


 
/* =========================================
   SOBRE (desktop) — Foto esquerda em formato FEED (1:1)
   Cole no FINAL do estilos.css
   ========================================= */

@media (min-width: 721px){

  /* Caixa da foto (quadrada, grande, premium) */
  .hero__foto{
    width: clamp(380px, 40vw, 560px);
    max-width: none;
    aspect-ratio: 1 / 1;         /* ✅ formato feed */
    border-radius: 28px;         /* ✅ borda arredondada */
    overflow: hidden;

    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    box-shadow: 0 22px 60px rgba(0,0,0,0.28);

    justify-self: center;
    align-self: center;
  }

  /* Imagem preenche o quadrado sem distorcer (corta como feed) */
  .hero__foto .hero__foto-img,
  .hero__foto > img{
    width: 100% !important;
    height: 100% !important;
    display: block;

    object-fit: cover;          /* ✅ recorte estilo feed */
    object-position: 50% 35%;   /* ajuste fino do enquadramento */
  }
}
/* =========================================
   SOBRE — FOTO ESQUERDA (DESKTOP) estilo FEED
   ========================================= */
@media (min-width: 721px){
  .hero__foto--sobre{
    width: min(560px, 42vw);      /* tamanho grande no PC */
    aspect-ratio: 1 / 1;          /* formato feed (quadrado) */
    height: auto;                 /* mata o height: clamp do frame de vídeo */
    border-radius: 26px;          /* borda arredondada premium */
    overflow: hidden;
  }

  .hero__foto--sobre img{
    width: 100%;
    height: 100%;
    object-fit: cover;            /* preenche o quadrado */
    object-position: center;
    border-radius: inherit;
    display: block;
  }
}
/* SOBRE — força borda arredondada na foto (DESKTOP) */
@media (min-width: 721px){
  .hero__foto--sobre{
    border-radius: 26px !important;
    overflow: hidden !important;
  }

  .hero__foto--sobre img{
    border-radius: 26px !important;
    overflow: hidden !important;
    display: block;
  }
}

/* SOBRE — foto com borda arredondada (MOBILE + DESKTOP) */

/* MOBILE */
@media (max-width: 720px){
  .hero__foto--sobre{
    width: min(92vw, 420px);
    margin: 0 auto 14px;
    border-radius: 22px;
    overflow: hidden;
  }

  .hero__foto--sobre img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 22px;
  }
}

/* DESKTOP (reforço) */
@media (min-width: 721px){
  .hero__foto--sobre{
    border-radius: 26px !important;
    overflow: hidden !important;
  }

  .hero__foto--sobre img{
    border-radius: 26px !important;
    display: block;
  }
}

/* =========================
   FIX: Botão de som não sumir no MOBILE
   (o botão estava no "rodapé" da moldura e era cortado)
   ========================= */

.midia-hero{ position: relative; }

/* Evita que o botão seja cortado por containers */
@media (max-width: 720px){
  .hero__foto,
  .midia-hero{
    overflow: visible !important; /* se algum lugar estiver cortando */
  }

  /* No mobile: coloca o botão no TOPO (não depende do "pé" da moldura) */
  .midia-hero__som{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 12px;         /* <- aqui muda o jogo */
    right: 12px;
    left: auto;
    bottom: auto;

    z-index: 20;
    pointer-events: auto;

    padding: 10px 12px;
    border-radius: 999px;

    background: rgba(6, 23, 56, 0.82);
    color: var(--cor-destaque);
    border: 1px solid rgba(250, 206, 139, 0.35);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    font-size: 13px;
    line-height: 1;
    min-height: 42px;
  }

  /* Garante que o vídeo não fique "por cima" do botão */
  .midia-hero__video{
    position: relative;
    z-index: 1;
  }
}

/* =========================
   MOBILE: remove a "borda" sobrando embaixo do vídeo
   ========================= */
@media (max-width: 720px){

  /* a moldura/box do vídeo não pode ter altura fixa */
  .midia-hero{
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important; /* se você tinha colocado espaço pro botão */
  }

  /* se existir um container maior por trás (moldura grande), zera a altura */
  .hero__foto,
  .hero__foto .midia-hero{
    margin-bottom: 0 !important;
  }

  /* deixa o vídeo "mandar" na altura do box */
  .midia-hero__video{
    display: block;
    width: 100%;
    height: auto !important;
    max-height: 68vh;          /* controla pra não ficar gigante */
    border-radius: 20px;       /* opcional: mantém premium */
    object-fit: cover;
  }
}
@media (max-width: 720px){
  .hero__foto::before,
  .hero__foto::after,
  .midia-hero::before,
  .midia-hero::after{
    display: none !important;
  }
}

/* =========================
   MOBILE: aproxima vídeo do texto abaixo
   ========================= */
@media (max-width: 720px){

  /* tira o "respiro" extra do bloco do vídeo */
  .hero__foto{
    margin-bottom: 14px !important; /* ajusta aqui se quiser mais/menos */
    padding-bottom: 0 !important;
  }

  /* se a moldura do vídeo também tiver margem, zera */
  .midia-hero{
    margin-bottom: 0 !important;
  }

  /* e reduz o topo da coluna de texto logo abaixo (se tiver) */
  .hero__texto,
  .hero__conteudo{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* caso o espaçamento esteja vindo da própria seção/hero */
  .hero{
    padding-bottom: 18px !important; /* diminui o "vão" geral */
  }
}
/* =========================
   MOBILE: aproxima vídeo do texto (sessao--resumo)
   ========================= */
@media (max-width: 720px){

  /* a seção toda estava com "respiro" demais */
  .sessao--resumo{
    padding-top: 22px;   /* ajuste fino */
    padding-bottom: 18px;
  }

  /* aproxima vídeo do conteúdo (título "Segurança jurídica...") */
  .sessao--resumo .hero__foto{
    margin: 0 0 14px 0 !important;  /* diminui a distância */
    padding: 0 !important;
  }

  /* garante que a moldura do vídeo não cria espaço extra */
  .sessao--resumo .midia-hero{
    margin: 0 !important;
  }

  /* se o container estiver com gap alto (grid/flex), força um gap menor */
  .sessao--resumo .resumo__miolo{
    gap: 1px !important;
  }

  /* evita margem extra no topo do bloco de texto */
  .sessao--resumo .resumo__conteudo{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* tira margem padrão de título/texto caso o browser esteja somando */
  .sessao--resumo .resumo__rotulo{
    margin-top: 0 !important;
  }
  .sessao--resumo .resumo__titulo{
    margin-top: 6px !important;
  }
}



/* =========================
   PERFORMANCE (MOBILE) — remove blurs pesados que causam lag no scroll
   ========================= */
@media (max-width: 720px){

  /* 1) Cabeçalho sticky: blur é pesado no celular */
  .cabecalho{
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* mantém “premium”, só sem blur */
    background: rgba(6, 23, 56, .96);
  }

  /* 2) Card do “Quem sou eu”: blur grande causa engasgo */
  .sobre-capa__conteudo{
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255,255,255, .06);
  }

  /* 3) Filters em imagens (drop-shadow) também pesam no scroll */
  .sobre-capa__img,
  .marca__logo{
    filter: none;
  }

  /* 4) Se você tiver algum “brilho/blur” em pseudo-elemento do card, desliga no mobile */
  .sobre-capa__midia::before,
  .cartao--comercial::before{
    filter: none;
  }

  /* 5) Opcional: se ainda sentir micro-travadinhas, corta animações de entrada no mobile */
  body,
  .cabecalho,
  .hero,
  .sessao,
  .rodape{
    animation: none !important;
  }
}
/*
/* =========================
   AJUSTE DE CONTRASTE (MOBILE) — fundo menos claro sem blur
   ========================= */
@media (max-width: 720px){

  /* Header: deixa mais fechado (mais escuro) */
  .cabecalho{
    background: rgba(6, 23, 56, .985);
  }

  /* Card do "Quem sou eu": escurece o glass (sem blur) 
  .sobre-capa__conteudo{
    background: rgba(6, 23, 56, .55);
    border: 1px solid rgba(250, 206, 139, .18); /* mantém premium 
  }

  /* Texto um pouco mais “limpo” em cima do fundo escuro 
  .sobre-capa__texto,
  .sobre-capa__frase{
    color: rgba(255,255,255,.88);
  }

  /* Se o banner/hero tiver fundo claro por algum gradiente, força um overlay mais escuro 
  .hero{
    background: radial-gradient(900px 500px at 20% 10%, rgba(14,65,111,.22), transparent 60%),
                linear-gradient(180deg, rgba(6,23,56,.92), rgba(6,23,56,.98));
  }
  */
}









/* =========================================
   PATCH PERFORMANCE (MOBILE) — reduz “lag” no scroll
   Mantém estética, corta blur/glow pesado
   Cole no FINAL do estilos.css
   ========================================= */

@media (max-width: 720px){

  /* 1) Blur do header é bonito, mas pesa no scroll */
  .cabecalho{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* mantém a aparência “premium” com fundo sólido */
    background: rgba(6, 23, 56, .96) !important;
  }

  /* 2) Card comercial: o que mais pesa é backdrop-filter + glow com blur */
  .cartao--comercial{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    /* mantém o “vidro”, mas sem blur real */
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.045)) !important;

    /* sombra mais leve (bem mais suave de renderizar) */
    box-shadow: 0 14px 38px rgba(0,0,0,.28) !important;

    /* ajuda o navegador a isolar pintura */
    contain: paint;
  }

  /* 3) Desliga a aura externa (glow) que usa filter: blur() */
  .cartao--comercial::after{
    content: none !important;
  }

  /* 4) Mantém a borda “viva”, mas mais leve */
  .cartao--comercial::before{
    opacity: .65 !important;
  }

  /* 5) Elementos com sombras grandes: reduz custo */
  .comercial__chamada{
    box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
  }

  /* 6) Justify em blocos longos pode pesar no mobile (mantém cara boa e melhora fluidez) */
  .texto-secao,
  .comercial__texto{
    text-align: left !important;
  }
}

/* Opcional (se ainda sentir “engasgos”):
   desliga animações de entrada no mobile (é sutil e melhora a rolagem em aparelhos fracos) */
@media (max-width: 720px) and (prefers-reduced-motion: no-preference){
  body,
  .cabecalho,
  .hero,
  .banner-interno,
  .sessao,
  .rodape,
  .titulo-pagina,
  .titulo-secao,
  .texto-secao,
  .botao,
  .cartao,
  .faixa-cta{
    animation: none !important;
  }
}







body{
  font-family: var(--fonte-texto);
}

h1,h2,h3,h4,h5,h6,
.titulo-pagina,
.titulo-secao,
.cartao__titulo{
  font-family: var(--fonte-titulo);
}











/*pode apagar aqui para restarar videos na horizonttal*/







/* =========================================================
   CASE (DETALHE) — AJUSTE MOBILE (textos + listas)
   Corrige "buracos" do justify e organiza blocos no celular
   ========================================================= */

@media (max-width: 820px){

  /* Empilha as colunas do detalhe do case (se ainda não estiver empilhando) */
  .bloco-detalhe{
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* Dá respiro e "cara de card" em cada coluna (opcional, mas fica mais premium) */
  .bloco-detalhe__coluna{
    padding: 16px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
  }

  /* Títulos mais estáveis no mobile */
  .bloco-detalhe .titulo-secao{
    margin: 18px 0 10px;
    line-height: 1.15;
  }
  .bloco-detalhe .titulo-secao:first-child{
    margin-top: 0;
  }

  /* ✅ O principal: NÃO usar justify no mobile (evita espaçamento esquisito) */
  .bloco-detalhe .texto-secao,
  .bloco-detalhe p{
    text-align: left;
    line-height: 1.7;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-break: normal;
  }

  /* Como os itens entram via JS nesses containers, eu forço o estilo aqui */
  #case-o-que-foi-feito,
  #case-resultados,
  #case-ganhos{
    margin-top: 10px;
  }

  #case-o-que-foi-feito ul,
  #case-resultados ul,
  #case-ganhos ul{
    margin: 12px 0 0;
    padding-left: 18px;
  }

  #case-o-que-foi-feito li,
  #case-resultados li,
  #case-ganhos li{
    margin: 10px 0;
    text-align: left;      /* evita “buracos” */
    line-height: 1.65;
  }

  /* Se o JS estiver inserindo <p> ao invés de <ul>, melhora igual */
  #case-o-que-foi-feito p,
  #case-resultados p,
  #case-ganhos p{
    margin: 10px 0 0;
    text-align: left;
    line-height: 1.7;
  }
}

/* =========================
   VÍDEO (sessão resumo) — sem moldura + responsivo
   Autor: Pedro Max
   ========================= */

/* 1) Mata qualquer “moldura/card” que esteja envolvendo o vídeo */
.sessao--resumo .hero__foto,
.sessao--resumo .midia-hero{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 2) O container vira só o “palco” do vídeo (sem sombra/borda) */
.sessao--resumo .midia-hero{
  position: relative !important;
  width: min(520px, 100%) !important;   /* DESKTOP: grande e bonito */
  aspect-ratio: 9 / 16 !important;      /* formato instagram */
  margin: 0 auto !important;
  border-radius: 0 !important;          /* SEM borda arredondada (cliente pediu sem borda) */
  overflow: hidden !important;
}

/* 3) Vídeo ocupa o container */
.sessao--resumo .midia-hero__video{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;         /* DESKTOP: estilo instagram (corta um pouco, fica “premium”) */
}

/* 4) Botão de som: força tamanho pequeno e overlay */
.sessao--resumo .midia-hero__som{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 10 !important;

  /* FORÇA tamanho (pra não herdar regra global de botão) */
  font-size: 13px !important;
  line-height: 1 !important;
  padding: 10px 12px !important;
  border-radius: 999px !important;

  color: #fff !important;
  background: rgba(6, 23, 56, .70) !important;
  border: 1px solid rgba(233, 217, 201, .35) !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  width: auto !important;
  max-width: 180px !important;
  white-space: nowrap !important;
}

/* 5) Quando “ativo” (som ligado) — mantém padrão premium */
.sessao--resumo .midia-hero__som--ativo{
  color: #061738 !important;
  background: rgba(233, 217, 201, .92) !important;
  border-color: rgba(233, 217, 201, .72) !important;
}

/* =========================
   MOBILE: caber ela inteira na tela (sem cortar) + não ficar gigante
   ========================= */
@media (max-width: 680px){
  /* Limita a altura do vídeo pra não ficar enorme */
  .sessao--resumo .midia-hero{
    width: min(360px, 100%) !important;
    max-height: 62vh !important;      /* <<< aqui resolve “ficou grande demais” */
    height: auto !important;
    border-radius: 0 !important;      /* continua sem borda */
  }

  /* No mobile: mostra o corpo todo (sem cortar) */
  .sessao--resumo .midia-hero__video{
    object-fit: contain !important;   /* <<< caber ela inteira */
    background: rgba(6, 23, 56, .35) !important; /* preenche laterais sem “moldura” */
  }

  /* Botão menor ainda no celular */
  .sessao--resumo .midia-hero__som{
    top: 10px !important;
    right: 10px !important;
    font-size: 12px !important;
    padding: 9px 10px !important;
    max-width: 160px !important;
  }
}
/* =========================
   VÍDEO HERO (sem moldura + estilo instagram)
   (cole no FINAL do estilos.css)
   ========================= */

/* 1) Remove a moldura SOMENTE quando for vídeo */
.hero__foto.hero__foto--video{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: hidden;
  border-radius: 22px; /* arredondado premium (não é borda) */
}

/* 2) Container do vídeo */
.hero__foto--video .midia-hero{
  position: relative;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: transparent;
}

/* 3) Vídeo responsivo */
.hero__foto--video .midia-hero__video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* desktop: preenche bonito */
}

/* 4) Desktop: “estilo instagram” (9:16) e grande */
@media (min-width: 900px){
  .hero__foto.hero__foto--video{
    width: min(520px, 100%);
    margin-inline: auto;
  }

  .hero__foto--video .midia-hero{
    aspect-ratio: 9 / 16;
    max-height: 560px;
  }
}

/* 5) Mobile: caber ela inteira (sem ficar gigante) */
@media (max-width: 899px){
  .hero__foto.hero__foto--video{
    width: 100%;
    margin-inline: 0;
    border-radius: 20px;
  }

  .hero__foto--video .midia-hero{
    aspect-ratio: 9 / 16;
    max-height: 78vh;        /* NÃO fica gigante */
    border-radius: 20px;
    background: rgba(6, 23, 56, 0.35); /* se sobrar “faixa” com contain */
  }

  .hero__foto--video .midia-hero__video{
    object-fit: contain; /* mostra ela inteira */
    background: transparent;
  }
}

/* 6) Botão de som: pequeno, sempre visível, sem “virar gigante” */
.hero__foto--video .midia-hero__som{
  position: absolute;
  top: 14px;
  right: 14px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  width: auto;
  max-width: 190px;

  padding: 10px 14px;
  font-size: 14px;
  line-height: 1;

  border-radius: 999px;
  border: 1px solid rgba(233,217,201,.22);
  background: rgba(6,23,56,.70);
  color: #E9D9C9;

  cursor: pointer;
  z-index: 5;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 899px){
  .hero__foto--video .midia-hero__som{
    top: 10px;
    right: 10px;
    padding: 9px 12px;
    font-size: 13px;
    max-width: 170px;
  }
}

/* feedback quando estiver com som */
.hero__foto--video .midia-hero__som.midia-hero__som--ativo{
  background: rgba(233,217,201,.92);
  color: #061738;
  border-color: rgba(233,217,201,.35);
}

/* =========================================
   VÍDEO (PC + MOBILE) — FRAME PREMIUM
   Cola no FINAL do estilos.css
   ========================================= */

/* GARANTE que o container do vídeo seja o “frame” */
.hero__foto.hero__foto--video,
.hero__foto.hero__foto--video .midia-hero{
  border-radius: 26px;
  overflow: hidden;
}

/* Borda premium (leve) e sem sombra pesada */
.hero__foto.hero__foto--video{
  border: 1px solid rgba(233,217,201,.16);
  box-shadow: none !important;
  background: rgba(6,23,56,.18); /* só pra dar profundidade */
}

/* Desktop: deixa com cara de Reels (9:16) e centraliza */
@media (min-width: 900px){
  .hero__foto.hero__foto--video{
    width: min(520px, 100%);
    margin-inline: auto;
  }

  .hero__foto.hero__foto--video .midia-hero{
    aspect-ratio: 9 / 16;
    max-height: 560px;
    background: rgba(6,23,56,.25);
  }

  .hero__foto.hero__foto--video .midia-hero__video{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
}

/* Mobile: mantém ela inteira (contain) e não deixa gigante */
@media (max-width: 899px){
  .hero__foto.hero__foto--video{
    border-radius: 22px;
  }

  .hero__foto.hero__foto--video .midia-hero{
    aspect-ratio: 9 / 16;
    max-height: 78vh;
    background: rgba(6,23,56,.30);
    border-radius: 22px;
  }

  .hero__foto.hero__foto--video .midia-hero__video{
    object-fit: contain;
    background: transparent;
  }
}

/* =========================================
   BOTÃO SOM — corrigir “oval gigante” no PC
   (zera qualquer regra herdada de botão do site)
   ========================================= */

.hero__foto--video .midia-hero__som{
  position: absolute !important;
  top: 14px;
  right: 14px;
  left: auto !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: auto !important;
  min-width: 0 !important;
  max-width: 190px !important;

  padding: 10px 14px !important;
  font-size: 14px !important;
  line-height: 1 !important;

  border-radius: 999px !important;
  border: 1px solid rgba(233,217,201,.22) !important;

  background: rgba(6,23,56,.72) !important;
  color: #E9D9C9 !important;

  box-shadow: none !important;
  transform: none !important;
  z-index: 6 !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Se teu CSS geral cria “fundo” via pseudo-elemento, mata aqui */
.hero__foto--video .midia-hero__som::before,
.hero__foto--video .midia-hero__som::after{
  content: none !important;
}

/* Mobile: botão um pouco menor */
@media (max-width: 899px){
  .hero__foto--video .midia-hero__som{
    top: 10px;
    right: 10px;
    padding: 9px 12px !important;
    font-size: 13px !important;
    max-width: 170px !important;
  }
}

/* Estado ativo (som ligado) */
.hero__foto--video .midia-hero__som.midia-hero__som--ativo{
  background: rgba(233,217,201,.92) !important;
  color: #061738 !important;
  border-color: rgba(233,217,201,.35) !important;
}

/* =========================================
   VÍDEO (estilo Instagram) + BOTÃO DE SOM
   Cole no FINAL do estilos.css
   ========================================= */

.midia-hero{
  position: relative;
  width: 100%;
  max-width: 720px;          /* controla tamanho no desktop */
  margin: 0 auto;
  border-radius: 22px;        /* borda arredondada */
  overflow: hidden;           /* corta o vídeo dentro da borda */
  background: #061738;        /* fundo caso tenha “barras” */
  border: 0 !important;       /* remove bordas/molduras antigas */
  box-shadow: none !important;/* remove sombra/moldura antiga */
}

/* Desktop: vídeo “wide” */
.midia-hero__video{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;      /* formato bonito no PC */
  height: auto;
  object-fit: cover;
  border-radius: inherit;
}

/* Botão do som: “reseta” qualquer estilo gigante (tipo .botao) */
.midia-hero__som,
.js-toggle-som{
  all: unset;                 /* remove estilos herdados que criam a “oval gigante” */
  box-sizing: border-box;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 12px;
  border-radius: 999px;

  font: 600 13px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #fff;
  cursor: pointer;

  background: rgba(6, 23, 56, 0.72);
  border: 1px solid rgba(255,255,255,0.16);

  /* evita ficar enorme por regras antigas */
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 92%;
  white-space: nowrap;
}

/* Estado “ativo” (quando está com som) */
.midia-hero__som--ativo{
  background: rgba(233, 217, 201, 0.90);
  color: #061738;
  border-color: rgba(233, 217, 201, 0.55);
}

/* Mobile: estilo “story” SEM ficar gigante e cabendo a pessoa inteira */
@media (max-width: 900px){
  .midia-hero{
    max-width: 420px;
    /* altura controlada pra NÃO ficar enorme */
    height: min(62vh, 520px);
    border-radius: 20px;
  }

  .midia-hero__video{
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: contain;      /* mostra ela inteira */
    background: #061738;      /* “barras” ficam elegantes */
  }

  .midia-hero__som,
  .js-toggle-som{
    top: 10px;
    right: 10px;
    padding: 9px 10px;
    font-size: 12px;
  }
}

/* Mobile bem pequeno: dá mais uma enxugada */
@media (max-width: 380px){
  .midia-hero{
    height: min(58vh, 480px);
  }
  .midia-hero__som,
  .js-toggle-som{
    padding: 8px 9px;
    font-size: 11.5px;
  }
}
/* =========================================
   VÍDEO DO RESUMO (vertical tipo Instagram)
   - sem moldura/sombra
   - 9:16 de verdade (não corta)
   - botão de som pequeno e fixo
   Cole no FINAL do estilos.css
   ========================================= */

/* 1) Remove a “moldura” do .hero__foto só nessa seção do vídeo */
.sessao--resumo .hero__foto{
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

/* 2) Define um frame vertical (9:16) pro vídeo */
.sessao--resumo .midia-hero{
  position: relative;
  width: 100%;
  max-width: 560px;          /* PC: aumenta sem ficar gigante */
  aspect-ratio: 9 / 16;      /* VERTICAL */
  border-radius: 22px;       /* cantos “premium” */
  overflow: hidden;          /* recorta cantos arredondados */
  background: #000;          /* evita “faixas claras” nas laterais */
}

/* 3) Não cortar o vídeo: mostra ele INTEIRO */
.sessao--resumo .midia-hero__video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain !important; /* ESSENCIAL: não corta */
  object-position: center;
}

/* 4) Botão de som (pequeno e sempre visível) */
.sessao--resumo .midia-hero__som{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;

  padding: 10px 12px;
  border-radius: 999px;

  font-size: 14px;
  line-height: 1;
  white-space: nowrap;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(6, 23, 56, .62);
  color: #fff;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 5) MOBILE: garante que caiba ela inteira na tela (altura limitada) */
@media (max-width: 768px){
  .sessao--resumo .midia-hero{
    /* largura baseada na altura da tela pra não ficar “grande demais” */
    width: min(92vw, calc(70vh * 9 / 16));
    max-width: none;
    margin: 0 auto;
    border-radius: 18px;
  }

  .sessao--resumo .midia-hero__som{
    top: 10px;
    right: 10px;
    padding: 8px 10px;
    font-size: 13px;
  }

  /* aproxima do texto abaixo (se estava “longe demais”) */
  .sessao--resumo .resumo__miolo{
    gap: 18px;
  }
}
/*pode apagar aqui para restarar videos na horizonttal*/



/* ================================
   FIX MOBILE: texto “espaçado” (justify)
   Mantém o desktop igual e corrige só no celular
   ================================ */
@media (max-width: 900px){
  .texto-secao,
  .hero__texto,
  .comercial__texto,
  .cartao__texto,
  .resumo__texto,
  .pilar__texto{
    text-align: left;          /* remove o justify no mobile */
    text-justify: auto;
    word-spacing: normal;      /* desfaz “buracos” entre palavras */
    letter-spacing: normal;

    /* melhora quebra de linha */
    overflow-wrap: break-word;
    text-wrap: pretty;

    /* se quiser testar justify com menos “buracos”, deixe ligado.
       Mesmo com text-align:left, isso ajuda em algumas quebras */
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

/* ================================
   FIX GLOBAL: remove “buracos” do justify no site todo
   (aplica no PC + mobile)
   ================================ */

/* 1) Conteúdo / copy sempre bem alinhado */
.texto-secao,
.hero__texto,
.comercial__texto,
.cartao__texto,
.resumo__texto,
.pilar__texto{
  text-align: left;         /* tira justify que estica os espaços */
  text-justify: auto;
  word-spacing: normal;     /* normaliza espaçamento entre palavras */
  letter-spacing: normal;
  line-height: 1.65;        /* melhora leitura/organização */
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* 2) Se você tinha algum justify “genérico” pegando tudo, isso evita */
p{
  word-spacing: normal;
  letter-spacing: normal;
}


/* =========================
   DESKTOP: VÍDEO ESQUERDA + CARDS DIREITA
   (sem moldura grande / layout premium)
   ========================= */

/* só PC */
@media (min-width: 901px){

  /* 1) O "miolo" vira grid: vídeo | conteúdo */
  .sessao--video-story .miolo,
  .sessao--resumo .miolo,
  .sessao--quem-sou-eu .miolo,
  .resumo__miolo{
    display: grid;
    grid-template-columns: minmax(420px, 520px) 1fr;
    gap: 40px;
    align-items: start;
  }

  /* 2) Bloco do vídeo (lado esquerdo) */
  .sessao--video-story .video-story__card,
  .sessao--video-story .midia-hero,
  .sessao--video-story .hero__foto,
  .sessao--video-story .hero__foto .midia-hero{
    width: 100%;
  }

  /* card do vídeo SEM moldura enorme */
  .sessao--video-story .video-story__card{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;

    /* tamanho premium */
    max-width: 520px;
  }

  /* mantém o vídeo vertical e grande */
  .sessao--video-story .midia-hero{
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 22px;     /* moldura elegante */
    overflow: hidden;        /* corta certinho nas bordas */
    background: #050e1f;     /* fallback */
  }

  .sessao--video-story .midia-hero__video{
    width: 100%;
    height: 100%;
    object-fit: cover;       /* preenche sem deformar */
    display: block;
  }

  /* botão de som: discreto e fixo no topo-direito do vídeo */
  .sessao--video-story .midia-hero__som{
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;

    padding: 10px 14px;
    font-size: 14px;
    border-radius: 999px;
    max-width: 70%;
    white-space: nowrap;

    background: rgba(6, 23, 56, 0.72);
    border: 1px solid rgba(233, 217, 201, 0.22);
    color: #fff;
    backdrop-filter: blur(10px);
  }

  /* 3) Coluna da direita: título + cards */
  .sessao--video-story .infos-profissionais,
  .sessao--video-story .informacoes-profissionais,
  .sessao--video-story .infos,
  .sessao--video-story .conteudo-direita{
    width: 100%;
  }

  /* Se o seu H2 "Informações profissionais" estiver na coluna direita,
     garantimos que ele não fique muito afastado */
  .sessao--video-story h2,
  .sessao--video-story .titulo-secao{
    margin-top: 6px;
    margin-bottom: 18px;
  }

  /* 4) Grade dos 3 cards na direita bem organizada */
  .sessao--video-story .grade-infos,
  .sessao--video-story .grade-profissional,
  .sessao--video-story .grade-beneficios,
  .sessao--video-story .informacoes-profissionais__grade,
  .sessao--video-story .infos-profissionais__grade{
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* Se os cards usam a classe .cartao */
  .sessao--video-story .cartao{
    margin: 0;
  }

  /* Opcional: deixa os cards mais “firmes” no desktop */
  .sessao--video-story .cartao{
    border-radius: 18px;
    padding: 18px 18px;
  }

  /* 5) Espaçamento geral da seção (pra não colar em cima/baixo) */
  .sessao--video-story{
    padding-top: 26px;
    padding-bottom: 34px;
  }
}
/* =========================================
   SOBRE — VÍDEO + INFOS (layout premium)
   Autor: Pedro Max
   ========================================= */

/* GRID do bloco (PC) */
.sessao--trajetoria .trajetoria__grid{
  display: grid;
  grid-template-columns: minmax(320px, 460px) 1fr;
  gap: 28px;
  align-items: start;
}

/* Coluna do vídeo */
.trajetoria__video{
  display: flex;
  justify-content: flex-start;
}




/* Vídeo SEM CORTAR (mostra tudo) */
.midia-hero--story .midia-hero__video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;              /* <- não corta nada */
  background: rgba(0,0,0,.20);      /* “letterbox” discreto se precisar */
}

/* Botão de som (tamanho controlado) */
.midia-hero--story .midia-hero__som{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  max-width: 70%;
  white-space: nowrap;
}

/* Coluna das infos (direita) */
.trajetoria__infos .titulo-secao{
  margin-top: 0;
}

/* Deixa as infos mais “arrumadas” no PC */
.sessao--trajetoria .grade-informacoes{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* ===== Mobile ===== */
@media (max-width: 900px){
  .sessao--trajetoria .trajetoria__grid{
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .trajetoria__video{
    width: 100%;
    justify-content: center;
  }

  .midia-hero--story{
    width: min(420px, 100%);
    border-radius: 26px;  /* mais “premium” no mobile */
  }

  .midia-hero--story .midia-hero__som{
    top: 12px;
    right: 12px;
    font-size: 13px;
    padding: 9px 12px;
  }

  .trajetoria__infos{
    width: 100%;
  }
}



/* =========================================================
   PATCH — SOBRE (PC): vídeo à esquerda + Informações à direita
   Objetivo: coluna da direita com a MESMA altura do vídeo
   (Cole no FINAL do estilos.css)
   ========================================================= */

/* 1) Corrige os "espaços enormes" do texto (mobile e PC)
   (o culpado é text-align: justify em colunas estreitas) */
.texto-secao,
.cartao__texto,
.info__texto,
.hero__texto,
.comercial__texto,
.comercial__cta-texto{
  text-align: left;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}

/* 2) PC: layout 2 colunas (vídeo esquerda / infos direita) */
:root{
  --sobre-video-h: clamp(520px, 62vh, 680px); /* altura do vídeo no PC */
  --sobre-video-w: min(420px, 36vw);          /* largura do vídeo no PC */
}

@media (min-width: 980px){

  /* IMPORTANTE:
     Isso assume que o bloco do vídeo (ex.: .video-story)
     está DENTRO da mesma .miolo da seção de info (sessao--info),
     antes do h2 e da .grade-informacoes. */
  .sessao--info .miolo{
    display: grid;
    grid-template-columns: var(--sobre-video-w) 1fr;
    grid-template-rows: auto 1fr;
    gap: 36px;
    align-items: start;
  }

  /* vídeo ocupa a esquerda, do topo até embaixo */
  .sessao--info .video-story{
    grid-column: 1;
    grid-row: 1 / span 2;
    width: var(--sobre-video-w);
  }

  /* garante altura fixa (não estica com o conteúdo da direita) */
  .sessao--info .video-story,
  .sessao--info .video-story__wrap{
    height: var(--sobre-video-h);
  }

  /* deixa o vídeo SEM CORTAR (vertical completo) */
  .sessao--info .video-story video{
    width: 100%;
    height: 100%;
    object-fit: contain;              /* <- sem crop */
    background: rgba(0,0,0,.18);      /* “barra” discreta se sobrar espaço */
    display: block;
    border-radius: 22px;             /* premium */
  }

  /* título vai para a coluna da direita */
  .sessao--info .titulo-secao{
    grid-column: 2;
    grid-row: 1;
    margin: 6px 0 0 0;
  }

  /* a grade dos 3 cards fica travada na altura do vídeo */
  .sessao--info .grade-informacoes{
    grid-column: 2;
    grid-row: 2;
    height: var(--sobre-video-h);
    margin-top: 18px;

    display: grid;
    grid-template-rows: repeat(3, 1fr); /* 3 cards dividindo a altura */
    gap: 18px;
  }

  /* cada card ocupa sua “fatia” e centraliza melhor o conteúdo */
  .sessao--info .cartao--info{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}


/* =========================================
   SOBRE — VÍDEO STORY + INFOS (PC)
   - sem barras em cima/baixo
   - sem corte
   - título mais bonito
   ========================================= */
@media (min-width: 981px){

  /* controla o tamanho do vídeo no PC */
  .sessao--trajetoria{
    --video-h: clamp(560px, 72vh, 760px);
    --gap: 28px;
  }

  .sessao--trajetoria .trajetoria__grid{
    display: grid;
    grid-template-columns: minmax(320px, 460px) 1fr;
    gap: var(--gap);
    align-items: start;
  }

  /* ===== VÍDEO (sem “borda” e sem corte) ===== */
  .sessao--trajetoria .trajetoria__video .midia-hero--story{
    /* remove qualquer “card” grande atrás */
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;

    /* o segredo: container com proporção de story */
    height: var(--video-h);
    aspect-ratio: 9 / 16;
    width: auto;

    border-radius: 26px;
    overflow: hidden;

    /* deixa o vídeo colado na esquerda, sem sobras */
    display: block;
  }

  .sessao--trajetoria .trajetoria__video .midia-hero__video{
    width: 100%;
    height: 100%;
    object-fit: contain; /* não corta NADA */
    background: transparent; /* não cria “barras” escuras */
    display: block;
  }

  /* botão som no canto (tamanho elegante) */
  .sessao--trajetoria .trajetoria__video .midia-hero__som{
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 999px;
  }

  /* ===== COLUNA DIREITA (altura igual ao vídeo) ===== */
  .sessao--trajetoria .trajetoria__infos{
    height: var(--video-h);
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* título sem quebra feia e com cara premium */
  .sessao--trajetoria .trajetoria__infos .titulo-secao{
    font-size: clamp(34px, 3vw, 52px);
    line-height: 1.04;
    letter-spacing: 0.2px;
    margin: 0 0 16px 0;
    max-width: 18ch; /* evita ficar “gigante” atravessando */
  }

  .sessao--trajetoria .trajetoria__infos .grade-informacoes{
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* cards um pouco menores pra caber na altura do vídeo */
  .sessao--trajetoria .trajetoria__infos .cartao--info{
    padding: 16px 18px;
  }

  /* se o último card for grande, ele rola por dentro (não estoura a altura) */
  .sessao--trajetoria .trajetoria__infos .cartao--info:last-child{
    min-height: 0;
    overflow: auto;
  }
}


/* =========================================================
   SOBRE — CONTROLE FÁCIL DO BLOCO DA DIREITA (PC)
   Autor: Pedro Max
   Como usar:
   - Ajuste --infos-w (largura do bloco da direita)
   - Ajuste --gap (distância entre vídeo e infos)
   - Ajuste --video-h (altura do vídeo e da coluna direita)
   ========================================================= */

@media (min-width: 981px){

  /* 🔧 CONTROLES (mude aqui quando quiser) */
  .sessao--trajetoria{
    --video-h: 680px;         /* altura do vídeo e do bloco da direita */
    --infos-w: 640px;         /* ✅ LARGURA DO BLOCO DA DIREITA (diminua aqui) */
    --gap: 12px;              /* distância do vídeo para os textos */
  }

  /* grid: vídeo + infos */
  .sessao--trajetoria .trajetoria__grid{
    display: grid;
    grid-template-columns: auto var(--infos-w);
    gap: var(--gap);
    align-items: start;
  }

  /* ✅ vídeo colado nos textos (sem sobras “card”) */
  .sessao--trajetoria .trajetoria__video{
    justify-self: end; /* encosta o vídeo para a direita do lado dele */
  }

  .sessao--trajetoria .trajetoria__video .midia-hero--story{
    height: var(--video-h);
    aspect-ratio: 9 / 16;
    border-radius: 26px;
    overflow: hidden;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    position: relative;
  }

  /* vídeo inteiro, sem cortar */
  .sessao--trajetoria .trajetoria__video .midia-hero__video{
    width: 100%;
    height: 100%;
    object-fit: contain; /* não corta */
    display: block;
    background: transparent;
  }

  /* ✅ bloco da direita com a MESMA altura do vídeo */
  .sessao--trajetoria .trajetoria__infos{
    height: var(--video-h);
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* título normal (sem quebrar estranho) */
  .sessao--trajetoria .trajetoria__infos .titulo-secao{
    margin: 0 0 16px 0;
    line-height: 1.05;
    max-width: 22ch;
  }

  /* cards dentro da altura do vídeo */
  .sessao--trajetoria .trajetoria__infos .grade-informacoes{
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* se estourar, rola por dentro (não passa da altura do vídeo) */
  .sessao--trajetoria .trajetoria__infos .grade-informacoes{
    overflow: auto;
    padding-right: 6px;
  }
}

/* =========================================================
   SOBRE — FORÇAR TAMANHO DAS MOLDURAS (cards da direita)
   Autor: Pedro Max
   Ajuste aqui:
   --infos-w  = largura do bloco da direita
   --card-h   = altura das molduras
   --card-pad = padding interno
   ========================================================= */

@media (min-width: 981px){
  .sessao--trajetoria{
    --infos-w: 560px;
    --card-h: 110px;
    --card-pad: 16px;
    --gap: 16px;
    --video-h: 680px;
  }

  /* grid geral */
  .sessao--trajetoria .trajetoria__grid{
    display: grid !important;
    grid-template-columns: auto var(--infos-w) !important;
    gap: var(--gap) !important;
    align-items: start !important;
  }

  /* bloco da direita */
  .sessao--trajetoria .trajetoria__infos{
    width: var(--infos-w) !important;
    max-width: var(--infos-w) !important;
    height: var(--video-h) !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  /* grade vira 3 linhas com altura fixa */
  .sessao--trajetoria .trajetoria__infos .grade-informacoes{
    display: grid !important;
    grid-template-rows: repeat(3, var(--card-h)) !important;
    gap: 14px !important;
    flex: 1 !important;
    min-height: 0 !important;
  }

  /* ✅ FORÇA tamanho real das molduras */
  .sessao--trajetoria .trajetoria__infos .cartao.cartao--info{
    height: var(--card-h) !important;
    min-height: var(--card-h) !important;
    max-height: var(--card-h) !important;

    padding: var(--card-pad) !important;
    box-sizing: border-box !important;

    overflow: hidden !important;       /* não deixa crescer */
  }

  /* título e texto não “esticarem” o card */
  .sessao--trajetoria .trajetoria__infos .cartao__titulo{
    margin: 0 0 10px 0 !important;
    line-height: 1.15 !important;
  }

  .sessao--trajetoria .trajetoria__infos .cartao__texto{
    margin: 0 !important;
    line-height: 1.35 !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;  /* diminui o “alto” do texto */
    overflow: hidden !important;
  }
}