/* ==========================================================================
   GLR Agência — design system (Clean Claro)
   Fonte da verdade: identidade/design-guide.md
   Estados de animação ficam em motion.css; aqui só o visual final.
   ========================================================================== */

/* ---------- Fontes self-hosted ---------- */
@font-face { font-family:'Sora'; src:url('../fonts/sora-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Sora'; src:url('../fonts/sora-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/inter-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/inter-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/inter-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  --navy:#1E3A8A;
  --navy-700:#1B3475;
  --navy-800:#152a5f;
  --navy-50:#EEF2FF;
  --graphite:#0F172A;
  --white:#FFFFFF;
  --gray-50:#F8FAFC;
  --gray-100:#F1F5F9;
  --gray-200:#E2E8F0;
  --gray-300:#CBD5E1;
  --gray-400:#94A3B8;
  --gray-500:#64748B;
  --gray-600:#475569;
  --coral:#FB7185;
  --wa:#25D366;

  --font-title:'Sora', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;

  --radius:12px;
  --radius-lg:18px;
  --radius-sm:8px;

  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow:0 8px 24px rgba(15,23,42,.07);
  --shadow-lg:0 24px 60px rgba(15,23,42,.12);
  --shadow-xl:0 40px 90px -20px rgba(15,23,42,.28);

  --ease:cubic-bezier(.22,1,.36,1);

  --container:1180px;
  --pad:clamp(20px, 5vw, 32px);
  --hdr-h:72px;

  /* assinatura da marca: régua de linhas verticais finas, a mesma das propostas */
  --lines-dark:repeating-linear-gradient(to right, rgba(15,23,42,.055) 0 1px, transparent 1px 72px);
  --lines-light:repeating-linear-gradient(to right, rgba(255,255,255,.08) 0 1px, transparent 1px 72px);
}

/* ---------- Reset base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--hdr-h) + 12px); }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{
  font-family:var(--font-body);
  color:var(--graphite);
  background:var(--white);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:3px solid var(--navy); outline-offset:3px; border-radius:4px; }
main:focus{ outline:none; }
::selection{ background:var(--navy); color:#fff; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.ico-sprite{ display:none; }

.skip{
  position:fixed; left:16px; top:12px; z-index:100; background:var(--navy); color:#fff;
  padding:.7rem 1rem; border-radius:var(--radius-sm); font-weight:600;
  transform:translateY(-160%); transition:transform .2s var(--ease);
}
.skip:focus{ transform:none; }

/* ---------- Tipografia ---------- */
h1,h2,h3,h4{ font-family:var(--font-title); font-weight:600; line-height:1.1; letter-spacing:-.025em; color:var(--graphite); }
h1{ font-size:clamp(2.35rem, 5.4vw, 3.9rem); letter-spacing:-.035em; line-height:1.05; }
h1,h2,h3{ text-wrap:balance; }
p,li{ text-wrap:pretty; }
h2{ font-size:clamp(1.85rem, 4vw, 3rem); letter-spacing:-.03em; }
h3{ font-size:clamp(1.12rem, 1.8vw, 1.32rem); }
h1 em, h2 em{ font-style:normal; color:var(--navy); }
.eyebrow{
  font-family:var(--font-body); font-weight:600; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--navy);
  display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--coral); display:inline-block; }
.eyebrow--light{ color:rgba(255,255,255,.8); }
.lead{ font-size:clamp(1.05rem, 1.5vw, 1.2rem); color:var(--gray-600); line-height:1.6; }

/* Marcador de dado que falta. Visível de propósito: não pode ir pro ar assim. */
.fill{ background:#FEF3C7; color:#92400E; border:1px dashed #D97706; border-radius:4px; padding:0 .35em; font-weight:600; font-size:.92em; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
section{ padding-block:clamp(72px, 10vw, 136px); }
.section-head{ max-width:660px; margin-bottom:clamp(36px, 5vw, 60px); }
.section-head h2{ margin-top:18px; }
.section-head .lead{ margin-top:18px; }
.section-head--center{ text-align:center; margin-inline:auto; }
.section-head--center .eyebrow{ justify-content:center; }
.center{ text-align:center; margin-inline:auto; }
.mt-0{ margin-top:0; }
.nobr{ white-space:nowrap; }

/* ---------- Botões ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-body); font-weight:600; font-size:1rem; line-height:1.2;
  padding:.95rem 1.5rem; border-radius:var(--radius-sm); border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--ease), background-color .2s ease, box-shadow .25s var(--ease), border-color .2s ease, color .2s ease;
}
.btn svg{ width:20px; height:20px; flex:none; }
.btn--navy,.btn--wa{ background:var(--navy); color:var(--white); box-shadow:0 1px 2px rgba(15,23,42,.08), 0 8px 20px -8px rgba(30,58,138,.55); }
.btn--navy:hover,.btn--wa:hover{ background:var(--navy-700); transform:translateY(-2px); box-shadow:0 2px 4px rgba(15,23,42,.08), 0 14px 28px -10px rgba(30,58,138,.6); }
.btn--ghost{ background:transparent; color:var(--navy); border-color:var(--gray-200); }
.btn--ghost:hover{ border-color:var(--navy); background:var(--gray-50); }
.btn--light{ background:var(--white); color:var(--navy); }
.btn--light:hover{ background:var(--gray-100); transform:translateY(-2px); }
.btn--outline-light{ color:#fff; border-color:rgba(255,255,255,.35); }
.btn--outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.btn--sm{ padding:.62rem 1rem; font-size:.92rem; }
.btn--lg{ padding:1.1rem 1.8rem; font-size:1.06rem; }
.btn--block{ width:100%; }
.btn-group{ display:flex; flex-wrap:wrap; gap:.85rem; }
.link-arrow{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:var(--navy); transition:gap .25s var(--ease); }
.link-arrow svg{ width:18px; height:18px; }
.link-arrow:hover{ gap:.7rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--hdr-h);
  background:transparent; border-bottom:1px solid transparent;
  transition:transform .45s var(--ease), background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.hdr.is-scrolled{ background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px); border-bottom-color:var(--gray-200); box-shadow:0 6px 24px -12px rgba(15,23,42,.12); }
.hdr.is-hidden{ transform:translateY(-100%); }
.hdr__in{ height:100%; display:flex; align-items:center; gap:1.5rem; }
.hdr__logo{ flex:none; }
.hdr__logo img{ height:40px; width:auto; } /* 40px é o mínimo do lockup (design-guide) */
.hdr__nav{ display:flex; align-items:center; gap:1.9rem; margin-left:auto; }
.hdr__nav a{ position:relative; font-weight:500; color:var(--gray-600); font-size:.96rem; padding-block:.4rem; transition:color .2s ease; }
.hdr__nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--coral); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.hdr__nav a:hover{ color:var(--graphite); }
.hdr__nav a:hover::after{ transform:scaleX(1); }
.hdr__cta{ flex:none; }
.hdr__burger{ display:none; width:44px; height:44px; border-radius:var(--radius-sm); align-items:center; justify-content:center; flex-direction:column; gap:6px; margin-left:.25rem; }
.hdr__burger span{ display:block; width:22px; height:2px; background:var(--graphite); border-radius:2px; transition:transform .35s var(--ease), opacity .2s ease; }
.hdr__burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

@media (max-width:980px){
  .hdr__nav{ display:none; }
  .hdr__cta{ margin-left:auto; }
  .js .hdr__burger{ display:inline-flex; }
}
@media (max-width:420px){
  .hdr__cta span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .hdr__cta{ padding:.62rem .75rem; }
}

/* Menu do celular */
.menu{
  position:fixed; inset:var(--hdr-h) 0 0 0; z-index:55; background:var(--white);
  padding:28px var(--pad) calc(32px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; overflow-y:auto;
}
.menu[hidden]{ display:none; }
.menu__links{ display:flex; flex-direction:column; border-top:1px solid var(--gray-200); }
.menu__links a{ font-family:var(--font-title); font-weight:600; font-size:1.6rem; letter-spacing:-.02em; padding:1rem 0; border-bottom:1px solid var(--gray-200); display:flex; justify-content:space-between; align-items:center; }
.menu__links a span{ font-family:var(--font-body); font-size:.8rem; color:var(--gray-400); letter-spacing:.1em; }
.menu__foot{ margin-top:auto; padding-top:28px; }
.menu__foot p{ color:var(--gray-500); font-size:.92rem; margin-top:14px; text-align:center; }
.menu-open{ overflow:hidden; }
.menu-open .hdr{ background:var(--white); border-bottom-color:var(--gray-200); transform:none; }

/* ==========================================================================
   Hero (home)
   ========================================================================== */
.hero-home{
  position:relative; overflow:hidden; isolation:isolate;
  padding-top:calc(var(--hdr-h) + clamp(40px, 7vw, 88px));
  padding-bottom:clamp(64px, 9vw, 120px);
  min-height:min(100svh, 980px);
  display:flex; align-items:center;
}
.hero-home::before{
  content:""; position:absolute; inset:0; z-index:-2; background:var(--lines-dark);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 40%, #000 20%, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 70% at 70% 40%, #000 20%, transparent 75%);
}
.hero-home::after{
  content:""; position:absolute; z-index:-3; width:900px; height:900px; right:-260px; top:-260px; border-radius:50%;
  background:radial-gradient(circle, rgba(30,58,138,.08), transparent 62%);
}
.hero-home__grid{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(32px, 5vw, 72px); align-items:center; }
.hero-home h1{ margin:22px 0 24px; }
.hero-home .lead{ max-width:52ch; }
.hero-home .btn-group{ margin-top:36px; }
.hero__note{ margin-top:22px; font-size:.9rem; color:var(--gray-500); display:flex; align-items:center; gap:.6rem; }
.hero__note::before{ content:""; flex:none; width:8px; height:8px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 4px rgba(34,197,94,.15); }

/* palco do celular */
.stage{ position:relative; height:clamp(520px, 52vw, 620px); display:flex; align-items:center; justify-content:center; }
.shape{ position:absolute; pointer-events:none; }
.shape--navy{ width:62%; aspect-ratio:1; border-radius:36px; background:var(--navy); right:2%; top:8%; transform:rotate(-8deg); }
.shape--navy::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--lines-light); }
.shape--gray{ width:46%; aspect-ratio:1; border-radius:50%; background:var(--gray-100); left:0; bottom:2%; }
.shape--ring{ width:76px; height:76px; border-radius:50%; border:2px solid var(--coral); left:10%; top:6%; }
.shape--dots{ width:120px; height:84px; right:-2%; bottom:6%; background-image:radial-gradient(var(--gray-300) 1.6px, transparent 1.6px); background-size:14px 14px; }

