/* ============================================================
   VEKTRA - PÁGINA DE SERVIÇOS (servicos.html)
   Hero, grade de vídeos, modal, simulador e CTA do especialista.
   ============================================================ */

/* ============================================================
   HERO DA PÁGINA
   ============================================================ */
.page-hero{ padding:calc(var(--nav-h) + 52px) 0 46px; overflow:hidden }
.page-hero h1{
  margin:22px 0 0;max-width:16ch;
  font-size:clamp(32px,8vw,60px);font-weight:800;
  line-height:1.06;letter-spacing:-.04em;text-wrap:balance;
}
.page-hero p{
  margin:22px 0 0;max-width:56ch;
  font-size:17px;font-weight:300;line-height:1.66;color:var(--text-2);
}

.hero-chips{ display:flex;flex-wrap:wrap;gap:9px;margin-top:28px }
.chip{
  padding:8px 14px;
  font-size:11.5px;font-weight:500;letter-spacing:.03em;
  color:var(--text-2);background:var(--card);
  border:1px solid var(--line-soft);border-radius:99px;
  transition:border-color .3s ease, color .3s ease, transform .3s var(--ease);
}
.chip:hover{ border-color:var(--clay);color:var(--text);transform:translateY(-2px) }

/* ============================================================
   CARDS DE VÍDEO
   ============================================================ */
.videos{ display:grid;gap:20px }

.vcard{
  background:var(--card);
  border:1px solid var(--line-soft);border-radius:16px;box-shadow:var(--card-shadow);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .45s var(--ease), border-color .4s ease, box-shadow .45s ease;
}
.vcard:hover{ transform:translateY(-6px);border-color:var(--line);box-shadow:var(--shadow) }

/* --- Capa provisória (sem imagem: tudo em CSS) --- */
.cover{ position:relative;aspect-ratio:16/9;background:var(--teal);overflow:hidden;isolation:isolate }
.cover::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(150deg,rgba(8,56,60,0) 30%,rgba(11,14,16,.85) 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 34px);
}
.cover-art{
  position:absolute;right:-14px;bottom:-18px;z-index:0;
  color:rgba(255,255,255,.13);
  transition:transform .6s var(--ease), color .5s ease;
}
.vcard:hover .cover-art{ transform:scale(1.08) rotate(-4deg);color:rgba(193,102,57,.4) }

.cover-tag{
  position:absolute;z-index:3;left:14px;top:14px;padding:6px 11px;
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:var(--clay);color:var(--const-ink);border-radius:6px;
}
.cover-soon{
  position:absolute;z-index:3;right:14px;top:14px;padding:6px 11px;
  font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(11,14,16,.65);color:var(--const-white);
  border:1px solid rgba(255,255,255,.2);border-radius:6px;
  backdrop-filter:blur(4px);
}

.play{
  position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;
  background:var(--const-white);color:var(--const-ink);
  display:grid;place-content:center;
  transition:transform .35s var(--ease), background .3s ease, color .3s ease;
}
.play::before{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
  animation:ring 2.6s var(--ease) infinite;
}
@keyframes ring{
  0%  { transform:scale(1);   opacity:.7 }
  70% { transform:scale(1.55);opacity:0 }
  100%{ transform:scale(1.55);opacity:0 }
}
.play:hover{ transform:translate(-50%,-50%) scale(1.1);background:var(--clay);color:var(--const-ink) }
.play svg{ margin-left:3px }   /* centra opticamente o triângulo */

.vbody{ padding:22px 20px 24px;display:flex;flex-direction:column;gap:14px;flex:1 }
.vbody h3{ font-size:18.5px;font-weight:700;line-height:1.3;letter-spacing:-.028em;text-wrap:balance }
.vbody p{ margin:0;flex:1;font-size:14.5px;font-weight:300;line-height:1.66;color:var(--text-2) }
.vbody .btn{ margin-top:4px }

/* ============================================================
   MODAL DE VÍDEO
   ============================================================ */
