/* ==========================================================================
   NEFIUS — FOLHA DE ESTILOS (style.css)
   ==========================================================================

   REDESIGN — DIREÇÃO "TECH PREMIUM"
   -----------------------------------
   Mesma paleta de sempre (preto profundo, ébano, cacau, cobre, areia,
   marfim), mas com hierarquia mais forte, vidro (glassmorphism), gradientes
   suaves de cobre→dourado, cantos mais arredondados, sombras discretas e
   bastante microinteração/animação com transform+opacity (leve, com
   `prefers-reduced-motion` sempre respeitado).

   Os NOMES DAS CLASSES continuam os mesmos de antes (em português), então
   nenhum arquivo PHP precisou ser reestruturado: todo o site herda o novo
   visual só por carregar este arquivo.

   ÍNDICE (Ctrl+F pelo nome do bloco):
   1. Paleta / variáveis     8. Seções gerais        15. Preços/pacotes
   2. Reset / base           9. Cards de serviço      16. Formulários
   3. Utilitários de motion  10. Como funciona        17. Login/cadastro
   4. Botões                 11. Portfólio            18. Pagamento
   5. Cabeçalho / menu       12. Depoimentos          19. Painel cliente
   6. Hero                   13. FAQ                  20. Rodapé
   7. Confiança              14. CTA final            21. Painel admin
                                                       22. Responsivo
   ========================================================================== */


/* ==========================================================================
   1. PALETA DE CORES E VARIÁVEIS GERAIS
   ========================================================================== */
