/* /sites — lookbook Revel */

.sp-sites{
  --ink:#0a0a0a;
  --muted:#5c5c5c;
  --paper:#f7f4ef;
  --paper-2:#efeae3;
  --white:#fff;
  --line:rgba(10,10,10,.1);
  --orange:#ff6a00;
  --ease:cubic-bezier(.22,1,.36,1);
  --display:"Public Sans",system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
}

body.sp-sites .header:not(.scrolled){
  color:var(--ink);
  background:transparent;
  box-shadow:none;
}
body.sp-sites .header:not(.scrolled) .nav a{color:rgba(10,10,10,.55)}
body.sp-sites .header:not(.scrolled) .nav a:hover,
body.sp-sites .header:not(.scrolled) .nav a.active{color:var(--ink)}
body.sp-sites .header:not(.scrolled) .btn--header{
  color:#fff;
  background:#0a0a0a;
}
body.sp-sites .header:not(.scrolled) .icon-link{
  border-color:rgba(10,10,10,.12);
  color:var(--ink);
}
body.sp-sites .header:not(.scrolled) .logo__dark{opacity:0!important}
body.sp-sites .header:not(.scrolled) .logo__light{opacity:1!important}
body.sp-sites .header:not(.scrolled) .menu-toggle{
  border-color:rgba(10,10,10,.15);
  color:var(--ink);
}

/* Header scrolled: fundo escuro sólido + logo branca com chama laranja */
body.sp-sites .header.scrolled{
  position: fixed !important;
  inset: 0 0 auto !important;
  z-index: 100 !important;
  height: var(--header-h) !important;
  color: #fff !important;
  background: #090807 !important;
  background-color: rgba(9, 8, 7, 0.96) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
body.sp-sites .header.scrolled .logo__dark{
  opacity: 1 !important;
}
body.sp-sites .header.scrolled .logo__light{
  opacity: 0 !important;
}
body.sp-sites .header.scrolled .menu-toggle{
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
body.sp-sites .header.scrolled .nav a{
  color: rgba(255, 255, 255, 0.72) !important;
}
body.sp-sites .header.scrolled .nav a:hover{
  color: #fff !important;
}

/* Posicionamento da logo */
body.sp-sites .header .logo{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 48px !important;
  margin: 0 !important;
}

@media (max-width: 600px){
  body.sp-sites .header .logo{
    width: 146px !important;
    height: 44px !important;
  }
}

/* ── HERO (+ BA inside) ── */
.ss-hero{
  position:relative;
  padding:calc(var(--header-h,78px) + clamp(2.2rem,5vw,3.4rem)) clamp(1.25rem,4vw,2.5rem) clamp(2.8rem,5vw,3.8rem);
  background:#fffaf6;
  text-align:center;
  overflow:hidden;
}
.ss-hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 42% 70% at 0% 42%,rgba(255,138,61,.42),transparent 70%),
    radial-gradient(ellipse 42% 70% at 100% 42%,rgba(255,106,0,.36),transparent 70%),
    radial-gradient(ellipse 38% 36% at 8% 8%,rgba(255,176,112,.28),transparent 68%),
    radial-gradient(ellipse 38% 36% at 92% 8%,rgba(255,154,80,.26),transparent 68%),
    radial-gradient(ellipse 55% 40% at 50% 100%,rgba(255,160,90,.14),transparent 65%),
    radial-gradient(ellipse 72% 68% at 50% 46%,#fff 0%,#fff 38%,rgba(255,248,242,.96) 62%,transparent 78%),
    #fffaf6;
}
.ss-hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 68% 52% at 50% 38%,rgba(255,255,255,.35),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.2) 55%,#f7f4ef 100%);
  pointer-events:none;
}
.ss-hero__inner{
  position:relative;
  z-index:1;
  width:min(100%,820px);
  margin:0 auto;
}
.ss-hero__kicker{
  margin:0 0 .85rem;
  font-size:.72rem;
  font-weight:750;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(10,10,10,.45);
}
.ss-hero h1{
  margin:0;
  font:800 clamp(2.7rem,6.8vw,4.6rem)/1.02 var(--display);
  letter-spacing:-.055em;
  color:var(--ink);
}
.ss-hero h1 .line{display:block}
.ss-hero h1 .line--accent{
  color:var(--orange);
  font-weight:800;
}
.ss-hero__lead{
  margin:1.2rem auto 0;
  max-width:28rem;
  color:rgba(10,10,10,.58);
  font-size:clamp(1.02rem,1.35vw,1.1rem);
  font-weight:400;
  line-height:1.5;
  letter-spacing:-.01em;
  text-wrap:pretty;
}
.ss-hero__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:1.7rem;
}

