/* ===================================================================
   PRINT MAIS — brindes e embalagens · Bezerros/PE
   Direção: pressroom / halftone. Marca real: azul royal + laranja + amarelo.
   Assinatura: meio-tom (halftone) + barra CMYK + marca "+".
   =================================================================== */

:root{
  --ink:      #0C1636;   /* navy profundo, tinta */
  --ink-2:    #131F45;   /* painel elevado */
  --ink-3:    #1B2A5C;   /* borda sutil no escuro */
  --blue:     #1B4FD8;   /* azul royal Print Mais */
  --blue-deep:#123AAE;
  --orange:   #F2681E;   /* laranja — ACENTO DE AÇÃO */
  --orange-d: #D9560F;
  --yellow:   #FBB400;   /* amarelo — highlight/halftone */
  --paper:    #F6F2E9;   /* papel offset quente */
  --paper-2:  #EFE9DC;
  --white:    #FFFFFF;
  --tx-light: #ECE9E1;
  --tx-mut:   #98A2C4;   /* texto secundário no escuro */
  --tx-dark:  #16213F;
  --tx-dark-2:#4A5578;
  --line:     #E3DCCC;

  --ff-disp: "Archivo", system-ui, sans-serif;
  --ff-body: "IBM Plex Sans", system-ui, sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1200px;
  --r: 18px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--ff-body); background:var(--paper); color:var(--tx-dark);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--ff-disp); font-weight:800; line-height:1.02; letter-spacing:-.01em; }

