/* =========================================================
   HBCERT — Certificados Digitais
   Direção de arte: "Selo de Segurança"

   Um certificado digital é um documento de identidade.
   A página empresta a linguagem gráfica dos documentos
   oficiais: o guilhoché (as linhas finas entrelaçadas de
   cédulas e diplomas), o chip do cartão, os campos do
   titular e o selo de validação.

   Paleta tirada da logo: o preto do avatar e os dois
   verdes do escudo (a metade clara e a metade escura).
   ========================================================= */

:root{
  /* --- o preto do avatar, puxado para o verde --- */
  --void:     #040705;
  --deep:     #07100A;
  --panel:    #0B150F;
  --panel-2:  #0F1D14;

  /* --- os verdes do escudo --- */
  --green:    #3CC862;
  --green-hi: #7BF09A;
  --green-lo: #15853A;
  --green-dk: #0C3A1C;
  --on-green: #03110A;

  /* --- o vermelho do aviso da tabela comercial, suavizado --- */
  --warn:     #FF8A6B;

  /* --- texto --- */
  --ink:      #ECF5EE;
  --mute:     #A6BBAC;
  --faint:    #7A9082;

  /* --- bordas e profundidade --- */
  --line:      rgba(123,240,154,.16);
  --line-soft: rgba(123,240,154,.08);
  --sh-card:   0 22px 50px rgba(0,0,0,.55), 0 1px 0 rgba(123,240,154,.10) inset;
  --sh-green:  0 14px 34px rgba(45,181,83,.30);

  /* --- tipografia --- */
  --sans: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* --- movimento: validação é precisa, nunca elástica --- */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }

body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
svg{ display:block; }
ol,ul{ list-style:none; }
:focus-visible{ outline:2px solid var(--green-hi); outline-offset:3px; border-radius:6px; }

/* =========================================================
   FUNDO — papel de segurança
   Brilho verde vindo de cima (o escudo) + trama diagonal
   finíssima, como o fundo de um documento impresso.
   ========================================================= */
