/* =========================================================
   Cooperlegis — Landing page
   Paleta amostrada da própria logo: azul, verde e amarelo
   das três faixas entrelaçadas.
   ========================================================= */

:root{
  --azul:        #174592;   /* faixa azul da marca */
  --azul-fundo:  #0F3170;
  --azul-noite:  #0A2350;
  --azul-claro:  #4A79C4;
  --azul-lavado: #EDF3FC;

  --verde:       #198D50;   /* faixa verde da marca */
  --verde-claro: #E7F5ED;

  --amarelo:     #E8A518;   /* faixa amarela da marca */
  --amarelo-claro:#FDF3DE;

  /* neutros puxados para o azul da marca, não cinza puro */
  --tinta:       #16233A;
  --tinta-media: #4B5C76;
  --tinta-fraca: #7286A3;
  --linha:       #DFE7F2;
  --papel:       #FFFFFF;
  --papel-suave: #F6F9FD;

  --r-p: 8px;
  --r-m: 14px;
  --r-g: 22px;

  --sombra-p: 0 1px 3px rgba(22,35,58,.06);
  --sombra-m: 0 10px 30px rgba(22,35,58,.08);
  --sombra-g: 0 26px 60px rgba(22,35,58,.14);

  --wrap: 1140px;
  --topo-h: 78px;

  --mola: cubic-bezier(.2,.7,.3,1);
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--topo-h) + 16px) }
body{
  margin:0;
  font-family:"Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:17px; line-height:1.7; color:var(--tinta); background:var(--papel);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
ul,ol{ margin:0; padding:0; list-style:none }
p{ margin:0 0 1.1em }

h1,h2,h3{
  font-family:"Bitter", Georgia, serif;
  line-height:1.18; margin:0 0 .5em; letter-spacing:-.015em; font-weight:700;
  text-wrap:balance;
}

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto }
.sprite{ position:absolute; width:0; height:0; overflow:hidden }
.icone{ width:22px; height:22px; flex:none }
.icone--g{ width:30px; height:30px }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--azul); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-p) 0;
}
.skip:focus{ left:0 }

:where(a,button):focus-visible{
  outline:3px solid var(--amarelo); outline-offset:3px; border-radius:4px;
}

/* ---------- utilitários de texto ---------- */
.etiqueta{
  font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--verde); margin:0 0 14px;
}
.realce{
  position:relative; display:inline-block; color:var(--azul); z-index:0;
}
/* traço amarelo atrás da palavra, no ângulo das faixas da logo */
.realce::after{
  content:""; position:absolute; left:-.05em; right:-.05em; bottom:.14em; height:.24em;
  background:var(--amarelo); opacity:.45; z-index:-1;
  transform:skewX(-9deg);
}

/* ---------- botões ---------- */
.botao{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px; border-radius:100px; font-weight:600; font-size:1rem;
  transition:transform .25s var(--mola), box-shadow .25s var(--mola), background .2s, color .2s;
}
.botao--solido{
  background:var(--azul); color:#fff; box-shadow:0 8px 22px rgba(23,69,146,.24);
}
.botao--solido:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(23,69,146,.32) }
.botao--linha{ border:1.5px solid var(--linha); color:var(--tinta) }
.botao--linha:hover{ border-color:var(--azul); color:var(--azul) }

/* =========================================================
   CABEÇALHO
   ========================================================= */
.topo{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--topo-h);
  display:flex; align-items:center;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  transition:box-shadow .3s var(--mola), height .3s var(--mola);
}
.topo.fixado{ box-shadow:0 1px 0 var(--linha), 0 10px 30px rgba(22,35,58,.06); height:66px }
.topo__inner{ display:flex; align-items:center; gap:24px }

.marca{ display:flex; align-items:center; gap:12px; margin-right:auto }
.marca__simbolo{ height:42px; width:auto; transition:height .3s var(--mola) }
.topo.fixado .marca__simbolo{ height:36px }
.marca__txt{ display:flex; flex-direction:column; line-height:1.12 }
.marca__txt strong{
  font-family:"Bitter", Georgia, serif; font-size:1.24rem; font-weight:700;
  color:var(--azul); letter-spacing:-.01em;
}
.marca__txt em{
  font-style:normal; font-size:.68rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-fraca);
}