/* ---------- CMYK color bar ---------- */
.colorbar{ display:flex; height:6px; }
.colorbar span{ flex:1; }
.c-c{ background:#00A7E1; } .c-m{ background:#EC008C; }
.c-y{ background:#FFD200; } .c-k{ background:#111; }

/* ---------- buttons ---------- */
.btn{
  --pad:.85em 1.3em;
  display:inline-flex; align-items:center; gap:.55em; padding:var(--pad);
  font-family:var(--ff-disp); font-weight:800; font-size:.98rem; letter-spacing:.01em;
  border-radius:999px; border:2px solid transparent; cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
  white-space:nowrap;
}
.btn-zap{ background:var(--orange); color:#fff; box-shadow:0 8px 22px -8px rgba(242,104,30,.7); }
.btn-zap:hover{ background:var(--orange-d); transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(242,104,30,.85); }
.btn-ghost{ background:transparent; color:var(--tx-light); border-color:rgba(236,233,225,.35); }
.btn-ghost:hover{ border-color:var(--tx-light); transform:translateY(-2px); }
.btn-lg{ font-size:1.06rem; --pad:1em 1.6em; }
.btn-xl{ font-size:1.2rem; --pad:1.15em 2em; }
.ico-zap{ width:1.15em; height:1.15em; fill:currentColor; }

/* ---------- brand wordmark ---------- */
.brand{ display:flex; align-items:baseline; gap:.4em; }
.brand-word{
  font-family:var(--ff-disp); font-weight:900; font-size:1.35rem; letter-spacing:-.02em;
  color:var(--tx-light); line-height:1;
}
.brand-word strong{ color:var(--yellow); font-weight:900; }
.brand-plus{
  font-family:var(--ff-disp); font-weight:900; color:var(--orange); font-size:1.6rem; line-height:.7;
  transform:translateY(2px);
}
.brand-tag{
  font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tx-mut); padding-left:.5em;
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:2rem;
  padding:.85rem clamp(1rem,4vw,2.5rem);
  background:rgba(12,22,54,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ink-3);
}
.nav-links{ display:flex; gap:1.6rem; margin-left:auto; }
.nav-links a{
  font-family:var(--ff-mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tx-mut); padding:.3em 0; position:relative;
}
.nav-links a:hover{ color:var(--tx-light); }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--orange);
  transition:width .2s ease;
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{ --pad:.6em 1.1em; font-size:.85rem; }

/* ---------- halftone helper (assinatura) ---------- */
.hero-halftone, .logoband-halftone{
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.6px);
  background-size:14px 14px;
  -webkit-mask-image:linear-gradient(105deg, #000 0%, #000 34%, transparent 62%);
  mask-image:linear-gradient(105deg, #000 0%, #000 34%, transparent 62%);
}

/* ---------- eyebrows + dots ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em; margin:0 0 1.1rem;
  font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tx-mut);
}
.eyebrow-dark{ color:var(--tx-dark-2); }
.eyebrow-light{ color:rgba(255,255,255,.8); }
.dot-c,.dot-m,.dot-y{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot-c{ background:#00A7E1; } .dot-m{ background:var(--orange); } .dot-y{ background:var(--yellow); }

/* ===================================================================
   HERO
   =================================================================== */
.hero{ position:relative; background:var(--ink); color:var(--tx-light); overflow:hidden; }
.hero::after{ /* glow */
  content:""; position:absolute; right:-10%; top:-20%; width:60%; height:120%;
  background:radial-gradient(circle at center, rgba(27,79,216,.35), transparent 60%);
  pointer-events:none;
}
.hero-inner{
  position:relative; z-index:2; max-width:var(--wrap); margin:0 auto;
  padding:clamp(3rem,7vw,6rem) clamp(1rem,4vw,2.5rem) clamp(3.5rem,6vw,5.5rem);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center;
}
.hero-title{
  font-size:clamp(2.15rem,6.4vw,5rem); font-weight:900; line-height:.98; letter-spacing:-.03em;
  margin:0 0 1.4rem;
}
.ink-swap{
  position:relative; color:var(--yellow); white-space:nowrap;
}
.ink-swap::after{
  content:""; position:absolute; left:-.06em; right:-.06em; bottom:.06em; height:.14em;
  background:var(--orange); z-index:-1; opacity:.9;
}
.hero-sub{ font-size:1.15rem; color:var(--tx-mut); max-width:36ch; margin:0 0 2rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:2.4rem; }
.hero-chips{
  list-style:none; display:flex; flex-wrap:wrap; gap:1.6rem; margin:0; padding:1.4rem 0 0;
  border-top:1px solid var(--ink-3);
}
.hero-chips li{ font-family:var(--ff-mono); font-size:.82rem; color:var(--tx-mut); }
.hero-chips b{ display:block; font-family:var(--ff-disp); font-size:1.5rem; color:var(--tx-light); font-weight:800; }

/* hero art */
.hero-art{ position:relative; margin:0; }
.hero-frame{
  position:relative; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--ink-3); box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
  aspect-ratio:5/6; background:#000;
}
.hero-frame img{ width:100%; height:100%; object-fit:cover; }
.reg{ position:absolute; width:26px; height:26px; z-index:3; }
.reg::before,.reg::after{ content:""; position:absolute; background:var(--orange); }
.reg::before{ left:50%; top:0; width:2px; height:100%; transform:translateX(-50%); }
.reg::after{ top:50%; left:0; height:2px; width:100%; transform:translateY(-50%); }
.reg-tl{ top:14px; left:14px; } .reg-br{ bottom:14px; right:14px; }
.hero-stamp{
  position:absolute; right:-14px; bottom:-18px; z-index:4;
  width:118px; height:118px; border-radius:50%;
  background:var(--orange); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform:rotate(-9deg); box-shadow:0 16px 34px -12px rgba(242,104,30,.9);
  border:3px solid #fff;
}
.stamp-line{ font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; opacity:.95; }
.stamp-big{ font-family:var(--ff-disp); font-weight:900; font-size:2.1rem; line-height:.8; letter-spacing:-.02em; }

/* ===================================================================
   MARQUEE
   =================================================================== */
.marquee{
  background:var(--yellow); color:var(--ink); overflow:hidden; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
}
.marquee-track{
  display:flex; gap:2.5rem; padding:.7rem 0; width:max-content;
  animation:scroll 34s linear infinite;
  font-family:var(--ff-disp); font-weight:800; font-size:1.15rem; text-transform:uppercase; letter-spacing:.02em;
}
.marquee-track span{ opacity:.92; }
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ===================================================================
   SECTION SCAFFOLD
   =================================================================== */
.section-head{ max-width:var(--wrap); margin:0 auto; padding:clamp(3.5rem,7vw,6rem) clamp(1rem,4vw,2.5rem) 0; }
.section-title{ font-size:clamp(2rem,4.4vw,3.2rem); font-weight:800; letter-spacing:-.02em; max-width:18ch; }
.section-lead{ font-size:1.12rem; color:var(--tx-dark-2); max-width:52ch; margin:1.1rem 0 0; }

/* ===================================================================
   CATALOGO GRID
   =================================================================== */
.catalogo{ padding-bottom:clamp(3rem,6vw,5rem); }
.grid{
  max-width:var(--wrap); margin:2.5rem auto 0; padding:0 clamp(1rem,4vw,2.5rem);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem;
}
.card{
  grid-column:span 1; background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-lg{ grid-column:span 2; }
.card:hover{ transform:translateY(-5px); box-shadow:0 26px 44px -24px rgba(12,22,54,.4); border-color:var(--blue); }
.card-img{ position:relative; aspect-ratio:4/3; background:var(--paper-2); overflow:hidden; }
.card-lg .card-img{ aspect-ratio:16/9; }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .card-img img{ transform:scale(1.05); }
.card-body{ padding:1.3rem 1.4rem 1.5rem; position:relative; }
.card-idx{
  position:absolute; top:-1.5rem; right:1.2rem;
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.14em; color:#fff;
  background:var(--blue); padding:.35em .6em; border-radius:6px;
}
.card-body h3{ font-size:1.35rem; margin:0 0 .35rem; }
.card-body p{ margin:0; color:var(--tx-dark-2); font-size:.98rem; line-height:1.5; }

/* card CTA */
.card-note{ background:var(--ink); color:var(--tx-light); border-color:var(--ink); }
.card-note-inner{ padding:1.8rem 1.6rem; display:flex; flex-direction:column; gap:.7rem; height:100%; justify-content:center; }
.card-note h3{ font-size:1.5rem; }
.card-note p{ color:var(--tx-mut); font-size:1rem; margin:0 0 .4rem; }
.card-note .btn{ align-self:flex-start; }
.plus-mark{ font-family:var(--ff-disp); font-weight:900; font-size:2.6rem; color:var(--orange); line-height:.7; }

/* ===================================================================
   LOGO BAND (sua logo aqui)
   =================================================================== */
.logoband{ position:relative; background:var(--blue); color:#fff; overflow:hidden; }
.logoband-halftone{ -webkit-mask-image:linear-gradient(285deg,#000,transparent 60%); mask-image:linear-gradient(285deg,#000,transparent 60%); }
.logoband::before{
  content:"+"; position:absolute; right:-2rem; top:-4rem; font-family:var(--ff-disp); font-weight:900;
  font-size:22rem; color:rgba(255,255,255,.08); line-height:1; pointer-events:none;
}
.logoband-inner{
  position:relative; z-index:2; max-width:var(--wrap); margin:0 auto;
  padding:clamp(3.5rem,7vw,6rem) clamp(1rem,4vw,2.5rem);
}
.logoband-title{ font-size:clamp(2.1rem,5vw,3.8rem); font-weight:900; letter-spacing:-.02em; margin:0 0 1rem; max-width:16ch; }
.logoband-title .hl{ color:var(--yellow); }
.logoband-sub{ font-size:1.18rem; color:rgba(255,255,255,.9); max-width:48ch; margin:0; }

/* ===================================================================
   PROCESSO
   =================================================================== */
.steps{
  max-width:var(--wrap); margin:2.5rem auto 0; padding:0 clamp(1rem,4vw,2.5rem) clamp(3.5rem,6vw,5rem);
  list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; counter-reset:s;
}
.step{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:1.8rem 1.5rem 1.6rem;
  position:relative;
}
.step::before{
  content:""; position:absolute; left:1.5rem; top:0; width:34px; height:4px; background:var(--orange);
  transform:translateY(-2px); border-radius:2px;
}
.step-num{ font-family:var(--ff-mono); font-size:.85rem; color:var(--blue); letter-spacing:.1em; }
.step h3{ font-size:1.25rem; margin:.5rem 0 .5rem; }
.step p{ margin:0; color:var(--tx-dark-2); font-size:.97rem; }

/* ===================================================================
   CTA
   =================================================================== */
.cta{ background:var(--ink); color:var(--tx-light); text-align:center; }
.cta-inner{ max-width:760px; margin:0 auto; padding:clamp(3.5rem,8vw,6rem) 1.5rem; }
.cta-title{ font-size:clamp(2.1rem,5vw,3.6rem); font-weight:900; letter-spacing:-.02em; margin:0 0 1rem; }
.cta-sub{ font-size:1.18rem; color:var(--tx-mut); margin:0 auto 2.2rem; max-width:44ch; }
.cta-phone{ font-family:var(--ff-mono); font-size:1.05rem; color:var(--tx-light); margin:1.4rem 0 0; letter-spacing:.04em; }

/* ===================================================================
   FOOTER
   =================================================================== */
.footer{ background:#08102A; color:var(--tx-mut); padding:clamp(3rem,5vw,4.5rem) clamp(1rem,4vw,2.5rem) 1.5rem; }
.footer-grid{
  max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem;
  padding-bottom:2.5rem; border-bottom:1px solid var(--ink-3);
}
.brand-plus-inline{ color:var(--orange); font-family:var(--ff-disp); font-weight:900; }
.footer-tag{ margin:1rem 0 0; font-size:.98rem; line-height:1.6; color:var(--tx-mut); max-width:34ch; }
.footer-col h4{ font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-light); margin-bottom:.9rem; font-weight:600; }
.footer-col a,.footer-col p{ display:block; margin:.35rem 0; font-size:.95rem; color:var(--tx-mut); }
.footer-col a:hover{ color:var(--orange); }
.footer-bar{
  max-width:var(--wrap); margin:1.4rem auto 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  font-family:var(--ff-mono); font-size:.78rem; color:#5b6488;
}

/* ===================================================================
   FAB
   =================================================================== */
.fab{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:60;
  width:58px; height:58px; border-radius:50%; background:var(--orange);
  display:grid; place-items:center; box-shadow:0 14px 30px -8px rgba(242,104,30,.8);
  transition:transform .18s ease;
}
.fab:hover{ transform:scale(1.08); }
.fab svg{ width:30px; height:30px; fill:#fff; }

/* ===================================================================
   REVEAL
   =================================================================== */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:1000px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-art{ max-width:440px; }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .card-lg{ grid-column:span 2; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  body{ font-size:16px; }
  .nav-links{ display:none; }
  .nav-cta{ margin-left:auto; }
  .brand-tag{ display:none; }
  .cta-tail{ display:none; }
  .nav{ gap:.6rem; padding-left:1rem; padding-right:1rem; }
  .brand-word{ font-size:1.15rem; }
  .brand-plus{ font-size:1.35rem; }
  /* nav CTA vira icon-only no mobile (hero + FAB já cobrem o texto) */
  .nav-cta{ --pad:0; width:44px; height:44px; border-radius:50%; justify-content:center; }
  .nav-cta .nav-cta-label{ display:none; }
  .nav-cta .ico-zap{ width:1.4em; height:1.4em; }
  .grid{ grid-template-columns:1fr; }
  .card-lg{ grid-column:span 1; }
  .card-lg .card-img{ aspect-ratio:4/3; }
  .steps{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-chips{ gap:1.1rem; }
  .hero-stamp{ width:96px; height:96px; }
  .hero-halftone,.logoband-halftone{ -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%); mask-image:linear-gradient(180deg,#000,transparent 70%); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

/* focus */
a:focus-visible,.btn:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; }

/* ===================================================================
   CAMADA VIVA — WebGL, tilt 3D, cursor de registro, magnético
   Aditiva: se algo falhar, o site estático continua intacto.
   =================================================================== */

/* --- WebGL hero canvas --- */
.hero-gl{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  display:block; opacity:0; transition:opacity 1s ease;
}
.gl-on .hero-gl{ opacity:1; }
.gl-on .hero-halftone{ opacity:.35; }          /* shader assume o protagonismo */
.gl-on .hero::after{ opacity:.5; }
/* véu de legibilidade sobre o canvas (texto à esquerda respira) */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, var(--ink) 6%, rgba(12,22,54,.72) 34%, rgba(12,22,54,.15) 62%, transparent 78%),
    linear-gradient(0deg, var(--ink) 2%, transparent 26%);
}
.hero-inner{ z-index:3; }   /* acima do véu */

/* --- vida extra: brilho pulsante no carimbo + shimmer no destaque --- */
@keyframes stampPulse{
  0%,100%{ box-shadow:0 16px 34px -12px rgba(242,104,30,.9), 0 0 0 0 rgba(251,180,0,0); }
  50%{ box-shadow:0 16px 40px -10px rgba(242,104,30,1), 0 0 0 10px rgba(251,180,0,.12); }
}
.js-alive .hero-stamp{ animation:stampPulse 3.4s ease-in-out infinite; }
.js-alive .ink-swap{
  background:linear-gradient(92deg,var(--yellow),#FFD86B,var(--yellow));
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:inkShimmer 6s linear infinite;
}
@keyframes inkShimmer{ to{ background-position:200% 0; } }
.js-alive .ink-swap::after{ opacity:.85; }

/* --- reveal: variação mais viva (blur + subida) --- */
.reveal{ filter:blur(6px); }
.reveal.in{ filter:blur(0); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease; }

/* --- TILT 3D nos cards --- */
[data-tilt]{ transform-style:preserve-3d; will-change:transform; }
[data-tilt].tilting{ transition:none; z-index:2; box-shadow:0 40px 70px -30px rgba(12,22,54,.6); }
.tilt-glare{
  position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit;
  opacity:0; transition:opacity .3s ease; mix-blend-mode:overlay;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.5), transparent 45%);
}
[data-tilt].tilting .tilt-glare{ opacity:1; }

/* --- CURSOR de registro (cruz de impressão) — só desktop pointer --- */
.has-cursor, .has-cursor a, .has-cursor .btn, .has-cursor [data-tilt]{ cursor:none; }
.cursor-ring,.cursor-dot{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  margin-left:-11px; margin-top:-11px;
}
.cursor-ring{
  width:22px; height:22px; border-radius:50%;
  border:1.5px solid rgba(242,104,30,.9);
  transition:width .18s ease,height .18s ease,margin .18s ease,border-color .18s ease,background .18s ease;
}
.cursor-ring::before,.cursor-ring::after{
  content:""; position:absolute; background:rgba(242,104,30,.9);
}
.cursor-ring::before{ left:50%; top:-6px; width:1px; height:calc(100% + 12px); transform:translateX(-50%); }
.cursor-ring::after{ top:50%; left:-6px; height:1px; width:calc(100% + 12px); transform:translateY(-50%); }
.cursor-ring.hot{ width:44px; height:44px; margin-left:-22px; margin-top:-22px; border-color:var(--yellow); background:rgba(251,180,0,.08); }
.cursor-ring.hot::before,.cursor-ring.hot::after{ background:var(--yellow); }
.cursor-dot{
  width:6px; height:6px; margin-left:-3px; margin-top:-3px; border-radius:50%;
  background:var(--orange);
}

/* --- magnético: suaviza a base --- */
[data-magnetic]{ will-change:transform; }

/* ===================================================================
   SHOWCASE 3D — carrossel "passa a mão" (elemento-assinatura)
   =================================================================== */
.showcase{ background:var(--paper-2); padding-bottom:clamp(3rem,6vw,5rem); overflow:hidden; }
.showcase-head{ max-width:var(--wrap); margin:0 auto; padding:clamp(3.5rem,7vw,6rem) clamp(1rem,4vw,2.5rem) 0; }
.stage{
  position:relative; height:min(64vw,460px); margin-top:2.5rem;
  perspective:1400px; perspective-origin:50% 42%;
}
.ring{
  position:absolute; inset:0; margin:auto; width:280px; height:360px; top:0; bottom:0; left:0; right:0;
  transform-style:preserve-3d; transform:translateZ(-460px) rotateY(var(--rot,0deg));
  transition:transform .05s linear;
}
.slab{
  position:absolute; inset:0; margin:0; width:280px; height:360px;
  transform:rotateY(calc(var(--i) * 45deg)) translateZ(460px);
  border-radius:16px; overflow:hidden; background:#000;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 60px -28px rgba(12,22,54,.7);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.slab img{ width:100%; height:100%; object-fit:cover; }
.slab::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, transparent 55%, rgba(12,22,54,.5));
}
.slab figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1rem 1.1rem; color:#fff; font-family:var(--ff-disp); font-weight:800; font-size:1.05rem;
  letter-spacing:-.01em;
}
.slab .slab-tag{
  position:absolute; top:.8rem; left:.8rem; z-index:2;
  font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:var(--orange); padding:.3em .55em; border-radius:6px;
}
.stage-nav{
  position:absolute; top:50%; z-index:5; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  background:var(--ink); color:#fff; font-size:1.6rem; line-height:1;
  display:grid; place-items:center; box-shadow:0 12px 26px -10px rgba(12,22,54,.6);
  transition:background .16s ease, transform .16s ease;
}
.stage-nav:hover{ background:var(--blue); transform:translateY(-50%) scale(1.06); }
.stage-nav.prev{ left:clamp(.5rem,3vw,2rem); }
.stage-nav.next{ right:clamp(.5rem,3vw,2rem); }
.stage-hint{
  text-align:center; margin:1.4rem 0 0; font-family:var(--ff-mono);
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-dark-2);
}
.stage[data-drag]{ cursor:grab; }
.stage[data-drag].grabbing{ cursor:grabbing; }
@media (max-width:620px){
  .ring,.slab{ width:210px; height:280px; }
  .slab{ transform:rotateY(calc(var(--i) * 45deg)) translateZ(330px); }
  .ring{ transform:translateZ(-330px) rotateY(var(--rot,0deg)); }
  .stage{ height:66vw; }
  .stage-nav{ width:44px; height:44px; }
}
@media (prefers-reduced-motion:reduce){
  .ring{ transition:none; }
  .stage-hint{ display:none; }
}

/* reduced-motion: mata a camada viva por completo */
@media (prefers-reduced-motion:reduce){
  .hero-gl{ display:none; }
  .js-alive .hero-stamp,.js-alive .ink-swap{ animation:none; }
  .js-alive .ink-swap{ -webkit-text-fill-color:var(--yellow); color:var(--yellow); }
  .reveal{ filter:none; }
  .cursor-ring,.cursor-dot{ display:none; }
}
@media (hover:none),(pointer:coarse){
  .cursor-ring,.cursor-dot{ display:none; }
  .has-cursor,.has-cursor a{ cursor:auto; }
}

/* ===================================================================
   BUILD DENSO — Diferenciais · Sobre · FAQ · Contato/Orçamento
   =================================================================== */

/* shared button variant */
.btn-ghost-dark{
  background:transparent; color:var(--tx-dark);
  border:1.5px solid rgba(12,22,54,.22);
}
.btn-ghost-dark:hover{ border-color:var(--ink); background:rgba(12,22,54,.04); }

/* ---------- DIFERENCIAIS ---------- */
.edge{ max-width:var(--wrap); margin:0 auto; padding:88px 24px 30px; }
.edge-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:34px;
}
.edge-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 22px 28px; position:relative; overflow:hidden;
  box-shadow:0 1px 0 rgba(12,22,54,.03);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .5s;
}
.edge-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 44px -26px rgba(12,22,54,.5);
  border-color:rgba(27,79,216,.4);
}
.edge-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg,var(--blue),var(--orange),var(--yellow));
  transform:scaleX(0); transform-origin:left; transition:transform .5s ease;
}
.edge-card:hover::after{ transform:scaleX(1); }
.edge-ico{
  display:inline-grid; place-items:center; width:46px; height:46px; border-radius:12px;
  background:var(--paper-2); color:var(--blue-deep); font-size:22px; font-weight:700;
  margin-bottom:16px;
}
.edge-card h3{ font-family:var(--ff-disp); font-size:1.16rem; margin:0 0 8px; color:var(--ink); letter-spacing:-.01em; }
.edge-card p{ margin:0; font-size:.97rem; color:var(--tx-dark-2); }