:root {

   /* --- 1.1 Paleta bruta (preservada) --- */
   --paleta-01-preto-profundo: #0A0807;
   --paleta-02-marrom-ebano: #1B140F;
   --paleta-03-cacau-tecnologico: #3B2A20;
   --paleta-05-areia-urbana: #8C7A6A;
   --paleta-06-marfim-digital: #E7DDD2;

   /* acentos elevados — derivados da própria paleta, usados nos gradientes
      e nos brilhos (glow); é o que dá o ar "tech premium" sem sair da
      identidade de cores original */
   --paleta-07-cobre-vivo: #C98A5E;
   --paleta-08-dourado-suave: #EAC195;

   /* --- 1.2 Cores "de uso" --- */
   --cor-fundo: var(--paleta-01-preto-profundo);
   --cor-fundo-alt: var(--paleta-02-marrom-ebano);
   --cor-cartao: var(--paleta-03-cacau-tecnologico);
   --cor-cartao-hover: #4A3628;

   --cor-texto-claro: var(--paleta-06-marfim-digital);
   --cor-texto-suave: #B8A99A;
   --cor-texto-fraco: var(--paleta-05-areia-urbana);

   --cor-borda: rgba(231, 221, 210, 0.12);
   --cor-borda-suave: rgba(231, 221, 210, 0.08);
   --cor-borda-forte: rgba(231, 221, 210, 0.20);

   --cor-destaque: var(--paleta-07-cobre-vivo);
   --cor-destaque-suave: rgba(201, 138, 94, 0.16);
   --cor-dourado: var(--paleta-08-dourado-suave);

   /* vidro (glassmorphism) */
   --cor-vidro: rgba(231, 221, 210, 0.045);
   --cor-vidro-forte: rgba(231, 221, 210, 0.09);

   /* gradientes de identidade — sempre dentro da paleta cobre→dourado */
   --grad-cta: linear-gradient(135deg, #8A5C3F 0%, #C98A5E 55%, #EAC195 100%);
   --grad-texto: linear-gradient(135deg, #F3E9DD 0%, #EAC195 55%, #C98A5E 100%);
   --grad-cartao: linear-gradient(165deg, var(--cor-vidro-forte), var(--cor-vidro));
   --glow-cobre: radial-gradient(circle, rgba(201, 138, 94, .32) 0%, rgba(201, 138, 94, 0) 70%);

   /* estados */
   --cor-sucesso: #8FBF87;
   --cor-sucesso-fundo: rgba(143, 191, 135, 0.14);
   --cor-erro: #E0876A;
   --cor-erro-fundo: rgba(224, 135, 106, 0.14);

   /* --- 1.3 Tipografia --- */
   --fonte-titulo: "Poppins", sans-serif;
   --fonte-texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

   /* --- 1.4 Formato: cantos, sombras, movimento --- */
   --raio-borda: 20px;
   --raio-borda-peq: 12px;
   --raio-borda-xp: 28px;
   --sombra: 0 30px 80px rgba(0, 0, 0, 0.55);
   --sombra-peq: 0 16px 40px rgba(0, 0, 0, 0.4);
   --sombra-cta: 0 14px 32px rgba(201, 138, 94, 0.28);

   --facilitador: cubic-bezier(.16, 1, .3, 1);
   --duracao-r: 380ms;
   --duracao-l: 700ms;

   /* --- 1.5 Layout --- */
   --largura-maxima: 1200px;
}


/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
* {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
   margin: 0;
   background: var(--cor-fundo);
   color: var(--cor-texto-claro);
   font-family: var(--fonte-texto);
   line-height: 1.65;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
}



h1,
h2,
h3,
h4 {
   font-family: var(--fonte-titulo);
   color: var(--cor-texto-claro);
   margin: 0 0 .5em;
   font-weight: 600;
   line-height: 1.16;
   letter-spacing: -0.015em;
}

p {
   margin: 0 0 1em;
   color: var(--cor-texto-suave);
}

a {
   color: inherit;
   text-decoration: none;
}

img {
   max-width: 100%;
   display: block;
}

::selection {
   background: var(--cor-destaque);
   color: var(--cor-fundo);
}

:focus-visible {
   outline: 2px solid var(--cor-destaque);
   outline-offset: 3px;
   border-radius: 4px;
}

.largura-maxima {
   max-width: var(--largura-maxima);
   margin: 0 auto;
   padding: 0 28px;
}


/* ==========================================================================
   3. UTILITÁRIOS DE MOTION (reveal on scroll, aplicado via JS/script.js
   às classes de card/seção existentes — não exige mudar o HTML)
   ========================================================================== */
.fade {
   opacity: 0;
   transform: translateY(60px);
   transition:
      opacity .8s ease,
      transform .8s cubic-bezier(.22, 1, .36, 1);
   will-change: transform, opacity;
}

.fade.show {
   opacity: 1;
   transform: translateY(0);
}

.delay1 {
   transition-delay: .15s;
}

.delay2 {
   transition-delay: .3s;
}

.delay3 {
   transition-delay: .45s;
}

.delay4 {
   transition-delay: .6s;
}

/* ==========================================================================
   4. BOTÕES
   ========================================================================== */
.botao {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   padding: 15px 28px;
   border-radius: 100px;
   font-family: var(--fonte-texto);
   font-weight: 600;
   font-size: .92rem;
   border: 1px solid transparent;
   cursor: pointer;
   transition: transform var(--duracao-r) var(--facilitador), box-shadow var(--duracao-r) var(--facilitador), border-color var(--duracao-r) var(--facilitador), background var(--duracao-r) var(--facilitador), color var(--duracao-r) var(--facilitador);
}

.botao-primario {
   background: var(--grad-cta);
   color: #1A1109;
   box-shadow: var(--sombra-cta);
}

.botao-primario:hover {
   transform: translateY(-3px) scale(1.015);
   box-shadow: 0 20px 45px rgba(201, 138, 94, .4);
}

.botao-primario:active {
   transform: translateY(-1px) scale(.99);
}

.botao-contorno {
   background: var(--cor-vidro);
   color: var(--cor-texto-claro);
   border-color: var(--cor-borda-forte);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
}

.botao-contorno:hover {
   border-color: var(--cor-destaque);
   background: var(--cor-vidro-forte);
   transform: translateY(-3px);
}

.botao-largo {
   width: 100%;
}

.botao-pequeno {
   padding: 10px 20px;
   font-size: .82rem;
}


/* ==========================================================================
   5. CABEÇALHO / MENU
   ========================================================================== */
.cabecalho {
   background: rgba(10, 8, 7, .6);
   backdrop-filter: blur(16px) saturate(140%);
   -webkit-backdrop-filter: blur(16px) saturate(140%);
   position: sticky;
   top: 0;
   z-index: 100;
   border-bottom: 1px solid var(--cor-borda-suave);
   transition: background var(--duracao-r) var(--facilitador), border-color var(--duracao-r) var(--facilitador);
}

.cabecalho-conteudo {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 82px;
}

.logo {
   display: flex;
   align-items: center;
   gap: 10px;
   font-family: var(--fonte-titulo);
   font-weight: 700;
   font-size: 1.2rem;
   color: var(--cor-texto-claro);
   letter-spacing: -.01em;
   transition: transform var(--duracao-r) var(--facilitador), color var(--duracao-r) var(--facilitador);
}

.logo:hover {
   transform: translateY(-1px);
}

.logo-janela {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 3px;
   width: 32px;
   height: 32px;
   border-radius: 10px;
   background: var(--grad-cta);
   box-shadow: 0 6px 18px rgba(201, 138, 94, .35);
   position: relative;
}

.logo-janela i {
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background: #1A1109;
   display: block;
   opacity: .9;
}

.logo-texto {
   background: var(--grad-texto);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

.logo-imagem {
   height: 300px;
   width: auto;
   object-fit: contain;
}

.menu-principal {
   display: flex;
   align-items: center;
   gap: 4px;
}

.menu-principal a {
   color: var(--cor-texto-suave);
   font-weight: 500;
   font-size: .88rem;
   padding: 9px 16px;
   border-radius: 100px;
   border-bottom: none;
   transition: color var(--duracao-r) var(--facilitador), background var(--duracao-r) var(--facilitador), transform var(--duracao-r) var(--facilitador);
}

.menu-principal a:hover {
   transform: translateY(-1px);
}

.menu-principal a:hover,
.menu-principal a.is-active {
   color: var(--cor-texto-claro);
   background: var(--cor-vidro-forte);
}

.botao-menu {
   background: var(--grad-cta);
   color: #1A1109 !important;
   padding: 11px 24px;
   border-radius: 100px;
   font-weight: 600;
   margin-left: 10px;
   box-shadow: var(--sombra-cta);
   transition: transform var(--duracao-r) var(--facilitador), box-shadow var(--duracao-r) var(--facilitador), background var(--duracao-r) var(--facilitador), color var(--duracao-r) var(--facilitador);
}

.botao-menu:hover {
   transform: translateY(-2px) scale(1.02);
   box-shadow: 0 16px 34px rgba(201, 138, 94, .28);
   background: linear-gradient(135deg, rgba(234, 193, 149, .95), rgba(201, 138, 94, .95));
   color: #ffffff !important;
}

.menu-botao-mobile {
   display: none;
   flex-direction: column;
   gap: 5px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 8px;
   z-index: 101;
}

.menu-botao-mobile span {
   width: 24px;
   height: 2px;
   background: var(--cor-texto-claro);
   display: block;
   border-radius: 2px;
   transition: transform var(--duracao-r) var(--facilitador), opacity var(--duracao-r) var(--facilitador);
}


/* ==========================================================================
   6. HERO — bloco grande no topo da home
   ========================================================================== */
.hero {
   position: relative;
   padding: 104px 0 120px;
   overflow: hidden;
   isolation: isolate;
   background:
      radial-gradient(700px 500px at 88% 6%, rgba(201, 138, 94, .18), transparent 62%),
      radial-gradient(520px 420px at 4% 92%, rgba(234, 193, 149, .12), transparent 65%),
      linear-gradient(180deg, var(--cor-fundo-alt) 0%, var(--cor-fundo) 46%);
   border-bottom: 1px solid var(--cor-borda-suave);
}

.hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image:
      linear-gradient(var(--cor-borda-suave) 1px, transparent 1px),
      linear-gradient(90deg, var(--cor-borda-suave) 1px, transparent 1px);
   background-size: 64px 64px;
   -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 15%, #000 30%, transparent 78%);
   mask-image: radial-gradient(ellipse 75% 55% at 50% 15%, #000 30%, transparent 78%);
   opacity: .6;
   pointer-events: none;
   animation: heroGridDrift 16s ease-in-out infinite alternate;
}

.hero::after {
   content: "";
   position: absolute;
   width: 560px;
   height: 560px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(201, 138, 94, .18) 0%, rgba(201, 138, 94, .06) 34%, transparent 72%);
   top: -160px;
   right: -120px;
   filter: blur(28px);
   pointer-events: none;
   z-index: 0;
   animation: heroOrbFloat 12s ease-in-out infinite alternate;
}

.hero-conteudo {
   position: relative;
   z-index: 10;
   display: grid;
   grid-template-columns: 1fr .95fr;
   gap: 56px;
   align-items: center;
}

.selo-destaque-topo {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   padding: 8px 16px;
   border-radius: 100px;
   background: var(--cor-vidro-forte);
   border: 1px solid var(--cor-borda-forte);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   font-size: .76rem;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--cor-dourado);
   font-weight: 600;
   margin-bottom: 22px;
}

.selo-destaque-topo::before {
   content: "";
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--cor-destaque);
   box-shadow: 0 0 12px 2px rgba(201, 138, 94, .7);
}

.hero h1 {
   font-size: clamp(2.5rem, 4.6vw, 3.9rem);
   max-width: 16ch;
   font-weight: 700;
   text-transform: none;
   letter-spacing: -0.02em;
}

.hero-title {
   display: block;
   animation: heroTitleReveal 1.15s cubic-bezier(.16, 1, .3, 1) both;
}

