/* ═══════════════════════════════════════════════════════════════════════
   VITAL.CSS — direcao de arte "TRAÇADO VITAL" (projeto paralelo, 24/07)
   ═══════════════════════════════════════════════════════════════════════
   Conceito: o traçado de ECG e o esqueleto do site, nao enfeite. Ele
   atravessa o hero, separa cada secao e pulsa devagar. Fundo quase preto,
   vermelho da marca como SINAL luminoso, azul marinho como estrutura.

   Carrega POR ULTIMO (depois de style/organic/teste/internas) e reveste
   o site inteiro em modo escuro, sem reescrever o HTML de cada pagina.

   Cores: vermelho #E30016 e azul #102A83 (vetor da logo) + carvao #07080C.
   Tipografia: mantem a identidade unica (Satoshi 300 uppercase).
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --v-bg:#07080C;        /* carvao base */
  --v-bg2:#0C0E14;       /* superficie elevada */
  --v-bg3:#11141C;       /* superficie de card */
  --v-line:rgba(255,255,255,.10);
  --v-line2:rgba(255,255,255,.16);
  --v-txt:#F2F3F5;
  --v-mut:rgba(242,243,245,.60);
  --v-red:#E30016;
  --v-navy:#2743A5;      /* navy clareado: o #102A83 puro nao aparece no escuro */
}

/* ── Base escura ───────────────────────────────────────────────────── */
html, body{ background:var(--v-bg) !important; color:var(--v-txt) !important; }
body{ -webkit-font-smoothing:antialiased; }
::selection{ background:var(--v-red); color:#fff; }

/* seções que eram claras */
.svc-list-sec, .inst3, .clients, .section, .ds-sec, .conform{
  background:var(--v-bg) !important; border-color:var(--v-line) !important;
}
.inst3{ border-top:1px solid var(--v-line) !important; }

/* ── Sinal vital: o traçado de ECG como divisor de seção ───────────
   Desenhado em CSS puro (mask com SVG inline), sem arquivo externo. */
.vital-ecg{
  position:relative; height:56px; margin:0; overflow:hidden;
  background:var(--v-bg);
  border-top:1px solid var(--v-line);
}
.vital-ecg::before{
  content:""; position:absolute; inset:0;
  background:var(--v-red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath d='M0,28 L300,28 L318,28 L330,8 L344,48 L358,28 L392,28 L406,22 L420,34 L434,28 L740,28 L758,28 L770,6 L784,50 L798,28 L830,28 L844,22 L858,34 L872,28 L1200,28' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath d='M0,28 L300,28 L318,28 L330,8 L344,48 L358,28 L392,28 L406,22 L420,34 L434,28 L740,28 L758,28 L770,6 L784,50 L798,28 L830,28 L844,22 L858,34 L872,28 L1200,28' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  opacity:.55;
  filter:drop-shadow(0 0 6px rgba(227,0,22,.6));
}
/* o pulso que percorre o traçado — posicao movida por vital.js (nao por
   animation CSS, que o "movimento reduzido" do sistema congela). */
.vital-sweep{
  position:absolute; top:0; bottom:0; width:18%; left:-20%; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(227,0,22,.6), transparent);
}

/* ── Cabeçalho ─────────────────────────────────────────────────────── */
.site-header{ background:rgba(7,8,12,.88) !important; border-bottom:1px solid var(--v-line) !important; }
.site-header.scrolled{ background:rgba(5,6,10,.97) !important; }
.site-header .site-nav a{ color:rgba(242,243,245,.78) !important; }
.site-header .site-nav a:hover{ color:#fff !important; }

/* ═══ HERO DA PROPOSTA (traçado protagonista) ══════════════════════════
   Aqui a ideia 1 acontece de verdade: o ECG e o elemento central sob o
   titulo, e a ficha de numeros fecha o bloco. Nao e o hero antigo pintado
   de escuro — e o hero da proposta, com o conteudo real da empresa. */
.vital-hero{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; background:var(--v-bg); padding:80px 0 60px; }
.vital-hero .vh-media{ position:absolute; inset:0; z-index:0; }
.vital-hero .bgvid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(.3) saturate(.28) contrast(1.05); }
.vital-hero .vh-grade{ position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,8,12,.72) 0%, rgba(7,8,12,.5) 45%, rgba(7,8,12,.94) 100%),
    radial-gradient(90% 70% at 78% 42%, rgba(227,0,22,.20) 0%, transparent 62%); }
