/* =====================================================
   PRIME WEB — SERVIÇOS (CATÁLOGO DE SOLUÇÕES)
   Slider horizontal premium. Mobile first.
   Não depende de header.css / hero.css — self-contained.
   ===================================================== */

.services{
  position: relative;
  background: linear-gradient(180deg, var(--c-black) 0%, var(--c-graphite) 46%, var(--c-black) 100%);
  padding: clamp(72px, 12vw, 128px) 0 clamp(64px, 8vw, 100px);
  overflow: hidden;
}

/* leve textura de profundidade, ecoando o hero sem repeti-lo */
.services::before{
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--c-border) 40%, var(--c-border) 60%, transparent);
  opacity: 0.5;
  pointer-events: none;
}

/* =====================================================
   CABEÇALHO DA SEÇÃO
   ===================================================== */
.services__intro{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto clamp(44px, 6vw, 84px);
  padding: 0 var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.services__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-ice-dim);
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--c-border-strong);
  background: rgba(244,244,242,0.03);
  backdrop-filter: blur(8px);
}

.services__eyebrow-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 10px 2px var(--c-gold-dim);
  flex-shrink: 0;
}

.services__title{
  font-size: clamp(1.9rem, 5.6vw, 3.4rem);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c-ice);
  max-width: 16ch;
}

.services__break{ display: none; }

.services__subtitle{
  max-width: 480px;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 300;
  color: var(--c-ice-dim);
}

/* =====================================================
   ESTÁGIO DO SLIDER
   ===================================================== */
.services__stage{
  position: relative;
  z-index: 2;
  width: 100%;
  --services-peek: 48px; /* fatia real do próximo CARD visível — dentro da faixa 40–60px pedida */
}

.services__viewport{
  width: 100%;
  overflow: hidden;
  position: relative;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.services__viewport.is-dragging{
  cursor: grabbing;
}

.services__track{
  display: flex;
  width: 100%;
  will-change: transform;
}

/* =====================================================
   SLIDE — ESTRUTURA
   Técnica "peek carousel" (Netflix / Apple TV / Spotify):
   o slide ocupa o viewport menos uma fatia fixa (40–60px).
   Crucial: o slide em si NÃO tem gutter horizontal — quem
   cria o respiro de leitura é o .service-slide__content.
   Isso libera o .service-slide__visual para se estender até
   a borda real do slide, para que a fatia de "peek" mostre
   o CARD do próximo item (não um espaço vazio de padding).
   ===================================================== */
.service-slide{
  flex: 0 0 calc(100% - var(--services-peek));
  width: calc(100% - var(--services-peek));
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  opacity: 1;
  transform: scale(1);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}

.service-slide.is-peeked{
  opacity: 0.42;
  transform: scale(0.985);
}

.service-slide__visual{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3.1;
  border-radius: var(--radius-l);
  border: 1px solid var(--c-border-strong);
  background: var(--c-graphite-2);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.96) translateY(18px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  will-change: transform;
}

.service-slide.is-inview .service-slide__visual{
  opacity: 1;
  transform: scale(1) translateY(0);
}

.service-slide__visual::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 26% 18%, rgba(139,92,246,0.10), transparent 58%);
  pointer-events: none;
  z-index: 3;
}

.service-slide__visual::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(255,255,255,0.05), transparent 40%);
  pointer-events: none;
  z-index: 3;
}

.service-slide__visual img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-slide__content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 0 var(--container-pad);
}

.service-slide__index{
  font-family: var(--f-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--c-gold);
}

.service-slide__category{
  font-family: var(--f-body);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ice-dim);
}

.service-slide__title{
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c-ice);
  margin-top: 2px;
}

.service-slide__desc{
  max-width: 46ch;
  font-size: 0.98rem;
  line-height: 1.6;
  font-weight: 300;
  color: var(--c-ice-dim);
}

.service-slide__cta{
  margin-top: 10px;
}

/* =====================================================
   NAVEGAÇÃO — SETAS + INDICADORES
   ===================================================== */
.services__nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 36px;
  padding: 0 var(--container-pad);
}

