:root {
  --bg: #0b0b0b;
  --bg-sec: #111111;
  --primary: #d4af37;
  --primary-dark: #b8962e;
  --text: #ffffff;
  --text-sec: #aaaaaa;

  /* PALETA DOURADO METÁLICO — usada pelo sistema de detalhes
     animados (hero, nav, linhas/pontos decorativos). Sempre
     dourado metálico + preto: sem amarelo neon, sem glow forte. */
  --gold: #d4af37;
  --gold-light: #e9cf7a;
  --gold-lighter: #fff6de;
  --gold-dark: #8a6b1e;
  --gold-deep: #4a3810;
  --black-deep: #050505;

  /* BLOCO 7 — VISUAL ENGINE: tokens do novo sistema */
  --bg-black: #060606;
  --bg-graphite: #161616;
  --bg-graphite-2: #101010;
  --mono: 'JetBrains Mono', 'Courier New', monospace;

  --tech-grid:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 0,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px,
      transparent 120px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.035) 0,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px,
      transparent 120px
    );
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background: radial-gradient(circle at top, #111111, #000000);
  color: var(--text);
  overflow-x: hidden;
}

/* Compensa a altura do header fixo/sticky ao rolar até uma seção
   pela navegação, para a transição parecer contínua, sem saltos. */
#home,
#about,
#services,
#pricing,
#diferenciais,
#faq {
  scroll-margin-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* EFEITO DOURADO */
.blur {
  position: absolute;
  width: 400px;
  height: 400px;
  background: var(--primary);
  filter: blur(150px);
  opacity: 0.15;
  top: 10%;
  left: 20%;
  z-index: -1;
}

/* HEADER */
header {
  padding: 20px;
  text-align: center;
}

header span {
  color: var(--primary);
}

/* HERO */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.hero-text {
  max-width: 500px;
}

.hero-text h2 {
  font-size: 120px;
  line-height: 0.9;
}

.hero-text p {
  margin: 15px 0;
  color: var(--text-sec);
}

/* BOTÃO */
.btn{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    background: var(--primary);
    color: #000;
    padding: 12px 25px;
    border-radius: 6px;
    text-decoration: none;
    transition: .35s;
}

.btn::after{
    content: "";

    position: absolute;

    top: -60%;
    left: -150%;

    width: 60px;
    height: 220%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.2),
        rgba(255,255,255,.9),
        rgba(255,255,255,.2),
        transparent
    );

    transform: rotate(25deg);

    opacity: 0;
}

.btn:hover{
    background: var(--primary-dark);
}

.btn:hover::after{
    opacity: 1;
    animation: shine .8s ease forwards;
}

/* ============================= */

.btn-secondary{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    background: transparent;
    color: #fff;
    padding: 14px 24px;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 4px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.15);
    transition: .35s;

    margin-left: 30px;
}

.btn-secondary::after{
    content: "";

    position: absolute;

    top: -60%;
    left: -150%;

    width: 60px;
    height: 220%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.2),
        rgba(255,255,255,.9),
        rgba(255,255,255,.2),
        transparent
    );

    transform: rotate(25deg);

    opacity: 0;
}

.btn-secondary:hover{
    background: #d4aa2a;
    color: #000;
    border-color: #d4aa2a;
}

.btn-secondary:hover::after{
    opacity: 1;
    animation: shine .8s ease forwards;
}

/* ============================= */

.buttons{
    display: flex;
    gap: 90px;
    margin-top: 20px;
    align-items: center;
}

/* Faixa de brilho */

@keyframes shine{

    from{
        left: -150%;
    }

    to{
        left: 170%;
    }

}

/* IMAGEM */
.hero-img {
  transform: translateY(-20px);
  flex-shrink: 0;
}

.hero-img img {
  display: block;
  width: 200px;
  height: auto;
  max-height: 260px;
  border-radius: 50%;
  border: 3px solid var(--primary);
}

@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    text-align: center;
  }

  .hero-img {
    transform: none;
    margin-top: 30px;
  }

  .hero-img img {
    width: 150px;
    max-height: 200px;
  }
}

/* =========================================================
   BLOCO 2A — MELHORIAS VISUAIS DO HERO (100% aditivo)
   Nada acima foi removido ou alterado. Estas regras só
   adicionam glow, profundidade e entrada suave por cima
   dos efeitos originais do hero.
========================================================= */

/* 2. Halo dourado pequeno e concentrado atrás da foto (não altera tamanho/proporção/posição/border-radius da foto) */
.hero-img {
  position: relative;
}

.hero-img::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(212, 175, 55, 0.30) 0%,
    rgba(212, 175, 55, 0.12) 55%,
    rgba(212, 175, 55, 0) 78%
  );
  filter: blur(14px);
  animation: heroPhotoGlow 8s ease-in-out infinite;
}

@keyframes heroPhotoGlow {
  0%, 100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

/* 4. Profundidade extra na foto via sombra (não altera largura/altura/proporção) */
.hero-img img {
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(212, 175, 55, 0.18);
  transition: box-shadow 0.4s ease;
}

/* 6. Realce discreto no hover da foto, sem alterar o tamanho */
.hero-img:hover img {
  box-shadow:
    0 30px 60px -12px rgba(0, 0, 0, 0.65),
    0 0 55px rgba(212, 175, 55, 0.3);
}

/* 5. Entrada suave dos elementos do hero ao carregar a página
   (roda junto com o .active já aplicado pelo IntersectionObserver
   existente; não interfere no .reveal usado em outras seções) */
.hero.reveal.active .hero-text {
  animation: heroTextEnter 0.9s ease both;
}

.hero.reveal.active .hero-img {
  animation: heroImgFadeIn 0.9s ease 0.2s both;
}

.hero.reveal.active .hero-img img {
  animation: heroPhotoEnter 1s cubic-bezier(.22,.9,.32,1) 0.25s both;
}

@keyframes heroTextEnter {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroImgFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes heroPhotoEnter {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 900px) {
  .hero-img::before {
    inset: -8px;
  }
}

/* SEÇÕES */
section {
  padding: 80px 20px;
  text-align: center;
}

h2 {
  margin-bottom: 30px;
}

/* GRID */
.grid {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* CARDS */
.card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 25px;
  width: 250px;
  transition: 0.3s;
}

.card:hover {
  transform: translateY(-10px);
}

/* DESTAQUE */
.destaque {
  border: 2px solid var(--primary);
  transform: scale(1.05);
}

/* CTA FINAL */
.cta-final p {
  color: var(--text-sec);
  margin: 10px 0 20px;
}

/* FOOTER */
footer {
  text-align: center;
  padding: 20px;
  color: var(--text-sec);
}

.header{
    position: sticky;
    top: 0;
    z-index: 100;

    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 60px;

    background: transparent;
    border-bottom: 1px solid transparent;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease, padding 0.3s ease;
}

/* Estado "premium" ao rolar: vidro escuro sutil, sem
   sombra pesada nem mudança brusca de altura. */
.header.is-scrolled{
    padding: 14px 60px;
    background: rgba(5, 5, 5, 0.72);
    border-bottom: 1px solid rgba(212, 175, 55, 0.14);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.logo{
    color: white;
    font-size: 38px;
    font-weight: 700;
    letter-spacing: 1px;

    /* ESPAÇO ENTRE LOGO E MENU */
    margin-right: 120px;
}

.logo span{
    color: #d4af37;
}

.nav{
    display: flex;
    align-items: center;
    gap: 45px;

    /* faz o menu ocupar espaço */
    flex: 1;
}

.nav a{
    position: relative;
    display: inline-block;
    padding: 6px 1px;

    color: #8a8a8a;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 3px;

    transition: color 0.3s ease, transform 0.25s ease;
}

.nav a:hover{
    color: white;
    transform: translateY(-1px);
}

.nav a:active{
    transform: translateY(0);
}

/* Indicador dourado discreto do item ativo (definido via JS,
   scroll-spy em js/script.js) — linha fina e animada, sem
   deslocar o texto nem pular de tamanho. */
.nav a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 1px;

    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
    background-size: 200% 100%;

    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;

    transition: transform 0.35s cubic-bezier(.16,.84,.44,1), opacity 0.35s ease;
}

.nav a.active{
    color: var(--gold-light);
}

.nav a.active::after{
    transform: scaleX(1);
    opacity: 1;
    animation: navIndicatorShift 6s linear infinite;
}

@keyframes navIndicatorShift{
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.btn-header{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    background: #d4af37;
    color: #000;
    text-decoration: none;
    padding: 18px 35px;
    border-radius: 3px;
    font-weight: bold;
    letter-spacing: 2px;

    transition: .35s ease;
}

/* Hover */

.btn-header:hover{

    transform: translateY(-3px);

    box-shadow:
        0 0 15px rgba(212,175,55,.45),
        0 0 35px rgba(212,175,55,.25);

}

/* Faixa de brilho */

.btn-header::after{

    content:"";

    position:absolute;

    top:-70%;
    left:-150%;

    width:60px;
    height:240%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.2),
        rgba(255,255,255,.95),
        rgba(255,255,255,.2),
        transparent
    );

    transform:rotate(25deg);

}

/* Executa a animação */

.btn-header:hover::after{

    animation:shine .8s ease forwards;

}

@keyframes shine{

    from{
        left:-150%;
    }

    to{
        left:170%;
    }

}

.hero h1 span:not(.split-line):not(.split-line-inner){
    color: #d4af37;
    font-style: italic;
}

.premium-tag{
    display: inline-block;
    border: 1px solid #5c4a18;
    color: #d4af37;
    padding: 16px 22px;
    font-size: 14px;
    letter-spacing: 4px;
    margin-top: 40px;
    margin-left: 70px;
}

/* =========================
   SOBRE MIM
========================= */

.about{
  padding: 120px 8%;
  background: #0b0b0b;
}

.about-title > span{
  color: #d4af37;
  letter-spacing: 3px;
  font-size: 13px;
  font-weight: 600;
}

.about-title h2{
  font-size: 95px;
  line-height: 0.95;
  color: #fff;
  margin-top: 20px;
  font-weight: 800;
}

.about-title h2 span:not(.split-line):not(.split-line-inner){
  color: #d4af37;
}

.title-line{
  width: 60px;
  height: 3px;
  background: #d4af37;
  margin-top: 30px;
}

.about-content{
  display: flex;
  justify-content: space-between;
  gap: 70px;
  margin-top: 60px;
  align-items: flex-start;
}

/* FOTO */

.about-image{
  position: relative;
  width: 420px;
}

.about-image img{
  width: 100%;
  border-radius: 25px;
  object-fit: cover;
}

/* BOX */

.experience-box{
  position: absolute;
  bottom: 25px;
  left: -10px;
  max-width: 210px;

  background: #111;
  border: 1px solid rgba(255,255,255,0.08);

  padding: 22px 28px;
  border-radius: 20px;

  backdrop-filter: blur(10px);
}

.experience-box h3{
  color: #d4af37;
  font-size: 22px;
  line-height: 1.25;
}

.experience-box p{
  color: #888;
  letter-spacing: 3px;
  font-size: 12px;
  margin-top: 8px;
}

/* TEXTO */

.about-text{
  flex: 1;
  max-width: 620px;
}

.about-text p{
  color: #8d8d8d;
  font-size: 21px;
  line-height: 1.9;
  margin-bottom: 35px;
}

/* TAGS */

.about-tags{
    display:flex;
    flex-wrap:wrap;
    gap:22px;
    margin-top:45px;
}

.about-tags span{

    position:relative;

    padding:18px 36px;

    border-radius:50px;

    border:1px solid rgba(212,175,55,.25);

    background:#0f0f0f;

    color:#d8d8d8;

    font-size:15px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    overflow:hidden;

    cursor:pointer;

    transition:.45s ease;

    animation:goldPulse 3s infinite;
}

/* Fundo dourado */

.about-tags span::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        #8b6914,
        #d4af37,
        #ffd85c,
        #b8860b
    );

    opacity:0;

    transition:.45s;

    z-index:-1;
}

/* Reflexo */

.about-tags span::after{

    content:"";

    position:absolute;

    top:-150%;

    left:-70%;

    width:40%;

    height:400%;

    background:rgba(255,255,255,.45);

    transform:rotate(25deg);

    transition:.8s;
}

/* Hover */

.about-tags span:hover{

    color:#000;

    transform:translateY(-6px) scale(1.05);

    border-color:#ffd54a;

    box-shadow:
        0 0 15px rgba(212,175,55,.45),
        0 0 35px rgba(212,175,55,.35),
        0 0 60px rgba(212,175,55,.2);

}

.about-tags span:hover::before{

    opacity:1;
}

.about-tags span:hover::after{

    left:170%;
}

/* Brilho contínuo */

@keyframes goldPulse{

    0%{

        box-shadow:0 0 0 rgba(212,175,55,0);

    }

    50%{

        box-shadow:
        0 0 12px rgba(212,175,55,.18);

    }

    100%{

        box-shadow:0 0 0 rgba(212,175,55,0);

    }

}

/* SKILLS */

.skills{
  margin-top: 55px;
}

.skill{
  margin-bottom: 35px;
}

.skill-top{
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.skill-top h4{
  color: #fff;
  font-size: 26px;
}

.skill-top span{
  color: #d4af37;
  font-size: 24px;
  font-weight: 700;
}

.skill-bar{
  width: 100%;
  height: 6px;
  background: #1a1a1a;
  border-radius: 30px;
  overflow: hidden;
}

.skill-fill{
  height: 100%;
  background: #d4af37;
  border-radius: 30px;
}

.fill-95{
  width: 95%;
}

.fill-92{
  width: 92%;
}

.fill-88{
  width: 88%;
}

.fill-85{
  width: 85%;
}

/* RESPONSIVO */

@media(max-width: 1100px){

  .about-content{
    flex-direction: column;
  }

  .about-image{
    width: 100%;
  }

  .about-title h2{
    font-size: 65px;
  }

}

@media(max-width: 700px){

  .about{
    padding: 90px 6%;
  }

  .about-title h2{
    font-size: 48px;
  }

  .about-text p{
    font-size: 17px;
  }

  .skill-top h4{
    font-size: 18px;
  }

}

/* =========================
   SERVIÇOS
========================= */

.services{
  padding: 120px 8%;
  background: #0b0b0b;
}

.services-title > span{
  color: #d4af37;
  letter-spacing: 3px;
  font-size: 13px;
  font-weight: 600;
}

.services-title h2{
  font-size: 95px;
  line-height: 0.95;
  color: #fff;
  margin-top: 20px;
  font-weight: 800;
}

.services-title h2 span:not(.split-line):not(.split-line-inner){
  color: #d4af37;
}

.services-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 70px;
}

/* CARD */

.service-card{
  position: relative;

  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0.01)
  );

  border: 1px solid rgba(255,255,255,0.06);

  border-radius: 30px;

  padding: 40px;

  overflow: hidden;

  transition: 0.4s;
}

.service-card:hover{
  transform: translateY(-8px);
  border-color: rgba(212,175,55,0.3);
}

/* TOPO */

.service-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-icon{
  width: 70px;
  height: 70px;

  background: rgba(212,175,55,0.08);

  border: 1px solid rgba(212,175,55,0.25);

  border-radius: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 30px;
}