/* ---------- SOBRE ---------- */
.sobre{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sobre-inner{
  max-width:var(--wrap); margin:0 auto; padding:84px 24px;
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center;
}
.sobre-media{ position:relative; margin:0; }
.sobre-media img{
  width:100%; border-radius:22px; aspect-ratio:4/3; object-fit:cover;
  box-shadow:0 34px 60px -34px rgba(12,22,54,.6);
}
.sobre-badge{
  position:absolute; right:-14px; bottom:-14px; width:110px; height:110px;
  background:var(--white); border-radius:20px; display:grid; place-items:center;
  box-shadow:0 18px 34px -18px rgba(12,22,54,.5); rotate:-4deg;
}
.sobre-badge img{ width:74px; height:auto; }
.sobre-logo{ width:230px; max-width:62%; height:auto; margin:6px 0 18px; }
.sobre-copy .section-title{ text-align:left; margin:0 0 18px; }
.sobre-copy > p{ margin:0 0 14px; color:var(--tx-dark-2); max-width:52ch; }
.sobre-note{
  border-left:3px solid var(--orange); padding:2px 0 2px 16px;
  color:var(--tx-dark) !important; font-weight:500;
}
.sobre-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }

/* ---------- FAQ ---------- */
.faq{ max-width:860px; margin:0 auto; padding:88px 24px 24px; }
.faq-list{ margin-top:30px; display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background:var(--white); border:1px solid var(--line); border-radius:14px;
  padding:2px 22px; overflow:hidden; transition:border-color .3s, box-shadow .3s;
}
.faq-item[open]{ border-color:rgba(27,79,216,.35); box-shadow:0 14px 30px -22px rgba(12,22,54,.5); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:18px 34px 18px 0; position:relative;
  font-family:var(--ff-disp); font-weight:700; font-size:1.05rem; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:0; top:50%; translate:0 -50%;
  font-family:var(--ff-mono); font-size:1.5rem; color:var(--orange); transition:transform .3s;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ margin:0; padding:0 0 20px; color:var(--tx-dark-2); font-size:1rem; }

