/* =========================================================
   PRISCILA BOMBEIRA — site
   Paleta e tipografia conforme 00_NUCLEO/03_IDENTIDADE_VISUAL.md
   Proporção: azul ~60% · areia/branco ~30% · amarelo ~8% · verde ~2%
   ========================================================= */

:root{
  /* paleta da logo (aprovada 13/08/2026) */
  --azul:        #1A2770;
  --azul-fundo:  #141E5A;   /* variação escura para blocos, mesma família */
  --amarelo:     #E8D44C;
  --verde-claro: #A5E14A;
  --verde-esc:   #7BB23D;

  /* sistema */
  --areia:   #F4F2ED;
  --grafite: #1C1F22;
  --branco:  #FFFFFF;
  --linha:   rgba(255,255,255,.16);

  --wrap: 1180px;
  --r: 14px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:88px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.65;
  color:var(--grafite);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
}

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

a{color:inherit}

.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--amarelo); color:var(--azul); padding:.8rem 1.2rem; font-weight:700;
}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--amarelo); outline-offset:3px}

/* ---------- tipografia display ---------- */
h1,h2,h3,.titulo-secao{
  font-family:'Barlow Condensed',Impact,sans-serif;
  font-weight:800;
  text-transform:uppercase;
  line-height:.94;
  letter-spacing:.01em;
  margin:0 0 .6em;
}

h1{ font-size:clamp(3.1rem, 8.5vw, 6.1rem) }
h1 em{ font-style:normal; color:var(--amarelo) }

.titulo-secao, .quem h2{ font-size:clamp(2.3rem, 5.2vw, 3.9rem) }

.rotulo{
  font-family:'Inter',sans-serif;
  font-size:.78rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--azul);
  margin:0 0 1rem;
  display:flex; align-items:center; gap:.7rem;
}
.rotulo::before{ content:''; width:34px; height:4px; background:var(--amarelo); flex:none }
.rotulo--claro{ color:var(--amarelo) }

.intro-secao{
  max-width:60ch; font-size:1.08rem; margin:0 0 3rem;
  color:rgba(28,31,34,.78);
}
.secao--azul .intro-secao{ color:rgba(255,255,255,.8) }

/* =========================================================
   TOPO
   ========================================================= */
.topo{
  position:sticky; top:0; z-index:100;
  background:var(--azul);
  border-bottom:1px solid var(--linha);
}
.topo__in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:74px }
.topo__logo img{ height:42px; width:auto }

.nav{ display:flex; align-items:center; gap:1.9rem }
.nav a{
  color:var(--branco); text-decoration:none;
  font-size:.86rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:.35rem 0; border-bottom:2px solid transparent;
  transition:border-color .18s, color .18s;
}
.nav a:hover{ border-bottom-color:var(--amarelo) }
.nav__cta{
  background:var(--amarelo); color:var(--azul) !important;
  padding:.62rem 1.15rem !important; border-radius:999px; border:0 !important;
  font-weight:700;
}
.nav__cta:hover{ filter:brightness(1.08) }

.menu-btn{
  display:none; background:none; border:0; cursor:pointer;
  width:44px; height:44px; padding:10px; flex-direction:column; justify-content:space-between;
}
.menu-btn span{ display:block; height:3px; background:var(--branco); border-radius:2px; transition:.25s }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(9.5px) rotate(45deg) }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9.5px) rotate(-45deg) }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  background:var(--azul);
  color:var(--branco);
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:''; position:absolute; inset:auto 0 0 0; height:6px;
  background:linear-gradient(90deg,var(--verde-claro),var(--verde-esc));
}
.hero__in{
  display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:end;
  padding:4.2rem 0 0;
}
.hero__txt{ padding-bottom:5.2rem }

.eyebrow{
  font-size:.8rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:var(--amarelo); margin:0 0 1.4rem;
}
.lead{ font-size:1.13rem; max-width:52ch; color:rgba(255,255,255,.88); margin:0 0 2.3rem }