.service-top .service-num{
  font-size: 90px;
  color: rgba(212,175,55,0.07);
  font-weight: 800;
}

/* TITULO */

.service-card h3{
  font-size: 45px;
  color: #fff;
  line-height: 1.1;
  margin-top: 35px;
}

/* TEXTO */

.service-card p{
  color: #8d8d8d;
  font-size: 22px;
  line-height: 1.8;
  margin-top: 25px;
}

/* TAGS */

.service-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 35px;
}

.service-tags span{
  border: 1px solid rgba(255,255,255,0.08);

  color: #888;

  padding: 12px 18px;

  border-radius: 30px;

  font-size: 13px;
  letter-spacing: 2px;

  transition: 0.3s;
}

.service-tags span:hover{
  border-color: #d4af37;
  color: #d4af37;
}

/* RESPONSIVO */

@media(max-width: 1100px){

  .services-grid{
    grid-template-columns: 1fr;
  }

  .services-title h2{
    font-size: 65px;
  }

}

@media(max-width: 700px){

  .services{
    padding: 90px 6%;
  }

  .services-title h2{
    font-size: 48px;
  }

  .service-card{
    padding: 30px;
  }

  .service-card h4{
    font-size: 32px;
  }

  .service-card p{
    font-size: 17px;
  }

}

/* =========================================================
   BLOCO 2B — CARDS DE SERVIÇOS PREMIUM (100% aditivo)
   Nada acima foi removido ou alterado. Estas regras só
   aprimoram profundidade, borda, sombra, ícone, número e
   microinterações dos 4 service-card existentes.
========================================================= */

/* 1. Fundo grafite sofisticado com leve gradiente de profundidade */
.service-card {
  background:
    radial-gradient(120% 100% at 18% -12%, rgba(212, 175, 55, 0.05), rgba(212, 175, 55, 0) 55%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    linear-gradient(160deg, #121212 0%, #070707 100%);

  border-color: rgba(212, 175, 55, 0.14);

  box-shadow:
    0 25px 50px -22px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);

  transition:
    box-shadow 0.4s ease,
    border-color 0.4s ease,
    background 0.4s ease;
}

/* 2. Linha dourada sutil no topo do card (detalhe premium) */
.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.35), transparent);
  opacity: 0.35;
  transition: opacity 0.4s ease;
}

/* 3. Sheen dourado contido no canto do card (preso pelo overflow:hidden já existente) */
.service-card::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.10), rgba(212, 175, 55, 0) 70%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

/* 4. Hover: elevação suave, borda mais evidente, sombra profunda e glow contido (inset).
   Seletor reforçado para vencer a especificidade de ".reveal.active .service-card"
   (regra compartilhada com case-card/price-card) sem tocar nela. */
.services .services-grid .service-card:hover {
  transform: translateY(-10px);
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow:
    0 35px 65px -22px rgba(0, 0, 0, 0.8),
    inset 0 0 40px rgba(212, 175, 55, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.service-card:hover::before {
  opacity: 0.9;
}

.service-card:hover::after {
  opacity: 1;
}

/* 5. Ícone: acabamento mais refinado + microinteração no hover */
.service-icon {
  background: linear-gradient(160deg, rgba(212, 175, 55, 0.10), rgba(212, 175, 55, 0.03));
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.06);
  transition:
    transform 0.35s cubic-bezier(.22, .9, .32, 1),
    box-shadow 0.35s ease,
    filter 0.35s ease;
}

.service-card:hover .service-icon {
  transform: translateY(-3px) scale(1.07);
  box-shadow:
    inset 0 0 0 1px rgba(212, 175, 55, 0.14),
    0 0 22px rgba(212, 175, 55, 0.18);
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.25));
}

/* 6. Número: presença mais sofisticada + leve reação no hover */
.service-top .service-num {
  transition: color 0.4s ease, transform 0.4s ease;
}

.service-card:hover .service-top .service-num {
  color: rgba(212, 175, 55, 0.16);
  transform: translateY(-4px);
}

/* 7. Acessibilidade: sem microanimações para quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-icon,
  .service-top .service-num,
  .service-card::before,
  .service-card::after {
    transition: none;
  }

  .services .services-grid .service-card:hover {
    transform: none;
  }

  .service-card:hover .service-icon {
    transform: none;
  }
}

/* --- PROCESSO SECTION --- */
.process {
  padding: 80px 10%;
  background-color: #050505; /* Cor de fundo levemente diferente para separar */
}

.process-title {
  margin-bottom: 60px;
}

.process-title > span {
  color: #c5a059; /* Dourado que você está usando */
  font-weight: bold;
  letter-spacing: 2px;
}

/* Mesmo font-size/weight/line-height de .about-title h2 e
   .services-title h2 — sem isso, o efeito de entrada por linha
   (split-line, ver BLOCO 9 em js/cinematic.js) já roda igual nas
   três seções, mas o deslize de 115% ficava pouco perceptível
   num título pequeno. Só tipografia: cor do texto normal, cores,
   layout e o destaque em <span> continuam como estavam. */
.process-title h2 {
  font-size: 95px;
  line-height: 0.95;
  color: #fff;
  margin-top: 20px;
  font-weight: 800;
}

.process-title h2 span:not(.split-line):not(.split-line-inner) {
  color: #c5a059;
}

@media (max-width: 1100px) {
  .process-title h2 {
    font-size: 65px;
  }
}

@media (max-width: 700px) {
  .process-title h2 {
    font-size: 48px;
  }
}

/* Timeline */
.process-timeline {
  position: relative;
  max-width: 800px;
}

.process-step {
  display: flex;
  gap: 30px;
  margin-bottom: 50px;
  position: relative;
}

.step-side {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-number {
  min-width: 45px;
  height: 45px;
  background-color: #111;
  border: 1px solid #c5a059;
  color: #c5a059;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  z-index: 2;
}

/* Linha vertical entre os círculos */
.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 22px; /* Centro do círculo */
  top: 45px;
  width: 1px;
  height: calc(100% + 5px);
  background-color: #333;
}

.step-tag {
  color: #c5a059;
  background: rgba(197, 160, 89, 0.1);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: bold;
}

.step-content h3 {
  font-size: 1.8rem;
  margin: 15px 0;
  font-weight: 800;
}

.step-content p {
  color: #aaa;
  max-width: 500px;
  line-height: 1.6;
}

.process-title p {
  color: #777;
  margin-top: 20px;
  max-width: 600px;
  font-size: 16px;
  line-height: 1.7;
}

/* --- CASES SECTION --- */
.cases {
  padding: 80px 10%;
  background-color: #0a0a0a;
}

.cases-title > span {
  color: #c5a059;
  font-weight: bold;
  letter-spacing: 2px;
}

.cases-title h2 {
  font-size: 2.5rem;
  margin-top: 10px;
}

.cases-title h2 span:not(.split-line):not(.split-line-inner) {
  color: #c5a059;
  font-style: italic; /* Opcional, para dar o destaque da imagem */
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.case-card {
  background-color: #111;
  padding: 40px;
  border-radius: 15px;
  border: 1px solid #222;
  position: relative;
  transition: transform 0.3s ease;
}

.case-card:hover {
  border-color: #333;
  transform: translateY(-5px);
}

.case-card h3 {
  font-size: 1.2rem;
  color: #fff;
  margin-top: 20px;
}

.case-card p {
  color: #8d8d8d;
  line-height: 1.7;
  margin-top: 12px;
  font-size: 0.95rem;
}

.cases-areas {
  margin-top: 60px;
}

.cases-areas h3 {
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: 20px;
}

/* PRICING */

.pricing{
  padding: 140px 8%;
  background: #070707;
}

.pricing-title > span{
  color: #d4af37;
  letter-spacing: 3px;
  font-size: 14px;
  font-weight: 600;
}

.pricing-title h2{
  font-size: 90px;
  line-height: 0.95;
  margin-top: 20px;
  color: #fff;
  font-weight: 800;
}

.pricing-title h2 span:not(.split-line):not(.split-line-inner){
  color: #d4af37;
  font-style: italic;
}

.pricing-title p{
  color: #777;
  margin-top: 30px;
  max-width: 600px;
  font-size: 18px;
  line-height: 1.7;
}

.title-line{
  width: 70px;
  height: 2px;
  background: #d4af37;
  margin-top: 30px;
}

.pricing-grid{
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
  gap: 30px;
}

.price-card{
  position: relative;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0.01)
  );

  border: 1px solid rgba(255,255,255,0.08);

  border-radius: 30px;

  padding: 45px 35px;

  overflow: hidden;

  transition: 0.4s ease;
}

.price-card::before{
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle at top,
    rgba(212,175,55,0.18),
    transparent 70%
  );

  opacity: 0;
  transition: 0.4s;

  pointer-events: none; /* ADICIONE ESTA LINHA */
}

.price-card:hover::before{
  opacity: 1;
}

.basic:hover,
.business:hover{
  transform: translateY(-10px);

  background:
  linear-gradient(
    145deg,
    rgba(212,175,55,0.08),
    rgba(255,255,255,0.02)
  );
}

.premium{
  border: 1px solid rgba(212,175,55,0.5);

  transform: scale(1.04);

  box-shadow:
  0 0 40px rgba(212,175,55,0.15);
}

.premium:hover{
  transform: scale(1.06) translateY(-8px);

  box-shadow:
  0 0 60px rgba(212,175,55,0.35);
}

.plan-name{
  color: #d4af37;
  font-size: 14px;
  letter-spacing: 4px;
  margin-bottom: 20px;
  font-weight: 700;
}

.price-card h3{
  font-size: 75px;
  color: #fff;
  margin-bottom: 20px;
  font-weight: 800;
}

.plan-desc{
  color: #8b8b8b;
  line-height: 1.7;
  margin-bottom: 35px;
}

.price-card ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 40px;
}

.price-card ul li{
  color: #f1f1f1;
  font-size: 17px;
}

.price-btn{
  width: 100%;
  height: 65px;

  border-radius: 16px;

  border: 1px solid rgba(255,255,255,0.1);

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  text-decoration: none;

  font-weight: 600;
  font-size: 17px;

  transition: 0.3s ease;
}

.price-btn:hover{
  border-color: #d4af37;
  color: #d4af37;
}

.price-btn.active{
  background: #d4af37;
  color: #000;
  border: none;
}

.price-btn.active:hover{
  transform: scale(1.03);
}

@media(max-width: 768px){

  .pricing-title h2{
    font-size: 55px;
  }

  .price-card h3{
    font-size: 55px;
  }

  .premium{
    transform: scale(1);
  }

}

.pricing-category {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
  margin-top: 70px;
}

.pricing-category h3 {
  font-size: 2rem;
  color: #fff;
  white-space: nowrap;
}

.category-line {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.1);
}

.second-category {
  margin-top: 120px;
}
/* FAQ */

.faq-section{
  padding: 120px 8%;
  background: #0b0b0b;
}

.faq-title > span{
  color: #d4af37;
  font-size: 14px;
  letter-spacing: 2px;
}

.faq-title h2{
  font-size: 70px;
  line-height: 0.9;
  color: #fff;
  margin-top: 10px;
  font-weight: 800;
}

.faq-title h2 span:not(.split-line):not(.split-line-inner){
  color: #d4af37;
}

.title-line{
  width: 70px;
  height: 2px;
  background: #d4af37;
  margin-top: 25px;
}