.hero h1 .brilho {
   background: var(--grad-texto);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

.hero p.lead {
   color: var(--cor-texto-suave);
   font-size: 1.1rem;
   max-width: 48ch;
}

.hero-botoes {
   display: flex;
   gap: 16px;
   margin-top: 32px;
   flex-wrap: wrap;
}

.hero-numeros {
   display: flex;
   gap: 38px;
   margin-top: 50px;
   flex-wrap: wrap;
}

.hero-numeros div {
   display: flex;
   flex-direction: column;
}

.hero-numeros strong {
   font-family: var(--fonte-titulo);
   font-size: 1.8rem;
   font-weight: 700;
   background: var(--grad-texto);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

.hero-numeros span {
   font-size: .78rem;
   color: var(--cor-texto-fraco);
   margin-top: 3px;
}


/* ==========================================================================
   6.1 VISUAL DO HERO — painel "produto" + cartões flutuantes
   ========================================================================== */
.hero-visual {
   position: relative;
   min-height: 560px;
   display: flex;
   align-items: center;
   justify-content: center;
   perspective: 1800px;
   transform-style: preserve-3d;
   isolation: isolate;
}

.parallax-layer {
   will-change: transform;
   transition: transform .25s ease-out;
}

/* =========================
   GLOW
========================= */

.hero-glow {
   position: absolute;
   width: 620px;
   height: 620px;
   border-radius: 50%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background:
      radial-gradient(circle,
         rgba(201, 138, 94, .35) 0%,
         rgba(201, 138, 94, .12) 40%,
         transparent 75%);
   filter: blur(40px);
   animation: glowPulse 8s ease-in-out infinite;
   z-index: 0;
}

/* =========================
   PAINEL
========================= */

.hero-painel {
   position: relative;
   z-index: 2;

   width: 100%;
   max-width: 560px;

   border-radius: 26px;

   background:
      linear-gradient(145deg,
         rgba(35, 25, 20, .92),
         rgba(15, 12, 10, .95));

   border: 1px solid rgba(255, 255, 255, .08);

   backdrop-filter: blur(16px);

   overflow: hidden;

   box-shadow:
      0 35px 80px rgba(0, 0, 0, .55),
      0 0 80px rgba(201, 138, 94, .08);

   transform-style: preserve-3d;

   animation:
      painelFloat 7s ease-in-out infinite,
      painelRotate 10s ease-in-out infinite;
}

/* reflexo */

.hero-painel::before {
   content: "";
   position: absolute;
   inset: -120% -40%;

   background:
      linear-gradient(115deg,
         transparent 35%,
         rgba(255, 255, 255, .08) 50%,
         transparent 65%);

   transform: rotate(18deg);
   animation: glassMove 8s linear infinite;
}

/* brilho interno */

.hero-painel::after {
   content: "";
   position: absolute;
   inset: 0;

   border-radius: inherit;

   background:
      linear-gradient(to bottom,
         rgba(255, 255, 255, .04),
         transparent 40%);

   pointer-events: none;
}

/* =========================
   BARRA
========================= */

.hero-painel-barra {
   display: flex;
   gap: 8px;
   padding: 18px 22px;
   border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.hero-painel-barra span {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .22);
}

/* =========================
   CORPO
========================= */

.hero-painel-corpo {
   padding: 30px;
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.hero-painel-linha {
   height: 13px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .08);
}

.hero-painel-linha.l1 {
   width: 72%;
   height: 22px;
   background: linear-gradient(90deg, var(--cor-destaque), var(--cor-dourado));
   animation: gradientShift 4s linear infinite;
}

.hero-painel-linha.l2 {
   width: 55%;
}

.hero-painel-linha.l3 {
   width: 64%;
}

/* =========================
   BLOCOS
========================= */

.hero-painel-blocos {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 14px;
   margin-top: 10px;
}

.hero-painel-bloco {
   aspect-ratio: 1;
   border-radius: 18px;

   background:
      linear-gradient(160deg,
         rgba(201, 138, 94, .28),
         rgba(201, 138, 94, .04));

   border: 1px solid rgba(255, 255, 255, .05);

   transition: .45s;

   animation: blocoPulse 5s ease-in-out infinite;
}

.hero-painel-bloco:hover {
   transform:
      translateY(-8px) scale(1.05);
}

/* =========================
   CARTÕES
========================= */

.cartao-flutuante {
   position: absolute;
   z-index: 4;

   display: flex;
   align-items: center;
   gap: 14px;

   min-width: 240px;
   max-width: 280px;

   padding: 16px 18px;

   border-radius: 18px;

   background: rgba(18, 14, 12, .72);

   border: 1px solid rgba(255, 255, 255, .08);

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

   box-shadow:
      0 18px 40px rgba(0, 0, 0, .35),
      0 0 30px rgba(201, 138, 94, .08);

   transition:
      box-shadow .35s,
      border-color .35s;

   overflow: hidden;
}

.cartao-flutuante::before {
   content: "";
   position: absolute;
   inset: 0;

   background: linear-gradient(120deg,
         transparent 20%,
         rgba(255, 255, 255, .06) 50%,
         transparent 80%);

   transform: translateX(-130%);
   animation: shineCard 7s linear infinite;
}

.cartao-flutuante:hover {
   border-color: rgba(201, 138, 94, .35);

   box-shadow:
      0 24px 60px rgba(0, 0, 0, .45),
      0 0 40px rgba(201, 138, 94, .16);
}

.cartao-flutuante .icone {

   width: 44px;
   height: 44px;

   flex-shrink: 0;

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

   border-radius: 14px;

   background: var(--grad-cta);

   color: #17120D;

   font-weight: 700;
   font-size: 1rem;
   font-family: var(--fonte-titulo);

   box-shadow:
      0 8px 18px rgba(201, 138, 94, .35);
}

.cartao-flutuante strong {
   display: block;
   margin-bottom: 3px;

   font-size: 1rem;
   line-height: 1.15;
   color: var(--cor-texto);

   font-family: var(--fonte-titulo);
}

.cartao-flutuante div span {
   display: block;

   font-size: .78rem;
   line-height: 1.45;

   color: var(--cor-texto-fraco);
}

/* posições */

.cartao-flutuante-1 {
   top: 4%;
   left: -8%;
   animation: cardFloat1 6s ease-in-out infinite;
}

.cartao-flutuante-2 {
   bottom: 6%;
   left: 2%;
   animation: cardFloat2 7s ease-in-out infinite;
}

.cartao-flutuante-3 {
   top: 42%;
   right: -8%;
   animation: cardFloat3 8s ease-in-out infinite;
}

/* =========================
   ANIMAÇÕES
========================= */

@keyframes cardFloat1 {

   0%,
   100% {
      transform: translate3d(0, 0, 0);
   }

   50% {
      transform: translate3d(0, -16px, 0);
   }

}

@keyframes cardFloat2 {

   0%,
   100% {
      transform: translate3d(0, 0, 0);
   }

   50% {
      transform: translate3d(0, 14px, 0);
   }

}

@keyframes cardFloat3 {

   0%,
   100% {
      transform: translate3d(0, 0, 0);
   }

   50% {
      transform: translate3d(0, -12px, 0);
   }

}

@keyframes shineCard {

   from {
      transform: translateX(-130%);
   }

   to {
      transform: translateX(180%);
   }

}


/* ==========================================================================
   7. BARRA DE CONFIANÇA
   ========================================================================== */
.confianca {
   border-top: 1px solid var(--cor-borda-suave);
   border-bottom: 1px solid var(--cor-borda-suave);
   background: var(--cor-fundo-alt);
}

.confianca-conteudo {
   display: flex;
   align-items: center;
   gap: 26px;
   flex-wrap: wrap;
   justify-content: space-between;
}

.confianca-conteudo>span {
   font-size: .74rem;
   text-transform: uppercase;
   letter-spacing: .09em;
   font-weight: 600;
   color: var(--cor-texto-fraco);
   white-space: nowrap;
}

.confianca-tags {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
}

.confianca-tags span {
   font-size: .82rem;
   font-weight: 500;
   color: var(--cor-texto-suave);
   background: var(--cor-vidro);
   border: 1px solid var(--cor-borda);
   padding: 8px 17px;
   border-radius: 999px;
   transition: border-color var(--duracao-r) var(--facilitador), color var(--duracao-r) var(--facilitador), transform var(--duracao-r) var(--facilitador);
}

.confianca-tags span:hover {
   border-color: var(--cor-destaque);
   color: var(--cor-texto-claro);
   transform: translateY(-2px);
}


/* ==========================================================================
   8. SEÇÕES GERAIS
   ========================================================================== */
.secao {
   padding: 116px 0;
   transition: .4s;
}

.secao-compacta {
   padding: 30px 0;
}

.secao-cabecalho {
   max-width: 640px;
   margin: 0 auto 58px;
   text-align: center;
}

.secao-cabecalho h2 {
   font-size: clamp(2rem, 3.4vw, 2.7rem);
   text-transform: none;
}

.secao-alternada {
   background: var(--cor-fundo-alt);
   position: relative;
}

.texto-centralizado {
   text-align: center;
   margin-top: 44px;
}

.topo-de-pagina {
   position: relative;
   padding: 80px 0 50px;
   background:
      radial-gradient(560px 340px at 90% 0%, rgba(201, 138, 94, .16), transparent 65%),
      var(--cor-fundo-alt);
   border-bottom: 1px solid var(--cor-borda-suave);
   overflow: hidden;
}

.topo-de-pagina h1 {
   font-size: clamp(2.1rem, 3.6vw, 2.9rem);
   max-width: 22ch;
   text-transform: none;
}

.topo-de-pagina .lead {
   max-width: 54ch;
   font-size: 1.04rem;
}


/* ==========================================================================
   9. CARDS DE SERVIÇO
   ========================================================================== */
.grade-3-colunas {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 26px;
}

.servico-cartao {
   display: block;
   background: var(--grad-cartao);
   border: 1px solid var(--cor-borda);
   border-radius: var(--raio-borda);
   padding: 32px 30px;
   transition: border-color var(--duracao-r) var(--facilitador), transform var(--duracao-r) var(--facilitador), box-shadow var(--duracao-r) var(--facilitador);
   position: relative;
   overflow: hidden;
}

.servico-cartao:hover {
   transform: translateY(-8px);
   border-color: var(--cor-destaque);
   box-shadow: var(--sombra);
}

.servico-cartao-topo {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 20px;
}

.servico-cartao-numero {
   width: auto;
   height: auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: var(--cor-vidro-forte);
   color: var(--cor-dourado);
   border: 1px solid var(--cor-borda-forte);
   border-radius: 100px;
   font-family: var(--fonte-titulo);
   font-weight: 700;
   font-size: .8rem;
   padding: 6px 12px;
}

.servico-cartao-preco {
   font-size: .78rem;
   color: var(--cor-texto-fraco);
}

.servico-cartao-preco strong {
   color: var(--cor-texto-claro);
   font-family: var(--fonte-titulo);
}

.servico-cartao h3 {
   font-size: 1.32rem;
   text-transform: none;
}

.servico-cartao p {
   margin-bottom: 18px;
   font-size: .95rem;
}

.servico-cartao-link {
   font-size: .84rem;
   font-weight: 600;
   color: var(--cor-destaque);
   text-transform: none;
   letter-spacing: 0;
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.servicos-observacao {
   text-align: center;
   margin-top: 36px;
   font-size: .95rem;
   color: var(--cor-texto-fraco);
}

.servicos-observacao a {
   color: var(--cor-dourado);
   font-weight: 600;
}


/* ==========================================================================
   10. "COMO FUNCIONA"
   ========================================================================== */
.etapas-lista {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 26px;
   position: relative;
}

.etapas-lista::before {
   content: "";
   position: absolute;
   top: 27px;
   left: 9%;
   right: 9%;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--cor-borda-forte) 15%, var(--cor-borda-forte) 85%, transparent);
   z-index: 0;
}

.etapa {
   position: relative;
   z-index: 1;
}

.etapa-numero {
   width: 54px;
   height: 54px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--cor-borda-forte);
   border-radius: 16px;
   background: linear-gradient(160deg, var(--cor-cartao), var(--cor-fundo-alt));
   font-family: var(--fonte-titulo);
   font-weight: 700;
   font-size: 1.1rem;
   color: var(--cor-dourado);
   margin-bottom: 20px;
   box-shadow: var(--sombra-peq);
   transition: transform var(--duracao-r) var(--facilitador), border-color var(--duracao-r) var(--facilitador);
}