.hero__acoes{ display:flex; flex-wrap:wrap; gap:.9rem }
.btn{
  display:inline-block; text-decoration:none;
  font-weight:700; font-size:.94rem; letter-spacing:.02em;
  padding:.95rem 1.7rem; border-radius:999px;
  transition:transform .16s, filter .16s, background .16s, color .16s;
}
.btn:hover{ transform:translateY(-2px) }
.btn--amarelo{ background:var(--amarelo); color:var(--azul) }
.btn--amarelo:hover{ filter:brightness(1.08) }
.btn--linha{ border:2px solid rgba(255,255,255,.45); color:var(--branco) }
.btn--linha:hover{ background:var(--branco); color:var(--azul); border-color:var(--branco) }

.hero__foto{ position:relative; justify-self:center; align-self:end }
.hero__foto img{
  position:relative; z-index:2; max-height:600px; width:auto;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.34));
}
.hero__arco{
  position:absolute; z-index:1;
  left:50%; bottom:0; transform:translateX(-50%);
  width:118%; aspect-ratio:1/1; max-width:560px;
  border-radius:50% 50% 0 0;
  background:radial-gradient(circle at 50% 78%, rgba(232,212,76,.30), rgba(232,212,76,0) 66%);
}

/* =========================================================
   FAIXA DE PROVAS
   ========================================================= */
.provas{ background:var(--areia); padding:2.6rem 0 }
.provas__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem }
.provas__grid div{
  display:flex; flex-direction:column; gap:.25rem;
  padding-left:1.1rem; border-left:4px solid var(--amarelo);
}
.provas__grid strong{
  font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:3.1rem; line-height:.9; color:var(--azul);
}
.provas__grid span{ font-size:.9rem; line-height:1.4; color:rgba(28,31,34,.75) }

/* =========================================================
   SEÇÕES
   ========================================================= */
.secao{ padding:5.5rem 0 }
.secao--azul{ background:var(--azul); color:var(--branco) }
.secao--areia{ background:var(--areia) }

/* ---------- Quem eu sou ---------- */
.quem{ display:grid; grid-template-columns:1.15fr .85fr; gap:3.6rem; align-items:start }
.quem__texto p{ margin:0 0 1.15rem; max-width:60ch }
.quem__texto strong{ color:var(--azul); font-weight:700 }

.quem blockquote{
  margin:2rem 0; padding:1.4rem 0 1.4rem 1.6rem;
  border-left:5px solid var(--amarelo);
  font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:none;
  font-size:1.62rem; line-height:1.2; color:var(--azul);
}

.credenciais{ list-style:none; margin:2rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.65rem }
.credenciais li{
  background:var(--areia); border-radius:999px; padding:.55rem 1.05rem;
  font-size:.88rem; color:var(--azul);
}

.quem__foto figure{ margin:0; position:relative }
.quem__foto img{ border-radius:var(--r); width:100% }
.quem__foto figure::before{
  content:''; position:absolute; inset:-14px -14px auto auto;
  width:96px; height:96px; background:var(--amarelo); border-radius:var(--r); z-index:-1;
}
.quem__foto figcaption{
  margin-top:.85rem; font-size:.86rem; color:rgba(28,31,34,.65); line-height:1.5;
}

/* ---------- Propostas ---------- */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem }
.card{
  position:relative;
  background:rgba(255,255,255,.055);
  border:1px solid var(--linha);
  border-radius:var(--r);
  padding:2.3rem 2rem 2rem;
}
.card__num{
  position:absolute; top:1.5rem; right:1.7rem;
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:2.6rem;
  color:rgba(255,255,255,.13); line-height:1;
}
.card h3{ font-size:1.85rem; color:var(--amarelo); margin-bottom:.7rem; padding-right:3rem }
.card__frase{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:none;
  font-size:1.32rem; line-height:1.22; color:var(--branco);
  border-left:4px solid var(--amarelo); padding-left:1rem;
  margin:0 0 1.15rem;
}
.card p{ color:rgba(255,255,255,.82); margin:0 0 1rem; font-size:.98rem }
.card__rot{
  font-size:.74rem !important; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--verde-claro) !important; margin:1.5rem 0 .7rem !important;
}
.card ul{ margin:0; padding-left:1.15rem; color:rgba(255,255,255,.82) }
.card li{ margin-bottom:.6rem; font-size:.96rem; line-height:1.55 }
.card li strong{ color:var(--branco) }

