/* ==========================================================================
   ZW CRACHÁS
   Design system + folha de estilo principal
   Paleta tirada da logo: azul-aço #6684BA, lavanda #C6CCE4, branco e o
   grafite da sombra. O motivo gráfico são as pernas inclinadas do W
   (paralelogramos a -21°), usadas em faixas e marcações.
   Cantos quase retos: 4 a 8 px. Só o crachá tem o raio do cartão CR80.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root{
  --brand:      #6684BA;   /* azul da logo */
  --brand-300:  #93A8D1;
  --brand-600:  #4D68A0;   /* texto e botões (contraste AA com branco) */
  --brand-700:  #3F5890;
  --brand-800:  #2E4373;
  --lav:        #C6CCE4;   /* lavanda da logo */
  --lav-200:    #DADFEF;
  --lav-100:    #E8EBF5;
  --lav-50:     #F5F6FB;

  --ink:        #1D2333;   /* grafite, puxado da sombra da logo */
  --ink-2:      #33394B;
  --muted:      #5C6377;
  --muted-2:    #8A90A3;
  --line:       #E1E4EE;
  --white:      #FFFFFF;
  --wa:         #1FAF5A;

  --blue-grad:  linear-gradient(155deg, #6A87BD 0%, #587AB2 45%, #4D68A0 100%);

  --font:       'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --fs-mono:  clamp(.7rem, .67rem + .12vw, .78rem);
  --fs-body:  clamp(1rem, .97rem + .18vw, 1.1rem);
  --fs-lead:  clamp(1.08rem, 1rem + .4vw, 1.3rem);
  --fs-h4:    clamp(1.12rem, 1.05rem + .32vw, 1.32rem);
  --fs-h3:    clamp(1.3rem, 1.16rem + .6vw, 1.75rem);
  --fs-h2:    clamp(1.85rem, 1.45rem + 1.7vw, 3.05rem);
  --fs-h1:    clamp(2.35rem, 1.6rem + 3.2vw, 4.5rem);

  --sp-section: clamp(4rem, 2.8rem + 5vw, 8rem);
  --gutter:     clamp(1.15rem, .7rem + 2vw, 2.5rem);
  --container:  1220px;

  --r-sm: 3px; --r: 4px; --r-lg: 6px; --r-xl: 8px;

  --sh-sm: 0 1px 2px rgba(29,35,51,.06), 0 2px 8px rgba(29,35,51,.04);
  --sh:    0 10px 30px -12px rgba(46,67,115,.22), 0 2px 8px rgba(29,35,51,.05);
  --sh-lg: 0 30px 60px -24px rgba(46,67,115,.35), 0 10px 24px -14px rgba(29,35,51,.16);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --header-h: 78px;
}