.etapa:hover .etapa-numero {
   transform: translateY(-4px) rotate(-4deg);
   border-color: var(--cor-destaque);
}

.etapa h3 {
   font-size: 1.08rem;
   text-transform: none;
}

.etapa p {
   font-size: .92rem;
}


/* ==========================================================================
   11. PORTFÓLIO
   ========================================================================== */
.portfolio-grade {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 26px;
}

.projeto-cartao {
   background: var(--cor-vidro);
   border-radius: var(--raio-borda);
   overflow: hidden;
   border: 1px solid var(--cor-borda);
   transition: transform var(--duracao-r) var(--facilitador), box-shadow var(--duracao-r) var(--facilitador), border-color var(--duracao-r) var(--facilitador);
}

.projeto-cartao:hover {
   transform: translateY(-8px);
   border-color: var(--cor-destaque);
   box-shadow: var(--sombra);
}

.projeto-cartao-imagem {
   display: block;
   position: relative;
   overflow: hidden;
}

.projeto-cartao-imagem img {
   width: 100%;
   aspect-ratio: 4/3;
   object-fit: cover;
   transition: transform var(--duracao-l) var(--facilitador);
}

.projeto-cartao:hover .projeto-cartao-imagem img {
   transform: scale(1.08);
}

.projeto-cartao-tag {
   position: absolute;
   top: 14px;
   left: 14px;
   background: rgba(10, 8, 7, .68);
   color: var(--cor-dourado);
   font-size: .68rem;
   text-transform: uppercase;
   letter-spacing: .06em;
   font-weight: 600;
   padding: 6px 13px;
   border-radius: 999px;
   border: 1px solid var(--cor-borda-forte);
   backdrop-filter: blur(8px);
}

.projeto-cartao-corpo {
   padding: 22px 22px 26px;
   border-top: 1px solid var(--cor-borda-suave);
}

.projeto-cartao-corpo h3 {
   font-size: 1.08rem;
   margin-bottom: 6px;
}

.projeto-cartao-corpo p {
   font-size: .92rem;
   margin-bottom: 14px;
}

.projeto-cartao-link {
   font-weight: 600;
   color: var(--cor-destaque);
   font-size: .84rem;
   text-transform: none;
   letter-spacing: 0;
   transition: color var(--duracao-r) var(--facilitador);
}

.projeto-cartao-link:hover {
   color: var(--cor-dourado);
}

.filtros-barra {
   display: flex;
   gap: 10px;
   margin-bottom: 40px;
   flex-wrap: wrap;
}