.services__arrow{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--c-border-strong);
  background: rgba(244,244,242,0.03);
  color: var(--c-ice);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.services__arrow svg{ width: 18px; height: 18px; }

.services__arrow:hover{
  border-color: var(--c-gold-dim);
  background: rgba(139,92,246,0.08);
  color: var(--c-gold-soft);
  transform: translateY(-2px);
}
.services__arrow:active{ transform: translateY(0); }

.services__dots{
  display: flex;
  align-items: center;
  gap: 10px;
}

.services__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--c-border-strong);
  transition: width var(--dur-med) var(--ease-out),
              background var(--dur-med) var(--ease-out);
}

.services__dot:hover{ background: var(--c-ice-dim); }

.services__dot.is-active{
  width: 28px;
  background: var(--c-gold);
}

/* =====================================================
   PRIMITIVAS VISUAIS ABSTRATAS
   Reutilizadas e reposicionadas por composição (.viz--*)
   ===================================================== */
.viz{ position: relative; width: 100%; height: 100%; }

.viz-grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--c-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--c-border) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.5;
}

.viz-panel{
  position: absolute;
  border-radius: var(--radius-m);
  border: 1px solid var(--c-border);
  background: rgba(244,244,242,0.045);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.65);
}

.viz-line{
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold-dim), transparent);
}

.viz-line--v{
  width: 1px;
  height: 78%;
  background: linear-gradient(180deg, transparent, var(--c-gold-dim), transparent);
}

.viz-ring{
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--c-border-strong);
}

.viz-dot{
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 14px 3px var(--c-gold-dim);
}

.viz-blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
}

.viz-blob--gold{ background: radial-gradient(circle, rgba(139,92,246,0.4), rgba(139,92,246,0) 72%); }
.viz-blob--ice{ background: radial-gradient(circle, rgba(244,244,242,0.16), rgba(244,244,242,0) 72%); }

.viz-tag{
  position: absolute;
  font-family: var(--f-body);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--c-ice-dim);
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--c-border-strong);
  background: rgba(8,8,10,0.45);
  backdrop-filter: blur(8px);
  white-space: nowrap;
}

.viz-shape{
  position: absolute;
  border: 1px solid var(--c-border-strong);
  background: rgba(244,244,242,0.04);
  backdrop-filter: blur(6px);
}

.viz-diamond{
  position: absolute;
  border: 1px solid var(--c-gold-dim);
  transform: rotate(45deg);
}

.viz-flap{
  position: absolute;
  border: 1px solid var(--c-border-strong);
  background: rgba(244,244,242,0.04);
  backdrop-filter: blur(6px);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

/* leve flutuação ambiente, no espírito dos orbs do Hero */
@keyframes floatSlow{
  0%, 100%{ transform: translate(0,0); }
  50%{ transform: translate(-3%, 4%); }
}
@keyframes floatSlowAlt{
  0%, 100%{ transform: translate(0,0); }
  50%{ transform: translate(4%, -3%); }
}
@keyframes ringSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
@keyframes livePulse{
  0%, 100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.5); opacity: 0.55; }
}

/* =====================================================
   COMPOSIÇÃO 01 — SITES INSTITUCIONAIS
   Blueprint / camadas de páginas empilhadas
   ===================================================== */
.viz--sites .viz-panel:nth-of-type(1){
  top: 10%; left: 8%; width: 58%; height: 34%;
  transform: rotate(-2.4deg);
  animation: floatSlow 12s ease-in-out infinite;
}
.viz--sites .viz-panel:nth-of-type(2){
  top: 36%; left: 24%; width: 62%; height: 36%;
  transform: rotate(1.6deg);
  z-index: 2;
  animation: floatSlowAlt 14s ease-in-out infinite;
}
.viz--sites .viz-panel:nth-of-type(3){
  top: 60%; left: 12%; width: 50%; height: 30%;
  transform: rotate(-1deg);
  animation: floatSlow 16s ease-in-out infinite;
}
.viz--sites .viz-line--v{ left: 20%; top: 8%; }
.viz--sites .viz-dot{ top: 14%; right: 12%; }
.viz--sites .viz-tag--1{ bottom: 10%; left: 8%; }
.viz--sites .viz-tag--2{ top: 8%; right: 8%; }