/* CTAs — match home hero-clean + hero-anim-final (lift, scale, sheen) */
/* High specificity + !important so OS “reduce motion” does not kill hover feedback */
html body.sp-sites .ss-hero__btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  height:52px;
  padding:0 28px;
  border-radius:999px;
  border:1.5px solid #0a0a0a;
  background:#0a0a0a;
  color:#fff;
  font-size:15px;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
  box-sizing:border-box;
  overflow:hidden;
  isolation:isolate;
  transform:translateY(0) scale(1);
  transition:
    transform .32s cubic-bezier(.22,1,.36,1),
    box-shadow .32s cubic-bezier(.22,1,.36,1),
    border-color .22s ease,
    background .22s ease,
    color .22s ease !important;
  will-change:transform;
}
html body.sp-sites .ss-hero__btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.14) 50%,transparent 80%);
  transform:translateX(-120%);
  transition:transform .55s cubic-bezier(.22,1,.36,1) !important;
  pointer-events:none;
}
html body.sp-sites .ss-hero__btn:hover{
  transform:translateY(-3px) scale(1.02) !important;
  background:#141414;
  border-color:#141414;
  color:#fff;
  box-shadow:
    0 10px 24px rgba(0,0,0,.14),
    0 0 0 1px rgba(255,106,0,.2) !important;
}
html body.sp-sites .ss-hero__btn:hover::before{
  transform:translateX(120%) !important;
}
html body.sp-sites .ss-hero__btn:active{
  transform:translateY(0) scale(.985) !important;
  transition-duration:.12s !important;
}
/*
  Secondary resting state: same mass as primary (black ring + white fill).
  Pale gray borders disappear on the warm hero glow and look unfinished.
*/
html body.sp-sites .ss-hero__btn--ghost{
  background:#fff;
  color:#0a0a0a;
  border:1.5px solid #0a0a0a;
  box-shadow:
    0 1px 2px rgba(17,17,17,.05),
    0 6px 16px rgba(17,17,17,.07);
}
html body.sp-sites .ss-hero__btn--ghost::before{
  background:linear-gradient(120deg,transparent 20%,rgba(255,106,0,.12) 50%,transparent 80%);
}
html body.sp-sites .ss-hero__btn--ghost:hover{
  background:#fff !important;
  color:#0a0a0a !important;
  border-color:#ff6a00 !important;
  box-shadow:
    0 10px 24px rgba(255,106,0,.16),
    0 0 0 1px rgba(255,106,0,.28) !important;
}
html body.sp-sites .ss-hero__btn--ghost:active{
  background:#f7f4ef !important;
}

