/* ── Home — "estrutura de empresa grande, um responsável" ──────────────────
   Setembro/2026. Carregado só pela página inicial ($cssExtra em
   paginas/home.php). Paleta, marca e as duas fontes são as do site.css; os
   dados (hosts, tempos, rótulos de operação) usam a monoespaçada do próprio
   sistema — não é uma terceira fonte baixada.                              */


/* ── Hero ─────────────────────────────────────────────────────────────── */
@media(min-width:761px){.hero--globo{padding-top:56px;padding-bottom:0}}
.hero--globo h1{margin-top:22px;font-size:clamp(34px,4.3vw,54px);max-width:15ch}
.hero--globo .hero__sub{max-width:52ch}
.hero--globo .ctas{margin-top:30px}
@media(min-width:1080px){
  .hero--globo .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,430px);gap:56px;align-items:center}
}
/* Globo do celular com altura FIXA, presa embaixo: com inset:0 o cover
   acompanhava a altura do hero e o horizonte subia por cima do texto
   (ver ARMADILHAS, "Acrescentei conteúdo no hero…"). */
@media(max-width:879px){.hero--globo .hero__fundo{top:auto;height:1150px}}

/* Console de operação — o cartão traz o próprio fundo porque fica sobre o
   globo, onde o véu não chega. Opacidade .86 medida contra o pixel mais
   claro da atmosfera (texto de apoio a 5,9:1). */
.console{max-width:600px;background:rgba(11,18,32,.86);border:1px solid rgba(255,255,255,.14);border-radius:var(--raio);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow:hidden}
@media(max-width:1079px){.console{margin-top:8px}}
.console__topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;
  border-bottom:1px solid var(--linha-escura);background:rgba(255,255,255,.03)}
.console__tit{display:inline-flex;align-items:center;gap:10px;margin:0;font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#e2eaf3}
.console__tit::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 4px rgba(73,184,98,.2)}
.console__quando{font-family:var(--mono);font-size:12px;color:var(--texto-escuro-2);white-space:nowrap}
.console__lista{list-style:none;margin:0;padding:4px 18px}
.console__linha{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:44px;
  border-bottom:1px solid rgba(255,255,255,.06);font-size:14px}
