/* ============================================================
   Liga Coopercitrus Jovem — v2 (composição editorial)
   Paleta da marca: verde #224518 · verde médio #348849
   dourado #D19D1A · creme #FDF9F3
   ============================================================ */
:root{
  --verde:#224518;
  --verde-medio:#348849;
  --dourado:#D19D1A;
  --creme:#FDF9F3;
  --pedra:#EFE9DC;
  --tinta:#16220f;
  --texto:#3a3a35;
  --cinza:#7a7a70;
  --linha:#dcd3c1;
  --max:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:'Manrope',system-ui,sans-serif;
  background:var(--creme);color:var(--texto);
  font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
  overflow-x:hidden;
  width:100%;
}
h1,h2,h3,h4,.disp{font-family:'Sora',sans-serif;color:var(--tinta);line-height:1.08;letter-spacing:-.02em;font-weight:700}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.olho{
  font-family:'Sora',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dourado);
}

/* ---------- BARRA DE NAVEGAÇÃO (fina) ---------- */
.barra{background:var(--verde);position:sticky;top:0;z-index:60;box-shadow:0 1px 0 rgba(0,0,0,.12)}
.barra .wrap{display:flex;align-items:center;gap:34px;height:76px}
.barra .marca{display:flex;align-items:center;gap:12px}
.barra .marca img{height:44px}
.barra nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.barra nav a{font-size:.95rem;font-weight:600;color:#dbe8d5}
.barra nav a:hover{color:#fff}
.barra .inscrever{
  background:var(--dourado);color:#2b2100;padding:11px 22px;border-radius:2px;font-weight:800;font-size:.92rem;
}
.barra .inscrever:hover{background:#e3ad2a;color:#2b2100}
.hamburguer{display:none;background:none;border:0;font-size:1.7rem;color:#fff;cursor:pointer;margin-left:auto;line-height:1}

/* ---------- 1. FAIXA INSTITUCIONAL COM A LOGO ---------- */
.faixa-logo{background:var(--verde);color:#e8f0e4;padding:64px 0 0}
.faixa-logo .topo{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding-bottom:56px}
.faixa-logo img.logo{width:min(100%,560px)}
.faixa-logo .dizeres{border-left:2px solid rgba(209,157,26,.55);padding-left:30px}
.faixa-logo .dizeres p{font-size:1.16rem;color:#dfe9d9;margin-bottom:26px}
.faixa-logo .dizeres .desde{
  font-family:'Sora',sans-serif;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:#a9c39d;margin-bottom:14px;display:block;
}
.botao{
  display:inline-block;background:var(--dourado);color:#2b2100;font-weight:800;
  padding:15px 30px;border-radius:2px;font-size:.98rem;letter-spacing:.01em;
  transition:transform .15s ease, filter .15s ease;
}
.botao:hover{transform:translateY(-2px);filter:brightness(1.06)}
.botao.vazio{background:transparent;border:1.5px solid rgba(255,255,255,.6);color:#fff}
.botao.vazio:hover{border-color:var(--dourado);color:var(--dourado)}

/* foto do grupo sangrando */
.sangra{width:100%;height:clamp(220px,38vw,460px);object-fit:cover}
.legenda-foto{
  background:var(--verde);color:#9fb894;font-size:.82rem;padding:12px 0;letter-spacing:.04em;
}

/* ---------- 2. CARROSSEL DO CRONOGRAMA ---------- */
.cronograma{padding:76px 0 60px;background:var(--creme);overflow-x:clip}
.cabeca-sec{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px;flex-wrap:wrap}
.cabeca-sec h2{font-size:clamp(1.7rem,3vw,2.5rem);max-width:22ch}
.setas{display:flex;gap:10px}
.setas button{
  width:46px;height:46px;border-radius:50%;border:1.5px solid var(--tinta);background:transparent;
  font-size:1.2rem;cursor:pointer;color:var(--tinta);transition:.18s;
}
.setas button:hover{background:var(--tinta);color:var(--creme)}
.trilho{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 28px 26px;scrollbar-width:none;margin:0 -28px;
}
.trilho::-webkit-scrollbar{display:none}
.encontro{
  flex:0 0 330px;scroll-snap-align:start;background:#fff;border:1px solid var(--linha);
  display:flex;flex-direction:column;min-height:290px;
}
.encontro .data{
  padding:26px 24px 18px;border-bottom:1px solid var(--linha);
  font-family:'Sora',sans-serif;font-size:3rem;line-height:.95;color:var(--verde);
  font-variant-numeric:tabular-nums;
}
.encontro .data small{display:block;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dourado);margin-top:8px}
.encontro .corpo{padding:20px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.encontro h3{font-size:1.12rem;line-height:1.3}
.encontro p{font-size:.92rem;color:var(--cinza)}
.encontro .tipo{
  margin-top:auto;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--verde-medio);
}
.encontro.destaque{background:var(--verde);border-color:var(--verde)}
.encontro.destaque .data,.encontro.destaque h3{color:#fff}
.encontro.destaque p{color:#c8d8c2}
.encontro.destaque .tipo{color:var(--dourado)}

/* ---------- 3. CTA DOURADO ---------- */
.chamada{background:var(--dourado);padding:44px 0}
.chamada .wrap{display:flex;align-items:center;gap:40px;flex-wrap:wrap;justify-content:space-between}
.chamada h2{font-size:clamp(1.4rem,2.4vw,2rem);color:#2b2100;max-width:24ch}
.chamada .botao{background:var(--verde);color:#fff}
.chamada .botao:hover{filter:brightness(1.15)}

/* ---------- 4. PROGRAMA + QUEM PODE PARTICIPAR ---------- */
.programa{background:#fff;padding:86px 0}
.programa .duas{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.programa h2{font-size:clamp(1.7rem,2.8vw,2.3rem);margin:14px 0 26px}
.lista-num{list-style:none;counter-reset:p}
.lista-num li{counter-increment:p;position:relative;padding:22px 0 22px 58px;border-top:1px solid var(--linha)}
.lista-num li:last-child{border-bottom:1px solid var(--linha)}
.lista-num li::before{
  content:counter(p,decimal-leading-zero);position:absolute;left:0;top:22px;
  font-family:'Sora',sans-serif;font-size:.95rem;font-weight:800;color:var(--dourado);
}
.lista-num strong{display:block;font-family:'Sora',sans-serif;font-size:1.08rem;color:var(--tinta);margin-bottom:4px}
.lista-num span{font-size:.95rem;color:var(--cinza)}
.criterios .bloco{padding:20px 0;border-bottom:1px solid var(--linha)}
.criterios .bloco:first-of-type{border-top:1px solid var(--linha)}
.criterios .rot{font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--verde-medio)}
.criterios .val{font-family:'Sora',sans-serif;font-size:1.05rem;color:var(--tinta);margin-top:6px}

/* ---------- 5. LIDERANÇA ---------- */
.lideranca{background:var(--pedra);padding:86px 0}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:44px}
.lider{background:#fff;display:grid;grid-template-columns:150px 1fr;gap:0;border:1px solid var(--linha)}
.lider .foto{width:150px;height:100%;min-height:190px;object-fit:cover;object-position:center 18%;background:#e3ddcf}
.lider .avatar{
  width:150px;min-height:190px;display:flex;align-items:center;justify-content:center;
  background:var(--verde-medio);color:#fff;font-family:'Sora',sans-serif;font-size:2.2rem;font-weight:700;
}
.lider .txt{padding:28px 26px}
.lider .frente{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dourado)}
.lider h3{font-size:1.3rem;margin:10px 0 6px}
.lider p{font-size:.95rem;color:var(--cinza)}

/* ---------- 6. CONSELHO ---------- */
.conselho{background:var(--verde);color:#dfe9d9;padding:80px 0}
.conselho h2{color:#fff;font-size:clamp(1.6rem,2.6vw,2.1rem);max-width:30ch}
.conselho .linha{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:44px}
.conselho .cargo{font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--dourado)}
.conselho .nome{font-family:'Sora',sans-serif;font-size:1.4rem;color:#fff;margin-top:10px;line-height:1.25}
.conselho .bloco{border-top:2px solid rgba(255,255,255,.22);padding-top:22px}

/* ---------- 7. REGIMENTO ---------- */
.regimento{padding:74px 0;background:#fff}
.regimento .caixa{
  border:1px solid var(--linha);padding:38px 40px;display:flex;align-items:center;
  gap:36px;justify-content:space-between;flex-wrap:wrap;background:var(--creme);
}
.regimento h2{font-size:1.5rem;margin-bottom:8px}
.regimento p{color:var(--cinza);font-size:.96rem;max-width:52ch}

/* ---------- 8. INSCRIÇÃO ---------- */
.inscricao{background:var(--pedra);padding:86px 0}
.inscricao .grade{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.inscricao h2{font-size:clamp(1.7rem,2.8vw,2.3rem);margin-bottom:18px}
.requisitos{list-style:none;margin-top:26px}
.requisitos li{padding:14px 0 14px 30px;position:relative;border-top:1px solid var(--linha);font-size:.96rem}
.requisitos li:last-child{border-bottom:1px solid var(--linha)}
.requisitos li::before{content:"—";position:absolute;left:0;color:var(--dourado);font-weight:800}
form{margin-top:6px}
.campo{margin-bottom:16px}
.campo label{display:block;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--verde);margin-bottom:7px}
.campo input,.campo select,.campo textarea{
  width:100%;padding:14px;border:1px solid var(--linha);background:#fff;
  font-family:'Manrope',sans-serif;font-size:1rem;color:var(--texto);border-radius:2px;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--dourado);outline-offset:-1px;border-color:var(--dourado)}
.par{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lgpd{display:flex;gap:10px;align-items:flex-start;font-size:.83rem;color:var(--cinza);margin:6px 0 22px}
.lgpd input{width:auto;margin-top:4px}
.ok{display:none;margin-top:16px;font-weight:700;color:var(--verde-medio)}

/* ---------- AGENDA DETALHADA (página 2) ---------- */
.timeline{margin-top:40px}
.tl-mes{margin-bottom:52px}
.tl-mes h3{
  font-size:1.35rem;padding-bottom:14px;border-bottom:2px solid var(--tinta);margin-bottom:0;
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
}
.tl-mes h3 small{font-family:'Manrope',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dourado)}
.tl-item{display:grid;grid-template-columns:120px 1fr;gap:28px;padding:24px 0;border-bottom:1px solid var(--linha)}
.tl-data{font-family:'Sora',sans-serif;font-size:1.5rem;color:var(--verde);font-variant-numeric:tabular-nums;line-height:1.1}
.tl-data small{display:block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cinza);margin-top:4px}
.tl-item h4{font-size:1.1rem;margin-bottom:6px}
.tl-item p{font-size:.95rem;color:var(--cinza)}
.tl-item .marca-tipo{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--verde-medio);display:block;margin-top:10px}
.tl-passado{opacity:.62}

/* ---------- GALERIA (mosaico) ---------- */
.mosaico{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:150px;gap:14px;margin-top:36px}
.mosaico figure{position:relative;overflow:hidden;background:#e5dfd2;cursor:pointer}
.mosaico img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mosaico figure:hover img{transform:scale(1.05)}
.mosaico figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:22px 16px 12px;color:#fff;font-size:.84rem;font-weight:600;
  background:linear-gradient(transparent,rgba(0,0,0,.72));
}
.m-g{grid-column:span 3;grid-row:span 2}
.m-p{grid-column:span 3;grid-row:span 1}
.m-t{grid-column:span 2;grid-row:span 1}

/* ---------- RODAPÉ ---------- */
footer{background:var(--tinta);color:#b9c4b1;padding:64px 0 26px;font-size:.92rem}
footer .grades{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px}
footer img{height:58px;margin-bottom:18px}
footer h4{color:#fff;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px;font-family:'Manrope',sans-serif;font-weight:800}
footer a{display:block;padding:5px 0;color:#b9c4b1}
footer a:hover{color:var(--dourado)}
footer .fim{border-top:1px solid rgba(255,255,255,.14);margin-top:44px;padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.82rem;color:#8d9a86}

/* ---------- RESPONSIVO ---------- */
@media(max-width:980px){
  .faixa-logo .topo,.programa .duas,.inscricao .grade,.conselho .linha,.dupla{grid-template-columns:1fr;gap:34px}
  .faixa-logo .dizeres{border-left:0;border-top:2px solid rgba(209,157,26,.55);padding:26px 0 0}
  .m-g,.m-p,.m-t{grid-column:span 3;grid-row:span 1}
  footer .grades{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .barra .wrap{flex-wrap:wrap;height:auto;gap:0;padding:12px 20px 0}
  .barra .marca{order:1}
  .barra .marca img{height:36px}
  .barra .inscrever{order:2;margin-left:auto;padding:10px 18px;font-size:.88rem}
  .hamburguer{display:none!important}
  .barra nav{
    order:3;display:flex!important;position:static;flex-direction:row;align-items:center;
    margin:0;gap:0;width:100%;overflow-x:auto;white-space:nowrap;
    padding:10px 0 12px;margin-top:10px;border-top:1px solid rgba(255,255,255,.16);
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .barra nav::-webkit-scrollbar{display:none}
  .barra nav a{padding:8px 16px 8px 0;font-size:.93rem;color:#dbe8d5}
  /* faixa institucional */
  .faixa-logo{padding:44px 0 0}
  .faixa-logo img.logo{width:100%;max-width:380px}
  .faixa-logo .dizeres p{font-size:1.05rem}
  .faixa-logo .dizeres .botao,.faixa-logo .dizeres .botao.vazio{
    display:block;width:100%;text-align:center;margin:0 0 10px!important;
  }
  /* carrossel */
  .cabeca-sec{flex-direction:column;align-items:flex-start;gap:10px}
  .setas{display:none}
  .trilho{padding:4px 20px 22px;margin:0 -20px}
  .encontro{flex:0 0 min(78vw,300px);min-height:auto}
  .encontro .data{font-size:2.5rem;padding:22px 20px 14px}
  .encontro .corpo{padding:18px 20px 20px}
  /* chamada */
  .chamada{padding:34px 0}
  .chamada .wrap{flex-direction:column;align-items:stretch;gap:20px}
  .chamada .botao{display:block;text-align:center}
  /* programa */
  .programa{padding:60px 0}
  .lista-num li{padding:18px 0 18px 46px}
  /* liderança */
  .dupla{gap:20px;margin-top:30px}
  .lider{grid-template-columns:1fr}
  .lider .foto{width:100%;height:230px;min-height:0;object-position:center 15%}
  .lider .avatar{width:100%;height:150px;min-height:0}
  .lider .avatar{font-size:1.8rem}
  .lider .txt{padding:22px 20px}
  /* conselho */
  .conselho{padding:60px 0}
  /* regimento */
  .regimento .caixa{padding:26px 22px;gap:20px}
  .regimento .botao{display:block;text-align:center;width:100%}
  /* inscrição */
  .inscricao{padding:60px 0}
  form .par{grid-template-columns:1fr;gap:0}
  .lgpd{align-items:flex-start}
  form .botao{display:block;width:100%;text-align:center}
  /* timeline da agenda */
  .tl-item{grid-template-columns:1fr;gap:8px;padding:20px 0}
  .tl-data{font-size:1.35rem}
  .tl-data small{display:inline;margin-left:8px}
  .tl-mes h3{font-size:1.15rem;flex-direction:column;align-items:flex-start;gap:4px}
  /* galeria */
  .mosaico{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px;gap:10px}
  .m-g,.m-p,.m-t{grid-column:span 2;grid-row:span 1}
  /* membros */
  .filtros-mobile{gap:8px!important}
  .chip-f{padding:9px 14px;font-size:.82rem}
  #busca{width:100%!important;min-width:0!important;margin:0!important}
  #grade{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;gap:12px!important}
  /* rodapé */
  footer{padding:48px 0 22px}
  footer .grades{grid-template-columns:1fr;gap:30px}
  footer .fim{flex-direction:column;gap:6px}
  section{padding-left:0;padding-right:0}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}