/* BA block inside hero */
.ss-hero__ba{
  position:relative;
  z-index:1;
  width:min(100%,980px);
  margin:clamp(1.8rem,4vw,2.6rem) auto 0;
  text-align:left;
}
/* intro antes do slider — contexto + projeto em uma coluna só */
.ss-hero__ba-intro{
  margin:0 0 1rem;
  padding:0 .15rem;
  max-width:36rem;
}
.ss-hero__ba-kicker{
  margin:0 0 .4rem;
  color:#ff6a00;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.2;
}
.ss-hero__ba-title{
  margin:0 0 .55rem;
  color:var(--ink,#15110e);
  font:650 clamp(1.25rem,2.4vw,1.55rem)/1.22 var(--display,Inter,system-ui,sans-serif);
  letter-spacing:-.03em;
}
.ss-hero__ba-desc{
  margin:0 0 .85rem;
  color:#5f574e;
  font-size:clamp(.9rem,1.2vw,.98rem);
  line-height:1.5;
  font-weight:450;
  letter-spacing:-.01em;
}
/* legenda do caso: linha tipográfica, sem bar/chip */
.ss-hero__ba-project{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.35rem .45rem;
  margin:0;
  padding-top:.75rem;
  border-top:1px solid rgba(17,17,17,.08);
  color:#6a635b;
  font-size:.82rem;
  line-height:1.3;
  letter-spacing:-.01em;
}
.ss-hero__ba-project-name{
  color:var(--ink,#15110e);
  font-weight:650;
  letter-spacing:-.02em;
}
.ss-hero__ba-project-sep{
  color:#b5aea4;
  font-weight:500;
}
.ss-hero__ba-project-type{
  color:#8a8278;
  font-weight:500;
}

/* ── Compare slider (width reveal, not clip-path) ── */
.ss-compare{
  --p:48%;
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:#0e0e0e;
  border:1px solid rgba(10,10,10,.1);
  box-shadow:
    0 24px 56px rgba(20,16,12,.14),
    0 0 0 1px rgba(255,106,0,.1);
  /* Mantém a rolagem vertical disponível no celular. O controle central
     continua responsável pelo scrub horizontal. */
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}
.ss-compare.is-dragging{cursor:ew-resize}
.ss-compare__stage{
  position:relative;
  width:100%;
  aspect-ratio:16 / 10;
  max-height:min(70vh,640px);
  background:#0a0a0a;
  cursor:ew-resize;
  overflow:hidden;
}

.ss-compare__layer{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.ss-compare__layer img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

/* After = full frame underneath — frame the big “PLUS QU’UN COMBAT” hero */
.ss-compare__layer--after{
  z-index:1;
  width:100%;
  background:#0a0a0a;
}
.ss-compare__layer--after img{
  object-position:18% 42%;
}

/* Before = left portion; frame logo + “NOTRE PHILOSOPHIE” (left column) */
.ss-compare__layer--before{
  z-index:2;
  width:var(--p);
  right:auto;
  border-right:0;
  will-change:width;
  transition:none; /* JS owns motion — never lag behind the handle */
  background:#fff;
}
.ss-compare__layer--before img{
  width:100%; /* overridden in px by JS so crop is real */
  max-width:none;
  height:100%;
  object-fit:cover;
  /* bias left + slightly lower so the philosophy headline stays in frame */
  object-position:12% 48%;
}

/* Tags live inside each layer → clipped/revealed with the line */
.ss-compare__tag{
  position:absolute;
  top:.85rem;
  z-index:3;
  padding:.5rem .85rem;
  border-radius:9px;
  font:800 .72rem/1 var(--display);
  letter-spacing:.14em;
  text-transform:uppercase;
  pointer-events:none;
  white-space:nowrap;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.ss-compare__tag--antes{
  left:.85rem;
  color:#f3f0e9;
  background:rgba(10,10,10,.82);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
}
.ss-compare__tag--depois{
  right:.85rem;
  color:#111;
  background:var(--orange);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:
    0 8px 20px rgba(255,106,0,.35),
    0 0 0 1px rgba(255,106,0,.15);
}

/* Handle line */
.ss-compare__handle{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--p);
  z-index:5;
  width:0;
  transform:translateX(-50%);
  pointer-events:none;
  transition:none; /* JS owns left — no lag */
}
.ss-compare__line{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:3px;
  transform:translateX(-50%);
  background:#fff;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.28),
    0 0 20px rgba(255,106,0,.4);
}
.ss-compare__knob{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:48px;
  height:48px;
  border-radius:999px;
  border:3px solid #fff;
  background:#0a0a0a;
  color:#fff;
  display:grid;
  place-items:center;
  cursor:ew-resize;
  pointer-events:auto;
  box-shadow:
    0 10px 28px rgba(0,0,0,.38),
    0 0 0 4px rgba(255,106,0,.28);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.ss-compare__knob:hover,
.ss-compare.is-dragging .ss-compare__knob{
  transform:translate(-50%,-50%) scale(1.07);
  box-shadow:
    0 12px 32px rgba(0,0,0,.42),
    0 0 0 5px rgba(255,106,0,.38);
}
.ss-compare__knob:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
}
/* Soft pulse while autoplay runs — draws the eye to the handle */
.ss-compare.is-autoplay:not(.is-dragging) .ss-compare__knob{
  animation:ssKnobPulse 1.4s ease-in-out infinite;
}
.ss-compare.is-autoplay:not(.is-dragging) .ss-compare__line{
  animation:ssLineGlow 1.4s ease-in-out infinite;
}
@keyframes ssKnobPulse{
  0%,100%{box-shadow:0 10px 28px rgba(0,0,0,.38),0 0 0 4px rgba(255,106,0,.28)}
  50%{box-shadow:0 12px 32px rgba(0,0,0,.42),0 0 0 7px rgba(255,106,0,.42)}
}
@keyframes ssLineGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(0,0,0,.28),0 0 14px rgba(255,106,0,.35)}
  50%{box-shadow:0 0 0 1px rgba(0,0,0,.28),0 0 26px rgba(255,106,0,.55)}
}
/*
  Keep handle pulse even if the OS has "reduce motion".
  The scrub itself is rAF (not CSS) and must keep running —
  Windows often sets prefers-reduced-motion system-wide.
*/
@media (prefers-reduced-motion:reduce){
  .ss-compare.is-autoplay:not(.is-dragging) .ss-compare__knob{
    animation:none !important;
  }
  .ss-compare.is-autoplay:not(.is-dragging) .ss-compare__line{
    animation:none !important;
  }
  /* Keep CTA hover motion even if OS reduce-motion is on (same as product feedback on home) */
  html body.sp-sites .ss-hero__btn{
    transition:
      transform .32s cubic-bezier(.22,1,.36,1),
      box-shadow .32s cubic-bezier(.22,1,.36,1),
      border-color .22s ease,
      background .22s ease,
      color .22s ease !important;
    transition-duration:.32s !important;
  }
  html body.sp-sites .ss-hero__btn::before{
    transition:transform .55s cubic-bezier(.22,1,.36,1) !important;
    transition-duration:.55s !important;
  }
  html body.sp-sites .ss-hero__btn:hover{
    transform:translateY(-3px) scale(1.02) !important;
  }
  html body.sp-sites .ss-hero__btn:active{
    transform:translateY(0) scale(.985) !important;
    transition-duration:.12s !important;
  }
}

/* ── WORKS — same card model, tighter type & fit ── */
.ss-works{
  padding:clamp(3rem,7vw,5rem) clamp(1.25rem,4vw,2.5rem);
  background:var(--paper-2);
}
.ss-works__inner{
  width:min(100%,1100px);
  margin:0 auto;
}
.ss-works h2{
  margin:0 0 .5rem;
  font:700 clamp(1.55rem,3vw,2.1rem)/1.12 var(--display);
  letter-spacing:-.03em;
}
.ss-works__note{
  margin:0 0 1.35rem;
  max-width:40rem;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.5;
}
.ss-hero__draft{
  position:relative;
  z-index:1;
  width:min(100%,820px);
  margin:1.25rem auto 0;
  text-align:center;
  color:rgba(10,10,10,.4);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.02em;
}
.ss-works__list{
  display:grid;
  gap:1rem;
}

.ss-work{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(12.5rem,.72fr);
  align-items:stretch;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  min-height:0;
}
.ss-work:nth-child(even){
  grid-template-columns:minmax(12.5rem,.72fr) minmax(0,1.35fr);
}
.ss-work:nth-child(even) .ss-work__media{order:2}
.ss-work:nth-child(even) .ss-work__body{order:1}

.ss-work__media{
  min-height:100%;
  min-width:0;
  background:#111;
  aspect-ratio:16 / 10;
}
.ss-work__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  will-change:transform;
}

