/* ==========================================================
   ECOAR.CONFLUÊNCIA — tokens vindos do Figma
   ========================================================== */
:root{
  --rosa:#ff164f;
  --rosa-2:#ff2648;
  --laranja:#e34d0e;
  --verde:#00c7af;
  --creme:#f5ecd3;
  --creme-2:#eedabc;
  --creme-3:#f4ead2;
  --petroleo:#16323b;
  --preto:#0d0908;
  --marrom:#3a2513;
  --branco:#ffffff;
  --cinza:#bdbdbd;

  --font-texto:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Tierra é a fonte de display do projeto. Coloque os arquivos em fonts/ (veja @font-face).
     Enquanto não houver, cai em Fredoka (Google Fonts) em caixa alta, que é o mais próximo. */
  --font-display:"Tierra","Fredoka",var(--font-texto);

  --largura:1280px;
}

@font-face{
  font-family:"Tierra";
  src:url("fonts/Tierra-Regular.woff2") format("woff2"),
      url("fonts/Tierra-Regular.woff") format("woff"),
      url("fonts/Tierra-Regular.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--branco); color:#000;
  font-family:var(--font-texto); font-weight:500; line-height:1.35;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block; max-width:100%; height:auto}
p{margin:0}
ul{margin:0; padding:0}
a{color:inherit}
strong{font-weight:700}

.container{width:min(var(--largura),calc(100% - 48px)); margin-inline:auto; position:relative; z-index:1}

/* Fonte de display (títulos) */
.display{
  font-family:var(--font-display); font-weight:400; line-height:.95;
  letter-spacing:.01em; margin:0;
}
/* Tierra já é toda em caixa alta; para a Fredoka (fallback) forçamos caixa alta */
.display{text-transform:uppercase}

.creme{color:var(--creme-2)}

/* ---------------- HERO ---------------- */
.hero img,.hero video{display:block; width:100%; height:auto}
.hero video{aspect-ratio:1920/530; object-fit:cover; object-position:center}

/* ---------------- OLÁ ---------------- */
.ola{background:var(--creme-2); padding:49px 24px}
.ola__inner{
  width:min(923px,100%); margin-inline:auto;
  display:flex; align-items:center; gap:31px; color:var(--rosa);
}
.ola h1{font-size:clamp(64px,6vw,115px); line-height:1.2}
.ola p{font-size:clamp(18px,1.33vw,25.5px); max-width:559px}

/* ---------------- SOBRE O PROGRAMA ---------------- */
.programa{
  background:var(--rosa) url("assets/programa-bg.png") center / cover no-repeat;
  color:var(--branco); padding:64px 0; position:relative; overflow:hidden;
}
.duas-colunas{display:grid; grid-template-columns:auto 703px; gap:223px; justify-content:center; align-items:start}
.programa h2{font-size:48px; line-height:41px}
.programa .texto{font-size:22px; display:grid; gap:1.2em}

/* ---------------- TRÊS MOMENTOS ---------------- */
.momentos{
  padding:96px 24px; position:relative;
  background:var(--branco) url("assets/bg.png") center top / 1920px auto;
}
.cards{display:flex; gap:26.7px; justify-content:center; align-items:stretch; flex-wrap:wrap}
.card{
  width:389px; min-height:347px; border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column; color:var(--branco);
}
.card__topo{height:108.5px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden}
.card__topo img{position:relative; z-index:1}
.card__topo .card__arte{position:absolute; z-index:0; width:1000px; max-width:none; left:-190px; top:-420px; opacity:.95}
.card__corpo{padding:27.5px; display:flex; flex-direction:column; gap:14px; flex:1}
.card p{font-size:18.9px}
.tag{
  display:inline-flex; align-items:center; height:30px; padding:0 10.3px; border-radius:10.3px;
  background:var(--creme-3); font-size:17.2px; align-self:flex-start;
}
.card--quilombola{background:var(--verde)}
.card--quilombola .card__topo{background:var(--creme-3)}
.card--quilombola .tag{color:var(--verde)}
.card--indigena{background:var(--laranja)}
.card--indigena .card__topo{background:var(--petroleo)}
.card--indigena .tag{color:var(--laranja)}
.card--confluencia{background:var(--rosa-2)}
.card--confluencia .card__topo{background:var(--preto)}
.card--confluencia .tag{color:var(--rosa)}

/* ---------------- FAIXA FOTO ---------------- */
.faixa img{width:100%}

/* ---------------- OBJETIVOS ---------------- */
.objetivos{
  padding:96px 0 72px; position:relative; overflow:hidden;
  background:var(--branco) url("assets/bg.png") center top / 1920px auto;
}
.objetivos__arte{position:absolute; top:-39px; width:640px; max-width:none; transform:rotate(39.78deg); pointer-events:none}
.objetivos__arte--esq{left:calc(50% - 1280px); z-index: 9;}
.objetivos__arte--dir{left:calc(50% + 590px); z-index: 9;}
.objetivos h2{color:var(--rosa); font-size:64px; line-height:41px; margin-bottom:10px}
.pilulas{list-style:none; display:grid; gap:6px}
.pilulas li{
  background:var(--rosa); color:var(--branco); border-radius:32px;
  padding:24px 92px; font-size:20px; min-height:96px;
}
.pilulas li:last-child{padding-inline:64px}

/* ---------------- ATIVIDADES ---------------- */
.atividades{
  padding:80px 0 96px; position:relative;
  background:var(--branco) url("assets/bg.png") center top / 1920px auto;
}
.atividades h2,.remuneracao h2{color:var(--rosa); font-size:55px; line-height:54px; margin-bottom:24px}
.atividades__grid{display:grid; grid-template-columns:659px 591px; gap:42px; justify-content:space-between}
.lista{list-style:disc; padding-left:26px; display:grid; gap:10px; font-size:17.3px}
.lista ul{list-style:circle; padding-left:26px; margin-top:6px; display:grid; gap:6px}

.remuneracao{
  margin-top:40px; display:grid; grid-template-columns:659px 591px;
  gap:42px; justify-content:space-between; align-items:start;
}
.remuneracao__arte{height:498px; justify-self:center; transform:rotate(90deg)}
.remuneracao h2{font-size:58px; line-height:1}
.remuneracao .lista{font-size:18.2px; gap:11px}

/* ---------------- CRITÉRIOS ---------------- */
.criterios{
  position:relative; overflow:hidden;
  background:var(--branco) url("assets/bg.png") center top / 1920px auto;
}
.criterios__fundo{position:absolute; inset:0; pointer-events:none}
.icones{
  position:absolute; left:50%; width:3093px; height:297px;
  background:url("assets/faixa-icones.png") 0 0 / 3093px 297px no-repeat;
  transform:translateX(calc(-960px + var(--dx)));
}
.icones:nth-child(1){top:148px}
.icones:nth-child(2){top:485px}
.icones:nth-child(3){top:822px}
.icones:nth-child(4){top:1156px}

.paineis{position:relative; display:flex; gap:32px; justify-content:center; padding:0 24px; flex-wrap:wrap}
.painel{width:789px; display:flex; flex-direction:column}
.painel__topo{height:96px; display:flex; align-items:center; justify-content:center}
.painel__corpo{padding:60px 44px; display:flex; flex-direction:column; gap:44px; align-items:center; flex:1}
.painel__corpo > div{width:100%; max-width:701px}
.painel h3{font-size:35.4px; line-height:47.9px; margin-bottom:12px}
.painel .lista{font-size:21.3px; line-height:26.6px; gap:0}
.painel .obs{margin-top:26px; font-size:21.3px; line-height:26.6px}

.cronograma{margin:0; display:grid; gap:6px}
.cronograma > div{display:flex; gap:10.6px; align-items:center}
.cronograma dt{
  flex:0 0 216px; padding:3px 12px; border-radius:9.2px;
  font-weight:600; font-size:19px; line-height:31.4px; text-align:center;
}
.cronograma dt.pequeno{font-size:16px; line-height:20.4px; padding-block:6px}
.cronograma dd{margin:0; font-size:21.3px}
.cronograma .destaque dt{background:var(--rosa)}

.painel--quilombola{background:var(--verde)}
.painel--quilombola .painel__corpo{background:var(--creme)}
.painel--quilombola h3{color:var(--verde)}
.painel--quilombola .cronograma dt{background:var(--verde)}
.painel--indigena{background:var(--verde)}
.painel--indigena .painel__topo{background:var(--laranja)}
.painel--indigena .painel__corpo{background:var(--petroleo); color:var(--creme)}
.painel--indigena h3{color:var(--laranja)}
.painel--indigena .cronograma dt{background:var(--laranja)}

.botao{
  display:inline-flex; align-items:center; justify-content:center;
  height:62px; padding:0 21px; border-radius:100px;
  background:var(--verde); color:var(--branco); font-size:25px; line-height:1;
  text-decoration:none; margin-top:auto; transition:filter .15s;
}
.botao:hover,.botao:focus-visible{filter:brightness(1.08)}
.botao:focus-visible{outline:3px solid var(--rosa); outline-offset:3px}
.botao--inativo{background:var(--cinza); color:rgba(245,236,211,.8); cursor:default}

/* ---------------- SOBRE A PLATAFORMA ---------------- */
.ecoar{
  padding:96px 0; position:relative;
  background:var(--branco) url("assets/bg.png") center top / 1920px auto;
}
.ecoar .duas-colunas{grid-template-columns:auto 716px}
.ecoar h2{color:var(--rosa); font-size:48px; line-height:41px}
.texto-pequeno{font-size:16px; color:var(--marrom)}

/* ---------------- PARCEIROS / RODAPÉ ---------------- */
.parceiros{padding:64px 24px; background-color: #FF164F;}
.parceiros__inner{width:min(1225px,100%); margin-inline:auto}
.parceiros__linha{display:flex; align-items:center; gap:16px; margin-bottom:28px; color:var(--branco); font-size:14px}
.parceiros__linha::after{content:""; flex:1; height:1px; background:var(--branco)}
.parceiros__logos{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px}
.parceiros__logos img{display:block; width:auto; max-width:120px; height:auto; max-height:64px; object-fit:contain}
.rodape{background:#000}
.rodape img{width:100%}

/* ==========================================================
   RESPONSIVO
   ========================================================== */
@media (max-width:1400px){
  .duas-colunas{gap:96px; grid-template-columns:auto minmax(0,703px)}
  .atividades__grid{grid-template-columns:1fr 1fr}
  .remuneracao{grid-template-columns:minmax(0,420px) minmax(0,574px)}
  .remuneracao__arte{height:420px}
}
@media (max-width:1100px){
  .duas-colunas,.ecoar .duas-colunas{grid-template-columns:1fr; gap:32px}
  .programa h2 br,.ecoar h2 br{display:none}
  .atividades__grid{grid-template-columns:1fr; gap:56px}
  .remuneracao{grid-template-columns:1fr; gap:24px; margin-top:80px}
  .remuneracao__arte{justify-self:center; height:300px}
  .pilulas li{padding:20px 40px}
  .pilulas li:last-child{padding-inline:40px}
  .objetivos__arte{display:none}
}
@media (max-width:820px){
  .hero video{aspect-ratio:3/2}
  .ola__inner{flex-direction:column; align-items:flex-start; gap:12px}
  .ola h1{font-size:72px}
  .programa .texto{font-size:18px}
  .card{width:100%; max-width:420px}
  .objetivos h2,.atividades h2,.remuneracao h2{font-size:40px; line-height:1}
  .pilulas li{font-size:17px; min-height:0; padding:18px 24px; border-radius:20px}
  .painel__corpo{padding:40px 24px}
  .painel h3{font-size:28px; line-height:1.2}
  .painel .lista,.painel .obs,.cronograma dd{font-size:17px; line-height:1.4}
  .cronograma > div{flex-direction:column; align-items:flex-start; gap:4px}
  .cronograma dt{flex:none; width:auto; font-size:15px; line-height:1.6}
  .botao{font-size:18px; height:52px; text-align:center}
  .icones{display:none}
  .momentos,.objetivos,.atividades,.criterios,.ecoar{background-size:1400px auto}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .botao{transition:none} }