.modal{
  position:fixed;inset:0;z-index:400;
  display:grid;place-items:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.modal.open{ opacity:1;pointer-events:auto }
.modal-bd{
  position:absolute;inset:0;background:rgba(11,14,16,.82);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.modal-box{
  position:relative;width:100%;max-width:760px;max-height:90vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 50px 100px -50px rgba(0,0,0,.9);
  transform:translateY(18px) scale(.98);
  transition:transform .4s var(--ease);
}
.modal.open .modal-box{ transform:none }

.modal-close{
  position:absolute;right:12px;top:12px;z-index:5;
  width:38px;height:38px;border-radius:10px;
  background:var(--recess);border:1px solid var(--line);color:var(--text);
  cursor:pointer;display:grid;place-content:center;
  transition:background .25s ease, color .25s ease, transform .3s var(--ease);
}
.modal-close:hover{ background:var(--clay);color:var(--const-ink);transform:rotate(90deg) }

.modal-stage{
  aspect-ratio:16/9;background:var(--teal);
  position:relative;overflow:hidden;border-radius:17px 17px 0 0;
}
.modal-stage iframe,
.modal-stage video{ position:absolute;inset:0;width:100%;height:100%;border:0 }

/* estado "gravação em produção", enquanto não há data-src */
.soon-panel{
  position:absolute;inset:0;padding:24px;
  display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;
  color:var(--const-white);
  background:
    linear-gradient(150deg,rgba(8,56,60,.2),rgba(11,14,16,.9)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 34px);
}
.soon-panel .rec{
  width:56px;height:56px;border-radius:50%;
  border:2px dashed rgba(255,255,255,.4);
  display:grid;place-content:center;
  animation:spin 14s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.soon-panel b{ font-size:16px;font-weight:600 }
.soon-panel span{
  max-width:42ch;font-size:13.5px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.72);
}

.modal-body{ padding:26px 24px 28px }
.modal-body .cover-tag{ position:static;display:inline-block;margin-bottom:14px }
.modal-body h3{ font-size:23px;font-weight:700;line-height:1.22;letter-spacing:-.03em }
.modal-body p{ margin:14px 0 0;font-size:15px;font-weight:300;line-height:1.7;color:var(--text-2) }
.modal-actions{ margin-top:22px;display:flex;flex-wrap:wrap;gap:12px }

/* ============================================================
   SIMULADOR DE CARGA TRIBUTÁRIA
   ============================================================ */
.sim{ display:grid;gap:20px }

.sim-panel,
.sim-out{
  background:var(--card-sunken);
  border:1px solid var(--line-soft);border-radius:16px;box-shadow:var(--card-shadow);
  padding:28px 22px;
}

.sim-field{ margin-bottom:26px }
.sim-field:last-child{ margin-bottom:0 }
.sim-field label{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px;
  font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--text-2);
}
.sim-field label b{
  font-size:17px;font-weight:700;letter-spacing:-.02em;text-transform:none;color:var(--clay);
}

/* O preenchimento laranja da trilha é aplicado pelo JS
   (linear-gradient até a posição atual). */
input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:6px;border-radius:99px;
  background:var(--line);outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;
  background:var(--clay);border:3px solid var(--card-sunken);cursor:pointer;
  box-shadow:0 3px 12px -3px rgba(193,102,57,.9);
  transition:transform .2s var(--ease);
}
input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.14) }
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:var(--clay);border:3px solid var(--card-sunken);cursor:pointer;
}
input[type=range]:focus-visible{ box-shadow:0 0 0 3px rgba(193,102,57,.25) }

.sim-scale{ display:flex;justify-content:space-between;margin-top:10px;font-size:10.5px;color:var(--text-2) }