.faq-container{
  margin-top: 60px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.faq-item{
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.faq-item:last-child{
  border-bottom: none;
}

.faq-question{
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  padding: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.faq-question span{
  width: 45px;
  height: 45px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 28px;
  transition: 0.3s;
}

.faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq-answer p{
  color: #bdbdbd;
  font-size: 18px;
  line-height: 1.7;
  padding: 0 32px 30px;
}

.faq-item.active .faq-answer{
  max-height: 200px;
}


@media(max-width:768px){

  .faq-title h2{
    font-size: 45px;
  }

  .faq-question{
    font-size: 18px;
    padding: 24px;
  }

  .faq-answer p{
    font-size: 16px;
  }

}
.plan-name{
  display: block;
  text-align: center;
  margin-top: 55px;
  margin-bottom: 25px;
}
/* FOOTER */

.footer{
  background: #0f0f0f;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 80px;
}

.footer-container{
  width: 90%;
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 50px;
}

.footer-brand h3{
  font-size: 28px;
  color: #d4af37;
  margin-bottom: 15px;
}

.footer-brand p{
  color: #a0a0a0;
  line-height: 1.8;
  max-width: 450px;
}

.footer-links h4,
.footer-contact h4{
  color: #d4af37;
  margin-bottom: 20px;
}

.footer-links ul{
  list-style: none;
  padding: 0;
}

.footer-links li{
  margin-bottom: 12px;
}

.footer-links a,
.footer-contact a{
  color: #a0a0a0;
  text-decoration: none;
  transition: .3s;
  display: block;
  margin-bottom: 12px;
}

.footer-links a:hover,
.footer-contact a:hover{
  color: #fff;
}

.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: center;
  padding: 25px 0;
}

.footer-bottom p{
  color: #777;
  font-size: 14px;
}

@media(max-width:768px){

  .footer-container{
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .footer-brand p{
    margin: auto;
  }

}
html {
  scroll-behavior: smooth;
}

.price-card > *{
    position: relative;
    z-index: 2;
}

.price-btn{
    position: relative;
    z-index: 10;
    cursor: pointer;
}

/* =========================
SERVICES GUIDE
MESMO ESTILO DO PRICING
========================= */

.services-guide{
  padding: 140px 8%;
  background: #070707;
}

/* TÍTULO */

.guide-title > span{
  color: #d4af37;
  letter-spacing: 3px;
  font-size: 14px;
  font-weight: 600;
}

.guide-title h2{
  font-size: 90px;
  line-height: 0.95;
  margin-top: 20px;
  color: #fff;
  font-weight: 800;
}

.guide-title h2 span:not(.split-line):not(.split-line-inner){
  color: #d4af37;
  font-style: italic;
}

.guide-title p{
  color: #777;
  margin-top: 30px;
  max-width: 800px;
  font-size: 18px;
  line-height: 1.7;
}

/* CONTAINER */

.guide-container{
  margin-top: 80px;

  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* CARD */

.guide-item{
  position: relative;

  background:
  linear-gradient(
    145deg,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0.01)
  );

  border: 1px solid rgba(255,255,255,0.08);

  border-radius: 30px;

  overflow: hidden;

  transition: 0.4s ease;
}

.guide-item::before{
  content: "";
  position: absolute;
  inset: 0;

  background:
  radial-gradient(
    circle at top,
    rgba(212,175,55,0.18),
    transparent 70%
  );

  opacity: 0;
  transition: 0.4s;

  pointer-events: none;
}

.guide-item:hover::before{
  opacity: 1;
}

.guide-item:hover{
  transform: translateY(-8px);

  background:
  linear-gradient(
    145deg,
    rgba(212,175,55,0.08),
    rgba(255,255,255,0.02)
  );

  border-color: rgba(212,175,55,0.25);
}

/* TOPO */

.guide-question{
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  text-align: left;
  font-family: inherit;

  padding: 32px 35px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  cursor: pointer;
}

.guide-question h3{
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

.guide-question > span{
  color: #d4af37;
  font-size: 36px;
  font-weight: 300;

  transition: 0.3s ease;
}

/* RESPOSTA */

.guide-answer{
  padding: 0 35px 35px;

  border-top: 1px solid rgba(255,255,255,0.05);
}

.guide-answer p{
  color: #b5b5b5;
  margin-top: 22px;
  line-height: 1.9;
  font-size: 17px;
}

.guide-answer h4{
  color: #d4af37;
  margin-top: 30px;
  margin-bottom: 10px;

  font-size: 20px;
}

.guide-answer ul{
  margin-top: 20px;
  margin-left: 20px;

  display: flex;
  flex-direction: column;
  gap: 14px;
}

.guide-answer ul li{
  color: #f1f1f1;
  font-size: 17px;
  line-height: 1.7;
}

.guide-answer strong{
  display: block;
  color: #fff;
  margin-top: 20px;
  font-size: 18px;
}

/* RESPONSIVO */

@media(max-width:768px){

  .services-guide{
    padding: 100px 20px;
  }

  .guide-title h2{
    font-size: 55px;
    line-height: 1.1;
  }

  .guide-title p{
    font-size: 16px;
  }

  .guide-question{
    padding: 24px 20px;
    gap: 20px;
  }

  .guide-question h3{
    font-size: 20px;
    line-height: 1.5;
  }

  .guide-question > span{
    font-size: 28px;
  }

  .guide-answer{
    padding: 0 20px 25px;
  }

  .guide-answer p,
  .guide-answer ul li{
    font-size: 16px;
  }

}
.guide-answer{
  max-height: 0;
  overflow: hidden;
  transition: 0.4s ease;
  padding: 0 35px;
}

.guide-item.active .guide-answer{
  max-height: 500px;
  padding: 0 35px 35px;
}

/* BOTÕES */

.btn,
.btn-secondary{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 34px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .8px;
    transition: .35s ease;
    position: relative;
    overflow: hidden;
}

/* BOTÃO PRINCIPAL */

.btn{
    background: linear-gradient(135deg,#d4af37,#f2d675);
    color:#111;
    box-shadow:0 10px 30px rgba(212,175,55,.25);
}

/* BOTÃO SECUNDÁRIO */

.btn-secondary{
    border:1px solid rgba(212,175,55,.35);
    color:#fff;
    background:rgba(255,255,255,.02);
}

/* BRILHO */

.btn::before,
.btn-secondary::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );
    transform:skewX(-20deg);
}

/* HOVER */

.btn:hover,
.btn-secondary:hover{

    background:linear-gradient(
        135deg,
        #c89b2d 0%,
        #f5d97b 50%,
        #c89b2d 100%
    );

    color:#111;

    transform:translateY(-8px);

    box-shadow:
        0 18px 45px rgba(212,175,55,.35),
        0 0 30px rgba(212,175,55,.20);

}

.btn:hover::before,
.btn-secondary:hover::before{
    left:150%;
    transition:.7s;
}

/* CLIQUE */

.btn:active,
.btn-secondary:active{
    transform:translateY(-2px) scale(.98);
}

.btn:hover,
.btn-secondary:hover{
    animation:float 1.2s ease-in-out infinite alternate;
}

@keyframes float{
    from{
        transform:translateY(-6px);
    }

    to{
        transform:translateY(-11px);
    }
}

/*==========================
    PREMIUM BOX
==========================*/

.premium-box{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:500px;

    height:68px;

    padding:18px 34px;

    background:transparent;

    border:1px solid rgba(212,175,55,.35);

    color:#d4af37;

    letter-spacing:5px;

    font-size:18px;

    font-weight:600;

    overflow:hidden;

    cursor:pointer;

    transition:.4s;

}

/* Texto */

.text{

    position:relative;

    z-index:2;

}

/* Glow dourado atrás */

.premium-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:radial-gradient(
        circle,
        rgba(212,175,55,.12),
        transparent 70%
    );

    opacity:0;

    transition:.4s;

}

/* Faixa de brilho */

.premium-box::after{

    content:"";

    position:absolute;

    top:-70%;

    left:-150%;

    width:70px;

    height:240%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.15),
        rgba(255,255,255,.9),
        rgba(255,255,255,.15),
        transparent
    );

    transform:rotate(25deg);

    opacity:0;

}

/* Hover */

.premium-box:hover{

    transform:translateY(-5px);

    border-color:#ffd54f;

    box-shadow:
        0 0 15px rgba(212,175,55,.25),
        0 0 40px rgba(212,175,55,.15);

}

/* Ativa o glow */

.premium-box:hover::before{

    opacity:1;

}

/* Ativa a faixa de brilho */

.premium-box:hover::after{

    opacity:1;

    animation:shine .8s ease forwards;

}

/* Animação da faixa */

@keyframes shine{

    from{
        left:-150%;
    }

    to{
        left:170%;
    }

}

.about-page{

    max-width:1200px;

    margin:100px auto;

    display:grid;

    grid-template-columns:1.3fr 1fr;

    gap:70px;

    align-items:center;

}

.section-tag{

    color:#d4af37;

    letter-spacing:4px;

    font-size:14px;

    font-weight:600;

}

.about-page h2{

    font-size:52px;

    margin:20px 0;

    line-height:1.2;

}

.about-page p{

    color:#bdbdbd;

    line-height:1.9;

    margin-bottom:25px;

}

.about-right{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.about-card{

    background:#111;

    border:1px solid rgba(212,175,55,.18);

    padding:30px;

    border-radius:12px;

    transition:.4s;

}

.about-card h3{

    color:#d4af37;

    margin-bottom:15px;

}

.about-card:hover{

    transform:translateY(-8px);

    border-color:#d4af37;

    box-shadow:
        0 0 20px rgba(212,175,55,.18),
        0 0 40px rgba(212,175,55,.08);

}

.pricing-content{
    max-width: 760px;
    margin: 70px auto 0;
    text-align: center;
}

.pricing-content h3{
    font-size: 2rem;
    color: #fff;
    margin-bottom: 20px;
}

.pricing-content p{
    color: #bcbcbc;
    line-height: 1.9;
    font-size: 1.05rem;
    margin-bottom: 20px;
}

.pricing-content .btn{
    margin-top: 20px;
    display: inline-flex;
}

/* ANIMAÇÃO AO ROLAR */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

html {
  scroll-behavior: smooth;
}

.reveal .service-card,
.reveal .case-card,
.reveal .price-card {
  opacity: 0;
  transform: translateY(30px);
  transition: 
    opacity 0.7s ease,
    transform 0.7s ease;
}

.reveal.active .service-card,
.reveal.active .case-card,
.reveal.active .price-card {
  opacity: 1;
  transform: translateY(0);
}
.service-card:nth-child(1),
.case-card:nth-child(1),
.price-card:nth-child(1) {
  transition-delay: 0.1s;
}

.service-card:nth-child(2),
.case-card:nth-child(2),
.price-card:nth-child(2) {
  transition-delay: 0.2s;
}

.service-card:nth-child(3),
.case-card:nth-child(3),
.price-card:nth-child(3) {
  transition-delay: 0.3s;
}

.service-card:nth-child(4),
.case-card:nth-child(4),
.price-card:nth-child(4) {
  transition-delay: 0.4s;
}
.footer-brand {
  text-align: center;
}

.footer-brand p {
  margin-left: auto;
  margin-right: auto;
}
.premium-box .text {
  display: inline-block;

  background: linear-gradient(
    110deg,
    #8f6b16 0%,
    #d4af37 35%,
    #fff4b0 47%,
    #ffffff 50%,
    #fff4b0 53%,
    #d4af37 65%,
    #8f6b16 100%
  );

  background-size: 250% 100%;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  animation: premiumMetal 3s linear infinite;
}

@keyframes premiumMetal {

  0% {
    background-position: 150% center;
  }

  100% {
    background-position: -150% center;
  }

}


/* ========================================
   SEÇÃO DE PLANOS
======================================== */

.pricing {
  padding: 140px 8%;
  background: #080808;
  position: relative;
}


/* ========================================
   CABEÇALHO
======================================== */

.pricing-header {
  max-width: 850px;
  margin: 0 auto 70px;
  text-align: center;
}

.pricing-header h2 {
  color: #fff;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.05;
  margin-bottom: 25px;
  font-weight: 700;
}

.pricing-header h2 span {
  color: #d4af37;
}

.title-line {
  width: 70px;
  height: 2px;
  margin: 0 auto 25px;

  background: linear-gradient(
    90deg,
    transparent,
    #d4af37,
    #fff1a8,
    #d4af37,
    transparent
  );
}

.pricing-header p {
  color: #999;
  line-height: 1.8;
  font-size: 16px;
}


/* ========================================
   GRID
======================================== */

.pricing-grid {
  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 25px;

  align-items: center;
}


/* ========================================
   CARDS
======================================== */

.price-card {
  position: relative;

  padding: 42px 32px;

  min-height: 540px;

  display: flex;
  flex-direction: column;

  background: rgba(255, 255, 255, 0.035);

  border: 1px solid rgba(212, 175, 55, 0.16);

  border-radius: 22px;

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  overflow: hidden;

  transition:
    transform 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease,
    background 0.45s ease;
}


/* ========================================
   LINHA DE BRILHO
======================================== */

.price-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 80%;
  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    #d4af37,
    #fff7c2,
    #ffffff,
    #d4af37,
    transparent
  );

  transition: left 0.8s ease;
}

.price-card:hover::before {
  left: 130%;
}


/* ========================================
   LUZ INTERNA
======================================== */

.price-card::after {
  content: "";

  position: absolute;

  top: -100px;
  right: -100px;

  width: 200px;
  height: 200px;

  background: radial-gradient(
    circle,
    rgba(212, 175, 55, 0.08),
    transparent 70%
  );

  pointer-events: none;
}


/* ========================================
   HOVER DOS CARDS NORMAIS
======================================== */

.price-card.basic:hover,
.price-card.business:hover {

  transform: scale(1.04) translateY(-10px);

  border-color: rgba(212, 175, 55, 0.65);

  background: rgba(255, 255, 255, 0.05);

  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(212, 175, 55, 0.15);
}


/* ========================================
   SITE CORPORATIVO
   COMEÇA MAIOR
======================================== */

.price-card.premium {

  transform: scale(1.04);

  border-color: rgba(212, 175, 55, 0.45);

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.4),
    0 0 25px rgba(212, 175, 55, 0.07);
}


/* ========================================
   HOVER DO SITE CORPORATIVO
======================================== */

.price-card.premium:hover {

  transform: scale(1.08) translateY(-10px);

  border-color: rgba(212, 175, 55, 0.7);

  background: rgba(255, 255, 255, 0.055);

  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(212, 175, 55, 0.18);
}


/* ========================================
   NOME DO PLANO
======================================== */

.plan-name {

  position: relative;

  width: fit-content;

  margin-bottom: 20px;

  font-size: 13px;

  font-weight: 800;

  letter-spacing: 2px;

  background: linear-gradient(
    110deg,
    #8f6b16 0%,
    #d4af37 35%,
    #fff4b0 48%,
    #ffffff 50%,
    #fff4b0 52%,
    #d4af37 65%,
    #8f6b16 100%
  );

  background-size: 250% 100%;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;

  animation: planMetal 4s linear infinite;
}


@keyframes planMetal {

  0% {
    background-position: 150% center;
  }

  100% {
    background-position: -150% center;
  }

}


/* ========================================
   PREÇO
======================================== */

.price-card h3 {

  color: #fff;

  font-size: 34px;

  margin-bottom: 18px;

  font-weight: 600;
}


/* ========================================
   DESCRIÇÃO
======================================== */

.plan-desc {

  color: #999;

  line-height: 1.7;

  font-size: 15px;

  margin-bottom: 28px;
}


/* ========================================
   LISTA
======================================== */

.price-card ul {

  list-style: none;

  padding: 0;

  margin: 0 0 30px;
}

.price-card li {

  position: relative;

  color: #c8c8c8;

  font-size: 14px;

  padding-left: 22px;

  margin-bottom: 14px;
}

.price-card li::before {

  content: "✓";

  position: absolute;

  left: 0;
  top: 0;

  color: #d4af37;

  font-weight: bold;
}


/* ========================================
   BOTÃO
======================================== */

.price-btn {

  margin-top: auto;

  display: inline-flex;

  justify-content: center;
  align-items: center;

  min-height: 52px;

  padding: 0 24px;

  border: 1px solid rgba(212, 175, 55, 0.4);

  border-radius: 10px;

  color: #d4af37;

  text-decoration: none;

  font-size: 14px;

  font-weight: 700;

  transition:
    background 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}


.price-btn:hover {

  background: #d4af37;

  color: #080808;

  transform: translateY(-2px);

  box-shadow:
    0 10px 30px rgba(212, 175, 55, 0.2);
}


/* ========================================
   BOTÃO DO PLANO PRINCIPAL
======================================== */

.price-btn.active {

  background: #d4af37;

  color: #080808;

  border-color: #d4af37;
}


.price-btn.active:hover {

  background: #f0d56a;

  color: #080808;

  box-shadow:
    0 12px 35px rgba(212, 175, 55, 0.3);
}


/* ========================================
   RESPONSIVO
======================================== */

@media (max-width: 950px) {

  .pricing-grid {

    grid-template-columns: 1fr;

    max-width: 550px;
  }


  /* Remove o aumento permanente no tablet/celular */

  .price-card.premium {

    transform: scale(1);
  }


  /* Hover mais discreto */

  .price-card.basic:hover,
  .price-card.business:hover,
  .price-card.premium:hover {

    transform: translateY(-7px);

  }

}


/* ========================================
   CELULAR
======================================== */

@media (max-width: 600px) {

  .pricing {

    padding: 90px 6%;
  }


  .pricing-header {

    margin-bottom: 50px;
  }


  .pricing-header h2 {

    font-size: 38px;
  }


  .pricing-header p {

    font-size: 15px;
  }


  .price-card {

    min-height: auto;

    padding: 35px 25px;
  }

}

/* =========================================================
   BLOCO 3 — PROFUNDIDADE, CONTINUIDADE E MOVIMENTO PREMIUM
   (100% aditivo). Nada acima foi removido ou alterado.

   FORA DE ESCOPO NESTE BLOCO (mantidos exatamente como estão):
   - Hero (.hero e filhos)
   - Cards de Serviços (.service-card)
   - Seção de Preços/Planos (.pricing, .price-card e variações
     .basic/.premium/.business) — já possui tratamento premium
     próprio, não foi tocada.
========================================================= */

/* ---------------------------------------------------------
   1. CAMADAS ENTRE SEÇÕES
   Mesma cor-base de cada seção (nenhum hexadecimal foi
   alterado) + um sheen extremamente sutil no topo + uma
   linha de transição (inset) quase imperceptível, para dar
   sensação de superfícies/camadas distintas ao rolar a página.
--------------------------------------------------------- */

.about {
  background:
    radial-gradient(120% 140% at 50% -10%, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0) 55%),
    #0b0b0b;
  box-shadow: inset 0 1px 0 rgba(212, 175, 55, 0.04);
}

.services {
  background:
    radial-gradient(120% 140% at 50% -10%, rgba(212, 175, 55, 0.025), rgba(212, 175, 55, 0) 55%),
    #0b0b0b;
  box-shadow: inset 0 1px 0 rgba(212, 175, 55, 0.05);
}

