:root{
  --azul-escuro:   #0E2238;
  --azul-medio:    #163457;
  --branco:        #FFFFFF;
  --texto:         #1C1C1C;
  --texto-suave:   #5A6472;
  --linha-clara:   #E3E6EA;
  --acento-1:      #E9438C; /* rosa */
  --acento-2:      #7A2FC4; /* roxo */
  --acento-3:      #3B6FE8; /* azul */
  --faixa-1:       #7A1257; /* rosa profundo — cabeçalho/rodapé */
  --faixa-2:       #47186B; /* roxo profundo — cabeçalho/rodapé */
  --faixa-3:       #47186B; /* azul profundo — cabeçalho/rodapé */
  --wpp-verde:     #25D366;
  --fonte-titulo:  'Fraunces', serif;
  --fonte-corpo:   'Inter', sans-serif;
  --fonte-mono:    'IBM Plex Mono', monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--branco);
  color:var(--texto);
  font-family:var(--fonte-corpo);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

/* ---------- linha assinatura (ondulada, gradiente) ---------- */
.linha-assinatura{
  width:100%;
  max-width:520px;
  height:16px;
  margin-top:14px;
  margin-bottom:28px;
}
.linha-assinatura svg{ width:100%; height:100%; display:block; }

/* ---------- CABEÇALHO / RODAPÉ (faixa azul) ---------- */
.faixa-azul{
  background:linear-gradient(160deg, var(--faixa-1) 0%, var(--faixa-2) 55%, var(--faixa-3) 100%);
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--branco);
  padding:70px 24px;
}
header.faixa-azul{ min-height:280px; flex-direction:column; }
footer .faixa-azul-rodape{ min-height:150px; flex-direction:column; padding:44px 24px 36px; }

.logo{
  font-family:var(--fonte-titulo);
  font-weight:600;
  letter-spacing:0.04em;
  font-size:clamp(2.2rem, 6vw, 3.6rem);
}
.logo-imagem{
  width:100%;
  max-width:560px;
  height:auto;
}
.logo-sub{
  font-family:var(--fonte-mono);
  font-size:0.72rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--acento-2);
  margin-top:10px;
}
.logo.pequeno{ font-size:clamp(1.4rem, 4vw, 1.9rem); }
.logo-sub.pequeno{ margin-top:6px; }