.filtros-barra a {
   padding: 10px 20px;
   border-radius: 999px;
   border: 1px solid var(--cor-borda);
   font-weight: 600;
   font-size: .82rem;
   text-transform: none;
   letter-spacing: 0;
   color: var(--cor-texto-suave);
   background: var(--cor-vidro);
   transition: all var(--duracao-r) var(--facilitador);
}

.filtros-barra a.is-active,
.filtros-barra a:hover {
   background: var(--grad-cta);
   color: #1A1109;
   border-color: transparent;
}


/* ==========================================================================
   12. DEPOIMENTOS
   ========================================================================== */
.depoimento-cartao {
   background: var(--grad-cartao);
   border: 1px solid var(--cor-borda);
   border-radius: var(--raio-borda);
   padding: 32px 28px;
   margin: 0;
   transition: transform var(--duracao-r) var(--facilitador), border-color var(--duracao-r) var(--facilitador);
   position: relative;
}

.depoimento-cartao::before {
   content: "\201C";
   position: absolute;
   top: 18px;
   left: 26px;
   font-family: var(--fonte-titulo);
   font-size: 2.6rem;
   color: var(--cor-destaque);
   opacity: .55;
   line-height: 1;
}

.depoimento-cartao:hover {
   transform: translateY(-6px);
   border-color: var(--cor-destaque);
}

.depoimento-cartao p {
   color: var(--cor-texto-claro);
   font-size: 1.02rem;
   font-family: var(--fonte-texto);
   font-weight: 500;
   margin-top: 26px;
}

.depoimento-cartao footer {
   font-size: .84rem;
   font-weight: 700;
   color: var(--cor-texto-claro);
}

.depoimento-cartao footer span {
   display: block;
   font-weight: 400;
   color: var(--cor-texto-fraco);
   font-size: .8rem;
   margin-top: 2px;
}


/* ==========================================================================
   13. FAQ
   ========================================================================== */
.faq-lista {
   display: flex;
   flex-direction: column;
   gap: 14px;

}

.faq-item {
   background: var(--cor-vidro);
   border: 1px solid var(--cor-borda);
   border-radius: var(--raio-borda-peq);
   padding: 6px 24px;
   transition: border-color var(--duracao-r) var(--facilitador), background var(--duracao-r) var(--facilitador);
}

.faq-item[open],
.faq-item:hover {
   border-color: var(--cor-borda-forte);
   background: var(--cor-vidro-forte);
}

.faq-item summary {
   cursor: pointer;
   font-weight: 600;
   font-family: var(--fonte-titulo);
   font-size: 1rem;
   list-style: none;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 18px 0;
   gap: 16px;
}

.faq-item summary::-webkit-details-marker {
   display: none;
}

.faq-item summary::after {
   content: "+";
   font-size: 1.4rem;
   font-weight: 400;
   color: var(--cor-destaque);
   flex-shrink: 0;
   transition: transform var(--duracao-r) var(--facilitador);
}

.faq-item[open] summary::after {
   content: "+";
   transform: rotate(45deg);
}

.faq-item p {
   margin: 0 0 20px;
   font-size: .94rem;
}


/* ==========================================================================
   14. CTA FINAL
   ========================================================================== */
.cta-final {
   padding: 110px 0;
   border-top: 1px solid var(--cor-borda-suave);
   background: var(--cor-fundo);
}

.cta-final-conteudo {
   position: relative;
   text-align: center;
   padding: 76px 40px;
   border-radius: var(--raio-borda-xp);
   overflow: hidden;
   background: linear-gradient(160deg, var(--cor-cartao) 0%, var(--cor-fundo-alt) 65%);
   border: 1px solid var(--cor-borda-forte);
}

.cta-final-conteudo::before {
   content: "";
   position: absolute;
   width: 560px;
   height: 560px;
   border-radius: 50%;
   background: var(--glow-cobre);
   top: -260px;
   left: 50%;
   transform: translateX(-50%);
   pointer-events: none;
}

.cta-final h2,
.cta-final p,
.cta-final .botao {
   position: relative;
   z-index: 1;
}

.cta-final h2 {
   font-size: clamp(1.9rem, 3.4vw, 2.6rem);
   max-width: 22ch;
   margin: 0 auto .4em;
   text-transform: none;
}

.cta-final p {
   color: var(--cor-texto-suave);
   max-width: 44ch;
   margin: 0 auto 32px;
}


/* ==========================================================================
   15. PREÇOS / PACOTES
   ========================================================================== */
.precos-grade {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
}

.preco-cartao {
   background: var(--grad-cartao);
   border: 1px solid var(--cor-borda);
   border-radius: var(--raio-borda);
   padding: 30px;
   display: flex;
   flex-direction: column;
   position: relative;
   transition: border-color var(--duracao-r) var(--facilitador), transform var(--duracao-r) var(--facilitador), box-shadow var(--duracao-r) var(--facilitador);
}

.preco-cartao:hover {
   transform: translateY(-6px);
   box-shadow: var(--sombra-peq);
}

.preco-cartao.is-active {
   border-color: var(--cor-destaque);
   box-shadow: var(--sombra);
}

.preco-cartao-combo {
   background: linear-gradient(165deg, var(--cor-cartao-hover), var(--cor-fundo-alt));
   border-color: var(--cor-destaque);
}

.preco-cartao-selo {
   position: absolute;
   top: -13px;
   left: 26px;
   background: var(--grad-cta);
   color: #1A1109;
   font-size: .66rem;
   text-transform: uppercase;
   letter-spacing: .06em;
   font-weight: 700;
   padding: 6px 14px;
   border-radius: 999px;
   box-shadow: var(--sombra-cta);
}

.preco-cartao-mini-preview {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 7px 14px 7px 12px;
   border-radius: 999px;
   background: var(--cor-vidro-forte);
   border: 1px solid var(--cor-borda-forte);
   width: fit-content;
   margin-bottom: 20px;
}

.preco-cartao-mini-preview i {
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background: var(--cor-destaque);
   opacity: .9;
}

.preco-cartao-mini-preview span {
   font-size: .72rem;
   font-weight: 700;
   margin-left: 6px;
   color: var(--cor-texto-suave);
   letter-spacing: .03em;
}

.preco-cartao h3 {
   font-size: 1.26rem;
   margin-bottom: 6px;
   text-transform: none;
}

.preco-cartao-resumo {
   font-size: .92rem;
   margin-bottom: 8px;
}

.preco-cartao-indicado {
   font-size: .82rem;
   color: var(--cor-dourado);
   margin-bottom: 18px;
   font-style: normal;
}

.preco-cartao-valor {
   font-family: var(--fonte-texto);
   font-size: .84rem;
   color: var(--cor-texto-suave);
   margin-bottom: 20px;
   text-transform: uppercase;
   letter-spacing: .04em;
}

.preco-cartao-valor strong {
   font-family: var(--fonte-titulo);
   font-size: 1.9rem;
   background: var(--grad-texto);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   display: block;
   margin-top: 4px;
   text-transform: none;
   letter-spacing: 0;
}

.preco-cartao-lista {
   list-style: none;
   margin: 0 0 26px;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 11px;
   flex: 1;
}

.preco-cartao-lista li {
   font-size: .89rem;
   padding-left: 24px;
   position: relative;
   color: var(--cor-texto-claro);
}