/* =====================================================
   COMPOSIÇÃO 02 — LANDING PAGES
   Funil de conversão / profundidade de scroll
   ===================================================== */
.viz--landing .viz-panel:nth-of-type(1){
  top: 8%; left: 22%; width: 56%; height: 22%;
  opacity: 1;
}
.viz--landing .viz-panel:nth-of-type(2){
  top: 36%; left: 28%; width: 44%; height: 20%;
  opacity: 0.8;
}
.viz--landing .viz-panel:nth-of-type(3){
  top: 60%; left: 34%; width: 32%; height: 18%;
  opacity: 0.6;
}
.viz--landing .viz-line--diag-l,
.viz--landing .viz-line--diag-r{
  top: 6%;
  width: 46%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold-dim));
  transform-origin: left center;
}
.viz--landing .viz-line--diag-l{ left: 4%; transform: rotate(28deg); }
.viz--landing .viz-line--diag-r{ right: 4%; left: auto; transform: rotate(-28deg); background: linear-gradient(270deg, transparent, var(--c-gold-dim)); }
.viz--landing .viz-blob--gold{
  width: 46%; height: 46%;
  bottom: -8%; left: 50%;
  transform: translateX(-50%);
}
.viz--landing .viz-tag--cta{
  bottom: 12%; left: 50%;
  transform: translateX(-50%);
  border-color: var(--c-gold-dim);
  color: var(--c-gold-soft);
  padding: 10px 22px;
  font-size: 0.72rem;
}

/* =====================================================
   COMPOSIÇÃO 03 — CONVITES DIGITAIS INTERATIVOS
   Selo circular + envelope + brilhos
   ===================================================== */
.viz--invites .viz-ring--1{ width: 46%; height: 46%; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: ringSpin 40s linear infinite; }
.viz--invites .viz-ring--2{ width: 34%; height: 34%; top: 50%; left: 50%; transform: translate(-50%,-50%); border-color: var(--c-gold-dim); animation: ringSpin 30s linear infinite reverse; }
.viz--invites .viz-ring--3{ width: 22%; height: 22%; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.viz--invites .viz-flap{
  width: 44%; height: 30%;
  bottom: 6%; left: 50%;
  transform: translateX(-50%);
}
.viz--invites .viz-dot--a{ top: 18%; left: 22%; }
.viz--invites .viz-dot--b{ top: 26%; right: 20%; width: 5px; height: 5px; }
.viz--invites .viz-dot--c{ bottom: 30%; right: 26%; width: 4px; height: 4px; }
.viz--invites .viz-tag--1{ top: 10%; left: 50%; transform: translateX(-50%); }

/* =====================================================
   COMPOSIÇÃO 04 — IDENTIDADE VISUAL
   Formas sobrepostas / exploração de paleta
   ===================================================== */
.viz--identity .viz-blob--gold{ width: 40%; height: 40%; top: 6%; left: 4%; }
.viz--identity .viz-blob--ice{ width: 34%; height: 34%; bottom: 4%; right: 6%; }
.viz--identity .viz-shape--circle{
  width: 34%; height: 34%;
  top: 16%; left: 30%;
  border-radius: 50%;
}
.viz--identity .viz-shape--triangle{
  width: 30%; height: 26%;
  bottom: 14%; left: 12%;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  background: rgba(139,92,246,0.05);
}
.viz--identity .viz-shape--square{
  width: 24%; height: 24%;
  bottom: 16%; right: 14%;
  transform: rotate(12deg);
}
.viz--identity .viz-tag--1{ top: 8%; right: 8%; }

/* =====================================================
   COMPOSIÇÃO 05 — CRIAÇÃO DE LOGOS
   Mesa de exploração da marca (losangos em grade)
   ===================================================== */
.viz--logos .viz-diamond--1{ width: 64px; height: 64px; top: 14%; left: 12%; opacity: 0.9; }
.viz--logos .viz-diamond--2{ width: 40px; height: 40px; top: 20%; right: 18%; opacity: 0.5; }
.viz--logos .viz-diamond--3{ width: 30px; height: 30px; top: 46%; left: 30%; opacity: 0.35; }
.viz--logos .viz-diamond--4{ width: 88px; height: 88px; bottom: 10%; right: 12%; opacity: 0.7; border-color: var(--c-gold); }
.viz--logos .viz-diamond--5{ width: 22px; height: 22px; bottom: 20%; left: 14%; opacity: 0.4; }
.viz--logos .viz-diamond--6{ width: 50px; height: 50px; bottom: 34%; left: 54%; opacity: 0.55; }
.viz--logos .viz-tag--1{ bottom: 8%; left: 50%; transform: translateX(-50%); }

/* =====================================================
   COMPOSIÇÃO 06 — SOCIAL MEDIA
   Cartões de story empilhados + indicador ao vivo
   ===================================================== */
.viz--social .viz-story{
  width: 46%;
  aspect-ratio: 4/5;
  top: 50%; left: 50%;
}
.viz--social .viz-story--back{
  transform: translate(-50%,-50%) rotate(-9deg) translateX(-14%);
  opacity: 0.5;
}
.viz--social .viz-story--mid{
  transform: translate(-50%,-50%) rotate(6deg) translateX(10%);
  opacity: 0.75;
}
.viz--social .viz-story--front{
  transform: translate(-50%,-50%);
  z-index: 2;
  padding: 14px;
}
.viz-story__bars{
  display: flex;
  gap: 6px;
}
.viz-story__bars span{
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--c-border-strong);
}
.viz-story__bars span:first-child{ background: var(--c-gold); }

