/* ==========================================================
   Alaska Seguros & Consórcios
   Conceito: "abaixo da superfície" — a manchete pousa na linha
   d'água da geleira; a página mergulha no azul onde está a
   consultoria (a parte do iceberg que sustenta).
   ========================================================== */

:root {
  /* Paleta — derivada do site original (#023059, #4177AE, #EEEEF0) */
  --abismo: #01182D;   /* o fundo do mar — seções profundas */
  --navy: #023059;     /* azul da marca */
  --fiorde: #4177AE;   /* azul médio da marca */
  --glaciar: #A7C9EC;  /* gelo iluminado — destaques sobre o escuro */
  --gelo: #EEEEF0;     /* fundo claro da marca */
  --neve: #F8F9FB;
  --branco: #FFFFFF;
  --tinta: #0E2238;    /* texto sobre claro */
  --tinta-suave: #4A5B6E;
  --whats: #1BA553;
  --whats-escuro: #148A44;

  --f-display: "Red Hat Display", system-ui, sans-serif;
  --f-texto: "Red Hat Text", system-ui, sans-serif;

  /* Escala tipográfica (≈ quarta perfeita) */
  --t-0: 1rem;
  --t-1: 1.1875rem;
  --t-2: 1.5rem;
  --t-3: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --t-4: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
  --t-hero: clamp(2rem, .4rem + 7.2vw, 6.25rem);

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 1200px;
  --secao: clamp(4.5rem, 10vw, 8.5rem);

  --linha-dagua: 66%;  /* posição do horizonte na foto (object-position acompanha) */
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--t-0);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--neve);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); margin: 0; line-height: 1.05; letter-spacing: -0.025em; }
p { margin: 0; }
ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.container { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 3px solid var(--glaciar); outline-offset: 3px; border-radius: 4px; }
.produtos :focus-visible, .parceiros :focus-visible, .como :focus-visible { outline-color: var(--fiorde); }

.pular {
  position: fixed; left: 1rem; top: 1rem; z-index: 100; transform: translateY(-200%);
  background: var(--branco); color: var(--navy); padding: .75rem 1rem; border-radius: 8px; font-weight: 600;
}
.pular:focus { transform: none; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.25rem; padding: .85rem 1.5rem;
  border: 0; border-radius: 999px;
  font-family: var(--f-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.botao svg { width: 1.25rem; height: 1.25rem; flex: none; }
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(1px); }
.botao--whats { background: var(--whats); color: var(--branco); box-shadow: 0 10px 30px -10px rgba(27, 165, 83, .6); }
.botao--whats:hover { background: var(--whats-escuro); }
.botao--vidro {
  color: var(--branco);
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.botao--vidro:hover { background: rgba(255, 255, 255, .22); }
.botao--largo { width: 100%; }

/* ---------- Topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background-color .3s, box-shadow .3s, backdrop-filter .3s;
}
.topo__inner {
  max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding: 1rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  transition: padding .3s;
}
.topo__marca { display: block; position: relative; width: 132px; }
.logo { width: 100%; height: auto; transition: opacity .3s; }
.logo--azul { position: absolute; inset: 0; opacity: 0; }
.topo__nav { display: flex; align-items: center; gap: 2rem; }
.topo__nav > a:not(.botao) {
  color: var(--branco); text-decoration: none; font-weight: 500; font-size: .98rem;
  position: relative; padding-block: .35rem;
}
.topo__nav > a:not(.botao)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.topo__nav > a:not(.botao):hover::after { transform: scaleX(1); }
.topo__cta { min-height: 2.75rem; padding: .6rem 1.15rem; font-size: .95rem; box-shadow: none; }

.topo.is-solido {
  background: rgba(248, 249, 251, .86);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 rgba(2, 48, 89, .08);
}
.topo.is-solido .topo__inner { padding-block: .6rem; }
.topo.is-solido .logo--branco { opacity: 0; }
.topo.is-solido .logo--azul { opacity: 1; }
.topo.is-solido .topo__nav > a:not(.botao) { color: var(--navy); }
.topo.is-solido .hamburguer, .topo.is-solido .hamburguer::before, .topo.is-solido .hamburguer::after { background: var(--navy); }

.topo__menu {
  display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  place-items: center; border-radius: 10px;
}
.hamburguer, .hamburguer::before, .hamburguer::after {
  display: block; width: 22px; height: 2px; background: var(--branco); border-radius: 2px; position: relative;
  transition: transform .25s var(--ease), background-color .3s;
}
.hamburguer::before, .hamburguer::after { content: ""; position: absolute; left: 0; }
.hamburguer::before { top: -7px; }
.hamburguer::after { top: 7px; }
.topo__menu[aria-expanded="true"] .hamburguer { background: transparent !important; }
.topo__menu[aria-expanded="true"] .hamburguer::before { transform: translateY(7px) rotate(45deg); }
.topo__menu[aria-expanded="true"] .hamburguer::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh; max-height: 1100px; height: 100svh;
  color: var(--branco);
  overflow: hidden;
  background: var(--abismo);
}
.hero__foto {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
  object-fit: cover;
  /* alinha o ponto de 66% da foto (o horizonte) com 66% da altura do hero */
  object-position: 50% var(--linha-dagua);
}
.hero__veu {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(1, 24, 45, .62) 0%, rgba(1, 24, 45, .28) 45%, rgba(1, 24, 45, 0) 70%),
    linear-gradient(180deg, rgba(1, 24, 45, .45) 0%, rgba(1, 24, 45, 0) 22%),
    linear-gradient(180deg, rgba(1, 24, 45, 0) calc(var(--linha-dagua) + 4%), rgba(1, 24, 45, .55) 85%, var(--abismo) 100%);
}

/* A manchete: a linha de base da última linha fica exatamente sobre o horizonte */
.hero__horizonte {
  --desc: .2em; /* espaço de descendente abaixo da linha de base */
  position: absolute; left: 0; right: 0;
  top: var(--linha-dagua);
  font-size: var(--t-hero);
}
.hero__horizonte .container { position: relative; }
.hero__horizonte::after { /* brilho fino sobre a linha d'água */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55) 25%, rgba(255, 255, 255, .15) 60%, transparent 85%);
}
.hero__titulo, .hero__reflexo {
  font-family: var(--f-display); font-weight: 900;
  font-size: 1em; line-height: .98; letter-spacing: -0.03em;
}
.hero__titulo {
  position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: calc(var(--desc) * -1);
  text-shadow: 0 2px 40px rgba(1, 24, 45, .35);
}
.hero__titulo .linha, .hero__reflexo .linha { display: block; white-space: nowrap; }
.hero__reflexo {
  position: absolute; left: var(--gutter); right: var(--gutter); top: 0;
  /* espelha em torno da linha de base: vira no lugar e sobe o espaço do descendente */
  transform: translateY(calc(var(--desc) * -1)) scaleY(-1);
  color: var(--branco);
  opacity: .42;
  filter: url(#ondas);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.35) 30%, transparent 62%);
          mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.35) 30%, transparent 62%);
  pointer-events: none; user-select: none;
}

