/* ============================================================
   VEKTRA - PÁGINA "A VEKTRA" (a-vektra.html)

   Reaproveita .page-hero, .chip, .sec-head e .spec da página de
   serviços. Só existe aqui o que é exclusivo desta página:
   a linha do tempo da história, os números, o bloco da citação,
   os pilares e as funções de quem atende.
   ============================================================ */

/* ============================================================
   HISTÓRIA
   ============================================================ */
.historia{ display:grid; gap:34px; align-items:start }

.historia-texto p{
  margin:0 0 18px;
  font-size:16px;font-weight:300;line-height:1.72;color:var(--text-2);
  max-width:58ch;
}
.historia-texto p:last-child{ margin-bottom:0 }
/* a frase de virada da história fica em destaque */
.historia-texto p.virada{
  color:var(--text);font-weight:500;font-size:17.5px;line-height:1.55;
  padding-left:18px;border-left:3px solid var(--clay);
}

/* ---------- Linha do tempo em marcos ---------- */
.marcos{
  margin:0;padding:0;list-style:none;
  display:grid;gap:0;
  border-top:1px solid var(--line-soft);
}
.marco{
  display:grid;grid-template-columns:96px 1fr;gap:16px;
  padding:18px 0;
  border-bottom:1px solid var(--line-soft);
}
.marco b{
  font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--clay);
  font-variant-numeric:tabular-nums;
}
.marco span{
  font-size:14.5px;font-weight:300;line-height:1.6;color:var(--text-2);
}
.marco em{ font-style:normal;color:var(--text);font-weight:500 }

/* ---------- Números ---------- */
.numeros{
  display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;
}
.numero{
  background:var(--card);
  padding:22px 18px;
}
.numero b{
  display:block;
  font-size:clamp(22px,6vw,29px);font-weight:800;line-height:1.05;
  letter-spacing:-.04em;color:var(--clay);
  white-space:nowrap;      /* "R$ 4,2 mi" não pode virar três linhas */
}
.numero small{
  display:block;margin-top:9px;
  font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  line-height:1.5;color:var(--text-2);
}

/* ============================================================
   CITAÇÃO
   Fica sobre a faixa teal (.spec), que já traz a textura
   diagonal e o contraste da marca.
   ============================================================ */
.citacao{ max-width:22ch }
.citacao blockquote{
  margin:0;
  font-size:clamp(24px,5.6vw,40px);font-weight:700;
  line-height:1.24;letter-spacing:-.035em;text-wrap:balance;
  color:var(--const-white);
  max-width:20ch;
}
/* aspas grandes como elemento gráfico, não como texto lido */
.citacao::before{
  content:"\201C";
  display:block;
  font-size:76px;line-height:.7;font-weight:800;
  color:var(--clay);
  margin-bottom:10px;
}
.citacao figcaption{
  margin-top:24px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.2);
  font-size:14px;font-weight:300;line-height:1.6;
  color:rgba(255,255,255,.8);
}
.citacao figcaption b{ display:block;font-weight:600;color:var(--const-white);font-size:15px }
.citacao figcaption span{ font-size:12.5px;color:rgba(255,255,255,.6) }

.citacao-nota{
  margin:26px 0 0;max-width:44ch;
  font-size:14.5px;font-weight:300;line-height:1.7;
  color:rgba(255,255,255,.82);
}
.citacao-nota b{ color:var(--const-white);font-weight:600 }

/* ============================================================
   PILARES (missão, visão, propósito)
   ============================================================ */
.pilares{ display:grid; gap:18px }
.pilar{
  background:var(--card);
  border:1px solid var(--line-soft);border-radius:16px;
  box-shadow:var(--card-shadow);
  padding:26px 22px 28px;
  position:relative;overflow:hidden;
  transition:transform .45s var(--ease), border-color .4s ease;
}
.pilar:hover{ transform:translateY(-4px); border-color:var(--line) }
.pilar-ic{
  width:44px;height:44px;border-radius:13px;margin-bottom:18px;
  display:grid;place-content:center;
  background:var(--recess);border:1px solid var(--line-teal);color:var(--clay);
}
.pilar h3{
  margin:0 0 10px;
  font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--text-2);
}
.pilar p{
  margin:0;
  font-size:15.5px;font-weight:300;line-height:1.68;color:var(--text);
}

/* ---------- Valores ---------- */
.valores{
  margin-top:34px;padding:26px 22px 28px;
  border:1px dashed var(--line);border-radius:16px;
}
.valores h3{
  margin:0 0 18px;
  font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--text-2);
}
.valores ul{
  margin:0;padding:0;list-style:none;
  display:grid;gap:12px;
}
.valores li{
  display:flex;gap:12px;align-items:flex-start;
  font-size:15px;font-weight:300;line-height:1.6;color:var(--text-2);
}
.valores li::before{
  content:"";width:15px;height:15px;flex:none;margin-top:3px;
  background:var(--clay);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.valores li b{ color:var(--text);font-weight:600 }

/* ============================================================
   QUEM ATENDE
   São funções, não pessoas: o time real entra aqui quando
   houver nome, foto e CRC de verdade para publicar.
   ============================================================ */
.funcoes{ display:grid; gap:16px }
.funcao{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--card);
  border:1px solid var(--line-soft);border-radius:14px;
  padding:20px 18px;
}
.funcao-ic{
  width:42px;height:42px;flex:none;border-radius:12px;
  display:grid;place-content:center;
  background:var(--teal-fill);border:1px solid var(--line-teal);
  color:var(--const-white);
}
.funcao h3{
  margin:0 0 6px;
  font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.3;
}
.funcao p{
  margin:0;
  font-size:14px;font-weight:300;line-height:1.62;color:var(--text-2);
}

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (min-width:600px){
  .valores ul{ grid-template-columns:1fr 1fr; gap:12px 26px }
  .funcoes{ grid-template-columns:1fr 1fr }
}
@media (min-width:900px){
  .historia{ grid-template-columns:1.1fr .9fr; gap:52px }
  .pilares{ grid-template-columns:repeat(3,1fr); gap:20px }
  .pilar{ padding:30px 26px 32px }
  .citacao-grid{ display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center }
  .valores ul{ grid-template-columns:repeat(2,1fr) }
}