.process {
  background:
    radial-gradient(120% 140% at 50% -10%, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0) 55%),
    #050505;
  box-shadow: inset 0 1px 0 rgba(212, 175, 55, 0.04);
}

.cases {
  background:
    radial-gradient(120% 140% at 50% -10%, rgba(212, 175, 55, 0.02), rgba(212, 175, 55, 0) 55%),
    #0a0a0a;
  box-shadow: inset 0 1px 0 rgba(212, 175, 55, 0.05);
}

.services-guide {
  background:
    radial-gradient(120% 140% at 50% -10%, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0) 55%),
    #070707;
  box-shadow: inset 0 1px 0 rgba(212, 175, 55, 0.04);
}

.faq-section {
  background:
    radial-gradient(120% 140% at 50% -10%, rgba(212, 175, 55, 0.02), rgba(212, 175, 55, 0) 55%),
    #0b0b0b;
  box-shadow: inset 0 1px 0 rgba(212, 175, 55, 0.05);
}

.footer {
  background:
    radial-gradient(120% 100% at 50% -10%, rgba(212, 175, 55, 0.02), rgba(212, 175, 55, 0) 60%),
    #0f0f0f;
}

/* ---------------------------------------------------------
   2. REVEAL MAIS FLUIDO (curva + leve escala)
   Aplica uma curva de entrada mais suave e uma variação de
   escala quase imperceptível (0.985 → 1) aos blocos que usam
   o .reveal genérico. Hero, Preços e os cards já tratados em
   blocos anteriores (service-card / case-card / price-card)
   são explicitamente excluídos e continuam 100% inalterados.
--------------------------------------------------------- */

.reveal:not(.hero):not(.pricing):not(.service-card):not(.case-card):not(.price-card) {
  transition:
    opacity 0.9s cubic-bezier(.16, .84, .44, 1),
    transform 0.9s cubic-bezier(.16, .84, .44, 1);
  transform: translateY(40px) scale(0.985);
}

.reveal.active:not(.hero):not(.pricing):not(.service-card):not(.case-card):not(.price-card) {
  transform: translateY(0) scale(1);
}

/* ---------------------------------------------------------
   3. PEQUENA DEFASAGEM DE ENTRADA NOS ITENS INTERNOS
   Mesmo padrão já usado em Serviços/Diferenciais/Preços,
   agora estendido (só em CSS, sem novas classes) para os
   passos do Processo, os itens do Guia e as perguntas do FAQ.
--------------------------------------------------------- */

.reveal .process-step,
.reveal .guide-item,
.reveal .faq-item {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s cubic-bezier(.16, .84, .44, 1),
    transform 0.6s cubic-bezier(.16, .84, .44, 1);
}

.reveal.active .process-step,
.reveal.active .guide-item,
.reveal.active .faq-item {
  opacity: 1;
  transform: translateY(0);
}

.process-step:nth-child(1) { transition-delay: 0.05s; }
.process-step:nth-child(2) { transition-delay: 0.12s; }
.process-step:nth-child(3) { transition-delay: 0.19s; }
.process-step:nth-child(4) { transition-delay: 0.26s; }

.guide-item:nth-child(1) { transition-delay: 0.04s; }
.guide-item:nth-child(2) { transition-delay: 0.09s; }
.guide-item:nth-child(3) { transition-delay: 0.14s; }
.guide-item:nth-child(4) { transition-delay: 0.19s; }
.guide-item:nth-child(5) { transition-delay: 0.24s; }
.guide-item:nth-child(6) { transition-delay: 0.29s; }
.guide-item:nth-child(7) { transition-delay: 0.34s; }
.guide-item:nth-child(8) { transition-delay: 0.39s; }

.faq-item:nth-child(1) { transition-delay: 0.04s; }
.faq-item:nth-child(2) { transition-delay: 0.09s; }
.faq-item:nth-child(3) { transition-delay: 0.14s; }
.faq-item:nth-child(4) { transition-delay: 0.19s; }
.faq-item:nth-child(5) { transition-delay: 0.24s; }
.faq-item:nth-child(6) { transition-delay: 0.29s; }

/* Compensação de especificidade: o hover já existente do
   guide-item (translateY(-8px)) precisa continuar vencendo a
   regra compartilhada ".reveal.active .guide-item" agora que
   a seção passou a usar .reveal — nada no hover foi alterado,
   apenas reforçado para não ser silenciosamente sobrescrito. */
.services-guide .guide-container .guide-item:hover {
  transform: translateY(-8px);
}

/* ---------------------------------------------------------
   4. ACESSIBILIDADE — prefers-reduced-motion
   Remove só as animações adicionadas neste bloco. O Hero e os
   demais efeitos já aprovados não são referenciados aqui e
   continuam se comportando exatamente como antes.
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .reveal:not(.hero):not(.pricing):not(.service-card):not(.case-card):not(.price-card),
  .reveal .process-step,
  .reveal .guide-item,
  .reveal .faq-item {
    transition: none;
  }
}

/* ---------------------------------------------------------
   5. INTERAÇÃO SUTIL COM O MOUSE (perspectiva)
   Habilita profundidade 3D para o leve tilt dos cards de
   "Como trabalho", aplicado via JS em js/script.js. Sem este
   perspective no elemento pai, a rotação aplicada pelo script
   pareceria achatada. Não altera colunas, gap ou breakpoints
   já existentes do grid.
--------------------------------------------------------- */

.cases-grid {
  perspective: 1000px;
}

/* =========================================================
   BLOCO 4 — INTERAÇÕES AVANÇADAS (100% aditivo)
   Nada acima foi removido ou alterado.

   FORA DE ESCOPO NESTE BLOCO (mantidos exatamente como estão):
   - Hero (.hero, .btn, .btn-secondary e filhos)
   - Redesenho do .service-card (já aprovado)
   - Seção de Preços/Planos (.pricing, .price-card, .price-btn)
========================================================= */

/* ---------------------------------------------------------
   1. BOTÕES
   .btn-header já tinha lift + glow + shine no hover; faltava
   só o retorno tátil ao clicar. Nenhum valor já aprovado foi
   alterado, apenas um novo estado (:active) foi adicionado.
--------------------------------------------------------- */
.btn-header:active {
  transform: translateY(-1px) scale(0.97);
}

/* ---------------------------------------------------------
   2. ÍCONES
   Pequena reação ao hover em ícones que ainda não tinham
   microinteração própria.
--------------------------------------------------------- */

/* Ícone do case-card (mesma classe .service-icon dos cards de
   Serviços, mas o hover abaixo é escopado só ao .case-card —
   não altera em nada o .service-card já aprovado) */
.case-card:hover .service-icon {
  transform: scale(1.08);
  filter: drop-shadow(0 0 6px rgba(197, 160, 89, 0.3));
}

/* Número do passo do Processo */
.step-number {
  transition: transform 0.3s cubic-bezier(.16, .84, .44, 1), box-shadow 0.3s ease;
}

.process-step:hover .step-number {
  transform: scale(1.1);
  box-shadow: 0 0 14px rgba(197, 160, 89, 0.28);
}

/* Ícones "+/−" do FAQ e do Guia de Serviços, com um leve
   realce no restante do botão para reforçar a área clicável */
.faq-question,
.guide-question {
  transition: background 0.3s ease;
}

.faq-question:hover,
.guide-question:hover {
  background: rgba(212, 175, 55, 0.035);
}

.faq-question:hover span[aria-hidden],
.guide-question:hover > span {
  transform: scale(1.08);
}

/* ---------------------------------------------------------
   3. TILT NOS CARDS DE SERVIÇOS (já aprovados)
   Interação opcional de profundidade seguindo o mouse,
   implementada via JS em js/script.js. O deslocamento de
   hover já aprovado (translateY(-10px)) fica embutido na
   transformação para não se perder durante o tilt; os
   pseudo-elementos de brilho (::before/::after) continuam
   reagindo ao :hover real do CSS, sem qualquer alteração.
   Este "perspective" é a única regra de CSS necessária — o
   resto é feito pelo script com as mesmas guardas de
   dispositivo/reduced-motion já usadas nos case-card.
--------------------------------------------------------- */
.services-grid {
  perspective: 1000px;
}

/* ---------------------------------------------------------
   4. LINKS
   Sublinhado animado via background (não usa ::after, então
   não afeta layout nem largura) na navegação e nos links do
   rodapé. As transições de cor já existentes continuam.
--------------------------------------------------------- */
.footer-links a,
.footer-contact a {
  background-image: linear-gradient(90deg, #d4af37, #d4af37);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.35s cubic-bezier(.16, .84, .44, 1), color 0.3s ease;
}

.footer-links a:hover,
.footer-contact a:hover {
  background-size: 100% 1px;
}

/* Sublinhado dourado do hover na navegação principal — reaproveita
   o mesmo ::after do indicador ativo, só com opacidade mais baixa
   para não se confundir com o item realmente ativo. */
.nav a:not(.active):hover::after {
  transform: scaleX(1);
  opacity: 0.45;
}

/* ---------------------------------------------------------
   5. ACESSIBILIDADE — foco visível por teclado
   Não existia nenhuma regra de :focus em todo o site. Offset
   negativo (inset) para nunca ser cortado por containers com
   overflow:hidden (ex.: .faq-container, .guide-item).
--------------------------------------------------------- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(212, 175, 55, 0.6);
  outline-offset: -3px;
}

/* ---------------------------------------------------------
   6. prefers-reduced-motion
   Remove apenas as novas microrotações/escala deste bloco.
   O ícone do service-card já é neutralizado pelo BLOCO 2B; o
   tilt do service-card e do case-card já é desativado no JS.
   Transições de cor/sublinhado (não são "movimento") seguem
   normalmente, como é prática comum de acessibilidade.
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn-header:active,
  .process-step:hover .step-number,
  .faq-question:hover span[aria-hidden],
  .guide-question:hover > span {
    transform: none;
  }

  .nav a:hover {
    transform: none;
  }

  .nav a.active::after {
    animation: none;
  }
}

/* =========================================================
   BLOCO 5 — SISTEMA VISUAL TECNOLÓGICO (100% aditivo)
   Nada acima foi removido ou alterado.

   FORA DE ESCOPO NESTE BLOCO (mantidos exatamente como estão):
   - Texto, foto, CTAs e estrutura do Hero
   - Redesenho do .service-card / .case-card
   - Seção de Preços/Planos (.pricing, .price-card, .price-btn)
========================================================= */

/* ---------------------------------------------------------
   1. HERO — ATMOSFERA TECNOLÓGICA
   Elementos puramente decorativos (aria-hidden, pointer-
   events:none) adicionados como uma camada extra dentro do
   Hero, atrás do texto e da foto. .hero-text/.hero-img não
   foram tocados: só ganharam um "z-index" natural por serem
   conteúdo estático, pintado depois do z-index:-1 abaixo.
--------------------------------------------------------- */

.hero {
  position: relative;
  z-index: 0; /* cria um contexto de empilhamento só para o Hero */
}

.hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.atmo-aurora {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}

.atmo-aurora-1 {
  width: 560px;
  height: 560px;
  top: -200px;
  left: -180px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.09), rgba(212, 175, 55, 0) 70%);
  animation: atmoDrift1 56s ease-in-out infinite alternate;
}

.atmo-aurora-2 {
  width: 460px;
  height: 460px;
  bottom: -180px;
  left: -120px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 70%);
  animation: atmoDrift2 68s ease-in-out infinite alternate;
}

@keyframes atmoDrift1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(26px, 18px) scale(1.06); }
}

@keyframes atmoDrift2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-18px, -22px) scale(1.05); }
}

.atmo-line {
  position: absolute;
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.24), transparent);
  will-change: transform, opacity;
}

.atmo-line-1 {
  top: 20%;
  left: 3%;
  width: 34%;
  animation: atmoBreathe 15s ease-in-out infinite, lineDrift1 22s ease-in-out infinite;
}

.atmo-line-2 {
  bottom: 16%;
  right: 5%;
  width: 26%;
  animation: atmoBreathe 15s ease-in-out infinite 4s, lineDrift2 26s ease-in-out infinite 3s;
}

.atmo-line-3 {
  top: 62%;
  left: 12%;
  width: 18%;
  animation: atmoBreathe 19s ease-in-out infinite 7s, lineDrift3 30s ease-in-out infinite 5s;
}

@keyframes atmoBreathe {
  0%, 100% { opacity: 0.16; }
  50%      { opacity: 0.4; }
}

/* Movimento orgânico e contínuo: leve rotação + deslocamento
   lateral, cada linha com sua própria amplitude e velocidade. */
@keyframes lineDrift1 {
  0%, 100% { transform: rotate(-4deg) translateX(0); }
  50%      { transform: rotate(-2.4deg) translateX(10px); }
}

@keyframes lineDrift2 {
  0%, 100% { transform: rotate(3deg) translateX(0); }
  50%      { transform: rotate(4.6deg) translateX(-9px); }
}

@keyframes lineDrift3 {
  0%, 100% { transform: rotate(-2deg) translateX(0); }
  50%      { transform: rotate(-0.5deg) translateX(7px); }
}

.atmo-shape {
  position: absolute;
  display: block;
  border: 1px solid rgba(212, 175, 55, 0.18);
  will-change: transform;
}

.atmo-circle {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  top: 10%;
  right: 10%;
  animation: atmoSpin 100s linear infinite;
}

.atmo-arc {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border-color: rgba(212, 175, 55, 0.16) transparent transparent transparent;
  bottom: 8%;
  left: 5%;
  animation: atmoSpin 130s linear infinite reverse;
}

.atmo-dot {
  width: 5px;
  height: 5px;
  border: none;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.35);
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.4);
  top: 42%;
  left: 2%;
}

@keyframes atmoSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Parallax extremamente sutil ao rolar (aplicado via JS em
   js/script.js, que define --scroll-progress em .hero) */
.hero-atmosphere {
  transform: translateY(calc(var(--scroll-progress, 0) * 30px));
}

@media (max-width: 900px) {
  .atmo-line,
  .atmo-shape {
    display: none; /* reduz elementos decorativos no mobile */
  }

  .atmo-aurora {
    filter: blur(60px);
  }
}

/* ---------------------------------------------------------
   2. LINHAS DE LUZ ENTRE SEÇÕES
   Uma linha fina e discreta por seção, confinada à faixa de
   padding superior (onde nunca há conteúdo), reutilizando a
   mesma animação "respirando" do Hero para reforçar a
   sensação de sistema único. Não precisa de z-index: por
   estar só na área de padding, nunca sobrepõe texto/cards.
--------------------------------------------------------- */

.about,
.services,
.process,
.cases,
.services-guide,
.faq-section {
  position: relative;
}

.about::before,
.services::before,
.process::before,
.cases::before,
.services-guide::before,
.faq-section::before {
  content: "";
  position: absolute;
  top: 28px;
  right: 6%;
  width: 22%;
  max-width: 220px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.26), transparent);
  pointer-events: none;
  animation: atmoBreathe 17s ease-in-out infinite;
}

.services::before   { animation-delay: 2s; }
.process::before    { animation-delay: 4s; }
.cases::before       { animation-delay: 6s; }
.services-guide::before { animation-delay: 8s; }
.faq-section::before { animation-delay: 10s; }