/* Text column: stacked, no floating empty space */
.ss-work__body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0;
  min-width:0;
  padding:clamp(1.25rem,2.8vw,1.75rem) clamp(1.2rem,2.5vw,1.65rem);
}
.ss-work__body--centered{
  align-items:center;
  margin:3rem 0;
  text-align:center;
}
/* Kind — small, sentence case, not LOUD TRACKED TAG */
.ss-work__kind{
  margin:0 0 .35rem;
  color:var(--orange);
  font-size:.8125rem;
  font-weight:650;
  line-height:1.2;
  letter-spacing:-.005em;
  text-transform:none;
}
.ss-work__body h3{
  margin:0;
  font:700 clamp(1.15rem,1.9vw,1.35rem)/1.18 var(--display);
  letter-spacing:-.025em;
  color:var(--ink);
  text-wrap:balance;
}
.ss-work__where{
  margin:.28rem 0 0;
  color:rgba(10,10,10,.45);
  font-size:.875rem;
  font-weight:500;
  line-height:1.3;
}
.ss-work__text{
  margin:.7rem 0 0;
  max-width:28ch;
  color:var(--muted);
  font-size:.9375rem;
  line-height:1.5;
  text-wrap:pretty;
}
.ss-work__text--centered{
  margin:0 auto;
  max-width:31.25rem;
}
.ss-work__link{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin:.95rem 0 0;
  align-self:flex-start;
  color:var(--orange);
  font-size:.875rem;
  font-weight:650;
  letter-spacing:-.01em;
  text-decoration:none;
  transition:gap .25s ease,opacity .25s ease;
}
.ss-work__link span{
  font-size:1em;
  transition:transform .25s ease;
}
.ss-work:hover .ss-work__link{opacity:.85}
.ss-work:hover .ss-work__link span{transform:translate(2px,-2px)}
.ss-work__link:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
  border-radius:4px;
}

