/* Gilroy é licença de desktop: entra só a instalada no computador (local). Sem ela, a Poppins assume. */
@font-face { font-family: "Gilroy"; font-weight: 400; src: local("Gilroy-Regular"), local("Gilroy Regular"); font-display: swap; }
@font-face { font-family: "Gilroy"; font-weight: 500; src: local("Gilroy-Medium"), local("Gilroy Medium"); font-display: swap; }
@font-face { font-family: "Gilroy"; font-weight: 800; src: local("Gilroy-Extrabold"), local("Gilroy ExtraBold"); font-display: swap; }

:root {
  --navy: #114176; --gelo: #7fd4f7;
  --zap: #25d366; --zap-escuro: #1fb958; --zap-texto: #06281a;
  --titulo: "Gilroy", "Poppins", system-ui, sans-serif;
  --texto: "Gilroy", "Poppins", system-ui, sans-serif;
  --dado: "Space Grotesk", system-ui, sans-serif;
  --borda: rgba(255, 255, 255, .16);
  --branco-2: rgba(255, 255, 255, .88);
}
* { box-sizing: border-box; }
body { margin: 0; background: #0a5f8b; color: #fff; font: 400 17px/1.5 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
h1 { font-family: var(--titulo); font-weight: 800; letter-spacing: -.01em; line-height: 1.12; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

/* o mar aberto da imersão, com a caixa no centro da tela */
.heroi { display: flex; align-items: center; justify-content: center; min-height: 100svh; padding: 20px 16px; background: #0a5f8b url(../midia/mar-aberto-celular.webp) 50% 50% / cover no-repeat; }
.heroi__txt { display: flex; flex-direction: column; align-items: center; width: min(780px, 100%); padding: 26px 20px 22px; border-radius: 22px; text-align: center;
  background: rgba(6, 34, 64, .68); box-shadow: inset 0 0 0 1px var(--borda), 0 30px 80px rgba(2, 20, 40, .3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.heroi__edicao { padding-left: .55em; font: 700 13px/1 var(--dado); letter-spacing: .55em; text-transform: uppercase; }
.heroi__logo { width: min(250px, 78%); height: auto; margin-top: 10px; }

.passos { width: 100%; max-width: 340px; margin-top: 18px; }
.passos__rotulo { display: flex; justify-content: center; gap: 10px; font: 700 12px/1.2 var(--dado); letter-spacing: .14em; text-transform: uppercase; color: var(--branco-2); }
.passos__rotulo b { color: #fff; }
.passos__barra { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 9px; }
.passos__barra i { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .24); overflow: hidden; }
.passos__barra i:first-child::after { content: ""; display: block; height: 100%; background: var(--gelo); transform-origin: left; animation: encher .8s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes encher { from { transform: scaleX(0); } }

.heroi h1 { margin-top: 16px; font-size: clamp(24px, 7vw, 30px); }
.lead { margin-top: 12px; max-width: 36em; color: var(--branco-2); }
.lead--acao { margin-top: 8px; color: #fff; font-weight: 800; }

/* o único verde da página: a pessoa reconhece o WhatsApp antes de ler */
.whats { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 440px; margin-top: 18px; padding: 15px 18px; border-radius: 12px; text-decoration: none;
  color: var(--zap-texto); background: var(--zap); font: 800 18px/1.2 var(--titulo); box-shadow: 0 14px 30px rgba(3, 30, 56, .34); transition: background-color .2s, transform .15s; }
.whats svg { flex: none; width: 28px; height: 28px; fill: currentColor; }
.whats span { text-wrap: balance; }
.whats:hover { background: var(--zap-escuro); transform: translateY(-1px); }
.whats:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.nota { margin-top: 12px; font: 500 14px/1.4 var(--texto); color: var(--branco-2); }
.priv { margin-top: 10px; font-size: 12.5px; line-height: 1.3; }
.priv a { color: var(--branco-2); text-underline-offset: 2px; }
.priv a:hover { color: #fff; }

@media (max-width: 767px) and (max-height: 640px) {
  .heroi { padding: 10px 12px; }
  .heroi__txt { padding: 16px 16px 14px; }
  .heroi__edicao { font-size: 11px; }
  .heroi__logo { width: 180px; margin-top: 7px; }
  .passos { margin-top: 12px; }
  .heroi h1 { margin-top: 11px; font-size: 22px; }
  .lead { margin-top: 7px; font-size: 15px; line-height: 1.38; }
  .lead--acao { margin-top: 4px; }
  .whats { margin-top: 10px; padding: 11px 14px; font-size: 16px; }
  .whats svg { width: 24px; height: 24px; }
  .nota { margin-top: 8px; font-size: 13px; }
}

@media (min-width: 768px) {
  .heroi { padding: 28px; background-image: url(../midia/mar-aberto.webp); }
  .heroi__txt { padding: 44px 64px 38px; border-radius: 28px; }
  .heroi__edicao { font-size: 16px; }
  .heroi__logo { width: 330px; margin-top: 12px; }
  .passos { max-width: 420px; margin-top: 26px; }
  .heroi h1 { margin-top: 24px; font-size: clamp(32px, 3.2vw, 44px); }
  .lead { margin-top: 16px; font-size: 19px; }
  .lead--acao { margin-top: 10px; }
  .whats { max-width: 540px; margin-top: 24px; padding: 20px 26px; font-size: 20px; }
  .nota { margin-top: 16px; font-size: 15px; }
}
@media (min-width: 768px) and (max-height: 700px) {
  .heroi { padding: 16px; }
  .heroi__txt { padding: 26px 48px 22px; }
  .heroi__logo { width: 260px; }
  .passos { margin-top: 16px; }
  .heroi h1 { margin-top: 14px; font-size: 30px; }
  .lead { margin-top: 10px; font-size: 17px; }
  .whats { margin-top: 14px; padding: 15px 22px; }
  .nota { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .passos__barra i:first-child::after { animation: none; }
  .whats { transition: none; }
}