/* =====================================================================
   05-hero.css
   Primeira dobra
   Carregado pelo index.html na ordem dos arquivos — a ordem importa
   para a cascata, entao nao troque os <link> de lugar.
   ===================================================================== */

/* ---------------------------------------------------------------
   6. Hero
   --------------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(8rem, 14vw, 11rem) 0 clamp(4rem, 8vw, 7rem);
  background:
    radial-gradient(1100px 600px at 78% -10%, rgba(109, 132, 245, .5), transparent 60%),
    linear-gradient(150deg, var(--azul-900) 0%, var(--azul-700) 52%, var(--azul-600) 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* Logo no hero. Altura em `clamp` para nao roubar espaco do titulo no celular,
   onde ela e a UNICA marca visivel (a barra do topo nao existe em <=940px).

   AUMENTADA em 30/07/2026 (May: "a logo da Azul ta pequena demais na pagina
   inicial"). Saiu de clamp(52px, 6vw, 74px) para os valores abaixo — ~50% maior.
   O teto de 116px nao e chute: a logo e 505x305 (1,66:1), entao 116px de altura
   dao ~192px de largura, que cabe folgado na coluna de texto do hero sem empurrar
   o <h1> para baixo da dobra. O piso de 76px e o que mantem a marca legivel no
   celular, onde ela e a unica que aparece. */
.hero__logo {
  display: block;
  height: clamp(76px, 9vw, 116px);
  width: auto;
  margin: 0 0 1.35rem;
}

.hero h1 { color: #fff; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #fff, var(--azul-200) 55%, #9fb6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__grade {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 900px) {
  /* Texto corrido centralizado e o pior caso para baixa visao: cada linha
     comeca num lugar diferente. Centraliza so botao e selo. */
  .hero__grade { grid-template-columns: 1fr; }
  .hero__acoes .btn { flex: 1 1 220px; }
  .rodape { padding-bottom: 6rem; }
}

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem 1rem .45rem .55rem;
  border-radius: var(--raio-full);
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .28);
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 1.35rem;
  backdrop-filter: blur(6px);
}
.hero__tag span:first-child {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--zap);
  font-size: .7rem;
}

.hero__texto { font-size: clamp(var(--txt-md), .98rem + .3vw, var(--txt-lg)); color: rgba(255, 255, 255, .86); max-width: 33rem; }
@media (max-width: 900px) { .hero__texto { margin-inline: auto; } }

.hero__acoes { display: flex; flex-wrap: wrap; gap: .9rem; margin: 2rem 0 2.25rem; }

.hero__selos {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  list-style: none;
  margin: 0; padding: 0;
}
.hero__selos li {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem;
  border-radius: var(--raio-full);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .35);
  font-size: var(--txt-sm);
  font-weight: 700;
}
.hero__selos svg { width: 15px; height: 15px; color: var(--azul-200); }

/* Card de destaque flutuante */
.hero__card {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--raio-lg) var(--raio-lg) var(--raio-lg) 3rem;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  backdrop-filter: blur(16px);
  box-shadow: var(--sombra-lg);
}
@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.hero__card__titulo {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 1.1rem;
  letter-spacing: -.01em;
}
.hero__card ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .7rem; }
.hero__card li { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; color: rgba(255,255,255,.9); }
.hero__card li svg { width: 20px; height: 20px; flex: none; color: var(--azul-200); margin-top: 2px; }
.hero__card .btn { width: 100%; }

/* Telefone por extenso: quem tem 75 anos prefere ligar a digitar. */
.hero__card__fone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .6rem 0 1.1rem;
  color: #fff;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -.02em;
}
.hero__card__fone:hover { text-decoration: none; color: var(--azul-200); }
.hero__card__fone svg { width: 1em; height: 1em; color: var(--zap); flex: none; }

.hero__microcopy {
  font-size: var(--txt-xs);
  color: rgba(255, 255, 255, .78);
  margin: -1.4rem 0 2rem;
}

.secao--estreita { padding: clamp(2rem, 4vw, 3rem) 0 0; }

.menu-btn__texto {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 1px;
}
.nota-inline { font-style: normal; opacity: .72; font-size: .86em; display: block; }

/* Ondas / bolhas de fundo */
.hero__bolha {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.2), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.hero__bolha--1 { width: 420px; height: 420px; top: -120px; right: -80px;  animation: flutuar 9s ease-in-out infinite; }
.hero__bolha--2 { width: 260px; height: 260px; bottom: -90px; left: -70px; animation: flutuar 11s ease-in-out infinite reverse; }

.hero__onda { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: -1; }
.hero__onda svg { width: 100%; height: clamp(40px, 6vw, 80px); display: block; fill: var(--branco); }