.preco-cartao-lista li::before {
   content: "\2713";
   position: absolute;
   left: 0;
   color: var(--cor-destaque);
   font-weight: 700;
}

.escolha-painel {
   margin-top: 76px;
}

.escolha-painel-galeria {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 18px;
   margin-bottom: 56px;
}

.escolha-painel-galeria img {
   border-radius: var(--raio-borda-peq);
   aspect-ratio: 4/3;
   object-fit: cover;
   border: 1px solid var(--cor-borda);
   transition: transform var(--duracao-r) var(--facilitador);
}

.escolha-painel-galeria img:hover {
   transform: translateY(-4px) scale(1.02);
}

.acesso-restrito-cartao {
   text-align: center;
}

.acesso-restrito-cartao h3 {
   font-size: 1.4rem;
   margin-bottom: 12px;
   text-transform: none;
}

.acesso-restrito-cartao p {
   max-width: 46ch;
   margin: 0 auto 8px;
}


/* ==========================================================================
   16. FORMULÁRIOS
   ========================================================================== */
.formulario-cartao {
   background: var(--grad-cartao);
   border: 1px solid var(--cor-borda);
   border-radius: var(--raio-borda);
   padding: 44px;
   max-width: 640px;
   margin: 0 auto;
   box-shadow: var(--sombra-peq);
}

.formulario-linha {
   margin-bottom: 20px;
}

.formulario-linha-dupla {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px;
}

.formulario-linha label {
   display: block;
   font-weight: 600;
   font-size: .8rem;
   text-transform: none;
   letter-spacing: 0;
   margin-bottom: 8px;
   color: var(--cor-texto-suave);
}

.formulario-linha input,
.formulario-linha select,
.formulario-linha textarea {
   width: 100%;
   padding: 13px 16px;
   border-radius: var(--raio-borda-peq);
   border: 1px solid var(--cor-borda);
   background: rgba(0, 0, 0, .18);
   font-family: var(--fonte-texto);
   font-size: .96rem;
   color: var(--cor-texto-claro);
   transition: border-color var(--duracao-r) var(--facilitador), box-shadow var(--duracao-r) var(--facilitador);
}

.formulario-linha input::placeholder,
.formulario-linha textarea::placeholder {
   color: var(--paleta-05-areia-urbana);
   opacity: .6;
}

.formulario-linha input:focus,
.formulario-linha select:focus,
.formulario-linha textarea:focus {
   border-color: var(--cor-destaque);
   outline: none;
   box-shadow: 0 0 0 4px var(--cor-destaque-suave);
}

.formulario-linha input:disabled {
   opacity: .5;
   cursor: not-allowed;
}

.formulario-linha textarea {
   resize: vertical;
   min-height: 110px;
}

.formulario-dica {
   font-size: .78rem;
   color: var(--cor-texto-fraco);
   margin-top: 6px;
}

.aviso {
   padding: 15px 18px;
   border-radius: var(--raio-borda-peq);
   font-size: .9rem;
   font-weight: 500;
   margin-bottom: 24px;
   border: 1px solid transparent;
}

.aviso-sucesso {
   background: var(--cor-sucesso-fundo);
   color: var(--cor-sucesso);
   border-color: rgba(143, 191, 135, .3);
}

.aviso-erro {
   background: var(--cor-erro-fundo);
   color: var(--cor-erro);
   border-color: rgba(224, 135, 106, .3);
}


/* ==========================================================================
   17. PÁGINAS DE LOGIN / CADASTRO
   ========================================================================== */
.auth-area {
   position: relative;
   min-height: calc(100vh - 82px - 320px);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 80px 20px;
   background:
      radial-gradient(600px 400px at 50% 0%, rgba(201, 138, 94, .12), transparent 65%),
      var(--cor-fundo-alt);
   overflow: hidden;
}

.auth-cartao {
   background: var(--grad-cartao);
   border-radius: var(--raio-borda);
   border: 1px solid var(--cor-borda-forte);
   padding: 46px;
   width: 100%;
   max-width: 420px;
   box-shadow: var(--sombra);
   position: relative;
   z-index: 1;
}

.auth-cartao h1 {
   font-size: 1.7rem;
   margin-bottom: 6px;
   text-transform: none;
}

.auth-cartao .subtitulo {
   margin-bottom: 28px;
   font-size: .94rem;
}

.auth-alternar-link {
   text-align: center;
   margin-top: 22px;
   font-size: .9rem;
}

.auth-alternar-link a {
   color: var(--cor-dourado);
   font-weight: 600;
}


/* ==========================================================================
   18. PAGAMENTO
   ========================================================================== */
.pagamento-grade {
   display: grid;
   grid-template-columns: 1.1fr .9fr;
   gap: 30px;
   align-items: start;
}

.pagamento-opcoes {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
}

.pagamento-opcao {
   display: flex;
   flex-direction: column;
   gap: 4px;
   padding: 18px;
   border: 1px solid var(--cor-borda);
   border-radius: var(--raio-borda-peq);
   cursor: pointer;
   background: rgba(0, 0, 0, .16);
   transition: border-color var(--duracao-r) var(--facilitador), transform var(--duracao-r) var(--facilitador);
}

.pagamento-opcao:hover {
   transform: translateY(-2px);
}

.pagamento-opcao:has(input:checked) {
   border-color: var(--cor-destaque);
   background: var(--cor-destaque-suave);
}

.pagamento-opcao input {
   width: auto;
   margin-bottom: 4px;
   accent-color: var(--cor-destaque);
}

.pagamento-opcao-titulo {
   font-weight: 700;
   color: var(--cor-texto-claro);
   font-size: .95rem;
}

.pagamento-opcao-descricao {
   font-size: .8rem;
   color: var(--cor-texto-fraco);
}

.resumo-cartao {
   background: var(--grad-cartao);
   border: 1px solid var(--cor-borda);
   border-radius: var(--raio-borda);
   padding: 32px;
   position: sticky;
   top: 100px;
}

.resumo-cartao h3 {
   font-size: 1.24rem;
   margin: 6px 0 10px;
   text-transform: none;
}

.resumo-cartao-total {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 22px;
   padding-top: 20px;
   border-top: 1px solid var(--cor-borda-suave);
}

.resumo-cartao-total span {
   font-size: .82rem;
   text-transform: uppercase;
   letter-spacing: .05em;
   color: var(--cor-texto-suave);
}

.resumo-cartao-total strong {
   font-family: var(--fonte-titulo);
   font-size: 1.6rem;
   background: var(--grad-texto);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}


/* ==========================================================================
   19. PAINEL DO CLIENTE
   ========================================================================== */
.vazio-cartao {
   text-align: center;
   background: var(--grad-cartao);
   border: 1px solid var(--cor-borda);
   border-radius: var(--raio-borda);
   padding: 64px 30px;
}

.vazio-cartao h3 {
   font-size: 1.35rem;
   margin-bottom: 10px;
   text-transform: none;
}

.vazio-cartao p {
   max-width: 40ch;
   margin: 0 auto 24px;
}

.pedidos-lista {
   display: flex;
   flex-direction: column;
   gap: 22px;
}

