/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  /* Paleta institucional (PSD) — azul > verde, detalhe amarelo */
  --azul: #123e8f;
  --azul-escuro: #0b2a63;
  --verde: #0f9b52;
  --verde-escuro: #0a6e3a;
  --amarelo: #ffd400;
  --branco: #ffffff;
  --cinza-100: #f5f7fb;
  --cinza-300: #dde3ee;
  --cinza-600: #5c6577;
  --texto: #182238;

  --gradiente: linear-gradient(120deg, var(--azul) 0%, var(--azul) 35%, var(--verde) 100%);
  --gradiente-suave: linear-gradient(120deg, rgba(18,62,143,.08) 0%, rgba(15,155,82,.08) 100%);

  --fonte-titulo: 'Poppins', sans-serif;
  --fonte-texto: 'Inter', sans-serif;

  --sombra: 0 10px 30px rgba(11,42,99,.12);
  --raio: 16px;

  /* cinza mais escuro: para corpo de texto com peso informativo real (propostas, trajetória) */
  --cinza-700: #3d4557;
}

html{ scroll-behavior: smooth; font-size: 17.5px; }

body{
  font-family: var(--fonte-texto);
  color: var(--texto);
  background: var(--branco);
  line-height: 1.68;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ text-decoration: none; color: inherit; }
ul{ list-style: none; }
button{ font-family: inherit; cursor: pointer; border: none; background: none; }
h1,h2,h3,h4{ font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.2; color: var(--azul-escuro); text-wrap: balance; }