.chip{
  position:absolute; z-index:3; display:flex; align-items:center; gap:.6rem;
  background:var(--white); border:1px solid var(--gray-200); border-radius:999px;
  padding:.55rem .95rem .55rem .55rem; box-shadow:var(--shadow-lg); font-size:.86rem; font-weight:600; white-space:nowrap;
}
.chip__ico{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--navy-50); color:var(--navy); }
.chip__ico svg{ width:16px; height:16px; }
.chip__ico--wa{ background:#DCFCE7; color:#15803D; }
.chip--a{ left:-4%; top:22%; }
.chip--b{ right:-6%; bottom:20%; }

/* celular */
.phone{
  position:relative; z-index:2; width:min(290px, 72vw); aspect-ratio:290/590;
  border-radius:46px; background:var(--graphite); padding:11px;
  box-shadow:var(--shadow-xl), inset 0 0 0 1.5px rgba(255,255,255,.12);
}
.phone__screen{ position:relative; height:100%; border-radius:36px; background:var(--white); overflow:hidden; display:flex; flex-direction:column; }
.phone__notch{ position:absolute; top:9px; left:50%; width:84px; height:24px; margin-left:-42px; border-radius:20px; background:var(--graphite); z-index:4; }
.phone__status{ display:flex; justify-content:space-between; padding:13px 24px 0; font-size:.68rem; font-weight:700; color:var(--graphite); height:38px; }
.phone__status i{ display:inline-block; width:22px; height:10px; border-radius:3px; border:1.5px solid var(--graphite); position:relative; }
.phone__status i::after{ content:""; position:absolute; inset:1.5px; right:5px; background:var(--graphite); border-radius:1px; }

.app{ padding:10px 16px 16px; display:flex; flex-direction:column; gap:12px; flex:1; }
.app__top{ display:flex; align-items:center; gap:10px; }
.app__avatar{ width:34px; height:34px; border-radius:10px; background:var(--navy); display:grid; place-items:center; color:#fff; font-family:var(--font-title); font-weight:700; font-size:.8rem; }
.app__name{ font-weight:700; font-size:.82rem; line-height:1.2; }
.app__sub{ font-size:.68rem; color:var(--gray-500); }
.app__title{ font-family:var(--font-title); font-weight:600; font-size:1.12rem; letter-spacing:-.02em; margin-top:4px; }
.app__service{ display:flex; justify-content:space-between; align-items:center; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:10px; padding:9px 11px; font-size:.74rem; }
.app__service b{ font-weight:600; }
.app__service span{ color:var(--gray-500); }
.app__label{ font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-400); }
.app__days{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.app__day{ border:1px solid var(--gray-200); border-radius:10px; text-align:center; padding:6px 0; font-size:.62rem; color:var(--gray-500); line-height:1.25; }
.app__day b{ display:block; font-size:.86rem; color:var(--graphite); font-weight:700; }
.app__day.is-on{ background:var(--navy); border-color:var(--navy); color:rgba(255,255,255,.75); }
.app__day.is-on b{ color:#fff; }
.app__slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.slot{ border:1px solid var(--gray-200); border-radius:9px; text-align:center; padding:7px 0; font-size:.74rem; font-weight:600; transition:background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--ease); }
.slot.is-off{ color:var(--gray-300); text-decoration:line-through; background:var(--gray-50); }
.slot.is-picked{ background:var(--navy); border-color:var(--navy); color:#fff; transform:scale(1.04); }
.app__confirm{ margin-top:auto; background:var(--navy); color:#fff; border-radius:12px; text-align:center; padding:12px; font-weight:600; font-size:.82rem; display:flex; align-items:center; justify-content:center; gap:.4rem; }
.app__confirm svg{ width:16px; height:16px; }

.notif{
  position:absolute; z-index:5; left:10px; right:10px; top:44px;
  background:var(--white); border:1px solid var(--gray-200); border-radius:18px;
  box-shadow:0 18px 40px -12px rgba(15,23,42,.35); padding:11px 12px; display:flex; gap:10px; align-items:flex-start;
}
.notif__ico{ flex:none; width:32px; height:32px; border-radius:9px; background:var(--wa); color:#fff; display:grid; place-items:center; }
.notif__ico svg{ width:19px; height:19px; }
.notif__meta{ display:flex; justify-content:space-between; font-size:.62rem; color:var(--gray-500); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.notif__title{ font-size:.8rem; font-weight:700; margin-top:2px; display:flex; align-items:center; gap:.3rem; }
.notif__title svg{ width:14px; height:14px; color:#16A34A; }
.notif__txt{ font-size:.72rem; color:var(--gray-600); line-height:1.4; }

@media (max-width:900px){
  .hero-home{ min-height:0; }
  .hero-home__grid{ grid-template-columns:1fr; }
  .stage{ height:auto; padding-block:24px 8px; }
  .shape--navy{ width:min(340px, 74vw); right:50%; margin-right:max(-210px, -44vw); top:4%; }
  .shape--gray{ width:min(260px, 58vw); left:50%; margin-left:max(-240px, -48vw); }
  .chip--a{ left:max(0px, calc(50% - 250px)); }
  .chip--b{ right:max(0px, calc(50% - 250px)); }
}
@media (max-width:520px){
  .phone{ width:min(260px, 70vw); }
  .chip--a{ display:none; }
  .chip{ font-size:.78rem; padding:.45rem .75rem .45rem .45rem; }
  .chip__ico{ width:26px; height:26px; }
  .chip--a{ top:12%; }
  .chip--b{ bottom:10%; }
  .hero-home .btn-group .btn{ flex:1 1 100%; }
}

/* ==========================================================================
   Faixa de setores (marquee)
   ========================================================================== */
.mq{ padding-block:26px; border-block:1px solid var(--gray-200); background:var(--gray-50); overflow:hidden; }
.mq__label{ font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gray-500); text-align:center; margin-bottom:14px; }
.mq__track{ display:flex; width:max-content; animation:mq 46s linear infinite; }
.mq:hover .mq__track{ animation-play-state:paused; }
.mq__list{ display:flex; align-items:center; flex:none; }
.mq__list li{ display:flex; align-items:center; font-family:var(--font-title); font-weight:600; font-size:clamp(1.25rem, 2.4vw, 1.7rem); letter-spacing:-.02em; color:var(--graphite); white-space:nowrap; }
.mq__list li::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--coral); margin-inline:clamp(22px, 3.2vw, 40px); }
.mq__list li.mq__more{ color:var(--gray-400); }
@keyframes mq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .mq__track{ animation:none; width:auto; justify-content:center; }
  .mq__list{ flex-wrap:wrap; justify-content:center; row-gap:10px; padding-inline:var(--pad); }
  .mq__list[aria-hidden="true"]{ display:none; }
}

/* ---------- Parceiros: faixa de logos em loop ---------- */
.pt{ background:var(--white); overflow:hidden; }
.pt .section-head{ margin-bottom:clamp(28px, 4vw, 48px); }
.pt__marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.pt__track{ display:flex; width:max-content; animation:mq 38s linear infinite; }
.pt__marquee:hover .pt__track{ animation-play-state:paused; }
.pt__list{ display:flex; align-items:center; flex:none; }
.pt__list li{ display:flex; align-items:center; justify-content:center; padding-inline:clamp(28px, 4vw, 56px); }
.pt__list img{
  height:clamp(48px, 6vw, 72px); width:auto; max-width:200px; object-fit:contain;
  transition:transform .3s var(--ease);
}
.pt__list .pt__sq img{ height:clamp(64px, 8vw, 96px); }
.pt__list li:hover img{ transform:scale(1.06); }
@media (prefers-reduced-motion:reduce){
  .pt__marquee{ -webkit-mask-image:none; mask-image:none; }
  .pt__track{ animation:none; width:auto; justify-content:center; }
  .pt__list{ flex-wrap:wrap; justify-content:center; row-gap:28px; padding-inline:var(--pad); }
  .pt__list[aria-hidden="true"]{ display:none; }
}


/* ==========================================================================
   Antes e depois
   ========================================================================== */
.ba{ position:relative; }
.ba__inner{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px, 6vw, 88px); align-items:center; }
.ba__head .section-head{ margin-bottom:0; }
/* barra de progresso: só aparece com a seção fixada (motion.css) */
.ba__progress{ display:none; margin-top:34px; gap:12px; align-items:center; font-size:.85rem; font-weight:600; color:var(--gray-500); }
.ba__progress-bar{ position:relative; width:140px; height:3px; border-radius:3px; background:var(--gray-200); overflow:hidden; }
.ba__progress-bar i{ position:absolute; inset:0; background:var(--navy); transform-origin:left; transform:scaleX(0); }
.ba__stage{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ba__col{ position:relative; border-radius:var(--radius-lg); padding:24px 20px 20px; border:1px solid var(--gray-200); background:var(--white); }
.ba__col--antes{ background:var(--gray-50); }
.ba__col--depois{ background:var(--navy); border-color:var(--navy); color:#fff; overflow:hidden; }
.ba__col--depois::before{ content:""; position:absolute; inset:0; background:var(--lines-light); pointer-events:none; }
.ba__col > *{ position:relative; }
.ba__tag{ display:inline-flex; align-items:center; gap:.5rem; font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-500); margin-bottom:16px; }
.ba__tag::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--coral); }
.ba__col--depois .ba__tag{ color:rgba(255,255,255,.75); }
.ba__col--depois .ba__tag::before{ background:#4ADE80; }
.ba__steps{ display:flex; flex-direction:column; gap:12px; }
.ba__step{ display:flex; gap:12px; align-items:flex-start; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); padding:14px; }
.ba__col--depois .ba__step{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); }
.ba__ico{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--gray-100); color:var(--gray-600); }
.ba__ico svg{ width:18px; height:18px; }
.ba__ico--x{ background:#FFE4E6; color:#BE123C; }
.ba__col--depois .ba__ico{ background:rgba(255,255,255,.12); color:#fff; }
.ba__col--depois .ba__ico--ok{ background:#DCFCE7; color:#15803D; }
.ba__step h3{ font-family:var(--font-body); font-weight:600; font-size:.96rem; letter-spacing:0; line-height:1.35; }
.ba__col--depois .ba__step h3{ color:#fff; }
.ba__step p{ font-size:.84rem; color:var(--gray-500); margin-top:3px; line-height:1.45; }
.ba__col--depois .ba__step p{ color:rgba(255,255,255,.7); }
.ba__bubble{ display:inline-block; margin-top:8px; background:var(--gray-100); border-radius:12px 12px 12px 4px; padding:7px 11px; font-size:.82rem; color:var(--graphite); }
.ba__seen{ display:block; font-size:.72rem; color:var(--gray-400); margin-top:5px; }
@media (max-width:980px){
  .ba__inner{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .ba__stage{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Serviços
   ========================================================================== */
.svc__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; perspective:1200px; }
.svc{
  position:relative; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--gray-200);
  border-radius:var(--radius); padding:30px 28px 28px; box-shadow:var(--shadow-sm); overflow:hidden;
  transition:box-shadow .35s var(--ease), border-color .35s ease; transform-style:preserve-3d;
}
.svc::before{ content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:var(--navy); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.svc:hover{ box-shadow:var(--shadow-lg); border-color:var(--gray-300); }
.svc:hover::before{ transform:scaleX(1); }
.svc__n{ position:absolute; right:22px; top:16px; font-family:var(--font-title); font-weight:700; font-size:3.2rem; line-height:1; color:var(--gray-100); letter-spacing:-.04em; }
.svc__ico{ position:relative; width:52px; height:52px; border-radius:14px; background:var(--navy-50); color:var(--navy); display:grid; place-items:center; margin-bottom:22px; }
.svc__ico svg{ width:26px; height:26px; }
.svc h3{ margin-bottom:10px; font-size:1.3rem; }
.svc p{ color:var(--gray-600); font-size:.98rem; }
.svc__list{ margin:18px 0 24px; display:flex; flex-direction:column; gap:8px; }
.svc__list li{ display:flex; gap:.6rem; font-size:.92rem; color:var(--gray-600); }
.svc__list li::before{ content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--navy); margin-top:.6em; }
.svc .link-arrow{ margin-top:auto; }
.svc--link{ cursor:pointer; }
@media (max-width:980px){ .svc__grid{ grid-template-columns:1fr 1fr; } .svc__grid > :last-child{ grid-column:1 / -1; } }
@media (max-width:640px){ .svc__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Exemplos de projeto
   ========================================================================== */
.ex{ background:var(--gray-50); border-block:1px solid var(--gray-200); overflow:hidden; }
.ex__inner{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
.ex__hint{ display:none; margin-top:22px; font-size:.88rem; font-weight:600; color:var(--gray-500); align-items:center; gap:.5rem; }
.ex__hint svg{ width:18px; height:18px; }
.ex__track{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; }
.ex__card{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:14px; box-shadow:var(--shadow-sm); }
.ex__body{ padding:22px 10px 8px; display:flex; flex-direction:column; flex:1; }
.ex__label{ align-self:flex-start; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-500); border:1px solid var(--gray-200); border-radius:999px; padding:.3rem .7rem; }
.ex__body h3{ margin-top:14px; font-size:1.35rem; }
.ex__body > p{ color:var(--gray-600); font-size:.96rem; margin-top:8px; }
.ex__feat{ margin:16px 0 22px; display:flex; flex-direction:column; gap:7px; }
.ex__feat li{ display:flex; gap:.55rem; font-size:.9rem; color:var(--gray-600); }
.ex__feat svg{ flex:none; width:18px; height:18px; color:var(--navy); margin-top:.15em; }
.ex__body .btn{ margin-top:auto; align-self:flex-start; }

/* carrossel no celular e tablet */
@media (max-width:1023px){
  .ex__hint{ display:inline-flex; }
  .ex__viewport{ margin-inline:calc(var(--pad) * -1); }
  .ex__track{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px;
    padding:4px var(--pad) 18px; scroll-padding-inline:var(--pad); scrollbar-width:none; overscroll-behavior-x:contain;
  }
  .ex__track::-webkit-scrollbar{ display:none; }
  .ex__card{ flex:0 0 min(84%, 440px); scroll-snap-align:start; }
}

/* modo fixado (desktop com motion): o motion.js liga a classe .ex--pinned */
.ex--pinned{ padding-block:0; }
.ex--pinned .ex__inner{ max-width:none; display:grid; grid-template-columns:minmax(300px, 380px) minmax(0,1fr); gap:56px; align-items:center; height:100vh; padding-left:max(var(--pad), calc((100vw - var(--container)) / 2 + var(--pad))); padding-right:0; }
.ex--pinned .section-head{ margin-bottom:0; }
.ex--pinned .ex__hint{ display:inline-flex; }
.ex__hint-scroll{ display:none; }
.ex--pinned .ex__hint-drag{ display:none; }
.ex--pinned .ex__hint-scroll{ display:inline; }
.ex--pinned .ex__viewport{ overflow:hidden; padding-block:24px; -webkit-mask-image:linear-gradient(to right, transparent 0, #000 48px); mask-image:linear-gradient(to right, transparent 0, #000 48px); padding-left:24px; margin-left:-24px; }
.ex--pinned .ex__track{ display:flex; width:max-content; gap:24px; padding-right:max(var(--pad), calc((100vw - var(--container)) / 2 + var(--pad))); }
.ex--pinned .ex__card{ width:420px; flex:none; }
@media (max-height:780px){ .ex--pinned .mock__body{ height:210px; } .ex--pinned .ex__feat{ display:none; } .ex--pinned .mk--erp .mk-tr:nth-child(4){ display:none; } }

/* mockup de navegador */
.mock{ border-radius:12px; overflow:hidden; border:1px solid var(--gray-200); background:var(--white); }
.mock__bar{ display:flex; align-items:center; gap:6px; padding:9px 12px; background:var(--gray-100); border-bottom:1px solid var(--gray-200); }
.mock__bar i{ width:8px; height:8px; border-radius:50%; background:var(--gray-300); }
.mock__url{ margin-left:10px; flex:1; background:var(--white); border-radius:6px; font-size:.68rem; color:var(--gray-500); padding:3px 10px; }
.mock__body{ position:relative; height:250px; overflow:hidden; font-size:.72rem; }

/* ==========================================================================
   Como funciona
   ========================================================================== */
.how{ position:relative; }
.how__steps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.how__line{ position:absolute; pointer-events:none; overflow:visible; }
.how__line path{ stroke-width:2; fill:none; }
.how__line .trk{ stroke:var(--gray-200); }
.how__line .prg{ stroke:var(--navy); stroke-dasharray:1; stroke-dashoffset:0; }
.how__line--h{ left:12.5%; right:12.5%; top:27px; width:75%; height:2px; }
.how__line--v{ display:none; }
.how__step{ position:relative; text-align:center; padding-inline:6px; }
.how__n{
  position:relative; z-index:1; width:56px; height:56px; margin:0 auto 22px; border-radius:16px;
  display:grid; place-items:center; font-family:var(--font-title); font-weight:700; font-size:1.15rem;
  background:var(--navy); color:#fff; border:2px solid var(--navy);
  box-shadow:0 0 0 8px var(--white);
  transition:background-color .4s ease, color .4s ease, border-color .4s ease, transform .5s var(--ease);
}
.how__step h3{ font-size:1.12rem; margin-bottom:8px; }
.how__step p{ color:var(--gray-600); font-size:.95rem; max-width:30ch; margin-inline:auto; }
@media (max-width:860px){
  .how__steps{ grid-template-columns:1fr; gap:34px; }
  .how__line--h{ display:none; }
  .how__line--v{ display:block; left:27px; top:28px; bottom:28px; width:2px; height:calc(100% - 56px); }
  .how__step{ text-align:left; display:grid; grid-template-columns:56px 1fr; gap:4px 20px; padding:0; }
  .how__n{ margin:0; grid-row:span 2; }
  .how__step h3{ margin:12px 0 4px; }
  .how__step p{ margin:0; }
  /* esconde o trecho da linha que passaria do último número */
  .how__step:last-child::after{ content:""; position:absolute; left:24px; top:58px; bottom:-8px; width:8px; background:var(--white); }
}

/* ==========================================================================
   Por que a GLR
   ========================================================================== */
.why__grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--gray-200); border-left:1px solid var(--gray-200); }
.why{ padding:30px 28px 32px; border-right:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); transition:background-color .3s ease; }
.why:hover{ background:var(--white); }
.why__ico{ display:block; width:44px; height:44px; color:var(--navy); margin-bottom:20px; }
.why__ico svg{ width:44px; height:44px; }
.why__ico path, .why__ico rect, .why__ico circle, .why__ico line, .why__ico polyline{ stroke-dasharray:1; stroke-dashoffset:0; }
.why h3{ font-family:var(--font-body); font-weight:700; font-size:1.04rem; letter-spacing:0; margin-bottom:6px; }
.why p{ color:var(--gray-600); font-size:.95rem; }
@media (max-width:900px){ .why__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .why__grid{ grid-template-columns:1fr; } .why{ padding:24px 20px; } }

/* ==========================================================================
   Dúvidas (FAQ)
   ========================================================================== */
.faq__wrap{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px, 6vw, 88px); align-items:start; }
.faq__aside{ position:sticky; top:calc(var(--hdr-h) + 32px); }
.faq__aside .section-head{ margin-bottom:0; }
.faq__aside .btn{ margin-top:30px; }
.faq__list{ border-top:1px solid var(--gray-200); }
.faq__item{ border-bottom:1px solid var(--gray-200); }
.faq__item h3{ font-size:inherit; letter-spacing:0; }
.faq__q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; text-align:left; padding:22px 2px; font-family:var(--font-title); font-weight:600; font-size:clamp(1.02rem, 1.6vw, 1.18rem); letter-spacing:-.015em; color:var(--graphite); }
.faq__q:hover{ color:var(--navy); }
.faq__icon{ position:relative; flex:none; width:32px; height:32px; border-radius:50%; border:1.5px solid var(--gray-200); transition:background-color .3s ease, border-color .3s ease, transform .4s var(--ease); }
.faq__icon::before,.faq__icon::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; margin:-1px 0 0 -6px; background:currentColor; border-radius:2px; transition:transform .4s var(--ease); }
.faq__icon::after{ transform:rotate(90deg); }
.faq__item.is-open .faq__icon{ background:var(--navy); border-color:var(--navy); color:#fff; transform:rotate(180deg); }
.faq__item.is-open .faq__icon::after{ transform:rotate(0deg); }
.faq__a{ display:grid; grid-template-rows:1fr; }
.faq__a-in{ overflow:hidden; min-height:0; }
.faq__a p{ color:var(--gray-600); padding:0 48px 24px 2px; }
.faq__a p + p{ margin-top:-10px; }
/* Com JS, as respostas começam fechadas; sem JS ficam todas abertas. */
.js .faq__a{ transition:grid-template-rows .45s var(--ease), visibility .45s; }
.js .faq__item:not(.is-open) .faq__a{ grid-template-rows:0fr; visibility:hidden; }
.js .faq__item:not(.is-open) .faq__icon::after{ transform:rotate(90deg); }
.no-js-only{ display:none; }
@media (max-width:860px){ .faq__wrap{ grid-template-columns:1fr; } .faq__aside{ position:static; } .faq__a p{ padding-right:8px; } }

/* ==========================================================================
   CTA final
   ========================================================================== */
.final{ padding-block:clamp(24px, 4vw, 48px) clamp(72px, 10vw, 128px); }
.final__box{ position:relative; overflow:hidden; isolation:isolate; background:var(--navy); color:#fff; border-radius:28px; padding:clamp(48px, 8vw, 104px) clamp(24px, 6vw, 80px); text-align:center; }
.final__bg{ position:absolute; inset:-30% -5%; z-index:-1; background:var(--lines-light); }
.final__orb{ position:absolute; z-index:-1; border-radius:50%; pointer-events:none; }
.final__orb--a{ width:420px; height:420px; right:-120px; top:-160px; background:radial-gradient(circle, rgba(255,255,255,.14), transparent 65%); }
.final__orb--b{ width:180px; height:180px; left:6%; bottom:-70px; border:2px solid rgba(251,113,133,.6); }
.final h2{ color:#fff; font-size:clamp(2rem, 4.6vw, 3.4rem); max-width:18ch; margin:20px auto 0; }
.final p{ color:rgba(255,255,255,.82); max-width:50ch; margin:20px auto 34px; font-size:clamp(1.02rem, 1.5vw, 1.15rem); }
.final .btn-group{ justify-content:center; }
.final__meta{ margin-top:26px; font-size:.88rem; color:rgba(255,255,255,.62); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ background:var(--graphite); color:#fff; padding-block:clamp(52px,7vw,80px) 28px; }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px; }
.footer__logo{ height:44px; width:auto; margin-bottom:18px; }
.footer p{ color:var(--gray-400); font-size:.95rem; max-width:34ch; }
.footer h3{ font-family:var(--font-body); font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-400); margin-bottom:14px; }
.footer ul{ display:flex; flex-direction:column; gap:2px; }
.footer a{ color:#E2E8F0; display:inline-flex; align-items:center; gap:.55rem; padding-block:.3rem; font-size:.96rem; transition:color .2s ease; }
.footer a:hover{ color:#fff; }
.footer a svg{ width:18px; height:18px; opacity:.8; flex:none; }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:44px; padding-top:22px; display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; color:var(--gray-400); font-size:.86rem; }
.footer__bottom a{ font-size:.86rem; padding:0; color:var(--gray-300); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr; } .footer__grid > :first-child{ grid-column:1 / -1; } }
@media (max-width:480px){ .footer__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   WhatsApp flutuante
   ========================================================================== */
.wa-float{
  position:fixed; z-index:50; right:calc(18px + env(safe-area-inset-right)); bottom:calc(18px + env(safe-area-inset-bottom));
  width:58px; height:58px; border-radius:50%; background:var(--navy); color:#fff; display:none; place-items:center;
  box-shadow:0 14px 30px -8px rgba(30,58,138,.6), 0 2px 6px rgba(15,23,42,.15);
  transition:transform .45s var(--ease), opacity .3s ease, background-color .2s ease;
}
.wa-float svg{ width:28px; height:28px; }
.wa-float:hover{ background:var(--navy-700); }
.js .wa-float{ display:grid; opacity:0; transform:translateY(24px) scale(.8); pointer-events:none; visibility:hidden; }
.js .wa-float.is-on{ opacity:1; transform:none; pointer-events:auto; visibility:visible; }
.wa-float::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--navy); opacity:0; }
@media (prefers-reduced-motion:no-preference){
  .wa-float.is-on::after{ animation:ping 2.6s var(--ease) 1s 2; }
}
@keyframes ping{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(1.6); opacity:0; } }

/* ==========================================================================
   Páginas internas (serviços, privacidade)
   ========================================================================== */
.hero{ position:relative; overflow:hidden; isolation:isolate; padding-top:calc(var(--hdr-h) + clamp(48px, 8vw, 104px)); padding-bottom:clamp(56px, 8vw, 104px); }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--lines-dark);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 85% 30%, #000 10%, transparent 70%);
          mask-image:radial-gradient(ellipse 70% 80% at 85% 30%, #000 10%, transparent 70%);
}
.hero__copy{ max-width:800px; }
.hero h1{ margin:20px 0 22px; }
.hero .lead{ max-width:58ch; }
.hero .btn-group{ margin-top:34px; }
.back{ display:flex; width:max-content; align-items:center; gap:.4rem; font-size:.9rem; font-weight:600; color:var(--gray-500); margin-bottom:26px; transition:color .2s ease, gap .25s var(--ease); }
.back svg{ width:16px; height:16px; }
.back:hover{ color:var(--navy); gap:.6rem; }

.band-gray{ background:var(--gray-50); border-block:1px solid var(--gray-200); }

.features{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px; border-top:1px solid var(--gray-200); }
.feature{ display:flex; gap:16px; align-items:flex-start; padding:22px 0; border-bottom:1px solid var(--gray-200); }
.feature__check{ flex:none; width:30px; height:30px; border-radius:9px; background:var(--navy-50); color:var(--navy); display:flex; align-items:center; justify-content:center; margin-top:1px; }
.feature__check svg{ width:16px; height:16px; }
.feature h3{ font-family:var(--font-body); font-weight:700; font-size:1.02rem; letter-spacing:0; margin-bottom:3px; }
.feature p{ color:var(--gray-600); font-size:.95rem; }
@media (max-width:700px){ .features{ grid-template-columns:1fr; } }

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding:24px 22px; border:1px solid var(--gray-200); border-radius:var(--radius); background:var(--white); }
.step__n{ font-family:var(--font-title); font-weight:700; font-size:1rem; color:var(--white); width:40px; height:40px; border-radius:11px; background:var(--navy); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.step h3{ font-size:1.1rem; margin-bottom:6px; }
.step p{ color:var(--gray-600); font-size:.95rem; }

.cta-band{ position:relative; overflow:hidden; isolation:isolate; background:var(--navy); color:#fff; border-radius:24px; padding:clamp(40px,7vw,80px) clamp(24px,5vw,64px); text-align:center; }
.cta-band::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--lines-light); }
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.82); max-width:52ch; margin:16px auto 30px; }
.cta-band .btn-group{ justify-content:center; }