.pedido-cartao {
   background: var(--grad-cartao);
   border: 1px solid var(--cor-borda);
   border-radius: var(--raio-borda);
   padding: 30px;
   transition: border-color var(--duracao-r) var(--facilitador), transform var(--duracao-r) var(--facilitador);
}

.pedido-cartao:hover {
   border-color: var(--cor-borda-forte);
   transform: translateY(-3px);
}

.pedido-cartao-topo {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 20px;
   flex-wrap: wrap;
}

.pedido-cartao-topo h3 {
   font-size: 1.28rem;
   margin: 6px 0 0;
}

.pedido-cartao-selos {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
}

.pedido-cartao-descricao {
   font-size: .92rem;
   margin: 22px 0 16px;
}

.pedido-cartao-rodape {
   display: flex;
   gap: 26px;
   font-size: .85rem;
   color: var(--cor-texto-suave);
   border-top: 1px solid var(--cor-borda-suave);
   padding-top: 16px;
   flex-wrap: wrap;
}

.pedido-cartao-rodape strong {
   color: var(--cor-texto-claro);
}

.linha-tempo {
   display: flex;
   align-items: flex-start;
   margin-top: 28px;
}

.linha-tempo-etapa {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   position: relative;
}

.linha-tempo-etapa::before {
   content: "";
   position: absolute;
   top: 7px;
   left: -50%;
   width: 100%;
   height: 2px;
   background: var(--cor-borda);
   border-radius: 2px;
}

.linha-tempo-etapa:first-child::before {
   display: none;
}

.linha-tempo-etapa.is-done::before {
   background: var(--grad-cta);
}

.linha-tempo-ponto {
   width: 15px;
   height: 15px;
   border-radius: 50%;
   background: var(--cor-fundo-alt);
   border: 2px solid var(--cor-borda);
   z-index: 1;
   transition: all var(--duracao-r) var(--facilitador);
}

.linha-tempo-etapa.is-done .linha-tempo-ponto {
   background: var(--grad-cta);
   border-color: transparent;
   box-shadow: 0 0 0 4px var(--cor-destaque-suave);
}

.linha-tempo-etapa.is-cancel .linha-tempo-ponto {
   background: var(--cor-erro);
   border-color: var(--cor-erro);
}

.linha-tempo-legenda {
   font-size: .74rem;
   margin-top: 10px;
   color: var(--cor-texto-fraco);
   max-width: 90px;
   text-transform: none;
}

.linha-tempo-etapa.is-done .linha-tempo-legenda {
   color: var(--cor-texto-claro);
   font-weight: 500;
}


/* ==========================================================================
   20. RODAPÉ
   ========================================================================== */
.rodape {
   background: var(--cor-fundo-alt);
   color: var(--cor-texto-suave);
   padding: 70px 0 30px;
   border-top: 1px solid var(--cor-borda-suave);
}

.rodape-grade {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 1fr;
   gap: 34px;
   border-bottom: 1px solid var(--cor-borda-suave);
   padding-bottom: 44px;
   margin-bottom: 26px;
}

.rodape .logo {
   margin-bottom: 14px;
}

.rodape-coluna p {
   font-size: .88rem;
   color: var(--cor-texto-suave);
   margin: 0;
   max-width: 32ch;
}

.rodape-coluna h4 {
   color: var(--cor-texto-fraco);
   font-family: var(--fonte-titulo);
   font-size: .76rem;
   text-transform: uppercase;
   letter-spacing: .07em;
   margin-bottom: 16px;
   font-weight: 600;
}