.console__linha:last-child{border-bottom:0}
.console__ponto{width:8px;height:8px;border-radius:50%;background:var(--texto-escuro-2)}
.console__host{font-family:var(--mono);font-size:13.5px;color:#e2eaf3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.console__medida{display:flex;align-items:center;gap:12px}
.console__estado{font-size:13px;color:var(--texto-escuro)}
.console__ms{min-width:58px;text-align:right;font-family:var(--mono);font-size:12.5px;color:var(--texto-escuro-2);font-variant-numeric:tabular-nums}
/* Celular: situação e tempo descem para baixo do endereço. Alinhados à
   direita, ficavam debaixo do botão flutuante do WhatsApp ao abrir a página. */
@media(max-width:520px){
  .console__linha{grid-template-columns:10px minmax(0,1fr);row-gap:2px;padding:8px 0}
  .console__medida{grid-column:2;gap:10px}
  .console__ms{min-width:0;text-align:left}
}
[data-estado="no-ar"] .console__ponto{background:var(--verde)}
[data-estado="no-ar"] .console__estado{color:var(--verde-claro)}
[data-estado="fora"] .console__ponto{background:var(--alerta)}
[data-estado="fora"] .console__estado{color:var(--alerta)}
.console__resumo{padding:12px 18px;border-top:1px solid var(--linha-escura);font-size:13px;line-height:1.5;color:var(--texto-escuro)}
.console__resumo b{color:#fff;font-weight:600}
.console__fatos{list-style:none;margin:0;padding:0 18px 14px;display:flex;flex-wrap:wrap;gap:8px}
.console__fatos li{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:#dbe6f1;
  border:1px solid var(--linha-escura);border-radius:999px;padding:4px 10px}
.console__pe{display:flex;align-items:center;gap:11px;padding:12px 18px;border-top:1px solid var(--linha-escura);
  font-size:13px;color:var(--texto-escuro)}
.console__pe img{width:34px;height:34px;flex:0 0 auto;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.22)}
.console__pe b{color:#fff;font-weight:600}

/* Números no pé do hero: 2 colunas no celular, 4 no computador. */
.numeros{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--linha-escura)}
.numeros li{display:grid;gap:4px;align-content:start;padding:20px 12px 22px 0}
.numeros li:nth-child(even){padding-left:16px;border-left:1px solid var(--linha-escura)}
.numeros li:nth-child(n+3){border-top:1px solid var(--linha-escura)}
.numeros b{font-family:var(--display);font-weight:800;font-size:clamp(23px,2.5vw,31px);letter-spacing:-.03em;line-height:1.1;color:#fff}
.numeros span{font-size:13.5px;line-height:1.45;color:var(--texto-escuro-2);max-width:26ch}
/* No computador a faixa passa por cima do globo: sem fundo próprio, "do
   diagnóstico ao suporte" ficava cortado pelas linhas claras. Mesmo .86 do
   console, medido contra o pixel mais claro da imagem. */
@media(min-width:900px){
  .numeros{grid-template-columns:repeat(4,minmax(0,1fr));margin:40px 0 56px;border:1px solid rgba(255,255,255,.14);
    border-radius:var(--raio);background:rgba(11,18,32,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .numeros li{padding:22px 22px 24px}
  .numeros li:nth-child(even){padding-left:22px}
  .numeros li:nth-child(n+3){border-top:0}
  .numeros li+li{border-left:1px solid var(--linha-escura)}
}
/* "1 responsável" quebrava em duas linhas na coluna de 154px. */
@media(max-width:520px){.numeros b{font-size:20px}}

/* ── Faixa "no ar" ────────────────────────────────────────────────────── */
.clientes__vivo{display:inline-block;width:7px;height:7px;margin-right:10px;border-radius:50%;
  background:var(--verde);box-shadow:0 0 0 4px rgba(73,184,98,.2);vertical-align:1px}

/* ── Organograma ──────────────────────────────────────────────────────────
   Topo com o responsável, uma barra horizontal e três frentes com duas áreas
   cada. As linhas são bordas de pseudo-elemento; a barra vai do centro da
   1ª coluna ao centro da 3ª: com gap de 28px, cada centro fica a
   (100% - 56px) / 6 da borda.                                               */
.org__topo{display:flex;justify-content:center;position:relative}
.org__chefe{display:flex;align-items:center;gap:16px;width:100%;max-width:460px;padding:18px 22px;
  background:var(--navy);color:#fff;border-radius:var(--raio)}
.org__chefe img{width:56px;height:56px;flex:0 0 auto;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.22)}
.org__chefe b{display:block;font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.01em}
.org__chefe span{display:block;font-size:14px;color:var(--texto-escuro)}
.org__chefe small{display:block;margin-top:4px;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--verde-claro)}
.org__colunas{list-style:none;margin:0;padding:0;display:grid;gap:28px;position:relative}
.org__coluna{position:relative;display:grid;gap:14px;align-content:start}
.org__diretoria{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza-texto)}
.org__area{position:relative;display:grid;gap:10px;padding:18px 18px 14px;background:var(--branco);
  border:1px solid var(--linha);border-radius:var(--raio)}
.org__area h3{font-size:18px;font-weight:700}
.org__desc{font-size:14px;line-height:1.5;color:var(--cinza-texto)}
.org__itens{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.org__chip{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border:1px solid var(--linha-forte);
  border-radius:999px;background:var(--papel);color:var(--tinta);font-family:var(--display);font-weight:600;font-size:13px;
  line-height:1.2;text-decoration:none;cursor:pointer;transition:border-color .18s ease,color .18s ease}
.org__chip:hover{border-color:var(--azul);color:var(--azul-escuro)}
.org__resumo{display:none;font-size:14px;line-height:1.55;color:var(--tinta-2)}

@media(min-width:980px){
  .org__topo{padding-bottom:36px}
  .org__topo::after{content:'';position:absolute;left:50%;bottom:0;width:1px;height:36px;background:var(--linha-forte)}
  .org__colunas{grid-template-columns:repeat(3,minmax(0,1fr));padding-top:36px}
  .org__colunas::before{content:'';position:absolute;top:0;height:1px;background:var(--linha-forte);
    left:calc((100% - 56px) / 6);right:calc((100% - 56px) / 6)}
  .org__coluna::before{content:'';position:absolute;top:-36px;left:50%;width:1px;height:36px;background:var(--linha-forte)}
  .org__diretoria{justify-self:center;padding:5px 14px;background:var(--papel);border:1px solid var(--linha-forte);border-radius:999px}
  .org__area::before{content:'';position:absolute;top:-15px;left:50%;width:1px;height:14px;background:var(--linha-forte)}
}
/* Abaixo de 980px a árvore vira trilho à esquerda. Os serviços saem como
   texto corrido: seis cartões cheios de botões davam uma tela por área. */
@media(max-width:979px){
  .org__topo{justify-content:flex-start}
  .org__colunas{margin-top:22px;padding-left:24px}
  .org__colunas::before{content:'';position:absolute;left:7px;top:-22px;bottom:18px;width:1px;background:var(--linha-forte)}
  .org__coluna{gap:12px}
  .org__area::before{content:'';position:absolute;left:-17px;top:28px;width:16px;height:1px;background:var(--linha-forte)}
  .org__itens{display:none}
  .org__resumo{display:block}
}

/* ── Plataformas prontas ──────────────────────────────────────────────── */
.suite{display:grid;gap:18px}
@media(min-width:900px){.suite{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plataforma{display:flex;flex-direction:column;gap:12px;padding:26px 24px 16px;background:var(--navy-2);
  border:1px solid var(--linha-escura);border-radius:var(--raio)}
.plataforma__topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.plataforma__tag{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--azul-claro)}
.plataforma h3{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.plataforma h3 em{font-style:normal;color:var(--verde-claro)}
.plataforma__plano{font-size:13px;line-height:1.45;color:var(--texto-escuro-2)}
.plataforma__preco{margin-top:4px;font-family:var(--display);font-size:38px;font-weight:800;letter-spacing:-.035em;line-height:1}
.plataforma__preco small{margin-left:3px;font-size:14px;font-weight:500;letter-spacing:0;color:var(--texto-escuro-2)}
.plataforma__preco .plataforma__de{display:block;margin:0 0 6px;font-family:var(--texto);font-size:12.5px}
.plataforma__cond{font-size:13.5px;color:var(--texto-escuro)}
.plataforma ul{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:8px;font-size:14.5px;color:#dbe6f1}
.plataforma li{display:flex;gap:9px;align-items:flex-start}
.plataforma li svg{flex:0 0 auto;margin-top:4px;color:var(--verde-claro)}
.plataforma__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:auto;padding-top:10px}
.plataforma__acoes .btn{padding:11px 18px;font-size:14.5px}
/* Demonstracao como link, nao como segundo botao: so desliga o cromo do
   <button>. Fonte, cor e sublinhado vem de .sistema__assinar (site.css), e
   o min-height de 44px de la' mantem o alvo de toque. */
.sistema__assinar--botao{background:none;border:0;padding:0;cursor:pointer}
@media(max-width:759px){
  .suite{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 18px 16px;margin:0 -18px}
  .suite::-webkit-scrollbar{display:none}
  .plataforma{flex:0 0 88%;min-width:0;scroll-snap-align:center;padding:22px 18px 10px}
  .plataforma h3{font-size:21px}
  .plataforma__preco{font-size:34px}
  .plataforma__acoes{flex-direction:column;align-items:stretch}
  .plataforma__acoes .btn{justify-content:center}
  .plataforma__acoes .sistema__assinar{align-self:center}
}

/* ── Operação ─────────────────────────────────────────────────────────── */
.operacao{display:grid;gap:36px}
@media(min-width:960px){.operacao{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}}
.operacao .cab{margin-bottom:26px}
.compromissos{margin:0;border-top:1px solid var(--linha)}
.compromissos div{display:grid;gap:4px;padding:15px 0;border-bottom:1px solid var(--linha)}
@media(min-width:640px){.compromissos div{grid-template-columns:140px minmax(0,1fr);gap:20px;align-items:baseline}}
.compromissos dt{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--azul-escuro)}
.compromissos dd{margin:0;font-size:15.5px;color:var(--tinta-2)}
.ficha{background:var(--navy);color:#fff;border-radius:var(--raio);overflow:hidden}
@media(min-width:960px){.ficha{position:sticky;top:100px}}
.ficha__tit{margin:0;padding:14px 20px;border-bottom:1px solid var(--linha-escura);font-family:var(--mono);font-size:12px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#e2eaf3}
.ficha dl{margin:0;padding:4px 20px 10px}
.ficha dl div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.ficha dl div:last-child{border-bottom:0}
.ficha dt{padding-top:2px;font-family:var(--mono);font-size:12px;color:var(--texto-escuro-2)}
.ficha dd{margin:0;font-size:14.5px;color:#e2eaf3}

/* ── Quem responde ────────────────────────────────────────────────────── */
.quem-caixa{border:1px solid var(--linha-escura);border-radius:var(--raio);overflow:hidden}
.quem{width:100%;border-collapse:collapse;font-size:15px}
.quem th,.quem td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--linha-escura)}
.quem tbody tr:last-child th,.quem tbody tr:last-child td{border-bottom:0}
.quem thead th{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-escuro-2);background:rgba(255,255,255,.03)}
.quem thead th:last-child{color:var(--verde-claro)}
.quem tbody th{font-family:var(--display);font-weight:600;color:#fff}
.quem td{color:var(--texto-escuro-2)}
.quem td:last-child{color:#fff;font-weight:500}
/* Largura de coluna só no desktop: no modo lista ela sobreviveria (ARMADILHAS, "width:22%…"). */
@media(min-width:760px){.quem tbody th{width:22%}.quem td{width:39%}}
/* Celular: cada etapa vira um bloco, e o data-r de cada célula vira rótulo. */
@media(max-width:759px){
  .quem thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .quem,.quem tbody,.quem tr,.quem th,.quem td{display:block}
  .quem tr{padding:14px 16px;border-bottom:1px solid var(--linha-escura)}
  .quem tbody tr:last-child{border-bottom:0}
  .quem tbody th,.quem td{padding:0;border:0}
  .quem td{display:grid;gap:2px;margin-top:8px}
  .quem td::before{content:attr(data-r);font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-escuro-2)}
  .quem td:last-child::before{color:var(--verde-claro)}
}

.projetos__mais{margin-top:32px}

/* ── Dúvidas ──────────────────────────────────────────────────────────── */
.duvidas{display:grid;gap:30px}
@media(min-width:900px){
  .duvidas{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;align-items:start}
  .duvidas .cab{position:sticky;top:110px}
}
.duvidas .cab{margin-bottom:0}
.duvidas .cab .btn{margin-top:24px}
.duvidas .faq{max-width:none}
.duvidas .faq details{background:var(--papel);padding:0}
/* A área de toque é o summary, não o cartão. */
.duvidas .faq summary{padding:18px 20px;min-height:44px}
.duvidas .faq p{margin:0;padding:0 20px 18px}
@media(max-width:760px){.duvidas .cab .btn{width:100%;justify-content:center}}

/* ── Carta do responsável ─────────────────────────────────────────────── */
.carta{padding:96px 0;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-3) 100%);color:#fff}
.carta__grid{display:grid;gap:28px;align-items:start}
@media(min-width:900px){.carta__grid{grid-template-columns:auto minmax(0,1fr);gap:56px}}
.carta__foto{width:132px;height:132px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.2)}
.carta .tag{color:var(--azul-claro)}
.carta h2{max-width:22ch;margin:12px 0 18px;font-size:clamp(28px,4vw,42px);font-weight:800}
.carta p{max-width:58ch;font-size:17.5px;color:var(--texto-escuro)}
.carta p+p{margin-top:12px}
.carta .carta__assina{display:grid;gap:4px;margin-top:26px;padding-top:18px;border-top:1px solid var(--linha-escura)}
.carta__assina b{font-family:var(--display);font-size:19px;font-weight:700;color:#fff}
.carta__assina span{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--texto-escuro-2)}
.carta .ctas{margin-top:28px}
.garantias-linha{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 24px;font-size:14px;color:var(--texto-escuro)}
.garantias-linha li{display:inline-flex;align-items:center;gap:9px}
.garantias-linha li::before{content:'';width:10px;height:6px;margin-top:-3px;border-left:2px solid var(--verde-claro);
  border-bottom:2px solid var(--verde-claro);transform:rotate(-45deg)}
@media(max-width:760px){.carta{padding:60px 0}.carta__foto{width:96px;height:96px}}