/* =========================================================
   COGNY — LP Carreiras
   Tokens → Base → Componentes → Seções → Responsivo
   ========================================================= */

:root{
  --navy:#1F242B;
  --navy-mid:#424A54;
  --navy-deep:#161A20;
  --gold:#D1AF2B;
  --gold-soft:#E8CE62;
  --paper:#F2F1EE;
  --ink:#1F242B;
  --white:#FFF;

  --radius:24px;
  --canvas:1440px;        /* largura da prancheta do PSB — confirme e ajuste */
  --wrap:1180px;          /* largura útil do conteúdo */
  --gut:clamp(20px,5vw,40px);

  --sec-y:clamp(64px,9vw,120px);
  --ff:'Lato',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  font-family:var(--ff);
  font-weight:400;
  line-height:1.6;
  color:var(--white);
  background:var(--navy);
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;line-height:1.15;font-weight:900}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.center{text-align:center}

/* ---------- Tipografia de seção ---------- */
.sec-title{
  font-size:clamp(24px,3vw,38px);
  color:var(--gold);
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.01em;
}
.sec-lead{
  max-width:64ch;
  margin:20px auto 0;
  text-align:center;
  font-weight:300;
  font-size:clamp(15px,1.3vw,17px);
  color:#D8DCE1;
}
.sec-title--dark{color:var(--gold)}
.sec-lead--dark{color:var(--navy-mid)}

/* ---------- Botão ---------- */
.btn{
  display:inline-block;
  padding:14px 34px;
  border-radius:999px;
  font-size:14px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  text-decoration:none;
  transition:transform .2s ease,background .2s ease;
}
.btn--gold{background:var(--gold);color:var(--white)}
.btn--gold:hover{background:var(--gold-soft)}
.btn:active{transform:translateY(1px)}

/* ---------- Fundos full-bleed ---------- */
.hero,.manifesto,.motivos,.numeros,.depo,.cta{position:relative;isolation:isolate}
.manifesto__bg,.motivos__bg,.numeros__bg,.depo__bg,.cta__bg{
  position:absolute;inset:0;z-index:-2;
}
.manifesto__bg img,.numeros__bg img,.motivos__bg img,.depo__bg img,.cta__bg img{
  width:100%;height:100%;object-fit:cover;
}
/* Overlays em CSS — não exportar do PSB */
.cta::after{
  content:'';position:absolute;inset:0;z-index:-1;
}
.cta::after{background:linear-gradient(180deg,rgba(22,26,32,.5),rgba(22,26,32,.62))}

/* =========================================================
   TOPO
   ========================================================= */