@media (max-width: 700px) {
  .about::before,
  .services::before,
  .process::before,
  .cases::before,
  .services-guide::before,
  .faq-section::before {
    display: none;
  }
}

/* ---------------------------------------------------------
   3. TIPOGRAFIA — reveal por máscara nos títulos de seção
   Usa clip-path (não afeta layout) para "desvendar" o título
   da esquerda para a direita, acionado pelo mesmo .reveal já
   usado no resto do site. O Hero (h1) não é afetado — mantém
   exatamente o comportamento já aprovado.
--------------------------------------------------------- */

.reveal .about-title h2,
.reveal .services-title h2,
.reveal .process-title h2,
.reveal .cases-title h2,
.reveal .guide-title h2,
.reveal .faq-title h2 {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(.16, .84, .44, 1) 0.1s;
}

.reveal.active .about-title h2,
.reveal.active .services-title h2,
.reveal.active .process-title h2,
.reveal.active .cases-title h2,
.reveal.active .guide-title h2,
.reveal.active .faq-title h2 {
  clip-path: inset(0 0 0 0);
}

/* ---------------------------------------------------------
   4. CARDS — iluminação que acompanha o mouse
   Adiciona uma 4ª camada de fundo ao .service-card já
   aprovado (o gradiente/borda/sombra do BLOCO 2B continuam
   intactos), controlada por variáveis CSS atualizadas no
   mesmo listener de mousemove do tilt (BLOCO 4) — nenhum
   listener novo é criado. Fica praticamente neutra até o
   mouse passar por cima (--spot-o vai de 0 a 1).
--------------------------------------------------------- */

.service-card {
  --mx: 50%;
  --my: 50%;
  --spot-o: 0;

  background:
    radial-gradient(240px circle at var(--mx) var(--my), rgba(212, 175, 55, var(--spot-o)), transparent 60%),
    radial-gradient(120% 100% at 18% -12%, rgba(212, 175, 55, 0.05), rgba(212, 175, 55, 0) 55%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    linear-gradient(160deg, #121212 0%, #070707 100%);
}

/* ---------------------------------------------------------
   5. ACESSIBILIDADE — prefers-reduced-motion
   Congela toda a atmosfera tecnológica numa versão estática
   (sem remover os elementos, só as animações). O parallax de
   scroll é desativado no JS pela mesma media query.
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .atmo-aurora,
  .atmo-line,
  .atmo-shape,
  .about::before,
  .services::before,
  .process::before,
  .cases::before,
  .services-guide::before,
  .faq-section::before {
    animation: none;
    opacity: 0.22;
  }

  .hero-atmosphere {
    transform: none;
  }

  .reveal .about-title h2,
  .reveal .services-title h2,
  .reveal .process-title h2,
  .reveal .cases-title h2,
  .reveal .guide-title h2,
  .reveal .faq-title h2 {
    transition: none;
  }
}

/* =========================================================
   BLOCO 6 — REFORMULAÇÃO VISUAL GLOBAL (100% aditivo)
   Nada acima foi removido ou alterado.

   FORA DE ESCOPO NESTE BLOCO (conteúdo/valores intocados):
   - Textos, links, contatos e valores de Preços
   - Foto, CTAs e estrutura comercial do Hero
   - Redesenho do .service-card / .case-card / .price-card
========================================================= */

/* ---------------------------------------------------------
   6.0 — CONTEXTOS DE EMPILHAMENTO
   Serviços e Diferenciais ganham a mesma base de Hero
   (position + z-index:0) para conter com segurança a nova
   camada decorativa .section-deco atrás do conteúdo.
--------------------------------------------------------- */

.services,
.cases {
  z-index: 0;
}

.section-deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.reveal.active .section-deco {
  opacity: 1;
}

/* ---------------------------------------------------------
   6.1 — HERO: reveal cinematográfico do título + parallax
   entre camadas. Texto, foto e CTAs continuam exatamente
   onde estão — só a atmosfera de fundo ganha profundidade
   extra e o H1 ganha uma varredura de revelação.
--------------------------------------------------------- */

/* A varredura por clip-path que existia aqui para o H1 do Hero
   foi substituída pelo sistema de "split-line reveal" (BLOCO 9,
   linha por linha, via GSAP) — mais próximo do efeito pedido.
   O keyframe abaixo continua em uso pelos rótulos de seção
   ("✦ ...") no BLOCO 8.6, por isso permanece aqui. */
@keyframes heroTitleReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Parallax: a camada inteira de atmosfera (.hero-atmosphere,
   já movida via --scroll-progress no BLOCO 5) responde ao
   scroll enquanto texto e foto permanecem estáveis — dentro
   dela, cada forma mantém seu próprio drift lento (acima),
   criando profundidade em duas velocidades diferentes. */

.atmo-dot-2 {
  width: 4px;
  height: 4px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  top: auto;
  left: auto;
  bottom: 22%;
  right: 14%;
}

.atmo-line-v {
  width: 1px;
  height: 22%;
  top: 8%;
  right: 16%;
  background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.22), transparent);
  transform: none;
  animation: atmoBreathe 13s ease-in-out infinite;
  animation-delay: 5s;
}

/* ---------------------------------------------------------
   6.2 — SERVIÇOS e DIFERENCIAIS: elementos técnicos discretos
   ao redor do conteúdo (cantos, linha, ponto), visíveis assim
   que a seção entra na tela — não dependem de hover.
--------------------------------------------------------- */

.deco-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.22), transparent);
  animation: atmoBreathe 16s ease-in-out infinite;
}

.deco-line-1 { top: 14%; left: 4%; width: 20%; transform: rotate(-3deg); }
.deco-line-2 { bottom: 12%; right: 4%; width: 18%; transform: rotate(2deg); animation-delay: 3s; }

.deco-corner {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  opacity: 0.55;
}

.deco-corner-tr { top: 40px; right: 5%; border-left: none; border-bottom: none; }
.deco-corner-bl { bottom: 40px; left: 5%; border-right: none; border-top: none; }

.deco-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.35);
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.35);
}

.deco-dot-1 { top: 46%; right: 3%; }
.deco-dot-2 { top: 50%; left: 3%; }

/* ---------------------------------------------------------
   6.3 — PROCESSO: linha de progresso que "desenha" com o
   scroll (JS atualiza --process-progress em .process-timeline).
   A linha cinza já existente entre as etapas é preservada; o
   traço dourado abaixo apenas se sobrepõe a ela conforme o
   usuário avança.
--------------------------------------------------------- */

.process-progress {
  position: absolute;
  left: 21px;
  top: 4px;
  width: 2px;
  height: calc(100% - 8px);
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  border-radius: 2px;
}

.process-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--process-progress, 0) * 1%);
  background: linear-gradient(180deg, #d4af37, rgba(212, 175, 55, 0.25));
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.35);
  transition: height 0.1s linear;
}

/* ---------------------------------------------------------
   6.4 — ENTRADAS DIFERENCIADAS POR SEÇÃO
   Cada bloco ganha uma combinação própria de opacity + blur +
   transform, encadeada ao mesmo .reveal/.active já existente.
   Nenhum dos gatilhos (IntersectionObserver) muda — só o que
   acontece visualmente quando o "active" é adicionado.
--------------------------------------------------------- */

/* Foto do "Sobre mim": entra com blur + leve escala/rotação */
.reveal .about-image {
  opacity: 0;
  filter: blur(14px);
  transform: scale(0.94) rotate(-1.2deg);
  transition:
    opacity 1s cubic-bezier(.16, .84, .44, 1),
    filter 1s cubic-bezier(.16, .84, .44, 1),
    transform 1s cubic-bezier(.16, .84, .44, 1);
}

.reveal.active .about-image {
  opacity: 1;
  filter: blur(0);
  transform: scale(1) rotate(0deg);
}

.reveal .experience-box {
  opacity: 0;
  transform: translate(-16px, 16px);
  transition:
    opacity 0.8s cubic-bezier(.16, .84, .44, 1) 0.35s,
    transform 0.8s cubic-bezier(.16, .84, .44, 1) 0.35s;
}

.reveal.active .experience-box {
  opacity: 1;
  transform: translate(0, 0);
}

/* Cards de Serviços: companhia de blur sutil na entrada já
   aprovada (opacity/translateY continuam iguais) */
.reveal .service-card {
  filter: blur(6px);
  transition: filter 0.7s cubic-bezier(.16, .84, .44, 1);
}

.reveal.active .service-card {
  filter: blur(0);
}

/* Diferenciais: identidade própria — leve escala em vez de
   blur, para não repetir a mesma sensação de Serviços */
.reveal .case-card {
  transform: translateY(30px) scale(0.96);
}

.reveal.active .case-card {
  transform: translateY(0) scale(1);
}

/* Preços: só a entrada (visual) ganha blur companion — nada
   de conteúdo, link ou valor é tocado */
.reveal .price-card {
  filter: blur(6px);
  transition: filter 0.7s cubic-bezier(.16, .84, .44, 1);
}

.reveal.active .price-card {
  filter: blur(0);
}

/* Guia de Serviços e FAQ: leve escala complementando o
   deslocamento vertical já existente (BLOCO 3) */
.reveal .guide-item,
.reveal .faq-item {
  transform: translateY(24px) scale(0.985);
}

.reveal.active .guide-item,
.reveal.active .faq-item {
  transform: translateY(0) scale(1);
}

/* ---------------------------------------------------------
   6.5 — RODAPÉ: fechamento cinematográfico
   Luz localizada muito discreta + duas linhas convergindo
   para o centro, visíveis quando o rodapé entra na tela.
--------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 0;
}

.closing-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.reveal.active .closing-atmosphere {
  opacity: 1;
}

.closing-glow {
  position: absolute;
  width: 520px;
  height: 260px;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(212, 175, 55, 0.07), rgba(212, 175, 55, 0) 70%);
  filter: blur(40px);
}

.closing-line {
  position: absolute;
  height: 1px;
  width: 32%;
  top: 50%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent);
  animation: atmoBreathe 14s ease-in-out infinite;
}

.closing-line-1 { left: 0; transform: rotate(-2deg); }
.closing-line-2 { right: 0; transform: rotate(2deg); animation-delay: 3s; }

.closing-atmosphere .atmo-dot {
  top: 20%;
  left: 50%;
  background: rgba(212, 175, 55, 0.3);
}

.reveal .footer-container {
  opacity: 0;
  transform: translateY(26px) scale(0.99);
  transition:
    opacity 1s cubic-bezier(.16, .84, .44, 1) 0.1s,
    transform 1s cubic-bezier(.16, .84, .44, 1) 0.1s;
}

.reveal.active .footer-container {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---------------------------------------------------------
   6.6 — RESPONSIVIDADE
   Tablet: reduz a quantidade de elementos decorativos.
   Mobile: mantém identidade (auroras, linhas, reveals) mas
   remove os elementos mais pesados/geométricos e desliga o
   parallax, evitando qualquer overflow ou custo extra.
--------------------------------------------------------- */

@media (max-width: 1100px) {
  .deco-corner,
  .closing-line-2 {
    display: none;
  }
}

@media (max-width: 700px) {
  .section-deco,
  .closing-atmosphere {
    display: none;
  }

  .atmo-aurora-1,
  .atmo-aurora-2 {
    transform: none !important;
  }

  .reveal .about-image {
    filter: blur(8px);
    transform: scale(0.97);
  }
}

/* ---------------------------------------------------------
   6.7 — prefers-reduced-motion
   Congela parallax, blur de entrada e a linha de progresso
   numa versão estática — o conteúdo continua todo visível,
   só sem o movimento.
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .atmo-aurora-1,
  .atmo-aurora-2,
  .atmo-line-v {
    transform: none;
    animation: none;
  }

  .deco-line,
  .closing-line {
    animation: none;
  }

  .section-deco,
  .closing-atmosphere {
    transition: none;
  }

  .reveal .about-image,
  .reveal .experience-box,
  .reveal .service-card,
  .reveal .case-card,
  .reveal .price-card,
  .reveal .guide-item,
  .reveal .faq-item,
  .reveal .footer-container {
    transition: none;
    filter: none;
    transform: none;
  }

  .process-progress-fill {
    height: 100%;
    transition: none;
  }
}

/* =========================================================
   BLOCO 7 — VISUAL ENGINE
   Reconstrução visual real: os valores dos blocos anteriores
   eram sutis demais para serem percebidos. Este bloco os
   substitui por uma composição muito mais visível — mesma
   identidade preto + dourado, presença muito maior.

   Conteúdo, preços, contatos, links e estrutura comercial
   continuam 100% intocados — só a camada visual muda.
========================================================= */

/* ---------------------------------------------------------
   7.0 — PRIMITIVOS DO SISTEMA
   Peças reutilizáveis do "visual engine": anéis, órbitas,
   nós de conexão, linhas de grade, labels técnicos, glows.
   Todas aria-hidden, position:absolute, pointer-events:none.
--------------------------------------------------------- */

.tech-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.28);
  pointer-events: none;
}

.tech-ring-1 { width: 260px; height: 260px; animation: techSpin 70s linear infinite; }
.tech-ring-2 {
  width: 380px;
  height: 380px;
  border-color: rgba(255, 255, 255, 0.08);
  animation: techSpin 100s linear infinite reverse;
}

.tech-orbit {
  position: absolute;
  width: 180px;
  height: 180px;
  border: 1px dashed rgba(212, 175, 55, 0.22);
  border-radius: 50%;
  animation: techSpin 34s linear infinite;
}

.tech-node {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 12px 2px rgba(212, 175, 55, 0.7);
}

@keyframes techSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.tech-grid-line {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.16), transparent);
}

.tech-grid-line-v {
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.07) 15%, rgba(255, 255, 255, 0.07) 85%, transparent);
}

.tech-grid-line-h {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
}

.tech-label {
  position: absolute;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(212, 175, 55, 0.55);
  text-transform: uppercase;
}

.tech-label-1 { top: 6%; left: 3%; }

.tech-label-corner {
  top: 32px;
  right: 6%;
}

.tech-marker {
  position: absolute;
  width: 14px;
  height: 14px;
  border-top: 1px solid rgba(212, 175, 55, 0.4);
  border-right: 1px solid rgba(212, 175, 55, 0.4);
}

.tech-marker-1 { top: 8%; right: 6%; }
.tech-marker-2 { bottom: 10%; left: 8%; transform: rotate(180deg); }

.tech-glow {
  position: absolute;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  filter: blur(90px);
  background: radial-gradient(circle, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0) 68%);
}

.tech-orb {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, rgba(255, 244, 214, 0.9), rgba(212, 175, 55, 0.25) 45%, rgba(212, 175, 55, 0) 72%);
  filter: blur(2px);
  opacity: 0.55;
  animation: techPulse 6s ease-in-out infinite;
}

@keyframes techPulse {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.7; transform: translate(-50%, -50%) scale(1.08); }
}

/* ---------------------------------------------------------
   7.1 — FUNDOS DAS SEÇÕES (substitui os valores tímidos do
   BLOCO 3). Ritmo real preto ↔ grafite, textura de grade
   visível e mesh de luz muito mais presente em todas.
--------------------------------------------------------- */

