/* Cabeçalho Sansou Hub: somente a logo, sem card e sem textos rotativos. */
.site-header{
  display:flex!important;
  position:relative!important;
  top:auto!important;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  min-height:122px;
  margin-top:14px!important;
  padding:8px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
}

.site-header.scrolled{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

.site-header .nav,
.site-header .menu-button{
  display:none!important;
}

.header-brand{
  position:relative;
  display:block!important;
  flex:0 0 auto;
  width:clamp(310px,35vw,430px);
  height:112px;
  overflow:hidden;
  border-radius:0;
  background-image:none!important;
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
  isolation:isolate;
}

.header-brand-halo{
  display:none!important;
}

.header-logo{
  width:100%!important;
  height:100%!important;
  opacity:0!important;
  pointer-events:none;
}

/* A própria logo mantém o mesmo fluxo de gradiente usado nos títulos rotativos. */
.header-brand::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(100deg,#ffffff 8%,#d8c5e7 52%,#9ee0e5 100%);
  background-size:220% 100%;
  -webkit-mask-image:url("assets/logo sansou hub (cabeçalho).png");
  mask-image:url("assets/logo sansou hub (cabeçalho).png");
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:left center;
  mask-position:left center;
  -webkit-mask-size:contain;
  mask-size:contain;
  opacity:.96;
  animation:headerSharedGlow 5.8s ease-in-out infinite;
  will-change:background-position;
}

.header-brand::after{
  content:none!important;
}

.site-header::after{
  content:none!important;
  display:none!important;
}

/* O texto antigo do hero continua oculto para não duplicar informação. */
.hero-copy > .eyebrow{
  display:none!important;
}

/* Serviços rotativos agora ficam centralizados acima do título principal do hero. */
.hero-copy::before{
  content:"Design & Comunicação Visual";
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:118px;
  margin:0 auto 26px;
  padding:0 20px;
  box-sizing:border-box;
  font-size:clamp(2.25rem,4.2vw,4.35rem);
  font-weight:850;
  line-height:1.02;
  letter-spacing:-.045em;
  text-align:center;
  text-wrap:balance;
  white-space:normal;
  background:linear-gradient(100deg,#ffffff 8%,#d8c5e7 52%,#9ee0e5 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  opacity:0;
  transform:translateY(16px);
  filter:blur(9px);
  animation:
    headerServiceCycle 22.5s cubic-bezier(.22,.8,.24,1) infinite,
    headerSharedGlow 5.8s ease-in-out infinite;
  will-change:opacity,transform,filter,background-position;
}

@keyframes headerSharedGlow{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/*
  Cada serviço ocupa 20% do ciclo.
  A troca acontece enquanto o texto está invisível: entra com fade + subida + blur,
  permanece legível e sai suavemente antes do próximo.
*/
@keyframes headerServiceCycle{
  0%{
    content:"Design & Comunicação Visual";
    opacity:0;
    transform:translateY(12px);
    filter:blur(8px);
  }
  3%,16%{
    content:"Design & Comunicação Visual";
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
  19.5%{
    content:"Design & Comunicação Visual";
    opacity:0;
    transform:translateY(-10px);
    filter:blur(7px);
  }

  20%{
    content:"Marketing Digital & Tráfego Pago";
    opacity:0;
    transform:translateY(12px);
    filter:blur(8px);
  }
  23%,36%{
    content:"Marketing Digital & Tráfego Pago";
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
  39.5%{
    content:"Marketing Digital & Tráfego Pago";
    opacity:0;
    transform:translateY(-10px);
    filter:blur(7px);
  }

  40%{
    content:"Sites & Presença Digital";
    opacity:0;
    transform:translateY(12px);
    filter:blur(8px);
  }
  43%,56%{
    content:"Sites & Presença Digital";
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
  59.5%{
    content:"Sites & Presença Digital";
    opacity:0;
    transform:translateY(-10px);
    filter:blur(7px);
  }

  60%{
    content:"Sistemas, Dados & Automação";
    opacity:0;
    transform:translateY(12px);
    filter:blur(8px);
  }
  63%,76%{
    content:"Sistemas, Dados & Automação";
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
  79.5%{
    content:"Sistemas, Dados & Automação";
    opacity:0;
    transform:translateY(-10px);
    filter:blur(7px);
  }

  80%{
    content:"Jingles & Produção Sonora";
    opacity:0;
    transform:translateY(12px);
    filter:blur(8px);
  }
  83%,96%{
    content:"Jingles & Produção Sonora";
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
  99.5%{
    content:"Jingles & Produção Sonora";
    opacity:0;
    transform:translateY(-10px);
    filter:blur(7px);
  }
  100%{
    content:"Design & Comunicação Visual";
    opacity:0;
    transform:translateY(12px);
    filter:blur(8px);
  }
}

@media (max-width:650px){
  .site-header{
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    min-height:92px;
    gap:0;
    margin-top:8px!important;
    padding:5px 0 8px!important;
  }

  .header-brand{
    width:215px;
    height:78px;
    margin:0 auto;
  }

  .hero-copy::before{
    min-height:104px;
    margin-bottom:18px;
    padding:0 8px;
    font-size:clamp(1.6rem,7.5vw,2.3rem);
    line-height:1.06;
    letter-spacing:-.035em;
  }
}

@media (max-width:390px){
  .site-header{
    min-height:86px;
  }

  .header-brand{
    width:190px;
    height:72px;
  }

  .hero-copy::before{
    min-height:100px;
    padding:0 4px;
    font-size:clamp(1.45rem,7.2vw,2rem);
  }
}

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

  .hero-copy::before{
    content:"Design & Comunicação Visual";
    opacity:1;
    transform:none;
    filter:none;
    animation:none!important;
  }
}

/* Evita o recorte da última letra nos títulos com gradiente, inclusive quando o destaque quebra de linha. */
h1 em,h2 em{
  padding-right:.06em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

.hero-actions{
  display:none!important;
}

.service-card.service-card--interactive{
  cursor:pointer;
  padding-bottom:76px;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* Mantém o efeito de luz original do card sem reaproveitar o pseudo-elemento para texto. */
.service-card.service-card--interactive::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  color:transparent;
  pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(143,214,220,.13),rgba(147,64,170,.06) 35%,transparent 68%);
  transition:opacity .3s ease;
}

.service-card.service-card--interactive:hover::before,
.service-card.service-card--interactive:focus-visible::before{
  opacity:1;
}

.service-card__details-hint{
  position:absolute;
  left:50%;
  bottom:24px;
  z-index:2;
  transform:translateX(-50%);
  color:#dfe5f5;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
  pointer-events:none;
  opacity:.78;
  transition:opacity .25s ease,transform .25s ease,color .25s ease;
}

.service-card.service-card--interactive:hover .service-card__details-hint,
.service-card.service-card--interactive:focus-visible .service-card__details-hint{
  opacity:1;
  color:var(--cyan);
  transform:translate(-50%,-2px);
}

.service-card.service-card--interactive:focus-visible{
  outline:2px solid rgba(143,214,220,.7);
  outline-offset:4px;
}

body.service-modal-open{
  overflow:hidden;
}

.service-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:24px;
}

.service-modal[hidden]{
  display:none;
}

.service-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,7,15,.76);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  animation:serviceModalFade .22s ease both;
}

.service-modal__dialog{
  position:relative;
  width:min(880px,100%);
  max-height:min(86vh,820px);
  overflow:auto;
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  background:
    radial-gradient(circle at 8% 0%,rgba(147,64,170,.22),transparent 34%),
    radial-gradient(circle at 100% 100%,rgba(143,214,220,.12),transparent 30%),
    rgba(11,15,29,.96);
  box-shadow:0 32px 100px rgba(0,0,0,.55),0 0 70px rgba(147,64,170,.10);
  padding:40px;
  animation:serviceModalIn .28s cubic-bezier(.2,.8,.2,1) both;
}

.service-modal__close{
  position:absolute;
  top:18px;
  right:18px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.11);
  border-radius:13px;
  background:rgba(255,255,255,.045);
  color:#fff;
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}

.service-modal__close:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(143,214,220,.28);
  transform:rotate(4deg);
}

.service-modal__eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  margin-bottom:18px;
  border:1px solid rgba(143,214,220,.18);
  border-radius:999px;
  background:rgba(143,214,220,.06);
  color:var(--cyan);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.service-modal__dialog h2{
  max-width:690px;
  margin:0 58px 14px 0;
  font-size:clamp(2rem,4vw,3.5rem);
  line-height:1;
  letter-spacing:-.045em;
}

.service-modal__intro{
  max-width:720px;
  margin:0 0 30px;
  color:var(--muted);
  font-size:1rem;
}

.service-modal__label{
  margin:0 0 14px;
  color:#eef1fa;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.service-modal__products{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}

.service-modal__product{
  min-height:118px;
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(255,255,255,.032);
}

.service-modal__product strong{
  display:block;
  margin-bottom:6px;
  color:#f7f8fc;
  font-size:.98rem;
}

.service-modal__product span{
  display:block;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.5;
}

@keyframes serviceModalFade{
  from{opacity:0}
  to{opacity:1}
}

@keyframes serviceModalIn{
  from{opacity:0;transform:translateY(16px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media (max-width:700px){
  .service-card.service-card--interactive{
    padding-bottom:70px;
  }

  .service-card__details-hint{
    bottom:20px;
  }

  .service-modal{
    padding:12px;
    align-items:end;
  }

  .service-modal__dialog{
    width:100%;
    max-height:90vh;
    padding:30px 18px 22px;
    border-radius:24px 24px 18px 18px;
  }

  .service-modal__close{
    top:14px;
    right:14px;
  }

  .service-modal__dialog h2{
    margin-right:48px;
    font-size:clamp(1.8rem,9vw,2.6rem);
  }

  .service-modal__intro{
    margin-bottom:24px;
    font-size:.94rem;
  }

  .service-modal__products{
    grid-template-columns:1fr;
  }

  .service-modal__product{
    min-height:0;
  }
}

@media (prefers-reduced-motion:reduce){
  .service-modal__backdrop,
  .service-modal__dialog{
    animation:none;
  }
}

/* Jornada: somente texto, centralizado pelo próprio card (.journey-stage). */
.journey-nav,
.journey-step,
.journey-visual{
  display:none!important;
}

.journey-stage{
  position:relative!important;
  min-height:390px;
}

.journey-slide{
  position:absolute!important;
  inset:0!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:40px 32px!important;
  text-align:center!important;
}

.journey-slide > div:first-child{
  width:100%!important;
  max-width:680px!important;
  margin:0 auto!important;
  padding:0!important;
  padding-right:0!important;
  padding-bottom:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}

.journey-slide h3{
  width:auto!important;
  max-width:none!important;
  margin:0 auto 16px!important;
  font-size:clamp(2rem,2.7vw,2.75rem)!important;
  line-height:1.06!important;
  letter-spacing:-.045em!important;
  white-space:nowrap!important;
  text-align:center!important;
  background:linear-gradient(115deg,#ffffff 12%,#dff7f8 48%,#c8a6dc 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 10px 24px rgba(143,214,220,.07));
}

.journey-slide p{
  width:100%!important;
  max-width:540px!important;
  margin:0 auto!important;
  color:#aeb8d0;
  font-size:clamp(.96rem,1.08vw,1.04rem)!important;
  line-height:1.68!important;
  text-align:center!important;
  text-wrap:balance;
}

@media (max-width:640px){
  .journey-stage{
    min-height:330px!important;
  }

  .journey-slide{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:28px 20px!important;
    text-align:center!important;
  }

  .journey-slide > div:first-child{
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
    padding:0!important;
    padding-right:0!important;
    padding-bottom:0!important;
  }

  .journey-slide h3{
    max-width:none!important;
    margin:0 auto 14px!important;
    font-size:clamp(1.85rem,8.2vw,2.35rem)!important;
    line-height:1.1!important;
    white-space:normal!important;
    text-wrap:balance;
    text-align:center!important;
  }

  .journey-slide p{
    max-width:390px!important;
    margin:0 auto!important;
    font-size:.94rem!important;
    line-height:1.6!important;
    text-align:center!important;
  }
}

/* Prova social: centralizada no espaço real entre a jornada e o contato. */
.contact{
  position:relative!important;
  padding-top:275px!important;
  display:block!important;
}

.contact::before{
  content:"PROJETOS REALIZADOS PARA";
  position:absolute;
  top:-18px;
  left:0;
  display:block;
  width:100%;
  margin:0;
  color:#d9deec;
  font-size:.74rem;
  font-weight:700;
  line-height:1;
  letter-spacing:.18em;
  text-align:center;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:.88;
}

.contact::after{
  content:"";
  position:absolute;
  top:8px;
  left:50%;
  display:block;
  width:min(980px,100%);
  height:190px;
  margin:0;
  transform:translateX(-50%);
  background-image:
    url("assets/logo clientes/LOGO REDE MERCADÃO CENTRAL (BRANCO).png"),
    url("assets/logo clientes/LOGO CHEFES EM CASA (BRANCO).png"),
    url("assets/logo clientes/LOGO TATÍSSIMA (BRANCO).png");
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-size:auto 155px,auto 165px,auto 86px;
  background-position:14% center,50% center,86% center;
  filter:brightness(0) invert(1);
  opacity:.98;
  pointer-events:none;
}

.contact-panel{
  width:100%;
}

@media (max-width:800px){
  .contact{
    padding-top:235px!important;
  }

  .contact::before{
    top:-12px;
    font-size:.68rem;
    letter-spacing:.14em;
  }

  .contact::after{
    top:12px;
    width:min(760px,100%);
    height:170px;
    background-size:auto 132px,auto 140px,auto 74px;
    background-position:12% center,50% center,88% center;
  }
}

@media (max-width:560px){
  .contact{
    padding-top:235px!important;
  }

  .contact::before{
    top:0;
  }

  /* Mobile: mantém as três logos na mesma área e no mesmo sistema de posicionamento. */
  .contact::after{
    content:"";
    top:42px;
    left:50%;
    width:100%;
    height:132px;
    transform:translateX(-50%);
    background-image:
      url("assets/logo clientes/LOGO REDE MERCADÃO CENTRAL (BRANCO).png"),
      url("assets/logo clientes/LOGO CHEFES EM CASA (BRANCO).png"),
      url("assets/logo clientes/LOGO TATÍSSIMA (BRANCO).png");
    background-repeat:no-repeat,no-repeat,no-repeat;
    background-size:34% auto,30% auto,16.5% auto;
    background-position:2% center,50% center,98% center;
    filter:brightness(0) invert(1);
    opacity:.98;
    pointer-events:none;
  }
}

/*
  Correção de toque nos cards de serviços.
  Em telas touch, evita que o hover simulado mova o card antes do evento click.
  No desktop, o comportamento visual original permanece inalterado.
*/
@media (hover:none), (pointer:coarse){
  .service-card.service-card--interactive:hover{
    transform:none!important;
    border-color:var(--line)!important;
  }

  .service-card.service-card--interactive:hover::before,
  .service-card.service-card--interactive:hover::after{
    opacity:0!important;
  }

  .service-card.service-card--interactive:hover .service-card__details-hint{
    opacity:.78!important;
    color:#dfe5f5!important;
    transform:translateX(-50%)!important;
  }

  .service-modal__backdrop{
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
}

/* Desktop: o cabeçalho mantém somente a logo; o destaque rotativo pertence ao hero. */
@media (min-width:651px){
  .hero-copy::before{
    width:min(100%,1120px);
    min-height:130px;
    font-size:clamp(2.4rem,4.15vw,4.35rem);
  }
}

/* Hero: remove o carrossel lateral e centraliza título + descrição. */
.hero{
  grid-template-columns:minmax(0,1fr)!important;
  justify-items:center!important;
  gap:0!important;
}

.hero-visual{
  display:none!important;
}

.hero-copy{
  width:min(100%,1050px);
  max-width:1050px;
  margin:0 auto!important;
  text-align:center!important;
}

.hero-copy h1{
  max-width:1050px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.hero-lead{
  max-width:800px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

/* Fundo digital animado inspirado na referência enviada, sem usar a imagem original. */
body{
  background:
    radial-gradient(circle at 16% 38%,rgba(143,214,220,.075),transparent 30%),
    radial-gradient(circle at 84% 30%,rgba(147,64,170,.11),transparent 34%),
    linear-gradient(180deg,#090d1b 0%,#080b15 52%,#070a13 100%)!important;
}

.grid-overlay{
  inset:-2%!important;
  z-index:-2!important;
  opacity:.82!important;
  pointer-events:none!important;
  background-image:
    linear-gradient(rgba(143,214,220,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(177,127,191,.022) 1px,transparent 1px),
    url("assets/sansou-digital-background.svg")!important;
  background-size:58px 58px,58px 58px,cover!important;
  background-position:center,center,center!important;
  background-repeat:repeat,repeat,no-repeat!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  animation:sansouBackdropDrift 22s ease-in-out infinite alternate!important;
  will-change:transform;
}

.grid-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(8,11,21,.32) 0%,transparent 18%,transparent 70%,rgba(8,11,21,.5) 100%),
    radial-gradient(ellipse at center,transparent 18%,rgba(8,11,21,.14) 72%,rgba(8,11,21,.5) 100%);
  pointer-events:none;
}

.grid-overlay::after{
  content:"";
  position:absolute;
  inset:-12%;
  background:
    radial-gradient(circle at 28% 46%,rgba(143,214,220,.11),transparent 24%),
    radial-gradient(circle at 72% 48%,rgba(177,127,191,.12),transparent 27%);
  filter:blur(28px);
  opacity:.72;
  pointer-events:none;
  animation:sansouBackdropGlow 12s ease-in-out infinite alternate;
}

.ambient-a{
  opacity:.16!important;
  animation:ambientFloatA 19s ease-in-out infinite alternate!important;
}

.ambient-b{
  opacity:.13!important;
  animation:ambientFloatB 22s ease-in-out infinite alternate!important;
}

@keyframes sansouBackdropDrift{
  0%{transform:translate3d(-.7%,-.35%,0) scale(1.025)}
  50%{transform:translate3d(.3%,.45%,0) scale(1.04)}
  100%{transform:translate3d(.8%,-.15%,0) scale(1.03)}
}

@keyframes sansouBackdropGlow{
  from{transform:translate3d(-2%,1%,0) scale(.98);opacity:.5}
  to{transform:translate3d(2%,-1%,0) scale(1.05);opacity:.82}
}

@media (max-width:650px){
  .grid-overlay{
    inset:-3%!important;
    opacity:.62!important;
    background-size:72px 72px,72px 72px,auto 100%!important;
    background-position:center,center,center top!important;
    animation-duration:28s!important;
  }

  .grid-overlay::after{
    opacity:.5;
    filter:blur(36px);
  }
}

@media (prefers-reduced-motion:reduce){
  .grid-overlay{
    animation:none!important;
    background-image:
      linear-gradient(rgba(143,214,220,.026) 1px,transparent 1px),
      linear-gradient(90deg,rgba(177,127,191,.022) 1px,transparent 1px),
      radial-gradient(ellipse at 36% 48%,rgba(143,214,220,.11),transparent 32%),
      radial-gradient(ellipse at 72% 48%,rgba(147,64,170,.12),transparent 34%)!important;
    background-size:58px 58px,58px 58px,auto,auto!important;
  }

  .grid-overlay::after{
    animation:none!important;
  }
}

/* =========================================================
   HEADER E RODAPÉ CLAROS
   Alteração visual restrita às áreas de navegação e rodapé.
   ========================================================= */

.site-header,
.site-header.scrolled{
  background:#ffffff!important;
  border-color:rgba(41,23,111,.10)!important;
  box-shadow:0 12px 40px rgba(41,23,111,.08)!important;
}

.header-brand-halo,
.header-brand::before{
  display:none!important;
  content:none!important;
}

.header-logo{
  opacity:1!important;
  filter:none!important;
  animation:none!important;
}

.header-brand:hover .header-logo{
  filter:none!important;
}

/* Botões do cabeçalho nas cores da marca */
body .site-header .nav a{
  border-color:rgba(128,94,228,.24)!important;
  background:#ffffff!important;
  color:#29176f!important;
  box-shadow:none!important;
}

body .site-header .nav a:hover{
  border-color:rgba(96,157,252,.50)!important;
  background:rgba(178,181,235,.18)!important;
  color:#29176f!important;
  box-shadow:0 8px 22px rgba(41,23,111,.08)!important;
}

body .site-header .nav .nav-cta{
  border-color:transparent!important;
  background:linear-gradient(135deg,#805ee4,#609dfc)!important;
  color:#ffffff!important;
  box-shadow:0 8px 22px rgba(128,94,228,.20)!important;
}

.menu-button{
  color:#29176f!important;
}

@media (max-width:980px){
  .nav.open{
    background:#ffffff!important;
    border-color:rgba(41,23,111,.10)!important;
  }
}

/* Rodapé branco sem alterar sua largura ou estrutura */
.footer{
  background:#ffffff!important;
  color:#5f6075!important;
  border-top-color:rgba(41,23,111,.10)!important;
  box-shadow:0 0 0 100vmax #ffffff!important;
  clip-path:inset(0 -100vmax);
}

.footer-logo{
  aspect-ratio:auto!important;
  filter:none!important;
  animation:none!important;
}

.footer-logo-link:hover .footer-logo{
  filter:none!important;
}

.footer a{
  color:#29176f!important;
}

.footer-contact-link{
  border-color:rgba(128,94,228,.18)!important;
  background:#ffffff!important;
  color:#29176f!important;
  box-shadow:none!important;
}

.footer-contact-link:hover{
  border-color:rgba(96,157,252,.42)!important;
  background:rgba(178,181,235,.16)!important;
  color:#805ee4!important;
  box-shadow:0 6px 18px rgba(41,23,111,.07)!important;
}

.footer-contact-icon{
  color:#609dfc!important;
}

.footer-contact-link:hover .footer-contact-icon{
  color:#805ee4!important;
}

.footer a.back-to-top:hover{
  color:#805ee4!important;
}


/* =========================================================
   SERVICE MODALS V2 — padrão visual Sansou Hub
   ========================================================= */

.service-modal{
  z-index:1800!important;
  padding:28px!important;
}

.service-modal__backdrop{
  background:
    radial-gradient(circle at 18% 12%,rgba(138,79,255,.18),transparent 30%),
    radial-gradient(circle at 82% 88%,rgba(84,152,255,.14),transparent 32%),
    rgba(9,4,26,.74)!important;
  backdrop-filter:blur(16px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(120%)!important;
}

.service-modal__dialog{
  position:relative!important;
  width:min(960px,100%)!important;
  max-height:min(88svh,860px)!important;
  padding:0!important;
  overflow:auto!important;
  border:1px solid rgba(27,15,74,.10)!important;
  border-radius:26px!important;
  background:#F4F7FA!important;
  color:#334155!important;
  box-shadow:
    0 38px 110px rgba(9,4,26,.42),
    0 0 0 1px rgba(255,255,255,.45) inset!important;
  animation:serviceModalInV2 .34s cubic-bezier(.2,.78,.2,1) both!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(138,79,255,.42) transparent;
}

.service-modal__dialog::-webkit-scrollbar{
  width:9px;
}

.service-modal__dialog::-webkit-scrollbar-track{
  background:transparent;
}

.service-modal__dialog::-webkit-scrollbar-thumb{
  border:3px solid transparent;
  border-radius:999px;
  background:linear-gradient(180deg,#8A4FFF,#5498FF);
  background-clip:padding-box;
}

.service-modal__hero{
  position:relative!important;
  isolation:isolate!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:36px!important;
  align-items:center!important;
  min-height:280px!important;
  padding:44px 48px 40px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 8% 5%,rgba(138,79,255,.32),transparent 34%),
    radial-gradient(circle at 94% 92%,rgba(84,152,255,.26),transparent 35%),
    linear-gradient(135deg,#09041A 0%,#12072F 52%,#14254A 100%)!important;
}

.service-modal__hero::before{
  content:""!important;
  position:absolute!important;
  width:360px!important;
  height:360px!important;
  right:-190px!important;
  top:-210px!important;
  z-index:-1!important;
  border-radius:50%!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:
    0 0 0 42px rgba(255,255,255,.025),
    0 0 0 88px rgba(255,255,255,.018)!important;
}

.service-modal__hero-copy{
  min-width:0!important;
}

.service-modal__eyebrow{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  width:auto!important;
  min-height:0!important;
  margin:0 0 16px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  color:#C8B8FF!important;
  font-family:"Inter",sans-serif!important;
  font-size:.72rem!important;
  font-weight:700!important;
  letter-spacing:.15em!important;
  text-transform:uppercase!important;
}

.service-modal__eyebrow::before{
  content:""!important;
  flex:0 0 32px!important;
  width:32px!important;
  height:1px!important;
  background:linear-gradient(90deg,#8A4FFF,#5498FF)!important;
}

.service-modal__dialog h2{
  max-width:670px!important;
  margin:0 0 16px!important;
  color:#fff!important;
  font-family:"Poppins","Inter",sans-serif!important;
  font-size:clamp(2.25rem,4.4vw,3.75rem)!important;
  font-weight:700!important;
  line-height:1.02!important;
  letter-spacing:-.05em!important;
  text-wrap:balance!important;
}

.service-modal__intro{
  max-width:690px!important;
  margin:0!important;
  color:#D1D5E4!important;
  font-size:1rem!important;
  line-height:1.7!important;
}

.service-modal__icon-wrap{
  position:relative!important;
  z-index:1!important;
  flex:0 0 auto!important;
  width:126px!important;
  height:126px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:24px!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035))!important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.12)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  backdrop-filter:blur(12px)!important;
}

.service-modal__icon{
  display:block!important;
  width:86px!important;
  height:86px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.18))!important;
}

.service-modal__close{
  top:18px!important;
  right:18px!important;
  z-index:8!important;
  width:44px!important;
  height:44px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.07)!important;
  color:#fff!important;
  font-family:"Inter",sans-serif!important;
  font-size:1.45rem!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  backdrop-filter:blur(10px)!important;
}

.service-modal__close:hover{
  transform:rotate(90deg)!important;
  border-color:rgba(138,79,255,.55)!important;
  background:rgba(138,79,255,.20)!important;
}

.service-modal__body{
  padding:34px 48px 44px!important;
  background:#F4F7FA!important;
}

.service-modal__label{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:0 0 18px!important;
  color:#1B0F4A!important;
  font-family:"Inter",sans-serif!important;
  font-size:.76rem!important;
  font-weight:800!important;
  letter-spacing:.13em!important;
  text-transform:uppercase!important;
}

.service-modal__label::after{
  content:""!important;
  flex:1 1 auto!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(138,79,255,.28),transparent)!important;
}

.service-modal__products{
  counter-reset:serviceProduct!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  margin:0!important;
  padding:0!important;
}

.service-modal__product{
  counter-increment:serviceProduct!important;
  position:relative!important;
  min-height:124px!important;
  padding:20px 20px 20px 58px!important;
  overflow:hidden!important;
  border:1px solid rgba(27,15,74,.08)!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 10px 28px rgba(27,15,74,.055)!important;
  transition:
    transform .24s cubic-bezier(.2,.72,.2,1),
    border-color .24s ease,
    box-shadow .24s ease!important;
}

.service-modal__product::before{
  content:counter(serviceProduct,decimal-leading-zero)!important;
  position:absolute!important;
  top:20px!important;
  left:18px!important;
  color:#8A4FFF!important;
  font-family:"Poppins","Inter",sans-serif!important;
  font-size:.73rem!important;
  font-weight:700!important;
  letter-spacing:.03em!important;
}

.service-modal__product::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:3px!important;
  background:linear-gradient(180deg,#8A4FFF,#5498FF)!important;
  opacity:0!important;
  transform:scaleY(.45)!important;
  transition:opacity .24s ease,transform .24s ease!important;
}

.service-modal__product:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(138,79,255,.18)!important;
  box-shadow:0 16px 34px rgba(27,15,74,.09)!important;
}

.service-modal__product:hover::after{
  opacity:1!important;
  transform:scaleY(1)!important;
}

.service-modal__product strong{
  display:block!important;
  margin:0 0 7px!important;
  color:#1B0F4A!important;
  font-family:"Poppins","Inter",sans-serif!important;
  font-size:.98rem!important;
  font-weight:700!important;
  line-height:1.3!important;
}

.service-modal__product span{
  display:block!important;
  color:#64748B!important;
  font-size:.88rem!important;
  line-height:1.55!important;
}

@keyframes serviceModalInV2{
  from{
    opacity:0;
    transform:translateY(24px) scale(.975);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@media(max-width:760px){
  .service-modal{
    padding:10px!important;
    align-items:end!important;
  }

  .service-modal__dialog{
    width:100%!important;
    max-height:92svh!important;
    border-radius:24px 24px 16px 16px!important;
  }

  .service-modal__hero{
    grid-template-columns:1fr!important;
    gap:20px!important;
    min-height:0!important;
    padding:38px 22px 30px!important;
  }

  .service-modal__dialog h2{
    max-width:calc(100% - 42px)!important;
    margin-bottom:14px!important;
    font-size:clamp(2rem,9.6vw,2.9rem)!important;
  }

  .service-modal__intro{
    font-size:.94rem!important;
    line-height:1.65!important;
  }

  .service-modal__icon-wrap{
    display:none!important;
  }

  .service-modal__body{
    padding:26px 18px 30px!important;
  }

  .service-modal__products{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .service-modal__product{
    min-height:0!important;
    padding:18px 17px 18px 52px!important;
    border-radius:14px!important;
  }

  .service-modal__product::before{
    top:18px!important;
    left:16px!important;
  }

  .service-modal__close{
    top:14px!important;
    right:14px!important;
    width:42px!important;
    height:42px!important;
  }
}

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

  .service-modal__product,
  .service-modal__close{
    transition:none!important;
  }
}


/* =========================================================
   SERVICE MODALS V3 — centralizado, sem ícone/numeração
   ========================================================= */

.service-modal__hero{
  grid-template-columns:1fr!important;
  gap:0!important;
  min-height:240px!important;
  padding:42px 48px 36px!important;
  text-align:center!important;
}

.service-modal__hero-copy{
  width:min(760px,100%)!important;
  margin:0 auto!important;
  text-align:center!important;
}

.service-modal__eyebrow{
  justify-content:center!important;
}

.service-modal__dialog h2,
.service-modal__intro{
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

.service-modal__icon-wrap{
  display:none!important;
}

.service-modal__label{
  display:none!important;
}

.service-modal__body{
  padding-top:30px!important;
}

.service-modal__products{
  counter-reset:none!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
}

.service-modal__product{
  counter-increment:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-height:210px!important;
  padding:24px 22px 20px!important;
  text-align:center!important;
  border:1px solid transparent!important;
  border-radius:20px!important;
  background:
    linear-gradient(rgba(255,255,255,.80),rgba(255,255,255,.72)) padding-box,
    linear-gradient(135deg,rgba(138,79,255,.62),rgba(84,152,255,.52),rgba(178,181,235,.58)) border-box!important;
  -webkit-backdrop-filter:blur(18px) saturate(130%)!important;
  backdrop-filter:blur(18px) saturate(130%)!important;
  box-shadow:
    0 16px 34px rgba(27,15,74,.08),
    inset 0 1px 0 rgba(255,255,255,.78)!important;
}

.service-modal__product::before{
  display:none!important;
  content:none!important;
}

.service-modal__product::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  width:auto!important;
  height:auto!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 15% 10%,rgba(138,79,255,.10),transparent 32%),
    radial-gradient(circle at 88% 88%,rgba(84,152,255,.10),transparent 34%)!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:none!important;
}

.service-modal__product > *{
  position:relative!important;
  z-index:1!important;
}

.service-modal__product strong{
  margin-bottom:10px!important;
  color:#1B0F4A!important;
  font-size:1.02rem!important;
  text-align:center!important;
}

.service-modal__product > span:not(.service-modal__interest span){
  color:#64748B!important;
  text-align:center!important;
  line-height:1.58!important;
}

.service-modal__interest{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-width:180px!important;
  min-height:44px!important;
  margin-top:auto!important;
  padding:11px 18px!important;
  border:1px solid rgba(255,255,255,.30)!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#8A4FFF 0%,#5498FF 100%)!important;
  color:#fff!important;
  font-family:"Inter",sans-serif!important;
  font-size:.88rem!important;
  font-weight:700!important;
  line-height:1!important;
  text-decoration:none!important;
  box-shadow:
    0 10px 24px rgba(84,152,255,.18),
    0 8px 20px rgba(138,79,255,.14),
    inset 0 1px 0 rgba(255,255,255,.22)!important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease!important;
}

.service-modal__interest span{
  color:#fff!important;
  font-size:1rem!important;
  line-height:1!important;
  transition:transform .22s ease!important;
}

.service-modal__interest:hover{
  transform:translateY(-2px)!important;
  filter:brightness(1.04)!important;
  box-shadow:
    0 14px 30px rgba(84,152,255,.24),
    0 10px 26px rgba(138,79,255,.20),
    inset 0 1px 0 rgba(255,255,255,.28)!important;
}

.service-modal__interest:hover span{
  transform:translate(2px,-2px)!important;
}

.service-modal__product:hover{
  transform:translateY(-4px)!important;
  border-color:transparent!important;
  box-shadow:
    0 20px 42px rgba(27,15,74,.11),
    0 0 26px rgba(138,79,255,.08),
    inset 0 1px 0 rgba(255,255,255,.82)!important;
}

@media(max-width:760px){
  .service-modal__hero{
    padding:36px 22px 28px!important;
  }

  .service-modal__body{
    padding:22px 16px 26px!important;
  }

  .service-modal__products{
    grid-template-columns:1fr!important;
  }

  .service-modal__product{
    min-height:190px!important;
    padding:22px 18px 18px!important;
  }

  .service-modal__interest{
    width:100%!important;
    min-width:0!important;
  }
}


/* =========================================================
   SERVICE MODALS V4 — cards limpos, borda colorida
   ========================================================= */

.service-modal__product{
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,rgba(138,79,255,.62),rgba(84,152,255,.52),rgba(178,181,235,.58)) border-box!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

.service-modal__product::after{
  display:none!important;
  content:none!important;
}

.service-modal__interest{
  gap:0!important;
}

.service-modal__interest span{
  display:none!important;
}


/* =========================================================
   SERVICE MODALS V5 — mais respiro no topo mobile
   ========================================================= */

@media(max-width:760px){
  .service-modal__hero{
    padding-top:64px!important;
  }

  .service-modal__eyebrow{
    margin-top:6px!important;
  }

  .service-modal__dialog h2{
    margin-top:4px!important;
  }
}


/* =========================================================
   SERVICE MODALS V6 — corrige overscroll/bounce no iOS
   ========================================================= */

@media(max-width:760px){
  body.service-modal-open{
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }

  .service-modal{
    overscroll-behavior:none!important;
    overflow:hidden!important;
  }

  .service-modal__dialog{
    height:min(92dvh,860px)!important;
    max-height:min(92dvh,860px)!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
    background:#F4F7FA!important;
  }

  .service-modal__hero{
    flex:0 0 auto!important;
  }

  .service-modal__body{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
}


/* =========================================================
   SERVICE MODALS V7 — modal inteiro volta a rolar no mobile
   ========================================================= */

@media(max-width:760px){
  .service-modal__dialog{
    height:auto!important;
    max-height:92dvh!important;
    display:block!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .service-modal__hero{
    flex:none!important;
  }

  .service-modal__body{
    overflow:visible!important;
    min-height:0!important;
  }
}


/* =========================================================
   SERVICE MODALS V8 — espaçamento fixo antes do CTA
   ========================================================= */

.service-modal__interest{
  margin-top:24px!important;
}

@media(max-width:760px){
  .service-modal__interest{
    margin-top:22px!important;
  }
}


/* =========================================================
   SERVICE MODALS V9 — CTAs nivelados no desktop
   ========================================================= */

@media(min-width:761px){
  .service-modal__product{
    height:100%!important;
  }

  .service-modal__interest{
    margin-top:auto!important;
  }
}