.topbar{position:relative;z-index:5;padding:26px 0;background:#13151C}
.topbar__inner{display:flex;align-items:center;justify-content:center;gap:18px}
.topbar__logo{width:clamp(110px,12vw,150px)}
.topbar__tag{
  font-size:11px;font-weight:300;line-height:1.35;color:#C9CED4;
  padding-left:18px;border-left:1px solid rgba(255,255,255,.25);
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  height:90vh;
  min-height:fit-content;       /* nunca corta o conteúdo em telas baixas */
  display:flex;align-items:stretch;
  padding:0 0 clamp(70px,9vw,110px);
  /* cover ancorado no topo; gradiente atrás só como fallback de carregamento */
  background:
    url('../img/hero-bg.webp') center top / cover no-repeat,
    linear-gradient(180deg,#191E24 0%,#111419 100%);
}
@media (max-width:768px){
  .hero{
    background:
      url('../img/hero-bg-m.webp') center top / cover no-repeat,
      linear-gradient(180deg,#191E24 0%,#111419 100%);
  }
}
.hero__inner{display:grid;grid-template-columns:1fr .85fr;gap:clamp(24px,4vw,56px);align-items:center}
.hero__title{
  font-size:clamp(28px,4.2vw,54px);
  font-weight:300;
  text-transform:uppercase;
}
.hero__title strong{font-weight:900;display:inline-block}
.hero__title em{font-style:italic;font-weight:900}
.hero__kicker{
  margin:22px 0 18px;
  color:var(--gold);
  font-size:clamp(15px,1.5vw,19px);
  font-weight:900;
  text-transform:uppercase;
}
.hero__lead{max-width:46ch;font-weight:300;font-size:15px;color:#CBD1D8}
.hero__shield{align-self:start}
.hero__shield img{width:auto;max-width:100%;max-height:calc(90vh - clamp(70px,9vw,110px));margin-inline:auto}

/* =========================================================
   MANIFESTO
   ========================================================= */
.manifesto{padding:var(--sec-y) 0}
.manifesto .sec-title,.manifesto .sec-lead{color:var(--navy)}
.manifesto .sec-lead{font-weight:400}
.manifesto__cue{
  margin:26px 0 22px;text-align:center;color:var(--navy);
  font-weight:900;font-size:14px;text-transform:uppercase;letter-spacing:.08em;
}
.manifesto__foot{margin-top:24px;text-align:center;font-size:14px;font-weight:400;color:var(--gold);text-shadow:0 1px 8px rgba(0,0,0,.45)}

.video{
  position:relative;max-width:900px;margin-inline:auto;
  aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  background:#13151C;cursor:pointer;
  container-type:inline-size;          /* textos escalam com a largura do vídeo */
}
.video__thumb{width:100%;height:100%;object-fit:cover}

/* textos laterais — medidas tiradas do layout (proporcionais à largura do vídeo) */
.video__side{
  position:absolute;top:50%;transform:translateY(-50%);margin:0;
  display:flex;flex-direction:column;line-height:1.05;
  pointer-events:none;
}
.video__side b{
  font-size:3.6cqw;font-weight:900;color:var(--white);
  text-transform:uppercase;letter-spacing:.01em;
}
.video__side span{
  margin-top:.2em;font-size:2.4cqw;font-weight:900;color:var(--gold);
}
.video__side--l{left:4.8%}
.video__side--r{left:74%}

/* o play já vem desenhado na thumb: o botão é só a área clicável */
.video__play{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;padding:0;background:transparent;cursor:pointer;
}
.video__play:focus-visible{outline:3px solid var(--gold);outline-offset:-6px;border-radius:var(--radius)}
.video__thumb{transition:filter .25s ease}
.video:hover .video__thumb{filter:brightness(1.08)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* =========================================================
   MARCAS
   ========================================================= */
.marcas{
  padding:var(--sec-y) 0;
  /* arte 100% opaca, sem overlay; contain ancorado no topo — a cor de fundo é a da base da arte */
  background:url('../img/marcas-bg.webp') center top / contain no-repeat,#1E242B;
}
@media (max-width:768px){
  .marcas{background:url('../img/marcas-bg-m.webp') center top / contain no-repeat,#1E242B}
}
.marcas__grid{
  margin-top:clamp(36px,5vw,56px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px);
}
.marca{display:flex;flex-direction:column;align-items:center}
.marca__foto{
  width:100%;max-width:289px;aspect-ratio:289/311;object-fit:cover;
  /* a arte já traz overlay de cor e cantos arredondados */
}
/* Balanceamento óptico: cada logo tem sua altura (--lh, no HTML) calculada para
   o mesmo peso visual (área × densidade). A faixa do logo tem altura fixa de 44px
   e o logo centraliza nela, então as descrições continuam alinhadas entre os cards. */
.marca__logo{
  --band:44px;
  height:var(--lh,28px);width:auto;max-width:100%;
  margin:calc(18px + (var(--band) - var(--lh,28px)) / 2) auto calc(10px + (var(--band) - var(--lh,28px)) / 2);
}
.marca p{
  margin:0;max-width:30ch;text-align:center;
  font-size:12.5px;font-weight:300;line-height:1.5;color:#B9C0C8;
}

/* =========================================================
   MOTIVOS
   ========================================================= */
.motivos{padding:var(--sec-y) 0}
.motivos__grid{
  margin-top:clamp(32px,4vw,44px);
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.3vw,32px);
  max-width:900px;margin-inline:auto;
}
/* caixas brancas — medidas do layout */
.motivo{
  background:var(--white);
  border-radius:var(--radius);
  padding:clamp(26px,3vw,40px) clamp(24px,3.4vw,46px);
  text-align:center;
}
.motivo h3{
  margin-bottom:12px;color:var(--gold);
  font-size:clamp(15px,1.35vw,18px);font-weight:900;line-height:1.2;
  text-transform:uppercase;
}
.motivo p{
  margin:0;color:var(--navy);
  font-size:clamp(16.5px,1.39vw,19px);font-weight:400;line-height:1.4;
}

/* =========================================================
   NÚMEROS
   ========================================================= */
.numeros{padding:var(--sec-y) 0}
.numeros__inner{display:grid;gap:clamp(34px,5vw,60px)}
.numeros__head{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(20px,4vw,60px);align-items:start}
.numeros__title{color:var(--gold);font-size:clamp(26px,3.4vw,42px);text-transform:uppercase}
.numeros__lead{margin:0;font-weight:300;font-size:15px;color:#C8CFD6}

.numeros__list{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,4vw,48px) clamp(20px,3vw,40px);
  justify-items:center;text-align:center;
}
.numeros__list li{display:flex;align-items:center;gap:14px;text-align:left}
.numeros__list b{
  color:var(--gold);font-size:clamp(38px,5vw,64px);font-weight:900;line-height:1;
  white-space:nowrap;
}
.numeros__list span{font-size:13px;font-weight:300;line-height:1.35;color:#D2D8DE}
/* as duas últimas centralizam sob as três primeiras */
.numeros__list li:nth-child(4){grid-column:1/3;justify-self:end}
.numeros__list li:nth-child(5){grid-column:3/4;justify-self:start}

/* =========================================================
   JORNADA (seção clara)
   ========================================================= */
.jornada{padding:var(--sec-y) 0;background:#E7E7E7;color:var(--ink)}  /* = fundo da ilustração, sem emenda */
.jornada .sec-lead{color:var(--navy-mid)}
.jornada__fig{margin:clamp(34px,5vw,56px) 0 0}
.jornada__fig img{width:100%;max-width:1180px;margin-inline:auto}
.jornada__steps{display:none;margin:32px 0 0;gap:14px}
.jornada__steps li{
  counter-increment:step;
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid rgba(66,74,84,.18);
}
.jornada__steps li::before{
  content:counter(step);
  color:var(--gold);font-weight:900;font-size:20px;
}
.jornada__steps b{display:block;text-transform:uppercase;font-size:13px;letter-spacing:.06em}
.jornada__steps span{font-size:13.5px;font-weight:300;color:var(--navy-mid)}
.jornada .center{margin-top:clamp(30px,4vw,44px)}

/* =========================================================
   DEPOIMENTOS
   ========================================================= */
.depo{padding:var(--sec-y) 0}
.depo__grid{
  margin-top:clamp(36px,5vw,56px);
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,4vw,50px);
  max-width:960px;margin-inline:auto;
}
/* cards dourados — padrão das referências enviadas */
.depo__card{
  background:var(--gold);color:var(--white);
  border-radius:var(--radius);
  padding:clamp(24px,2.6vw,28px) clamp(18px,2.2vw,26px) clamp(34px,3.6vw,44px);
  text-align:center;
}
.depo__card img{
  width:clamp(120px,11vw,150px);height:auto;aspect-ratio:1;
  border-radius:50%;object-fit:cover;margin:0 auto;
}
.depo__card h3{
  margin:clamp(18px,2vw,22px) auto 0;max-width:22ch;
  font-size:clamp(18px,1.6vw,22px);font-weight:700;font-style:italic;line-height:1.3;
  text-transform:uppercase;letter-spacing:-.005em;
}
.depo__card blockquote{
  margin:clamp(12px,1.4vw,16px) 0 0;
  font-size:clamp(15px,1.25vw,16.5px);font-weight:400;font-style:italic;line-height:1.4;
}

/* =========================================================
   ESG
   ========================================================= */
.esg{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(110px,11vw,210px) 0 clamp(90px,8.5vw,170px);
  background:radial-gradient(ellipse 70% 60% at 78% 12%,#141A24 0%,#0A0F16 55%,#060B11 100%);
}
/* contorno dourado (arte do layout): encosta na borda direita, ~2% da esquerda */
.esg__outline{
  position:absolute;z-index:-1;pointer-events:none;
  top:3.85vw;right:0;width:98%;max-width:none;height:auto;
}

.esg__inner{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,80px);align-items:start}

/* coluna de texto */
.esg__title{color:var(--gold);font-size:clamp(34px,3.6vw,58px);font-weight:900;text-transform:uppercase;line-height:1}
.esg__sub{margin:clamp(24px,3vw,44px) 0 clamp(18px,2vw,26px);font-size:clamp(15px,1.25vw,19px);font-weight:700;color:var(--white)}
.esg__col--txt p:not(.esg__sub){font-size:clamp(14.5px,1.2vw,18px);font-weight:400;line-height:1.45;color:#D6DAE0;max-width:34em}
.esg__selos{margin-top:clamp(22px,2.4vw,36px);width:clamp(260px,23vw,360px);height:auto}

/* pilares: rótulo à direita | linha vertical | itens com ícone */
.esg__pilares{display:grid;gap:clamp(30px,3.4vw,56px)}
.pilar{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);align-items:center}
.pilar h3{
  padding-right:clamp(16px,1.6vw,28px);text-align:right;
  color:var(--gold);font-size:clamp(14px,1.35vw,20px);font-weight:900;
  text-transform:uppercase;letter-spacing:.02em;
}
.pilar ul{
  border-left:2px solid rgba(255,255,255,.85);
  padding-left:clamp(18px,1.8vw,30px);
  display:grid;gap:clamp(18px,2.1vw,34px);
}
.pilar li{
  display:grid;grid-template-columns:clamp(30px,2.6vw,40px) 1fr;gap:clamp(18px,2.6vw,44px);align-items:center;
  color:var(--gold);font-size:clamp(17px,1.65vw,24px);font-weight:900;line-height:1.2;
}
.pilar li img{width:100%;height:auto}

/* ODS: 13 selos ocupando a largura do container */
.esg__ods{
  margin-top:clamp(36px,3.6vw,56px);
  display:grid;grid-template-columns:repeat(13,1fr);gap:clamp(6px,1vw,18px);
}
.esg__ods img{width:100%;height:auto;display:block}

/* =========================================================
   CTA FINAL
   ========================================================= */
.cta{padding:clamp(70px,10vw,120px) 0;text-align:center}
.cta__title{font-size:clamp(22px,2.8vw,34px);text-transform:uppercase;text-shadow:0 2px 18px rgba(10,14,20,.55)}
.cta__lead{margin:18px 0 28px;font-weight:400;font-size:15px;color:#EEF1F4;text-shadow:0 1px 10px rgba(10,14,20,.6)}

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape{padding:clamp(48px,7vw,80px) 0;background:var(--navy-deep);text-align:center}
.rodape__frase{font-size:14px;font-weight:300;color:#C8CFD6}
.rodape__logos{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(18px,3vw,38px);margin:30px 0;
}
.rodape__logos img{height:calc(var(--lh,28px) * .62);width:auto;opacity:.85}
.rodape__selo{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:26px}
.rodape__selo span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#7D858E}
.rodape__selo img{width:120px}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1024px){
  .marcas__grid{grid-template-columns:repeat(2,1fr)}
  .esg__inner{grid-template-columns:1fr}
  .esg__ods{grid-template-columns:repeat(7,1fr)}
  .numeros__head{grid-template-columns:1fr}
}

@media (max-width:768px){
  .topbar__inner{flex-direction:column;gap:10px;text-align:center}
  .topbar__tag{padding-left:0;border-left:0}

  .hero{padding-top:60px;height:auto}
  .hero__inner{grid-template-columns:1fr;text-align:center}
  .hero__text{order:2}
  .hero__shield{order:1}
  .hero__shield img{max-width:320px;max-height:none;width:100%}
  .hero__lead{margin-inline:auto}


  .motivos__grid{grid-template-columns:1fr}

  .numeros__list{grid-template-columns:repeat(2,1fr);gap:26px 16px}
  .numeros__list li,
  .numeros__list li:nth-child(4),
  .numeros__list li:nth-child(5){grid-column:auto;justify-self:center}
  .numeros__list li{flex-direction:column;text-align:center;gap:6px}
  .numeros__list li:nth-child(5){grid-column:1/-1}

  /* diagrama raster não reduz: vira lista */
  .jornada__fig{display:none}
  .jornada__steps{display:grid}

  .depo__grid{grid-template-columns:1fr}
  .esg__outline{display:none}
  .pilar{grid-template-columns:1fr}
  .pilar h3{text-align:left;padding:0 0 10px}
  .esg__ods{grid-template-columns:repeat(5,1fr)}

  .rodape__logos img{height:calc(var(--lh,28px) * .5)}
}

@media (max-width:520px){
  .marcas__grid{grid-template-columns:1fr;max-width:340px;margin-inline:auto}
}

/* =========================================================
   ANIMAÇÕES DE ENTRADA — estado inicial (o GSAP revela)
   Só vale com html.anim; sem JS ou com reduced-motion, tudo aparece normal.
   ========================================================= */
.anim :is(
  .topbar,.hero__shield,.hero__title,.hero__kicker,.hero__lead,.hero .btn,
  .sec-title,.sec-lead,.manifesto__cue,.video,.manifesto__foot,
  .marca,.motivo,.numeros__head,.numeros__list li,
  .jornada__fig,.jornada__steps li,.jornada .center,
  .depo__card,.esg__col,.esg__ods li,
  .cta__title,.cta__lead,.cta .btn,
  .rodape__frase,.rodape__logos li,.rodape__selo,.rodape .btn
){visibility:hidden}



.numeros__bg img{object-position:center top}