/* ---------- FOTOS DE SEÇÃO (placeholders) ---------- */
.foto{
  width:100%;
  aspect-ratio:16/8;
  background:
    linear-gradient(135deg, rgba(39,158,147,0.14), rgba(242,180,65,0.14)),
    repeating-linear-gradient(45deg, #F4F5F7 0 2px, #ECEEF1 2px 40px);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--texto-suave);
  font-family:var(--fonte-mono);
  font-size:0.78rem;
  letter-spacing:0.05em;
  text-align:center;
  border-top:1px solid var(--linha-clara);
  border-bottom:1px solid var(--linha-clara);
}
.foto span{
  background:rgba(255,255,255,0.85);
  padding:8px 16px;
  border-radius:100px;
}

/* ---------- SEÇÕES DE TEXTO ---------- */
.secao{
  max-width:760px;
  margin:0 auto;
  padding:72px 28px;
}
.secao h2{
  font-family:var(--fonte-titulo);
  font-weight:500;
  font-size:clamp(1.9rem, 4.5vw, 2.6rem);
}
.secao p{
  font-size:1.05rem;
  color:var(--texto);
  max-width:620px;
}
.secao p + p{ margin-top:16px; }

/* ---------- CARROSSEL "MEU TRABALHO" ---------- */
.carrossel-wrap{
  position:relative;
  max-width:900px;
  margin:0 auto;
  padding:0 28px 90px;
}
.carrossel{
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:10px 4px 16px;
  scrollbar-width:none;
  align-items:center;
}
.carrossel::-webkit-scrollbar{ display:none; }
.carrossel-item{
  flex:0 0 auto;
  height:320px;
  width:auto;
  scroll-snap-align:center;
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--linha-clara);
}
.carrossel-item img{
  height:100%;
  width:auto;
  max-width:none;
  display:block;
}
.carrossel-item span{
  background:rgba(255,255,255,0.85);
  padding:8px 16px;
  border-radius:100px;
}
.carrossel-nav{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:18px;
}
.carrossel-nav{ display:none; }
.carrossel-btn{
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--linha-clara);
  background:var(--branco);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background 0.2s ease, transform 0.15s ease;
}
.carrossel-btn:hover{ background:#F4F5F7; transform:translateY(-1px); }
.carrossel-btn svg{ width:16px; height:16px; stroke:var(--azul-escuro); }

/* ---------- SLIDER "TRÊS FRENTES" (um card por vez, avança sozinho) ---------- */
.frentes-wrap{
  position:relative;
  max-width:640px;
  margin:0 auto;
  padding:8px 28px 70px;
}
.frentes-viewport{
  overflow:hidden;
  border-radius:16px;
  border:1px solid var(--linha-clara);
  box-shadow:0 6px 24px rgba(14,34,56,0.07);
}
.frentes-track{
  display:flex;
  transition:transform 0.65s cubic-bezier(.65,0,.35,1);
}
.frente-slide{
  flex:0 0 100%;
  width:100%;
  box-sizing:border-box;
  background:var(--branco);
  padding:48px 40px 44px;
  text-align:center;
}
.frente-icone{
  width:60px;
  height:60px;
  margin:0 auto 22px;
}
.frente-icone svg{ width:100%; height:100%; }
.frente-numero{
  display:inline-block;
  font-family:var(--fonte-mono);
  font-size:0.7rem;
  letter-spacing:0.2em;
  background:linear-gradient(90deg, var(--acento-1), var(--acento-3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:14px;
}
.frente-slide h3{
  font-family:var(--fonte-titulo);
  font-weight:600;
  font-size:1.7rem;
  color:var(--azul-escuro);
  margin-bottom:16px;
}
.frente-slide p{
  font-size:1.02rem;
  color:var(--texto-suave);
  line-height:1.65;
  max-width:440px;
  margin:0 auto;
}

.frentes-controles{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin-top:22px;
}
.frentes-dots{
  display:flex;
  align-items:center;
  gap:9px;
}
.frente-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  border:none;
  padding:0;
  background:var(--linha-clara);
  cursor:pointer;
  transition:background 0.25s ease, transform 0.25s ease;
}
.frente-dot.ativo{
  background:linear-gradient(90deg, var(--acento-1), var(--acento-2), var(--acento-3));
  transform:scale(1.35);
}

/* ---------- SELOS "MULHER · FAMÍLIA · FÉ" (seção Quem sou) ---------- */
.pilares-badges{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:26px;
}
.pilar-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 20px 9px 14px;
  border-radius:100px;
  background:
    linear-gradient(var(--branco), var(--branco)) padding-box,
    linear-gradient(120deg, var(--acento-1), var(--acento-2), var(--acento-3)) border-box;
  border:1.5px solid transparent;
  font-family:var(--fonte-mono);
  font-size:0.78rem;
  letter-spacing:0.05em;
  font-weight:600;
  color:var(--azul-escuro);
  opacity:0;
  transform:scale(0.85);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.pilar-badge.visivel{ opacity:1; transform:scale(1); }
.pilar-badge:nth-child(1){ transition-delay:0s; }
.pilar-badge:nth-child(2){ transition-delay:.12s; }
.pilar-badge:nth-child(3){ transition-delay:.24s; }
.pilar-badge svg{ width:16px; height:16px; color:var(--acento-2); flex-shrink:0; }

/* ---------- TEXTO EM DESTAQUE (gradiente) ---------- */
.destaque{
  background:linear-gradient(90deg, var(--acento-1), var(--acento-2), var(--acento-3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:600;
}

/* ---------- BLOCOS DE DESTAQUE (trechos sobre fé / família) ---------- */
.bloco-destaque{
  position:relative;
  margin:30px 0;
  padding:24px 28px;
  border-radius:4px 14px 14px 4px;
  background:linear-gradient(100deg, rgba(233,67,140,0.06), rgba(59,111,232,0.05));
}
.bloco-destaque::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  border-radius:4px;
  background:linear-gradient(180deg, var(--acento-1), var(--acento-2), var(--acento-3));
}
.bloco-destaque p{
  margin:0;
  max-width:none;
  font-style:italic;
  color:var(--texto);
}
.bloco-destaque--alt{
  background:linear-gradient(100deg, rgba(122,47,196,0.06), rgba(59,111,232,0.06));
}

/* ---------- CHAMADA FINAL (seção Quem sou) ---------- */
.chamada-final{
  text-align:center;
  font-family:var(--fonte-titulo);
  font-weight:600;
  font-size:1.28rem;
  line-height:1.5;
  color:var(--azul-escuro);
  max-width:560px !important;
  margin:40px auto 0 !important;
  padding-top:30px;
  border-top:1px solid var(--linha-clara);
}
.chamada-final::after{
  content:'';
  display:block;
  width:64px;
  height:4px;
  margin:18px auto 0;
  border-radius:4px;
  background:linear-gradient(90deg, var(--acento-1), var(--acento-2), var(--acento-3));
}

/* ---------- ANIMAÇÃO: revelar ao rolar a página ---------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visivel{
  opacity:1;
  transform:translateY(0);
}
/* leve cascata entre parágrafos de uma mesma seção */
.secao p:nth-of-type(1){ transition-delay:0s; }
.secao p:nth-of-type(2){ transition-delay:.08s; }
.secao p:nth-of-type(3){ transition-delay:.16s; }
.secao p:nth-of-type(4){ transition-delay:.24s; }
.secao p:nth-of-type(5){ transition-delay:.32s; }
.secao p:nth-of-type(6){ transition-delay:.4s; }
.secao p:nth-of-type(7){ transition-delay:.48s; }

/* ---------- MANCHAS DECORATIVAS DE FUNDO (rosa/roxo/azul) ---------- */
.secao-decorada{
  position:relative;
  overflow:hidden;
}
.secao-decorada::before{
  content:'';
  position:absolute;
  width:440px;
  height:440px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--acento-1), var(--acento-3));
  opacity:0.07;
  filter:blur(70px);
  top:-180px;
  right:-160px;
  pointer-events:none;
}
.secao-decorada--esquerda::before{
  top:auto;
  right:auto;
  left:-160px;
  bottom:-180px;
  background:linear-gradient(135deg, var(--acento-2), var(--acento-1));
}

/* ---------- ÍCONE DE CITAÇÃO DECORATIVO ---------- */
.citacao-decorativa{
  width:64px;
  height:auto;
  opacity:0.9;
  margin-bottom:12px;
}
.citacao-decorativa svg{ width:100%; height:100%; display:block; }

/* ---------- LINHA DO TEMPO (parágrafos de "Meu trabalho") ---------- */
.linha-tempo{
  position:relative;
  margin-top:8px;
}
.linha-tempo::before{
  content:'';
  position:absolute;
  left:5px;
  top:8px;
  bottom:8px;
  width:2px;
  background:linear-gradient(180deg, var(--acento-1), var(--acento-2), var(--acento-3));
  opacity:0.35;
}
.linha-tempo-item{
  position:relative;
  padding-left:28px;
}
.linha-tempo-item::before{
  content:'';
  position:absolute;
  left:0;
  top:9px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--acento-1), var(--acento-2), var(--acento-3));
  box-shadow:0 0 0 4px var(--branco);
}
.linha-tempo-item + .linha-tempo-item{ margin-top:16px; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .pilar-badge{ opacity:1; transform:none; transition:none; }
}

