/* ===== Fontes guardadas dentro do site (licença SIL OFL) ===== */
@font-face { font-family: 'Inter'; src: url('../fontes/inter-latin.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fontes/space-grotesk-latin.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }

/* ===== Cores e fontes da marca ===== */
:root {
  --navy: #0B2545;
  --ciano: #13B5C8;
  --branco: #FFFFFF;
  --aco: #8A939B;
  --gelo: #F4F5F6;
  --ciano-texto: #0E7C8B; /* ciano escurecido, para ler bem sobre fundo claro */
  --titulo: 'Space Grotesk', sans-serif;
  --texto: 'Inter', sans-serif;

  /* Faces da fábrica apagada */
  --topo0: #24354A; --esq0: #1A2C43; --dir0: #14263D; --jan0: #2B3C52; --linha0: #46566A;
  /* Faces da fábrica acesa */
  --topo1: #10849C; --esq1: #0E5974; --dir1: #0D425F; --jan1: #ACE5EC; --linha1: #5ACBD9;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--navy); color: var(--branco); font-family: var(--texto); font-size: 17px; line-height: 1.55; }
h1, h2, h3, h4 { font-family: var(--titulo); font-weight: 700; line-height: 1.15; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; }
section { scroll-margin-top: 68px; }
section:focus { outline: none; }

/* ===== Barra do topo ===== */
.barra { position: sticky; top: 0; z-index: 10; height: 68px; background: var(--navy); display: flex; align-items: center; padding: 0 clamp(16px, 4.4vw, 56px); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca-nome { font-family: var(--titulo); font-weight: 700; font-size: 23px; letter-spacing: -.5px; }
.marca-texto { margin-left: 16px; padding-left: 16px; border-left: 1px solid rgba(138,147,155,.45); font-size: 13px; color: var(--aco); }
.botao { margin-left: auto; font-size: 14px; border: 1px solid var(--ciano); padding: 8px 18px; border-radius: 4px; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.botao:hover { background: var(--ciano); color: var(--navy); }

/* ===== Maquete ===== */
.hero { position: relative; max-width: 1280px; margin: 0 auto; }
.maquete { position: relative; touch-action: manipulation; }
#fabrica { display: block; width: 100%; height: auto; }

/* Faces dos prédios */
.setor { cursor: pointer; }
.setor polygon { stroke: var(--linha0); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill .45s, stroke .45s; }
.base polygon { stroke: var(--linha0); stroke-width: 1; vector-effect: non-scaling-stroke; }
.f-t { fill: var(--topo0); } .f-l { fill: var(--esq0); } .f-r { fill: var(--dir0); } .f-w { fill: var(--jan0); }
.setor.aceso polygon, .setor.pisca polygon { stroke: var(--linha1); }
.setor.aceso .f-t, .setor.pisca .f-t { fill: var(--topo1); }
.setor.aceso .f-l, .setor.pisca .f-l { fill: var(--esq1); }
.setor.aceso .f-r, .setor.pisca .f-r { fill: var(--dir1); }
.setor.aceso .f-w, .setor.pisca .f-w { fill: var(--jan1); }
.alvo { fill: transparent; }

/* Telhado que levanta e interior que aparece */
.f-i { fill: #081C36; }
.setor.aceso .f-i, .setor.pisca .f-i { fill: #081C36; }
.setor.ativo .f-i { fill: var(--ciano); }
.telhado { transition: transform .35s ease; }
.setor.ativo .telhado { transform: translateY(-34px); }

/* Frase que sai do setor */
.balao { position: absolute; left: 0; top: 0; z-index: 4; width: max-content; max-width: 310px; padding: 6px 11px; background: var(--navy); border: 1px solid var(--ciano); border-radius: 6px; font-family: var(--titulo); font-weight: 700; font-size: 15px; line-height: 1.25; text-align: center; pointer-events: none; opacity: 0; transform: translate(-50%, -85%); transition: opacity .25s, transform .3s; }
.balao.visivel { opacity: 1; transform: translate(-50%, -100%); }
.balao svg { display: inline-block; vertical-align: -2px; margin-right: 6px; }

/* Contador de confiabilidade */
.contador { position: absolute; right: clamp(16px, 4.4vw, 56px); bottom: 34px; width: 210px; }
.contador-topo { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--aco); }
.contador-topo strong { font-family: var(--titulo); font-weight: 700; font-size: 26px; color: var(--branco); }
.contador-trilho { height: 3px; margin-top: 4px; background: rgba(138,147,155,.3); }
.contador-trilho i { display: block; height: 100%; width: 0; background: var(--ciano); transition: width .45s; }

/* Marcadores e linhas */
.marcador, .rotas { pointer-events: none; }
.linha { stroke: var(--ciano); stroke-width: 1; opacity: .22; transition: opacity .3s; vector-effect: non-scaling-stroke; }
.ponto { fill: var(--ciano); opacity: .7; transition: opacity .3s; }
.halo { fill: none; stroke: var(--ciano); stroke-width: 1; opacity: 0; transition: opacity .3s; vector-effect: non-scaling-stroke; }
.marcador.ativo .linha, .marcador.ativo .ponto, .marcador.ativo .halo { opacity: 1; }
.rota { fill: none; stroke: var(--branco); stroke-width: 1; opacity: .8; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s; vector-effect: non-scaling-stroke; }
.rota.visivel { stroke-dashoffset: 0; }

/* Indicadores */
.ind { position: absolute; width: 18%; text-decoration: none; pointer-events: none; }
.ind.esq { width: 19.5%; text-align: right; }
.ind[data-i="0"] { left: 1.6%; top: 39.2%; }
.ind[data-i="1"] { left: 1.6%; top: 12.3%; }
.ind[data-i="2"] { left: 66.4%; top: 3.4%; width: 27%; }
.ind[data-i="3"] { left: 50%; top: 78.5%; width: 26%; }
.ind[data-i="4"] { left: 81.25%; top: 22.8%; }
.ind[data-i="5"] { left: 81.25%; top: 57.2%; }
.ind-t { font-family: var(--titulo); font-weight: 700; font-size: 19px; opacity: .55; pointer-events: auto; cursor: pointer; transition: opacity .25s, color .25s; }
.ind-r { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--ciano); opacity: 0; visibility: hidden; transition: opacity .25s; }
.ind.ativo { z-index: 3; background: var(--navy); box-shadow: 0 0 0 8px var(--navy); }
.ind.ativo .ind-t { opacity: 1; color: var(--ciano); }
.ind.ativo .ind-r { opacity: 1; visibility: visible; pointer-events: auto; cursor: pointer; }
.conectada .ind-t { opacity: 1; }

/* Mensagem central */
.mensagem { position: absolute; left: clamp(16px, 4.4vw, 56px); bottom: 28px; width: 43%; }
.mensagem h1 { font-size: clamp(26px, 2.65vw, 34px); }
.mensagem p { margin-top: 12px; color: var(--aco); transition: color .6s; }
.mensagem p.conectada-frase { color: var(--ciano); }

/* Passagem suave entre a fábrica e os textos */
.veu { position: fixed; left: 0; right: 0; top: 68px; bottom: 0; z-index: 9; background: var(--navy); opacity: 0; pointer-events: none; transition: opacity .34s ease; }
.veu.fechado { opacity: 1; }
@keyframes chegar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.chegando > * { animation: chegar .55s ease-out both; }

/* Cartão do celular */
.cartao { display: none; }

/* ===== Blocos de texto ===== */
.bloco { background: var(--gelo); color: var(--navy); padding: 72px max(clamp(16px, 4.4vw, 56px), calc((100% - 1168px) / 2)); display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 56px; border-bottom: 1px solid rgba(138,147,155,.35); }
.bloco-tit { position: sticky; top: 100px; align-self: start; }
.setor-nome { font-size: 13px; font-weight: 600; color: var(--ciano-texto); }
.bloco h2 { font-size: 40px; margin-top: 8px; }
.voltar { display: inline-block; margin-top: 24px; font-size: 14px; text-decoration: none; border-bottom: 1px solid var(--ciano); padding-bottom: 3px; }
.bloco-txt p { max-width: 720px; margin-bottom: 14px; }
.bloco-txt .chamada { font-family: var(--titulo); font-weight: 700; font-size: 26px; line-height: 1.2; margin-bottom: 18px; }
.bloco-txt h3 { font-size: 21px; margin: 34px 0 14px; }

.grade { display: grid; gap: 14px; }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.item { background: var(--branco); border: 1px solid rgba(138,147,155,.35); border-radius: 6px; padding: 18px; }
.item h4 { font-size: 17px; margin-bottom: 8px; }
.item p { font-size: 15px; line-height: 1.5; margin-bottom: 0; }
.bloco-txt .caso h3 { font-size: 19px; margin: 0 0 12px; }
.caso p { margin-bottom: 9px; }
.caso p:last-child { margin-bottom: 0; }
.caso b { display: block; font-size: 13px; font-weight: 600; color: var(--ciano-texto); }
.dados { list-style: none; margin-top: 18px; }
.dados li { padding: 12px 0; border-top: 1px solid rgba(138,147,155,.35); }
.dados b { display: block; font-size: 13px; font-weight: 600; color: var(--ciano-texto); }

.rodape { text-align: center; padding: 26px 16px; font-size: 13px; color: var(--aco); }
.email { color: var(--ciano-texto); }

/* ===== Aviso de privacidade ===== */
.pagina { background: var(--gelo); color: var(--navy); padding: 56px max(clamp(16px, 4.4vw, 56px), calc((100% - 720px) / 2)) 64px; }
.pagina h1 { font-size: 36px; margin-bottom: 6px; }
.pagina .data { font-size: 14px; color: #5f6a73; margin-bottom: 26px; }
.pagina h2 { font-size: 21px; margin: 28px 0 8px; }
.pagina p { margin-bottom: 12px; }
.pagina .voltar { display: block; width: fit-content; margin-top: 30px; margin-left: 0; }

/* ===== Telas menores: tablet e celular ===== */
@media (max-width: 1099px) {
  .hero { display: flex; flex-direction: column; padding-bottom: 20px; }
  .mensagem { position: static; order: -1; width: auto; padding: 22px clamp(16px, 4.4vw, 56px) 6px; }
  .mensagem h1 { font-size: clamp(25px, 6.6vw, 38px); }
  .mensagem p { font-size: 15px; }
  .maquete { max-width: 680px; width: 100%; margin: 0 auto; }
  .linha, .halo { display: none; }
  .contador { position: static; width: auto; margin: 6px clamp(14px, 4.4vw, 56px) 0; }
  .balao { font-size: 14px; max-width: min(280px, 76vw); }
  /* Indicadores continuam existindo para teclado e leitor de tela */
  .ind { width: 1px !important; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cartao { display: block; margin: 8px clamp(14px, 4.4vw, 56px) 0; border: 1px solid var(--ciano); border-radius: 8px; padding: 14px; }
  .cartao h2 { font-size: 20px; }
  .cartao p { font-size: 14.5px; line-height: 1.4; margin-top: 4px; color: #d7dde2; }
  .cartao a { display: inline-block; margin-top: 10px; padding: 2px 0; font-size: 14.5px; font-weight: 500; color: var(--ciano); text-decoration: none; }
  .cartao a[hidden] { display: none; }
  .bloco { display: flex; flex-direction: column; gap: 0; padding-top: 48px; padding-bottom: 40px; }
  .bloco-tit { display: contents; }
  .bloco h2 { margin-bottom: 20px; }
  .voltar { order: 3; align-self: flex-start; }
  .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .marca-texto { display: none; }
  .bloco h2 { font-size: 32px; }
  .bloco-txt .chamada { font-size: 23px; }
  .grade-2, .grade-3, .grade-4 { grid-template-columns: minmax(0, 1fr); }
}

/* Quem desativa animações no aparelho não vê movimento */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  /* O escurecimento não é movimento, então continua */
  .veu { transition: opacity .34s ease !important; }
}