.vital-hero > .container{ position:relative; z-index:2; }

.vh-eye{ display:inline-flex; align-items:center; gap:11px; color:var(--v-red);
  font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; }
.vh-eye i{ width:7px; height:7px; border-radius:50%; background:var(--v-red); flex:none;
  box-shadow:0 0 10px var(--v-red); animation:vitalBip 1.5s ease-in-out infinite; }
@keyframes vitalBip{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.78)} }
@media (prefers-reduced-motion: reduce){ .vh-eye i{ animation:none; } }

.vh-title{ font-family:'Satoshi',sans-serif; font-weight:300 !important; text-transform:uppercase;
  color:var(--v-txt); font-size:clamp(2.5rem,7.4vw,5.8rem); line-height:.94; letter-spacing:.008em; margin:20px 0 0; }
.vh-title em{ font-style:normal; color:var(--v-red); }
.vh-lead{ font-family:'Inter',sans-serif; font-weight:300; color:rgba(242,243,245,.82);
  font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.62; max-width:52ch; margin-top:22px; }

/* o traçado, elemento central do hero */
.vh-trace{ height:120px; margin:26px 0 6px; }
.vh-trace svg{ width:100%; height:100%; display:block; }
.vh-trace path{ fill:none; stroke:var(--v-red); stroke-width:2.4;
  filter:drop-shadow(0 0 10px rgba(227,0,22,.85));
  stroke-dasharray:1500; stroke-dashoffset:1500; animation:vitalTrace 7s linear infinite; }

.vh-cta{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:10px; }
.vh-alt{ color:rgba(242,243,245,.8); text-decoration:none; font-size:13px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,.28); padding-bottom:3px; }
.vh-alt:hover{ color:#fff; border-color:var(--v-red); }

/* ficha de números: fios finos, sem card */
.vh-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  background:var(--v-line); border:1px solid var(--v-line); margin-top:44px; }
.vh-stats > div{ background:var(--v-bg); padding:20px 18px; }
.vh-stats b{ display:block; font-family:'Satoshi',sans-serif; font-weight:300; font-size:clamp(28px,3.4vw,38px); line-height:1; color:var(--v-txt); }
.vh-stats span{ display:block; margin-top:9px; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--v-mut); }

@media(max-width:820px){
  .vital-hero{ min-height:auto; padding:56px 0 44px; align-items:flex-start; }
  .vital-hero .bgvid{ filter:brightness(.34) saturate(.3); }
  .vh-title{ font-size:clamp(2.2rem,10vw,3.2rem); }
  .vh-lead{ font-size:15px; max-width:none; }
  .vh-trace{ height:78px; margin:20px 0 4px; }
  .vh-cta{ flex-direction:column; align-items:stretch; gap:14px; }
  .vh-cta .btn-red{ width:100%; justify-content:center; font-size:16px; padding:16px 20px; }
  .vh-alt{ text-align:center; }
  .vh-stats{ grid-template-columns:1fr 1fr; margin-top:32px; }
}