/* ---------- Páginas legais (privacidade, termos) ---------- */
.legal{ max-width:760px; }
.legal__meta{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:.86rem; color:var(--gray-500);
  border-block:1px solid var(--gray-200); padding-block:14px; margin-bottom:38px; }
.legal__meta b{ color:var(--graphite); font-weight:600; }
.legal h2{ font-family:var(--font-title); font-size:clamp(1.24rem,2.4vw,1.5rem); font-weight:600;
  color:var(--graphite); margin-top:46px; margin-bottom:12px; letter-spacing:-.015em; }
.legal h2 .legal__n{ color:var(--gray-500); font-weight:600; margin-right:.5rem; }
.legal h3{ font-family:var(--font-body); font-size:1rem; font-weight:700; color:var(--graphite);
  margin-top:26px; margin-bottom:8px; letter-spacing:0; }
.legal p{ color:var(--gray-600); margin-bottom:14px; }
.legal ul{ list-style:none; margin:0 0 16px; padding:0; }
.legal li{ position:relative; padding-left:20px; margin-bottom:9px; color:var(--gray-600); }
.legal li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--navy); }
.legal li b, .legal p b{ color:var(--graphite); font-weight:600; }
.legal a{ color:var(--navy); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

.legal__toc{ background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius);
  padding:22px 24px; margin-bottom:8px; }
