/* =============================================================
   COMPONENTES — cards, features, números, blocos split
   Peças reaproveitadas em mais de uma página.

   O visual é "vidro sobre água" (glassmorphism): fundo translúcido
   azulado + blur, pra água do .aqua-bg aparecer por baixo. O cliente
   recusou a versão branca ("muito branco"), daí o tom azulado.
   ============================================================= */

/* ---------- Card de vidro ---------- */
.card {
  position: relative; overflow: hidden;
  background: rgba(224,242,253,.56);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--r-lg);
  padding: 2rem;
  box-shadow: 0 14px 40px rgba(6,40,74,.22), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform var(--t-med), box-shadow var(--t-med), background var(--t-med);
}
.card:hover {
  transform: translateY(-8px);
  background: rgba(233,246,254,.74);
  box-shadow: 0 30px 64px rgba(6,40,74,.30), inset 0 1px 0 rgba(255,255,255,.5);
}
.card__icon {
  width: 60px; height: 60px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--grad-blue); color: #fff;
  margin-bottom: 1.3rem; box-shadow: var(--shadow-md);
  transition: transform var(--t-med);
}
.card:hover .card__icon { transform: rotate(-6deg) scale(1.06); }
.card__icon svg { width: 30px; height: 30px; }
.card h3 { margin-bottom: .5rem; }
.card p  { font-size: .98rem; }

/* Fita laranja que sobe na lateral do card no hover */
.card--accent::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 5px;
  background: var(--grad-cta);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--t-med);
}
.card--accent:hover::before { transform: scaleY(1); }

/* ---------- Item com check verde (lista de benefícios) ---------- */
.feature { display: flex; gap: 1rem; align-items: flex-start; }
.feature__check {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(24,169,87,.12); color: var(--c-green);
  display: grid; place-items: center; margin-top: 2px;
}
.feature__check svg { width: 18px; height: 18px; }
.feature h4 { font-family: 'Outfit', sans-serif; font-size: 1.08rem; color: var(--ink); margin-bottom: .15rem; }
.feature p  { font-size: .96rem; }

/* ---------- Etapas numeradas (página Serviços) ---------- */
.step { position: relative; text-align: center; }
.step__num {
  width: 64px; height: 64px; margin: 0 auto 1.1rem;
  border-radius: 50%; background: #fff; border: 2px solid var(--c-blue-100);
  color: var(--c-blue-600);
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.5rem;
  display: grid; place-items: center; box-shadow: var(--shadow-sm);
}

/* ---------- Aviso destacado ---------- */
.notice {
  display: flex; gap: .85rem; align-items: center;
  max-width: 820px; margin: 0 auto clamp(2rem,4vw,3rem);
  padding: 1rem 1.35rem;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  font-size: .95rem; color: var(--ink);
}
.notice svg { width: 24px; height: 24px; color: var(--c-orange); flex: 0 0 auto; }

/* ---------- Números (barra de confiança da home + painel do Sobre) ---------- */
.trustbar {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: var(--r-lg); padding: 2rem;
  box-shadow: 0 18px 50px rgba(11,60,107,.18);
  margin-top: -4rem;              /* sobe e "monta" na onda do hero */
  position: relative; z-index: 5;
}
.stat { text-align: center; }
.stat .num { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.7rem); color: var(--c-blue-600); line-height: 1; }
.stat .lbl { font-size: .9rem; color: var(--muted); margin-top: .35rem; }

/* No Sobre os números ficam soltos sobre a água (sem a .trustbar), e azul
   sobre azul sumia. Este painel de vidro devolve o contraste. */
.stats-panel {
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: 0 18px 50px rgba(11,60,107,.18);
}
.stats-panel .stat .num { color: var(--c-blue-700); }
.stats-panel .stat .lbl { color: var(--c-navy); }

/* ---------- Bloco split (texto de um lado, mídia do outro) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.split--rev .split__media { order: 2; }   /* alterna o lado a cada seção */

.media-frame {
  position: relative; aspect-ratio: 4/3;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--grad-blue); box-shadow: var(--shadow-lg);
}
.media-frame img { width: 100%; height: 100%; object-fit: contain; }
.media-frame--ph { display: grid; place-items: center; }

/* ---------- Painel 2x2 de valores (home) ---------- */
.values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.9rem,2vw,1.2rem); }
.value-card {
  background: rgba(224,242,253,.58);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--r-lg);
  padding: clamp(1.2rem,2.5vw,1.7rem);
  box-shadow: 0 14px 36px rgba(6,40,74,.20), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform var(--t-med), background var(--t-med);
}
.value-card:hover { transform: translateY(-6px); background: rgba(233,246,254,.74); }
.value-card__ico {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--grad-blue); color: #fff;
  margin-bottom: .9rem; box-shadow: var(--shadow-md);
}
.value-card__ico svg { width: 24px; height: 24px; }
.value-card h4 { font-family: 'Outfit', sans-serif; color: var(--c-navy); font-size: 1.12rem; margin-bottom: .25rem; }
.value-card p  { font-size: .9rem; color: var(--muted); line-height: 1.5; }

/* ---------- Faixa de CTA ---------- */
.cta-band {
  position: relative; overflow: hidden; text-align: center;
  background: var(--grad-hero); border-radius: var(--r-xl);
  padding: clamp(2.5rem,5vw,4rem); color: #fff;
}
.cta-band h2 { color: #fff; }
.cta-band p  { color: #CFE7F7; max-width: 540px; margin: 1rem auto 2rem; }
.cta-band .hero__waves { opacity: .5; }

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
  .split, .split--rev .split__media { grid-template-columns: 1fr; order: 0; }
  .trustbar { grid-template-columns: repeat(2,1fr); gap: 1.4rem; }
}
@media (max-width: 760px) {
  /* Desempenho: backdrop-filter é caro no celular. Trocamos o blur por
     um fundo mais opaco — de longe o efeito é praticamente o mesmo.
     Estas regras PRECISAM vir depois das definições acima. */
  .card, .section--tint, .trustbar, .notice, .stats-panel {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .card        { background: rgba(230,244,253,.90); }
  .section--tint { background: linear-gradient(180deg, rgba(5,42,80,.15), rgba(5,42,80,.07)); }
  .trustbar    { background: rgba(233,246,254,.94); }
  .notice      { background: rgba(233,246,254,.92); }
  .stats-panel { background: rgba(233,246,254,.94); }
}
@media (max-width: 620px) {
  .trustbar { grid-template-columns: 1fr 1fr; margin-top: -3rem; padding: 1.4rem; }
  .stats-panel { padding: 1.5rem 1.2rem; }
}
@media (max-width: 520px) {
  .values-grid { grid-template-columns: 1fr; }
}