/* ---------- RODAPÉ ---------- */
footer{ background:var(--faixa-3); }
.rodape-texto{
  font-size:0.95rem;
  color:rgba(255,255,255,0.78);
  max-width:420px;
  margin-top:16px;
}

.redes-sociais{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin-top:26px;
}
.rede-icone{
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.22);
  transition:transform 0.2s ease, background 0.2s ease;
}
.rede-icone:hover{ transform:translateY(-3px); background:rgba(255,255,255,0.16); }
.rede-icone svg{ width:22px; height:22px; fill:var(--branco); }

/* linha fina clara + copyright */
.rodape-base{
  border-top:1px solid rgba(255,255,255,0.14);
  padding:22px 24px 30px;
  text-align:center;
}
.copyright{
  font-family:var(--fonte-mono);
  font-size:0.74rem;
  letter-spacing:0.03em;
  color:rgba(255,255,255,0.55);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.copyright a{
  color:rgba(255,255,255,0.55);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.copyright a:hover{ color:#fff; border-color:rgba(255,255,255,0.5); }
.ponto{ opacity:0.5; }

/* ---------- BOTÕES FIXOS ---------- */
.btn-fixo{
  position:fixed;
  bottom:22px;
  width:54px;
  height:54px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
  z-index:999;
  text-decoration:none;
  border:none;
  cursor:pointer;
}

#btn-topo{
  right:22px;
  background:linear-gradient(135deg, var(--acento-1), var(--acento-2), var(--acento-3));
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity 0.25s ease, transform 0.25s ease;
}
#btn-topo.visivel{ opacity:1; pointer-events:auto; transform:translateY(0); }
#btn-topo svg{ width:22px; height:22px; stroke:var(--branco); }

#btn-wpp{
  left:22px;
  background:var(--wpp-verde);
}
#btn-wpp svg{ width:26px; height:26px; fill:var(--branco); }
#btn-wpp::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--wpp-verde);
  animation:pulso 2.4s ease-out infinite;
  z-index:-1;
}
@keyframes pulso{
  0%{ transform:scale(1); opacity:0.5; }
  100%{ transform:scale(1.7); opacity:0; }
}