.menu{ display:flex; align-items:center; gap:26px }
.menu > a{ font-size:.95rem; font-weight:500; color:var(--tinta-media); position:relative; transition:color .2s }
.menu > a:not(.menu__cta)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-5px; height:2px;
  background:var(--amarelo); transition:right .3s var(--mola);
}
.menu > a:not(.menu__cta):hover::after{ right:0 }
.menu > a:hover{ color:var(--azul) }
.menu__cta{
  background:var(--azul); color:#fff !important; padding:10px 20px; border-radius:100px;
  font-weight:600; transition:background .2s;
}
.menu__cta:hover{ background:var(--azul-fundo) }

.hamburguer{ display:none; background:none; border:0; padding:8px; cursor:pointer }
.hamburguer span{
  display:block; width:26px; height:2px; background:var(--azul); border-radius:2px;
  transition:transform .3s var(--mola), opacity .2s;
}
.hamburguer span + span{ margin-top:6px }
.hamburguer[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.hamburguer[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.hamburguer[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

/* =========================================================
   ABERTURA
   ========================================================= */
.abertura{
  padding:calc(var(--topo-h) + 72px) 0 0;
  background:
    radial-gradient(60% 70% at 90% 10%, var(--azul-lavado) 0%, transparent 60%),
    var(--papel);
  position:relative; overflow:hidden;
}
.abertura__grid{
  display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(30px, 5vw, 70px);
  align-items:center; padding-bottom:76px;
}
.abertura h1{ font-size:clamp(2.4rem, 5.2vw, 3.8rem); margin-bottom:.4em }
.abertura__linha{ font-size:1.1rem; color:var(--tinta-media); max-width:56ch }
.abertura__acoes{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px }

/* a arte repete o entrelaçamento da própria marca */
.trama{
  position:relative; aspect-ratio:1; display:grid; place-items:center;
  background:
    conic-gradient(from 210deg at 50% 50%, var(--azul-lavado), var(--verde-claro), var(--amarelo-claro), var(--azul-lavado));
  border-radius:34% 66% 58% 42% / 44% 38% 62% 56%;
  animation:respirar 16s ease-in-out infinite;
}
.trama img{ width:64%; height:auto; filter:drop-shadow(0 18px 34px rgba(22,35,58,.16)) }
@keyframes respirar{
  0%,100%{ border-radius:34% 66% 58% 42% / 44% 38% 62% 56% }
  50%    { border-radius:58% 42% 36% 64% / 38% 56% 44% 62% }
}

/* faixa de números — três blocos, nas três cores da marca */
.faixa{ border-top:1px solid var(--linha); background:var(--papel-suave) }
.faixa__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 }
.faixa__item{ padding:30px 28px 30px 0; position:relative }
.faixa__item + .faixa__item{ padding-left:28px }
.faixa__item + .faixa__item::before{
  content:""; position:absolute; left:0; top:30px; bottom:30px; width:3px; border-radius:3px;
}
.faixa__item:nth-child(2)::before{ background:var(--verde) }
.faixa__item:nth-child(3)::before{ background:var(--amarelo) }
.faixa__item strong{
  display:block; font-family:"Bitter", Georgia, serif; font-size:1.5rem; color:var(--azul);
  line-height:1.2;
}
.faixa__item span{ font-size:.92rem; color:var(--tinta-media) }

/* =========================================================
   SEÇÕES
   ========================================================= */
.secao{ padding:clamp(64px, 8vw, 104px) 0 }
.secao--clara{ background:var(--papel-suave) }
.secao--escura{
  background:linear-gradient(160deg, var(--azul-fundo), var(--azul-noite));
  color:#fff;
}
.secao--escura .etiqueta{ color:var(--amarelo) }
.secao--escura p{ color:rgba(255,255,255,.8) }
.secao--escura strong{ color:#fff }

.secao__topo{ max-width:620px; margin-bottom:52px }
.secao__topo h2{ font-size:clamp(1.8rem, 3.4vw, 2.5rem) }
.secao__linha{ font-size:1.05rem; color:var(--tinta-media) }

.dupla{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px, 6vw, 72px); align-items:center }
.dupla--invertida .dupla__arte{ order:-1 }
.dupla__texto h2{ font-size:clamp(1.8rem, 3.4vw, 2.4rem) }
.dupla__texto p{ color:var(--tinta-media) }
.secao--escura .dupla__texto p{ color:rgba(255,255,255,.8) }

/* ---------- cartões de quem somos ---------- */
.cartoes{ display:grid; gap:14px }
.cartao{
  padding:24px 26px; border-radius:var(--r-m); background:var(--papel);
  border:1px solid var(--linha); border-left-width:5px;
  transition:transform .3s var(--mola), box-shadow .3s var(--mola);
}
.cartao:hover{ transform:translateX(5px); box-shadow:var(--sombra-m) }
.cartao--azul{ border-left-color:var(--azul) }
.cartao--verde{ border-left-color:var(--verde) }
.cartao--amarelo{ border-left-color:var(--amarelo) }
.cartao h3{ font-size:1.1rem; margin-bottom:.25em }
.cartao p{ margin:0; font-size:.95rem; color:var(--tinta-media) }

/* ---------- princípios ---------- */
.principios{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.principio{
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--r-m);
  padding:30px 28px; transition:transform .3s var(--mola), box-shadow .3s var(--mola);
}
.principio:hover{ transform:translateY(-4px); box-shadow:var(--sombra-m) }
.principio .icone{ width:30px; height:30px; color:var(--azul); margin-bottom:16px }
.principio:nth-child(3n+2) .icone{ color:var(--verde) }
.principio:nth-child(3n) .icone{ color:var(--amarelo) }
.principio h3{ font-size:1.12rem }
.principio p{ margin:0; font-size:.95rem; color:var(--tinta-media) }

/* ---------- governança ---------- */
.lista-check{ display:grid; gap:12px; margin-top:26px }
.lista-check li{ display:flex; gap:12px; align-items:flex-start; font-size:.98rem }
.lista-check .icone{ width:20px; height:20px; color:var(--amarelo); margin-top:4px }

.quadro-gov{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-g); padding:28px; box-shadow:var(--sombra-g);
}
.quadro-gov__svg{ width:100%; height:auto; display:block }

/* ---------- benefícios ---------- */
.beneficios{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px }
.beneficio{
  position:relative; padding:32px 28px; border-radius:var(--r-m);
  background:var(--papel); border:1px solid var(--linha); box-shadow:var(--sombra-p);
  transition:transform .3s var(--mola), box-shadow .3s var(--mola);
}
.beneficio:hover{ transform:translateY(-4px); box-shadow:var(--sombra-m) }
/* pequeno losango na cor da faixa, ecoando os ângulos da marca */
.beneficio__marca{
  display:block; width:26px; height:26px; margin-bottom:18px;
  background:var(--azul); transform:rotate(45deg) skewX(-6deg); border-radius:5px;
}
.beneficio__marca--verde{ background:var(--verde) }
.beneficio__marca--amarelo{ background:var(--amarelo) }
.beneficio h3{ font-size:1.15rem }
.beneficio p{ margin:0; font-size:.95rem; color:var(--tinta-media) }

.nota{
  margin:38px 0 0; text-align:center; color:var(--tinta-media); font-size:.98rem;
}
.nota a{ color:var(--azul); font-weight:600; border-bottom:1px solid currentColor }

/* ---------- linha do tempo ---------- */
.linha-tempo{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; position:relative }
.linha-tempo::before{
  content:""; position:absolute; left:0; right:0; top:26px; height:2px;
  background:linear-gradient(to right, var(--azul), var(--verde), var(--amarelo));
  opacity:.28;
}
.marco{ position:relative; padding-top:64px }
.marco__ano{
  position:absolute; top:0; left:0;
  display:inline-grid; place-items:center; height:54px; padding:0 20px;
  background:var(--papel); border:2px solid var(--azul); border-radius:100px;
  font-family:"Bitter", Georgia, serif; font-weight:700; color:var(--azul);
  font-variant-numeric:tabular-nums;
}
.marco:nth-child(2) .marco__ano{ border-color:var(--verde); color:var(--verde) }
.marco:nth-child(3) .marco__ano{ border-color:var(--amarelo); color:#9A6E06 }
.marco h3{ font-size:1.15rem }
.marco p{ margin:0; font-size:.95rem; color:var(--tinta-media) }

/* ---------- contato ---------- */
.canais{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px }
.canal{
  display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto;
  column-gap:18px; align-items:center;
  padding:24px 26px; border-radius:var(--r-m);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
  transition:background .25s, border-color .25s, transform .25s var(--mola);
}
a.canal:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); transform:translateY(-3px) }
.canal .icone--g{ grid-column:1; grid-row:1 / span 2; color:var(--amarelo) }
.canal__t{ grid-column:2; grid-row:1; font-weight:600; font-size:1.02rem }
.canal__d{ grid-column:2; grid-row:2; font-size:.9rem; color:rgba(255,255,255,.65) }
.canal__seta{
  grid-column:3; grid-row:1 / span 2; width:20px; height:20px; color:rgba(255,255,255,.4);
  transition:transform .25s var(--mola), color .25s;
}
a.canal:hover .canal__seta{ transform:translateX(4px); color:var(--amarelo) }
.canal--fixo{ opacity:.92 }

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape{ background:var(--azul-noite); color:rgba(255,255,255,.72); padding:60px 0 0 }
.rodape__inner{
  display:grid; grid-template-columns:1.5fr 1fr auto; gap:40px; align-items:start;
  padding-bottom:42px;
}
.marca--rodape{ margin:0 0 18px }
.marca--rodape .marca__simbolo{ height:46px }
.marca--rodape .marca__txt strong{ color:#fff }
.marca--rodape .marca__txt em{ color:rgba(255,255,255,.5) }
.rodape__marca p{ font-size:.9rem; margin:0; max-width:46ch }
.rodape__menu{ display:grid; gap:10px; font-size:.93rem }
.rodape__menu a:hover{ color:var(--amarelo) }
.rodape__social{ display:flex; gap:12px }
.rodape__social a{
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.08); transition:background .25s, transform .25s var(--mola);
}
.rodape__social a:hover{ background:var(--amarelo); color:var(--azul-noite); transform:translateY(-3px) }
.rodape__barra{
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  padding:20px 0; border-top:1px solid rgba(255,255,255,.1); font-size:.82rem;
}
.rodape__barra a{ color:var(--amarelo) }