.sim-select{
  width:100%;padding:14px;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:9px;
  font-size:15px;color:var(--text);
  appearance:none;-webkit-appearance:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.sim-select:focus{ outline:none;border-color:var(--clay);box-shadow:0 0 0 3px rgba(193,102,57,.18) }

/* --- Resultado --- */
.sim-row{ padding:16px 0;border-bottom:1px solid var(--line-soft) }
.sim-row:first-of-type{ padding-top:0 }
.sim-row .top{ display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px }
.sim-row .nm{ font-size:14px;font-weight:600 }
.sim-row .nm em{
  display:block;margin-top:3px;
  font-style:normal;font-size:11px;font-weight:400;color:var(--text-2);
}
.sim-row .vl{ font-size:16px;font-weight:700;letter-spacing:-.02em;white-space:nowrap }
.sim-row .vl small{
  display:block;margin-top:2px;text-align:right;
  font-size:10.5px;font-weight:400;color:var(--text-2);
}
.sim-bar{ height:9px;border-radius:99px;background:var(--line-soft);overflow:hidden }
.sim-bar i{
  display:block;height:100%;width:0;border-radius:99px;background:var(--teal);
  transition:width .7s var(--ease);
}
.sim-row.best .vl{ color:var(--clay) }
.sim-row.best .sim-bar i{ background:var(--clay) }
.sim-row.off{ opacity:.42 }
.sim-row.off .sim-bar i{ background:var(--text-2) }

.sim-total{
  margin-top:22px;padding:20px;border-radius:12px;
  background:var(--teal);color:var(--const-white);
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
}
.sim-total span{
  font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.sim-total b{
  display:block;margin-top:6px;
  font-size:clamp(24px,6vw,32px);font-weight:800;letter-spacing:-.04em;line-height:1.1;
}
.sim-total .side{
  text-align:right;max-width:20ch;
  font-size:12.5px;font-weight:300;color:rgba(255,255,255,.78);
}
.sim-out .btn{ margin-top:20px }
.sim-note{ margin:16px 0 0;font-size:11.5px;font-weight:300;line-height:1.65;color:var(--text-2) }

/* ============================================================
   CTA DO ESPECIALISTA
   ============================================================ */
.spec{
  background:var(--teal);color:var(--const-white);
  position:relative;overflow:hidden;padding:72px 0;
}
.spec::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 18px);
}
.spec .wrap{ position:relative;z-index:1 }
.spec-grid{ display:grid;gap:34px;align-items:center }
.spec .eyebrow{ color:rgba(255,255,255,.7) }
.spec h2{
  margin:20px 0 0;max-width:16ch;
  font-size:clamp(28px,7vw,50px);font-weight:800;line-height:1.1;letter-spacing:-.04em;
  text-wrap:balance;
}
.spec > .wrap p.lead{
  margin:20px 0 0;max-width:48ch;
  font-size:16.5px;font-weight:300;line-height:1.68;color:rgba(255,255,255,.82);
}
.spec .btn{ margin-top:28px; --btn-fill:#FFFFFF; --btn-fill-tx:#0B0E10 }

.spec-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);border-radius:18px;
  padding:26px 24px;
}
.spec-who{
  display:flex;align-items:center;gap:14px;
  padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.16);
}
/* A faixa .spec é teal nos dois temas, então aqui só entra a arte
   clara - a versão teal do símbolo sumiria no fundo. */
.spec-face{
  width:52px;height:52px;border-radius:15px;flex:none;
  overflow:hidden;
}
.spec-face img{ display:block;width:100%;height:100%;object-fit:contain }
.spec-who b{ display:block;font-size:15.5px;font-weight:600 }
.spec-who small{ display:block;font-size:12.5px;color:rgba(255,255,255,.7) }

.spec-list{ margin:20px 0 0;padding:0;list-style:none;display:grid;gap:14px }
.spec-list li{
  display:flex;gap:12px;align-items:flex-start;
  font-size:14.5px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.86);
}
.spec-list li svg{ flex:none;margin-top:3px;color:var(--clay) }

.spec-foot{
  margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;align-items:center;gap:9px;
  font-size:12px;font-weight:300;color:rgba(255,255,255,.7);
}

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (min-width:600px){
  .videos{ grid-template-columns:repeat(2,1fr) }
}
@media (min-width:900px){
  .page-hero{ padding:calc(var(--nav-h) + 74px) 0 60px }
  .hero-texto h1{ max-width:14ch }
  .sec{ padding:96px 0 }
  .videos{ grid-template-columns:repeat(3,1fr);gap:22px }
  .sim{ grid-template-columns:.9fr 1.1fr;gap:24px;align-items:start }
  .sim-panel,.sim-out{ padding:34px 30px }
  .spec{ padding:104px 0 }
  .spec-grid{ grid-template-columns:1.05fr .95fr;gap:52px }
  .modal-body{ padding:30px 32px 34px }
}