.rodape-coluna {
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.rodape-coluna a {
   font-size: .9rem;
   color: var(--cor-texto-suave);
   padding: 6px 0;
   transition: color var(--duracao-r) var(--facilitador), transform var(--duracao-r) var(--facilitador);
   width: fit-content;
}

.rodape-coluna a:hover {
   color: var(--cor-dourado);
   transform: translateX(3px);
}

.rodape-direitos-autorais {
   text-align: center;
   font-size: .78rem;
   color: var(--cor-texto-fraco);
   margin: 0;
}


/* ==========================================================================
   21. PAINEL DO ADMINISTRADOR
   ========================================================================== */
.admin-pagina-fundo {
   background: var(--cor-fundo-alt);
}

.admin-layout {
   display: grid;
   grid-template-columns: 258px 1fr;
   min-height: 100vh;
}

.admin-menu-lateral {
   background: var(--cor-fundo);
   color: var(--cor-texto-suave);
   padding: 28px 20px;
   position: sticky;
   top: 0;
   height: 100vh;
   display: flex;
   flex-direction: column;
   border-right: 1px solid var(--cor-borda-suave);
}

.admin-menu-lateral .logo {
   margin-bottom: 36px;
}

.admin-menu-links {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.admin-menu-links a {
   padding: 11px 14px;
   border-radius: var(--raio-borda-peq);
   font-weight: 500;
   font-size: .88rem;
   color: var(--cor-texto-suave);
   transition: background var(--duracao-r) var(--facilitador), color var(--duracao-r) var(--facilitador);
}

.admin-menu-links a:hover,
.admin-menu-links a.is-active {
   background: var(--cor-vidro-forte);
   color: var(--cor-dourado);
}

.admin-menu-links .divisor {
   height: 1px;
   background: var(--cor-borda-suave);
   margin: 14px 0;
}

.admin-usuario-rodape {
   margin-top: auto;
   font-size: .78rem;
   color: var(--cor-texto-fraco);
   padding-top: 18px;
   border-top: 1px solid var(--cor-borda-suave);
}

.admin-usuario-rodape strong {
   color: var(--cor-texto-suave);
}

.admin-conteudo {
   padding: 40px 44px;
}

.admin-barra-topo {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 30px;
   flex-wrap: wrap;
   gap: 12px;
}

.admin-barra-topo h1 {
   font-size: 1.6rem;
   margin: 0;
   text-transform: none;
}

.estatisticas-grade {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   margin-bottom: 40px;
}

.estatistica-cartao {
   background: var(--grad-cartao);
   border: 1px solid var(--cor-borda);
   border-radius: var(--raio-borda);
   padding: 24px;
   transition: transform var(--duracao-r) var(--facilitador), border-color var(--duracao-r) var(--facilitador);
}

.estatistica-cartao:hover {
   transform: translateY(-4px);
   border-color: var(--cor-destaque);
}

.estatistica-cartao-legenda {
   font-size: .76rem;
   color: var(--cor-texto-fraco);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .05em;
}

.estatistica-cartao-valor {
   font-family: var(--fonte-titulo);
   font-size: 2.2rem;
   margin-top: 8px;
   font-weight: 700;
   background: var(--grad-texto);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

.tabela-caixa {
   background: var(--grad-cartao);
   border: 1px solid var(--cor-borda);
   border-radius: var(--raio-borda);
   overflow: hidden;
}

table.tabela {
   width: 100%;
   border-collapse: collapse;
   font-size: .88rem;
}

table.tabela th,
table.tabela td {
   text-align: left;
   padding: 14px 20px;
   border-bottom: 1px solid var(--cor-borda-suave);
}

table.tabela th {
   background: rgba(0, 0, 0, .16);
   font-size: .7rem;
   text-transform: uppercase;
   letter-spacing: .05em;
   color: var(--cor-texto-fraco);
   font-weight: 600;
}

table.tabela tr {
   transition: background var(--duracao-r) var(--facilitador);
}

table.tabela tbody tr:hover {
   background: var(--cor-vidro-forte);
}

table.tabela tr:last-child td {
   border-bottom: none;
}

/* Selos de status. Note: usados também nas etiquetas de eyebrow via
   .selo-destaque-topo, que é uma classe separada — não colidem. */
.selo {
   display: inline-block;
   padding: 5px 13px;
   border-radius: 999px;
   font-size: .68rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .04em;
}

.selo--novo {
   background: rgba(201, 138, 94, .22);
   color: #E0B48E;
}

.selo--em_analise {
   background: rgba(140, 122, 106, .28);
   color: #C9BDAF;
}

.selo--em_andamento {
   background: rgba(201, 138, 94, .3);
   color: #EAC195;
}

.selo--concluido {
   background: var(--cor-sucesso-fundo);
   color: var(--cor-sucesso);
}

.selo--cancelado {
   background: var(--cor-erro-fundo);
   color: var(--cor-erro);
}

.selo--landing_page {
   background: rgba(140, 122, 106, .28);
   color: #C9BDAF;
}

.selo--ecommerce {
   background: var(--cor-sucesso-fundo);
   color: var(--cor-sucesso);
}

.selo--design {
   background: rgba(201, 138, 94, .24);
   color: #D8AE8E;
}

.selo--landing_design {
   background: rgba(140, 122, 106, .3);
   color: #E7DDD2;
}

.selo--ecommerce_design {
   background: rgba(201, 138, 94, .22);
   color: #C89A7C;
}

.selo--admin {
   background: var(--cor-texto-claro);
   color: var(--cor-fundo);
}

.selo--cliente {
   background: rgba(140, 122, 106, .28);
   color: #C9BDAF;
}

.admin-cartao {
   background: var(--grad-cartao);
   border: 1px solid var(--cor-borda);
   border-radius: var(--raio-borda);
   padding: 30px;
   margin-bottom: 26px;
}

.admin-cartao h2 {
   font-size: 1.14rem;
   text-transform: none;
}

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

.link-perigo {
   color: var(--cor-erro);
   font-weight: 600;
   font-size: .84rem;
}

.link-perigo:hover {
   text-decoration: underline;
}

.estado-vazio {
   text-align: center;
   padding: 60px 20px;
   color: var(--cor-texto-fraco);
}


/* ==========================================================================
   22. RESPONSIVO
   ========================================================================== */
@media (max-width: 980px) {
   .hero-conteudo {
      grid-template-columns: 1fr;
   }

   .hero-visual {
      min-height: 360px;
      margin-top: 24px;
   }

   .grade-3-colunas,
   .etapas-lista {
      grid-template-columns: 1fr 1fr;
   }

   .etapas-lista::before {
      display: none;
   }

   .precos-grade {
      grid-template-columns: 1fr 1fr;
   }

   .pagamento-grade {
      grid-template-columns: 1fr;
   }

   .admin-layout {
      grid-template-columns: 1fr;
   }

   .admin-menu-lateral {
      position: static;
      height: auto;
   }

   .estatisticas-grade {
      grid-template-columns: repeat(2, 1fr);
   }

   .rodape-grade {
      grid-template-columns: 1fr 1fr;
   }

   .linha-tempo-legenda {
      display: none;
   }
}

@media (max-width: 720px) {

   .menu-principal {
      position: fixed;
      inset: 0 0 0 auto;
      width: 78%;
      max-width: 320px;
      top: 0;
      background: rgba(10, 8, 7, .97);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-left: 1px solid var(--cor-borda-forte);
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      padding: 100px 24px 30px;
      gap: 6px;
      height: 100vh;
      transform: translateX(100%);
      transition: transform var(--duracao-l) var(--facilitador);
      z-index: 99;
      display: flex;
   }

   .menu-principal.is-open {
      transform: translateX(0);
   }

   .menu-principal a {
      padding: 14px 16px;
      font-size: 1rem;
   }

   .botao-menu {
      margin: 10px 0 0;
      text-align: center;
      justify-content: center;
   }

   .menu-botao-mobile {
      display: flex;
   }

   .formulario-linha-dupla {
      grid-template-columns: 1fr;
   }

   .formulario-cartao {
      padding: 28px;
   }

   .estatisticas-grade {
      grid-template-columns: 1fr;
   }

   .precos-grade {
      grid-template-columns: 1fr;
   }

   .grade-3-colunas,
   .etapas-lista,
   .portfolio-grade {
      grid-template-columns: 1fr;
   }

   .pagamento-opcoes {
      grid-template-columns: 1fr;
   }

   .hero-numeros {
      gap: 24px;
      flex-wrap: wrap;
   }

   .rodape-grade {
      grid-template-columns: 1fr;
   }

   .pedido-cartao-topo {
      flex-direction: column;
   }

   .cartao-flutuante {
      display: none;
   }

   .secao {
      padding: 80px 0;
   }
}


@keyframes heroTitleReveal {
   0% {
      opacity: 0;
      transform: translateY(24px) scale(.98);
   }

   100% {
      opacity: 1;
      transform: translateY(0) scale(1);
   }
}

@keyframes heroGridDrift {
   0% {
      transform: translate3d(0, 0, 0) scale(1);
      opacity: .6;
   }

   50% {
      transform: translate3d(-8px, -8px, 0) scale(1.01);
      opacity: .74;
   }

   100% {
      transform: translate3d(10px, 8px, 0) scale(1.015);
      opacity: .82;
   }
}

@keyframes heroOrbFloat {
   0% {
      transform: translate3d(0, 0, 0) scale(1);
   }

   100% {
      transform: translate3d(-16px, 20px, 0) scale(1.05);
   }
}

/* ==========================================================
   HERO PREMIUM
========================================================== */

/* Background Shapes */

.hero-bg-shape {

   position: absolute;

   border-radius: 50%;

   filter: blur(90px);

   opacity: .35;

   animation: heroFloat 12s ease-in-out infinite;

   z-index: 0;

}

.hero-bg-1 {

   width: 420px;
   height: 420px;

   background: #c98a5e;

   top: -120px;
   right: -80px;

}

.hero-bg-2 {

   width: 340px;
   height: 340px;

   background: #8A5C3F;

   bottom: -120px;
   left: -60px;

   animation-delay: 4s;

}

.hero-bg-3 {

   width: 260px;
   height: 260px;

   background: #eac195;

   top: 40%;
   left: 20%;

   animation: none;

   opacity: .22;

}

.hero-bg-4 {

   width: 200px;
   height: 200px;

   background: #6B4A35;

   bottom: 20%;
   right: 30%;

   animation: none;

   opacity: .3;

}

.hero-bg-5 {

   width: 320px;
   height: 320px;

   background: linear-gradient(135deg, #c98a5e, #8A5C3F);

   top: 10%;
   left: 60%;

   animation: none;

   opacity: .15;

}

@keyframes heroFloat {

   0%,
   100% {

      transform:
         translateY(0) translateX(0);

   }

   50% {

      transform:
         translateY(-35px) translateX(20px);

   }

}