.container{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================================
   REVEAL ANIMATION
   ========================================================================== */
[data-reveal]{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
[data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 50px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .01em;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space: nowrap;
}
.btn--primary{
  background: var(--gradiente);
  color: var(--branco);
  box-shadow: var(--sombra);
}
.btn--primary:hover{ transform: translateY(-3px); box-shadow: 0 14px 34px rgba(11,42,99,.22); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.header.is-scrolled{
  box-shadow: 0 4px 24px rgba(11,42,99,.08);
  border-color: var(--cinza-300);
}

.header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.logo{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1;
}
.logo__titulo{
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cinza-600);
}
.logo__marca{
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.logo__nome{
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo__sobrenome{
  color: var(--azul-escuro);
  position: relative;
}
.logo__sobrenome::after{
  content: '.';
  color: var(--amarelo);
  font-size: 1.3em;
  line-height: 0;
  margin-left: 1px;
}

.nav__list{
  display: flex;
  gap: 32px;
}
.nav__link{
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texto);
  position: relative;
  padding: 6px 0;
  transition: color .2s ease;
}
.nav__link:hover{ color: var(--verde-escuro); }
.nav__link::after{
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--gradiente);
  transition: width .25s ease;
}
.nav__link:hover::after{ width: 100%; }

.menu-toggle{
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px;
}
.menu-toggle span{
  height: 2px;
  background: var(--azul-escuro);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  padding: 160px 0 100px;
  background: var(--cinza-100);
  position: relative;
  overflow: hidden;
}
.hero::before{
  content: '';
  position: absolute;
  top: -20%; right: -10%;
  width: 600px; height: 600px;
  background: var(--gradiente-suave);
  border-radius: 50%;
  filter: blur(10px);
}

.hero__inner{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 60px;
  align-items: center;
  position: relative;
}

.tag{
  display: inline-block;
  padding: 8px 18px;
  border-radius: 50px;
  background: var(--amarelo);
  color: var(--azul-escuro);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hero__texto h1{
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  margin-bottom: 14px;
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__numero{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 24px;
}
.hero__numero-rotulo{
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cinza-600);
}
.hero__numero-valor{
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--azul);
  letter-spacing: .01em;
}

.hero__cargo{
  font-weight: 600;
  color: var(--verde-escuro);
  font-size: 1.1rem;
  margin-bottom: 18px;
  text-wrap: pretty;
}

.hero__desc{
  color: var(--cinza-600);
  font-size: 1.18rem;
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 34px;
}

.hero__cta{ display: flex; gap: 16px; flex-wrap: wrap; }

.hero__foto-frame{
  position: relative;
  border-radius: var(--raio);
  padding: 10px;
  background: var(--gradiente);
}

.hero__foto-img{
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: top center;
  border-radius: 12px;
}

.bio__foto-img{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

/* ==========================================================================
   SECTION SHARED
   ========================================================================== */
.section{ padding: 100px 0; }
.section__head{ max-width: 680px; margin: 0 auto 60px; text-align: center; }
.eyebrow{
  display: inline-block;
  color: var(--verde-escuro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .9rem;
  margin-bottom: 14px;
}
.eyebrow--light{ color: var(--amarelo); }

h2{ font-size: clamp(1.7rem, 6.5vw, 2.9rem); }

.section__head h2{
  margin-bottom: 16px;
}
.section__sub{ color: var(--cinza-600); font-size: 1.1rem; line-height: 1.65; }

/* ==========================================================================
   FRASE DE DESTAQUE
   ========================================================================== */
.frase-destaque{
  background: var(--azul-escuro);
  padding: 56px 0;
  text-align: center;
}
.frase-destaque p{
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  color: var(--branco);
  max-width: 800px;
  margin: 0 auto;
}
.frase-destaque--alt{ background: var(--gradiente); }

/* ==========================================================================
   BIOGRAFIA
   ========================================================================== */
.biografia{ background: var(--branco); }

.bio__grid{
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: start;
  margin-bottom: 60px;
}

.bio__foto{ display: grid; gap: 20px; }

.bio__familia{
  border-left: 3px solid var(--verde);
  padding: 2px 0 2px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.bio__familia-aspas{
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  line-height: .6;
  color: var(--verde);
  flex-shrink: 0;
}
.bio__familia p{ font-style: italic; color: var(--cinza-600); font-size: .92rem; }

.bio__texto p{
  margin-bottom: 20px;
  color: var(--texto);
  font-size: 1.08rem;
  line-height: 1.8;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.bio__texto strong{ color: var(--azul); font-weight: 700; }

.pilares{
  display: flex;
  align-items: center;
  gap: 10px;
  row-gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.pilar{
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: .85rem;
  color: var(--verde-escuro);
  letter-spacing: .05em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pilar:not(:first-child)::before{
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cinza-300);
  flex-shrink: 0;
}

/* FORMAÇÃO — composição editorial: rótulo fixo à esquerda + lista indexada à direita */
.formacao{
  margin-bottom: 84px;
  padding-top: 52px;
  border-top: 1px solid var(--cinza-300);
  display: grid;
  grid-template-columns: minmax(0, .32fr) minmax(0, .68fr);
  gap: 56px;
  text-align: left;
}

.formacao__eyebrow{
  display: block;
  color: var(--verde-escuro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .78rem;
  margin-bottom: 10px;
}
.formacao__titulo{
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  margin: 0;
}

.formacao__lista{ display: flex; flex-direction: column; }

.formacao__item{
  display: flex;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--cinza-300);
}
.formacao__item:first-child{ border-top: none; padding-top: 0; }
.formacao__item:last-child{ padding-bottom: 0; }

.formacao__index{
  flex-shrink: 0;
  width: 30px;
  padding-top: .2em;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .03em;
  color: var(--verde-escuro);
  font-variant-numeric: tabular-nums;
}

.formacao__nome{
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--azul-escuro);
  line-height: 1.4;
}
.formacao__detalhe{
  margin-top: 5px;
  font-size: .88rem;
  color: var(--cinza-600);
  letter-spacing: .01em;
}

/* Timeline */
.timeline{
  position: relative;
  display: grid;
  gap: 36px;
  padding-left: 34px;
  border-left: 3px solid var(--cinza-300);
}
.timeline__item{ position: relative; }
.timeline__marker{
  position: absolute;
  left: -43px;
  top: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--gradiente);
  box-shadow: 0 0 0 4px var(--branco), 0 0 0 5px var(--cinza-300);
}
.timeline__item h3{ font-size: 1.1rem; margin-bottom: 7px; }
.timeline__item p{ color: var(--cinza-700); line-height: 1.62; max-width: 640px; }

/* ==========================================================================
   VALORES / CHIPS
   ========================================================================== */
.valores{ background: var(--branco); }

.valores__lista{
  max-width: 760px;
  margin: 0 auto 64px;
  text-align: center;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 2.3;
  color: var(--verde-escuro);
}
.valores__lista .valor:not(:last-child)::after{
  content: '·';
  color: var(--cinza-300);
  font-weight: 700;
  margin: 0 12px;
}
.chip{
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 50px;
  background: var(--gradiente-suave);
  color: var(--azul-escuro);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.chip--outline{
  background: transparent;
  border: 1.5px solid var(--cinza-300);
  color: var(--texto);
}
.chips{ display: flex; flex-wrap: wrap; gap: 10px; }

/* FÉ E VIDA PÚBLICA */
.fe{
  border-top: 1px solid var(--cinza-300);
  padding-top: 56px;
}
.fe__texto h3{
  font-size: 1.5rem;
  margin-bottom: 20px;
  text-align: center;
}
.fe__texto > p{
  color: var(--texto);
  font-size: 1.08rem;
  line-height: 1.75;
  margin-bottom: 24px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.fe__texto > p strong{ color: var(--azul); font-weight: 700; }
.fe__lista{
  display: grid;
  gap: 19px;
  margin: 0 auto 28px;
  max-width: 640px;
}
.fe__lista li{
  position: relative;
  padding-left: 26px;
  color: var(--texto);
  font-size: 1.04rem;
  line-height: 1.65;
}
.fe__lista li::before{
  content: '—';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--verde);
  font-weight: 600;
}

/* LIDERANÇA FEMININA */
.lideranca{ background: var(--cinza-100); }
.lideranca__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 44px;
  align-items: start;
  border-top: 1px solid var(--cinza-300);
  padding-top: 44px;
}
.lideranca__competencias h4{ font-size: 1.05rem; margin-bottom: 18px; }

/* ==========================================================================
   PROPOSTAS / EIXOS
   ========================================================================== */
.propostas{ background: var(--branco); }

.pilares--central{ justify-content: center; margin: 24px auto 0; }

.eixos{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 20px;
}

.eixo{
  background: var(--branco);
  border: 1px solid var(--cinza-300);
  border-radius: var(--raio);
  padding: 28px 26px;
}

.eixo__header{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--cinza-300);
}
.eixo__num{
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gradiente);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.eixo__header h3{ flex: 1 1 0%; min-width: 0; font-size: 1.15rem; line-height: 1.3; }

.eixo__item{
  display: flex;
  gap: 14px;
  margin-bottom: 26px;
}
.eixo__item:last-child{ margin-bottom: 0; }
.eixo__item-icone{
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--gradiente-suave);
  color: var(--verde-escuro);
  display: flex; align-items: center; justify-content: center;
}
.eixo__item h4{ font-size: 1rem; font-weight: 600; margin-bottom: 8px; color: var(--azul-escuro); line-height: 1.3; }
.eixo__item p{ font-size: .95rem; line-height: 1.62; color: var(--cinza-700); }

.propostas__fechamento{
  text-align: center;
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  color: var(--azul-escuro);
  margin-top: 50px;
}
.propostas__fechamento strong{ color: var(--verde-escuro); }

/* ==========================================================================
   REDES SOCIAIS
   ========================================================================== */
.redes{
  background: var(--gradiente);
  color: var(--branco);
}
.redes__inner{ text-align: center; }
.redes__inner h2{ color: var(--branco); margin-bottom: 16px; }
.redes__inner p{ color: rgba(255,255,255,.85); font-size: 1.1rem; margin-bottom: 34px; }

.redes__links{ display: flex; gap: 40px; justify-content: center; }
.rede-link{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.rede-link__icone{
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--branco);
  display: flex; align-items: center; justify-content: center;
  color: var(--azul);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  transition: transform .25s ease, box-shadow .25s ease, color .25s ease;
}
.rede-link__nome{
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .03em;
  color: var(--branco);
}
.rede-link:hover .rede-link__icone{
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(0,0,0,.24);
  color: var(--verde-escuro);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  background: var(--azul-escuro);
  color: rgba(255,255,255,.75);
  padding: 50px 0 30px;
  text-align: center;
}
.footer__logo{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 10px;
}
.footer__logo .logo__titulo{ color: rgba(255,255,255,.65); }
.footer__logo .logo__marca{ font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.3rem; }
.footer__logo .logo__nome{ color: var(--amarelo); }
.footer__logo .logo__sobrenome{ color: var(--branco); }
.footer__texto{ margin-bottom: 18px; font-size: .95rem; }
.footer__copy{ font-size: .82rem; opacity: .7; }

.footer__credito{
  display: inline-block;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .8rem;
  color: rgba(255,255,255,.55);
  transition: color .2s ease;
}
.footer__credito:hover{ color: rgba(255,255,255,.8); }
.footer__credito strong{ color: rgba(255,255,255,.85); font-weight: 600; transition: color .2s ease; }
.footer__credito:hover strong{ color: rgba(255,255,255,1); }

/* ==========================================================================
   VOLTAR AO TOPO
   ========================================================================== */
.voltar-topo{
  position: fixed;
  bottom: 28px; right: 28px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--gradiente);
  color: var(--branco);
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sombra);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
  z-index: 900;
}
.voltar-topo.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 960px){
  .hero__inner{ grid-template-columns: minmax(0, 1fr); }
  .hero__foto{ order: -1; max-width: 320px; margin: 0 auto; }
  .hero__numero-valor{ font-size: 2rem; }
  .bio__grid{ grid-template-columns: minmax(0, 1fr); }
  .bio__foto{ max-width: 280px; }
  .eixos{ grid-template-columns: minmax(0, 1fr); }
  .lideranca__grid{ grid-template-columns: minmax(0, 1fr); }
  .fe{ padding-top: 40px; }
}