.about {
  background:
    var(--tech-grid),
    radial-gradient(90% 60% at 15% 0%, rgba(212, 175, 55, 0.10), rgba(212, 175, 55, 0) 60%),
    linear-gradient(180deg, var(--bg-graphite) 0%, var(--bg-graphite-2) 100%);
  box-shadow: inset 0 1px 0 rgba(212, 175, 55, 0.08);
}

.services {
  background:
    var(--tech-grid),
    radial-gradient(80% 55% at 85% 0%, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0) 62%),
    linear-gradient(180deg, var(--bg-graphite) 0%, var(--bg-graphite-2) 100%);
  box-shadow: inset 0 1px 0 rgba(212, 175, 55, 0.08);
}

.process {
  background:
    var(--tech-grid),
    radial-gradient(70% 50% at 50% 0%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 65%),
    var(--bg-black);
  box-shadow: inset 0 1px 0 rgba(212, 175, 55, 0.06);
}

.cases {
  background:
    var(--tech-grid),
    radial-gradient(90% 60% at 10% 100%, rgba(212, 175, 55, 0.11), rgba(212, 175, 55, 0) 62%),
    linear-gradient(180deg, var(--bg-graphite) 0%, var(--bg-graphite-2) 100%);
  box-shadow: inset 0 1px 0 rgba(212, 175, 55, 0.08);
}

.services-guide {
  background:
    var(--tech-grid),
    radial-gradient(80% 55% at 90% 100%, rgba(212, 175, 55, 0.09), rgba(212, 175, 55, 0) 60%),
    var(--bg-black);
  box-shadow: inset 0 1px 0 rgba(212, 175, 55, 0.06);
}

.faq-section {
  background:
    var(--tech-grid),
    radial-gradient(80% 55% at 15% 0%, rgba(212, 175, 55, 0.09), rgba(212, 175, 55, 0) 60%),
    var(--bg-black);
  box-shadow: inset 0 1px 0 rgba(212, 175, 55, 0.06);
}

.pricing {
  background-image: var(--tech-grid);
}

/* ---------------------------------------------------------
   7.2 — AMPLIFICAÇÃO DAS CAMADAS EXISTENTES
   Os elementos do BLOCO 5/6 continuam os mesmos — só ficam
   visíveis de verdade (opacidade, tamanho e alcance maiores).
--------------------------------------------------------- */

.atmo-aurora-1 {
  width: 760px;
  height: 760px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0) 68%);
}

.atmo-aurora-2 {
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 68%);
}

.atmo-line,
.deco-line,
.closing-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
}

.atmo-shape {
  border-color: rgba(212, 175, 55, 0.4);
}

.atmo-dot,
.deco-dot {
  width: 6px;
  height: 6px;
  background: rgba(212, 175, 55, 0.7);
  box-shadow: 0 0 14px 3px rgba(212, 175, 55, 0.55);
}

.deco-corner {
  width: 54px;
  height: 54px;
  border-color: rgba(212, 175, 55, 0.4);
  opacity: 0.85;
}

.section-deco {
  opacity: 1; /* substitui o fade tímido — visível assim que a página carrega */
  transition: none;
}

.tech-glow-services { top: -180px; right: -220px; }
.tech-glow-cases { bottom: -220px; left: -220px; }
.tech-glow-pricing {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 500px;
  border-radius: 50%;
}

/* ---------------------------------------------------------
   7.3 — TIPOGRAFIA: hierarquia real entre eyebrow, título,
   labels e números. Fonte monoespaçada nova só nos elementos
   técnicos — o corpo do texto continua em Poppins.
--------------------------------------------------------- */

.services-title > span:first-child,
.about-title > span:first-child,
.process-title > span:first-child,
.cases-title > span:first-child,
.pricing-title > span:first-child,
.guide-title > span:first-child,
.faq-title > span:first-child,
.cta-title > span:first-child {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 5px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.services-title > span:first-child::before,
.about-title > span:first-child::before,
.process-title > span:first-child::before,
.cases-title > span:first-child::before,
.pricing-title > span:first-child::before,
.guide-title > span:first-child::before,
.faq-title > span:first-child::before,
.cta-title > span:first-child::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--primary);
  display: inline-block;
}

.service-num,
.case-num {
  font-family: var(--mono);
}

.case-num {
  position: absolute;
  top: 26px;
  right: 30px;
  font-size: 52px;
  font-weight: 600;
  color: rgba(212, 175, 55, 0.14);
  line-height: 1;
}

/* ---------------------------------------------------------
   7.4 — SERVIÇOS: cards como componentes de produto digital
   Barra de destaque no topo, borda dinâmica mais evidente,
   spotlight bem mais perceptível, ícone com anel técnico.
--------------------------------------------------------- */

.service-card {
  border-width: 1px;
  border-color: rgba(212, 175, 55, 0.22);
}

.service-card::before {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.9), transparent);
  opacity: 0.55;
}

.service-card:hover::before {
  opacity: 1;
}