/* ── Scrolling site preview (fake "video" of the page navigating) ── */
.ss-work__media--scroll{
  position:relative;
  overflow:hidden;
  background:#0b0b0f;
}
.ss-scroll{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.ss-scroll__img{
  display:block;
  width:100%;
  height:auto;
  transform:translateY(0);
  will-change:transform;
}
/* Autoplay the scroll while the card is on screen (added via IO) */
.ss-work.is-in .ss-scroll__img{
  animation:ss-scroll-pan 13s cubic-bezier(.66,0,.34,1) infinite;
}
/* Pause and settle at top on hover so the visitor can read the hero */
.ss-work:hover .ss-scroll__img,
.ss-work:focus-within .ss-scroll__img{
  animation-play-state:paused;
}
@keyframes ss-scroll-pan{
  0%,8%      {transform:translateY(0)}
  46%,54%    {transform:translateY(-87.4%)}
  92%,100%   {transform:translateY(0)}
}
.ss-scroll__badge{
  position:absolute;
  top:.7rem;
  right:.7rem;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.32rem .6rem;
  border-radius:999px;
  background:rgba(10,10,12,.72);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);
  color:#f3f0e9;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1;
}
.ss-scroll__dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 0 rgba(255,106,0,.55);
  animation:ss-scroll-pulse 2s ease-out infinite;
}
@keyframes ss-scroll-pulse{
  0%  {box-shadow:0 0 0 0 rgba(255,106,0,.55)}
  70% {box-shadow:0 0 0 6px rgba(255,106,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,106,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .ss-work.is-in .ss-scroll__img{animation:none;transform:translateY(0)}
  .ss-scroll__dot{animation:none}
}

/* Keep the preview image out of the generic work-card zoom treatment
   so the vertical pan is the only transform applied. */
html body.sp-sites .ss-work__media--scroll img,
html body.sp-sites .ss-work:hover .ss-work__media--scroll img{
  transform:translateY(0);
  transition:none !important;
}
html body.sp-sites .ss-work.is-in .ss-work__media--scroll img{
  animation:ss-scroll-pan 13s cubic-bezier(.66,0,.34,1) infinite;
}
html body.sp-sites .ss-work:hover .ss-work__media--scroll img,
html body.sp-sites .ss-work:focus-within .ss-work__media--scroll img{
  animation-play-state:paused;
}
@media (prefers-reduced-motion:reduce){
  html body.sp-sites .ss-work.is-in .ss-work__media--scroll img{
    animation:none;transform:translateY(0);
  }
}

/* Third reference slot — ready for next real site (no fake client) */
.ss-work--slot{
  border-style:dashed;
  border-color:rgba(10,10,10,.14);
  background:rgba(255,255,255,.72);
}
.ss-work__media--slot{
  display:grid;
  place-items:center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%,rgba(255,106,0,.12),transparent 65%),
    #161310;
  aspect-ratio:16 / 10;
}
.ss-work__slot-mark{
  width:48px;
  height:48px;
  border-radius:14px;
  border:1.5px dashed rgba(255,255,255,.28);
  position:relative;
}
.ss-work__slot-mark::before,
.ss-work__slot-mark::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:rgba(255,255,255,.45);
  transform:translate(-50%,-50%);
}
.ss-work__slot-mark::before{
  width:16px;
  height:1.5px;
}
.ss-work__slot-mark::after{
  width:1.5px;
  height:16px;
}
.ss-work--slot .ss-work__kind{color:rgba(10,10,10,.4)}
.ss-work--slot h3{color:rgba(10,10,10,.55)}
.ss-work--slot .ss-work__where,
.ss-work--slot .ss-work__text{color:rgba(10,10,10,.4)}

/* ── TYPES: two solid product blocks (Revel weight, not wireframe) ── */
.ss-types{
  padding:clamp(3.5rem,8vw,5.5rem) clamp(1.25rem,4vw,2.5rem);
  background:#0a0a0a;
  color:#f3f0e9;
}
.ss-types__inner{
  width:min(100%,1040px);
  margin:0 auto;
}
.ss-types__head{
  margin:0 0 clamp(1.6rem,3.5vw,2.2rem);
  max-width:36rem;
}
.ss-types__head h2{
  margin:0;
  font:750 clamp(1.7rem,3.5vw,2.4rem)/1.08 var(--display);
  letter-spacing:-.04em;
  color:#fff;
  text-wrap:balance;
}
.ss-types__head p{
  margin:.7rem 0 0;
  color:rgba(243,240,233,.55);
  font-size:clamp(1.02rem,1.3vw,1.1rem);
  line-height:1.55;
  text-wrap:pretty;
}