/* ---------- Galeria / trajetória ---------- */
.galeria{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem }
.galeria figure{ margin:0 }
.galeria img{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r);
  filter:saturate(.95);
  transition:transform .25s ease, filter .25s ease;
}
.galeria figure:hover img{
  transform:scale(1.02);
  filter:saturate(1.05);
}
.galeria figcaption{
  margin-top:.8rem; font-size:.87rem; line-height:1.5; color:rgba(28,31,34,.7);
}
.galeria figcaption strong{ color:var(--azul); display:block; font-size:.93rem; margin-bottom:.15rem }

/* ---------- Contato ---------- */
.contato{ display:grid; grid-template-columns:1fr 1fr; gap:3.4rem; align-items:start }
.contato .intro-secao{ margin-bottom:0 }
.contato__lista{ list-style:none; margin:0; padding:0; display:grid; gap:1.5rem }
.contato__lista li{ border-top:2px solid rgba(26,39,112,.14); padding-top:1rem }
.contato__rot{
  display:block; font-size:.73rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(28,31,34,.55); margin-bottom:.3rem;
}
.contato__lista a{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.55rem;
  color:var(--azul); text-decoration:none; line-height:1.15;
  border-bottom:3px solid var(--amarelo);
}
.contato__lista a:hover{ background:var(--amarelo) }
.contato__lista address{ font-style:normal; font-size:1rem; line-height:1.55; color:var(--grafite) }

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape{ background:var(--azul-fundo); color:rgba(255,255,255,.72); padding:3.6rem 0 2.6rem; font-size:.9rem }
.rodape__logo{ height:44px; width:auto; margin-bottom:1.8rem }
.rodape__dados p{ margin:0 0 .35rem }
.rodape__org{ color:var(--branco); font-weight:700; letter-spacing:.02em }
.rodape a{ color:var(--amarelo); text-decoration:none }
.rodape a:hover{ text-decoration:underline }
.rodape__aviso{
  margin:2rem 0 0; padding:1.1rem 1.3rem;
  background:rgba(255,255,255,.06); border-left:4px solid var(--amarelo); border-radius:6px;
  font-size:.85rem; line-height:1.6; max-width:78ch;
}
.rodape__credito{
  margin:2rem 0 0; padding-top:1.4rem; border-top:1px solid var(--linha);
  font-size:.8rem; color:rgba(255,255,255,.5);
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:980px){
  .hero__in{ grid-template-columns:1fr; gap:0; padding-top:3.2rem; text-align:left }
  .hero__txt{ padding-bottom:2.6rem }
  .hero__foto{ justify-self:center }
  .hero__foto img{ max-height:460px }
  .quem, .contato{ grid-template-columns:1fr; gap:2.6rem }
  .cards{ grid-template-columns:1fr }
  .galeria{ grid-template-columns:repeat(2,1fr) }
  .provas__grid{ grid-template-columns:repeat(2,1fr); gap:1.4rem 1.2rem }

  .menu-btn{ display:flex }
  .nav{
    position:fixed; inset:74px 0 auto 0;
    background:var(--azul); border-bottom:1px solid var(--linha);
    flex-direction:column; align-items:stretch; gap:0;
    padding:.5rem 1.25rem 1.5rem;
    display:none;
  }
  .nav.aberto{ display:flex }
  .nav a{ padding:.95rem 0; border-bottom:1px solid var(--linha) }
  .nav__cta{ margin-top:1rem; text-align:center }
}

@media (max-width:560px){
  body{ font-size:16px }
  .secao{ padding:3.8rem 0 }
  .galeria{ grid-template-columns:repeat(2,1fr); gap:1rem }
  .galeria figcaption{ font-size:.8rem; line-height:1.35; margin-top:.5rem }
  .galeria figcaption strong{ font-size:.85rem }
  .provas__grid strong{ font-size:2.5rem }
  .hero__foto img{ max-height:380px }
  .card{ padding:1.9rem 1.4rem }
  .contato__lista a{ font-size:1.3rem; overflow-wrap:anywhere }
}