@media (max-width: 720px){
  .nav{ display: none; }
  .menu-toggle{ display: flex; }

  .formacao{
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-top: 40px;
    margin-bottom: 64px;
  }
  .formacao__item{ gap: 16px; padding: 24px 0; }
  .formacao__index{ width: 24px; font-size: .78rem; }
  .formacao__nome{ font-size: 1.05rem; }

  /* justify only reads well on wide columns; narrow phone columns get ugly gaps */
  .bio__texto p{ text-align: left; hyphens: none; }

  /* smaller + slightly inset so the FAB is less likely to sit over trailing line text */
  .voltar-topo{ width: 42px; height: 42px; bottom: 20px; right: 16px; font-size: 1.05rem; }

  /* reserve space so the fixed FAB never lands on top of the footer credit line at page bottom */
  .footer{ padding-bottom: 84px; }

  .header.nav-open .nav{
    display: block;
    position: absolute;
    top: 76px; left: 0; right: 0;
    background: var(--branco);
    box-shadow: var(--sombra);
    padding: 20px 24px;
  }
  .header.nav-open .nav__list{ flex-direction: column; gap: 4px; }
  .header.nav-open .nav__link{ display: block; padding: 12px 0; }
  .header.nav-open .menu-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .header.nav-open .menu-toggle span:nth-child(2){ opacity: 0; }
  .header.nav-open .menu-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  .hero{ padding: 140px 0 70px; }
  .section{ padding: 70px 0; }

  /* mais largura útil para o título do eixo (evita quebras desproporcionais entre os 4 cards) */
  .eixo{ padding: 24px 16px; }
  .eixo__header{ gap: 12px; }
}