.legal .legal__toc-h{ margin:0 0 12px; font-family:var(--font-body); font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gray-500); }
.legal__toc ol{ list-style:none; margin:0; padding:0; columns:2; column-gap:28px; }
@media (max-width:600px){ .legal__toc ol{ columns:1; } }
.legal__toc li{ padding-left:0; margin-bottom:7px; break-inside:avoid; }
.legal__toc li::before{ display:none; }
.legal__toc a{ font-weight:400; text-decoration:none; color:var(--gray-600); font-size:.94rem; }
.legal__toc a:hover{ color:var(--navy); text-decoration:underline; }
.legal__toc .legal__n{ color:var(--gray-500); margin-right:.45rem; }

.legal__key{ background:var(--gray-100); border-left:3px solid var(--navy); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:20px 24px; margin:0 0 34px; }
.legal__key p{ margin-bottom:0; color:var(--graphite); }

.legal__table{ width:100%; border-collapse:collapse; margin:6px 0 20px; font-size:.94rem; }
.legal__table th{ text-align:left; background:var(--gray-100); color:var(--graphite); font-weight:600;
  font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; padding:11px 14px; }
.legal__table td{ padding:11px 14px; border-bottom:1px solid var(--gray-200); color:var(--gray-600);
  vertical-align:top; }