@media (max-width:600px){
  header.faixa-azul{ min-height:220px; padding:50px 20px; }
  .secao{ padding:48px 20px; }
  .secao p{ font-size:1rem; }
  .btn-fixo{ width:48px; height:48px; bottom:16px; }
  #btn-topo{ right:16px; }
  #btn-wpp{ left:16px; }

  .frentes-wrap{ padding:4px 20px 56px; }
  .frente-slide{ padding:38px 26px 34px; }
  .frente-icone{ width:50px; height:50px; margin-bottom:16px; }
  .frente-slide h3{ font-size:1.4rem; margin-bottom:12px; }
  .frente-slide p{ font-size:0.94rem; line-height:1.6; }
  .frente-numero{ font-size:0.62rem; margin-bottom:12px; }
  .frentes-controles{ gap:14px; margin-top:18px; }

  .carrossel-wrap{ padding:0 20px 64px; }
  .carrossel{ gap:12px; }
  .carrossel-item{ height:240px; }

  .redes-sociais{ gap:16px; row-gap:14px; }

  .pilares-badges{ gap:9px; margin-bottom:20px; }
  .pilar-badge{ padding:7px 16px 7px 12px; font-size:0.72rem; }
  .pilar-badge svg{ width:14px; height:14px; }

  .bloco-destaque{ padding:20px 20px; margin:24px 0; }

  .chamada-final{ font-size:1.14rem; padding-top:24px; margin-top:32px !important; }
}

@media (max-width:380px){
  .frente-slide{ padding:32px 20px 28px; }
  .frente-slide h3{ font-size:1.22rem; }
  .frente-slide p{ font-size:0.9rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  #btn-wpp::before{ animation:none; }
  .frentes-track{ transition:none; }
}