.ss-types__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(.85rem,2vw,1.15rem);
  align-items:stretch;
}
.ss-types__card{
  display:flex;
  flex-direction:column;
  margin:0;
  padding:clamp(1.45rem,3.2vw,1.9rem);
  border-radius:18px;
  background:#141210;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  min-height:100%;
  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    border-color .3s ease,
    box-shadow .35s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover) and (pointer:fine){
  .ss-types__card:hover{
    transform:translateY(-3px);
    border-color:rgba(255,106,0,.35);
    box-shadow:
      0 22px 48px rgba(0,0,0,.35),
      0 0 0 1px rgba(255,106,0,.12);
  }
}
.ss-types__card h3{
  margin:0 0 .75rem;
  font:750 clamp(1.3rem,2.4vw,1.55rem)/1.12 var(--display);
  letter-spacing:-.03em;
  color:#fff;
}
.ss-types__card > p{
  margin:0;
  color:rgba(243,240,233,.62);
  font-size:clamp(.98rem,1.2vw,1.05rem);
  line-height:1.6;
  text-wrap:pretty;
  flex:1;
}
.ss-types__card ul{
  margin:1.25rem 0 0;
  padding:1.15rem 0 0;
  list-style:none;
  border-top:1px solid rgba(255,255,255,.08);
  display:grid;
  gap:.55rem;
}
.ss-types__card li{
  position:relative;
  padding-left:1rem;
  color:rgba(243,240,233,.78);
  font-size:.92rem;
  line-height:1.4;
  font-weight:500;
}
.ss-types__card li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--orange);
}

/* ── CTA ── */
.ss-cta{
  padding:clamp(3.5rem,8vw,5.5rem) clamp(1.25rem,4vw,2.5rem);
  background:#0a0a0a;
  color:#f3f0e9;
  text-align:center;
}
.ss-cta__inner{width:min(100%,640px);margin:0 auto}
.ss-cta h2{
  margin:0 auto;
  max-width:16ch;
  font:700 clamp(1.7rem,3.4vw,2.5rem)/1.08 var(--display);
  letter-spacing:-.04em;
}
.ss-cta p{
  margin:1rem auto 0;
  max-width:28rem;
  color:rgba(243,240,233,.55);
  font-size:1rem;
  line-height:1.5;
}
.ss-cta__btn{
  margin-top:1.5rem;
  background:var(--orange) !important;
  border-color:var(--orange) !important;
  color:#111 !important;
  box-shadow:0 14px 32px rgba(255,106,0,.22);
}
html body.sp-sites .ss-cta__btn:hover{
  background:#ff7d1f !important;
  border-color:#ff7d1f !important;
  color:#111 !important;
}

/*
  ═══════════════════════════════════════════════════════════
  /sites MOTION SYSTEM (always on for this marketing page)
  Windows often enables prefers-reduced-motion system-wide,
  which zeros global * transitions. We override here with
  high-specificity + !important so motion actually plays.
  ═══════════════════════════════════════════════════════════
*/
html body.sp-sites{
  --ss-ease:cubic-bezier(.22,1,.36,1);
  --ss-ease-move:cubic-bezier(.65,0,.35,1);
}

/* Hero load-in — always */
html body.sp-sites .ss-hero__kicker{
  opacity:0;
  animation:ssIn .7s var(--ss-ease) .04s forwards !important;
  animation-duration:.7s !important;
}
html body.sp-sites .ss-hero h1 .line{
  opacity:0;
  transform:translate3d(0,22px,0);
  animation:ssIn .85s var(--ss-ease) forwards !important;
  animation-duration:.85s !important;
}
html body.sp-sites .ss-hero h1 .line:nth-child(1){animation-delay:.1s !important}
html body.sp-sites .ss-hero h1 .line:nth-child(2){animation-delay:.2s !important}
html body.sp-sites .ss-hero__lead{
  opacity:0;
  transform:translate3d(0,18px,0);
  animation:ssIn .85s var(--ss-ease) .32s forwards !important;
  animation-duration:.85s !important;
}
html body.sp-sites .ss-hero__actions{
  opacity:0;
  transform:translate3d(0,16px,0);
  animation:ssIn .85s var(--ss-ease) .44s forwards !important;
  animation-duration:.85s !important;
}
html body.sp-sites .ss-hero__ba{
  opacity:0;
  transform:translate3d(0,28px,0) scale(.985);
  animation:ssInScale .95s var(--ss-ease) .55s forwards !important;
  animation-duration:.95s !important;
}
html body.sp-sites .ss-hero__bg{
  opacity:0;
  animation:ssFade .9s var(--ss-ease) forwards !important;
  animation-duration:.9s !important;
}