.services .services-grid .service-card:hover {
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow:
    0 40px 80px -20px rgba(0, 0, 0, 0.85),
    inset 0 0 60px rgba(212, 175, 55, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.service-card {
  --spot-o: 0.14; /* presença mínima mesmo sem hover — antes era 0 */
}

.service-card .service-icon {
  position: relative;
}

.service-card .service-icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 50%;
  animation: techSpin 40s linear infinite;
}

.service-top .service-num {
  color: rgba(212, 175, 55, 0.16);
}

/* Entrada em sequência real: delay maior entre cards para o
   efeito "CARD 1 → CARD 2 → CARD 3 → CARD 4" ficar visível */
.service-card:nth-child(1) { transition-delay: 0.05s; }
.service-card:nth-child(2) { transition-delay: 0.22s; }
.service-card:nth-child(3) { transition-delay: 0.39s; }
.service-card:nth-child(4) { transition-delay: 0.56s; }

/* ---------------------------------------------------------
   7.5 — PROCESSO: fluxo de sistema real
   O círculo do número passa a ser o "nó" da linha: maior,
   com anel dourado e glow. A linha de progresso fica mais
   grossa e visível. Cada etapa acende quando a linha chega.
--------------------------------------------------------- */

.process-timeline {
  padding-left: 4px;
}

.process-progress {
  left: 27px;
  width: 3px;
  background: rgba(255, 255, 255, 0.08);
}

.process-progress-fill {
  box-shadow: 0 0 16px 2px rgba(212, 175, 55, 0.55);
}

.step-number {
  position: relative;
  min-width: 58px;
  height: 58px;
  font-size: 1.4rem;
  font-family: var(--mono);
  background: linear-gradient(160deg, #1a1a1a, #0a0a0a);
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 0 0 4px var(--bg-black), 0 0 22px rgba(212, 175, 55, 0.18);
  transition: border-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease;
}

/* Acende quando a etapa entra na viewport (reaproveita o
   IntersectionObserver já existente) */
.reveal.active .step-number {
  border-color: rgba(212, 175, 55, 0.8);
  box-shadow: 0 0 0 4px var(--bg-black), 0 0 32px rgba(212, 175, 55, 0.4);
  color: var(--primary);
}

.process-step:not(:last-child)::after {
  left: 28px;
  background-color: rgba(255, 255, 255, 0.1);
}

.step-tag {
  font-family: var(--mono);
  letter-spacing: 2px;
}

/* Entrada em sequência das etapas (BLOCO 3 já faz o stagger;
   aqui só ampliamos o espaçamento entre elas) */
.process-step:nth-child(2) { transition-delay: 0.18s; }
.process-step:nth-child(3) { transition-delay: 0.34s; }
.process-step:nth-child(4) { transition-delay: 0.5s; }

/* ---------------------------------------------------------
   7.6 — DIFERENCIAIS: composição editorial assimétrica
   Sai do grid "4 caixas iguais": 2 colunas alternando largura,
   números grandes parcialmente decorativos, cartão com corte
   de canto (clip-path) em vez de esquina reta.
--------------------------------------------------------- */

.cases-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.case-card {
  grid-column: span 6;
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(212, 175, 55, 0.18);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  padding: 38px 34px 34px;
}

.case-card:nth-child(1) { grid-column: span 7; }
.case-card:nth-child(2) { grid-column: span 5; }
.case-card:nth-child(3) { grid-column: span 5; }
.case-card:nth-child(4) { grid-column: span 7; }

.case-card:hover {
  border-color: rgba(212, 175, 55, 0.45);
}

.case-card .service-icon {
  margin-bottom: 6px;
}

@media (max-width: 900px) {
  .cases-grid { grid-template-columns: 1fr; }
  .case-card,
  .case-card:nth-child(1),
  .case-card:nth-child(2),
  .case-card:nth-child(3),
  .case-card:nth-child(4) {
    grid-column: span 1;
  }
}

/* ---------------------------------------------------------
   7.7 — CTA FINAL / RODAPÉ: encerramento cinematográfico
--------------------------------------------------------- */

.closing-glow {
  width: 900px;
  height: 420px;
  background: radial-gradient(ellipse, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0) 70%);
  filter: blur(60px);
}

.closing-ring {
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
}

.footer {
  background:
    var(--tech-grid),
    radial-gradient(60% 80% at 50% 0%, rgba(212, 175, 55, 0.08), rgba(212, 175, 55, 0) 65%),
    var(--bg-black);
  border-top: 1px solid rgba(212, 175, 55, 0.15);
}

.footer-brand h3 {
  font-family: var(--mono);
  letter-spacing: 1px;
}

/* ---------------------------------------------------------
   7.8 — HERO: reforço final de presença
--------------------------------------------------------- */

.hero-text h1 {
  letter-spacing: -2px;
}

.tech-ring-1 { top: 8%; right: 4%; }
.tech-ring-2 { top: 4%; right: -2%; }
.tech-orbit { bottom: 6%; left: 2%; }
.tech-marker-1, .tech-marker-2 { opacity: 0.8; }

/* ---------------------------------------------------------
   7.9 — RESPONSIVIDADE
   Tablet: reduz primitivos maiores. Mobile: mantém identidade
   (grid, mesh, reveals) mas remove anéis/órbitas grandes e a
   grade técnica de fundo de maior contraste, evitando overflow
   e custo de composição em telas pequenas.
--------------------------------------------------------- */

@media (max-width: 1100px) {
  .tech-ring-2,
  .tech-orbit,
  .tech-glow {
    display: none;
  }
}

@media (max-width: 700px) {
  /* Reabre o que o BLOCO 6 escondia por completo no mobile —
     a identidade técnica deve continuar presente, só mais
     simples (linha + ponto + canto, sem os primitivos maiores) */
  .section-deco,
  .closing-atmosphere {
    display: block;
    opacity: 1;
  }

  .tech-ring,
  .tech-orbit,
  .tech-orb,
  .tech-grid-line,
  .tech-marker,
  .tech-label {
    display: none;
  }

  :root {
    --tech-grid: none;
  }

  .about,
  .services,
  .process,
  .cases,
  .services-guide,
  .faq-section,
  .footer {
    background-image: none;
  }

  .about,
  .services,
  .cases {
    background-color: var(--bg-graphite);
  }

  .process,
  .services-guide,
  .faq-section,
  .footer {
    background-color: var(--bg-black);
  }

  .case-card {
    clip-path: none;
    border-radius: 15px;
  }
}

/* ---------------------------------------------------------
   7.10 — prefers-reduced-motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tech-ring,
  .tech-orbit,
  .tech-orb,
  .service-card .service-icon::after {
    animation: none;
  }

  .step-number {
    transition: none;
  }
}

/* =========================================================
   BLOCO 8 — SISTEMA 3D PREMIUM (100% aditivo)
   Nova camada de profundidade e interação por cima de tudo que
   já existe (BLOCOS 1-7 continuam intocados, com pequenas
   exceções pontuais assinaladas abaixo, todas de reforço visual
   — nenhum texto, preço, link ou estrutura muda).

   Regra do sistema: toda a interação contínua por mouse usa as
   propriedades independentes `rotate` / `translate` (CSS
   Transforms Level 2) em vez de `transform`. Assim, nunca disputa
   com os `transform`/animações já aprovados (hover, entrada,
   drift, spin) — as duas camadas somam visualmente em vez de uma
   sobrescrever a outra. Em navegadores muito antigos que não
   reconhecem `rotate`/`translate` como propriedades, a declaração
   é simplesmente ignorada e o site continua exatamente como
   antes (progressive enhancement).
========================================================= */

/* ---------------------------------------------------------
   8.0 — PERSPECTIVA GLOBAL
   Necessária para o translateZ do scroll (8.5) e para a
   profundidade do Hero (8.2/8.3) terem efeito visual real.
--------------------------------------------------------- */

body {
  perspective: 1600px;
}

.hero {
  perspective: 1400px;
}

.hero-text,
.hero-atmosphere {
  transform-style: preserve-3d;
}

/* ---------------------------------------------------------
   8.1 — TILT 3D + LUZ NOS CARDS
   rotate/translate aplicados via JS (js/script.js) somando-se
   à elevação/escala que cada card já tem no :hover — nenhuma
   delas foi alterada aqui.
--------------------------------------------------------- */

.service-card,
.case-card,
.price-card {
  transform-style: preserve-3d;
}

/* Reflexo de luz que acompanha o cursor, no mesmo padrão já
   aprovado para os cards de Serviços — agora também em
   Diferenciais e Preços. */
.case-card {
  --mx: 50%;
  --my: 50%;
  --spot-o: 0;
  /* Reafirma o gradiente diagonal já aprovado (BLOCO 7.6) e
     acrescenta o reflexo de luz por cima — sem isto, definir
     background-image aqui sozinho apagaria aquele gradiente. */
  background-image:
    radial-gradient(220px circle at var(--mx) var(--my), rgba(212, 175, 55, var(--spot-o)), transparent 60%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
  background-repeat: no-repeat;
}

.price-card {
  --mx: 50%;
  --my: 50%;
  --spot-o: 0;
  background-image: radial-gradient(240px circle at var(--mx) var(--my), rgba(212, 175, 55, var(--spot-o)), transparent 60%);
  background-repeat: no-repeat;
}

.pricing-grid {
  perspective: 1200px;
}

/* ---------------------------------------------------------
   8.2 — HERO: camadas de profundidade reagindo ao mouse
   JS define --hx/--hy (-1..1) em .hero. Cada camada se move a
   uma velocidade/profundidade diferente — foto em primeiro
   plano (mais deslocamento + vem "para frente"), texto um
   pouco atrás, elementos decorativos de fundo com o menor
   deslocamento. Título e foto continuam no lugar de sempre:
   isto só adiciona um deslocamento suave por cima.
--------------------------------------------------------- */

.hero-img {
  translate: calc(var(--hx, 0) * 16px) calc(var(--hy, 0) * 12px) 32px;
  transition: translate 0.5s cubic-bezier(.16, .84, .44, 1);
}

.hero-text {
  translate: calc(var(--hx, 0) * 9px) calc(var(--hy, 0) * 6px) 14px;
  transition: translate 0.5s cubic-bezier(.16, .84, .44, 1);
}

.tech-ring-1 {
  translate: calc(var(--hx, 0) * 20px) calc(var(--hy, 0) * 14px);
  transition: translate 0.7s cubic-bezier(.16, .84, .44, 1);
}

.tech-ring-2 {
  translate: calc(var(--hx, 0) * -14px) calc(var(--hy, 0) * -10px);
  transition: translate 0.7s cubic-bezier(.16, .84, .44, 1);
}

.atmo-aurora-1 {
  translate: calc(var(--hx, 0) * 8px) calc(var(--hy, 0) * 6px);
  transition: translate 0.9s cubic-bezier(.16, .84, .44, 1);
}

.atmo-aurora-2 {
  translate: calc(var(--hx, 0) * -8px) calc(var(--hy, 0) * -6px);
  transition: translate 0.9s cubic-bezier(.16, .84, .44, 1);
}

.tech-panel {
  translate: calc(var(--hx, 0) * 12px) calc(var(--hy, 0) * 9px) -40px;
  transition: translate 0.7s cubic-bezier(.16, .84, .44, 1);
}

/* ---------------------------------------------------------
   8.3 — ELEMENTO ABSTRATO: placa de vidro flutuante
   Painel 3D discreto, só decorativo (aria-hidden), reforçando
   a sensação de camadas no Hero sem virar objeto chamativo.
--------------------------------------------------------- */

.tech-panel {
  position: absolute;
  top: 24%;
  right: 20%;
  width: 130px;
  height: 82px;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, 0.22);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  rotate: 0 1 0 25deg;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

/* ---------------------------------------------------------
   8.4 — TIPOGRAFIA 3D: título do Hero
   Profundidade elegante via sombra em camadas + leve resposta
   ao mouse (mesmo eixo único do tilt dos cards). O reveal em
   "varredura" (clip-path) do BLOCO 6 continua exatamente igual
   — esta rotação soma-se por cima, sem tocar no `transform`
   usado por aquela animação de entrada.
--------------------------------------------------------- */

.hero-text h1 {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 26px rgba(0, 0, 0, 0.45),
    0 2px 42px rgba(212, 175, 55, 0.12);
  rotate: calc(var(--hy, 0) * -1) calc(var(--hx, 0) * 1) 0 2.5deg;
  transition: rotate 0.5s cubic-bezier(.16, .84, .44, 1);
}

/* ---------------------------------------------------------
   8.5 — SCROLL 3D: seções "aproximam-se" da câmera
   Reforça o reveal genérico já existente (BLOCO 3) com
   translateZ, usando a perspective do body (8.0). Cards de
   Serviços/Diferenciais/Preços ganham também uma pequena
   rotação 3D na entrada, em vez de só translateY.
--------------------------------------------------------- */

.reveal:not(.hero):not(.pricing):not(.service-card):not(.case-card):not(.price-card) {
  transform: translateY(40px) scale(0.985) translateZ(-140px);
}

.reveal.active:not(.hero):not(.pricing):not(.service-card):not(.case-card):not(.price-card) {
  transform: translateY(0) scale(1) translateZ(0);
}

.reveal .service-card {
  transform: translateY(30px) rotateY(7deg) translateZ(-60px);
}

.reveal.active .service-card {
  transform: translateY(0) rotateY(0deg) translateZ(0);
}

.reveal .case-card {
  transform: translateY(30px) scale(0.96) rotateY(-7deg) translateZ(-60px);
}

.reveal.active .case-card {
  transform: translateY(0) scale(1) rotateY(0deg) translateZ(0);
}

.reveal .price-card {
  transform: translateY(30px) rotateY(7deg) translateZ(-60px);
}

.reveal.active .price-card {
  transform: translateY(0) rotateY(0deg) translateZ(0);
}

/* ---------------------------------------------------------
   8.6 — SCROLL REVEAL AVANÇADO: máscara nos rótulos de seção
   Mesma técnica "varredura" já aprovada para o H1 do Hero,
   estendida aos pequenos rótulos "✦ ..." de cada seção — uma
   entrada cinematográfica extra, diferente do fade dos títulos.
--------------------------------------------------------- */

.about-title > span,
.services-title > span,
.cases-title > span,
.pricing-title > span,
.faq-title > span,
.guide-title > span {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
}

.reveal.active .about-title > span,
.reveal.active .services-title > span,
.reveal.active .cases-title > span,
.reveal.active .pricing-title > span,
.reveal.active .faq-title > span,
.reveal.active .guide-title > span {
  animation: heroTitleReveal 0.8s cubic-bezier(.16, .84, .44, 1) both;
}

/* ---------------------------------------------------------
   8.7 — GLASSMORPHISM CONTROLADO
   Só nos elementos flutuantes/de destaque indicados — o fundo
   principal do site continua preto/grafite normalmente.
--------------------------------------------------------- */

.experience-box {
  background: rgba(17, 17, 17, 0.45);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.premium-box {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---------------------------------------------------------
   8.8 — MICROINTERAÇÕES: profundidade extra em botões e ícones
   Somado via translate/rotate independentes — a elevação e o
   brilho que os botões/ícones já tinham continuam idênticos.
--------------------------------------------------------- */

.btn,
.btn-secondary {
  translate: 0 0 0;
  transition: translate 0.35s ease;
}

.btn:hover,
.btn-secondary:hover {
  translate: 0 0 18px;
}

.service-card:hover .service-icon,
.case-card:hover .service-icon {
  rotate: 0 0 1 6deg;
  transition: rotate 0.35s cubic-bezier(.22, .9, .32, 1);
}

/* ---------------------------------------------------------
   8.9 — MOBILE: reduz a intensidade do 3D
   Mantém o scroll reveal e as microinterações por toque, mas
   remove profundidade/perspective mais pesada (tilt já não
   roda no JS por não haver mouse fino).
--------------------------------------------------------- */

@media (max-width: 900px) {
  .tech-panel {
    display: none;
  }
}

@media (max-width: 700px) {
  body {
    perspective: none;
  }

  .reveal:not(.hero):not(.pricing):not(.service-card):not(.case-card):not(.price-card) {
    transform: translateY(24px) scale(0.99);
  }

  .reveal.active:not(.hero):not(.pricing):not(.service-card):not(.case-card):not(.price-card) {
    transform: translateY(0) scale(1);
  }

  .reveal .service-card,
  .reveal .case-card,
  .reveal .price-card {
    transform: translateY(20px);
  }

  .reveal.active .service-card,
  .reveal.active .case-card,
  .reveal.active .price-card {
    transform: translateY(0);
  }

  .btn:hover,
  .btn-secondary:hover {
    translate: 0 0 0;
  }
}

/* ---------------------------------------------------------
   8.10 — ACESSIBILIDADE: prefers-reduced-motion
   Remove tilt, parallax por mouse, translateZ de scroll e a
   máscara animada dos rótulos — o conteúdo permanece 100%
   visível, só sem o movimento.
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body,
  .hero {
    perspective: none;
  }

  .hero-img,
  .hero-text,
  .hero-text h1,
  .tech-ring-1,
  .tech-ring-2,
  .atmo-aurora-1,
  .atmo-aurora-2,
  .tech-panel,
  .service-card,
  .case-card,
  .price-card,
  .btn,
  .btn-secondary {
    rotate: none;
    translate: none;
    transition: none;
  }

  .about-title > span,
  .services-title > span,
  .cases-title > span,
  .pricing-title > span,
  .faq-title > span,
  .guide-title > span {
    animation: none;
    clip-path: inset(0 0 0 0);
  }

  .reveal:not(.hero):not(.pricing):not(.service-card):not(.case-card):not(.price-card),
  .reveal.active:not(.hero):not(.pricing):not(.service-card):not(.case-card):not(.price-card),
  .reveal .service-card,
  .reveal.active .service-card,
  .reveal .case-card,
  .reveal.active .case-card,
  .reveal .price-card,
  .reveal.active .price-card {
    transform: none;
  }

  .service-card:hover .service-icon,
  .case-card:hover .service-icon {
    rotate: none;
  }
}

/* =========================================================
   BLOCO 9 — SISTEMA CINEMATOGRÁFICO 3D (GSAP + ScrollTrigger)
   Camada aditiva sobre os BLOCOS 1-8. Todo o controle de
   quando/como cada efeito roda está em js/cinematic.js; aqui só
   ficam os estilos que esse script consome (spans de split-line,
   profundidade interna dos cards, linha viajante) e os ajustes
   pontuais para a seção Processo, que precisava do mesmo
   comportamento 3D das demais.

   Segurança: nada aqui esconde conteúdo por padrão. As spans de
   "split-line" só existem depois que o JS as cria — se o GSAP não
   carregar, os títulos permanecem como texto normal, sempre
   visível.
========================================================= */

/* ---------------------------------------------------------
   9.1 — SPLIT-LINE REVEAL (títulos)
--------------------------------------------------------- */

.split-line {
  display: block;
  overflow: hidden;
}

.split-line-inner {
  display: inline-block;
  will-change: transform, opacity;
}

/* ---------------------------------------------------------
   9.2 — PROCESSO: profundidade 3D real na entrada das etapas
   (o restante do comportamento — reveal, reversibilidade,
   stagger por nth-child — já existe nos BLOCOS 3 e 7.5 e
   continua intocado; isto só acrescenta rotateX/translateZ).
--------------------------------------------------------- */

.process-timeline {
  perspective: 1100px;
}

.reveal .process-step {
  transform: translateY(24px) translateZ(-70px) rotateX(8deg);
}

.reveal.active .process-step {
  transform: translateY(0) translateZ(0) rotateX(0deg);
}

/* ---------------------------------------------------------
   9.3 — PROFUNDIDADE INTERNA DOS CARDS
   Elementos internos em planos Z diferentes do card — dentro do
   preserve-3d já definido no BLOCO 8, o resultado é um objeto
   com profundidade real, não só o card inteiro inclinando.
--------------------------------------------------------- */

.service-icon {
  transform: translateZ(22px);
}

.service-card:hover .service-icon {
  transform: translateZ(22px) translateY(-3px) scale(1.07);
}

.case-card:hover .service-icon {
  transform: translateZ(22px) scale(1.08);
}

.service-card h3,
.case-card h3 {
  transform: translateZ(14px);
}

.plan-name {
  transform: translateZ(20px);
}

.price-card h3 {
  transform: translateZ(14px);
}

/* ---------------------------------------------------------
   9.4 — LINHA VIAJANTE ENTRE SEÇÕES
   Fixa na lateral da tela; o traço (stroke-dasharray/-dashoffset)
   é animado pelo JS conforme o scroll da página inteira — reforça
   a continuidade entre Hero, Serviços, Processo, Diferenciais,
   Preços, CTA e Rodapé.
--------------------------------------------------------- */

.cinematic-travel-line {
  position: fixed;
  top: 0;
  right: 18px;
  width: 2px;
  height: 100vh;
  z-index: 5;
  pointer-events: none;
  opacity: 0.5;
}

.cinematic-travel-line svg {
  display: block;
  overflow: visible;
}

.cinematic-travel-line line {
  stroke: #d4af37;
  stroke-width: 1.5;
}

/* ---------------------------------------------------------
   9.5 — MOBILE
   Remove a linha viajante (elemento fixo de borda não agrega
   em telas pequenas) e reduz a profundidade 3D do Processo para
   evitar exagero em telas estreitas; o reveal simples continua.
--------------------------------------------------------- */

@media (max-width: 700px) {
  .cinematic-travel-line {
    display: none;
  }

  .reveal .process-step {
    transform: translateY(18px);
  }

  .reveal.active .process-step {
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------
   9.6 — ACESSIBILIDADE: prefers-reduced-motion
   js/cinematic.js já não executa nesse caso (nem tilt, nem
   parallax, nem split-line animado); aqui só garantimos que
   nada fica com clip/transform residual e que os títulos
   "split" (se algum dia chegarem a existir sem JS ativo, o que
   não acontece por construção) ficam sempre totalmente visíveis.
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cinematic-travel-line {
    display: none;
  }

  .split-line-inner {
    transform: none !important;
    opacity: 1 !important;
  }

  .reveal .process-step,
  .reveal.active .process-step {
    transform: none;
  }

  .service-icon,
  .service-card:hover .service-icon,
  .case-card:hover .service-icon,
  .service-card h3,
  .case-card h3,
  .plan-name,
  .price-card h3 {
    transform: none;
  }
}

/* =========================================================
   BLOCO 10 — DOURADO METÁLICO (destaque do H1 do Hero)
   Substitui o dourado sólido da palavra em destaque ("vendem")
   por um gradiente metálico animado — sempre dourado, com
   variações mais claras/escuras e um highlight quase branco que
   varre o texto continuamente, em loop. Sem cromo/prata e sem
   amarelo neon. 100% CSS, sem vídeo ou imagem externa. A regra
   original (cor sólida dourada, em .hero h1 span, lá em cima)
   continua intocada como fallback para navegadores muito antigos
   sem suporte a background-clip em texto — daí o @supports abaixo.
========================================================= */

@supports (background-clip: text) or (-webkit-background-clip: text) {

  .hero h1 span:not(.split-line):not(.split-line-inner) {
    color: transparent;
    background-image: linear-gradient(
      100deg,
      var(--gold-deep) 0%,
      var(--gold-dark) 14%,
      var(--gold) 26%,
      var(--gold-light) 38%,
      var(--gold-lighter) 48%,
      var(--gold-light) 58%,
      var(--gold) 68%,
      var(--gold-dark) 80%,
      var(--gold-deep) 92%,
      var(--gold-dark) 100%
    );
    background-size: 260% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    animation: liquidMetalSweep 4.5s linear infinite;
  }

  @keyframes liquidMetalSweep {
    0%   { background-position: 0% 50%; }
    100% { background-position: -160% 50%; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero h1 span:not(.split-line):not(.split-line-inner) {
      animation: none;
      background-position: 30% 50%;
    }
  }
}

/* =========================================================
   BLOCO 12 — DETALHES DOURADOS ANIMADOS (Hero)
   Substitui o Liquid Gold 3D por uma camada 100% CSS de
   detalhes dourados vivos e em loop infinito: reflexos que
   percorrem as linhas finas já existentes em .hero-atmosphere,
   pequenos pontos de luz que se deslocam, um elemento geométrico
   flutuante extra e um highlight orbitando a moldura da foto.
   Nada aqui aparece uma vez só — tudo é `infinite`, com
   durações e delays diferentes por elemento para dar
   profundidade sem sincronismo. 100% decorativo (aria-hidden),
   fica atrás do texto/foto/CTAs do Hero, que continuam intocados.
========================================================= */

.hero {
  overflow: hidden; /* contém a leve profundidade dos elementos abaixo */
}

/* ---------------------------------------------------------
   12.1 — REFLEXOS QUE PERCORREM AS LINHAS FINAS
   Um pequeno segmento quase branco que nasce numa ponta da
   linha, percorre o comprimento dela e desaparece do outro
   lado — "aceso" só durante a travessia, não uma barra fixa.
--------------------------------------------------------- */

.atmo-glint {
  position: absolute;
  width: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-lighter), transparent);
  box-shadow: 0 0 6px rgba(255, 246, 222, 0.55);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.atmo-glint-1 {
  top: 20%;
  left: 3%;
  animation: glintTravel1 7s ease-in-out infinite;
}

.atmo-glint-2 {
  bottom: 16%;
  right: 5%;
  animation: glintTravel2 8.5s ease-in-out infinite 2.4s;
}

@keyframes glintTravel1 {
  0%   { transform: translateX(0) rotate(-4deg); opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { transform: translateX(122px) rotate(-4deg); opacity: 0.9; }
  90%  { opacity: 0; }
  100% { transform: translateX(240px) rotate(-4deg); opacity: 0; }
}

@keyframes glintTravel2 {
  0%   { transform: translateX(0) rotate(3deg); opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { transform: translateX(-92px) rotate(3deg); opacity: 0.9; }
  90%  { opacity: 0; }
  100% { transform: translateX(-180px) rotate(3deg); opacity: 0; }
}

/* ---------------------------------------------------------
   12.2 — ELEMENTO GEOMÉTRICO FLUTUANTE
   Pequeno losango vazado (só borda), flutuando muito
   suavemente — some do grupo .atmo-shape já existente
   (.atmo-circle, .atmo-arc), com sua própria velocidade.
--------------------------------------------------------- */

.atmo-diamond {
  width: 13px;
  height: 13px;
  top: 28%;
  right: 20%;
  border-color: rgba(212, 175, 55, 0.4);
  transform: rotate(45deg);
  animation: diamondFloat 15s ease-in-out infinite;
}

@keyframes diamondFloat {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.45; }
  50%      { transform: translateY(-16px) rotate(51deg); opacity: 0.8; }
}

@media (max-width: 900px) {
  .atmo-diamond {
    display: none;
  }
}

/* ---------------------------------------------------------
   12.3 — PONTOS DE LUZ EM DESLOCAMENTO CONTÍNUO
   Diferente do .atmo-dot estático (rodapé), estes se deslocam
   devagar em trajetos curtos e orgânicos, cada um com duração,
   atraso e direção próprios.
--------------------------------------------------------- */

.atmo-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-lighter);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.7);
  pointer-events: none;
  will-change: transform, opacity;
}

.atmo-spark-1 {
  top: 16%;
  left: 58%;
  animation: sparkDrift1 11s ease-in-out infinite;
}

.atmo-spark-2 {
  bottom: 24%;
  left: 38%;
  animation: sparkDrift2 13.5s ease-in-out infinite 2s;
}

.atmo-spark-3 {
  top: 55%;
  right: 10%;
  animation: sparkDrift3 9.5s ease-in-out infinite 1s;
}

@keyframes sparkDrift1 {
  0%, 100% { transform: translate(0, 0); opacity: 0.35; }
  50%      { transform: translate(18px, -22px); opacity: 1; }
}

@keyframes sparkDrift2 {
  0%, 100% { transform: translate(0, 0); opacity: 0.3; }
  50%      { transform: translate(-20px, -14px); opacity: 0.9; }
}

@keyframes sparkDrift3 {
  0%, 100% { transform: translate(0, 0); opacity: 0.4; }
  50%      { transform: translate(-15px, 18px); opacity: 1; }
}

@media (max-width: 700px) {
  .atmo-glint,
  .atmo-spark {
    display: none;
  }
}

/* ---------------------------------------------------------
   12.4 — HIGHLIGHT ORBITANDO A MOLDURA DA FOTO
   Um pequeno brilho quase branco que gira lentamente ao redor
   da foto, por trás dela — reforça a moldura sem criar um
   halo grande ou um anel visível o tempo todo.
--------------------------------------------------------- */

.hero-img::after {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle 10px at 50% 3%, rgba(255, 246, 222, 0.55), transparent 72%);
  animation: heroFrameOrbit 12s linear infinite;
}

@keyframes heroFrameOrbit {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------
   12.5 — ACESSIBILIDADE: prefers-reduced-motion
   Congela os novos detalhes numa versão estática e discreta,
   somando-se à mesma media query que já imobiliza o resto da
   atmosfera do Hero (BLOCO 6, acima).
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .atmo-glint {
    animation: none;
    opacity: 0;
  }

  .atmo-diamond,
  .atmo-spark {
    animation: none;
    opacity: 0.35;
    transform: none;
  }

  .hero-img::after {
    animation: none;
  }
}

/* =========================================================
   BLOCO 13 — PREÇOS: ELEVAÇÃO PREMIUM (100% aditivo)
   Nada acima foi removido ou alterado — nenhum preço, texto,
   link ou classe existente muda de lugar. Este bloco só estende
   ao .price-card o mesmo tratamento que os cards de Serviços já
   receberam no BLOCO 7.4 (spotlight mínimo mesmo sem hover,
   ícone com anel técnico giratório) e acrescenta duas
   microinterações que a seção ainda não tinha: destaque do card
   inteiro no foco por teclado (:focus-within) e uma seta de CTA
   que desliza sutilmente no hover/foco. O glint de luz que
   percorre o topo do card, o gradiente metálico do nome do
   plano, a lista com check dourado e as variações por plano
   (basic/premium/business) continuam exatamente como estão.
========================================================= */

/* 13.1 — Presença mínima do spotlight mesmo sem hover, igual ao
   .service-card — o JS de tilt (js/cinematic.js) continua sendo
   o único responsável por levar --spot-o a 1 no hover. */
.price-card {
  --spot-o: 0.1;
}

/* 13.2 — Ícone do plano: reaproveita a classe .service-icon
   (mesmo tamanho, borda e fundo já usados em Serviços) só com
   espaço abaixo para não colar no nome do plano. */
.price-card .service-icon {
  position: relative;
  margin-bottom: 22px;
}

.price-card .service-icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 50%;
  animation: techSpin 40s linear infinite;
}

.price-card:hover .service-icon,
.price-card:focus-within .service-icon {
  transform: translateZ(22px) translateY(-3px) scale(1.07);
}

/* 13.3 — Destaque elegante do card inteiro no foco por teclado
   (tab até o botão "Solicitar orçamento"), complementando o
   outline já existente em a:focus-visible sem substituí-lo. */
.price-card:focus-within {
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.25),
    0 20px 50px -20px rgba(0, 0, 0, 0.6);
}

