/* ═══════════════════════════════════════════════════════════════
   ÁPISE · folha única do site — visual "Blocos" (19/09/2026)

   Escolha dele entre três rumos (SITE\elementos\rumos-visuais):
   cor CHAPADA em retângulos grandes, letra condensada em caixa alta,
   programas em faixas numeradas. Parente do ONS e da Engetecnica.

   O que este visual NÃO tem, de propósito: degradê, sombra, canto
   arredondado, cartão flutuante, animação de entrada, tema escuro.
   Se um bloco precisa de destaque, ganha uma COR — não um efeito.

   Paleta = kit v5 (petróleo, âmbar, sálvia). A cor de cada programa
   é a do tijolo do ícone dele.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --pet:#0B3B3C;
  --am:#E0A526;
  --sage:#5C7C7B;
  --cz:#DADFDD;
  --esc:#072A2B;
  --esc-linha:#1D5352;
  --esc-txt:#B9CECC;
  --on-am:#1A1206;
  --linha:#C5CFCD;
  --txt-soft:#3E5B5A;
  --pad:clamp(16px,3vw,40px);
  --cond:'Barlow Condensed','Bahnschrift','Arial Narrow',Arial,sans-serif;
  --corpo:'Barlow','Segoe UI',system-ui,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px;}
body{margin:0;background:#fff;color:var(--pet);font-family:var(--corpo);font-size:17px;line-height:1.55;}
h1,h2,h3,h4,p,figure,ul{margin:0;}
ul{padding:0;list-style:none;}
img,svg{max-width:100%;}
a{color:inherit;}
sub{font-size:.72em;line-height:0;}
:focus-visible{outline:3px solid var(--am);outline-offset:2px;}

.in{max-width:1240px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.pular{position:absolute;left:-9999px;top:0;background:var(--am);color:var(--on-am);padding:8px 14px;z-index:99;}
.pular:focus{left:8px;top:8px;}

/* ── cabeçalho ─────────────────────────────────────────────────
   Menu de texto, sempre à vista. Sem hambúrguer e sem JavaScript:
   no celular os itens quebram de linha. */