/* Scroll reveals — toggled by .is-in via sites motion script */
html body.sp-sites [data-ss]{
  opacity:0;
  transform:translate3d(0,28px,0);
  transition:
    opacity .75s var(--ss-ease),
    transform .75s var(--ss-ease) !important;
  transition-delay:var(--ss-d,0ms);
  transition-duration:.75s !important;
  will-change:opacity,transform;
}
html body.sp-sites [data-ss="fade"]{
  transform:none;
}
html body.sp-sites [data-ss="left"]{
  transform:translate3d(-28px,0,0);
}
html body.sp-sites [data-ss="right"]{
  transform:translate3d(28px,0,0);
}
html body.sp-sites [data-ss="scale"]{
  transform:translate3d(0,18px,0) scale(.96);
}
html body.sp-sites [data-ss].is-in{
  opacity:1 !important;
  transform:none !important;
}

/* Work cards: image zoom + body cascade when in view */
html body.sp-sites .ss-work__media{
  overflow:hidden;
}
html body.sp-sites .ss-work__media img{
  transition:transform .9s var(--ss-ease) !important;
  transition-duration:.9s !important;
  transform:scale(1.04);
}
html body.sp-sites .ss-work.is-in .ss-work__media img{
  transform:scale(1);
}
html body.sp-sites .ss-work:hover .ss-work__media img{
  transform:scale(1.05);
  transition-duration:1.1s !important;
}
html body.sp-sites .ss-work__kind,
html body.sp-sites .ss-work__body h3,
html body.sp-sites .ss-work__where,
html body.sp-sites .ss-work__text{
  opacity:0;
  transform:translate3d(0,12px,0);
  transition:
    opacity .55s var(--ss-ease),
    transform .55s var(--ss-ease) !important;
  transition-duration:.55s !important;
}
html body.sp-sites .ss-work.is-in .ss-work__kind{
  opacity:1;transform:none;transition-delay:80ms !important;
}
html body.sp-sites .ss-work.is-in .ss-work__body h3{
  opacity:1;transform:none;transition-delay:140ms !important;
}
html body.sp-sites .ss-work.is-in .ss-work__where{
  opacity:1;transform:none;transition-delay:190ms !important;
}
html body.sp-sites .ss-work.is-in .ss-work__text{
  opacity:1;transform:none;transition-delay:240ms !important;
}

/* Types cards: list items cascade */
html body.sp-sites .ss-types__card li{
  opacity:0;
  transform:translate3d(0,10px,0);
  transition:
    opacity .45s var(--ss-ease),
    transform .45s var(--ss-ease) !important;
  transition-duration:.45s !important;
}
html body.sp-sites .ss-types__card.is-in li{
  opacity:1;
  transform:none;
}
html body.sp-sites .ss-types__card.is-in li:nth-child(1){transition-delay:120ms !important}
html body.sp-sites .ss-types__card.is-in li:nth-child(2){transition-delay:180ms !important}
html body.sp-sites .ss-types__card.is-in li:nth-child(3){transition-delay:240ms !important}
html body.sp-sites .ss-types__card.is-in li:nth-child(4){transition-delay:300ms !important}

/* Compare tags pop when BA is in view */
html body.sp-sites .ss-compare__tag{
  opacity:0;
  transform:translate3d(0,-8px,0);
  transition:
    opacity .5s var(--ss-ease),
    transform .5s var(--ss-ease) !important;
  transition-duration:.5s !important;
}
html body.sp-sites .ss-compare.is-in .ss-compare__tag{
  opacity:1;
  transform:none;
}
html body.sp-sites .ss-compare.is-in .ss-compare__tag--antes{transition-delay:200ms !important}
html body.sp-sites .ss-compare.is-in .ss-compare__tag--depois{transition-delay:320ms !important}

/* CTA pulse ring once in view */
html body.sp-sites .ss-cta__btn{
  position:relative;
}
html body.sp-sites .ss-cta.is-in .ss-cta__btn{
  animation:ssCtaPulse 1.8s var(--ss-ease) .4s 2 !important;
  animation-duration:1.8s !important;
}

/* Footer soft rise */
html body.sp-sites .footer--revel{
  opacity:0;
  transform:translate3d(0,24px,0);
  transition:
    opacity .8s var(--ss-ease),
    transform .8s var(--ss-ease) !important;
  transition-duration:.8s !important;
}
html body.sp-sites .footer--revel.is-in{
  opacity:1;
  transform:none;
}