/* =========================================================
   REVELAÇÃO AO ROLAR
   ========================================================= */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--mola), transform .7s var(--mola) }
.reveal.visivel{ opacity:1; transform:none }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1000px){
  .principios, .beneficios{ grid-template-columns:repeat(2,1fr) }
  .linha-tempo{ grid-template-columns:1fr; gap:34px }
  .linha-tempo::before{ display:none }
  .marco{ padding-top:0; padding-left:0 }
  .marco__ano{ position:static; margin-bottom:14px }
  .rodape__inner{ grid-template-columns:1fr 1fr }
  .rodape__social{ grid-column:1 / -1 }
}

@media (max-width:860px){
  .hamburguer{ display:block }
  .menu{
    position:fixed; inset:var(--topo-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; padding:8px 20px 24px;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .25s var(--mola), transform .25s var(--mola);
    box-shadow:0 20px 40px rgba(22,35,58,.16);
    max-height:calc(100svh - var(--topo-h)); overflow:auto;
  }
  .menu.aberto{ opacity:1; transform:none; pointer-events:auto }
  .menu > a{ padding:15px 4px; border-bottom:1px solid var(--linha) }
  .menu > a:not(.menu__cta)::after{ display:none }
  .menu__cta{ margin-top:18px; justify-content:center; text-align:center; border-bottom:0 }

  .abertura__grid, .dupla{ grid-template-columns:1fr }
  .dupla--invertida .dupla__arte{ order:0 }
  .abertura__arte{ max-width:380px; margin-inline:auto }
  .faixa__grid{ grid-template-columns:1fr }
  .faixa__item{ padding:22px 0 }
  .faixa__item + .faixa__item{ padding-left:0; border-top:1px solid var(--linha) }
  .faixa__item + .faixa__item::before{ display:none }
}

@media (max-width:620px){
  .principios, .beneficios{ grid-template-columns:1fr }
  .rodape__inner{ grid-template-columns:1fr }
  .abertura__acoes .botao{ width:100% }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.01ms !important }
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none }
}