/* 13.4 — CTA: a seta desliza sutilmente no hover/foco, sem
   alterar cor, fundo ou tamanho do botão. */
.btn-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.price-btn:hover .btn-arrow,
.price-btn:focus-visible .btn-arrow {
  transform: translateX(4px);
}

/* 13.5 — prefers-reduced-motion: remove só as novas rotações/
   translações deste bloco; cor, borda e foco continuam normais. */
@media (prefers-reduced-motion: reduce) {
  .price-card .service-icon::after {
    animation: none;
  }

  .price-card:hover .service-icon,
  .price-card:focus-within .service-icon {
    transform: none;
  }

  .btn-arrow {
    transition: none;
  }

  .price-btn:hover .btn-arrow,
  .price-btn:focus-visible .btn-arrow {
    transform: none;
  }
}

/* =========================================================
   BLOCO 14 — CTA FINAL: ENCERRAMENTO CINEMATOGRÁFICO
   (100% aditivo). Nova seção entre FAQ e Rodapé — o <footer>
   (marca, navegação, contato, copyright) continua exatamente
   como está, intocado; esta seção só antecede o fechamento da
   página com um convite direto ao orçamento.

   Reaproveita integralmente o que já existe, sem recriar nada:
   - título por linhas: .cta-title h2 entra na lista já usada
     por Sobre/Serviços/Processo em js/cinematic.js (BLOCO 9.1);
   - subtítulo com blur/scroll: .cta-title p entra na mesma
     scrubTextReveal() já usada em Sobre/Processo/Preços;
   - profundidade 3D na entrada: automática, via .reveal já
     genérico (BLOCO 8.5 do CSS cobre qualquer seção nova);
   - reversibilidade no scroll: automática, o observer de
     js/script.js já observa qualquer elemento .reveal;
   - botão de orçamento: reaproveita .btn tal como está (mesmo
     botão do Hero — já tem lift, brilho, reflexo e press);
   - decorativo: mesmo .section-deco usado em Serviços/
     Diferenciais/Preços, com elementos próprios (.cta-glow,
     .cta-line, .cta-ring) na mesma técnica visual do .closing-*
     já aprovado no rodapé — instâncias novas, não o duplicam.
========================================================= */

/* 14.1 — Base da seção: mesma textura técnica e fundo já usados
   em Preços/Rodapé, mantendo preto dominante + dourado só em
   detalhe. */
.cta {
  position: relative;
  z-index: 0;
  padding: 140px 8%;
  text-align: center;
  overflow: hidden;
  background:
    var(--tech-grid),
    radial-gradient(60% 70% at 50% 0%, rgba(212, 175, 55, 0.09), rgba(212, 175, 55, 0) 65%),
    var(--bg-black);
  border-top: 1px solid rgba(212, 175, 55, 0.1);
}

/* 14.2 — Título, subtítulo e CTA: mesma tipografia/hierarquia
   das demais seções (about/services/process), só centralizada. */
.cta-title {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.cta-title h2 {
  font-size: 95px;
  line-height: 0.95;
  color: #fff;
  margin-top: 20px;
  font-weight: 800;
}

.cta-title h2 span:not(.split-line):not(.split-line-inner) {
  color: #d4af37;
}

.cta-title .title-line {
  margin-left: auto;
  margin-right: auto;
}

.cta-title p {
  color: #8b8b8b;
  margin-top: 26px;
  font-size: 18px;
  line-height: 1.7;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.cta-btn {
  margin-top: 44px;
}

/* 14.3 — Entrada do botão: pequeno movimento vertical + escala,
   mesma técnica de .reveal/.reveal.active já usada em elementos
   como .experience-box e .guide-item (BLOCO 6.4). */
.reveal .cta-btn {
  opacity: 0;
  transform: translateY(24px) scale(0.94);
  transition:
    opacity 0.8s cubic-bezier(.16, .84, .44, 1) 0.3s,
    transform 0.8s cubic-bezier(.16, .84, .44, 1) 0.3s;
}

.reveal.active .cta-btn {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 14.4 — Camada decorativa: brilho central + duas linhas finas
   convergindo + um anel técnico, mesma linguagem visual do
   .closing-* do rodapé (glow discreto, linhas em respiração
   lenta via atmoBreathe, anel girando via techSpin). */
.cta-glow {
  position: absolute;
  width: 900px;
  height: 420px;
  left: 50%;
  top: -80px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0) 70%);
  filter: blur(60px);
  pointer-events: none;
}

.cta-line {
  position: absolute;
  height: 1px;
  width: 30%;
  top: 50%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.22), transparent);
  animation: atmoBreathe 15s ease-in-out infinite;
  pointer-events: none;
}

.cta-line-1 { left: 0; transform: rotate(-2deg); }
.cta-line-2 { right: 0; transform: rotate(2deg); animation-delay: 3s; }

.cta-ring {
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 320px;
  animation: techSpin 80s linear infinite;
}

/* 14.5 — Responsivo: menos elementos decorativos e parallax mais
   discreto no tablet/mobile, sem perder legibilidade nem CTA. */
@media (max-width: 1100px) {
  .cta-title h2 {
    font-size: 65px;
  }

  .cta-ring {
    display: none;
  }
}

@media (max-width: 700px) {
  .cta {
    padding: 90px 6%;
  }

  .cta-title h2 {
    font-size: 48px;
  }

  .cta-title p {
    font-size: 16px;
  }

  .cta-line-2 {
    display: none;
  }
}

/* 14.6 — prefers-reduced-motion: remove só o movimento novo
   deste bloco (respiração das linhas e a entrada do botão);
   o anel (.tech-ring) já é congelado pela regra existente no
   BLOCO 7.10. Conteúdo, cor e contraste continuam normais. */
@media (prefers-reduced-motion: reduce) {
  .cta-line {
    animation: none;
  }

  .reveal .cta-btn,
  .reveal.active .cta-btn {
    transition: none;
    transform: none;
    opacity: 1;
  }
}
/* =========================================================
   BLOCO 15 — HERO MOBILE: composição texto → botões → foto
   No mobile o .hero vira coluna (flex-direction: column), então
   a foto sempre vem depois do .hero-text. O que deixava a foto
   "solta" e os botões desalinhados era:
   - .btn-secondary { margin-left: 30px } (pensado para o desktop,
     lado a lado) empurrando o 2º botão para a direita ao quebrar;
   - gap: 40px do .hero + margin-top: 30px do .hero-img somados,
     afastando a foto ~70px dos botões;
   - translate 3D (translateZ 32px) do BLOCO 8.2 na foto, que com
     a perspective do .hero a amplia e desloca levemente.
   Desktop (> 900px) não é afetado: .hero-actions é um bloco
   comum e os botões continuam inline, exatamente como antes.
   Foto: mesmo arquivo, mesmo tamanho e proporção, sem corte.
========================================================= */

@media (max-width: 900px) {
  .hero {
    gap: 36px;
  }

  .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    max-width: 320px;
    margin: 26px auto 0;
  }

  .hero-actions .btn,
  .hero-actions .btn-secondary {
    width: 100%;
    margin-left: 0;
  }

  .hero-text {
    translate: none;
  }

  .hero-img {
    margin-top: 0;
    translate: none;
  }
}

/* =========================================================
   BLOCO 16 — MOBILE: sem rolagem horizontal
   Causas do overflow (a página ficava com ~623px em telas de
   390px):
   - .header com padding lateral de 60px + menu (gap 45px,
     letter-spacing 3px) + .btn-header na mesma linha;
   - .premium-box com width: 500px fixo;
   - .step-content (Processo) sem min-width: 0 dentro do flex.
   Os brilhos decorativos (.cta-glow, .closing-glow, auroras)
   já são recortados pelos pais com overflow: hidden.
   Desktop não é afetado.
========================================================= */

@media (max-width: 700px) {
  .header,
  .header.is-scrolled {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
    padding: 12px 16px;
  }

  .nav {
    flex: 0 1 100%;
    justify-content: center;
    gap: 18px;
  }

  .nav a {
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  /* No mobile o cabeçalho fica só com o menu; o CTA de orçamento
     continua no Hero ("Solicitar Orçamento") e no fim da página. */
  .btn-header {
    display: none;
  }

  .premium-box {
    display: flex;
    width: fit-content;
    margin: 0 auto;
    max-width: calc(100% - 32px);
    height: auto;
    padding: 14px 20px;
    font-size: 13px;
    letter-spacing: 3px;
  }

  .step-content {
    min-width: 0;
    flex: 1;
  }

  /* Sem "overflow-x: clip" em html/body: no Safari/iOS o clip
     também recorta o eixo Y e a página ficava em branco. A rede
     de segurança contra rolagem horizontal é o
     "body { overflow-x: hidden }" do início do arquivo. */
}

/* =========================================================
   BLOCO 17 — TÍTULOS DE SEÇÃO: sem letra cortada no mobile
   A máscara do split-line (.split-line { overflow: hidden })
   recortava a última letra das palavras mais longas que a
   coluna em 390px: "Desenvolvedor" (371px em 343px) e
   "Profissionalismo" (344px em 312px). Aqui a fonte desses dois
   títulos acompanha a largura da tela no mobile, e a máscara
   ganha uma pequena folga para itálico e descendentes, sem
   alterar o layout (padding compensado por margem negativa).
   Desktop não é afetado.
========================================================= */

.split-line {
  padding: 0 0.08em 0.1em;
  margin: 0 -0.08em -0.1em;
}

@media (max-width: 700px) {
  .about-title h2 {
    font-size: clamp(32px, 10.5vw, 48px);
  }

  .cases-title h2 {
    font-size: clamp(26px, 9vw, 40px);
  }
}