/* Milani Engenharia - pagina Sobre (about.html)
   Linha do tempo "Nossa historia" com ano em destaque que acompanha a rolagem,
   navegacao lateral por secoes e indicador "role para baixo".
   Usa as cores e fontes definidas em style.css. Comportamento em js/sobre.js. */

/* ---------- ancoras: compensam o cabecalho fixo ao saltar para uma secao ---------- */
.sobre-secao{ scroll-margin-top:90px; }

/* ---------- cabecalho da pagina com chamada para rolar ---------- */
.page-head.sobre-head{ padding:64px 0 56px; }
.sobre-head .sobre-sub{ margin:18px 0 0; max-width:560px; color:var(--mist); font-size:16px; line-height:1.65; }
.rolar-dica{
  display:inline-flex; align-items:center; gap:12px; margin-top:28px;
  color:#fff; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.rolar-dica:hover{ color:var(--yellow); }
.rolar-mouse{
  position:relative; width:22px; height:34px; flex:0 0 auto;
  border:2px solid currentColor; border-radius:12px;
}
.rolar-mouse::after{
  content:""; position:absolute; left:50%; top:6px; width:4px; height:7px; margin-left:-2px;
  border-radius:2px; background:var(--yellow);
  animation:sobre-rolar 1.8s ease-in-out infinite;
}
@keyframes sobre-rolar{
  0%{ transform:translateY(0); opacity:1; }
  70%{ transform:translateY(11px); opacity:0; }
  100%{ transform:translateY(0); opacity:0; }
}

/* ---------- especialidades + por que nos contratar (2 colunas) ---------- */
.grid-2-about{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start; }

/* ---------- secao Historia ---------- */
.historia{ position:relative; background:var(--ink); color:#fff; overflow:clip; }
.historia::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(600px 400px at 0% 0%, rgba(228,226,79,.10), transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/100% 64px;
}
.historia .wrap{ position:relative; }
.historia-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:start; }

/* painel fixo com o ano em destaque (desktop) */
.historia-painel{ position:sticky; top:96px; padding-bottom:8px; }
.historia-titulo{ font-size:clamp(26px,3vw,36px); font-weight:800; color:#fff; line-height:1.2; margin:0 0 14px; }
.historia-intro{ margin:0; color:var(--mist); font-size:15px; line-height:1.65; max-width:420px; }

.historia-status{ margin-top:34px; }
.historia-ano{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(84px,10vw,148px); line-height:.9; letter-spacing:-.045em;
  color:var(--yellow);
}
.historia-ano.is-trocando{ animation:sobre-ano .45s cubic-bezier(.2,.7,.2,1); }
@keyframes sobre-ano{
  0%{ opacity:0; transform:translateY(18px); }
  100%{ opacity:1; transform:none; }
}
.historia-ano-titulo{
  min-height:2.6em; margin:14px 0 0; max-width:420px;
  font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.3; color:#fff;
}
.historia-medidor{ display:flex; align-items:center; gap:14px; margin-top:22px; max-width:420px; }
.historia-progresso{ position:relative; flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.12); overflow:hidden; }
.historia-progresso-barra{ position:absolute; inset:0 auto 0 0; width:0; background:var(--yellow); border-radius:2px; }
.historia-contador{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--mist); white-space:nowrap; }
.historia-contador .atual{ color:#fff; }

/* atalhos por ano */
.historia-anos{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; max-width:440px; }
.historia-anos button{
  appearance:none; cursor:pointer; padding:7px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16); background:transparent; color:var(--mist);
  font-family:var(--font-display); font-weight:700; font-size:12.5px; line-height:1;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.historia-anos button:hover{ border-color:var(--yellow); color:#fff; }
.historia-anos button:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px; }
.historia-anos button.is-ativo{ background:var(--yellow); border-color:var(--yellow); color:var(--ink); }

.historia-dica{ display:flex; align-items:center; gap:10px; margin:26px 0 0; color:var(--mist); font-size:12.5px; }
.historia-dica .rolar-mouse{ width:18px; height:28px; color:var(--mist); }
.historia-dica .rolar-mouse::after{ top:5px; height:6px; }

/* lista de marcos */
.historia-lista{ position:relative; list-style:none; margin:0; padding:0 0 0 34px; }
.historia-lista::before,
.historia-linha{
  content:""; position:absolute; left:11px; top:8px; bottom:8px; width:2px; border-radius:1px;
}
.historia-lista::before{ background:rgba(255,255,255,.12); }
.historia-linha{ bottom:auto; height:0; background:var(--yellow); }
.historia-item{ position:relative; padding-bottom:22px; }
.historia-item:last-child{ padding-bottom:0; }
.historia-item::before{
  content:""; position:absolute; left:-28px; top:30px; width:12px; height:12px; border-radius:50%;
  background:var(--ink); border:2px solid rgba(255,255,255,.35);
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.historia-card{
  display:flex; gap:18px; align-items:flex-start; padding:24px 26px;
  background:var(--charcoal); border:1px solid rgba(255,255,255,.08); border-radius:4px;
  transition:border-color .35s ease, transform .35s ease, opacity .35s ease, box-shadow .35s ease;
}
.historia-icone{
  flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  border:1.5px solid var(--yellow-deep); color:var(--yellow);
  transition:background .3s ease, color .3s ease;
}
.historia-icone svg{ width:20px; height:20px; }
.historia-texto{ min-width:0; }
.historia-texto .ano{
  display:flex; align-items:center; gap:10px; margin-bottom:4px;
  font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--yellow);
}
.historia-texto h3{ margin:0 0 6px; font-size:18px; font-weight:800; line-height:1.3; color:#fff; }
.historia-texto p{ margin:0; color:var(--mist); font-size:14.5px; line-height:1.65; }
.historia-selo{
  padding:3px 9px; border-radius:999px; background:var(--yellow); color:var(--ink);
  font-family:var(--font-body); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}

/* destaque do marco ativo (so quando o js estiver rodando) */
.historia.js-ativa .historia-card{ opacity:.5; }
.historia.js-ativa .historia-item.is-ativo .historia-card,
.historia.js-ativa .historia-item.is-passado .historia-card{ opacity:1; }
.historia.js-ativa .historia-item.is-passado .historia-card{ opacity:.78; }
.historia.js-ativa .historia-item.is-ativo .historia-card{
  border-color:var(--yellow); transform:translateX(6px); box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.historia-item.is-ativo .historia-icone{ background:var(--yellow); color:var(--ink); }
.historia-item.is-passado::before,
.historia-item.is-ativo::before{ background:var(--yellow); border-color:var(--yellow); }
.historia-item.is-ativo::before{ transform:scale(1.25); }

/* ---------- navegacao lateral entre as secoes (desktop largo) ---------- */
.secoes-nav{
  position:fixed; right:22px; top:50%; z-index:30; transform:translateY(-50%);
  display:none; flex-direction:column; gap:14px;
}
.secoes-nav a{ position:relative; display:flex; align-items:center; justify-content:flex-end; height:14px; }
.secoes-nav .ponto{
  width:10px; height:10px; border-radius:50%; background:rgba(124,126,130,.45);
  border:2px solid transparent; box-shadow:0 0 0 2px rgba(255,255,255,.7);
  transition:background .2s ease, transform .2s ease;
}
.secoes-nav .rotulo{
  position:absolute; right:22px; padding:5px 10px; border-radius:3px; white-space:nowrap;
  background:var(--ink); color:#fff; font-size:12px; font-weight:700;
  opacity:0; transform:translateX(6px); pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.secoes-nav a:hover .rotulo,
.secoes-nav a:focus-visible .rotulo{ opacity:1; transform:none; }
.secoes-nav a:hover .ponto{ transform:scale(1.25); }
.secoes-nav a.is-ativo .ponto{ background:var(--yellow); transform:scale(1.3); box-shadow:0 0 0 2px var(--ink); }
.secoes-nav a:focus-visible{ outline:2px solid var(--yellow); outline-offset:4px; border-radius:50%; }
@media (min-width:1200px){ .secoes-nav{ display:flex; } }

/* ---------- tablet e celular ---------- */
@media (max-width:1024px){
  .historia-grid{ gap:40px; }
  .grid-2-about{ gap:40px; }
}
@media (max-width:860px){
  .grid-2-about{ grid-template-columns:1fr; gap:44px; }
  .sobre-secao{ scroll-margin-top:84px; }

  .historia-grid{ grid-template-columns:1fr; gap:0; }
  /* o painel "se desmonta": o titulo fica no topo e so a faixa do ano acompanha a rolagem */
  .historia-painel{ display:contents; }
  .historia-cabecalho{ margin-bottom:22px; }
  .historia-status{
    position:sticky; top:78px; z-index:5; margin:0 -4vw 18px; padding:12px 4vw 14px;
    background:rgba(32,31,28,.94); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(255,255,255,.08);
    display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"ano titulo" "medidor medidor";
    column-gap:14px; align-items:center;
  }
  .historia-ano{ grid-area:ano; font-size:40px; letter-spacing:-.03em; }
  .historia-ano-titulo{ grid-area:titulo; min-height:0; margin:0; font-size:14px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .historia-medidor{ grid-area:medidor; margin-top:10px; max-width:none; }
  .historia-anos{
    flex-wrap:nowrap; overflow-x:auto; max-width:none; margin:0 -4vw 22px; padding:2px 4vw 6px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .historia-anos::-webkit-scrollbar{ display:none; }
  .historia-anos button{ flex:0 0 auto; }
  .historia-dica{ display:none; }
  .historia-lista{ padding-left:28px; }
  .historia-lista::before, .historia-linha{ left:7px; }
  .historia-item::before{ left:-26px; }
  .historia-card{ padding:18px; gap:14px; }
  .historia-icone{ width:38px; height:38px; }
  .historia-texto h3{ font-size:16.5px; }
  .historia.js-ativa .historia-item.is-ativo .historia-card{ transform:none; }
}

/* ---------- menos movimento ---------- */
@media (prefers-reduced-motion: reduce){
  .rolar-mouse::after{ animation:none; }
  .historia-ano.is-trocando{ animation:none; }
  .historia-card, .historia-item::before, .historia-icone{ transition:none; }
  .historia.js-ativa .historia-item.is-ativo .historia-card{ transform:none; }
}