/* =====================================================================
   06-secoes.css
   Faixa de numeros, solucoes, atendimento e passos
   Carregado pelo index.html na ordem dos arquivos — a ordem importa
   para a cascata, entao nao troque os <link> de lugar.
   ===================================================================== */

/* ---------------------------------------------------------------
   7. Faixa de confiança
   --------------------------------------------------------------- */
.faixa {
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-200);
  padding: 1.75rem 0;
}
.faixa__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  text-align: center;
}
.faixa__item strong {
  display: block;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  color: var(--azul-700);
  font-weight: 800;
  line-height: 1.1;
}
.faixa__item span { font-size: .9rem; color: var(--cinza-500); }

/* ---------------------------------------------------------------
   8. Cards de serviço (os "quadrados" do modelo)
   --------------------------------------------------------------- */
.servicos__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gap);
}
@media (min-width: 900px) { .servicos__grade { grid-template-columns: repeat(3, 1fr); } }

.card-servico {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.5rem 1.4rem;
  /* Canto assimetrico: a assinatura visual deste projeto, repetida na
     moldura da foto e na galeria. Nao existe em nenhuma referencia. */
  border-radius: var(--raio) var(--raio) var(--raio) 2.2rem;
  /* Chapado, nao degrade: em 9 cards lado a lado o gradiente diagonal
     escurece o canto de cada um e a grade ganha um serrilhado. */
  background: var(--azul-600);
  color: #fff;
  border: 0;
  box-shadow: var(--sombra-azul);
  transition: transform var(--transicao), box-shadow var(--transicao);
  overflow: hidden;
  isolation: isolate;
}
.card-servico::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--azul-700);
  opacity: 0;
  transition: opacity var(--transicao);
  z-index: -1;
}
.card-servico:hover,
.card-servico:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 26px 55px rgba(29, 58, 128, .45);
}
.card-servico:hover::before { opacity: 1; }

/* Circulo branco com icone azul: e assim que os produtos aparecem no
   folder impresso da propria Azul. */
.card-servico__icone {
  width: 60px; height: 60px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--branco);
  color: var(--azul-700);
  box-shadow: 0 4px 14px rgba(16, 31, 69, .25);
  transition: transform var(--transicao);
}
.card-servico__texto { display: block; }
.card-servico:hover .card-servico__icone { transform: scale(1.07); }
.card-servico__icone svg { width: 30px; height: 30px; }

.card-servico__titulo { font-size: 1.15rem; font-weight: 800; color: #fff; line-height: 1.2; margin: 0; letter-spacing: -.01em; }
.card-servico__sub { display: block; font-size: .95rem; opacity: .85; }
.card-servico__frase {
  display: block;
  font-size: var(--txt-xs);
  color: var(--azul-200);
  margin-top: .35rem;
}
.card-servico__mais {
  margin-left: auto;
  align-self: center;
  flex: none;
  writing-mode: vertical-rl;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .55;
  transition: opacity var(--transicao), transform var(--transicao);
}
.card-servico:hover .card-servico__mais,
.card-servico:focus-visible .card-servico__mais { opacity: 1; transform: translateY(-3px); }

.servicos__cta { text-align: center; margin-top: clamp(2rem, 4vw, 2.75rem); }

/* ---------------------------------------------------------------
   9. Atendimento humanizado
   --------------------------------------------------------------- */
.humano__grade {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 880px) { .humano__grade { grid-template-columns: 1fr; } }

.humano__arte {
  position: relative;
  display: grid;
  place-items: center;
}
.humano__arte {
  margin: 0;
  display: block;
  padding: 1.1rem 0 1.1rem 1.1rem;
}

/* Moldura de canto assimetrico + um "canto" vazado atras, deslocado.
   Nada de mancha organica com circulo verde por cima: aquilo era o
   desenho do print do concorrente, nao nosso. */
.humano__canto {
  position: absolute;
  top: 0; left: 0;
  width: clamp(90px, 16vw, 140px);
  aspect-ratio: 1;
  border: 3px solid var(--azul-300);
  border-right: 0;
  border-bottom: 0;
  border-radius: var(--raio-lg) 0 0 0;
}
.humano__moldura {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--raio-lg) var(--raio-lg) var(--raio-lg) 4.5rem;
  box-shadow: var(--sombra-lg);
  background: var(--azul-800);
}
.humano__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  opacity: 1;
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.humano__arte:hover .humano__foto { transform: scale(1.05); }
.humano__moldura::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(23, 48, 106, .55), transparent);
  pointer-events: none;
}
/* So a morfose do contorno. O rotate girava o rosto de uma pessoa em loop. */