.hero__base {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding-bottom: clamp(1.75rem, 5vh, 3.5rem);
}
.hero__base-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.hero__sub { max-width: 34rem; font-size: var(--t-1); line-height: 1.5; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 12px rgba(1, 24, 45, .5); }
.hero__acoes { display: flex; flex-wrap: wrap; gap: .75rem; flex: none; align-items: center; }
/* chamada principal do hero: leva ao simulador, com um brilho que passa de tempos em tempos */
.botao--cotar {
  position: relative; overflow: hidden; gap: 1.1rem; text-align: left;
  min-height: 4rem; padding: .6rem .6rem .6rem 1.5rem; border-radius: 20px;
  background: var(--branco); color: var(--navy);
  box-shadow: 0 18px 50px -14px rgba(167, 201, 236, .75), 0 0 0 6px rgba(255, 255, 255, .14);
}
.botao--cotar:hover { box-shadow: 0 22px 56px -12px rgba(167, 201, 236, .9), 0 0 0 8px rgba(255, 255, 255, .18); }
.botao--cotar__texto { display: grid; gap: .1rem; }
.botao--cotar strong { font-size: 1.2rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; }
.botao--cotar small { font-family: var(--f-texto); font-weight: 500; font-size: .88rem; color: var(--tinta-suave); line-height: 1.3; }
.botao--cotar__seta { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: 14px; background: var(--navy); transition: transform .25s var(--ease); }
.botao--cotar__seta svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: var(--branco); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.botao--cotar:hover .botao--cotar__seta { transform: translateX(4px); }
.botao--cotar::after {
  content: ""; position: absolute; inset: 0 auto 0 -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(167, 201, 236, .45), transparent);
  transform: skewX(-18deg); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .botao--cotar::after { animation: brilho 4.5s 2s ease-in-out infinite; }
}
@keyframes brilho { 0% { left: -40%; opacity: 1; } 28%, 100% { left: 120%; opacity: 1; } }

