/* ==========================================================================
   Cota Real Energia — site institucional
   Layout, tokens e ritmo espelhados de cotareal.com.br.
   Único desvio deliberado: o acento é o âmbar da vertical (#FFB020).
   ========================================================================== */

/* PP Telegraf — mesma face do site do grupo.
   1º src: cópia local (subir os .woff2 em fonts/ — ver LEIA-ME)
   2º src: arquivos do site do grupo, usados enquanto a cópia não existe */
@font-face{
  font-family:'PP Telegraf'; font-weight:400; font-style:normal; font-display:swap;
  src:url('../fonts/PPTelegraf-Regular.woff2') format('woff2'),
      url('https://cotareal.com.br/wp-content/uploads/2025/03/PPTelegraf-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'PP Telegraf'; font-weight:700; font-style:normal; font-display:swap;
  src:url('../fonts/PPTelegraf-Bold.woff2') format('woff2'),
      url('https://cotareal.com.br/wp-content/uploads/2025/03/PPTelegraf-Bold.woff2') format('woff2');
}

:root{
  --navy:    #0B0C13;   /* fundo escuro — mesmo do site do grupo */
  --claro:   #EBE7E4;   /* fundo claro — mesmo do site do grupo */
  --texto:   #333333;   /* corpo sobre fundo claro */
  --branco:  #FFFFFF;
  --ambar:   #FFB020;   /* acento da vertical */
  --cinza:   #6B6B6B;
  --linha-clara: rgba(11,12,19,.14);
  --linha-escura: rgba(255,255,255,.16);

  --fonte:'PP Telegraf', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --max: 1200px;
  --gutter: 28px;
}

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

body{
  margin:0; background:var(--claro); color:var(--texto);
  font-family:var(--fonte); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter) }

/* ------------------------------------------------------------ tipografia -- */
h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-.015em }
h1,.h-grande{
  font-size:clamp(34px,5.4vw,58px); line-height:1.02; letter-spacing:-.025em;
}
h2{ font-size:clamp(30px,4.6vw,52px); line-height:1.04; letter-spacing:-.022em }
h3{ font-size:clamp(18px,2vw,21px); line-height:1.2; letter-spacing:-.01em }
p{ margin:0 }
.lead{ font-size:clamp(15px,1.6vw,17px); line-height:1.6 }
.stack{ display:flex; flex-direction:column; gap:16px }
.medida{ max-width:62ch }

/* título em duas linhas, como no site do grupo ("Como / operamos") */
.titulo-duplo span{ display:block }
.titulo-duplo .fraco{ color:var(--ambar) }

/* ---------------------------------------------------------------- seções -- */
.sec{ padding-block:clamp(64px,8vw,116px) }
.sec--escura{ background:var(--navy); color:var(--branco) }
.sec--escura h1,.sec--escura h2,.sec--escura h3{ color:var(--branco) }
.sec--clara{ background:var(--claro); color:var(--texto) }

/* --------------------------------------------------------------- header --- */
.topo{ background:var(--navy); position:sticky; top:0; z-index:50 }
.topo .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-block:18px }
.topo img{ width:270px }
.menu{ display:flex; gap:30px; flex-wrap:wrap }
.menu a{ color:var(--branco); text-decoration:none; font-size:14px; letter-spacing:.02em; opacity:.88 }
.menu a:hover,.menu a:focus-visible{ color:var(--ambar); opacity:1 }

/* ----------------------------------------------------------------- hero --- */
.hero{ background:var(--navy); color:var(--branco); position:relative; overflow:hidden }
.hero .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center;
             padding-block:clamp(56px,7vw,96px) }
.hero .texto{ display:flex; flex-direction:column; gap:26px; max-width:620px }
.hero .sub{ font-size:clamp(14px,1.5vw,16px); line-height:1.55; opacity:.82; max-width:46ch }
.hero figure{ margin:0 }
.hero img{ width:100%; aspect-ratio:4/3.1; object-fit:cover }