.topo{background:#fff;border-bottom:1px solid var(--linha);z-index:20;}
@media (min-width:861px){.topo{position:sticky;top:0;}}
.topo .in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 30px;min-height:74px;padding-top:10px;padding-bottom:10px;}
.lockup{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--pet);}
.wm{display:flex;flex-direction:column;line-height:1;}
.wm .t{font-family:'Archivo Black','Arial Black',Arial,sans-serif;font-size:19px;letter-spacing:.08em;}
/* o subtítulo do lockup mantém o #5C7C7B exato do kit: é logotipo */
.wm .s{font-family:var(--cond);font-weight:600;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;margin-top:5px;color:#5C7C7B;}
.menu{display:flex;flex-wrap:wrap;align-items:center;gap:2px 28px;font-family:var(--cond);text-transform:uppercase;font-size:19px;letter-spacing:.07em;font-weight:500;}
.menu a{text-decoration:none;padding:6px 0;border-bottom:3px solid transparent;}
.menu a:hover,.menu a[aria-current=page]{border-bottom-color:var(--am);}
.menu a.entrar{border:2px solid var(--pet);padding:3px 16px;}
.menu a.entrar:hover{background:var(--pet);color:#fff;}
.idiomas{display:flex;gap:2px;font-size:15px;letter-spacing:.1em;}
.idiomas a{color:var(--sage);padding:6px 5px;}
.idiomas a[aria-current=true]{color:var(--pet);font-weight:600;border-bottom-color:transparent;}

/* ── abertura ──────────────────────────────────────────────────
   Dois blocos de cor, lado a lado, com altura de FAIXA — nunca de
   tela cheia (pedido dele: nada de abertura que engole a página).
   O degradê de 50% é só o truque para cada cor sangrar até a borda
   da janela enquanto o conteúdo fica alinhado ao miolo. */
.hero{--h-bg:var(--pet);--h-fg:#fff;--h-eye:var(--am);--b-bg:var(--am);
  background:linear-gradient(90deg,var(--h-bg) 50%,var(--b-bg) 50%);overflow:hidden;}
.hero.c-am{--h-bg:var(--am);--h-fg:var(--on-am);--h-eye:var(--pet);--b-bg:var(--pet);}
.hero.c-sage{--h-bg:var(--sage);--h-fg:#fff;--h-eye:#fff;--b-bg:var(--pet);}
.hero .in{display:grid;grid-template-columns:7fr 5fr;min-height:300px;}
.hero.grande .in{min-height:390px;}
.hero .a{background:var(--h-bg);color:var(--h-fg);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,4.4vw,60px) 40px clamp(28px,4.4vw,60px) 0;}
.hero .eye{font-family:var(--cond);text-transform:uppercase;color:var(--h-eye);font-size:20px;letter-spacing:.1em;font-weight:500;}
.hero h1{font-family:var(--cond);text-transform:uppercase;font-weight:300;font-size:clamp(34px,4.2vw,56px);
  line-height:1.03;letter-spacing:.01em;margin-top:10px;text-wrap:balance;}
.hero.grande h1{font-size:clamp(36px,4.6vw,64px);}
/* nome de programa não vai em caixa alta: "BusRating" é marca */
.hero h1.nome{text-transform:none;font-weight:600;font-size:clamp(44px,5.4vw,76px);letter-spacing:0;}
.hero .sub{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-size:21px;margin-top:6px;font-weight:500;}
.hero .lead{margin-top:18px;font-size:18px;max-width:58ch;color:inherit;}
.hero .b{background:var(--b-bg);position:relative;min-height:190px;}
/* a onda sangra para a direita, mas o ponto branco fica inteiro no bloco */
.hero .b svg{position:absolute;left:-4%;top:0;width:112%;max-width:none;height:auto;}
/* A única animação do site (09/10/2026): o traço da abertura se desenha da
   esquerda para a direita quando a página abre, e o ponto aparece no fim.
   Só na Início (`.hero.grande`; pedido dele, 09/10). Uma vez só; depois fica parado. `pathLength="1"` no SVG faz o traço
   inteiro valer 1, seja qual for o comprimento real. */
.hero.grande .traco{stroke-dasharray:1 2;stroke-dashoffset:1;animation:traco-desenha 1.1s ease-out .15s forwards;}
.hero.grande .ponto{opacity:0;animation:ponto-aparece .3s ease-out 1.15s forwards;}
@keyframes traco-desenha{to{stroke-dashoffset:0;}}
@keyframes ponto-aparece{to{opacity:1;}}
.hero.grande .b svg{top:50%;transform:translateY(-50%);width:118%;}
.hero .b svg.prod{left:0;top:0;transform:none;width:100%;height:100%;}

.faixa{background:var(--cz);}
.faixa .in{display:grid;grid-template-columns:7fr 5fr;gap:0 40px;align-items:center;padding-top:26px;padding-bottom:26px;}
.faixa p{font-size:18px;max-width:64ch;}
.seta-link{font-family:var(--cond);text-transform:uppercase;font-size:20px;letter-spacing:.08em;font-weight:500;
  text-decoration:none;border-bottom:3px solid var(--am);padding-bottom:3px;justify-self:start;}
.seta-link:hover{border-bottom-color:currentColor;}

/* ── seção ─────────────────────────────────────────────────────*/
.sec{padding:clamp(36px,5vw,64px) 0;}
.sec.cz{background:var(--cz);}
.sec.esc{background:var(--esc);color:#E8EEED;}
.sec.colada{padding-bottom:26px;}
.rot{font-family:var(--cond);text-transform:uppercase;font-weight:400;font-size:20px;letter-spacing:.12em;color:var(--sage);}
.esc .rot{color:var(--am);}
h2{font-family:var(--cond);text-transform:uppercase;font-weight:300;font-size:clamp(28px,3.2vw,42px);
  line-height:1.08;letter-spacing:.01em;margin-top:6px;max-width:28ch;text-wrap:balance;}
.lead{font-size:18.5px;max-width:66ch;margin-top:14px;color:var(--txt-soft);}
.esc .lead{color:var(--esc-txt);}
.fecho{margin-top:26px;max-width:66ch;color:var(--txt-soft);}
.esc .fecho{color:var(--esc-txt);}

/* ── colunas com filete âmbar ──────────────────────────────────*/
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px;margin-top:30px;}
.col{border-top:3px solid var(--am);padding-top:12px;}
.col .n{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:15px;color:var(--sage);font-weight:600;}
.col h3,.col h4{font-family:var(--cond);text-transform:uppercase;font-weight:600;font-size:22px;letter-spacing:.04em;line-height:1.15;margin:2px 0 8px;}
.col p{font-size:16px;color:var(--txt-soft);}
.col li{font-size:16px;color:var(--txt-soft);padding:6px 0 6px 18px;position:relative;border-bottom:1px solid var(--linha);}
.col li::before{content:"";position:absolute;left:0;top:.95em;width:7px;height:7px;background:var(--am);}

/* ── faixas de programa ────────────────────────────────────────
   A faixa inteira é o link — alvo grande, e sem link dentro de link. */
.banda{display:block;text-decoration:none;}
.banda .in{display:grid;grid-template-columns:110px minmax(200px,1fr) 2fr 40px;gap:0 28px;align-items:center;padding-top:22px;padding-bottom:22px;}
.banda .n{font-family:var(--cond);font-size:64px;line-height:1;font-weight:300;}
.banda .nome{font-family:var(--cond);font-size:38px;line-height:1;font-weight:600;}
.banda .sub{display:block;font-family:var(--cond);text-transform:uppercase;font-size:16px;letter-spacing:.1em;margin-top:6px;font-weight:500;line-height:1.2;}
.banda p{font-size:16px;max-width:60ch;}
.banda .nor{display:block;font-family:var(--cond);font-size:15px;letter-spacing:.1em;margin-top:6px;font-weight:500;}
.banda .seta{font-size:34px;transition:transform .15s;}
a.banda:hover .seta{transform:translateX(8px);}
.b-pet{background:var(--pet);color:#fff;}
.b-am{background:var(--am);color:var(--on-am);}
.b-sage{background:var(--sage);color:#fff;}

/* ── dois blocos lado a lado (branco | escuro) ─────────────────*/
/* Faixa com a foto do pátio (12/10/2026, foto dele, sem legenda e sem
   nome da subestação): entre a lista de programas e o "O que muda",
   escurecida para casar com a paleta. A foto mora em assets/patio.webp;
   o caminho relativo é o mesmo da raiz e de en/ es/ porque o CSS está
   em estatico/. */
.foto-faixa{min-height:420px;background:linear-gradient(180deg,rgba(7,42,43,.15),rgba(7,42,43,.75)),url(assets/patio.webp) center 40%/cover no-repeat;}
/* "O que muda" em duas subseções (12/10/2026); o "Sob demanda" é a faixa
   escura `.demanda` logo abaixo (antes dividia a largura com as colunas). */
.sub-sec{font-family:var(--cond);text-transform:uppercase;font-weight:300;font-size:clamp(24px,2.6vw,32px);letter-spacing:.02em;margin-top:34px;color:var(--pet);}
.sub-sec+.cols{margin-top:18px;}
.cols.duas{grid-template-columns:repeat(2,minmax(0,1fr));max-width:66%;}
.demanda{padding:clamp(28px,4vw,44px) 0;}
.demanda .in{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center;}
.demanda .rot{color:var(--am);}
.demanda p{color:var(--esc-txt);margin-top:14px;}
.demanda .link-bt{margin-top:0;}
.link-bt{display:grid;grid-template-columns:1fr 44px;gap:16px;align-items:center;text-decoration:none;margin-top:26px;
  padding:14px 0;border-top:1px solid var(--esc-linha);border-bottom:1px solid var(--esc-linha);}
.link-bt b{font-family:var(--cond);text-transform:uppercase;font-weight:600;color:var(--am);font-size:21px;letter-spacing:.05em;}
.link-bt .bt{background:var(--esc-linha);height:44px;display:flex;align-items:center;justify-content:center;font-size:22px;}
.link-bt:hover .bt{background:var(--am);color:var(--on-am);}

/* ── as folhas dos documentos ──────────────────────────────────
   Miniaturas de PÁGINA, sempre sobre branco: documento é branco. */
/* dois entregáveis: o relatório (duas folhas) ocupa dois terços, a memória
   (uma folha) um terço, para as folhas saírem do mesmo tamanho */
.entregas{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:start;margin-top:30px;}
.entrega .folhas{margin-top:16px;}
.folhas{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:24px;align-items:start;margin-top:30px;}
.folha{display:flex;flex-direction:column;gap:11px;}
.folha img{width:100%;height:auto;display:block;background:#fff;border:1px solid #A7B5B3;}
.folha a{display:block;}
.folha a:hover img{border-color:var(--pet);outline:2px solid var(--pet);}
.folha figcaption{font-size:14.5px;line-height:1.5;color:var(--txt-soft);}

/* ── tela do programa ──────────────────────────────────────────
   As figuras que BusForce e SupForce desenham, embutidas como SVG,
   com a paleta do TEMA ESCURO deles. É retrato do software; os
   tokens são redefinidos AQUI, escopados no contêiner.

   O fundo é --paper-raised (#0F2423) e não --paper: no desenho do
   SupForce essa cor é a MÁSCARA atrás de cada rótulo. Sobre qualquer
   outra cor, cada texto vira um retângulo mais claro. */
.telas{display:flex;flex-direction:column;gap:26px;margin-top:26px;}
.tela{
  background:#0F2423;border:1px solid #1F3736;padding:16px;
  overflow-x:auto;display:flex;flex-direction:column;gap:12px;

  --paper:#0A1414;
  --paper-raised:#0F2423;
  --line:#1F3736;
  --ink:#E8EEED;
  --ink-dim:#93AFAE;
  --ink-faint:#5E8382;
  --copper:#6FB5AE;
  --brand-red:#E2574B;
  --brand-green:#8FCB4C;
  --neutro-soft:rgba(154,165,174,.16);
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}
.tela svg{display:block;width:100%;height:auto;max-width:100%;}
/* O detalhe do ponto P é retrato (1750x2480): sem teto ele ocupa
   1224 px de altura e engole a página. */
.tela img{max-height:520px;width:auto;margin:0 auto;}
/* No celular o desenho NÃO encolhe: a 293 px os rótulos sairiam com
   5 px. A figura mantém largura legível e a moldura rola de lado —
   é o que se faz com prancha técnica. */
@media (max-width:700px){
  .tela svg{width:auto;min-width:620px;}
  .tela img{max-height:420px;}
  .tela.ampla img{max-height:none;}
}
/* As montagens (01/10/2026): telas inteiras do programa, largas. Vão na
   largura toda (o teto de 520 px é do detalhe do ponto P, que é retrato) e
   abrem em tamanho real no clique, como as folhas da home. */
.tela.ampla a{display:block;}
.tela.ampla img{display:block;max-height:none;width:100%;height:auto;}
.tela figcaption{font-size:14.5px;line-height:1.5;color:#93AFAE;max-width:90ch;}
.tela figcaption b{color:#E8EEED;font-weight:600;}

/* ── fecho de página ───────────────────────────────────────────*/
.cta{background:var(--esc);color:#fff;}
.cta .in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 40px;padding-top:34px;padding-bottom:34px;}
.cta p{font-family:var(--cond);text-transform:uppercase;font-weight:300;font-size:clamp(24px,2.6vw,34px);line-height:1.1;max-width:32ch;}
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--cond);text-transform:uppercase;font-weight:600;
  font-size:20px;letter-spacing:.08em;text-decoration:none;background:var(--am);color:var(--on-am);padding:11px 24px;border:2px solid var(--am);}
.btn:hover{background:transparent;color:var(--am);}

.rodape{border-top:6px solid var(--am);background:#fff;font-size:14.5px;color:var(--txt-soft);}
.rodape .in{display:grid;grid-template-columns:7fr 5fr;gap:14px 40px;padding-top:22px;padding-bottom:30px;}
.rod-mapa{display:flex;flex-wrap:wrap;align-content:start;gap:4px 22px;font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;font-size:16.5px;color:var(--pet);font-weight:500;}
.rod-mapa a{text-decoration:none;}
.rod-mapa a:hover{text-decoration:underline;text-decoration-color:var(--am);text-decoration-thickness:3px;text-underline-offset:4px;}
.rod-txt .assin{color:var(--pet);font-weight:600;}

/* ── página de programa ────────────────────────────────────────*/
.saidas{margin-top:26px;border-top:3px solid var(--pet);}
.saida{display:grid;grid-template-columns:200px 1fr;gap:0 24px;padding:14px 0;border-bottom:1px solid var(--linha);}
.saida .k{font-family:var(--cond);text-transform:uppercase;font-weight:600;font-size:19px;letter-spacing:.06em;}
.normas-rot{margin-top:30px;}
.normas{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.norm{font-family:var(--cond);font-size:17px;letter-spacing:.08em;border:2px solid var(--pet);padding:2px 12px;font-weight:500;}
.cab-sec{padding-top:clamp(36px,5vw,64px);padding-bottom:26px;}

/* ── quem somos ──────────────────────────────────────────────── */
.sec.cz .col li{border-bottom-color:#B9C4C2;}
/* a equipe: só os nomes, em linha, depois do texto (12/10/2026) */
.equipe{margin-top:40px;padding-top:22px;border-top:3px solid var(--am);}
.equipe ul{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 28px;}
.equipe li{font-family:var(--cond);text-transform:uppercase;font-weight:600;font-size:21px;letter-spacing:.04em;color:var(--pet);padding:10px 0;border-bottom:1px solid var(--linha);}

.contato .in{display:grid;grid-template-columns:7fr 5fr;gap:30px 40px;align-items:start;}
.contato .btn{margin-top:26px;}
.canal{display:grid;grid-template-columns:130px 1fr;gap:0 18px;padding:13px 0;border-bottom:1px solid var(--esc-linha);}
.canal:first-child{border-top:1px solid var(--esc-linha);}
.canal .k{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-size:16px;color:var(--am);font-weight:500;}
.canal .v{color:#E8EEED;}
.canais .nota{margin-top:14px;font-size:16px;color:var(--esc-txt);}

/* ── estreito ──────────────────────────────────────────────────*/
@media (max-width:860px){
  .hero{background:var(--h-bg);}
  .hero .in,.hero.grande .in{grid-template-columns:1fr;min-height:0;}
  .hero .a{padding-right:0;}
  /* empilhado, o desenho fica no fluxo e o bloco âmbar acompanha a
     altura dele (12/10/2026: com altura fixa e overflow hidden a onda
     saía cortada embaixo no celular). Um pouco menor que a largura, com
     respiro em cima e embaixo, para o ponto branco não encostar no título. */
  .hero .b{margin:0 calc(-1 * var(--pad));min-height:0;padding:14px 0 6px;}
  .hero .b svg,.hero.grande .b svg{position:static;display:block;transform:none;width:78%;margin:0 auto;}
  .hero .b svg.prod{width:60%;}
  .faixa .in,.rodape .in,.contato .in{grid-template-columns:1fr;}
  .faixa .seta-link{margin-top:14px;}
  .cols.duas{grid-template-columns:1fr;max-width:none;}
  .demanda .in{grid-template-columns:1fr;}
  .entregas{grid-template-columns:1fr;}
  .banda .in{grid-template-columns:64px 1fr 30px;}
  .banda .n{font-size:44px;}
  .banda .nome{font-size:32px;}
  .banda p{grid-column:2 / 4;margin-top:8px;}
  .banda .seta{grid-column:3;grid-row:1;font-size:28px;}
  .saida{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .banda .seta{transition:none;}
  .hero .traco{animation:none;stroke-dashoffset:0;}
  .hero .ponto{animation:none;opacity:1;}
}