/* ---------------------------------------------------------------- 2. RESET */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font); font-size:var(--fs-body); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.08; font-weight:800; letter-spacing:-.022em; font-stretch:112%; }
h1{ font-size:var(--fs-h1); letter-spacing:-.035em; }
h2{ font-size:var(--fs-h2); letter-spacing:-.03em; }
h3{ font-size:var(--fs-h3); }
h4{ font-size:var(--fs-h4); }
p{ margin:0 0 1em; }
::selection{ background:var(--lav); color:var(--ink); }
:focus-visible{ outline:2.5px solid var(--brand-600); outline-offset:3px; }
.sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{ position:absolute; left:1rem; top:-100px; z-index:200; background:var(--ink); color:#fff; padding:.7rem 1rem; }
.skip-link:focus{ top:1rem; }

/* -------------------------------------------------------------- 3. LAYOUT */
.container{ width:100%; max-width:calc(var(--container) + var(--gutter)*2); margin:0 auto; padding:0 var(--gutter); }
.section{ padding:var(--sp-section) 0; position:relative; }
.section--tint{ background:var(--lav-50); }
.section--blue{ background:var(--blue-grad); color:#fff; overflow:hidden; isolation:isolate; }
.section--tight{ padding:calc(var(--sp-section)*.55) 0; }
.section--blue::before,.section--blue::after{
  content:""; position:absolute; z-index:-1; top:-20%; height:140%; width:180px; transform:skewX(-21deg);
  background:rgba(255,255,255,.07);
}
.section--blue::before{ right:14%; }
.section--blue::after{ right:calc(14% + 220px); width:90px; background:rgba(198,204,228,.12); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.9rem; margin:0 0 1.1rem;
  font-family:var(--font-mono); font-size:var(--fs-mono); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand-600);
}
.eyebrow::before{ content:""; width:8px; height:14px; transform:skewX(-21deg); background:var(--brand); box-shadow:6px 0 0 var(--lav); }
.section--blue .eyebrow{ color:#fff; }
.section--blue .eyebrow::before{ background:#fff; box-shadow:6px 0 0 var(--lav); }
.lead{ font-size:var(--fs-lead); color:var(--muted); line-height:1.6; max-width:62ch; }
.section--blue .lead{ color:#E6EAF6; }
.section-head{ max-width:780px; margin-bottom:clamp(2.2rem, 1.6rem + 2vw, 3.6rem); }
.section-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head--center .lead{ margin-left:auto; margin-right:auto; }
.section-head--center .eyebrow{ justify-content:center; }
/* destaque: marca-texto lavanda inclinada, como a perna do W */
.mark{ color:var(--brand-600); }
.section--blue .mark{ color:#fff; }
.link{ color:var(--brand-600); font-weight:600; text-decoration:underline; text-decoration-color:var(--lav); text-underline-offset:3px; }

.grid{ display:grid; gap:clamp(1rem, .7rem + 1.2vw, 1.75rem); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:980px){ .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .grid-3{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------- 4. BOTÕES */
.btn{
  --bg:var(--brand-600); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:50px; padding:.8rem 1.35rem; border:0; border-radius:var(--r-lg);
  background:var(--bg); color:var(--fg); font-weight:700; font-size:1rem; letter-spacing:.005em; font-stretch:105%;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(46,67,115,.7); }
.btn:active{ transform:translateY(0); }
.btn svg{ flex:none; overflow:visible; }
.btn--wa{ --bg:var(--wa); }
.btn--wa:hover{ box-shadow:0 14px 28px -14px rgba(31,175,90,.7); background:#1a9d50; }
.btn--light{ --bg:#fff; --fg:var(--brand-700); }
.btn--ghost{ --bg:#fff; --fg:var(--ink); box-shadow:inset 0 0 0 1.5px var(--lav); }
.btn--ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--brand); }
.btn--ghost-light{ --bg:rgba(255,255,255,.1); --fg:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45); }
.btn--ghost-light:hover{ box-shadow:inset 0 0 0 1.5px #fff; }
.btn--sm{ min-height:42px; padding:.55rem 1rem; font-size:.94rem; }
.btn--lg{ min-height:56px; padding:.95rem 1.6rem; font-size:1.05rem; }
.btn--block{ width:100%; white-space:normal; text-align:center; }
.link-arrow{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; color:var(--brand-600); }
.link-arrow svg{ transition:transform .25s var(--ease); }
.link-arrow:hover svg{ transform:translateX(4px); }
@media (max-width:560px){ .btn--lg{ white-space:normal; text-align:center; padding:.9rem 1.1rem; font-size:1rem; } }

/* -------------------------------------------------------------- 5. HEADER */
.header{
  position:sticky; top:0; z-index:90; height:var(--header-h);
  background:rgba(255,255,255,.86); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s, box-shadow .3s;
}
.header.is-scrolled{ border-bottom-color:var(--line); background:rgba(255,255,255,.96); box-shadow:0 6px 20px -16px rgba(46,67,115,.4); }
.header__in{ height:100%; display:flex; align-items:center; gap:1.5rem; }
.brand{ display:inline-flex; align-items:center; flex:none; }
.brand img{ height:56px; width:auto; }
.nav{ display:flex; gap:.2rem; list-style:none; margin:0 0 0 auto; padding:0; }
.nav a{ position:relative; display:block; padding:.55rem .9rem; font-weight:600; font-size:.98rem; color:var(--ink-2); transition:color .2s; }
.nav a::after{ content:""; position:absolute; left:.9rem; right:.9rem; bottom:.2rem; height:3px; background:var(--brand); transform:scaleX(0) skewX(-21deg); transform-origin:left; transition:transform .3s var(--ease); }
.nav a:hover{ color:var(--brand-600); }
.nav a:hover::after, .nav a[aria-current="page"]::after{ transform:scaleX(1) skewX(-21deg); }
.nav a[aria-current="page"]{ color:var(--brand-600); }
.header__cta{ display:flex; align-items:center; gap:.6rem; }
.header__phone{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; font-size:.95rem; color:var(--ink-2); padding:0 .4rem; }
.burger{ display:none; width:44px; height:44px; border:0; border-radius:var(--r); background:var(--lav-100); position:relative; }
.burger span,.burger span::before,.burger span::after{ position:absolute; left:12px; width:20px; height:2px; background:var(--ink); content:""; }
.burger span{ top:21px; }
.burger span::before{ left:0; top:-6px; }
.burger span::after{ left:0; top:6px; }
@media (max-width:1060px){ .header__phone{ display:none; } }
@media (max-width:860px){ .nav{ display:none; } .burger{ display:block; } .header__cta{ margin-left:auto; } .brand img{ height:50px; } }
@media (max-width:440px){ .header__cta .btn{ display:none; } }

.drawer{ position:fixed; inset:0; z-index:120; visibility:hidden; overflow:hidden; }
.drawer.is-open{ visibility:visible; }
.drawer__scrim{ position:absolute; inset:0; background:rgba(29,35,51,.4); opacity:0; transition:opacity .3s; }
.drawer.is-open .drawer__scrim{ opacity:1; }
.drawer__panel{ position:absolute; right:0; top:0; bottom:0; width:min(88vw,380px); background:#fff; display:flex; flex-direction:column; padding:1.2rem 1.4rem 1.6rem; transform:translateX(100%); transition:transform .4s var(--ease-out); overflow-y:auto; }
.drawer.is-open .drawer__panel{ transform:none; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.4rem; }
.drawer__close{ width:44px; height:44px; border:0; border-radius:var(--r); background:var(--lav-100); display:grid; place-items:center; }
.drawer__nav a{ display:flex; justify-content:space-between; align-items:center; padding:1rem .2rem; border-bottom:1px solid var(--line); font-weight:700; font-size:1.2rem; font-stretch:110%; }
.drawer__nav a[aria-current="page"]{ color:var(--brand-600); }
.drawer__foot{ margin-top:auto; padding-top:1.5rem; display:grid; gap:.7rem; }
.drawer__contact{ font-size:.95rem; color:var(--muted); display:grid; gap:.35rem; margin-top:.5rem; }

/* ---------------------------------------------------------------- 6. HERO */
.hero{ position:relative; overflow:hidden; background:linear-gradient(180deg, #FFFFFF 0%, var(--lav-50) 60%, var(--lav-100) 100%); isolation:isolate; }
.bands{ position:absolute; z-index:-1; inset:0; pointer-events:none; }
.bands span{ position:absolute; top:-10%; height:130%; transform:skewX(-21deg); }
.bands span:nth-child(1){ right:6%; width:230px; background:linear-gradient(180deg, rgba(198,204,228,.6), rgba(198,204,228,.18)); }
.bands span:nth-child(2){ right:calc(6% + 260px); width:110px; background:linear-gradient(180deg, rgba(102,132,186,.18), rgba(102,132,186,.04)); }
.bands span:nth-child(3){ right:-120px; width:160px; background:linear-gradient(180deg, rgba(102,132,186,.14), rgba(102,132,186,0)); }
.hero__in{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); align-items:center; gap:clamp(1rem, 3vw, 3rem); min-height:min(860px, calc(100svh - var(--header-h))); }
.hero__copy{ padding:clamp(3rem, 5vw, 4.5rem) 0; position:relative; z-index:2; }
.hero__chip{
  display:inline-flex; align-items:center; gap:.7rem; padding:.3rem .9rem .3rem .3rem; margin-bottom:1.6rem;
  background:#fff; box-shadow:inset 0 0 0 1px var(--lav), var(--sh-sm); border-radius:var(--r);
  font-family:var(--font-mono); font-size:var(--fs-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.hero__chip b{ white-space:nowrap; font-weight:500; padding:.22rem .6rem; border-radius:var(--r-sm); background:var(--brand-600); color:#fff; }
.hero h1{ margin-bottom:1.4rem; max-width:13ch; }
.hero__lead{ font-size:var(--fs-lead); color:var(--muted); max-width:50ch; margin-bottom:2.2rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:3rem; }
.hero__facts{ display:grid; grid-template-columns:repeat(3,auto); justify-content:start; gap:clamp(1.2rem, 3vw, 2.8rem); padding-top:1.8rem; border-top:1px solid var(--lav); }
.fact b{ display:block; font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); font-weight:800; font-stretch:115%; letter-spacing:-.03em; line-height:1.05; color:var(--brand-600); }
.fact span{ display:block; margin-top:.35rem; font-family:var(--font-mono); font-size:var(--fs-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.hero__stage-wrap{ position:relative; align-self:stretch; min-height:620px; }
.hero__stage-wrap .stage{ position:absolute; inset:0 -8vw 0 -2vw; }
.hero__hint{
  position:absolute; z-index:3; right:8%; bottom:7%; display:flex; align-items:center; gap:.55rem;
  font-family:var(--font-mono); font-size:var(--fs-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--brand-600);
  pointer-events:none; transition:opacity .6s;
}
.hero__hint.is-hidden{ opacity:0; }
.hero__hint i{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#fff; box-shadow:inset 0 0 0 1px var(--lav); animation:pulse 2.2s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:inset 0 0 0 1px var(--lav), 0 0 0 0 rgba(102,132,186,.35); } 50%{ box-shadow:inset 0 0 0 1px var(--brand), 0 0 0 10px rgba(102,132,186,0); } }
@media (max-width:980px){
  .hero__in{ grid-template-columns:1fr; min-height:0; gap:0; }
  .hero__copy{ padding-bottom:0; }
  .hero__stage-wrap{ min-height:560px; margin:0 calc(var(--gutter) * -1); }
  .hero__stage-wrap .stage{ inset:0; }
  .hero__hint{ right:50%; transform:translateX(50%); bottom:1.2rem; }
}
@media (max-width:560px){ .hero__actions .btn{ width:100%; } }
@media (max-width:520px){
  .hero__chip{ font-size:.64rem; letter-spacing:.04em; }
  .hero .badge{ --bw:204px; }
  .hero__facts{ grid-template-columns:repeat(3,1fr); gap:.9rem; }
  .fact span{ font-size:.64rem; }
}

/* -------------------------------------------------- 7. STAGE / CRACHÁ 3D */
.stage{ position:relative; overflow:hidden; user-select:none; -webkit-user-select:none; }
.stage canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hang{ position:absolute; left:0; top:0; z-index:2; transform-origin:50% 0; will-change:transform; perspective:1100px; touch-action:none; cursor:grab; visibility:hidden; }
.stage.is-ready .hang{ visibility:visible; }
.hang.is-grabbing{ cursor:grabbing; }
.hang:focus-visible{ outline:none; }
.hang:focus-visible .badge__front{ box-shadow:0 0 0 3px var(--brand-600); }
.clip{ position:relative; z-index:3; width:34px; height:40px; margin:0 auto -9px; }
.clip svg{ width:100%; height:100%; overflow:visible; }

.badge{
  --a:var(--brand-600); --b:var(--brand); --c:var(--lav); --txt:var(--ink);
  --bw:228px;
  position:relative; width:var(--bw); aspect-ratio:54/85.6; transform-style:preserve-3d; font-family:var(--font); color:var(--txt);
}
.badge--h{ --bw:340px; aspect-ratio:85.6/54; }
.badge__face{
  position:absolute; inset:0; border-radius:calc(var(--bw) * .062); overflow:hidden;
  background:#fff; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 0 0 1px rgba(29,35,51,.07), 0 22px 44px -20px rgba(29,35,51,.45), 0 6px 14px -8px rgba(29,35,51,.25);
}
.badge__face::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:5;
  background:linear-gradient(118deg, transparent calc(var(--sh, 40%) - 22%), rgba(255,255,255,.5) var(--sh, 40%), transparent calc(var(--sh, 40%) + 22%));
  mix-blend-mode:soft-light;
}
.badge__back{ transform:rotateY(180deg); }
.badge__slot{ position:absolute; z-index:4; left:50%; top:4.2%; width:30%; height:3.6%; transform:translateX(-50%); border-radius:99px; background:#2A3042; box-shadow:inset 0 1px 2px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.35); }
.badge--h .badge__slot{ top:7%; width:20%; height:5.8%; }
.bf{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; text-align:center; }
.bf__band{ position:absolute; left:0; right:0; top:0; height:42%; background:var(--a); overflow:hidden; }
.bf__band::before,.bf__band::after{ content:""; position:absolute; top:-10%; height:140%; width:34%; transform:skewX(-21deg); }
.bf__band::before{ right:4%; background:var(--b); opacity:.9; }
.bf__band::after{ right:-22%; background:var(--c); opacity:.95; }
.bf__side,.bf__main{ display:contents; }
.bf__logo{ position:relative; z-index:2; margin-top:15%; height:15%; width:100%; display:flex; align-items:center; justify-content:center; padding:0 12%; }
.bf__logo img{ height:100%; max-width:100%; width:auto; object-fit:contain; }
.bf__logo span{ color:#fff; font-weight:800; font-stretch:118%; font-size:calc(var(--bw) * .082); letter-spacing:-.02em; line-height:1; text-transform:uppercase; }
.bf__photo{ position:relative; z-index:2; width:40%; aspect-ratio:3/3.6; margin-top:4%; border-radius:calc(var(--bw) * .03); background:linear-gradient(160deg,#EEF0F8,#D6DBEC); box-shadow:0 0 0 calc(var(--bw) * .014) #fff, 0 8px 18px -8px rgba(29,35,51,.4); overflow:hidden; display:grid; place-items:end center; }
.bf__photo img{ width:100%; height:100%; object-fit:cover; }
.bf__photo svg{ width:78%; height:auto; color:#AEB6D3; }
.bf__name{ margin-top:6.5%; padding:0 8%; font-weight:800; font-stretch:112%; font-size:calc(var(--bw) * .092); line-height:1.05; letter-spacing:-.02em; color:var(--txt); word-break:break-word; }
.bf__role{ margin-top:2.5%; padding:0 8%; font-family:var(--font-mono); font-size:calc(var(--bw) * .046); letter-spacing:.08em; text-transform:uppercase; color:var(--a); font-weight:500; }
.bf__foot{ position:absolute; left:0; right:0; bottom:0; height:12%; display:flex; align-items:center; justify-content:space-between; padding:0 8%; background:var(--lav-50); border-top:1px solid var(--line); }
.bf__id{ font-family:var(--font-mono); font-size:calc(var(--bw) * .04); letter-spacing:.06em; color:var(--muted); }
.bf__tick{ display:flex; gap:calc(var(--bw) * .014); }
.bf__tick i{ display:block; width:calc(var(--bw) * .026); height:calc(var(--bw) * .055); transform:skewX(-21deg); background:var(--b); }
.bf__tick i:last-child{ background:var(--c); }
.badge--h .bf{ flex-direction:row; align-items:stretch; text-align:left; }
.badge--h .bf__band{ right:auto; bottom:0; width:36%; height:auto; }
.badge--h .bf__band::before{ right:-10%; width:40%; }
.badge--h .bf__band::after{ right:-40%; width:40%; }
.badge--h .bf__side{ position:relative; z-index:2; width:36%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8%; padding-top:6%; }
.badge--h .bf__logo{ margin:0; height:22%; padding:0 10%; }
.badge--h .bf__logo span{ font-size:calc(var(--bw) * .05); }
.badge--h .bf__photo{ width:64%; margin:0; }
.badge--h .bf__main{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:10% 7% 16%; }
.badge--h .bf__name{ margin:0; padding:0; font-size:calc(var(--bw) * .066); }
.badge--h .bf__role{ padding:0; margin-top:3%; font-size:calc(var(--bw) * .03); }
.badge--h .bf__foot{ left:36%; height:17%; padding:0 6%; }
.badge--h .bf__id{ font-size:calc(var(--bw) * .027); }
.bb{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5%; padding:18% 10% 10%; text-align:center; background:linear-gradient(180deg,#fff 0%, var(--lav-50) 100%); }
.bb__mark{ width:44%; }
.bb__txt{ font-size:calc(var(--bw) * .046); line-height:1.45; color:var(--muted); margin:0; }
.bb__txt b{ color:var(--ink); }
.bb__bars{ width:78%; height:calc(var(--bw) * .14); background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px, var(--ink) 12px 13px, transparent 13px 16px); opacity:.85; }
.bb__stripe{ position:absolute; left:0; right:0; bottom:0; height:4%; background:linear-gradient(90deg, var(--a) 0 60%, var(--b) 60% 82%, var(--c) 82%); }
.badge--h .bb{ padding:12% 10% 10%; flex-direction:row; flex-wrap:wrap; gap:4% 6%; }
.badge--h .bb__mark{ width:26%; }
.badge--h .bb__txt{ width:60%; text-align:left; font-size:calc(var(--bw) * .03); }
.badge--h .bb__bars{ width:88%; height:calc(var(--bw) * .08); }

/* --------------------------------------------------------- 8. FAIXA CLIENTES */
.clients{ padding:2.4rem 0; border-bottom:1px solid var(--line); background:#fff; overflow:hidden; }
.clients__label{ text-align:center; font-family:var(--font-mono); font-size:var(--fs-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:1.3rem; }
.marquee{ display:flex; width:max-content; animation:marquee 46s linear infinite; }
.marquee:hover{ animation-play-state:paused; }
.marquee__group{ display:flex; align-items:center; gap:3.4rem; padding-right:3.4rem; }
.marquee__item{ display:flex; align-items:center; height:64px; font-weight:800; font-stretch:118%; font-size:clamp(1.05rem, .95rem + .4vw, 1.3rem); letter-spacing:-.01em; color:#9CA3BA; white-space:nowrap; transition:color .25s; }
.marquee__item img{ height:100%; width:auto; max-width:180px; object-fit:contain; filter:grayscale(.55) saturate(.85); opacity:.78; transition:filter .35s, opacity .35s, transform .35s var(--ease); }
.marquee__item:hover{ color:var(--brand-600); }
.marquee__item:hover img{ filter:none; opacity:1; transform:scale(1.06); }
.marquee__dot{ width:9px; height:9px; transform:skewX(-21deg); background:var(--lav); flex:none; }
.clients__mask{ mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; } .marquee__group[aria-hidden]{ display:none; } .marquee__group{ flex-wrap:wrap; justify-content:center; gap:1rem 2rem; padding:0 1rem; } }

/* ------------------------------------------------------- 9. DIFERENCIAIS */
.perks{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:2px solid var(--ink); }
.perk{ padding:clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem) clamp(1rem, .6rem + 1vw, 1.6rem) 0 0; position:relative; }
.perk + .perk{ padding-left:clamp(1rem, .6rem + 1vw, 1.6rem); border-left:1px solid var(--line); }
.perk__num{ font-size:clamp(2.6rem, 1.9rem + 2.6vw, 3.9rem); font-weight:800; font-stretch:122%; letter-spacing:-.05em; line-height:1; color:var(--brand-600); margin-bottom:1rem; display:flex; align-items:baseline; gap:.35rem; }
.perk__num .br i{ font-style:normal; color:#009C3B; }
.perk__num .br i + i{ color:#FFD100; -webkit-text-stroke:1.5px #E0A800; }
.footer__webmail{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.footer__webmail:hover{ color:var(--brand-600); }
.perk__num small{ font-size:.34em; font-weight:700; letter-spacing:0; color:var(--muted); font-stretch:105%; }
.perk h3{ font-size:var(--fs-h4); margin-bottom:.4rem; }
.perk p{ color:var(--muted); font-size:.98rem; margin:0; }
@media (max-width:980px){ .perks{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:2rem; } .perk:nth-child(3){ border-left:0; padding-left:0; } }
@media (max-width:520px){ .perks{ grid-template-columns:1fr; } .perk + .perk{ border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:1.5rem; } }

/* -------------------------------------------------------- 10. PRODUTOS */
.prod{ position:relative; display:flex; flex-direction:column; border-radius:var(--r-xl); overflow:hidden; background:#fff; border:1px solid var(--line); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; }
.prod:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:var(--lav); }
.prod__visual{ position:relative; height:300px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(160deg, var(--lav-100), var(--lav-200)); }
.prod__visual--blue{ height:350px; background:var(--blue-grad); }
.prod__visual > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.prod:hover .prod__visual > img{ transform:scale(1.05); }
.prod__body{ padding:1.6rem 1.7rem 1.8rem; display:flex; flex-direction:column; flex:1; }
.prod__body h3{ margin-bottom:.45rem; }
.prod__body h3 a::after{ content:""; position:absolute; inset:0; z-index:3; }
.prod__body p{ color:var(--muted); font-size:.98rem; }
.prod__foot{ margin-top:auto; padding-top:.6rem; display:flex; align-items:center; justify-content:space-between; }
.tagline{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-600); padding:.3rem .6rem; border-radius:var(--r-sm); background:var(--lav-50); box-shadow:inset 0 0 0 1px var(--lav-200); }

.fan{ position:relative; width:100%; height:100%; }
.fan .badge{ position:absolute; left:50%; top:50%; --bw:130px; transition:transform .6s var(--ease-out); }
.fan .badge:nth-child(1){ transform:translate(-50%,-50%) translate(-62px,14px) rotate(-14deg); }
.fan .badge:nth-child(2){ transform:translate(-50%,-50%) translate(62px,14px) rotate(12deg); }
.fan .badge:nth-child(3){ transform:translate(-50%,-50%) translateY(-4px); z-index:2; }
.prod:hover .fan .badge:nth-child(1){ transform:translate(-50%,-50%) translate(-84px,18px) rotate(-19deg); }
.prod:hover .fan .badge:nth-child(2){ transform:translate(-50%,-50%) translate(84px,18px) rotate(17deg); }

.rfid{ position:relative; width:100%; height:100%; display:grid; place-items:center; }
.rfid .badge{ --bw:150px; transform:rotate(-8deg); z-index:2; }
.rfid__waves{ position:absolute; left:50%; top:50%; width:10px; height:10px; transform:translate(-50%,-50%); }
.rfid__waves span{ position:absolute; left:50%; top:50%; width:300px; height:300px; margin:-150px 0 0 -150px; border-radius:50%; border:1.5px solid rgba(255,255,255,.55); animation:wave 3.6s var(--ease) infinite; opacity:0; }
.rfid__waves span:nth-child(2){ animation-delay:1.2s; }
.rfid__waves span:nth-child(3){ animation-delay:2.4s; }
@keyframes wave{ 0%{ transform:scale(.3); opacity:0; } 20%{ opacity:.9; } 100%{ transform:scale(1.25); opacity:0; } }
.rfid__chip{ position:absolute; z-index:3; left:1.2rem; bottom:1.2rem; display:flex; align-items:center; gap:.4rem; padding:.35rem .7rem; border-radius:var(--r-sm); background:rgba(255,255,255,.16); color:#fff; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }
.rfid__chip i{ width:7px; height:7px; border-radius:50%; background:#6BF0A8; box-shadow:0 0 8px #6BF0A8; }

/* ---------------------------------------------------------- 11. SIMULADOR */
.sim{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(1.5rem, 3vw, 3rem); align-items:stretch; }
.sim__panel{ background:#fff; border-radius:var(--r-xl); padding:clamp(1.4rem, 1rem + 1.6vw, 2.4rem); box-shadow:var(--sh); border:1px solid var(--line); }
.sim__panel h3{ margin-bottom:.3rem; }
.sim__panel > p{ color:var(--muted); font-size:.97rem; margin-bottom:1.5rem; }
.sim__stage{ position:relative; min-height:640px; border-radius:var(--r-xl); background:var(--blue-grad); overflow:hidden; isolation:isolate; }
.sim__stage::before{ content:""; position:absolute; z-index:0; top:-10%; right:12%; width:140px; height:130%; transform:skewX(-21deg); background:rgba(255,255,255,.08); }
.sim__stage .stage{ position:absolute; inset:0; z-index:1; }
.sim__stage-tag{ position:absolute; z-index:4; left:1.2rem; bottom:1.1rem; right:1.2rem; display:flex; justify-content:space-between; gap:1rem; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.85); pointer-events:none; }
.sim__row{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.sim__group{ margin-bottom:1.15rem; }
.sim__label{ display:block; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.45rem; }
.swatches{ display:flex; flex-wrap:wrap; gap:.5rem; }
.swatch{ width:34px; height:34px; border-radius:var(--r); border:0; background:var(--sw); box-shadow:inset 0 0 0 1px rgba(29,35,51,.14); position:relative; transition:transform .2s var(--ease); }
.swatch:hover{ transform:translateY(-2px); }
.swatch[aria-pressed="true"]::after{ content:""; position:absolute; inset:-5px; border-radius:var(--r-lg); box-shadow:0 0 0 2px var(--brand-600); }
.seg{ display:inline-flex; padding:4px; background:var(--lav-100); border-radius:var(--r-lg); gap:4px; }
.seg button{ border:0; background:transparent; padding:.45rem 1rem; border-radius:var(--r); font-weight:600; font-size:.92rem; color:var(--muted); }
.seg button[aria-pressed="true"]{ background:#fff; color:var(--ink); box-shadow:var(--sh-sm); }
.upload{ position:relative; display:flex; align-items:center; gap:.7rem; padding:.7rem .9rem; border-radius:var(--r-lg); border:1.5px dashed var(--lav); background:var(--lav-50); cursor:pointer; font-size:.93rem; font-weight:600; color:var(--ink-2); transition:border-color .2s, background .2s; }
.upload:hover{ border-color:var(--brand); background:var(--lav-100); }
.upload input{ position:absolute; opacity:0; width:1px; height:1px; }
.upload small{ display:block; font-weight:400; color:var(--muted-2); font-size:.8rem; }
.upload i{ width:36px; height:36px; flex:none; border-radius:var(--r); display:grid; place-items:center; background:#fff; color:var(--brand-600); box-shadow:var(--sh-sm); }
.sim__note{ font-size:.82rem; color:var(--muted-2); margin:.9rem 0 0; }
@media (max-width:980px){ .sim{ grid-template-columns:minmax(0,1fr); } .sim__stage{ min-height:600px; order:-1; } }
@media (max-width:480px){ .sim__row{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------ 12. FORMS */
.field{ display:block; margin-bottom:1rem; }
.field__label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:.35rem; color:var(--ink-2); }
.input{ width:100%; min-height:48px; padding:.7rem .95rem; border-radius:var(--r); border:1.5px solid var(--line); background:#fff; color:var(--ink); transition:border-color .2s, box-shadow .2s; font-size:1rem; }
.input:hover{ border-color:var(--lav); }
.input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(102,132,186,.18); }
textarea.input{ min-height:120px; resize:vertical; }
select.input{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C6377' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .9rem center; padding-right:2.4rem; }

/* ------------------------------------------------------ 13. COMO FUNCIONA */
.steps{ --gap:clamp(1.2rem, 2.4vw, 2rem); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); }
.step{ position:relative; display:flex; flex-direction:column; }
.step:not(:last-child)::after{ /* seta só ENTRE os passos, nada depois do 4 */
  content:""; position:absolute; z-index:2; top:74px; right:calc(var(--gap) / -2 - 14px); width:28px; height:28px; border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234D68A0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat;
  box-shadow:0 0 0 1px var(--lav), var(--sh-sm);
}
.scene{ position:relative; height:176px; border-radius:var(--r-xl); overflow:hidden; background:var(--lav-50); border:1px solid var(--line); margin-bottom:1.3rem; }
.step__k{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; color:var(--brand-600); display:block; margin-bottom:.35rem; }
.step h3{ font-size:var(--fs-h4); margin-bottom:.4rem; }
.step p{ color:var(--muted); font-size:.97rem; margin:0; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; row-gap:2.4rem; } .step:nth-child(2)::after{ display:none; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } .step::after{ display:none; } }

.chat{ position:absolute; inset:0; display:flex; flex-direction:column; background:#ECE5DD; }
.chat__bar{ height:36px; flex:none; display:flex; align-items:center; gap:.5rem; padding:0 .8rem; background:#1F7A57; color:#fff; font-size:.76rem; font-weight:700; }
.chat__bar i{ width:20px; height:20px; border-radius:50%; background:#fff url("../img/marca/favicon.svg") center/100% no-repeat; }
.chat__body{ flex:1; display:flex; flex-direction:column; gap:.4rem; padding:.7rem .8rem; }
.bub{ max-width:84%; padding:.4rem .6rem; border-radius:6px; font-size:.75rem; line-height:1.35; box-shadow:0 1px 1px rgba(0,0,0,.1); background:#fff; color:#222; }
.bub--me{ align-self:flex-end; background:#D9FDD3; }
.bub small{ display:block; text-align:right; font-size:.58rem; color:#8a8f98; margin-top:.1rem; }
.sheet{ position:absolute; left:9%; top:15%; width:66%; background:#fff; border-radius:var(--r); box-shadow:var(--sh); overflow:hidden; font-family:var(--font-mono); font-size:.58rem; color:var(--ink-2); }
.sheet div{ display:grid; grid-template-columns:1.4fr 1fr .8fr; border-bottom:1px solid var(--line); }
.sheet div:first-child{ background:#1D6F42; color:#fff; font-weight:500; }
.sheet span{ padding:.3rem .4rem; border-right:1px solid var(--line); white-space:nowrap; overflow:hidden; }
.pics{ position:absolute; right:8%; bottom:12%; display:flex; }
.pics span{ width:46px; height:56px; border-radius:var(--r-sm); background:linear-gradient(160deg,#EEF0F8,#D6DBEC); box-shadow:0 0 0 2px #fff, var(--sh-sm); display:grid; place-items:end center; overflow:hidden; margin-left:-12px; }
.pics span:nth-child(1){ transform:rotate(-8deg); } .pics span:nth-child(3){ transform:rotate(7deg); }
.pics svg{ width:80%; color:#AEB6D3; }
.scene--approve{ display:grid; place-items:center; }
.scene--approve .badge{ --bw:92px; transform:rotate(-5deg); }
.stamp{ position:absolute; right:10%; top:18%; display:flex; align-items:center; gap:.35rem; padding:.35rem .6rem; border:2px solid var(--wa); color:#168A46; border-radius:var(--r); font-family:var(--font-mono); font-weight:500; font-size:.72rem; letter-spacing:.12em; transform:rotate(8deg); background:rgba(255,255,255,.94); }
.scene--ready{ background:var(--blue-grad); display:grid; place-items:center; }
.stack{ position:relative; width:170px; height:124px; }
.stack .badge{ position:absolute; top:0; --bw:74px; }
.stack .badge:nth-child(1){ left:8px; transform:rotate(-12deg); }
.stack .badge:nth-child(2){ left:48px; transform:rotate(-2deg); top:-6px; z-index:2; }
.stack .badge:nth-child(3){ left:88px; transform:rotate(10deg); }
.ready-tag{ position:absolute; right:.8rem; bottom:.8rem; padding:.3rem .6rem; background:#fff; color:var(--brand-700); border-radius:var(--r-sm); font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; }

/* ------------------------------------------------------------ 14. SETORES (órbita) */
.orbit-wrap{ display:grid; place-items:center; }
.orbit{ --size:min(640px, 88vw); --node:96px; position:relative; width:var(--size); height:var(--size); }
.orbit__track{ position:absolute; inset:calc(var(--node) / 2); border-radius:50%; border:1px dashed rgba(255,255,255,.4); pointer-events:none; }
.orbit__track--in{ inset:calc(var(--node) / 2 + 58px); border:1px solid rgba(255,255,255,.14); }
.orbit__ring{ position:absolute; inset:0; animation:spin 90s linear infinite; }
.orbit.is-paused .orbit__ring, .orbit.is-paused .orbit__btn{ animation-play-state:paused; }
.orbit__node{
  position:absolute; left:50%; top:50%; width:var(--node); height:var(--node); margin:calc(var(--node) / -2) 0 0 calc(var(--node) / -2);
  transform:rotate(var(--a)) translate(calc(var(--size) / 2 - var(--node) / 2)) rotate(calc(var(--a) * -1));
}
.orbit__btn{
  width:100%; height:100%; border:0; border-radius:50%; background:#fff; color:var(--brand-600);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  font-weight:700; font-size:.72rem; letter-spacing:.01em; line-height:1.1; text-align:center; padding:.4rem;
  box-shadow:0 14px 28px -14px rgba(20,30,60,.6); animation:spin 90s linear infinite reverse;
  transition:background .25s, color .25s, scale .3s var(--ease);
}
.orbit__btn:hover, .orbit__btn:focus-visible, .orbit__btn.is-active{ background:var(--ink); color:#fff; scale:1.12; outline:none; }
.orbit__center{
  position:absolute; left:50%; top:50%; width:calc(var(--size) - var(--node) * 2 - 140px); aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:1.2rem;
}
.orbit__center em{ font-style:normal; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#E6EAF6; margin-bottom:.6rem; }
.orbit__center b{ display:block; font-size:clamp(1.2rem, .9rem + 1.2vw, 1.9rem); font-weight:800; font-stretch:112%; letter-spacing:-.02em; line-height:1.08; margin-bottom:.55rem; }
.orbit__center span{ font-size:.95rem; color:#EEF1F9; line-height:1.45; max-width:24ch; }
.orbit__center{ display:grid; place-items:center; }
.oc{ grid-area:1 / 1; display:flex; flex-direction:column; align-items:center; transition:opacity .35s var(--ease), transform .35s var(--ease); }
.oc--dyn{ opacity:0; transform:translateY(6px); }
.orbit__center.is-sector .oc--def{ opacity:0; transform:translateY(-6px); }
.orbit__center.is-sector .oc--dyn{ opacity:1; transform:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .orbit__ring,.orbit__btn{ animation:none; } }
@media (max-width:700px){
  .orbit{ width:100%; height:auto; }
  .orbit__track{ display:none; }
  .orbit__ring{ position:static; animation:none; display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin-top:1rem; }
  .orbit__node{ position:static; width:auto; height:auto; margin:0; transform:none; }
  .orbit__btn{ animation:none; border-radius:var(--r-lg); flex-direction:row; justify-content:flex-start; padding:.8rem; font-size:.9rem; gap:.6rem; text-align:left; }
  .orbit__center{ position:static; transform:none; width:100%; aspect-ratio:auto; border-radius:var(--r-xl); padding:1.4rem; min-height:170px; }
}

/* ------------------------------------------------------------ 15. COMPROMISSO */
.promise__top{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:2rem; align-items:end; margin-bottom:clamp(2rem, 4vw, 3rem); }
.promise__quote{ font-size:clamp(2rem, 1.3rem + 2.8vw, 3.8rem); font-weight:800; font-stretch:115%; letter-spacing:-.04em; line-height:1.02; margin:0; }
.promise__meta{ font-size:1.05rem; color:var(--muted); margin:0; padding-left:1.4rem; border-left:3px solid var(--brand); }
.promise__band{ position:relative; margin:0; height:clamp(220px, 28vw, 380px); border-radius:var(--r-xl); overflow:hidden; }
.promise__band img{ width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
.promise__band figcaption{ position:absolute; left:0; bottom:0; padding:.7rem 1.1rem; background:#fff; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-600); border-top-right-radius:var(--r-lg); }
.vows{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:clamp(2rem, 4vw, 3rem); }
.vow{ padding:0 1.6rem; border-left:1px solid var(--lav); }
.vow:first-child{ padding-left:0; border-left:0; }
.vow em{ display:block; font-style:normal; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; color:var(--brand-600); margin-bottom:.7rem; }
.vow b{ display:block; font-size:clamp(1.2rem, 1.05rem + .6vw, 1.5rem); font-weight:800; font-stretch:110%; letter-spacing:-.02em; line-height:1.15; margin-bottom:.5rem; }
.vow p{ margin:0; color:var(--muted); font-size:.98rem; }
@media (max-width:860px){ .promise__top{ grid-template-columns:1fr; } .vows{ grid-template-columns:1fr; gap:1.6rem; } .vow{ padding:0; border-left:0; border-top:1px solid var(--lav); padding-top:1.2rem; } .vow:first-child{ border-top:0; padding-top:0; } }

/* ----------------------------------------------------------------- 16. FAQ */
.faq{ max-width:880px; margin:0 auto; border-top:2px solid var(--ink); }
.faq details{ border-bottom:1px solid var(--line); transition:background .35s; }
.faq details[open]{ background:var(--lav-50); }
.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.35rem .8rem; font-weight:700; font-size:clamp(1.02rem, .98rem + .25vw, 1.16rem); font-stretch:106%; transition:color .2s, padding .3s var(--ease); }
.faq summary:hover{ color:var(--brand-600); padding-left:1.1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary i{ flex:none; position:relative; width:30px; height:30px; border-radius:var(--r); background:var(--lav-100); transition:background .3s, transform .4s var(--ease-out); }
.faq summary i::before,.faq summary i::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; margin:-1px 0 0 -6px; background:var(--brand-600); transition:transform .35s var(--ease), background .3s; }
.faq summary i::after{ transform:rotate(90deg); }
.faq details[open] summary i{ background:var(--brand-600); transform:rotate(180deg); }
.faq details[open] summary i::before, .faq details[open] summary i::after{ background:#fff; }
.faq details[open] summary i::after{ transform:rotate(0deg); }
.faq__a{ overflow:hidden; }
.faq__a p{ padding:0 3.6rem 1.5rem .8rem; margin:0; color:var(--muted); }

/* -------------------------------------------------------------- 17. CTA */
.cta{ position:relative; overflow:hidden; border-radius:var(--r-xl); background:var(--blue-grad); color:#fff; padding:clamp(2.4rem, 1.6rem + 3.5vw, 4.4rem); display:grid; grid-template-columns:minmax(0,1.3fr) auto; gap:2rem; align-items:center; isolation:isolate; }
.cta::before,.cta::after{ content:""; position:absolute; z-index:-1; top:-30%; height:170%; transform:skewX(-21deg); }
.cta::before{ right:8%; width:120px; background:rgba(255,255,255,.1); }
.cta::after{ right:calc(8% + 150px); width:60px; background:rgba(198,204,228,.18); }
.cta h2{ margin-bottom:.6rem; }
.cta p{ color:#E6EAF6; margin:0; font-size:var(--fs-lead); }
.cta__actions{ display:flex; flex-wrap:wrap; gap:.8rem; }
@media (max-width:860px){ .cta{ grid-template-columns:1fr; } }

/* ------------------------------------------------------ 18. PÁGINAS INTERNAS */
.phero{ position:relative; overflow:hidden; background:linear-gradient(180deg, #fff 0%, var(--lav-50) 70%, var(--lav-100) 100%); padding:clamp(3rem, 2rem + 4vw, 5.5rem) 0 clamp(3.5rem, 2.5rem + 4vw, 6rem); isolation:isolate; border-bottom:1px solid var(--line); }
.phero__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:3rem; align-items:center; }
.phero h1{ font-size:clamp(2.2rem, 1.5rem + 3vw, 4rem); max-width:14ch; }
.phero .hero__actions{ margin:2rem 0 0; }
.phero__visual{ position:relative; height:440px; }
.crumbs{ display:flex; gap:.5rem; align-items:center; font-family:var(--font-mono); font-size:var(--fs-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin-bottom:1.4rem; }
.crumbs a:hover{ color:var(--brand-600); }
@media (max-width:900px){ .phero__in{ grid-template-columns:1fr; } .phero__visual{ height:340px; } }

.fan--big .badge{ --bw:200px; }
.fan--big .badge:nth-child(1){ transform:translate(-50%,-50%) translate(-122px,26px) rotate(-15deg); }
.fan--big .badge:nth-child(2){ transform:translate(-50%,-50%) translate(122px,26px) rotate(13deg); }
.fan--big .badge .badge__face{ box-shadow:0 0 0 1px rgba(29,35,51,.05), 0 28px 50px -24px rgba(29,35,51,.5); }
.fan--big:hover .badge:nth-child(1){ transform:translate(-50%,-50%) translate(-150px,30px) rotate(-19deg); }
.fan--big:hover .badge:nth-child(2){ transform:translate(-50%,-50%) translate(150px,30px) rotate(17deg); }
@media (max-width:520px){ .fan--big .badge{ --bw:150px; } .fan--big .badge:nth-child(1){ transform:translate(-50%,-50%) translate(-82px,20px) rotate(-15deg); } .fan--big .badge:nth-child(2){ transform:translate(-50%,-50%) translate(82px,20px) rotate(13deg); } }

/* Anatomia */
.anatomy{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(1.2rem, 3vw, 3rem); align-items:center; }
.anatomy__col{ display:grid; gap:.6rem; }
.anatomy__col--l{ text-align:right; }
.anatomy__item{ display:block; width:100%; text-align:inherit; border:0; background:transparent; padding:1rem 1.1rem; border-radius:var(--r-lg); transition:background .25s, box-shadow .25s; cursor:pointer; }
.anatomy__item:hover, .anatomy__item.is-active{ background:#fff; box-shadow:inset 0 0 0 1px var(--lav), var(--sh-sm); }
.anatomy__item b{ display:block; font-size:clamp(1.14rem, 1.02rem + .45vw, 1.36rem); font-weight:800; font-stretch:108%; margin-bottom:.25rem; }
.anatomy__item span{ display:block; color:var(--muted); font-size:1.03rem; line-height:1.5; }
.anatomy__item em{ font-style:normal; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.12em; color:var(--brand-600); display:block; margin-bottom:.3rem; }
.anatomy__card{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.flip{ perspective:1200px; cursor:pointer; border:0; background:transparent; padding:0; }
.flip .badge{ --bw:270px; transition:transform .9s var(--ease-out); }
.flip.is-flipped .badge{ transform:rotateY(180deg); }
.flip .hot{ backface-visibility:hidden; }
.flip-hint{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .9rem; border:0; border-radius:var(--r); background:#fff; box-shadow:inset 0 0 0 1px var(--lav); font-family:var(--font-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-600); }
.flip-hint:hover{ box-shadow:inset 0 0 0 1px var(--brand); }
@media (max-width:900px){ .anatomy{ grid-template-columns:1fr; } .anatomy__col--l{ text-align:left; } .anatomy__card{ order:-1; } .flip .badge{ --bw:220px; } }

/* Proximidade: fluxo */
.prox{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(2rem, 5vw, 5rem); align-items:center; }
.prox h2{ max-width:16ch; }
.flow{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:start; gap:.4rem; padding:2rem 1.2rem; border-radius:var(--r-xl); background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
.flow__node{ text-align:center; }
.flow__icon{ height:130px; display:grid; place-items:center; margin-bottom:.9rem; position:relative; }
.flow__icon .badge{ --bw:72px; transform:rotate(-8deg); }
.flow__node b{ display:block; font-size:1.05rem; font-weight:800; margin-bottom:.2rem; }
.flow__node span{ font-size:.88rem; color:#EEF1F9; line-height:1.4; display:block; }
.flow__line{ position:relative; width:clamp(30px, 5vw, 64px); height:2px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.75) 0 6px, transparent 6px 11px); margin-top:64px; }
.flow__line::after{ content:""; position:absolute; top:-3px; left:0; width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 10px #fff; animation:travel 2.4s var(--ease) infinite; }
@keyframes travel{ from{ left:0; opacity:0; } 20%{ opacity:1; } 80%{ opacity:1; } to{ left:100%; opacity:0; } }
.reader{ width:60px; height:96px; border-radius:8px; background:#23293A; box-shadow:0 14px 28px -10px rgba(0,0,0,.5); position:relative; }
.reader::before{ content:""; position:absolute; left:14px; right:14px; top:16px; height:26px; border-radius:4px; background:#39415A; }
.reader::after{ content:""; position:absolute; left:50%; bottom:14px; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:#6BF0A8; box-shadow:0 0 12px #6BF0A8; animation:blink 2.4s infinite; }
@keyframes blink{ 0%,60%{ opacity:.35; } 70%,100%{ opacity:1; } }
.gate{ width:96px; height:96px; position:relative; }
.gate::before{ content:""; position:absolute; left:6px; bottom:0; width:28px; height:74px; border-radius:6px 6px 2px 2px; background:#fff; }
.gate::after{ content:""; position:absolute; left:32px; bottom:46px; width:58px; height:7px; border-radius:4px; background:#fff; transform-origin:0 50%; animation:open 2.4s var(--ease) infinite; }
@keyframes open{ 0%,55%{ transform:rotate(0); } 75%,100%{ transform:rotate(-70deg); } }
.prox__note{ margin-top:1.4rem; padding:1rem 1.2rem; border-left:3px solid #fff; background:rgba(255,255,255,.1); color:#fff; font-size:1rem; }
@media (max-width:960px){ .prox{ grid-template-columns:1fr; } }
@media (max-width:560px){ .flow{ grid-template-columns:1fr; } .flow__line{ width:2px; height:34px; margin:0 auto; background:repeating-linear-gradient(180deg, rgba(255,255,255,.75) 0 6px, transparent 6px 11px); } .flow__line::after{ display:none; } }

/* Papel x PVC */
.versus{ display:grid; grid-template-columns:minmax(120px,.7fr) 1fr 1fr; border-top:2px solid var(--ink); }
.versus > div{ padding:1.15rem 1.2rem; border-bottom:1px solid var(--line); }
.versus__h{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.versus__h--pvc{ background:var(--brand-600); color:#fff; }
.versus__k{ font-weight:700; color:var(--ink); }
.versus__paper{ color:var(--muted); }
.versus__pvc{ background:var(--lav-50); font-weight:600; color:var(--ink); box-shadow:inset 3px 0 0 var(--brand); }
@media (max-width:620px){ .versus{ grid-template-columns:1fr 1fr; } .versus__k{ grid-column:1 / -1; padding-bottom:.2rem!important; border-bottom:0!important; } .versus__h:first-child{ display:none; } }

/* Cordões */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.4rem 0 0; padding:0; list-style:none; }
.chips li{ padding:.45rem .85rem; border-radius:var(--r); background:#fff; box-shadow:inset 0 0 0 1px var(--lav); font-weight:600; font-size:.92rem; color:var(--ink-2); }
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem, 5vw, 5rem); align-items:center; }
.split__media{ border-radius:var(--r-xl); overflow:hidden; aspect-ratio:3/2; }
.split__media img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }

.straps{ position:relative; width:100%; height:100%; display:flex; justify-content:center; gap:16px; }
.strap{
  --col:var(--brand-600); --tc:#fff;
  position:relative; width:32px; height:80%; background:var(--col); border-radius:0 0 4px 4px;
  transform-origin:50% 0; transform:rotate(var(--rot, 0deg));
  box-shadow:inset 0 0 0 1px rgba(29,35,51,.06), inset 3px 0 0 rgba(255,255,255,.14), inset -3px 0 0 rgba(0,0,0,.1), 0 14px 26px -12px rgba(46,67,115,.5);
  writing-mode:vertical-rl; display:flex; align-items:center; justify-content:flex-start;
  font-weight:800; font-stretch:118%; font-size:.74rem; letter-spacing:.2em; color:var(--tc); white-space:nowrap; padding-top:16px;
}
.strap > span{ overflow:hidden; height:100%; }
.strap::after{ content:""; position:absolute; left:50%; bottom:-26px; width:16px; height:26px; transform:translateX(-50%); border:3px solid #B5BBCB; border-top-width:6px; border-radius:3px 3px 10px 10px; }
.strap:nth-child(2){ height:92%; } .strap:nth-child(3){ height:70%; } .strap:nth-child(4){ height:85%; } .strap:nth-child(5){ height:75%; }

.strap-ctl{ position:absolute; z-index:4; left:1rem; right:1rem; bottom:1rem; display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; padding:.7rem; border-radius:var(--r-lg); background:rgba(255,255,255,.94); box-shadow:var(--sh); }
.strap-ctl .input{ flex:1 1 160px; min-height:42px; }
.strap-ctl .swatch{ width:30px; height:30px; }
#cordao-stage{ bottom:84px; }

/* Contato */
.contact{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr); gap:clamp(1.5rem, 4vw, 3.5rem); align-items:stretch; }
.contact__side{ display:flex; flex-direction:column; gap:1.4rem; }
.contact__side .info-list{ flex:none; }
.info-list{ margin:0; padding:0; list-style:none; border-top:2px solid var(--ink); }
.info-list li{ display:flex; gap:1rem; align-items:flex-start; padding:1.2rem 0; border-bottom:1px solid var(--line); }
.info-list i{ flex:none; width:42px; height:42px; border-radius:var(--r); display:grid; place-items:center; background:var(--lav-100); color:var(--brand-600); }
.info-list b{ display:block; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500; color:var(--muted); margin-bottom:.2rem; }
.info-list span, .info-list a{ font-weight:600; font-size:1.05rem; }
.info-list a:hover{ color:var(--brand-600); }
.form-card{ background:#fff; border-radius:var(--r-xl); padding:clamp(1.5rem, 1rem + 2vw, 2.6rem); box-shadow:var(--sh-lg); border:1px solid var(--line); }
.form-card h2{ font-size:var(--fs-h3); }
.map{ border-radius:var(--r-xl); overflow:hidden; aspect-ratio:21/9; background:var(--lav-100); border:1px solid var(--line); }
.map iframe{ width:100%; height:100%; border:0; display:block; }
.howto{ counter-reset:how; border-top:2px solid var(--ink); }
.howto__row{ display:grid; grid-template-columns:90px minmax(0,.9fr) minmax(0,1.4fr); gap:1.5rem; align-items:baseline; padding:1.6rem 0; border-bottom:1px solid var(--line); }
.howto__row::before{ counter-increment:how; content:"0" counter(how); font-size:2.4rem; font-weight:800; font-stretch:122%; letter-spacing:-.04em; color:var(--brand); line-height:1; }
.howto__row h3{ font-size:var(--fs-h4); margin:0; }
.howto__row p{ margin:0; color:var(--muted); }
@media (max-width:900px){ .contact{ grid-template-columns:1fr; } .map{ aspect-ratio:4/3; } }
@media (max-width:700px){ .howto__row{ grid-template-columns:60px 1fr; } .howto__row p{ grid-column:2; } .howto__row::before{ font-size:1.8rem; } }

/* --------------------------------------------------------------- 19. FOOTER */
.footer{ background:var(--lav-50); color:var(--muted); padding:clamp(3.5rem, 2.5rem + 3vw, 5rem) 0 2rem; font-size:.95rem; border-top:1px solid var(--line); }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid var(--line); }
.footer .brand img{ height:78px; }
.footer h4{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); font-weight:500; margin-bottom:1.1rem; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.footer a:hover{ color:var(--brand-600); }
.footer__about{ margin-top:1.2rem; max-width:34ch; line-height:1.6; }
.footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-top:1.6rem; font-size:.84rem; color:var(--muted-2); }
@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } }

.wa-float{ position:fixed; right:clamp(1rem, 2vw, 1.6rem); bottom:clamp(1rem, 2vw, 1.6rem); z-index:80; width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:var(--wa); color:#fff; box-shadow:0 12px 30px -8px rgba(31,175,90,.6); transition:transform .25s var(--ease); }
.wa-float:hover{ transform:scale(1.07); }

/* ------------------------------------------------------------- 20. REVEAL */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay:var(--dl,0s); }
[data-reveal].is-in{ opacity:1; transform:none; }
.no-js [data-reveal]{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } }

/* palco claro (teste do cordão): o cordão azul precisa de contraste */
.sim__stage--light{ background:linear-gradient(180deg, #fff 0%, var(--lav-100) 100%); box-shadow:inset 0 0 0 1px var(--line); }
.sim__stage--light::before{ background:rgba(198,204,228,.45); }
.sim__stage--light::after{ content:""; position:absolute; z-index:0; top:-10%; right:calc(12% + 170px); width:70px; height:130%; transform:skewX(-21deg); background:rgba(102,132,186,.1); }
/* crachás miniatura: sem o número do rodapé (fica ilegível) */
.stack .bf__id, .scene .bf__id, .flow__icon .bf__id, .rfid .bf__id{ visibility:hidden; }

/* ---- anatomia: marcação medida no elemento real ---- */
.hot{ position:absolute; z-index:6; left:0; top:0; width:0; height:0; border:2px solid var(--brand-600); border-radius:6px; background:rgba(102,132,186,.12);
  opacity:0; pointer-events:none; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:opacity .25s, left .35s var(--ease-out), top .35s var(--ease-out), width .35s var(--ease-out), height .35s var(--ease-out); }
.anatomy[data-zone]:not([data-zone=""]) .hot{ opacity:1; }

/* ---- ficha técnica ---- */
.blueprint{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(1.5rem, 4vw, 3.5rem); align-items:start; }
.blueprint__draw{ position:relative; margin:0; border-radius:var(--r-xl); background-color:#fff; background-image:linear-gradient(rgba(198,204,228,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(198,204,228,.35) 1px, transparent 1px); background-size:20px 20px; border:1px solid var(--line); overflow:hidden; }
.bp-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem; padding:.9rem 1rem; border-bottom:1px solid var(--line); background:rgba(255,255,255,.92); }
.bp-bar small{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.bp-real{ display:inline-flex; align-items:center; gap:.45rem; border:0; background:#fff; box-shadow:inset 0 0 0 1px var(--lav); border-radius:var(--r); padding:.45rem .8rem; font-weight:600; font-size:.88rem; color:var(--ink-2); }
.bp-real[aria-pressed="true"]{ background:var(--brand-600); color:#fff; box-shadow:none; }
.bp-view{ display:grid; place-items:center; padding:1.2rem 1rem 1.4rem; min-height:540px; overflow-x:auto; }
.bp-svg{ width:100%; max-width:470px; height:auto; overflow:visible; }
.blueprint__draw[data-orient="v"] .bp-svg--h, .blueprint__draw[data-orient="h"] .bp-svg--v{ display:none; }
.blueprint__draw.is-real .bp-svg--v{ width:110mm; max-width:none; }   /* viewBox 440 = 110 mm: 4 unidades por mm */
.blueprint__draw.is-real .bp-svg--h{ width:120mm; max-width:none; }   /* viewBox 480 = 120 mm */
.bp-note{ display:none; margin:0; padding:0 1rem 1rem; font-size:.85rem; color:var(--muted); text-align:center; }
.blueprint__draw.is-real .bp-note{ display:block; }
.bp-card{ fill:#fff; stroke:var(--brand-700); stroke-width:1.6; }
.bp-el{ fill:rgba(102,132,186,.08); stroke:var(--brand); stroke-width:1.2; transition:fill .25s, stroke .25s, stroke-width .25s; }
.bp-el--band{ fill:rgba(102,132,186,.16); stroke:none; }
.bp-el--line{ fill:none; stroke:var(--brand); stroke-linecap:round; }
.bp-el--round{ fill:none; stroke:var(--brand-700); stroke-width:0; }
.bp-safe{ fill:none; stroke:var(--brand-300); stroke-width:1; stroke-dasharray:5 4; transition:stroke .25s, stroke-width .25s; }
.bp-dim{ stroke:var(--muted-2); stroke-width:1; fill:none; }
.bp-arrow{ fill:var(--muted-2); }
.bp-txt{ fill:var(--ink-2); font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; }
.bp-txt--s{ font-size:10px; fill:var(--muted); }
.bp-pin circle{ fill:#fff; stroke:var(--brand-600); stroke-width:1.6; transition:fill .2s; }
.bp-pin text{ fill:var(--brand-600); font-family:var(--font-mono); font-size:11px; font-weight:500; text-anchor:middle; dominant-baseline:central; pointer-events:none; }
.bp-pin{ cursor:pointer; }
.bp-pin.is-on circle, .bp-pin:hover circle{ fill:var(--brand-600); }
.bp-pin.is-on text, .bp-pin:hover text{ fill:#fff; }
.bp-el.is-on{ fill:rgba(102,132,186,.3); stroke:var(--brand-700); stroke-width:2.2; }
.bp-el--line.is-on{ stroke:var(--brand-700); stroke-width:6; }
.bp-el--round.is-on{ stroke-width:4; }
.bp-safe.is-on{ stroke:var(--brand-700); stroke-width:2; }
.bp-legend{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.bp-legend li{ display:grid; grid-template-columns:34px 1fr; gap:.9rem; padding:.95rem .6rem; border-bottom:1px solid var(--line); cursor:default; transition:background .2s; }
.bp-legend li.is-on{ background:var(--lav-100); }
.bp-legend i{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-family:var(--font-mono); font-size:.8rem; color:var(--brand-600); box-shadow:inset 0 0 0 1.6px var(--brand-600); transition:background .2s, color .2s; }
.bp-legend li.is-on i{ background:var(--brand-600); color:#fff; }
.bp-legend b{ display:block; font-size:1.05rem; margin-bottom:.15rem; }
.bp-legend span{ display:block; color:var(--muted); font-size:.95rem; line-height:1.5; }
.bp-legend em{ font-style:normal; font-family:var(--font-mono); font-size:.78rem; color:var(--brand-600); margin-left:.35rem; white-space:nowrap; }
.specs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:2px solid var(--ink); margin-top:clamp(2rem, 4vw, 3rem); }
.spec-cell{ padding:1.3rem 1.2rem 1.3rem 0; border-bottom:1px solid var(--line); }
.spec-cell + .spec-cell{ padding-left:1.2rem; border-left:1px solid var(--line); }
.spec-cell:nth-child(5){ padding-left:0; border-left:0; }
.spec-cell em{ display:block; font-style:normal; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem; }
.spec-cell b{ display:block; font-size:clamp(1.25rem, 1.05rem + .7vw, 1.7rem); font-weight:800; font-stretch:115%; letter-spacing:-.03em; line-height:1.1; color:var(--ink); }
.spec-cell span{ display:block; margin-top:.3rem; color:var(--muted); font-size:.92rem; }
@media (max-width:960px){ .blueprint{ grid-template-columns:1fr; } .specs{ grid-template-columns:1fr 1fr; } .spec-cell:nth-child(odd){ padding-left:0; border-left:0; } .spec-cell:nth-child(even){ padding-left:1.2rem; border-left:1px solid var(--line); } .bp-view{ min-height:0; } }

/* ---- catraca (fluxo da proximidade) ---- */
.turn{ width:110px; height:100px; overflow:visible; }
.turn__body{ fill:#fff; }
.turn__top{ fill:#E6EAF6; }
.turn__led{ fill:#6BF0A8; animation:blink 2.4s infinite; }
.turn__arms{ transform-box:view-box; transform-origin:64px 40px; animation:turn 2.4s var(--ease) infinite; }
.turn__arms line{ stroke:#fff; stroke-width:5.5; stroke-linecap:round; }
.turn__hub{ fill:#DDE2F1; stroke:#fff; stroke-width:2; }
@keyframes turn{ 0%,55%{ transform:rotate(0deg); } 80%,100%{ transform:rotate(120deg); } }
@media (prefers-reduced-motion: reduce){ .turn__arms{ animation:none; } }

/* ---- cordões do topo (canvas com física) ---- */
.curtain{ position:relative; width:100%; height:100%; }
.curtain canvas{ position:absolute; inset:0; width:100%; height:100%; }

/* ---- kit crachá + cordão ---- */
.kit{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:1rem; padding:clamp(1.5rem, 3vw, 2.4rem) 0; border-top:2px solid var(--ink); border-bottom:1px solid var(--line); }
.kit__part{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.kit__vis{ width:100%; height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:var(--r-xl); background:var(--lav-50); border:1px solid var(--line); overflow:hidden; }

.kit__part b{ display:block; font-size:1.1rem; font-weight:800; margin-top:1rem; }
.kit__part span{ display:block; font-size:.92rem; color:var(--muted); }
.kit__part--result .kit__vis{ background:linear-gradient(180deg, #fff, var(--lav-100)); border-color:var(--lav); }
.kit__part--result b{ color:var(--brand-600); }
.kit__op{ align-self:center; font-size:2.6rem; font-weight:800; color:var(--brand); line-height:1; margin-top:-2.4rem; }
.kit__strap{ display:block; width:34px; height:auto; filter:drop-shadow(0 10px 14px rgba(46,67,115,.28)); }
.kit__combo{ display:flex; flex-direction:column; align-items:center; align-self:stretch; justify-content:flex-start; height:100%; }
.kit__combo .kit__strap{ filter:none; }
.kit__combo .clip{ margin-top:-2px; }
.kit-notes{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:1.8rem; }
.kit-notes p{ margin:0; padding:0 1.4rem; border-left:1px solid var(--lav); color:var(--muted); font-size:.98rem; }
.kit-notes p:first-child{ padding-left:0; border-left:0; }
.kit-notes b{ display:block; color:var(--ink); font-size:1.05rem; margin-bottom:.2rem; }
@media (max-width:860px){ .kit{ grid-template-columns:1fr; } .kit__op{ margin:0; } .kit-notes{ grid-template-columns:1fr; gap:1.2rem; } .kit-notes p{ padding:0; border-left:0; } }

/* contato: bloco que completa a coluna da esquerda */
.quick{ flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:1.2rem; padding:clamp(1.4rem, 1rem + 1.4vw, 2rem); border-radius:var(--r-xl); background:var(--blue-grad); color:#fff; position:relative; overflow:hidden; isolation:isolate; }
.quick::before{ content:""; position:absolute; z-index:-1; top:-20%; right:12%; width:90px; height:140%; transform:skewX(-21deg); background:rgba(255,255,255,.09); }
.quick h3{ font-size:var(--fs-h4); margin:0 0 .4rem; }
.quick p{ margin:0; color:#E6EAF6; font-size:.98rem; }
.quick__actions{ display:grid; gap:.6rem; }
.quick__meta{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#DCE2F2; }

/* ---- ficha técnica "de bancada": crachá real sobre base de corte ---- */
.bp-stage{ position:relative; min-height:620px; display:grid; place-items:center; padding:1.5rem 1rem 2rem; overflow:hidden;
  background-color:#D5DCEB;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .24 0 0 0 0 .42 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 70% 60% at 35% 25%, rgba(255,255,255,.55), transparent 70%),
    linear-gradient(rgba(63,88,144,.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63,88,144,.30) 1px, transparent 1px),
    linear-gradient(rgba(63,88,144,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63,88,144,.11) 1px, transparent 1px);
  background-size:220px 220px, 100% 100%, 60px 60px, 60px 60px, 12px 12px, 12px 12px;
  box-shadow:inset 0 0 0 10px rgba(255,255,255,.35), inset 0 0 80px rgba(46,67,115,.18); }
.bp-rig{ position:relative; }
.bp-ruler{ position:absolute; overflow:visible; filter:drop-shadow(0 6px 8px rgba(29,35,51,.25)); }
.bp-card{ position:absolute; left:0; top:0; }
.bp-card .badge__face{ box-shadow:0 0 0 1px rgba(29,35,51,.08), 0 1px 1px rgba(29,35,51,.18), 0 26px 38px -18px rgba(20,30,60,.55), 0 10px 16px -10px rgba(20,30,60,.3); }
.bp-card .badge__face::before{ content:""; position:absolute; inset:0; z-index:5; pointer-events:none; background: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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .24 0 0 0 0 .42 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.55; mix-blend-mode:multiply; }
.bp-card .hot{ opacity:0; }
.bp-card .hot.is-shown{ opacity:1; }
.bp-safe2{ position:absolute; z-index:7; border:1.6px dashed var(--brand-700); border-radius:4px; opacity:0; pointer-events:none; transition:opacity .25s; }
.bp-safe2.is-shown{ opacity:1; }
.bp-pins{ position:absolute; inset:0; pointer-events:none; }
.bp-pin2{ position:absolute; z-index:8; width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%; border:2px solid var(--brand-600); background:#fff; color:var(--brand-600);
  display:grid; place-items:center; font-family:var(--font-mono); font-size:.78rem; font-weight:500; cursor:pointer; pointer-events:auto;
  box-shadow:0 6px 12px -4px rgba(20,30,60,.4); transition:background .2s, color .2s, transform .25s var(--ease), left .45s var(--ease-out), top .45s var(--ease-out); }
.bp-pin2::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--brand); opacity:0; }
.bp-pin2.is-on{ background:var(--brand-600); color:#fff; transform:scale(1.15); }
.bp-pin2.is-on::after{ animation:ping 1.2s var(--ease) infinite; }
@keyframes ping{ 0%{ opacity:.7; transform:scale(.8); } 100%{ opacity:0; transform:scale(1.5); } }
.bp-edge{ position:absolute; width:200px; text-align:center; transition:transform .3s var(--ease); }
.bp-edge svg{ width:200px; height:auto; filter:drop-shadow(0 10px 14px rgba(20,30,60,.3)); }
.bp-edge span{ display:block; margin:.3rem auto 0; max-width:180px; line-height:1.35; font-size:.85rem; color:var(--ink-2); }
.bp-edge b{ display:block; font-family:var(--font-mono); font-weight:500; font-size:1rem; color:var(--brand-700); }
.bp-edge.is-on{ transform:scale(1.06); }
.bp-edge.is-on svg{ filter:drop-shadow(0 0 0 transparent) drop-shadow(0 12px 18px rgba(20,30,60,.35)); }
.blueprint__draw.is-real .bp-note{ display:block; }
@media (max-width:620px){ .bp-stage{ min-height:0; padding:1rem .5rem 1.5rem; } }

/* kit: o crachá é montado no tamanho grande (270 px, como na anatomia) e
   reduzido inteiro por escala; assim o rodapé, a presilha e o cordão
   mantêm a proporção e o navegador não "incha" o texto pequeno */
.kit__scale{ --k:.52; position:relative; flex:none; }
.kit__scale--solo{ width:calc(270px * var(--k)); height:calc(428px * var(--k)); }
.kit__scale--combo{ width:calc(270px * var(--k)); height:calc(611px * var(--k)); align-self:center; margin-top:-1px; }
.kit__inner{ position:absolute; left:0; top:0; width:270px; transform:scale(var(--k)); transform-origin:0 0; display:flex; flex-direction:column; align-items:center; }
.kit__inner .badge{ --bw:270px; }
.kit__inner .clip{ margin:0 auto -9px; }
.kit__strap2{ display:block; width:34px; height:150px; margin-bottom:-2px; }
.kit__part--result .kit__vis{ justify-content:flex-start; }
.kit__part--result .kit__scale--combo{ margin-top:0; }
.kit__inner.kit__combo{ height:auto; justify-content:flex-start; }