@keyframes ssIn{
  to{opacity:1;transform:none}
}
@keyframes ssInScale{
  to{opacity:1;transform:none}
}
@keyframes ssFade{
  to{opacity:1}
}
@keyframes ssCtaPulse{
  0%,100%{box-shadow:0 14px 32px rgba(255,106,0,.22)}
  50%{box-shadow:0 16px 40px rgba(255,106,0,.4),0 0 0 8px rgba(255,106,0,.12)}
}

@media (max-width:860px){
  .ss-hero__ba-intro{margin-bottom:.9rem;max-width:none}
  .ss-hero__ba-title{font-size:clamp(1.15rem,4.5vw,1.4rem)}
  .ss-hero__ba-desc{font-size:.92rem;line-height:1.45;margin-bottom:.75rem}
  .ss-hero__ba-project{padding-top:.65rem;font-size:.8rem}
  .ss-compare__stage{
    max-height:min(58vh,480px);
  }
  .ss-compare__layer--before img{object-position:10% 45%}
  .ss-compare__layer--after img{object-position:15% 40%}
  .ss-compare__tag{
    top:.65rem;
    padding:.42rem .65rem;
    font-size:.65rem;
    letter-spacing:.1em;
  }
  .ss-compare__tag--antes{left:.65rem}
  .ss-compare__tag--depois{right:.65rem}
  .ss-compare__knob{width:44px;height:44px}
  .ss-work,
  .ss-work:nth-child(even){
    grid-template-columns:1fr;
  }
  .ss-work:nth-child(even) .ss-work__media,
  .ss-work:nth-child(even) .ss-work__body{order:unset}
  .ss-work__media{
    aspect-ratio:16 / 10;
    max-height:280px;
  }
  .ss-work__body{
    padding:1.2rem 1.2rem 1.35rem;
  }
  .ss-work__text{max-width:none}
  .ss-types__grid{grid-template-columns:1fr}
  .ss-hero__actions{flex-direction:column;align-items:stretch;width:100%;max-width:360px;margin-left:auto;margin-right:auto}
  html body.sp-sites .ss-hero__btn{width:100%;justify-content:center}
}
@media (max-width:560px){
  .ss-hero h1{font-size:clamp(2.4rem,10.5vw,3.1rem)}
  .ss-types__head h2{font-size:clamp(1.55rem,8vw,2rem)}
  .ss-work__body{padding:1.15rem 1.1rem 1.3rem}
  .ss-cta h2{max-width:12ch}
}

/* Progressive enhancement: conteúdo nunca depende do reveal. */
html body.sp-sites:not(.ss-motion-ready) [data-ss],
html body.sp-sites:not(.ss-motion-ready) .ss-work__kind,
html body.sp-sites:not(.ss-motion-ready) .ss-work__body h3,
html body.sp-sites:not(.ss-motion-ready) .ss-work__where,
html body.sp-sites:not(.ss-motion-ready) .ss-work__text,
html body.sp-sites:not(.ss-motion-ready) .ss-types__card li,
html body.sp-sites:not(.ss-motion-ready) .ss-compare__tag,
html body.sp-sites:not(.ss-motion-ready) .footer--revel{
  opacity:1 !important;
  transform:none !important;
}

/* Em telas de toque o conteúdo é imediato. A animação permanece como
   acabamento de desktop, sem criar telas vazias em celulares lentos. */
@media (max-width:860px), (hover:none), (pointer:coarse){
  html body.sp-sites [data-ss],
  html body.sp-sites .ss-work__kind,
  html body.sp-sites .ss-work__body h3,
  html body.sp-sites .ss-work__where,
  html body.sp-sites .ss-work__text,
  html body.sp-sites .ss-types__card li,
  html body.sp-sites .ss-compare__tag,
  html body.sp-sites .footer--revel{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  html body.sp-sites .ss-work__media{
    max-height:none;
  }

  html body.sp-sites .ss-work__media img{
    transform:none !important;
  }
}

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

  html body.sp-sites [data-ss],
  html body.sp-sites .ss-work__kind,
  html body.sp-sites .ss-work__body h3,
  html body.sp-sites .ss-work__where,
  html body.sp-sites .ss-work__text,
  html body.sp-sites .ss-types__card li,
  html body.sp-sites .ss-compare__tag,
  html body.sp-sites .footer--revel{
    opacity:1 !important;
    transform:none !important;
  }

  html body.sp-sites .ss-scroll__img{
    animation:none !important;
    transform:none !important;
  }
}