.legal__table tr:last-child td{ border-bottom:none; }
@media (max-width:620px){
  .legal__table, .legal__table tbody, .legal__table tr, .legal__table td{ display:block; width:100%; }
  .legal__table thead{ display:none; }
  .legal__table tr{ border-bottom:1px solid var(--gray-200); padding-block:10px; }
  .legal__table td{ border:none; padding:3px 0; }
  .legal__table td:first-child{ color:var(--graphite); font-weight:600; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

/* ==========================================================================
   Ritmo de cores
   O site intercala faixas claras (azul-claro, céu, degradê com coral suave)
   e faixas escuras (marinho, grafite), sempre dentro da paleta da marca.
   As manchas de cor se movem devagar só com transform; com movimento
   reduzido elas ficam paradas.
   ========================================================================== */
:root{
  --tint:#EEF2FF;
  --tint-2:#F5F7FF;
  --sky:#F0F6FF;
  --blue-300:#93C5FD;
  --indigo-200:#C7D2FE;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

/* ---------- Manchas de cor animadas (hero) ---------- */
.mesh{ position:absolute; inset:0; z-index:-4; overflow:hidden; pointer-events:none; }
.mesh i{ position:absolute; display:block; border-radius:50%; will-change:transform; }
.mesh__a{ width:min(760px, 130vw); aspect-ratio:1; left:-18%; top:-34%; background:radial-gradient(circle, rgba(96,165,250,.30), rgba(96,165,250,0) 62%); animation:drift-a 22s ease-in-out infinite alternate; }
.mesh__b{ width:min(680px, 120vw); aspect-ratio:1; right:-14%; top:4%; background:radial-gradient(circle, rgba(30,58,138,.22), rgba(30,58,138,0) 64%); animation:drift-b 27s ease-in-out infinite alternate; }
.mesh__c{ width:min(600px, 110vw); aspect-ratio:1; left:26%; bottom:-42%; background:radial-gradient(circle, rgba(251,113,133,.24), rgba(251,113,133,0) 62%); animation:drift-c 31s ease-in-out infinite alternate; }
@keyframes drift-a{ to{ transform:translate3d(12%, 10%, 0) scale(1.15); } }
@keyframes drift-b{ to{ transform:translate3d(-14%, 12%, 0) scale(.9); } }
@keyframes drift-c{ to{ transform:translate3d(16%, -14%, 0) scale(1.2); } }
@keyframes spin{ to{ transform:rotate(360deg); } }

.hero-home, .hero{ background:var(--tint-2); }

/* ---------- Faixas claras ---------- */
.sec-tint{ --sec-bg:var(--tint); position:relative; isolation:isolate; background:linear-gradient(180deg, var(--tint) 0%, var(--tint-2) 100%); }
.sec-tint::before{
  content:""; position:absolute; z-index:-1; right:0; top:0; width:min(520px, 60vw); height:340px; pointer-events:none;
  background-image:radial-gradient(rgba(30,58,138,.16) 1.4px, transparent 1.6px); background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse at top right, #000 0, transparent 70%); mask-image:radial-gradient(ellipse at top right, #000 0, transparent 70%);
}
.sec-sky{ --sec-bg:var(--sky); position:relative; isolation:isolate; background:var(--sky); }
.sec-sky::before{
  content:""; position:absolute; z-index:-1; inset:0; pointer-events:none;
  background:radial-gradient(700px 380px at 50% 0%, rgba(96,165,250,.20), transparent 70%), radial-gradient(520px 320px at 100% 100%, rgba(251,113,133,.12), transparent 70%);
}
.band-gray{ background:linear-gradient(180deg, var(--tint) 0%, var(--tint-2) 100%); border-block:0; }

/* exemplos: degradê do azul-claro pro coral bem suave */
.ex{
  border-block:0;
  background:
    radial-gradient(820px 520px at 0% 0%, rgba(96,165,250,.22), transparent 62%),
    radial-gradient(760px 520px at 100% 100%, rgba(251,113,133,.18), transparent 62%),
    linear-gradient(135deg, var(--tint) 0%, #F8FAFC 55%, #FFF4F5 100%);
}

/* ---------- Faixas escuras ---------- */
.sec-navy, .sec-ink{ position:relative; isolation:isolate; overflow:hidden; color:#fff; }
.sec-navy{
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(96,165,250,.26), transparent 60%),
    radial-gradient(900px 520px at -8% 112%, rgba(251,113,133,.18), transparent 60%),
    linear-gradient(160deg, #1E3A8A 0%, #152a5f 100%);
}
.sec-ink{
  background:
    radial-gradient(1000px 560px at 8% -6%, rgba(30,58,138,.75), transparent 64%),
    radial-gradient(760px 460px at 104% 104%, rgba(251,113,133,.16), transparent 62%),
    var(--graphite);
}
.sec-navy::before, .sec-ink::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:var(--grain), var(--lines-light); }
.sec-navy::after, .sec-ink::after{
  content:""; position:absolute; z-index:-1; pointer-events:none; width:560px; height:560px; border-radius:50%;
  right:-160px; top:-180px; background:radial-gradient(circle, rgba(147,197,253,.24), transparent 66%);
  animation:drift-b 24s ease-in-out infinite alternate; will-change:transform;
}
.sec-ink::after{ right:auto; left:-180px; top:auto; bottom:-220px; background:radial-gradient(circle, rgba(251,113,133,.20), transparent 66%); animation-name:drift-a; }

.sec-navy .section-head h2, .sec-ink .section-head h2{ color:#fff; }
.sec-navy .section-head h2 em, .sec-ink .section-head h2 em{ color:var(--blue-300); }
.sec-navy .section-head .lead, .sec-ink .section-head .lead{ color:rgba(255,255,255,.78); }
.sec-navy .eyebrow, .sec-ink .eyebrow{ color:var(--indigo-200); }

/* serviços: cards brancos saltam do marinho */
.sec-navy .svc{ border-color:transparent; box-shadow:0 30px 60px -28px rgba(2,6,23,.55); }
.sec-navy .svc:hover{ box-shadow:0 40px 80px -30px rgba(2,6,23,.7); }
.sec-navy .step{ border-color:transparent; box-shadow:0 24px 50px -26px rgba(2,6,23,.55); }

/* por que a GLR no grafite */
.sec-ink .why__grid, .sec-ink .why{ border-color:rgba(255,255,255,.12); }
.sec-ink .why:hover{ background:rgba(255,255,255,.04); }
.sec-ink .why h3{ color:#fff; }
.sec-ink .why p{ color:rgba(255,255,255,.7); }
.sec-ink .why__ico{ color:var(--indigo-200); }
.sec-ink .why:nth-child(3n+2) .why__ico{ color:var(--coral); }

/* faixa de setores em marinho */
.mq{ background:linear-gradient(90deg, #152a5f 0%, #1E3A8A 50%, #152a5f 100%); border-block:0; }
.mq__label{ color:rgba(255,255,255,.62); }
.mq__list li{ color:#fff; }
.mq__list li.mq__more{ color:rgba(255,255,255,.45); }

/* antes e depois / como funciona / dúvidas sobre fundo colorido */
.sec-tint .ba__col--antes{ background:var(--white); }
.how__n{ box-shadow:0 0 0 8px var(--sec-bg, var(--white)); }
@media (max-width:860px){ .how__step:last-child::after{ background:var(--sec-bg, var(--white)); } }
.sec-tint .faq__list, .sec-tint .faq__item{ border-color:rgba(30,58,138,.14); }
.sec-tint .faq__icon{ background:var(--white); border-color:rgba(30,58,138,.18); }
.sec-tint .faq__item.is-open .faq__icon{ background:var(--navy); border-color:var(--navy); }

/* CTA final: brilho girando por trás do marinho */
.final__box{ background:linear-gradient(140deg, #152a5f 0%, #1E3A8A 55%, #2442A0 100%); }
.final__glow{
  position:absolute; z-index:-1; left:50%; top:50%; width:1200px; height:1200px; margin:-600px 0 0 -600px; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(251,113,133,.42) 55deg, transparent 120deg, rgba(96,165,250,.40) 200deg, transparent 265deg, rgba(255,255,255,.14) 320deg, transparent 360deg);
  -webkit-mask-image:radial-gradient(circle, #000 0, transparent 62%); mask-image:radial-gradient(circle, #000 0, transparent 62%);
  animation:spin 32s linear infinite; will-change:transform;
}

/* WhatsApp flutuante com anel branco: aparece sobre qualquer faixa */
.wa-float{ box-shadow:0 0 0 3px var(--white), 0 14px 30px -8px rgba(30,58,138,.6), 0 2px 6px rgba(15,23,42,.15); }

@media (prefers-reduced-motion:reduce){
  .mesh i, .sec-navy::after, .sec-ink::after, .final__glow{ animation:none !important; }
}

/* fecho da página: azul-claro descendo pro coral suave antes do rodapé */
.final{ background:linear-gradient(180deg, var(--tint-2) 0%, #FFF1F3 100%); }
.btn--ghost{ background:rgba(255,255,255,.72); }
.btn--ghost:hover{ background:var(--white); }
@media (max-width:640px){ .mesh__b{ opacity:.6; } }
.sec-end{ background:linear-gradient(180deg, var(--tint-2) 0%, #FFF1F3 100%); }
.cta-band{ background:linear-gradient(140deg, #152a5f 0%, #1E3A8A 55%, #2442A0 100%); }

/* ---------- Intensidade maior: serviços, exemplos e fecho ---------- */

/* serviços: dois brilhos grandes orbitando o marinho (azul e coral) */
#servicos{
  background:
    radial-gradient(1100px 620px at 90% -14%, rgba(96,165,250,.42), transparent 60%),
    radial-gradient(900px 560px at -10% 114%, rgba(251,113,133,.30), transparent 60%),
    linear-gradient(160deg, #1E3A8A 0%, #142a66 55%, #0F1F4D 100%);
}
#servicos::after{ display:none; }
.orbit{ position:absolute; z-index:-1; border-radius:50%; pointer-events:none; will-change:transform; }
.orbit--a{ width:min(900px, 140vw); aspect-ratio:1; right:-22%; top:-38%; background:radial-gradient(circle, rgba(147,197,253,.50), rgba(147,197,253,0) 62%); animation:orbit-a 18s ease-in-out infinite alternate; }
.orbit--b{ width:min(760px, 120vw); aspect-ratio:1; left:-20%; bottom:-46%; background:radial-gradient(circle, rgba(251,113,133,.40), rgba(251,113,133,0) 62%); animation:orbit-b 22s ease-in-out infinite alternate; }
@keyframes orbit-a{ 0%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(-28%, 22%, 0) scale(1.18); } 100%{ transform:translate3d(-48%, 6%, 0) scale(.95); } }
@keyframes orbit-b{ 0%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(30%, -26%, 0) scale(1.2); } 100%{ transform:translate3d(52%, -8%, 0) scale(1); } }

/* exemplos: azul e coral bem mais presentes */
.ex{
  background:
    radial-gradient(900px 600px at 0% 0%, rgba(96,165,250,.45), transparent 62%),
    radial-gradient(860px 600px at 100% 100%, rgba(251,113,133,.42), transparent 62%),
    linear-gradient(135deg, #DCE7FF 0%, #F3F0FB 50%, #FFE1E6 100%);
}
.ex__label{ background:var(--white); }

/* fecho: degradê mais forte e brilho girando mais intenso e um pouco mais rápido */
.final, .sec-end{ background:linear-gradient(180deg, #E3EBFF 0%, #F6E9F2 50%, #FFDCE3 100%); }
.final__box, .cta-band{ box-shadow:0 40px 90px -30px rgba(30,58,138,.55); }
.final__glow{
  width:1500px; height:1500px; margin:-750px 0 0 -750px;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(251,113,133,.62) 50deg, transparent 115deg, rgba(96,165,250,.6) 190deg, transparent 255deg, rgba(255,255,255,.2) 315deg, transparent 360deg);
  -webkit-mask-image:radial-gradient(circle, #000 0, transparent 68%); mask-image:radial-gradient(circle, #000 0, transparent 68%);
  animation-duration:20s;
}
/* garante leitura do texto por cima do brilho */
.final h2, .final p, .cta-band h2, .cta-band p{ text-shadow:0 2px 18px rgba(15,23,42,.35); }

@media (prefers-reduced-motion:reduce){ .orbit{ animation:none !important; } }

/* ---------- Exemplos: projeto real (captura de tela no lugar do mockup) ---------- */
.mock--shot{ display:block; transition:box-shadow .35s var(--ease), border-color .3s ease; }
.mock--shot .mock__body{ background:#F5F5F4; }
.mock--shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .7s var(--ease); }
.mock--shot:hover{ border-color:var(--gray-300); box-shadow:var(--shadow); }
.mock--shot:hover img{ transform:scale(1.04); }
.ex__label--live{ display:inline-flex; align-items:center; gap:.5rem; color:#166534; border-color:#BBF7D0; background:#F0FDF4; }
.ex__label--live::before{ content:""; width:7px; height:7px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.22); }
.ex__actions{ margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; }
.ex__body .ex__actions .btn{ margin-top:0; }
.mock--dark .mock__body{ background:#0A0A0A; }

/* ---------- Exemplos: sistema de gestão de boletos (mockup, sem link) ---------- */
.ex__label--private{ display:inline-flex; align-items:center; gap:.5rem; color:var(--navy); border-color:var(--indigo-200); background:var(--navy-50); }
.ex__label--private::before{ content:""; width:7px; height:7px; border-radius:2px; background:var(--navy); }
.mock__url--lock::before{ content:""; display:inline-block; width:7px; height:6px; margin-right:6px; border-radius:1.5px; background:var(--gray-400); box-shadow:0 -3px 0 -1px var(--white), 0 -4px 0 0 var(--gray-400); vertical-align:1px; }
.mk--erp{ display:grid; grid-template-columns:46px 1fr; background:#F7F9FC; color:#16213F; }
.mk--erp .mk-side{ background:#16213F; display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px 0; }
.mk--erp .mk-logo{ width:22px; height:22px; border-radius:6px; background:#3B6FE0; margin-bottom:6px; }
.mk--erp .mk-side i{ width:18px; height:4px; border-radius:2px; background:rgba(255,255,255,.22); }
.mk--erp .mk-side i.on{ background:#7FA6FF; }
.mk--erp .mk-main{ padding:12px 14px; display:flex; flex-direction:column; gap:9px; min-width:0; }
.mk--erp .mk-top{ display:flex; justify-content:space-between; align-items:center; }
.mk--erp .mk-cias{ display:flex; align-items:center; gap:8px; }
.mk--erp .mk-cias img{ height:24px; width:auto; }
.mk--erp .mk-ai{ font-size:.58rem; font-weight:700; color:#3B6FE0; background:#E6EEFF; border-radius:999px; padding:3px 8px; }
.mk--erp .mk-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.mk--erp .mk-kpis div{ background:#fff; border:1px solid #E3E8F2; border-radius:7px; padding:6px 7px; }
.mk--erp .mk-kpis small{ display:block; font-size:.54rem; color:#6B7690; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk--erp .mk-kpis b{ font-family:var(--font-title); font-size:.98rem; font-weight:700; }
.mk--erp .mk-kpis .warn b{ color:#C2410C; }
.mk--erp .mk-kpis .ok b{ color:#15803D; }
.mk--erp .mk-table{ background:#fff; border:1px solid #E3E8F2; border-radius:7px; overflow:hidden; }
.mk--erp .mk-tr{ display:grid; grid-template-columns:1.3fr .6fr 1fr auto; gap:6px; align-items:center; padding:6px 9px; font-size:.6rem; border-top:1px solid #EEF1F7; }
.mk--erp .mk-tr:first-child{ border-top:0; }
.mk--erp .mk-tr span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk--erp .mk-tr span:first-child{ font-weight:600; }
.mk--erp .st{ font-style:normal; font-size:.54rem; font-weight:700; border-radius:999px; padding:2px 7px; }
.mk--erp .st--pend{ background:#FEF3C7; color:#92400E; }
.mk--erp .st--auth{ background:#E6EEFF; color:#1E3A8A; }
.mk--erp .st--paid{ background:#DCFCE7; color:#166534; }
@media (max-width:560px){
  .mk--erp{ grid-template-columns:36px 1fr; }
  .mk--erp .mk-cias{ gap:6px; }
  .mk--erp .mk-cias img{ height:20px; }
  .mk--erp .mk-kpis{ grid-template-columns:repeat(3,1fr); }
  .mk--erp .mk-kpis div:nth-child(4){ display:none; }
  .mk--erp .mk-tr{ grid-template-columns:1fr auto auto; }
  .mk--erp .mk-tr span:nth-child(3){ display:none; }
}

/* ---------- Ajustes de toque e carrossel no celular ---------- */
/* sem o retângulo azul que o Android pinta ao tocar; o foco por teclado continua no :focus-visible */
html{ -webkit-tap-highlight-color:transparent; }

@media (max-width:1023px){
  /* cada card para centralizado, inclusive o primeiro e o último, com a ponta do vizinho aparecendo */
  .ex{ --ex-card:min(calc(100vw - 2 * (var(--pad) + 18px)), 440px); }
  .ex__track{
    gap:12px;
    padding-inline:calc((100vw - var(--ex-card)) / 2);
    scroll-padding-inline:0;
  }
  .ex__card{ flex:0 0 var(--ex-card); min-width:0; max-width:var(--ex-card); scroll-snap-align:center; scroll-snap-stop:always; }
  .ex__card .mock{ min-width:0; }
  /* captura de tela inteira, sem cortar as laterais */
  .mock--shot .mock__body{ height:auto; aspect-ratio:16 / 10; }
  .mock--shot img{ object-position:top left; }
  .mock--shot:hover img{ transform:none; }
}
@media (max-width:560px){
  /* o painel de boletos encolhe junto com o card em vez de vazar */
  .mk--erp{ grid-template-columns:36px minmax(0,1fr); }
  .mk--erp .mk-main{ padding:10px; }
  .mk--erp .mk-top{ gap:6px; min-width:0; }
  .mk--erp .mk-cias{ min-width:0; overflow:hidden; }
  .mk--erp .mk-cias img{ height:18px; }
  .mk--erp .mk-ai{ flex:none; white-space:nowrap; }
  .mk--erp .mk-kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mk--erp .mk-tr{ grid-template-columns:minmax(0,1fr) auto auto; }
  /* endereço na barra do navegador numa linha só */
  .mock__url{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* botões dos cards nunca passam da borda */
  .ex__actions .btn{ max-width:100%; white-space:normal; text-align:center; }
}
@media (max-width:560px){
  .ex__label{ letter-spacing:.08em; white-space:nowrap; }
  .mk--erp .mk-kpis{ gap:4px; }
  .mk--erp .mk-kpis div{ padding:5px 5px; }
  .mk--erp .mk-kpis small{ font-size:.5rem; letter-spacing:-.01em; }
}

/* ---------- Exemplos: alternar Site / Painel do dono ---------- */
/* Painel é tela ilustrativa (nada de print real do admin) e os valores ficam sempre ocultos. */
.ex__views{ position:relative; min-width:0; }
.ex__views [hidden]{ display:none !important; }
.ex__switch{ display:none; }
.js .ex__switch{ position:absolute; z-index:2; right:10px; bottom:10px; display:inline-flex; gap:2px; padding:3px;
  border-radius:999px; background:rgba(15,23,42,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 18px -6px rgba(15,23,42,.5); }
.ex__sw{ font-size:.72rem; font-weight:700; letter-spacing:.02em; color:rgba(255,255,255,.78); padding:6px 12px; border-radius:999px;
  min-height:30px; transition:background-color .25s ease, color .25s ease; }
.ex__sw:hover{ color:#fff; }
.ex__sw[aria-pressed="true"]{ background:#fff; color:var(--navy); }
.ex__sw:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.mk--admin{ display:grid; grid-template-columns:46px minmax(0,1fr); background:#F7F9FC; color:#16213F; }
.mk--admin .mk-side{ background:#16213F; display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px 0; }
.mk--admin .mk-logo{ width:22px; height:22px; border-radius:6px; background:#3B6FE0; margin-bottom:6px; }
.mk--admin .mk-side i{ width:18px; height:4px; border-radius:2px; background:rgba(255,255,255,.22); }
.mk--admin .mk-side i.on{ background:#7FA6FF; }
.mk--admin .mk-main{ padding:12px 14px 44px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.mk--admin .mk-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.mk--admin .mk-top b{ font-family:var(--font-title); font-size:.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk--admin .mk-hide{ flex:none; font-size:.56rem; font-weight:700; color:#6B7690; background:#EDF0F6; border-radius:999px; padding:3px 8px; }
.mk--admin .mk-hide::before{ content:""; display:inline-block; width:6px; height:5px; margin-right:5px; border-radius:1.5px; background:#8B95AD;
  box-shadow:0 -3px 0 -1px #EDF0F6, 0 -4px 0 0 #8B95AD; vertical-align:1px; }
.mk--admin .mk-tabs{ display:flex; gap:4px; overflow:hidden; }
.mk--admin .mk-tabs span{ flex:none; font-size:.56rem; font-weight:600; color:#6B7690; padding:3px 7px; border-radius:6px; }
.mk--admin .mk-tabs span.on{ background:#16213F; color:#fff; }
.mk--admin .mk-kpis{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.mk--admin .mk-kpis--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.mk--admin .mk-kpis div{ background:#fff; border:1px solid #E3E8F2; border-radius:7px; padding:6px 8px; min-width:0; }
.mk--admin .mk-kpis small{ display:block; font-size:.54rem; color:#6B7690; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk--admin .mk-kpis b{ font-family:var(--font-title); font-size:.9rem; font-weight:700; letter-spacing:.06em; color:#9AA4BC; }
.mk--admin .mk-chart{ flex:1; min-height:0; display:flex; flex-direction:column; gap:6px; background:#fff; border:1px solid #E3E8F2; border-radius:7px; padding:7px 9px; }
.mk--admin .mk-chart small{ font-size:.54rem; font-weight:600; color:#6B7690; }
.mk--admin .mk-cols{ flex:1; min-height:28px; display:flex; align-items:flex-end; gap:6px; border-bottom:1px solid #E3E8F2; }
.mk--admin .mk-cols i{ flex:1; border-radius:3px 3px 0 0; background:linear-gradient(#5B8BF0,#3B6FE0); }
.mk--admin .mk-cols i:nth-child(1){ height:38%; } .mk--admin .mk-cols i:nth-child(2){ height:55%; }
.mk--admin .mk-cols i:nth-child(3){ height:46%; } .mk--admin .mk-cols i:nth-child(4){ height:72%; }
.mk--admin .mk-cols i:nth-child(5){ height:60%; } .mk--admin .mk-cols i:nth-child(6){ height:88%; }
.mk--admin .mk-cols i:nth-child(7){ height:66%; background:linear-gradient(#FB9AAA,#FB7185); }
.mk--admin .mk-rows{ display:flex; flex-direction:column; justify-content:center; gap:7px; flex:1; }
.mk--admin .mk-rows p{ display:grid; grid-template-columns:42px 1fr; align-items:center; gap:8px; font-size:.56rem; font-weight:600; color:#16213F; }
.mk--admin .mk-rows i{ height:9px; border-radius:5px; background:linear-gradient(90deg,#3B6FE0,#5B8BF0); }
.mk--admin .mk-rows p:nth-child(1) i{ width:78%; } .mk--admin .mk-rows p:nth-child(2) i{ width:46%; background:linear-gradient(90deg,#FB7185,#FB9AAA); }
.mock--admin{ background:#F7F9FC; }

@media (max-height:780px){ .ex--pinned .mk--admin .mk-tabs{ display:none; } }
@media (max-width:1023px){
  .mock--admin .mock__body{ height:auto; aspect-ratio:16 / 10; }
}
@media (max-width:560px){
  .mk--admin{ grid-template-columns:30px minmax(0,1fr); }
  .mk--admin .mk-side{ gap:7px; padding:9px 0; }
  .mk--admin .mk-logo{ width:16px; height:16px; border-radius:4px; margin-bottom:3px; }
  .mk--admin .mk-side i{ width:13px; height:3px; }
  .mk--admin .mk-main{ padding:8px 8px 40px; gap:5px; }
  .mk--admin .mk-top b{ font-size:.7rem; }
  .mk--admin .mk-tabs{ display:none; }
  .mk--admin .mk-kpis{ gap:4px; }
  .mk--admin .mk-kpis div{ padding:4px 5px; }
  .mk--admin .mk-kpis small{ font-size:.48rem; }
  .mk--admin .mk-kpis b{ font-size:.74rem; }
  .mk--admin .mk-chart{ padding:5px 7px; gap:4px; }
  .js .ex__switch{ right:8px; bottom:8px; }
  .ex__sw{ padding:5px 11px; min-height:28px; }
}
@media (max-width:560px){
  /* no celular o seletor sobe para o canto de cima da tela, longe do gráfico */
  .js .ex__switch{ top:40px; bottom:auto; }
  .mk--admin .mk-main{ padding:8px 8px 8px; }
  .mk--admin .mk-top{ padding-right:112px; min-height:24px; }
  .mk--admin .mk-hide{ display:none; }
}

/* ---------- Seletor Site / Painel na barra do navegador (não cobre a tela) ---------- */
.js .ex__switch, .js .ex__switch[class]{ top:5px; right:8px; bottom:auto; padding:2px; }
.ex__sw{ padding:3px 10px; min-height:24px; font-size:.68rem; }
.js .ex__views .mock__bar{ padding-right:128px; }
.ex__views .mock__url{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:560px){
  .js .ex__switch{ top:4px; right:6px; }
  .ex__sw{ padding:3px 9px; min-height:26px; }
  .js .ex__views .mock__bar{ padding-right:118px; }
  .mk--admin .mk-top{ padding-right:0; }
  .mk--admin .mk-main{ padding:8px; }
}

/* ---------- Painel ilustrativo: Unity Barbearia (identidade do próprio sistema) ----------
   Tema escuro do painel real: #101010 / #1d1d1d, dourado do faturamento #b08600,
   verde e vermelho de entrada e saída, faixa de barbeiro azul/vermelho/branco. */
.mock--unity{ background:#101010; border-color:#2a2a28; }
.mk-u{ background:#101010; color:#f2f2ef; display:flex; flex-direction:column; gap:8px; padding:0 12px 12px; }
.mk-u__pole{ height:4px; margin:0 -12px; background:repeating-linear-gradient(115deg,#0a2bd4 0 9px,#fff 9px 13px,#fe0000 13px 22px,#fff 22px 26px); }
.mk-u__head{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding-top:4px; }
.mk-u__head b{ font-family:"Alfa Slab One","Rockwell","Roboto Slab","Georgia",serif; font-weight:400; font-size:.86rem; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-u__seg{ flex:none; display:flex; border:1px solid rgba(255,255,255,.22); border-radius:6px; overflow:hidden; }
.mk-u__seg i{ font-style:normal; font-family:"Oswald","Arial Narrow","Roboto Condensed",sans-serif; font-size:.54rem; letter-spacing:.12em; text-transform:uppercase; color:#8c8c87; padding:3px 7px; }
.mk-u__seg i.on{ background:#b08600; color:#101010; font-weight:700; }
.mk-u__tabs{ display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.09); padding-bottom:5px; overflow:hidden; }
.mk-u__tabs span{ flex:none; font-family:"Oswald","Arial Narrow","Roboto Condensed",sans-serif; font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:#8c8c87; }
.mk-u__tabs span.on{ color:#f2f2ef; box-shadow:0 7px 0 -5px #b08600; }
.mk-u__tabs em{ margin-left:auto; flex:none; font-style:normal; font-size:.5rem; color:#8c8c87; border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:1px 7px; }
.mk-u__grid{ flex:1; min-height:0; display:grid; grid-template-columns:1.1fr 1fr; gap:8px; }
.mk-u__fat{ min-width:0; display:flex; flex-direction:column; background:#1d1d1d; border:1px solid rgba(255,255,255,.09); border-radius:8px; padding:7px 9px; }
.mk-u__fat > small, .mk-u__sub small{ font-family:"Oswald","Arial Narrow","Roboto Condensed",sans-serif; font-size:.5rem; letter-spacing:.14em; text-transform:uppercase; color:#8c8c87; }
.mk-u__fat > b{ font-family:"Alfa Slab One","Rockwell","Roboto Slab","Georgia",serif; font-weight:400; font-size:1rem; color:#d8b23c; letter-spacing:.04em; }
.mk-u__bars{ flex:1; min-height:22px; display:flex; align-items:flex-end; gap:4px; margin:4px 0 6px; border-bottom:1px solid rgba(255,255,255,.13); }
.mk-u__bars i{ flex:1; background:#b08600; border-radius:2px 2px 0 0; }
.mk-u__bars i:nth-child(1){ height:42%; } .mk-u__bars i:nth-child(2){ height:64%; } .mk-u__bars i:nth-child(3){ height:50%; }
.mk-u__bars i:nth-child(4){ height:78%; } .mk-u__bars i:nth-child(5){ height:58%; } .mk-u__bars i:nth-child(6){ height:96%; }
.mk-u__bars i:nth-child(7){ height:70%; }
.mk-u__sub{ display:flex; gap:10px; }
.mk-u__sub span{ display:flex; flex-direction:column; }
.mk-u__sub em{ font-style:normal; font-size:.62rem; font-weight:700; letter-spacing:.06em; }
.mk-u__sub .out{ color:#c0564a; } .mk-u__sub .in{ color:#7da05e; }
.mk-u__list{ min-width:0; display:flex; flex-direction:column; background:#1d1d1d; border:1px solid rgba(255,255,255,.09); border-radius:8px; padding:2px 8px; }
.mk-u__list li{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:6px; padding:6px 0; border-top:1px solid rgba(255,255,255,.07); font-size:.56rem; }
.mk-u__list li:first-child{ border-top:0; }
.mk-u__list span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#f2f2ef; }
.mk-u__list em{ font-style:normal; font-family:"Oswald","Arial Narrow","Roboto Condensed",sans-serif; font-size:.48rem; letter-spacing:.1em; text-transform:uppercase; color:#8c8c87; border:1px solid rgba(255,255,255,.14); border-radius:4px; padding:1px 4px; }
.mk-u__list b{ color:#7da05e; font-weight:700; letter-spacing:.05em; }

/* ---------- Painel ilustrativo: Arena Royal (direção "Placar" da marca) ----------
   Preto #08090b, cards #121417 / borda #2c2e32, azul royal #013EF5 sólido,
   #4d7bff para texto azul, linhas de campo a 114°, numeral vazado, células de placar. */
.mock--royal{ background:#08090b; border-color:#2c2e32; }
.mk-r{ position:relative; isolation:isolate; background:#08090b; color:#f8f8f8; display:flex; flex-direction:column; gap:8px; padding:10px 12px 12px;
  background-image:repeating-linear-gradient(114deg, rgba(255,255,255,.055) 0 1px, transparent 1px 34px); }
.mk-r__num{ position:absolute; z-index:-1; right:-6px; bottom:-34px; font-family:"Bebas Neue",Impact,"Oswald","Arial Narrow",sans-serif; font-size:9.5rem; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.1); }
.mk-r__head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.mk-r__head b{ font-family:"Bebas Neue",Impact,"Oswald","Arial Narrow",sans-serif; font-weight:400; font-size:1.2rem; letter-spacing:.03em; text-transform:uppercase; line-height:1; }
.mk-r__head small, .mk-r__placar small, .mk-r__turnos small, .mk-r__hoje small, .mk-r__tabs span{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; font-size:.48rem; letter-spacing:.16em; text-transform:uppercase; color:#9b9ea5; white-space:nowrap; }
.mk-r__tabs{ display:flex; gap:4px; }
.mk-r__tabs span{ padding:3px 8px; border:1px solid #2c2e32; border-radius:4px; }
.mk-r__tabs span.on{ background:#013EF5; border-color:#013EF5; color:#fcfcfc; }
.mk-r__placar{ display:grid; grid-template-columns:1fr 1.4fr; background:#121417; border:1px solid #2c2e32; border-radius:8px; }
.mk-r__placar div{ padding:6px 10px; display:flex; flex-direction:column; gap:1px; }
.mk-r__placar div + div{ border-left:1px solid #2c2e32; }
.mk-r__placar b{ font-family:"Bebas Neue",Impact,"Oswald","Arial Narrow",sans-serif; font-weight:400; font-size:1.25rem; letter-spacing:.08em; line-height:1.05; color:#f8f8f8; }
.mk-r__placar div + div b{ color:#4d7bff; }
.mk-r__turnos{ display:flex; flex-direction:column; gap:5px; }
.mk-r__turnos p{ display:grid; grid-template-columns:52px 1fr; align-items:center; gap:8px; }
.mk-r__turnos i{ height:8px; border-radius:2px; background:#013EF5; }
.mk-r__turnos p:nth-child(1) i{ width:46%; } .mk-r__turnos p:nth-child(2) i{ width:88%; background:#2b62ef; }
.mk-r__hoje{ margin-top:auto; display:flex; align-items:center; gap:4px; }
.mk-r__hoje small{ margin-right:4px; }
.mk-r__hoje span{ flex:1; text-align:center; font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; font-size:.5rem; letter-spacing:.06em; color:#9b9ea5; border:1px solid #2c2e32; border-radius:4px; padding:3px 0; }
.mk-r__hoje span.on{ background:#013EF5; border-color:#013EF5; color:#fcfcfc; }

@media (max-height:780px){
  .ex--pinned .mk-u__list li:nth-child(4){ display:none; }
  .ex--pinned .mk-r__tabs{ display:none; }
}
@media (max-width:1023px){
  .mock--unity .mock__body, .mock--royal .mock__body{ height:auto; aspect-ratio:16 / 10; }
}
@media (max-width:560px){
  .mk-u{ padding:0 8px 8px; gap:5px; }
  .mk-u__pole{ margin:0 -8px; height:3px; }
  .mk-u__head b{ font-size:.7rem; }
  .mk-u__tabs{ display:none; }
  .mk-u__grid{ grid-template-columns:1.15fr 1fr; gap:5px; }
  .mk-u__fat{ padding:5px 7px; }
  .mk-u__fat > b{ font-size:.8rem; }
  .mk-u__list li{ padding:4px 0; font-size:.5rem; gap:4px; }
  .mk-u__list li:nth-child(4){ display:none; }
  .mk-u__list em{ display:none; }
  .mk-r{ padding:7px 8px 8px; gap:5px; }
  .mk-r__head b{ font-size:.95rem; }
  .mk-r__head small{ display:none; }
  .mk-r__tabs{ display:none; }
  .mk-r__placar b{ font-size:1rem; }
  .mk-r__placar div{ padding:4px 8px; }
  .mk-r__num{ font-size:7rem; bottom:-26px; }
}

/* ---------- Painel ilustrativo: Caminhão de Prêmios (sorteio por cupons do Grupo Santa Fé) ----------
   Identidade do próprio sistema: azul #001860/#183078, vermelho #c03018, dourado #e0a020,
   verde #0f7a44, Barlow Condensed (servida daqui, licença OFL em fonts/LICENCA-OFL-barlow.txt).
   Sem dado de participante: nome, CPF, cupom e ganhador sempre ocultos. */
@font-face{ font-family:'Barlow Condensed'; src:url('../fonts/barlow-condensed-700-latin.woff2') format('woff2'); font-weight:700; font-display:swap; }
.mock--cp{ background:#eef1f6; }
.mk-cp{ display:flex; flex-direction:column; background:#eef1f6; color:#1a1a1a; }
.mk-cp__hdr{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px; background:#001860; padding:6px 12px; border-bottom:3px solid #c03018; }
.mk-cp__hdr b{ font-family:'Barlow Condensed',"Arial Narrow",sans-serif; font-weight:700; font-size:.92rem; letter-spacing:.04em; text-transform:uppercase; color:#fff; white-space:nowrap; }
.mk-cp__hdr b span{ color:#e0a020; }
.mk-cp__hdr img{ height:24px; width:auto; }
.mk-cp small{ font-family:'Barlow Condensed',"Arial Narrow",sans-serif; font-weight:700; font-size:.54rem; letter-spacing:.1em; text-transform:uppercase; color:#606060; }

/* balcão: ficha do cliente */
.mk-cp__balcao{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); grid-template-rows:auto 1fr; gap:8px; padding:9px 12px 11px; }
.mk-cp__busca{ grid-column:1 / -1; font-size:.6rem; color:#8a8f99; background:#fff; border:1px solid #d0d4dc; border-radius:5px; padding:5px 9px; }
.mk-cp__busca::before{ content:""; display:inline-block; width:7px; height:7px; margin-right:6px; border:1.5px solid #8a8f99; border-radius:50%; vertical-align:-1px; }
.mk-cp__ficha{ position:relative; min-width:0; display:flex; flex-direction:column; gap:4px; background:#fff; border:1px solid #d0d4dc; border-radius:8px; padding:8px 10px; box-shadow:0 2px 8px rgba(0,24,96,.06); }
.mk-cp__quem{ display:flex; flex-direction:column; min-width:0; padding-right:84px; }
.mk-cp__quem b{ font-family:'Barlow Condensed',"Arial Narrow",sans-serif; font-weight:700; font-size:.82rem; color:#183078; letter-spacing:.06em; }
.mk-cp__quem small{ text-transform:none; letter-spacing:.04em; font-weight:400; font-family:inherit; }
.mk-cp__selo{ position:absolute; top:8px; right:8px; font-size:.52rem; font-weight:700; color:#0f7a44; background:#eaf3ec; border:1px solid #b8ddc4; border-radius:999px; padding:2px 7px; white-space:nowrap; }
.mk-cp__saldo{ display:flex; flex-direction:column; margin-top:2px; }
.mk-cp__saldo b{ font-family:'Barlow Condensed',"Arial Narrow",sans-serif; font-weight:700; font-size:1.35rem; line-height:1; color:#183078; letter-spacing:.04em; }
.mk-cp__meta{ height:7px; border-radius:4px; background:#f1f3f8; overflow:hidden; }
.mk-cp__meta i{ display:block; width:34%; height:100%; background:#e0a020; border-radius:4px; }
.mk-cp__meta-t{ text-transform:none !important; letter-spacing:.02em !important; font-weight:400 !important; font-family:inherit !important; font-size:.52rem !important; }
.mk-cp__cupons{ min-width:0; display:flex; flex-direction:column; gap:5px; }
.mk-cp__cupons i{ font-style:normal; font-family:'Barlow Condensed',"Arial Narrow",sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.06em; color:#183078; background:#fff; border:1px dashed #183078; border-radius:5px; padding:5px 8px; }
.mk-cp__cupons i.ok{ margin-top:auto; text-align:center; color:#fff; background:#183078; border-style:solid; letter-spacing:.04em; }

/* telão do sorteio */
.mk-cp--telao{ background:radial-gradient(120% 90% at 50% 0%, #183078 0%, #001860 70%); color:#fff; }
.mk-cp__telao{ flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:10px 12px; text-align:center; }
.mk-cp__telao > small{ color:#e0a020; }
.mk-cp__cupom{ font-family:'Barlow Condensed',"Arial Narrow",sans-serif; font-weight:700; font-size:2.3rem; letter-spacing:.06em; line-height:1; color:#fff; text-shadow:0 2px 0 #c03018; }
.mk-cp__ganhador{ font-size:.66rem; color:rgba(255,255,255,.8); letter-spacing:.04em; }
.mk-cp__stats{ margin-top:8px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; width:100%; }
.mk-cp__stats p{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:6px; padding:4px 6px; display:flex; flex-direction:column; }
.mk-cp__stats small{ color:rgba(255,255,255,.62); font-size:.5rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-cp__stats b{ font-family:'Barlow Condensed',"Arial Narrow",sans-serif; font-weight:700; font-size:.82rem; color:#e0a020; }

@media (max-width:1023px){ .mock--cp .mock__body{ height:auto; aspect-ratio:16 / 10; } }
@media (max-width:560px){
  .mk-cp__hdr{ padding:4px 8px; border-bottom-width:2px; }
  .mk-cp__hdr b{ font-size:.72rem; }
  .mk-cp__hdr img{ height:16px; }
  .mk-cp__balcao{ padding:6px 8px 8px; gap:5px; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
  .mk-cp__busca{ display:none; }
  .mk-cp__ficha{ padding:6px 8px; gap:3px; }
  .mk-cp__quem{ padding-right:0; }
  .mk-cp__quem b{ font-size:.68rem; }
  .mk-cp__selo{ position:static; align-self:flex-start; font-size:.48rem; padding:1px 6px; }
  .mk-cp__saldo b{ font-size:1.05rem; }
  .mk-cp__meta-t{ display:none; }
  .mk-cp__cupons{ gap:4px; }
  .mk-cp__cupons small{ display:none; }
  .mk-cp__cupons i{ font-size:.6rem; padding:4px 6px; }
  .mk-cp__cupom{ font-size:1.6rem; }
  .mk-cp__stats{ margin-top:4px; gap:4px; }
}