/* ============================================================
   Elismar Gonçalves 20789 · landing de campanha
   Identidade oficial (ID_ELISMAR): verde #176E02, verde-limão
   #84CA02, vermelho #BE0809, amarelo #FEC828, creme #FFF5DE
   Duas seções: hero + minha história. Rodapé legal TSE.
   ============================================================ */

@font-face { font-family:'Poppins'; src:url('assets/fonts/Poppins-Light.ttf') format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('assets/fonts/Poppins-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('assets/fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }

:root{
  --verde:#176E02;
  --limao:#84CA02;
  --vermelho:#BE0809;
  --amarelo:#FEC828;
  --creme:#FFF5DE;
  --off:#F8FCEF;
  --escuro:#0D2B08;
  --tinta:#1A2417;
  --tinta-suave:#5A6B54;
  --wrap:1120px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:'Poppins',system-ui,sans-serif;
  font-size:17px; line-height:1.72; color:var(--tinta);
  background:var(--off); -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

/* header */
.topo{background:var(--creme);border-bottom:3px solid var(--limao);position:sticky;top:0;z-index:20}
.barra{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:12px;padding-bottom:12px}
.marca img{height:56px;width:auto}
.topo nav{display:flex;align-items:center;gap:22px}
.topo nav a{text-decoration:none;font-weight:600;font-size:15.5px;color:var(--verde)}
.topo nav a.btn-verde{color:#fff}
.btn{display:inline-block;text-decoration:none;font-weight:600;border-radius:999px;padding:11px 22px;font-size:15.5px;transition:transform .15s ease,box-shadow .15s ease}
.btn-verde{background:var(--verde);color:#fff;box-shadow:0 8px 20px rgba(23,110,2,.22)}
.btn-verde:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(23,110,2,.3)}

/* 1 · hero */
.hero{background:linear-gradient(180deg,#DDF0FA 0%,#F4FAE6 55%,var(--creme) 100%);position:relative;overflow:hidden}
.hero .arte{width:100%;height:auto}
.hero-txt{padding:34px 22px 46px;max-width:820px;text-align:center;margin:0 auto}
.hero h1{font-size:clamp(30px,5vw,52px);line-height:1.08;font-weight:600;letter-spacing:-.02em;color:var(--verde)}
.hero h1 span{color:var(--vermelho)}
.hero .sub{margin-top:16px;font-size:clamp(17px,2vw,20px);color:var(--tinta-suave);line-height:1.6}
.acoes{margin-top:26px;display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}
.ig{text-decoration:none;font-weight:600;color:var(--verde);border-bottom:2px solid var(--limao);padding-bottom:2px}
.listras{display:flex;height:12px}
.listras span{flex:1}
.listras span:nth-child(1){background:var(--vermelho)}
.listras span:nth-child(2){background:var(--amarelo)}
.listras span:nth-child(3){background:var(--limao)}

/* 2 · minha história */
.historia{padding:74px 0 84px;background:var(--off)}
.hist-grid{display:grid;grid-template-columns:1.25fr .8fr;gap:52px;align-items:center}
.hist-txt h2{font-size:clamp(28px,3.6vw,40px);font-weight:600;color:var(--verde);letter-spacing:-.02em;margin-bottom:22px}
.hist-txt p{margin-bottom:18px;color:#2C3A28}
.hist-txt blockquote{
  margin-top:26px;padding:18px 24px;border-left:6px solid var(--limao);
  background:var(--creme);border-radius:0 14px 14px 0;
  font-size:19px;font-weight:600;color:var(--verde);line-height:1.5;
}
.hist-foto{border-radius:20px;overflow:hidden;box-shadow:0 22px 50px rgba(23,110,2,.16)}
.hist-foto img{width:100%;height:540px;object-fit:cover;object-position:center 22%}

/* rodapé legal */
footer{background:var(--escuro);color:#DCE9D6;padding:52px 0 46px}
footer .selo{height:58px;width:auto;margin-bottom:22px}
footer .tag{
  display:inline-block;background:var(--vermelho);color:#fff;font-weight:600;
  font-size:13px;letter-spacing:.14em;padding:6px 14px;border-radius:6px;margin-bottom:18px;
}
footer .legal{font-size:14.5px;line-height:1.85;color:#B9CDB2;max-width:820px}
footer .legal a{color:var(--limao);font-weight:600}

@media (max-width:860px){
  .hist-grid{grid-template-columns:1fr;gap:32px}
  .hist-foto{order:-1}
  .hist-foto img{height:360px}
  .topo nav a:not(.btn){display:none}
  .marca img{height:44px}
  .hero-txt{padding:26px 20px 36px}
  body{font-size:16px}
}