.field{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(95% 48% at 50% -6%, rgba(60,200,98,.22) 0%, rgba(60,200,98,0) 62%),
    radial-gradient(70% 38% at 104% 58%, rgba(21,133,58,.12) 0%, rgba(21,133,58,0) 62%),
    radial-gradient(70% 38% at -4% 88%, rgba(21,133,58,.10) 0%, rgba(21,133,58,0) 62%),
    repeating-linear-gradient(135deg, rgba(123,240,154,.028) 0 1px, transparent 1px 7px);
}
.grain{
  position:fixed; inset:0; z-index:30; pointer-events:none;
  opacity:.22; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.page{
  position:relative; z-index:1;
  width:100%;
  max-width:540px;
  margin-inline:auto;
  padding-inline:20px;
  padding-top:env(safe-area-inset-top);
  padding-bottom:calc(108px + env(safe-area-inset-bottom));
}

/* =========================================================
   ENTRADA
   ========================================================= */
.js .reveal{
  opacity:0; transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.in{ opacity:1; transform:none; }

/* =========================================================
   BARRA DE STATUS
   ========================================================= */
.status{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 2px 12px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint);
}
.status-live{ display:flex; align-items:center; gap:9px; color:var(--green-hi); }
.status-live i{
  width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 0 rgba(60,200,98,.6);
  animation:beacon 2.4s var(--ease) infinite;
}
@keyframes beacon{
  0%{ box-shadow:0 0 0 0 rgba(60,200,98,.55); }
  70%,100%{ box-shadow:0 0 0 9px rgba(60,200,98,0); }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{ text-align:center; padding-top:4px; }

/* --- emblema: escudo dentro da roseta de guilhoché --- */
.emblem{
  position:relative;
  width:min(206px, 57vw); aspect-ratio:1;
  margin:8px auto 0;
  display:grid; place-items:center;
}
.rosette{
  position:absolute; inset:0; width:100%; height:100%;
  animation:spin 140s linear infinite;
  -webkit-mask-image:radial-gradient(circle, #000 58%, transparent 71%);
          mask-image:radial-gradient(circle, #000 58%, transparent 71%);
}
.rosette path{ fill:none; stroke:var(--green-hi); stroke-width:.5; stroke-opacity:.18; }
.rosette path.r2{ stroke-opacity:.24; }
.rosette path.r3{ stroke:var(--green); stroke-opacity:.32; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.emblem-glow{
  position:absolute; width:46%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(4,7,5,1) 38%, rgba(4,7,5,.85) 55%, rgba(4,7,5,0) 72%);
}
.shield{
  position:relative; width:42%; height:auto;
  filter:drop-shadow(0 10px 26px rgba(45,181,83,.45));
}
/* a varredura de validação atravessa o escudo; em seguida o check se desenha */
.shield .scan{ animation:scan 7s var(--ease) .45s infinite; }
@keyframes scan{
  0%{ transform:translateY(0); opacity:1; }
  18%{ transform:translateY(118px); opacity:1; }
  19%,100%{ transform:translateY(118px); opacity:0; }
}
.shield .tick{
  stroke-dasharray:58; stroke-dashoffset:58;
  animation:draw .55s var(--ease) 1.2s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* --- nome --- */
.brand{ display:flex; flex-direction:column; align-items:center; }
.brand-name{
  font-size:clamp(42px, 13.6vw, 60px);
  font-weight:800; font-stretch:125%;
  letter-spacing:-.02em; line-height:.95;
  background:linear-gradient(180deg, var(--green-hi) 0%, var(--green) 55%, #23A64A 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-sub{
  margin-top:9px; padding-left:.34em;
  font-size:11.5px; font-weight:500; letter-spacing:.34em; text-transform:uppercase;
  color:var(--mute);
}
.handle{
  display:inline-block; margin-top:12px;
  padding:5px 12px; border:1px solid var(--line); border-radius:999px;
  font-family:var(--mono); font-size:12px; color:var(--green-hi);
}

.lede{
  margin:22px auto 0; max-width:19ch;
  font-size:clamp(22px, 6.2vw, 27px); font-weight:650;
  line-height:1.2; letter-spacing:-.012em;
}
.lede em{ font-style:normal; color:var(--green-hi); white-space:nowrap; }
.sub{
  margin:10px auto 0; max-width:36ch;
  color:var(--mute); font-size:15px;
}

/* --- fatos --- */
.facts{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:20px;
  border:1px solid var(--line); border-radius:16px;
  background:rgba(11,21,15,.6);
}
.facts li{ padding:12px 6px 11px; display:flex; flex-direction:column; gap:3px; }
.facts li + li{ border-left:1px solid var(--line-soft); }
.facts b{ font-size:15.5px; font-weight:750; font-stretch:112%; color:var(--ink); }
.facts span{
  font-family:var(--mono); font-size:10px; line-height:1.35;
  letter-spacing:.06em; text-transform:uppercase; color:var(--faint);
}

/* =========================================================
   AÇÃO PRINCIPAL — agendar por unidade
   ========================================================= */
.book{
  position:relative;
  margin-top:16px; padding:16px 16px 16px;
  text-align:left;
  border-radius:22px;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(160deg, rgba(123,240,154,.55), rgba(123,240,154,.10) 40%, rgba(123,240,154,.05) 75%, rgba(123,240,154,.28)) border-box;
  border:1px solid transparent;
  box-shadow:var(--sh-card), 0 0 60px rgba(60,200,98,.08);
  scroll-margin-top:20px;
}
.book-head{ display:flex; align-items:center; gap:13px; margin-bottom:6px; padding:0 2px; }
.book-ico{
  flex:none; width:44px; height:44px; padding:10px;
  border-radius:12px; background:rgba(60,200,98,.12); color:var(--green-hi);
}
.book h2{ font-size:19px; font-weight:750; font-stretch:108%; line-height:1.2; }
.book-head p{ font-size:13.5px; color:var(--mute); margin-top:2px; }

/* botão de unidade — a placa do estado + o contato */
.unit{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:14px;
  min-height:70px; margin-top:10px; padding:12px 16px 12px 12px;
  border-radius:16px;
  background:linear-gradient(180deg, #56D877 0%, var(--green) 55%, #2FB555 100%);
  color:var(--on-green);
  box-shadow:var(--sh-green), 0 1px 0 rgba(255,255,255,.35) inset;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s;
}
.unit::after{   /* reflexo que passa pela placa */
  content:""; position:absolute; top:0; bottom:0; left:-40%; width:30%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform:skewX(-18deg);
  animation:sheen 6.5s var(--ease) 2.2s infinite;
}
.unit + .unit::after{ animation-delay:2.6s; }
@keyframes sheen{
  0%{ left:-40%; }
  16%,100%{ left:130%; }
}
.unit:active{ transform:scale(.98); }
@media (hover:hover){
  .unit:hover{ filter:brightness(1.06); box-shadow:0 18px 40px rgba(45,181,83,.42), 0 1px 0 rgba(255,255,255,.35) inset; }
  .unit:hover .unit-go{ transform:translateX(4px); }
}
.unit-uf{
  flex:none; width:46px; height:46px; display:grid; place-items:center;
  border-radius:12px; background:var(--on-green); color:var(--green-hi);
  font-family:var(--mono); font-weight:500; font-size:16px; letter-spacing:.04em;
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;
}
.unit-uf svg{ width:24px; height:24px; }
.unit-txt{ display:flex; flex-direction:column; min-width:0; }
.unit-txt strong{ font-size:17px; font-weight:750; font-stretch:106%; line-height:1.2; }
.unit-txt small{ display:flex; align-items:center; gap:6px; margin-top:3px; font-size:13px; font-weight:550; opacity:.8; }
.unit-txt small svg{ width:15px; height:15px; flex:none; }
.unit-go{ width:22px; height:22px; margin-left:auto; flex:none; transition:transform .2s var(--ease); }

/* =========================================================
   SEÇÕES — mobília comum
   ========================================================= */
.certs, .flow, .channels{ margin-top:80px; }

.kicker{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--green-hi);
}
.kicker span{
  padding:3px 7px; border:1px solid var(--line); border-radius:6px;
  color:var(--faint); letter-spacing:.08em;
}
.sec-title{
  margin-top:14px;
  font-size:clamp(27px, 7.8vw, 34px); font-weight:750; font-stretch:112%;
  line-height:1.08; letter-spacing:-.018em;
}
.sec-lede{ margin-top:10px; color:var(--mute); font-size:15.5px; max-width:36ch; }

/* =========================================================
   PRODUTOS — carrossel de cartões de identidade
   Os cinco itens da tabela comercial viram cartões físicos,
   arrastados na horizontal. O próximo cartão sempre aparece
   pela metade: é o que diz ao polegar que existe mais coisa.
   ========================================================= */
.rail-wrap{ margin-top:22px; }
.rail{
  display:flex; gap:14px;
  margin-inline:-20px; padding:4px 20px 6px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-left:20px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }
.rail > .card{
  flex:0 0 auto; width:min(268px, 76vw);
  scroll-snap-align:start;
  display:flex; flex-direction:column;
}

.rail-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:14px; padding-inline:2px;
}
.dots{ display:flex; gap:7px; }
.dots i{
  position:relative; overflow:hidden;
  width:7px; height:7px; border-radius:50%;
  background:var(--line);
  transition:background .3s var(--ease), width .3s var(--ease), border-radius .3s var(--ease);
  cursor:pointer;
}
.dots i.on{ width:22px; border-radius:4px; background:rgba(60,200,98,.3); }
.dots i.on::after{
  content:""; position:absolute; inset:0;
  background:var(--green); transform-origin:left;
}
/* enquanto a rotação está ligada, o ponto ativo também conta o tempo */
.dots.auto i.on::after{ animation:dotfill var(--auto-dur, 3600ms) linear forwards; }
@keyframes dotfill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.drag{
  display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint);
  transition:opacity .4s var(--ease);
}
.drag svg{ width:16px; height:16px; animation:nudge 2.4s var(--ease) infinite; }
.drag.off{ opacity:0; }
@keyframes nudge{ 0%,70%,100%{ transform:none; } 82%{ transform:translateX(4px); } }

.note{
  margin-top:18px; padding:14px 16px;
  border-left:2px solid rgba(255,138,107,.5);
  background:rgba(255,138,107,.06);
  border-radius:0 12px 12px 0;
  color:var(--mute); font-size:14px;
}
.note b{ color:var(--ink); font-weight:650; }

/* --- o cartão --- */
.card{
  position:relative; overflow:hidden; isolation:isolate;
  padding:18px 18px 16px;
  border-radius:22px;
  border:1px solid var(--line);
  background:linear-gradient(152deg, #13261B 0%, #0B1710 55%, #08110B 100%);
  box-shadow:var(--sh-card);
}
.card::before{  /* guilhoché de fundo, gerado no script.js */
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:var(--gui, none); background-size:360px 260px;
  -webkit-mask-image:linear-gradient(200deg, #000 10%, rgba(0,0,0,.35) 55%, transparent 85%);
          mask-image:linear-gradient(200deg, #000 10%, rgba(0,0,0,.35) 55%, transparent 85%);
}
.card::after{   /* faixa holográfica, como a dos documentos */
  content:""; position:absolute; z-index:-1;
  top:-20%; bottom:-20%; right:26px; width:40px;
  background:linear-gradient(180deg,
    rgba(123,240,154,0) 0%, rgba(123,240,154,.10) 20%, rgba(130,220,255,.08) 38%,
    rgba(255,255,255,.07) 50%, rgba(123,240,154,.10) 66%, rgba(123,240,154,0) 100%);
  background-size:100% 220%;
  transform:rotate(14deg);
  animation:holo 7s ease-in-out infinite alternate;
}
@keyframes holo{ from{ background-position:0 0; } to{ background-position:0 100%; } }

/* e-CNPJ é a família da empresa: mesmo cartão, verde mais fundo.
   O token não é certificado — vai quase preto, com o selo prateado. */
.card[data-kind="cnpj"]{
  background:linear-gradient(152deg, #134A27 0%, #0C2C17 50%, #07170C 100%);
  border-color:rgba(123,240,154,.24);
}
.card[data-kind="token"]{
  background:linear-gradient(152deg, #141A16 0%, #0A0E0B 55%, #060908 100%);
  border-color:rgba(200,220,205,.18);
}
.card[data-kind="token"] .card-seal{ color:#C3D2C5; }
.card[data-kind="token"] .card-type{ color:#DCE7DE; }

.card-top{ display:flex; align-items:center; gap:10px; }
.chip{
  position:relative; flex:none; width:34px; height:26px; border-radius:6px;
  background:linear-gradient(135deg, #C3D2C5 0%, #90A595 48%, #6C8272 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 2px 6px rgba(0,0,0,.4);
}
.chip i{ position:absolute; background:rgba(40,60,46,.45); }
.chip i:nth-child(1){ left:0; right:0; top:50%; height:1px; }
.chip i:nth-child(2){ top:0; bottom:0; left:33%; width:1px; }
.chip i:nth-child(3){ top:0; bottom:0; left:66%; width:1px; }
.card-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute);
}
.card-seal{ width:26px; height:26px; margin-left:auto; color:var(--green-hi); flex:none; }

.card-type{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin-top:22px;
  font-size:40px; font-weight:800; font-stretch:118%;
  line-height:1; letter-spacing:-.025em;
}
.card-type em{ font-style:normal; }
.card-type span{ color:var(--green-hi); }
.card-type-sm{ font-size:34px; }
.card-type b{
  padding:4px 8px; border-radius:8px;
  background:rgba(123,240,154,.14); border:1px solid rgba(123,240,154,.3);
  color:var(--green-hi);
  font-family:var(--mono); font-size:13px; font-weight:500; font-stretch:100%; letter-spacing:.06em;
}
.card[data-kind="token"] .card-type b{
  background:rgba(200,220,205,.12); border-color:rgba(200,220,205,.28); color:#DCE7DE;
}
.card-kind{
  display:flex; align-items:center; gap:8px; margin-top:12px;
  color:var(--green-hi); font-size:13.5px; font-weight:600;
}
.card-kind svg{ width:17px; height:17px; flex:none; }
.card[data-kind="token"] .card-kind{ color:#B6C7B9; }
.card-desc{ margin-top:10px; color:var(--mute); font-size:14px; }

.card-fields{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-top:16px; padding-top:13px;
  border-top:1px dashed rgba(123,240,154,.22);
}
.card-fields dt{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint);
}
.card-fields dd{ font-family:var(--mono); font-size:13px; font-weight:500; color:var(--ink); margin-top:2px; }

/* o aviso da tabela: no A3 o token é à parte */
.warn{
  display:flex; align-items:center; gap:7px; margin-top:12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--warn);
}
.warn svg{ width:15px; height:15px; flex:none; }

/* o preço fecha o cartão, colado no botão */
.price{
  display:flex; align-items:baseline; gap:2px;
  margin-top:auto; padding-top:16px;
  font-size:38px; font-weight:800; font-stretch:118%; line-height:1; letter-spacing:-.03em;
  color:var(--green-hi);
}
.price small{ font-size:16px; font-weight:650; margin-right:4px; opacity:.85; }
.price sup{ font-size:15px; font-weight:700; vertical-align:super; }
.card[data-kind="token"] .price{ color:#DCE7DE; }

.card-cta{
  display:flex; align-items:center; justify-content:space-between;
  min-height:52px; margin-top:14px; padding:0 18px;
  border-radius:14px;
  background:rgba(60,200,98,.12);
  border:1px solid rgba(123,240,154,.34);
  color:var(--green-hi); font-weight:650; font-size:15.5px;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.card[data-kind="token"] .card-cta{
  background:rgba(200,220,205,.09); border-color:rgba(200,220,205,.28); color:#DCE7DE;
}
.card-cta svg{ width:20px; height:20px; transition:transform .2s var(--ease); }
.card-cta:active{ transform:scale(.98); }
@media (hover:hover){
  .card-cta:hover{ background:rgba(60,200,98,.2); }
  .card-cta:hover svg{ transform:translateX(4px); }
}

.doubt{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding:16px 18px; min-height:56px;
  border:1px dashed var(--line); border-radius:16px;
}
.doubt span{ color:var(--mute); font-size:14.5px; }
.doubt b{ display:flex; align-items:center; gap:4px; color:var(--green-hi); font-size:14.5px; font-weight:650; }
.doubt b svg{ width:16px; height:16px; }

/* =========================================================
   COMO FUNCIONA — a cadeia de validação
   Cada elo acende e desenha o check quando chega na tela.
   ========================================================= */
.chain{ margin-top:28px; }
.link{ position:relative; padding:0 0 30px 60px; }
.link:last-child{ padding-bottom:0; }
.link:not(:last-child)::before,
.link:not(:last-child)::after{
  content:""; position:absolute; left:21px; top:48px; bottom:4px; width:2px; border-radius:2px;
}
.link:not(:last-child)::before{ background:var(--line-soft); }
.link:not(:last-child)::after{
  background:linear-gradient(var(--green), rgba(60,200,98,.15));
  transform-origin:top; transform:scaleY(0);
  transition:transform 1s var(--ease) .35s;
}
.link.in::after{ transform:scaleY(1); }
.js .link:not(.in)::after{ transform:scaleY(0); }
html:not(.js) .link::after{ transform:scaleY(1); }

.node{
  position:absolute; left:0; top:0;
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:14px;
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--green-hi);
  transition:background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.node svg{ width:22px; height:22px; }
.js .link .node svg{ stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .5s var(--ease) .25s; }
.js .link.in .node svg{ stroke-dashoffset:0; }
.link.in .node{
  background:rgba(60,200,98,.14); border-color:rgba(123,240,154,.45);
  box-shadow:0 0 22px rgba(60,200,98,.22);
}
.link h3{ padding-top:9px; font-size:18.5px; font-weight:700; font-stretch:108%; line-height:1.25; }
.link p{ margin-top:5px; color:var(--mute); font-size:15px; }

.modes{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.modes span{
  display:flex; align-items:center; gap:8px;
  padding:9px 14px 9px 11px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--panel);
  font-size:14.5px; font-weight:600;
}
.modes svg{ width:18px; height:18px; color:var(--green-hi); }

/* =========================================================
   ONDE ESTAMOS
   O mapa é cooperativo: um dedo rola a página, dois dedos
   movem o mapa. No desktop, o clique libera e o mouse saindo
   devolve a trava — assim a roda do mouse nunca "prende" a
   rolagem dentro do mapa.
   ========================================================= */
.where{ margin-top:80px; }

.addr{
  display:flex; align-items:center; gap:14px;
  margin-top:20px; padding:16px;
  border:1px solid var(--line); border-radius:18px;
  background:rgba(11,21,15,.75);
  font-style:normal;
}
.addr-pin{
  position:relative; flex:none;
  width:46px; height:46px; display:grid; place-items:center;
  border-radius:14px; background:rgba(60,200,98,.12); color:var(--green-hi);
}
.addr-pin svg{ width:23px; height:23px; position:relative; }
.addr-pin .ping{
  position:absolute; inset:0; border-radius:14px;
  border:1px solid var(--green);
  animation:ping 2.8s var(--ease) infinite;
}
@keyframes ping{
  0%{ transform:scale(1); opacity:.7; }
  70%,100%{ transform:scale(1.5); opacity:0; }
}
.addr-txt{ display:flex; flex-direction:column; gap:2px; font-size:14.5px; color:var(--mute); line-height:1.45; }
.addr-txt b{ font-size:16px; font-weight:700; color:var(--ink); }
.addr-txt small{ font-family:var(--mono); font-size:11.5px; color:var(--faint); margin-top:2px; }

.map{
  position:relative; overflow:hidden;
  margin-top:14px;
  border-radius:20px; border:1px solid var(--line);
  background:var(--panel);
  box-shadow:var(--sh-card);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* O mapa vai nas cores do Google — inverter as cores deles
   quebra as diretrizes de marca e deixa os ícones errados.
   Quem costura o mapa à página é a moldura, o véu escuro nas
   bordas e o leve rebaixamento de saturação enquanto travado. */
.map iframe{
  display:block; width:100%; height:280px; border:0;
  filter:saturate(.78) brightness(.9) contrast(1.02);
  pointer-events:none;                 /* travado: a página rola por cima */
  transition:filter .4s var(--ease);
}
/* liberado pelos dois dedos (ou pelo clique no desktop) */
.map.live{ border-color:rgba(123,240,154,.55); box-shadow:0 0 0 1px rgba(123,240,154,.25), 0 18px 40px rgba(0,0,0,.5); }
.map.live iframe{ pointer-events:auto; filter:none; }

/* a varredura de validação também passa aqui, uma vez, na entrada */
.map-scan{
  position:absolute; left:0; right:0; top:0; height:70px; pointer-events:none;
  background:linear-gradient(180deg, rgba(123,240,154,0), rgba(123,240,154,.22));
  transform:translateY(-70px); opacity:0;
}
.map.in .map-scan{ animation:mapscan 1.6s var(--ease) .25s 1; }
@keyframes mapscan{
  0%{ transform:translateY(-70px); opacity:1; }
  90%{ transform:translateY(280px); opacity:1; }
  100%{ transform:translateY(280px); opacity:0; }
}

.map-veil{
  position:absolute; inset:0; pointer-events:none;
  display:flex; align-items:flex-end; justify-content:center;
  padding:14px;
  background:linear-gradient(180deg, rgba(4,7,5,.25) 0%, rgba(4,7,5,0) 35%, rgba(4,7,5,.45) 100%);
  transition:opacity .35s var(--ease);
}
.map.live .map-veil{ opacity:0; }
.map-hint{
  display:flex; align-items:center; gap:9px;
  padding:10px 15px;
  border-radius:999px; border:1px solid var(--line);
  background:rgba(6,12,8,.88);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:13px; color:var(--mute);
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  animation:float 3.2s var(--ease) infinite;
}
.map-hint b{ color:var(--ink); font-weight:650; }
.map-hint svg{ width:19px; height:19px; color:var(--green-hi); flex:none; }
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}

.where-actions{ display:flex; gap:10px; margin-top:12px; }
.btn-ghost{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:9px;
  min-height:54px; padding:0 12px;
  border-radius:14px; border:1px solid var(--line);
  background:rgba(11,21,15,.8);
  font-size:14px; font-weight:650; white-space:nowrap;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.btn-ghost svg{ width:20px; height:20px; color:var(--green-hi); flex:none; }
.btn-ghost:active{ transform:scale(.98); }
@media (hover:hover){
  .btn-ghost:hover{ border-color:rgba(123,240,154,.4); background:var(--panel-2); }
}

.where-note{ margin-top:14px; color:var(--mute); font-size:14px; }
.where-note a{ color:var(--green-hi); border-bottom:1px solid rgba(123,240,154,.35); }

/* =========================================================
   SELO — +5 anos
   ========================================================= */
.stamp{
  position:relative; overflow:hidden;
  margin-top:80px; padding:30px 22px 28px;
  display:grid; grid-template-areas:"seal" "txt"; justify-items:center;
  text-align:center;
  border-radius:26px; border:1px solid var(--line);
  background:
    radial-gradient(80% 70% at 50% 30%, rgba(60,200,98,.16), rgba(60,200,98,0) 70%),
    linear-gradient(180deg, var(--panel-2), var(--deep));
}
.stamp-ring{ grid-area:seal; width:210px; height:210px; }
.stamp-ring svg{ width:100%; height:100%; animation:spin 48s linear infinite; }
.stamp-ring text{
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.1em;
  fill:var(--green-hi); fill-opacity:.85;
}
.stamp-core{
  grid-area:seal; align-self:center;
  width:128px; height:128px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid rgba(123,240,154,.35);
  box-shadow:0 0 0 7px rgba(4,7,5,.6), 0 0 0 8px var(--line-soft), 0 0 40px rgba(60,200,98,.18) inset;
  background:radial-gradient(circle, #0E2416, #07110A);
}
.stamp-core b{
  font-size:54px; font-weight:800; font-stretch:125%; line-height:.9; letter-spacing:-.03em;
  background:linear-gradient(180deg, var(--green-hi), var(--green));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stamp-core span{
  margin-top:6px;
  font-family:var(--mono); font-size:9.5px; line-height:1.35; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute);
}
.stamp-txt{ grid-area:txt; margin-top:18px; max-width:28ch; font-size:16.5px; font-weight:550; line-height:1.4; }

/* =========================================================
   CANAIS OFICIAIS
   ========================================================= */

/* --- o site: uma janela de navegador, com o cadeado do
   endereço. Para quem vende certificado digital, mostrar o
   domínio oficial é parte da mensagem. --- */
.site{
  position:relative; overflow:hidden; isolation:isolate;
  display:block; margin-top:22px;
  border-radius:20px; border:1px solid var(--line);
  background:linear-gradient(158deg, #12241A 0%, #0A140E 60%, #07110A 100%);
  box-shadow:var(--sh-card);
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.site::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:var(--gui, none); background-size:360px 260px;
  -webkit-mask-image:linear-gradient(210deg, #000 5%, transparent 70%);
          mask-image:linear-gradient(210deg, #000 5%, transparent 70%);
}
.site:active{ transform:scale(.99); }
@media (hover:hover){
  .site:hover{ border-color:rgba(123,240,154,.42); }
  .site:hover .site-go svg{ transform:translateX(4px); }
}

.site-bar{
  display:flex; align-items:center; gap:7px;
  padding:11px 14px;
  background:rgba(123,240,154,.05);
  border-bottom:1px solid var(--line-soft);
}
.site-bar > i{ width:8px; height:8px; border-radius:50%; background:rgba(123,240,154,.18); flex:none; }
.site-bar > i:first-child{ background:var(--green); }
.site-url{
  display:flex; align-items:center; gap:7px; flex:1; min-width:0;
  margin-left:6px; padding:6px 12px;
  border-radius:999px; border:1px solid var(--line-soft);
  background:rgba(4,7,5,.55);
  font-family:var(--mono); font-size:12px; color:var(--green-hi);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.site-url svg{ width:14px; height:14px; flex:none; opacity:.9; }

.site-body{ display:block; padding:18px 18px 16px; }
.site-kicker{
  display:block;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--green-hi);
}
.site-body strong{
  display:block; margin-top:8px;
  font-size:20px; font-weight:750; font-stretch:108%; line-height:1.2;
}
.site-desc{ display:block; margin-top:7px; color:var(--mute); font-size:14.5px; }
.site-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.site-chips span{
  padding:6px 11px; border-radius:999px;
  border:1px solid var(--line); background:rgba(11,21,15,.7);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mute);
}
.site-go{
  display:flex; align-items:center; gap:7px; margin-top:16px;
  color:var(--green-hi); font-size:15px; font-weight:650;
}
.site-go svg{ width:19px; height:19px; transition:transform .2s var(--ease); }

.rows{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.row{
  display:flex; align-items:center; gap:14px;
  min-height:72px; padding:12px 16px 12px 12px;
  border-radius:16px; border:1px solid var(--line);
  background:rgba(11,21,15,.8);
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.row:active{ transform:scale(.985); }
@media (hover:hover){
  .row:hover{ border-color:rgba(123,240,154,.4); background:var(--panel-2); }
  .row:hover .row-go{ transform:translateX(3px); color:var(--green-hi); }
}
.row-ico{
  flex:none; width:46px; height:46px; display:grid; place-items:center;
  border-radius:12px; background:rgba(123,240,154,.07); color:var(--ink);
  border:1px solid var(--line-soft);
}
.row-ico.wa{ background:rgba(60,200,98,.14); color:var(--green-hi); }
.row-ico svg{ width:23px; height:23px; }
.row-txt{ display:flex; flex-direction:column; min-width:0; }
.row-txt strong{ display:flex; align-items:center; gap:7px; font-size:16px; font-weight:650; }
.row-txt .ok{ width:17px; height:17px; color:var(--green); flex:none; }
.row-txt small{ font-family:var(--mono); font-size:12px; color:var(--faint); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-go{ width:18px; height:18px; margin-left:auto; flex:none; color:var(--faint); transition:transform .2s var(--ease), color .2s; }

/* =========================================================
   FECHAMENTO
   ========================================================= */
.closing{
  position:relative; overflow:hidden; isolation:isolate;
  margin-top:80px; padding:38px 20px 22px;
  text-align:center;
  border-radius:26px; border:1px solid var(--line);
  background:linear-gradient(180deg, #0F2517 0%, var(--panel) 60%);
  box-shadow:var(--sh-card);
}
.closing::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:var(--gui, none); background-size:360px 260px;
  -webkit-mask-image:radial-gradient(90% 70% at 50% 0%, #000, transparent 75%);
          mask-image:radial-gradient(90% 70% at 50% 0%, #000, transparent 75%);
}
.closing h2{
  font-size:clamp(28px, 8vw, 34px); font-weight:750; font-stretch:112%;
  line-height:1.1; letter-spacing:-.018em;
}
.closing h2 em{ font-style:normal; color:var(--green-hi); }
.closing p{ margin:12px auto 0; max-width:30ch; color:var(--mute); font-size:15.5px; }

.cta-main{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:14px;
  min-height:68px; margin-top:24px; padding:12px 18px;
  text-align:left;
  border-radius:18px;
  background:linear-gradient(180deg, #5EDB7F 0%, var(--green) 55%, #2DB553 100%);
  color:var(--on-green);
  box-shadow:var(--sh-green), 0 1px 0 rgba(255,255,255,.35) inset;
  transition:transform .2s var(--ease), filter .2s;
}
.cta-main:active{ transform:scale(.98); }
@media (hover:hover){ .cta-main:hover{ filter:brightness(1.06); } .cta-main:hover .arrow{ transform:translateX(4px); } }
.cta-main .sheen{
  position:absolute; top:0; bottom:0; left:-40%; width:30%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform:skewX(-18deg);
  animation:sheen 6.5s var(--ease) 1s infinite;
}
.cta-main .ico{ width:28px; height:28px; flex:none; }
.cta-main .txt{ display:flex; flex-direction:column; }
.cta-main strong{ font-size:17px; font-weight:750; font-stretch:106%; line-height:1.2; }
.cta-main small{ font-size:13px; font-weight:550; opacity:.78; margin-top:2px; }
.cta-main .arrow{ width:22px; height:22px; margin-left:auto; flex:none; transition:transform .2s var(--ease); }

/* =========================================================
   RODAPÉ
   ========================================================= */
.foot{ margin-top:56px; text-align:center; }
.foot-mark{ width:32px; height:32px; margin:0 auto; color:var(--green); }
.foot-name{ margin-top:12px; font-size:14px; font-weight:650; font-stretch:108%; }
.foot-meta{ margin-top:4px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--faint); }
.foot-site{ margin-top:10px; }
.foot-site a{
  font-family:var(--mono); font-size:12px; color:var(--green-hi);
  border-bottom:1px solid rgba(123,240,154,.3); padding-bottom:2px;
}
.foot-legal{ margin-top:16px; font-size:12px; color:var(--faint); }

/* assinatura de quem desenvolveu */
.foot-by{
  margin-top:18px; padding-top:16px;
  border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--faint);
}
.foot-by a{
  display:inline-flex; align-items:center; gap:6px; margin-left:4px;
  color:var(--mute); font-weight:650;
  transition:color .2s var(--ease);
}
.foot-by a svg{ width:15px; height:15px; }
@media (hover:hover){ .foot-by a:hover{ color:var(--green-hi); } }

/* =========================================================
   BARRA FIXA — aparece quando o bloco de agendamento sai da tela
   ========================================================= */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  transform:translateY(130%);
  transition:transform .45s var(--ease);
  pointer-events:none;
}
.dock.on{ transform:none; pointer-events:auto; }
.dock-in{
  max-width:520px; margin:0 auto;
  display:flex; align-items:center; gap:8px;
  padding:8px;
  border-radius:18px; border:1px solid var(--line);
  background:rgba(8,16,11,.86);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 18px 40px rgba(0,0,0,.6);
}
.dock-btn{
  flex:1;
  display:flex; align-items:center; gap:10px;
  min-height:50px; padding:0 16px;
  border-radius:13px;
  background:linear-gradient(180deg, #56D877, #2FB555);
  color:var(--on-green); font-size:15.5px; font-weight:750; font-stretch:106%;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
  transition:transform .2s var(--ease), filter .2s;
}
.dock-btn:active{ transform:scale(.98); }
@media (hover:hover){ .dock-btn:hover{ filter:brightness(1.06); } }
.dock-btn svg{ width:20px; height:20px; flex:none; }
.dock-btn .dock-go{ margin-left:auto; width:20px; height:20px; }

/* =========================================================
   TELAS PEQUENAS (360px)
   ========================================================= */
@media (max-width:374px){
  .page{ padding-inline:16px; }
  .unit{ gap:12px; padding-right:14px; }
  .unit-uf{ width:42px; height:42px; font-size:15px; }
  .unit-txt strong{ font-size:16px; }
  .card{ padding:18px 16px 16px; }
  .dock-btn{ padding:0 14px; }
}

/* =========================================================
   TELAS BAIXAS (iPhone SE, navegador do Instagram com barras)
   O objetivo é sempre o mesmo: o bloco "Agende seu horário"
   precisa aparecer sem rolagem.
   ========================================================= */
@media (max-height:730px){
  .emblem{ width:min(170px, 46vw); }
  .handle{ margin-top:10px; }
  .lede{ margin-top:18px; font-size:clamp(20px, 5.8vw, 24px); }
  .sub{ margin-top:8px; font-size:14.5px; }
  .facts{ margin-top:16px; }
  .facts li{ padding:10px 6px; }
}
/* Em telas muito baixas os três fatos saem do hero: todos eles
   reaparecem adiante (o selo de +5 anos, os dois cartões e os
   formatos presencial/remoto). O botão de agendar vale mais. */
@media (max-height:680px){
  .facts{ display:none; }
  .emblem{ width:min(152px, 42vw); }
}

/* =========================================================
   MOVIMENTO REDUZIDO
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .js .reveal{ opacity:1; transform:none; }
  .shield .tick{ stroke-dashoffset:0; }
  .shield .scan{ opacity:0; }
  .unit::after, .cta-main .sheen{ display:none; }
  .rail{ scroll-behavior:auto; }
  .js .link .node svg{ stroke-dashoffset:0; }
  .link:not(:last-child)::after{ transform:scaleY(1); }
}