.viz--social .viz-dot--live{
  top: 12%; right: 16%;
  animation: livePulse 2.2s ease-in-out infinite;
}
.viz--social .viz-tag--1{ bottom: 8%; left: 50%; transform: translateX(-50%); }

/* =====================================================
   COMPOSIÇÃO 07 — CARDÁPIOS DIGITAIS
   Prato circular + linhas de itens + etiqueta de preço
   ===================================================== */
.viz--menu .viz-ring--plate{
  width: 58%; height: 58%;
  top: 50%; left: 38%;
  transform: translate(-50%,-50%);
  border-color: var(--c-gold-dim);
  border-width: 1px;
}
.viz--menu .viz-ring--plate::after{
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px solid var(--c-border);
}
.viz--menu .viz-line--menu{
  width: 30%;
  right: 10%;
}
.viz--menu .viz-line--menu-1{ top: 32%; }
.viz--menu .viz-line--menu-2{ top: 48%; width: 22%; }
.viz--menu .viz-line--menu-3{ top: 64%; width: 26%; }
.viz--menu .viz-tag--price{
  bottom: 16%; right: 12%;
  transform: rotate(-4deg);
  border-color: var(--c-gold-dim);
  color: var(--c-gold-soft);
}

/* =====================================================
   RESPONSIVIDADE (self-contained, mobile-first)
   ===================================================== */
@media (min-width: 640px){
  .services__break{ display: inline; }
}

@media (min-width: 900px){
  .services__stage{ --services-peek: 56px; }

  .service-slide{
    flex-direction: row;
    align-items: center;
    gap: clamp(40px, 5vw, 88px);
    min-height: 78vh;
  }

  .service-slide__visual{
    flex: 1 1 56%;
    aspect-ratio: 5 / 4;
  }

  .service-slide__content{
    flex: 1 1 40%;
    gap: 16px;
    /* padding só do lado externo (o que fica perto da borda real do
       slide); o lado interno já é resolvido pelo gap da linha acima */
    padding: 0 var(--container-pad) 0 0;
  }

  .service-slide:nth-of-type(even){
    flex-direction: row-reverse;
  }

  .service-slide:nth-of-type(even) .service-slide__content{
    padding: 0 0 0 var(--container-pad);
  }

  .services__nav{ margin-top: 48px; }
}

@media (min-width: 1280px){
  .services__intro{ margin-bottom: 96px; }
  .service-slide{ min-height: 72vh; }
}

@media (prefers-reduced-motion: reduce){
  .viz-panel,
  .viz-ring,
  .viz-diamond,
  .viz-dot--live{
    animation: none !important;
  }
}