/* Etiqueta encostada na borda de baixo, meia fora da moldura. */
.humano__etiqueta {
  position: absolute;
  left: 0;
  bottom: clamp(1.5rem, 4vw, 3rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  max-width: calc(100% - 2rem);
  padding: .8rem 1.4rem .8rem .9rem;
  border-radius: var(--raio-full);
  background: var(--branco);
  color: var(--cinza-900);
  box-shadow: var(--sombra-lg);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.humano__etiqueta:hover {
  text-decoration: none;
  transform: translateX(6px);
  box-shadow: 0 24px 50px rgba(16, 31, 69, .28);
}
.humano__etiqueta svg {
  width: 34px; height: 34px;
  flex: none;
  color: var(--zap);
}
.humano__etiqueta strong { display: block; font-size: 1rem; line-height: 1.2; }
.humano__etiqueta small { display: block; font-size: .84rem; color: var(--cinza-500); }


.humano__lista { display: grid; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.humano__item { display: flex; gap: 1.1rem; align-items: flex-start; }
.humano__item-icone {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--azul-100);
  color: var(--azul-700);
  transition: transform var(--transicao), background var(--transicao);
}
.humano__item:hover .humano__item-icone { background: var(--azul-200); }
.humano__item-icone svg { width: 24px; height: 24px; }
.humano__item h3 { margin-bottom: .25rem; color: var(--azul-700); }
.humano__item p { margin: 0; font-size: .97rem; }

/* ---------------------------------------------------------------
   10. Passos
   --------------------------------------------------------------- */
/* Clara de proposito: eram sete faixas escuras seguidas na rolagem, e a
   cliente pediu tema claro. Sobra escuro no hero, no CTA final, na saida
   do simulador (onde o contraste tem funcao) e no rodape. */
.passos {
  background: var(--azul-50);
  position: relative;
  overflow: hidden;
}

.passos__grade {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gap);
  counter-reset: passo;
}
/* Linha que costura as tres etapas — deixa claro que e um caminho, e nao
   tres blocos independentes como no material de referencia. */
@media (min-width: 780px) {
  .passos__grade::before {
    content: '';
    position: absolute;
    top: 2.6rem;
    left: 16%;
    right: 16%;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--azul-200) 0 10px, transparent 10px 18px);
  }
}
.passo {
  position: relative;
  text-align: center;
  padding: 3.6rem 1.5rem 1.75rem;
  border-radius: var(--raio);
  background: var(--branco);
  border: 1.5px solid var(--cinza-200);
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.passo:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
.passo__num {
  counter-increment: passo;
  position: absolute;
  top: 1.1rem; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 4px solid var(--azul-50);
  background: var(--azul-600);
  color: #fff;
  font-weight: 800;
  box-shadow: var(--sombra-azul);
}
.passo__num::before { content: counter(passo); }
.passo__icone { width: 52px; height: 52px; margin: 0 auto .9rem; display: grid; place-items: center; }
.passo__icone svg { width: 40px; height: 40px; color: var(--azul-600); }
.passo h3 { color: var(--cinza-900); }
.passo p { margin: 0; font-size: var(--txt-sm); color: var(--cinza-700); }

.passos__cta { text-align: center; margin-top: clamp(2rem, 4vw, 2.75rem); }