/* Entrada orquestrada: a manchete emerge da água, o reflexo acompanha */
@media (prefers-reduced-motion: no-preference) {
  .hero__foto { animation: foto-in 1.8s var(--ease) both; }
  .hero__titulo .linha, .hero__reflexo .linha { animation: emerge 1.2s var(--ease) both; }
  .hero__titulo .linha:nth-child(1), .hero__reflexo .linha:nth-child(1) { animation-delay: .25s; }
  .hero__titulo .linha:nth-child(2), .hero__reflexo .linha:nth-child(2) { animation-delay: .1s; }
  .hero__titulo, .hero__reflexo { clip-path: inset(-50% -10% var(--desc) -10%); }
  .hero__base { animation: surge .9s .7s var(--ease) both; }
}
@keyframes foto-in { from { transform: scale(1.06); } to { transform: none; } }
@keyframes emerge { from { transform: translateY(105%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes surge { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Abaixo da superfície ---------- */
.profundo {
  position: relative;
  background:
    linear-gradient(180deg, var(--abismo) 0, transparent 18%),
    radial-gradient(90% 60% at 80% 35%, rgba(65, 119, 174, .2), transparent 70%),
    linear-gradient(180deg, var(--abismo) 0%, #02223F 55%, var(--navy) 100%);
  color: var(--gelo);
  padding-block: clamp(3.5rem, 8vw, 6.5rem) var(--secao);
}
.profundo > .container { position: relative; z-index: 1; }
.profundo__grade { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.profundo__titulo { font-size: var(--t-4); font-weight: 700; color: var(--branco); letter-spacing: -0.03em; }
.profundo__titulo .frase2 { display: block; color: var(--glaciar); font-weight: 500; font-style: italic; margin-top: .15em; }
.profundo__texto { padding-top: .5rem; }
.profundo__texto > p { font-size: var(--t-1); line-height: 1.6; color: rgba(238, 238, 240, .9); max-width: 36rem; }
.profundo__mv { margin-top: 2.25rem; display: grid; gap: 1.5rem; }
.profundo__mv > div { padding-left: 1.25rem; border-left: 2px solid rgba(167, 201, 236, .35); }
.profundo__mv dt { font-family: var(--f-display); font-weight: 700; color: var(--branco); font-size: 1.05rem; margin-bottom: .25rem; }
.profundo__mv dd { color: rgba(238, 238, 240, .75); font-size: .98rem; line-height: 1.6; max-width: 34rem; }

.fatos {
  margin-top: clamp(3.5rem, 8vw, 6rem);
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(167, 201, 236, .22);
}
.fatos li { padding: 2rem 2rem 0 0; display: grid; gap: .35rem; align-content: start; }
.fatos li + li { padding-left: 2rem; border-left: 1px solid rgba(167, 201, 236, .22); }
.fatos strong { font-family: var(--f-display); font-weight: 900; font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem); line-height: 1; letter-spacing: -0.04em; color: var(--branco); }
.fatos span { color: rgba(238, 238, 240, .72); max-width: 16rem; }

/* ---------- Cabeçalho de seção ---------- */
.secao-cab { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem 4rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.secao-cab h2 { font-size: var(--t-4); font-weight: 700; color: var(--navy); letter-spacing: -0.03em; }
.secao-cab p { color: var(--tinta-suave); font-size: var(--t-1); max-width: 30rem; }

/* ---------- Produtos ---------- */
.produtos { background: var(--gelo); padding-block: var(--secao); }
.abas {
  display: inline-flex; gap: .25rem; padding: .35rem; margin-bottom: 2rem;
  background: var(--branco); border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(2, 48, 89, .08);
  max-width: 100%; overflow-x: auto;
}
.aba {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 0; background: transparent; cursor: pointer;
  padding: .7rem 1.35rem; border-radius: 999px;
  font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; color: var(--tinta-suave);
  transition: background-color .25s, color .25s; white-space: nowrap;
}
.aba small { font-family: var(--f-texto); font-weight: 600; font-size: .78rem; padding: .05rem .5rem; border-radius: 999px; background: var(--gelo); color: var(--tinta-suave); transition: inherit; }
.aba:hover { color: var(--navy); }
.aba[aria-selected="true"] { background: var(--navy); color: var(--branco); }
.aba[aria-selected="true"] small { background: rgba(255, 255, 255, .16); color: var(--branco); }

.painel { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.painel[hidden] { display: none; }
.painel--guia { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .painel.is-entrando .painel__arte { animation: painel-arte .6s var(--ease) both; }
  .painel.is-entrando .lista li, .painel.is-entrando .guia li { animation: surge .45s var(--ease) both; }
  .painel.is-entrando .lista li:nth-child(2), .painel.is-entrando .guia li:nth-child(2) { animation-delay: .03s; }
  .painel.is-entrando .lista li:nth-child(3), .painel.is-entrando .guia li:nth-child(3) { animation-delay: .06s; }
  .painel.is-entrando .lista li:nth-child(4), .painel.is-entrando .guia li:nth-child(4) { animation-delay: .09s; }
  .painel.is-entrando .lista li:nth-child(5), .painel.is-entrando .guia li:nth-child(5) { animation-delay: .12s; }
  .painel.is-entrando .lista li:nth-child(6), .painel.is-entrando .guia li:nth-child(6) { animation-delay: .15s; }
  .painel.is-entrando .lista li:nth-child(7), .painel.is-entrando .guia li:nth-child(7) { animation-delay: .18s; }
  .painel.is-entrando .lista li:nth-child(8), .painel.is-entrando .guia li:nth-child(8) { animation-delay: .21s; }
}
@keyframes painel-arte { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

.painel__arte {
  position: sticky; top: 6rem;
  border-radius: 28px; overflow: hidden;
  background: var(--navy);
  aspect-ratio: 4 / 5;
  display: grid;
}
.painel__arte img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
.painel__arte--duo img { filter: grayscale(1) contrast(1.15) brightness(.95); }
.painel__arte--duo::before { /* tinge a foto com o azul da marca */
  content: ""; grid-area: 1 / 1; z-index: 1; pointer-events: none;
  background: linear-gradient(160deg, var(--fiorde), var(--navy) 70%); mix-blend-mode: color;
}
.painel__arte--duo::after {
  content: ""; grid-area: 1 / 1; z-index: 1; pointer-events: none;
  background: rgba(2, 48, 89, .28); mix-blend-mode: multiply;
}
.painel__arte figcaption { z-index: 2; }
.painel__arte figcaption {
  grid-area: 1 / 1; align-self: end; z-index: 1;
  padding: 1.75rem; font-family: var(--f-display); font-weight: 700; font-size: var(--t-2); line-height: 1.15; letter-spacing: -0.02em;
  color: var(--branco);
  background: linear-gradient(180deg, transparent, rgba(1, 24, 45, .85));
  padding-top: 5rem;
}
/* Recorte (carro sem fundo) flutuando sobre a geleira desfocada */
.painel__arte--recorte {
  background:
    linear-gradient(180deg, rgba(2, 48, 89, .1) 40%, rgba(1, 24, 45, .92)),
    url("assets/img/geleira.webp") 50% 50% / auto 100%;
}
.painel__arte--recorte img {
  width: 88%; height: auto; justify-self: center; align-self: start;
  margin-top: 32%; /* rodas pousadas na linha d'água do fundo */
  object-fit: contain;
  -webkit-box-reflect: below -6px linear-gradient(transparent 58%, rgba(0, 0, 0, .3));
}

.lista { border-top: 1px solid rgba(2, 48, 89, .14); }
.lista li { border-bottom: 1px solid rgba(2, 48, 89, .14); }
.lista a {
  display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr auto; gap: .35rem 1.75rem; align-items: center;
  padding: 1.35rem .5rem; text-decoration: none;
  transition: background-color .2s, padding .25s var(--ease);
  border-radius: 14px;
}
.lista__nome { font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; color: var(--navy); line-height: 1.2; letter-spacing: -0.015em; }
.lista__desc { color: var(--tinta-suave); font-size: .98rem; line-height: 1.5; }
.lista__cta {
  font-family: var(--f-display); font-weight: 700; font-size: .95rem; color: var(--fiorde);
  display: inline-flex; align-items: center; gap: .45rem; transition: color .2s;
}
.lista__cta svg { width: 1.05rem; height: 1.05rem; }
.lista a:hover { background: var(--branco); padding-inline: 1.25rem; }
.lista a:hover .lista__cta { color: var(--whats-escuro); }

/* ---------- Como funciona ---------- */
.como { background: #DDE6F0; padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.como__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem clamp(2.5rem, 6vw, 6rem); align-items: end; }
.como__intro { display: contents; }
.como__intro h2 { font-size: var(--t-4); font-weight: 700; color: var(--navy); letter-spacing: -0.03em; max-width: 13ch; }
.como__intro p { color: var(--tinta-suave); font-size: var(--t-1); max-width: 30rem; }

.passos {
  grid-column: 1 / -1; counter-reset: passo;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 3.25rem;
  position: relative;
}
.passos::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: linear-gradient(90deg, var(--navy), var(--fiorde) 60%, var(--glaciar));
  transform-origin: left; transition: transform 1.6s var(--ease);
}
.passos li { counter-increment: passo; position: relative; }
.passos li::before {
  content: counter(passo);
  position: absolute; left: 0; top: calc(-3.25rem - 1.6rem - 1px);
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 900; font-size: 1.2rem;
  background: var(--navy); color: var(--branco);
  box-shadow: 0 0 0 6px #DDE6F0;
}
.passos h3 { font-size: 1.45rem; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; }
.passos p { margin-top: .5rem; color: var(--tinta-suave); max-width: 22rem; }

/* ---------- Palavra (Júnior) ---------- */
.palavra {
  background: var(--navy); color: var(--branco);
  padding-block: clamp(5.5rem, 12vw, 10rem);
  position: relative; overflow: hidden;
}
.palavra::before { /* marca d'água: o "A" da Alaska */
  content: ""; position: absolute; right: -6%; bottom: -18%; width: min(46vw, 560px); aspect-ratio: 1;
  background: url("assets/img/icone-a.png") center / contain no-repeat; opacity: .05; pointer-events: none;
}
.palavra__grade { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: center; position: relative; }
.palavra__foto { border-radius: 200px 200px 28px 28px; overflow: hidden; aspect-ratio: 4 / 5; clip-path: inset(0 0 0 0 round 200px 200px 28px 28px); transition: clip-path 1.5s var(--ease); }
.palavra__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; scale: 1.14; translate: 0 var(--py, 0px); }
.palavra__citacao p {
  font-family: var(--f-display); font-weight: 500; font-style: italic;
  font-size: clamp(1.45rem, 1.05rem + 1.6vw, 2.35rem); line-height: 1.25; letter-spacing: -0.02em;
  text-wrap: balance;
}
.palavra__citacao::before { content: ""; display: block; width: 3.5rem; height: 4px; border-radius: 2px; background: var(--glaciar); margin-bottom: 2rem; }
.palavra__citacao footer { margin-top: 2rem; font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; }
.palavra__citacao footer span { display: block; font-family: var(--f-texto); font-weight: 400; font-size: .95rem; color: var(--glaciar); margin-top: .15rem; }

/* ---------- Parceiros ---------- */
.parceiros { background: #022447; padding-block: clamp(4.5rem, 8vw, 6.5rem); }
.parceiros .secao-cab h2 { color: var(--branco); }
.parceiros .secao-cab p { color: rgba(238, 238, 240, .72); }
.logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: rgba(167, 201, 236, .14); border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 1px rgba(167, 201, 236, .14); }
.logos li { background: #022447; display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 1.25rem 1.75rem; transition: background-color .3s; }
.logos img, .marquee img { max-width: 100%; max-height: calc(36px * var(--s, 1)); width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .72; transition: opacity .3s; }
.logos li:hover { background: #032C55; }
.logos li:hover img { opacity: 1; }
.logos img.cor, .marquee img.cor { filter: none; opacity: .92; } /* Itaú: o quadrado vira um bloco branco se inverter */

/* ---------- Simulador de cotação ---------- */
.simulador {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(65, 119, 174, .35), transparent 70%),
    linear-gradient(180deg, var(--navy), #01213F);
  color: var(--gelo);
  padding-block: var(--secao);
}
.simulador .bolhas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.simulador__grade { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.simulador h2 { font-size: var(--t-4); font-weight: 700; color: var(--branco); letter-spacing: -0.03em; max-width: 12ch; }
.simulador__intro p { margin-top: 1.25rem; font-size: var(--t-1); color: rgba(238, 238, 240, .8); max-width: 28rem; }
.simulador__garantias { margin-top: 2rem; display: grid; gap: .7rem; }
.simulador__garantias li { display: flex; align-items: center; gap: .7rem; font-weight: 500; }
.simulador__garantias li::before {
  content: ""; width: 1.4rem; height: 1.4rem; flex: none; border-radius: 50%;
  background: rgba(167, 201, 236, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A7C9EC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 62% no-repeat;
}

.sim {
  position: relative; min-height: 32rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: 28px;
  background: rgba(1, 24, 45, .55);
  box-shadow: inset 0 0 0 1px rgba(167, 201, 236, .2), 0 40px 80px -30px rgba(0, 0, 0, .6);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: flex; flex-direction: column;
}
.sim__trilha { display: flex; gap: .5rem; margin-bottom: 2rem; counter-reset: etapa; }
.sim__trilha li {
  flex: 1; display: flex; align-items: center; gap: .55rem;
  padding-top: .85rem; border-top: 3px solid rgba(167, 201, 236, .18);
  font-size: .92rem; font-weight: 600; color: rgba(238, 238, 240, .5);
  transition: color .3s, border-color .3s;
}
.sim__trilha span { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: .8rem; background: rgba(167, 201, 236, .14); transition: background-color .3s, color .3s; }
.sim__trilha .is-atual, .sim__trilha .is-feito { color: var(--branco); border-color: var(--glaciar); }
.sim__trilha .is-atual span, .sim__trilha .is-feito span { background: var(--glaciar); color: var(--navy); }
.sim.is-final .sim__trilha { display: none; }
.sim [hidden] { display: none !important; }

.sim__form { display: flex; flex-direction: column; flex: 1; }
.sim__etapa { border: 0; margin: 0; padding: 0; min-width: 0; }
.sim__pergunta { padding: 0; font-family: var(--f-display); font-weight: 700; font-size: var(--t-2); color: var(--branco); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 1.5rem; }
.sim__etapa .campo__erro { margin-top: 1rem; }

.sim__tipos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.tipo {
  position: relative; display: grid; justify-items: center; gap: .6rem; text-align: center;
  padding: 1.25rem .75rem; border-radius: 18px; cursor: pointer;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1.5px rgba(167, 201, 236, .2);
  font-weight: 600; color: var(--branco);
  transition: background-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.tipo:hover { background: rgba(255, 255, 255, .09); transform: translateY(-2px); }
.tipo input { position: absolute; opacity: 0; pointer-events: none; }
.tipo__icone { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; background: rgba(167, 201, 236, .12); transition: background-color .2s; }
.tipo__icone svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--glaciar); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.tipo:has(input:checked) { background: rgba(167, 201, 236, .16); box-shadow: inset 0 0 0 2px var(--glaciar); }
.tipo:has(input:checked) .tipo__icone { background: var(--glaciar); }
.tipo:has(input:checked) .tipo__icone svg { stroke: var(--navy); }
.tipo:has(input:focus-visible) { outline: 3px solid var(--glaciar); outline-offset: 3px; }

.sim__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; }
.campo--largo { grid-column: 1 / -1; }

.sim__navegacao { margin-top: auto; padding-top: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sim__navegacao [data-avancar] { margin-left: auto; min-width: 11rem; }
.botao--claro { background: var(--branco); color: var(--navy); box-shadow: 0 10px 30px -12px rgba(167, 201, 236, .7); }
.botao--claro:hover { background: var(--gelo); }
.sim__voltar { background: none; border: 0; padding: .6rem 0; cursor: pointer; font-weight: 600; color: var(--glaciar); text-decoration: underline; text-underline-offset: 4px; }
.sim__voltar:hover { color: var(--branco); }

/* "calculando": um sonar procurando, a barra enchendo, os itens ticando */
.sim__calculo, .sim__fim { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sim__radar { position: relative; width: 6.5rem; height: 6.5rem; margin-bottom: 1.75rem; }
.sim__radar::after { content: ""; position: absolute; inset: 38%; border-radius: 50%; background: var(--glaciar); box-shadow: 0 0 30px var(--glaciar); }
.sim__radar span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--glaciar); opacity: 0; animation: sonar 2.1s var(--ease) infinite; }
.sim__radar span:nth-child(2) { animation-delay: .7s; }
.sim__radar span:nth-child(3) { animation-delay: 1.4s; }
@keyframes sonar { from { transform: scale(.3); opacity: .9; } to { transform: scale(1); opacity: 0; } }
.sim__calculo .sim__pergunta { min-height: 2.4em; margin-bottom: 1rem; }
.sim__barra { width: min(100%, 22rem); height: 6px; border-radius: 3px; background: rgba(167, 201, 236, .15); overflow: hidden; }
.sim__barra span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--fiorde), var(--glaciar)); transition: width .5s var(--ease); }
.sim__checks { margin-top: 1.75rem; display: grid; gap: .55rem; text-align: left; }
.sim__checks li { display: flex; align-items: center; gap: .6rem; color: rgba(238, 238, 240, .4); transition: color .4s; }
.sim__checks li::before { content: ""; width: 1.15rem; height: 1.15rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(167, 201, 236, .35); transition: background-color .4s, box-shadow .4s; }
.sim__checks li.is-feito { color: var(--branco); }
.sim__checks li.is-feito::before { box-shadow: none; background: var(--whats) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat; }

.sim__fim { gap: 1rem; outline: none; }
.sim__ok { display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; background: var(--whats); box-shadow: 0 0 0 10px rgba(27, 165, 83, .18); margin-bottom: .5rem; }
.sim__ok svg { width: 2.6rem; height: 2.6rem; fill: none; stroke: var(--branco); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.sim__fim:not([hidden]) .sim__ok svg { animation: risco .6s .2s var(--ease) forwards; }
@keyframes risco { to { stroke-dashoffset: 0; } }
.sim__fim h3 { font-size: var(--t-3); font-weight: 700; color: var(--branco); text-wrap: balance; }
.sim__fim p { color: rgba(238, 238, 240, .82); font-size: var(--t-1); max-width: 30rem; }
.sim__fim p strong { color: var(--branco); white-space: nowrap; }
.sim__fim .botao { margin-top: 1rem; max-width: 24rem; }
.sim__fim small { color: rgba(238, 238, 240, .55); font-size: .88rem; }

@media (prefers-reduced-motion: no-preference) {
  .sim__etapa:not([hidden]) { animation: etapa .5s var(--ease); }
}
@keyframes etapa { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .simulador__grade { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sim { border-radius: 22px; min-height: 0; }
  .sim__tipos { grid-template-columns: repeat(2, 1fr); }
  .sim__campos { grid-template-columns: 1fr; }
  .sim__trilha li { font-size: .82rem; }
  .simulador__garantias { margin-top: 1.5rem; }
}

/* ---------- Contato ---------- */
.contato {
  background:
    linear-gradient(180deg, var(--abismo) 0, rgba(1, 24, 45, 0) 30%),
    radial-gradient(70% 60% at 0% 0%, rgba(65, 119, 174, .28), transparent 70%),
    var(--abismo);
  color: var(--gelo);
  padding-block: var(--secao);
}
.contato__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.contato h2 { font-size: var(--t-4); font-weight: 700; color: var(--branco); letter-spacing: -0.03em; max-width: 12ch; }
.contato__lead { margin-top: 1rem; color: rgba(238, 238, 240, .78); font-size: var(--t-1); max-width: 28rem; }

.form { margin-top: 2.25rem; display: grid; gap: 1.25rem; }
.campo { display: grid; gap: .45rem; }
.campo label { font-weight: 600; font-size: .95rem; color: var(--branco); }
.campo label span { font-weight: 400; color: rgba(238, 238, 240, .6); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 3.25rem; padding: .8rem 1rem;
  border-radius: 14px; border: 1.5px solid rgba(167, 201, 236, .25);
  background: rgba(255, 255, 255, .06); color: var(--branco);
  transition: border-color .2s, background-color .2s;
}
.campo textarea { resize: vertical; min-height: 6rem; }
.campo select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath stroke='%23A7C9EC' stroke-width='2' d='m1 1 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.75rem; }
.campo select option, .campo select optgroup { color: var(--tinta); background: var(--branco); }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(238, 238, 240, .42); }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: rgba(167, 201, 236, .5); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--glaciar); background: rgba(255, 255, 255, .1); }
.campo [aria-invalid="true"] { border-color: #FF9A8A; }
.campo__erro { color: #FFB4A8; font-size: .9rem; }

.contato__info { display: grid; gap: 2rem; }
.canais { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 2rem; }
.canais__largo, .canais__email { grid-column: 1 / -1; }
.canais dt { font-size: .88rem; color: var(--glaciar); margin-bottom: .3rem; font-weight: 500; }
.canais dd { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; color: var(--branco); line-height: 1.35; overflow-wrap: break-word; }
.canais dd a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .3s var(--ease); }
.canais dd a:hover { background-size: 100% 1.5px; }
.canais address { font-style: normal; }
.link-mapa { display: inline-block; margin-top: .6rem; font-family: var(--f-texto); font-weight: 600; font-size: .95rem; color: var(--glaciar) !important; }
.mapa { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 10; background: #0A2744; box-shadow: 0 0 0 1px rgba(167, 201, 236, .18); }
.mapa iframe { display: block; width: 100%; height: calc(100% + 110px); margin-top: -110px; border: 0; filter: invert(.92) hue-rotate(180deg) saturate(.6) contrast(.95); }

/* ---------- Rodapé ---------- */
.rodape { background: #010F1D; color: rgba(238, 238, 240, .6); padding-block: 2.5rem; }
.rodape__inner { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.rodape__logo { width: 120px; height: auto; }
.rodape__redes { display: flex; gap: .5rem; margin-left: auto; }
.rodape__redes a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--gelo); box-shadow: inset 0 0 0 1px rgba(167, 201, 236, .25); transition: background-color .2s, color .2s; }
.rodape__redes a:hover { background: var(--gelo); color: var(--navy); }
.rodape__redes svg { width: 18px; height: 18px; }
.rodape__legal { width: 100%; font-size: .88rem; padding-top: 1.5rem; border-top: 1px solid rgba(167, 201, 236, .12); }

/* ---------- Profundímetro ---------- */
.profundimetro {
  position: fixed; right: 1.1rem; top: 50%; z-index: 30;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  transform: translateY(-50%); opacity: 0; transition: opacity .4s;
  pointer-events: none;
}
.profundimetro.is-visivel { opacity: 1; }
.profundimetro__trilho { position: relative; width: 2px; height: 28vh; background: rgba(65, 119, 174, .3); border-radius: 2px; }
.profundimetro__marca {
  position: absolute; left: 50%; top: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--fiorde); box-shadow: 0 0 0 3px rgba(167, 201, 236, .35);
  transform: translate(-50%, calc(var(--p, 0) * 28vh - 50%));
}
.profundimetro__valor { font-family: var(--f-display); font-weight: 700; font-size: .78rem; color: var(--fiorde); font-variant-numeric: tabular-nums; writing-mode: vertical-rl; }
.profundimetro.is-escuro .profundimetro__valor { color: var(--glaciar); }
.profundimetro.is-escuro .profundimetro__marca { background: var(--glaciar); }
@media (max-width: 1100px) { .profundimetro { display: none; } }

/* ---------- WhatsApp flutuante ---------- */
.flutuante {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40;
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--whats); color: var(--branco);
  box-shadow: 0 12px 30px -8px rgba(1, 24, 45, .5);
  transform: translateY(120px); transition: transform .4s var(--ease), background-color .2s;
}
.flutuante svg { width: 30px; height: 30px; }
.flutuante:hover { background: var(--whats-escuro); }
.flutuante.is-visivel { transform: none; }

/* ==========================================================
   Responsivo
   ========================================================== */
@media (max-width: 1024px) {
  .painel { grid-template-columns: 1fr; }
  .painel__arte { position: relative; top: 0; aspect-ratio: 16 / 10; }
  .painel__arte--recorte img { width: 62%; margin-top: 12%; }
  .passos { grid-template-columns: repeat(2, 1fr); row-gap: 3.5rem; border-top: 0; padding-top: 0; }
  .passos::before { display: none; }
  .passos li { border-top: 2px solid var(--fiorde); padding-top: 2.75rem; }
  .passos li::before { top: -1.6rem; }
  .lista a { grid-template-columns: 1fr auto; }
  .lista__desc { grid-column: 1; }
  .lista__cta { grid-row: 1 / span 2; grid-column: 2; }
  .logos { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1080px) {
  .topo__menu { display: grid; }
  .topo__nav {
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; align-items: stretch; justify-content: center; gap: .25rem;
    padding: 6rem var(--gutter) 2rem;
    background: var(--abismo);
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  .topo__nav > a:not(.botao) { color: var(--branco) !important; font-family: var(--f-display); font-weight: 700; font-size: 2rem; letter-spacing: -0.02em; padding-block: .6rem; border-bottom: 1px solid rgba(167, 201, 236, .15); }
  .topo__nav > a:not(.botao)::after { display: none; }
  .topo__cta { margin-top: 1.5rem; min-height: 3.5rem; font-size: 1.05rem; }
  .topo.is-aberto .topo__nav { opacity: 1; visibility: visible; }
  .topo.is-aberto { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
  .topo.is-aberto .logo--branco { opacity: 1; }
  .topo.is-aberto .logo--azul { opacity: 0; }
  .topo.is-aberto .hamburguer::before, .topo.is-aberto .hamburguer::after { background: var(--branco); }

}

@media (max-width: 900px) {
  .profundo__grade, .secao-cab, .como__grade, .contato__grade, .palavra__grade { grid-template-columns: 1fr; }
  .secao-cab { align-items: start; }
  .palavra__foto { max-width: 340px; }
  .hero__base-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  /* No retrato a foto encaixa pela altura: o horizonte fica sempre a 66% dela.
     A foto ocupa 70% do hero, então a linha d'água cai em 70% × 66%. */
  .hero { max-height: none; min-height: 640px; }
  .hero__foto { height: 70%; object-position: 34% 50%;
    -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
  .hero__horizonte { top: calc(70% * .66); }
  .hero__horizonte { font-size: min(15vw, 4.25rem); }
  .hero__titulo .linha > span, .hero__reflexo .linha > span { display: block; }
  .hero__veu { background:
    linear-gradient(180deg, rgba(1, 24, 45, .5) 0%, rgba(1, 24, 45, 0) 25%),
    linear-gradient(100deg, rgba(1, 24, 45, .45) 0%, rgba(1, 24, 45, 0) 70%); }
  .hero__sub { font-size: 1.05rem; }
  .hero__acoes { width: 100%; }
  .hero__acoes .botao { flex: 1 1 100%; }
  .hero__base-inner { gap: 1rem; }
  .botao--cotar { min-height: 3.6rem; padding: .5rem .5rem .5rem 1.1rem; gap: .75rem; border-radius: 18px; }
  .botao--cotar strong { font-size: 1.08rem; }
  .botao--cotar small { font-size: .8rem; }
  .botao--cotar__seta { width: 2.5rem; height: 2.5rem; border-radius: 12px; }
  .hero__acoes { gap: .35rem; }
  .fatos { grid-template-columns: 1fr; }
  .fatos li, .fatos li + li { padding: 1.5rem 0; border-left: 0; border-bottom: 1px solid rgba(167, 201, 236, .22); grid-template-columns: 6.5rem 1fr; align-items: center; gap: 1rem; }
  .fatos strong { font-size: 3rem; }
  .abas { display: flex; width: 100%; }
  .aba { flex: 1; justify-content: center; padding: .7rem .75rem; font-size: .98rem; }
  .aba small { display: none; }
  .lista a { padding-inline: .25rem; }
  .lista a:hover { padding-inline: .75rem; }
  .logos { grid-template-columns: repeat(3, 1fr); border-radius: 18px; }
  .logos li { padding: .75rem .85rem; aspect-ratio: 4 / 3; }
  .logos img { max-height: calc(24px * var(--s, 1)); }
  .canais { grid-template-columns: 1fr; }
  .painel__arte { aspect-ratio: 4 / 3; }
  .painel__arte--recorte img { width: 80%; margin-top: 16%; }
  .passos { grid-template-columns: 1fr; row-gap: 3.25rem; }
  .hero__reflexo .linha:first-child { display: none; }
  .hero__acoes .botao--vidro { flex: 0 0 auto; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; text-decoration: underline; text-underline-offset: 4px; min-height: 2.75rem; padding-inline: 0; }
  .rodape { padding-bottom: 6rem; }
  .rodape__redes { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* ==========================================================
   Movimento — tudo ligado à água: emergir, acender, boiar, subir
   (só com JS e sem "reduzir movimento"; sem isso, tudo aparece)
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js [data-revela] {
    opacity: 0; transform: translateY(22px);
    transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s);
  }
  .js [data-revela].is-visivel { opacity: 1; transform: none; }

  /* títulos emergem de uma linha, como a manchete do hero */
  .js .emerge { clip-path: inset(100% -5% -25% -5%); transform: translateY(.45em); transition: clip-path 1.1s var(--ease), transform 1.1s var(--ease); }
  .js .emerge.is-visivel { clip-path: inset(-25% -5% -25% -5%); transform: none; }

  .js .passos:not(.is-visivel)::before { transform: scaleX(0); }
  .js .passos li::before { transition: transform .6s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d, 0s) + .3s); }
  .js .passos li:not(.is-visivel)::before { transform: scale(0); }

  .js .palavra__foto:not(.is-visivel) { clip-path: inset(100% 0 0 0 round 200px 200px 28px 28px); }

  /* o carro boia na água */
  .painel__arte--recorte img { animation: boia 5.5s ease-in-out infinite; }
}
@keyframes boia { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -8px; rotate: -.7deg; } }
@keyframes desliza { to { transform: translateX(-50%); } }

/* palavras que acendem com a rolagem */
[data-acende] .pal { opacity: var(--o, 1); transition: opacity .25s linear; }

/* bolhas (canvas) */
.bolhas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* ---------- Fases: cartões que se empilham ---------- */
.fases { background: var(--neve); padding-block: var(--secao) calc(var(--secao) - 1rem); }
.fases__pilha { display: grid; gap: 1.5rem; }
.fase {
  position: sticky; top: calc(6rem + var(--i, 0) * 1.5rem);
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 2rem;
  min-height: min(68vh, 580px); padding: clamp(2rem, 5vw, 4.5rem);
  border-radius: 32px; overflow: hidden;
  transform-origin: 50% 0; transform: scale(var(--escala, 1));
  box-shadow: 0 -12px 40px -24px rgba(1, 24, 45, .45);
}
.fase::after { /* escurece o cartão que ficou por baixo */
  content: ""; position: absolute; inset: 0; background: var(--abismo); opacity: var(--sombra, 0); pointer-events: none;
}
.fase--1 { --i: 0; background: var(--branco); }
.fase--2 { --i: 1; background: #DDE6F0; }
.fase--3 { --i: 2; background: var(--navy); color: var(--branco); }
.fase__quem { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; color: var(--fiorde); margin-bottom: 1rem; }
.fase h3 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); font-weight: 700; color: var(--navy); letter-spacing: -0.03em; max-width: 14ch; }
.fase__texto > p:not(.fase__quem) { margin-top: 1.25rem; color: var(--tinta-suave); max-width: 30rem; font-size: var(--t-1); }
.fase__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.fase__chips a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .55rem 1.1rem; border-radius: 999px;
  background: rgba(2, 48, 89, .07); color: var(--navy); font-weight: 600; text-decoration: none;
  transition: background-color .2s, color .2s, transform .2s var(--ease);
}
.fase__chips a:hover { background: var(--navy); color: var(--branco); transform: translateY(-2px); }
.fase--3 .fase__quem { color: var(--glaciar); }
.fase--3 h3 { color: var(--branco); }
.fase--3 .fase__texto > p:not(.fase__quem) { color: rgba(238, 238, 240, .8); }
.fase--3 .fase__chips a { background: rgba(255, 255, 255, .1); color: var(--branco); }
.fase--3 .fase__chips a:hover { background: var(--branco); color: var(--navy); }
.fase__arte { position: relative; align-self: stretch; display: grid; place-items: center; }
.fase__arte::before {
  content: ""; position: absolute; width: 86%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(167, 201, 236, .75), rgba(167, 201, 236, 0) 68%);
}
.fase--3 .fase__arte::before { background: radial-gradient(circle, rgba(65, 119, 174, .8), rgba(65, 119, 174, 0) 68%); }
.fase__arte img { position: relative; width: 100%; max-height: 420px; object-fit: contain; translate: 0 var(--py, 0px); filter: drop-shadow(0 30px 30px rgba(1, 24, 45, .25)); }

/* ---------- Sinistro ---------- */
.sinistro { background: linear-gradient(180deg, #2F6399, #1D4E82); color: var(--branco); padding-block: var(--secao); }
.sinistro__grade { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.sinistro h2 { font-size: var(--t-4); font-weight: 700; letter-spacing: -0.03em; max-width: 12ch; }
.sinistro__intro > p { margin-top: 1.25rem; color: rgba(255, 255, 255, .86); font-size: var(--t-1); max-width: 30rem; }
.emergencia { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0; }
.emergencia a {
  display: grid; min-width: 6.5rem; padding: .9rem 1.2rem; border-radius: 18px; text-decoration: none;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  transition: background-color .2s, transform .2s var(--ease);
}
.emergencia a:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.emergencia strong { font-family: var(--f-display); font-weight: 900; font-size: 1.9rem; line-height: 1; letter-spacing: -0.02em; }
.emergencia span { font-size: .88rem; color: rgba(255, 255, 255, .8); margin-top: .3rem; }
.sinistro__guia {
  background: var(--branco); color: var(--tinta); border-radius: 28px;
  padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: 0 40px 80px -40px rgba(1, 24, 45, .6);
}
.sinistro .abas { background: var(--gelo); margin-bottom: 1rem; }
.guia { counter-reset: g; }
.guia li { counter-increment: g; display: grid; grid-template-columns: 2.5rem 1fr; column-gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid rgba(2, 48, 89, .1); }
.guia li:last-child { border-bottom: 0; padding-bottom: 0; }
.guia li::before {
  content: counter(g); grid-row: span 2; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center; background: #DDE6F0; color: var(--navy);
  font-family: var(--f-display); font-weight: 900;
}
.guia h3 { font-size: 1.2rem; font-weight: 700; color: var(--navy); letter-spacing: -0.015em; align-self: center; }
.guia p { color: var(--tinta-suave); font-size: .98rem; margin-top: .2rem; max-width: 36rem; }

/* ---------- Marquee de seguradoras ---------- */
.marquee { display: grid; border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 1px rgba(167, 201, 236, .14); }
.marquee__faixa { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__faixa + .marquee__faixa { border-top: 1px solid rgba(167, 201, 236, .14); }
.marquee__trilho { display: flex; width: max-content; animation: desliza var(--dur, 45s) linear infinite; }
.marquee__faixa--2 .marquee__trilho { animation-direction: reverse; }
.marquee:hover .marquee__trilho { animation-play-state: paused; }
.marquee__trilho li { flex: none; width: 240px; height: 120px; display: grid; place-items: center; padding: 1rem 2rem; border-right: 1px solid rgba(167, 201, 236, .14); }
.marquee__trilho li:hover img { opacity: 1; }

/* ---------- Dúvidas ---------- */
.duvidas { position: relative; overflow: hidden; background: #021D3A; color: var(--gelo); padding-block: var(--secao); }
.duvidas__grade { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.duvidas h2 { font-size: var(--t-4); font-weight: 700; color: var(--branco); letter-spacing: -0.03em; max-width: 11ch; }
.duvidas__intro p { margin-top: 1.25rem; color: rgba(238, 238, 240, .72); font-size: var(--t-1); max-width: 24rem; }
.faq { border-top: 1px solid rgba(167, 201, 236, .18); }
.faq__item { border-bottom: 1px solid rgba(167, 201, 236, .18); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  color: var(--branco); letter-spacing: -0.015em; transition: color .2s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(167, 201, 236, .4);
  background:
    linear-gradient(var(--glaciar), var(--glaciar)) center / 12px 2px no-repeat,
    linear-gradient(var(--glaciar), var(--glaciar)) center / 2px 12px no-repeat;
  transition: transform .35s var(--ease), background-color .3s;
}
.faq__item summary:hover { color: var(--glaciar); }
.faq__item[open] summary::after { transform: rotate(45deg); background-color: rgba(167, 201, 236, .15); }
.faq__resp p { padding: 0 3.5rem 1.6rem 0; color: rgba(238, 238, 240, .78); max-width: 46rem; }
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  .faq__item::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
  .faq__item[open]::details-content { block-size: auto; }
}

/* ---------- Chamada final: luz entrando de cima, bolhas subindo ---------- */
.chamada {
  position: relative; overflow: hidden; isolation: isolate; text-align: center; color: var(--branco);
  background: radial-gradient(120% 85% at 50% -15%, #0E5596 0%, #03386A 35%, var(--abismo) 82%);
  padding-block: clamp(6rem, 14vw, 11rem);
}
.chamada__raios { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* emendas invisíveis: o topo nasce da cor de Dúvidas e o pé morre na cor de Contato (::after pinta por cima dos raios) */
.chamada::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #021D3A 0%, rgba(2, 29, 58, 0) 32%, rgba(1, 24, 45, 0) 72%, var(--abismo) 100%); }
.chamada__raios span {
  position: absolute; top: -25%; height: 130%; width: 12%;
  background: linear-gradient(180deg, rgba(167, 201, 236, .38), rgba(167, 201, 236, 0) 72%);
  filter: blur(22px); transform-origin: 50% 0; transform: rotate(var(--r));
  mix-blend-mode: screen;
}
.chamada__raios span:nth-child(1) { left: 8%;  --r: 14deg; }
.chamada__raios span:nth-child(2) { left: 27%; --r: 7deg;  width: 8%; }
.chamada__raios span:nth-child(3) { left: 45%; --r: 0deg;  width: 15%; }
.chamada__raios span:nth-child(4) { left: 64%; --r: -8deg; width: 9%; }
.chamada__raios span:nth-child(5) { left: 82%; --r: -15deg; }
@media (prefers-reduced-motion: no-preference) {
  .chamada__raios span { animation: raio 8s ease-in-out infinite alternate; }
  .chamada__raios span:nth-child(2) { animation-duration: 11s; animation-delay: -3s; }
  .chamada__raios span:nth-child(3) { animation-duration: 9s; animation-delay: -5s; }
  .chamada__raios span:nth-child(4) { animation-duration: 12s; animation-delay: -2s; }
  .chamada__raios span:nth-child(5) { animation-duration: 10s; animation-delay: -6s; }
}
@keyframes raio {
  from { transform: rotate(var(--r)) scaleX(1); opacity: .45; }
  to { transform: rotate(calc(var(--r) + 5deg)) scaleX(1.35); opacity: 1; }
}
.chamada .bolhas { z-index: -1; }
.chamada h2 { font-size: clamp(2.5rem, 1.1rem + 5.2vw, 5.5rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1; max-width: 15ch; margin-inline: auto; text-wrap: balance; }
.chamada p { margin: 1.5rem auto 0; max-width: 34rem; font-size: var(--t-1); color: rgba(255, 255, 255, .85); }
.chamada__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2.5rem; }
.botao--grande { min-height: 3.75rem; padding: 1rem 1.9rem; font-size: 1.15rem; }

/* ---------- Responsivo das novas seções ---------- */
@media (max-width: 900px) {
  .fase { grid-template-columns: 1fr; min-height: 0; top: calc(5.5rem + var(--i, 0) * 1rem); gap: 1rem; }
  .fase__arte { order: -1; }
  .fase__arte img { max-height: 200px; }
  .fase__arte::before { width: 60%; }
  .sinistro__grade, .duvidas__grade { grid-template-columns: minmax(0, 1fr); }
  .faq__resp p { padding-right: 0; }
}
@media (max-width: 640px) {
  .fase { padding: 1.5rem 1.25rem 1.75rem; border-radius: 24px; }
  .fase__arte img { max-height: 160px; }
  .fase__chips a { min-height: 2.5rem; padding: .45rem .9rem; font-size: .95rem; }
  .marquee__trilho li { width: 170px; height: 90px; padding: .75rem 1.25rem; }
  .emergencia a { flex: 1; min-width: 0; }
  .sinistro .aba { padding-inline: .55rem; font-size: .92rem; }
  .chamada__acoes .botao { flex: 1 1 100%; }
}
.fase--3 .fase__arte img { border-radius: 22px; }

/* Campo isca do simulador: invisível para gente, visível para robô */
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Aviso de cookies (só aparece com rastreio de anúncios ligado) */
.cookies {
  position: fixed; z-index: 60; left: 1rem; bottom: 1rem; max-width: 26rem;
  display: grid; gap: .9rem; padding: 1.1rem 1.25rem;
  background: var(--abismo); color: var(--gelo); border: 1px solid rgba(167, 201, 236, .2);
  border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6);
  font-size: .92rem; line-height: 1.5;
}
.cookies a { color: var(--glaciar); }
.cookies__acoes { display: flex; gap: .6rem; justify-content: flex-end; }
.cookies button { min-height: 2.6rem; padding: .5rem 1.1rem; border-radius: 999px; border: 0; cursor: pointer; font-weight: 600; }
.cookies__nao { background: transparent; color: var(--gelo); box-shadow: inset 0 0 0 1px rgba(167, 201, 236, .35); }
.cookies__sim { background: var(--branco); color: var(--navy); }
.cookies button:focus-visible { outline: 2px solid var(--glaciar); outline-offset: 2px; }
@media (max-width: 640px) { .cookies { left: 1rem; right: 1rem; max-width: none; } }

.rodape__legal a { color: inherit; }