/* ── Hero: o traçado atravessa ─────────────────────────────────────── */
.hero-cinema, .hero-cine{ background:var(--v-bg) !important; }
.hero-cinema .bgvid{ filter:brightness(.4) saturate(.35) sepia(.1) !important; }
.hero-cinema .hc-grade{
  background:
    linear-gradient(90deg, rgba(7,8,12,.95) 0%, rgba(7,8,12,.72) 42%, rgba(7,8,12,.3) 68%, rgba(227,0,22,.22) 100%),
    radial-gradient(120% 92% at 88% 44%, rgba(227,0,22,.22) 0%, transparent 58%) !important;
}
/* traçado dentro do hero, sob o texto */
.hero-cinema .vital-line{
  position:absolute; left:0; right:0; bottom:16%; height:130px; z-index:3; pointer-events:none; opacity:.85;
}
.hero-cinema .vital-line svg{ width:100%; height:100%; display:block; }
.hero-cinema .vital-line path{
  fill:none; stroke:var(--v-red); stroke-width:2.4;
  filter:drop-shadow(0 0 9px rgba(227,0,22,.8));
  stroke-dasharray:1500; stroke-dashoffset:1500;
  animation:vitalTrace 7s linear infinite;
}
@keyframes vitalTrace{ to{ stroke-dashoffset:-1500; } }
@media (prefers-reduced-motion: reduce){
  .hero-cinema .vital-line path{ animation:none; stroke-dashoffset:0; }
}
.hero-cinema .cine-eye{ color:var(--v-red) !important; }
.hero-cinema .cine-title{ color:var(--v-txt) !important; }
.hero-cinema .cine-lead{ color:var(--v-mut) !important; }

/* ── Títulos e texto ───────────────────────────────────────────────── */
h1,h2,h3,h4{ color:var(--v-txt) !important; }
.svc-head h2, .ds-h, .bloco > h2, .page-hero h1{ color:var(--v-txt) !important; }
.svc-head p, .ds-sub, .bloco .intro, .lead, .prose p, .prose li, .intro{ color:var(--v-mut) !important; }
.prose strong{ color:var(--v-txt); }