/* ---------------------------------------------------------------- botão --- */
.btn{
  display:inline-block; align-self:flex-start;
  border:1px solid currentColor; border-radius:12px;
  padding:16px 28px; font-size:15px; letter-spacing:.7px;
  text-decoration:none; background:transparent; color:inherit;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover,.btn:focus-visible{ background:var(--ambar); border-color:var(--ambar); color:var(--navy) }

/* ------------------------------------------------- declaração de posição -- */
.declaracao{ padding-block:clamp(72px,9vw,128px) }
.declaracao p{
  font-size:clamp(26px,3.9vw,44px); line-height:1.16; font-weight:700;
  letter-spacing:-.02em; color:var(--navy); max-width:19ch;
}
.declaracao .ambar{ color:var(--ambar) }

/* ------------------------------------------------------------ faixa img --- */
.faixa{ margin:0; background:var(--navy) }
.faixa img{ width:100%; height:clamp(240px,30vw,420px); object-fit:cover }

/* ------------------------------------------------------------ operações --- */
.grade-ops{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:clamp(26px,3vw,44px); margin-top:clamp(36px,5vw,64px) }
.op{ display:flex; flex-direction:column; gap:12px }
.op .num{ font-size:12px; letter-spacing:.18em; color:var(--ambar) }
.op p{ font-size:14.5px; line-height:1.6; opacity:.86 }

/* --------------------------------------------------------------- pilares -- */
.pilares{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(24px,3vw,40px); margin-top:clamp(36px,5vw,56px) }
.pilar{ border-top:2px solid var(--ambar); padding-top:20px }
.pilar h3{ color:var(--navy); margin-bottom:10px }
.pilar p{ font-size:14.5px; line-height:1.6 }

/* -------------------------------------------------------------- números --- */
.numeros{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:clamp(28px,4vw,52px); margin-top:clamp(36px,5vw,60px) }
.numero .n{ font-size:clamp(40px,6vw,74px); font-weight:700; line-height:1; letter-spacing:-.035em; color:var(--navy) }
.numero .n em{ font-style:normal; color:var(--ambar) }
.numero .rot{ font-size:14px; line-height:1.5; margin-top:14px; padding-top:14px; border-top:1px solid var(--linha-clara) }

/* ---------------------------------------------------------------- prosa --- */
.prosa{ display:flex; flex-direction:column; gap:18px; max-width:64ch; margin-top:clamp(28px,3.5vw,44px) }
.prosa p{ font-size:15.5px; line-height:1.68 }
.prosa strong{ font-weight:700; color:var(--navy) }
.sec--escura .prosa strong{ color:var(--branco) }

/* -------------------------------------------------------------- listadas -- */
.lista{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:12px }
.lista li{ position:relative; padding-left:22px; font-size:15px; line-height:1.55 }
.lista li::before{ content:''; position:absolute; left:0; top:.6em; width:10px; height:2px; background:var(--ambar) }

/* ------------------------------------------------------- bloco alternado -- */
.alternado{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:center }
.alternado + .alternado{ margin-top:clamp(56px,7vw,96px) }
.alternado img{ width:100%; aspect-ratio:4/3; object-fit:cover }
.alternado.inverso .media{ order:-1 }

/* ----------------------------------------------------------------- time --- */
.time{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(26px,3vw,44px); margin-top:clamp(36px,5vw,60px) }
.pessoa .nome{ font-size:clamp(20px,2.4vw,26px); font-weight:700; letter-spacing:-.015em; color:var(--branco) }
.pessoa .cargo{ display:block; font-size:12px; letter-spacing:.16em; color:var(--ambar); margin-top:8px }
.pessoa p{ font-size:14px; line-height:1.6; opacity:.82; margin-top:14px }
.perfil{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,72px); align-items:center; margin-top:clamp(36px,5vw,60px) }
.perfil-foto{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:12px; display:block }
.perfil .pessoa p{ font-size:clamp(15px,1.3vw,17px); max-width:52ch }
@media (max-width:760px){ .perfil{ grid-template-columns:1fr } .perfil-foto{ max-width:420px } }

/* -------------------------------------------------------------- contato --- */
.contato-grade{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); margin-top:clamp(32px,4vw,52px) }
.dados-contato{ display:flex; flex-direction:column; gap:26px }
.dado-item .k{ display:block; font-size:11.5px; letter-spacing:.18em; color:var(--cinza); margin-bottom:7px }
.dado-item .v{ font-size:clamp(17px,2vw,21px); font-weight:700; color:var(--navy); letter-spacing:-.01em; line-height:1.35 }
.dado-item .v a{ text-decoration:none }
.dado-item .v a:hover{ color:var(--ambar) }
.dado-item .end{ font-size:15px; font-weight:400; line-height:1.55; color:var(--texto) }

/* --------------------------------------------------------------- rodapé --- */
.rodape{ background:var(--navy); color:var(--branco); padding-block:48px 56px }
.rodape .topo-rodape{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:flex-start }
.rodape img{ width:230px }
.rodape .legal{ margin-top:34px; padding-top:22px; border-top:1px solid var(--linha-escura);
                font-size:12.5px; line-height:1.8; opacity:.62 }

/* --------------------------------------------------------- acessibilidade -- */
.pular{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--ambar); color:var(--navy);
        padding:12px 18px; font-size:13px; text-decoration:none }
.pular:focus{ left:0 }
a:focus-visible,.btn:focus-visible{ outline:2px solid var(--ambar); outline-offset:3px }

/* --------------------------------------------------------------- mobile --- */
@media (max-width:900px){
  .hero .wrap{ grid-template-columns:1fr }
  .hero figure{ order:-1 }
  .alternado{ grid-template-columns:1fr }
  .alternado.inverso .media{ order:0 }
  .contato-grade{ grid-template-columns:1fr }
}
@media (max-width:640px){
  .topo img{ width:225px }
  .topo .wrap{ padding-block:14px }
  .menu{ gap:18px }
  .menu a{ font-size:13px }
  .declaracao p{ max-width:none }
}