/* ---------- CONTATO / ORÇAMENTO ---------- */
.contato{ background:var(--ink); color:var(--tx-light); position:relative; overflow:hidden; }
.contato::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:
    radial-gradient(520px 320px at 88% -8%, rgba(27,79,216,.34), transparent 70%),
    radial-gradient(460px 300px at 6% 108%, rgba(242,104,30,.22), transparent 70%);
}
.contato-grid{
  position:relative; max-width:var(--wrap); margin:0 auto; padding:88px 24px;
  display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center;
}
.contato-title{ font-family:var(--ff-disp); font-weight:800; font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.05; letter-spacing:-.02em; margin:14px 0 16px; color:var(--white); }
.contato-lead{ color:var(--tx-mut); max-width:44ch; margin:0 0 26px; }
.contato-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.contato-list li{ display:flex; align-items:center; gap:12px; color:var(--tx-light); font-size:1rem; }
.contato-list li span{ color:var(--yellow); width:20px; text-align:center; }
.contato-list a{ color:var(--white); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.28); }
.contato-list a:hover{ border-color:var(--yellow); }

.orc-form{
  background:rgba(255,255,255,.04); border:1px solid var(--ink-3); border-radius:20px;
  padding:28px; backdrop-filter:blur(4px);
}
.orc-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.orc-field{ display:flex; flex-direction:column; gap:6px; }
.orc-field span{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--tx-mut); }
.orc-field span em{ font-style:normal; opacity:.7; text-transform:none; letter-spacing:0; }
.orc-field input, .orc-field select{
  width:100%; font-family:var(--ff-body); font-size:1rem; color:var(--white);
  background:rgba(12,22,54,.55); border:1.5px solid var(--ink-3); border-radius:11px;
  padding:12px 14px; transition:border-color .25s, box-shadow .25s;
}
.orc-field select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--tx-mut) 50%),linear-gradient(135deg,var(--tx-mut) 50%,transparent 50%); background-position:calc(100% - 20px) 20px,calc(100% - 14px) 20px; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.orc-field input::placeholder{ color:#5c6a8c; }
.orc-field input:focus, .orc-field select:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(27,79,216,.22);
}
.orc-field input[type=date]{ color-scheme:dark; }
.orc-submit{ width:100%; justify-content:center; margin-top:6px; }
.orc-hint{ font-family:var(--ff-mono); font-size:.74rem; color:var(--tx-mut); text-align:center; margin:14px 0 0; }
.orc-hint.ok{ color:var(--yellow); }
.orc-hint.err{ color:#ff8f6b; }

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .edge-grid{ grid-template-columns:1fr 1fr; }
  .sobre-inner{ grid-template-columns:1fr; gap:40px; }
  .sobre-copy .section-title{ font-size:1.7rem; }
  .contato-grid{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width:560px){
  .edge-grid{ grid-template-columns:1fr; }
  .orc-row{ grid-template-columns:1fr; }
  .edge, .faq, .sobre-inner, .contato-grid{ padding-top:64px; padding-bottom:48px; }
  .sobre-badge{ width:88px; height:88px; }
  .sobre-badge img{ width:58px; }
}