/* ── Serviços: índice tipográfico no escuro ────────────────────────── */
.svc-list{ border-top:1px solid var(--v-line2) !important; }
.svc-row{ border-bottom:1px solid var(--v-line) !important; background:transparent !important; }
.svc-row-name{ color:var(--v-txt) !important; }
.svc-row:hover .svc-row-name{ color:#FF3B4A !important; }   /* vermelho clareado: legivel no escuro */
/* Descricao: cor OPACA e opacity mais alta. No escuro, a cor translucida
   multiplicava com o opacity .6 do tema claro (alpha real .36) e o contraste
   caia para 3.0. Cor cheia + .82 devolve a legibilidade sem perder o efeito. */
.svc-desc{ color:#C9CBD2 !important; opacity:.82 !important; }
.svc-row:hover .svc-desc{ opacity:1 !important; }
.svc-ic{ box-shadow:0 0 0 1px rgba(255,255,255,.08); }
.svc-row:hover .svc-ic{ box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 10px 26px -10px rgba(227,0,22,.7) !important; }

/* ── Cards institucionais ──────────────────────────────────────────── */
.inst-card{ background:var(--v-bg3) !important; border:1px solid var(--v-line) !important; }
.inst-card:hover{ border-color:var(--v-line2) !important; box-shadow:0 20px 46px -22px rgba(0,0,0,.8) !important; }
.inst-card h3{ color:var(--v-txt) !important; }
.inst-card p{ color:var(--v-mut) !important; }
.inst-card .more{ color:#FF3B4A !important; }

/* ── Clientes: logos no escuro ─────────────────────────────────────── */
.clients .head p{ color:var(--v-mut) !important; }
/* as logos sao coloridas com fundo transparente: uma placa branca garante leitura */
.clients .logo-cell, .logo-item{
  background:#fff; border-radius:9px; padding:12px 14px;
}
.clients .logo-cell img, .logo-item img{ filter:none !important; opacity:1 !important; }

/* ── Páginas internas ──────────────────────────────────────────────── */
.page-hero{
  background:linear-gradient(103deg, #07080C 0%, #0C1024 46%, #12060B 100%) !important;
  border-bottom:1px solid var(--v-line) !important;
}
.page-hero::before{ background:radial-gradient(120% 100% at 88% 40%, rgba(227,0,22,.26), transparent 58%) !important; }
.page-hero .breadcrumb, .page-hero .breadcrumb a{ color:var(--v-mut) !important; }
.page-hero .lead{ color:var(--v-mut) !important; }
.ficha{ border-top:1px solid var(--v-red) !important; border-bottom:1px solid var(--v-line) !important; color:var(--v-txt) !important; }
.corrida{ color:var(--v-txt) !important; border-left:2px solid var(--v-red) !important; }
.def dt{ color:var(--v-txt) !important; border-top:1px solid var(--v-line) !important; }
.def dd{ color:var(--v-mut) !important; border-top-color:var(--v-line) !important; }
.grupo .rot{ color:var(--v-mut) !important; border-bottom:1px solid var(--v-line) !important; }
.fecho{ color:var(--v-txt) !important; border-top:1px solid var(--v-red) !important; }
.prose a:not(.btn){ color:#FF3B4A !important; }
.check-list li, .check-list span{ color:var(--v-mut) !important; }
.check-list svg{ color:var(--v-red) !important; }
.aside-card{ background:var(--v-bg3) !important; border:1px solid var(--v-line) !important; box-shadow:none !important; }
.aside-card h3{ color:var(--v-mut) !important; }
.aside-card .tel{ color:var(--v-txt) !important; }
.aside-card small{ color:var(--v-mut) !important; }
.faq details{ background:var(--v-bg3) !important; border:1px solid var(--v-line) !important; box-shadow:none !important; }
.faq summary{ color:var(--v-txt) !important; }
.faq-body{ color:var(--v-mut) !important; }
.frota-galeria img{ border:1px solid var(--v-line); }

/* ── Formulário (contato) ──────────────────────────────────────────── */
.field label{ color:var(--v-mut) !important; }
.field input, .field select, .field textarea{
  background:var(--v-bg3) !important; border:1px solid var(--v-line2) !important; color:var(--v-txt) !important;
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(242,243,245,.35); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--v-red) !important; outline:none; box-shadow:0 0 0 3px rgba(227,0,22,.22) !important; }
.hint{ color:var(--v-mut) !important; }
.form-success{ background:var(--v-bg3) !important; color:var(--v-txt) !important; border:1px solid var(--v-red) !important; }

/* ── Botões ────────────────────────────────────────────────────────── */
.btn-ghost{ border-color:var(--v-line2) !important; color:var(--v-txt) !important; background:transparent !important; }
.btn-ghost:hover{ background:#fff !important; color:var(--v-bg) !important; border-color:#fff !important; }

/* ── Rodapé ────────────────────────────────────────────────────────── */
.site-footer{ background:#04050A !important; border-top:1px solid var(--v-line) !important; }
.site-footer::before{ background:var(--v-red) !important; }
.site-footer h3{ color:var(--v-txt) !important; }
.site-footer p, .site-footer li, .site-footer a{ color:var(--v-mut) !important; }
.site-footer a:hover{ color:#fff !important; }
.f-bottom{ color:rgba(242,243,245,.34) !important; border-top:1px solid var(--v-line) !important; }

/* ── Cookie / flutuantes ───────────────────────────────────────────── */
.cookie{ background:var(--v-bg3) !important; border:1px solid var(--v-line2) !important; color:var(--v-txt) !important; }
.cookie p{ color:var(--v-mut) !important; }

/* ── Mobile ────────────────────────────────────────────────────────── */
@media(max-width:960px){
  .site-nav{ background:rgba(9,10,16,.98) !important; border-bottom:1px solid var(--v-line) !important; }
  .site-nav a{ color:var(--v-txt) !important; }
  .site-nav li{ border-bottom:1px solid var(--v-line) !important; }
}
@media(max-width:820px){
  .vital-ecg{ height:40px; }
  .hero-cinema .vital-line{ height:90px; bottom:20%; opacity:.7; }
}