/* ============================================================
   RIXY — site de divulgação
   Paleta e tipografia herdadas da identidade da marca:
   azul-marinho profundo, mármore preto, ouro escovado.

   Organização do arquivo:
   1. Tokens (cores, fontes, medidas)   5. Hero
   2. Base e utilitários                6. Seções
   3. Componentes (botão, cartão)       7. Rodapé
   4. Topo / navegação                  8. Responsivo e acessibilidade
   ============================================================ */

/* ---------- Fontes hospedadas aqui dentro (nada vem de fora) ---------- */
@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/playfair.woff2') format('woff2');
  font-weight: 400 900;      /* fonte variável: cobre todos os pesos num arquivo só */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* superfícies */
  --tinta:      #04070F;
  --navy-900:   #070C1C;
  --navy-850:   #0A1024;
  --navy-800:   #0C142C;
  --navy-700:   #101B3D;
  --navy-600:   #16244C;

  /* ouro */
  --ouro-100:   #FBF3DC;
  --ouro-200:   #F6E3B0;
  --ouro-300:   #EFD08F;
  --ouro-400:   #E0BC6B;
  --ouro-500:   #D4AF37;
  --ouro-600:   #B8862B;
  --ouro-700:   #8C6B1F;

  /* gemas da coroa */
  --rubi:       #C0143C;
  --safira:     #2A3E8F;

  /* texto */
  --texto:      #ECEFF8;
  --texto-2:    #C3CADE;
  --apagado:    #8F99B5;

  /* traços e vidros */
  --linha:      rgba(212, 175, 55, 0.16);
  --linha-forte:rgba(212, 175, 55, 0.42);
  --linha-fria: rgba(255, 255, 255, 0.08);
  --vidro:      rgba(12, 20, 44, 0.66);

  /* gradiente de ouro folheado, usado em texto e bordas */
  --grad-ouro: linear-gradient(135deg,
                 #8C6B1F 0%, #D4AF37 20%, #F6E3B0 42%,
                 #E0BC6B 58%, #D4AF37 76%, #8C6B1F 100%);

  /* tipografia */
  --fonte-titulo: 'Playfair Display', 'Didot', 'Bodoni 72', Georgia, serif;
  --fonte-texto:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* escala fluida: cresce sozinha entre celular e telão */
  --t--1: clamp(0.78rem, 0.75rem + 0.12vw, 0.86rem);
  --t-0:  clamp(0.98rem, 0.94rem + 0.18vw, 1.08rem);
  --t-1:  clamp(1.12rem, 1.04rem + 0.36vw, 1.34rem);
  --t-2:  clamp(1.36rem, 1.18rem + 0.78vw, 1.9rem);
  --t-3:  clamp(1.85rem, 1.45rem + 1.7vw, 3rem);
  --t-4:  clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem);
  --t-5:  clamp(3rem, 1.7rem + 5.6vw, 7rem);

  /* espaçamento */
  --gap:      clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
  --respiro:  clamp(4.5rem, 3rem + 7vw, 11rem);
  --largura:  min(1200px, 100% - 2.5rem);

  --curva: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   2. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;          /* fallback: se o JS falhar, âncora ainda desliza */
  -webkit-text-size-adjust: 100%;
}
html.js { scroll-behavior: auto; }  /* com JS ativo quem manda na rolagem é o Lenis */

body {
  margin: 0;
  background: var(--navy-900);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--t-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Textura de grão bem sutil por cima de tudo: tira o aspecto "chapado"
   das áreas escuras. É gerado em CSS, sem baixar imagem nenhuma. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image:
    repeating-radial-gradient(circle at 17% 29%, #fff 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 71% 63%, #fff 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

::selection { background: var(--ouro-500); color: var(--navy-900); }

:focus-visible {
  outline: 2px solid var(--ouro-300);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- utilitários --- */
.envelope { width: var(--largura); margin-inline: auto; }

.sr {                                   /* só para leitor de tela */
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.pular-para-conteudo {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -140%);
  background: var(--ouro-500); color: var(--navy-900);
  padding: 0.7rem 1.2rem; border-radius: 0 0 10px 10px;
  font-weight: 600; text-decoration: none; z-index: 10000;
  transition: transform 0.25s var(--curva);
}
.pular-para-conteudo:focus { transform: translate(-50%, 0); }

/* Texto com acabamento de ouro folheado */
.ouro {
  font-style: normal;
  background: var(--grad-ouro);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sobretitulo {
  font-size: var(--t--1);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ouro-400);
  margin-bottom: 1.1rem;
  font-weight: 500;
}
/* tracinho dourado antes do rótulo da seção */
.sobretitulo::before {
  content: '';
  display: inline-block;
  width: 2.2rem; height: 1px;
  background: var(--ouro-600);
  vertical-align: middle;
  margin-right: 0.9rem;
}

.secao-topo { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.secao-titulo { font-size: var(--t-4); margin-bottom: 1.2rem; }
.secao-texto { color: var(--texto-2); font-size: var(--t-1); max-width: 38rem; }

/* ============================================================
   3. COMPONENTES
   ============================================================ */
.botao {
  --alt: 2.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: var(--alt);
  padding: 0 1.4rem;
  border-radius: 999px;
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.35s var(--curva), box-shadow 0.35s var(--curva),
              background-color 0.35s var(--curva), border-color 0.35s var(--curva);
}
.botao--grande { --alt: 3.4rem; padding: 0 1.9rem; font-size: var(--t-0); }

.botao--ouro {
  background: var(--grad-ouro);
  color: #2A1F06;
  box-shadow: 0 8px 30px -10px rgba(212, 175, 55, 0.55);
}
.botao--ouro:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px -12px rgba(212, 175, 55, 0.75);
}

.botao--vidro {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--linha-forte);
  color: var(--texto);
  backdrop-filter: blur(10px);
}
.botao--vidro:hover {
  background: rgba(212, 175, 55, 0.12);
  border-color: var(--ouro-400);
  transform: translateY(-2px);
}

.botao__seta { transition: transform 0.35s var(--curva); }
.botao:hover .botao__seta { transform: translateX(4px); }

/* --- estado inicial dos blocos animados ---
   Só escondemos quando o JS está ligado (html.js). Sem JS, tudo aparece
   normalmente — o site continua 100% legível e indexável pelo Google. */
html.js [data-revelar] { opacity: 0; }
html.js [data-palavras] .palavra { opacity: 0; }

/* ============================================================
   4. TOPO / NAVEGAÇÃO
   ============================================================ */
.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  transition: background-color 0.4s var(--curva), backdrop-filter 0.4s var(--curva),
              border-color 0.4s var(--curva);
  border-bottom: 1px solid transparent;
}
.topo.encolhido {
  background: rgba(7, 12, 28, 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--linha);
}

.topo__interno {
  width: var(--largura);
  margin-inline: auto;
  height: 4.6rem;
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  margin-right: auto;
}
.marca__coroa { width: 1.6rem; display: block; }
.marca__coroa svg { width: 100%; height: auto; display: block; }
.marca__nome {
  font-family: var(--fonte-titulo);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  background: var(--grad-ouro);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.menu { display: flex; gap: clamp(0.8rem, 1.6vw, 1.9rem); }
.menu a {
  position: relative;
  font-size: var(--t--1);
  color: var(--texto-2);
  text-decoration: none;
  padding: 0.4rem 0;
  transition: color 0.3s var(--curva);
}
.menu a::after {                       /* sublinhado dourado que cresce no hover */
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--ouro-500);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--curva);
}
.menu a:hover { color: var(--ouro-200); }
.menu a:hover::after { transform: scaleX(1); transform-origin: left; }

.menu-botao {
  display: none;
  width: 2.6rem; height: 2.6rem;
  background: none;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  cursor: pointer;
  position: relative;
}
.menu-botao__traco,
.menu-botao__traco::before,
.menu-botao__traco::after {
  position: absolute;
  left: 50%; width: 1rem; height: 1.5px;
  background: var(--ouro-300);
  transform: translateX(-50%);
  transition: transform 0.35s var(--curva), opacity 0.2s;
}
.menu-botao__traco { top: 50%; margin-top: -0.75px; }
.menu-botao__traco::before { content: ''; top: -5px; }
.menu-botao__traco::after  { content: ''; top: 5px; }
.menu-botao[aria-expanded="true"] .menu-botao__traco { background: transparent; }
.menu-botao[aria-expanded="true"] .menu-botao__traco::before { transform: translateX(-50%) translateY(5px) rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao__traco::after  { transform: translateX(-50%) translateY(-5px) rotate(-45deg); }

.menu-celular {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem var(--gap) 1.6rem;
  background: rgba(7, 12, 28, 0.96);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--linha);
}
.menu-celular[hidden] { display: none; }
.menu-celular a {
  padding: 0.75rem 0;
  text-decoration: none;
  color: var(--texto-2);
  font-size: var(--t-1);
  border-bottom: 1px solid var(--linha-fria);
}
.menu-celular .botao { align-self: flex-start; margin-top: 0.9rem; border-bottom: 0; }
/* ".menu-celular a" é mais específica que ".botao--ouro" e pintava o texto do
   botão de cinza-claro sobre o dourado. Aqui a cor e o respiro voltam. */
.menu-celular .botao { padding: 0 1.4rem; font-size: var(--t--1); }
.menu-celular .botao--ouro { color: #2A1F06; }
.menu-celular .botao--vidro { color: var(--texto); }

/* ============================================================
   5. HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__fundo { position: absolute; inset: 0; z-index: -1; }
.hero__video {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Véu escuro: sem ele o texto branco não teria contraste sobre o vídeo */
.hero__veu {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4,7,15,0.86) 0%, rgba(4,7,15,0.34) 34%,
                    rgba(4,7,15,0.5) 62%, var(--navy-900) 100%),
    /* Reforço à esquerda: é onde fica o título. Sem isso o "RIXY" gravado
       no vídeo disputa atenção com a manchete e ambos perdem. */
    linear-gradient(90deg, rgba(4,7,15,0.9) 0%, rgba(4,7,15,0.72) 30%,
                    rgba(4,7,15,0.18) 62%, rgba(4,7,15,0.4) 100%);
}
/* Brilho dourado difuso, dá calor ao canto da tela */
.hero__brilho {
  position: absolute;
  right: -10%; top: 8%;
  width: 55vw; height: 55vw;
  background: radial-gradient(circle, rgba(212,175,55,0.14) 0%, transparent 62%);
  filter: blur(30px);
}

.hero__conteudo {
  width: var(--largura);
  margin-inline: auto;
  max-width: min(1200px, 100% - 2.5rem);
  padding: 8rem 0 6rem;
}

.hero__titulo {
  font-size: var(--t-5);
  font-weight: 500;
  margin-bottom: 1.6rem;
  letter-spacing: -0.03em;
}
.hero__titulo .linha { display: block; }

.hero__texto {
  max-width: 34rem;
  font-size: var(--t-1);
  color: var(--texto-2);
  margin-bottom: 2.4rem;
  text-wrap: pretty;    /* evita palavra sozinha na última linha */
}

.hero__acoes { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.hero__rolar {
  position: absolute;
  left: 50%; bottom: 1.8rem;
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  align-items: center; gap: 0.6rem;
}
.hero__rolar-texto {
  font-size: 0.62rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--apagado);
}
.hero__rolar-linha {
  width: 1px; height: 3rem;
  background: linear-gradient(180deg, var(--ouro-500), transparent);
  transform-origin: top;
  animation: descer 2.4s var(--curva) infinite;
}
@keyframes descer {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(3rem); opacity: 0; }
}

/* ============================================================
   6. SEÇÕES
   ============================================================ */

/* --- Manifesto --- */
.manifesto {
  padding: var(--respiro) 0;
  background: linear-gradient(180deg, var(--navy-900), var(--navy-850));
}
.manifesto__texto {
  font-family: var(--fonte-titulo);
  font-size: var(--t-4);
  line-height: 1.16;
  font-weight: 500;
  max-width: 22ch;
  letter-spacing: -0.02em;
}
.manifesto__texto .palavra { display: inline-block; }
.manifesto__remate {
  margin-top: 2rem;
  font-size: var(--t-2);
  font-family: var(--fonte-titulo);
  background: var(--grad-ouro);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Pilares (vídeo da coroa controlado pela rolagem) --- */
.pilares { background: var(--navy-850); }
.pilares__palco {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
}
.pilares__video-caixa { position: absolute; inset: 0; z-index: 0; }
.pilares__video { width: 100%; height: 100%; object-fit: cover; }
/* A coroa fica à direita e o texto à esquerda: escurecemos a faixa da
   esquerda o bastante para o texto ter contraste, deixando a coroa limpa. */
.pilares__vinheta {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 64% 50%, transparent 10%, rgba(10,16,36,0.7) 64%),
    linear-gradient(90deg, rgba(10,16,36,0.95) 0%, rgba(10,16,36,0.82) 26%,
                    rgba(10,16,36,0.4) 52%, transparent 74%);
}

.pilares__textos {
  position: relative;
  z-index: 1;
  width: var(--largura);
  margin-inline: auto;
  display: grid;
}
/* Os três pilares ficam empilhados no MESMO lugar; o JS troca qual está visível */
.pilar {
  grid-area: 1 / 1;
  max-width: 30rem;
  padding: 3rem 0;
}
.pilar__numero {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: var(--t-2);
  color: var(--ouro-600);
  margin-bottom: 0.8rem;
  letter-spacing: 0.1em;
}
.pilar__titulo { font-size: var(--t-3); margin-bottom: 1.1rem; }
.pilar p { color: var(--texto-2); font-size: var(--t-1); }

kbd {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.85em;
  padding: 0.1em 0.45em;
  border: 1px solid var(--linha-forte);
  border-radius: 5px;
  background: rgba(0,0,0,0.35);
}
/* ============================================================
   PÁGINAS INTERNAS
   Daqui para baixo é o que só existe em servicos / seguranca /
   processo, mais os cartões da home que levam até elas.
   ============================================================ */

/* --- item do menu da página em que a pessoa está --- */
.menu a[aria-current="page"] { color: var(--ouro-200); }
.menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu-celular a[aria-current="page"] { color: var(--ouro-200); }

/* --- trilha "Início / Página" --- */
.migalhas {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t--1);
  color: var(--muted, var(--apagado));
  margin-bottom: 1.6rem;
}
.migalhas a { color: var(--apagado); text-decoration: none; transition: color 0.3s var(--curva); }
.migalhas a:hover { color: var(--ouro-300); }
.migalhas span[aria-current] { color: var(--texto-2); }

/* --- cabeçalho das páginas internas ---
   Menor que o da home: a pessoa já entrou, não precisa de tela cheia. */
.pagina-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 62svh;
  padding: 8rem 0 3.5rem;
  overflow: hidden;
  isolation: isolate;
}
.pagina-hero__fundo { position: absolute; inset: 0; z-index: -1; }
.pagina-hero__video { width: 100%; height: 100%; object-fit: cover; }

/* As páginas de serviço usam foto no lugar do vídeo: mesmo efeito visual por
   ~22 KB em vez de ~4 MB. O <picture> precisa ocupar a caixa inteira igual
   ao vídeo, por isso ele também recebe width/height 100%. */
.pagina-hero__foto,
.pagina-hero__foto img { width: 100%; height: 100%; display: block; object-fit: cover; }
.pagina-hero__veu {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4,7,15,0.9) 0%, rgba(4,7,15,0.55) 40%,
                    rgba(4,7,15,0.8) 78%, var(--navy-900) 100%),
    linear-gradient(90deg, rgba(4,7,15,0.88) 0%, rgba(4,7,15,0.6) 42%, rgba(4,7,15,0.25) 100%);
}
.pagina-hero__conteudo { position: relative; }
.pagina-hero__titulo {
  font-size: var(--t-4);
  font-weight: 500;
  margin-bottom: 1.1rem;
  max-width: 18ch;
}
.pagina-hero__texto {
  max-width: 40rem;
  font-size: var(--t-1);
  color: var(--texto-2);
  text-wrap: pretty;
}

/* --- faixa genérica de conteúdo das páginas internas --- */
.pagina-secao { padding: var(--respiro) 0; background: var(--navy-900); }
.pagina-secao--alt {
  background:
    radial-gradient(ellipse at 84% 6%, rgba(42,62,143,0.18) 0%, transparent 54%),
    linear-gradient(180deg, var(--navy-850), var(--navy-900));
}

/* ============================================================
   HOME — cartões que levam às páginas internas
   ============================================================ */
.caminhos {
  padding: var(--respiro) 0;
  background: linear-gradient(180deg, var(--navy-850), var(--navy-900));
}
.grade-teasers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--gap);
  perspective: 1200px;
}
.teaser {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.7rem;
  background: linear-gradient(165deg, rgba(16,27,61,0.72), rgba(7,12,28,0.9));
  border: 1px solid var(--linha-fria);
  border-radius: 16px;
  transform-style: preserve-3d;
  will-change: transform;
  transition: border-color 0.4s var(--curva), box-shadow 0.4s var(--curva);
}
.teaser:hover {
  border-color: var(--linha-forte);
  box-shadow: 0 24px 60px -30px rgba(212,175,55,0.5);
}
.teaser__rotulo {
  font-size: var(--t--1);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ouro-600);
  margin-bottom: 0.8rem;
}
.teaser__titulo {
  font-size: var(--t-2);
  margin-bottom: 0.8rem;
  background: var(--grad-ouro);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.teaser__texto { color: var(--texto-2); font-size: var(--t--1); margin-bottom: 1.2rem; }
.teaser__itens { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 0.5rem; }
.teaser__itens li {
  position: relative;
  padding-left: 1.2rem;
  font-size: var(--t--1);
  color: var(--apagado);
}
.teaser__itens li::before {
  content: '◆';
  position: absolute; left: 0; top: 0.45em;
  color: var(--ouro-600);
  font-size: 0.6em;
}
.teaser__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ouro-300);
  transition: color 0.3s var(--curva);
}
.teaser__link:hover { color: var(--ouro-100); }
.teaser__link:hover .botao__seta { transform: translateX(4px); }

/* ============================================================
   PÁGINA DE SERVIÇOS
   ============================================================ */
.servico__listas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--gap);
}
.lista-rotulada h3 {
  font-size: var(--t--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ouro-400);
  font-family: var(--fonte-texto);
  font-weight: 600;
  margin-bottom: 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--linha);
}
.lista-rotulada ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.lista-rotulada li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--t--1);
  color: var(--apagado);
  line-height: 1.6;
}
.lista-rotulada li::before {
  content: '·';
  position: absolute; left: 0.25rem; top: -0.1em;
  color: var(--ouro-600);
  font-size: 1.4em;
}
.lista-rotulada--marcada li::before {
  content: '✓';
  font-size: 0.8em;
  top: 0.25em;
  left: 0;
}

.nota-lateral {
  margin-top: clamp(2.2rem, 5vw, 3.6rem);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: rgba(212,175,55,0.045);
}
.nota-lateral h2 { font-size: var(--t-2); margin-bottom: 0.8rem; }
.nota-lateral p { color: var(--texto-2); max-width: 46rem; }
.nota-lateral__extra { margin-top: 0.9rem; color: var(--apagado); font-size: var(--t--1); }

/* ============================================================
   PÁGINA DE SEGURANÇA
   ============================================================ */
.grade-causas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--gap);
}
.causa {
  padding: 1.8rem 1.5rem;
  border: 1px solid var(--linha-fria);
  border-left: 2px solid var(--rubi);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(160deg, rgba(192,20,60,0.07), rgba(10,16,36,0.5));
}
.causa__numero {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: var(--t-1);
  color: var(--ruby-soft, #E23F63);
  margin-bottom: 0.5rem;
  letter-spacing: 0.1em;
}
.causa h3 { font-size: var(--t-1); margin-bottom: 0.6rem; }
.causa p { color: var(--apagado); font-size: var(--t--1); line-height: 1.7; }

.destaque-frase {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1.4rem 1.7rem;
  border-left: 2px solid var(--ouro-500);
  border-radius: 0 10px 10px 0;
  background: rgba(212,175,55,0.05);
  color: var(--texto-2);
  font-size: var(--t-1);
  max-width: 52rem;
  text-wrap: pretty;
}
.destaque-frase strong { color: var(--ouro-200); font-weight: 600; }

.lista-medidas { display: grid; gap: 0; }
.medida {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.3rem;
  padding: clamp(1.8rem, 3vw, 2.6rem) 0;
  border-top: 1px solid var(--linha);
}
.medida:first-child { border-top: 0; padding-top: 0; }
.medida__icone {
  display: grid;
  place-items: center;
  width: 2.8rem; height: 2.8rem;
  border: 1px solid var(--linha-forte);
  border-radius: 10px;
  color: var(--ouro-300);
  font-size: 1.05rem;
}
.medida h3 { font-size: var(--t-2); margin-bottom: 0.6rem; }
.medida__resumo {
  color: var(--ouro-200);
  font-size: var(--t-0);
  margin-bottom: 0.8rem;
  max-width: 44rem;
}
.medida__detalhe {
  color: var(--apagado);
  font-size: var(--t--1);
  line-height: 1.75;
  max-width: 52rem;
  text-wrap: pretty;
}

.prova-bloco {
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  border: 1px solid var(--linha-forte);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(22,36,76,0.5), rgba(10,16,36,0.6));
}
.prova-bloco h2 { font-size: var(--t-3); margin-bottom: 1rem; }
.prova-bloco > p { color: var(--texto-2); max-width: 48rem; }
.prova-bloco strong { color: var(--ouro-200); font-weight: 600; }
.prova-passos {
  margin: 1.4rem 0 0;
  padding-left: 1.3rem;
  display: grid;
  gap: 0.7rem;
  color: var(--apagado);
  font-size: var(--t--1);
}
.prova-passos li { padding-left: 0.3rem; }
.prova-passos::marker { color: var(--ouro-500); }
.prova-remate {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linha);
  color: var(--texto-2);
  font-size: var(--t--1);
}

/* ============================================================
   PÁGINA DE PROCESSO
   ============================================================ */
.linha-etapas { display: grid; gap: 0; }
.etapa {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  padding-bottom: clamp(2rem, 4vw, 3.2rem);
}
.etapa:last-child { padding-bottom: 0; }

/* coluna da esquerda: número dentro de um círculo + fio descendo até o próximo */
.etapa__marca { display: flex; flex-direction: column; align-items: center; }
.etapa__numero {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  flex: none;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--navy-900);
  font-family: var(--fonte-titulo);
  font-size: var(--t-0);
  color: var(--ouro-300);
  letter-spacing: 0.06em;
}
.etapa__fio {
  flex: 1;
  width: 1px;
  margin-top: 0.7rem;
  background: linear-gradient(180deg, var(--ouro-600), rgba(212,175,55,0.05));
}
.etapa:last-child .etapa__fio { display: none; }

.etapa__conteudo { padding-bottom: 0.4rem; }
.etapa__conteudo h2 { font-size: var(--t-3); margin-bottom: 0.5rem; }
.etapa__chamada {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: var(--t-1);
  background: var(--grad-ouro);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1rem;
}
.etapa__conteudo > p { color: var(--texto-2); max-width: 50rem; text-wrap: pretty; }

.etapa__preciso {
  margin-top: 1.4rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--linha-fria);
  border-radius: 12px;
  background: rgba(12,20,44,0.5);
  max-width: 40rem;
}
.etapa__preciso h3 {
  font-size: var(--t--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ouro-400);
  font-family: var(--fonte-texto);
  font-weight: 600;
  margin-bottom: 0.8rem;
}
.etapa__preciso ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.etapa__preciso li {
  position: relative;
  padding-left: 1.2rem;
  font-size: var(--t--1);
  color: var(--apagado);
}
.etapa__preciso li::before {
  content: '→';
  position: absolute; left: 0;
  color: var(--ouro-600);
  font-size: 0.85em;
}

.duas-colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.6rem, 4vw, 3rem);
}
.coluna-nota h2 { font-size: var(--t-2); margin-bottom: 0.9rem; }
.coluna-nota p { color: var(--texto-2); font-size: var(--t--1); line-height: 1.75; }
.coluna-nota p + p { margin-top: 0.9rem; }
.coluna-nota strong { color: var(--ouro-200); font-weight: 600; }

/* --- ajustes de tela grande --- */
@media (min-width: 900px) {
}

/* --- ajustes de celular --- */
@media (max-width: 620px) {
  .pagina-hero { min-height: 52svh; padding-top: 7rem; }
  .medida { grid-template-columns: 1fr; gap: 0.9rem; }
  .etapa { grid-template-columns: 1fr; gap: 1rem; }
  .etapa__marca { flex-direction: row; align-items: center; gap: 0.9rem; }
  .etapa__fio { width: auto; height: 1px; margin: 0; flex: 1;
                background: linear-gradient(90deg, var(--ouro-600), rgba(212,175,55,0.05)); }
  .etapa:last-child .etapa__fio { display: block; }
}

/* ============================================================
   PÁGINAS DE SERVIÇO (uma por formato de site)
   ============================================================ */

/* --- índice em servicos.html: leva às quatro, sem repetir o conteúdo delas --- */
.indice-servicos { display: grid; }
.indice-servico {
  display: grid;
  gap: 1.2rem;
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--linha);
  align-items: start;
}
.indice-servico:first-child { border-top: 0; padding-top: 0; }

.indice-servico__numero {
  font-family: var(--fonte-titulo);
  font-size: var(--t-2);
  color: var(--ouro-600);
  letter-spacing: 0.1em;
}
.indice-servico__texto h2 { font-size: var(--t-3); margin-bottom: 0.6rem; }
.indice-servico__texto h2 a {
  text-decoration: none;
  background: var(--grad-ouro);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: opacity 0.3s var(--curva);
}
.indice-servico__texto h2 a:hover { opacity: 0.78; }
.indice-servico__chamada {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: var(--t-1);
  color: var(--texto);
  margin-bottom: 0.7rem;
}
.indice-servico__resumo { color: var(--texto-2); font-size: var(--t-0); max-width: 42rem; }

.indice-servico__quem h3 {
  font-family: var(--fonte-texto);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ouro-400);
  margin-bottom: 0.7rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--linha);
}
.indice-servico__quem ul { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.45rem; }
.indice-servico__quem li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--t--1);
  color: var(--apagado);
  line-height: 1.55;
}
.indice-servico__quem li::before {
  content: '·';
  position: absolute; left: 0.25rem; top: -0.15em;
  color: var(--ouro-600);
  font-size: 1.4em;
}

/* --- bloco de texto corrido (a seção "o problema") --- */
.texto-longo { max-width: 46rem; }
.texto-longo h2 { font-size: var(--t-3); margin-bottom: 1.2rem; }
.texto-longo p {
  color: var(--texto-2);
  font-size: var(--t-1);
  line-height: 1.75;
  text-wrap: pretty;
}
.texto-longo p + p { margin-top: 1.1rem; }
.texto-longo strong { color: var(--ouro-200); font-weight: 600; }

/* --- lista do que NÃO é: marcador diferente, para não parecer entregável --- */
.lista-rotulada--negativa li::before {
  content: '×';
  color: var(--ruby-soft, #E23F63);
  font-size: 0.95em;
  top: 0.1em;
  left: 0.1rem;
}

/* --- perguntas frequentes --- */
.faq { display: grid; gap: 0; max-width: 52rem; }
.faq__item {
  padding: clamp(1.4rem, 2.5vw, 2rem) 0;
  border-top: 1px solid var(--linha);
}
.faq__item:first-child { border-top: 0; padding-top: 0; }
.faq__pergunta {
  font-size: var(--t-2);
  margin-bottom: 0.7rem;
  color: var(--ouro-200);
}
.faq__resposta {
  color: var(--apagado);
  font-size: var(--t-0);
  line-height: 1.75;
  text-wrap: pretty;
}

/* --- links dentro da lista do cartão da home --- */
.teaser__itens li a {
  color: var(--texto-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--curva), border-color 0.3s var(--curva);
}
.teaser__itens li a:hover { color: var(--ouro-200); border-bottom-color: var(--linha-forte); }

/* --- telas largas: o índice vira três colunas --- */
@media (min-width: 900px) {
  .indice-servico { grid-template-columns: auto 1.5fr 1fr; gap: 2.2rem; }
}

/* ============================================================
   TRABALHOS — vitrine da home e página trabalhos.html
   ============================================================ */

/* --- moldura de navegador em volta das gravações de tela --- */
.janela {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--linha-fria);
  background: #000;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.9), 0 0 0 1px rgba(212,175,55,0.08);
}
.janela__barra {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.9rem;
  background: rgba(12,20,44,0.95);
  border-bottom: 1px solid var(--linha-fria);
}
.janela__bolinha { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: rgba(255,255,255,0.16); }
.janela__endereco {
  margin-left: 0.8rem;
  font-size: 0.7rem;
  color: var(--apagado);
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* width/height do HTML + aspect-ratio: o espaço fica reservado antes do vídeo
   chegar, e a página não pula (CLS) */
.janela__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 728;
  background: #000;
}

/* --- selo "Projeto conceitual" --- */
.selo {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ouro-300);
  background: rgba(212,175,55,0.06);
  white-space: nowrap;
}

/* --- vitrine da home --- */
.vitrine {
  padding: var(--respiro) 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(212,175,55,0.07) 0%, transparent 50%),
    linear-gradient(180deg, var(--navy-850), var(--navy-900));
}
.grade-vitrine {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(1.4rem, 3vw, 2.2rem);
}
.vitrine-item { margin: 0; }
.vitrine-item__legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-top: 1rem;
  font-size: var(--t--1);
  color: var(--apagado);
}
.vitrine-item__legenda strong { color: var(--texto); font-weight: 600; }
.vitrine__acao { margin-top: clamp(2rem, 4vw, 3rem); }

/* --- página trabalhos.html --- */
.nota-lateral--topo { margin-top: 0; margin-bottom: clamp(3rem, 6vw, 5rem); }
.nota-lateral strong { color: var(--ouro-200); font-weight: 600; }

.casos { display: grid; gap: clamp(4rem, 8vw, 7rem); }
.caso { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }
.caso__tela { margin: 0; }
.caso__texto { display: grid; gap: 1.6rem; }
.caso__cabeca .selo { margin-bottom: 1rem; }
.caso__titulo { font-size: var(--t-4); margin-bottom: 0.4rem; }
.caso__tipo {
  font-size: var(--t--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ouro-400);
  margin-bottom: 1rem;
}
.caso__chamada {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: var(--t-2);
  line-height: 1.3;
  background: var(--grad-ouro);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  max-width: 24ch;
}
.caso__corpo > p {
  color: var(--texto-2);
  font-size: var(--t-0);
  line-height: 1.75;
  max-width: 46rem;
  text-wrap: pretty;
}
.caso__corpo > p + p { margin-top: 1rem; }
.caso__corpo strong { color: var(--ouro-200); font-weight: 600; }
.caso__corpo .lista-rotulada { margin: 1.8rem 0 1.6rem; max-width: 34rem; }

@media (min-width: 900px) {
  .caso__texto { grid-template-columns: 0.8fr 1.2fr; gap: 3rem; align-items: start; }
  .caso__cabeca { position: sticky; top: 6rem; }
}

/* ============================================================
   CONTATO PELO WHATSAPP
   ============================================================ */

/* ícone dentro dos botões e links: acompanha o tamanho e a cor do texto */
.icone-whats { width: 1.15em; height: 1.15em; flex: none; display: block; }

/* chamada final: WhatsApp e Instagram lado a lado */
.final__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}

/* menu do celular: os dois canais juntos no fim da lista */
.menu-celular__contato { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.menu-celular__contato .botao { border-bottom: 0; margin-top: 0; }

/* rodapé: <address> vem em itálico por padrão; aqui não faz sentido */
.rodape__contato { font-style: normal; }
.rodape__contato a { display: inline-flex; align-items: center; gap: 0.5rem; }

/* botão flutuante: nas cores da marca, não no verde padrão, para não brigar
   com o resto da página */
.whats-flutuante {
  position: fixed;
  right: max(1.1rem, env(safe-area-inset-right));
  bottom: max(1.1rem, env(safe-area-inset-bottom));
  z-index: 900;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 999px;
  color: var(--ouro-200);
  background: rgba(7, 12, 28, 0.88);
  border: 1px solid var(--linha-forte);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px -12px rgba(0,0,0,0.9), 0 0 0 4px rgba(212,175,55,0.06);
  transition: transform 0.35s var(--curva), opacity 0.35s var(--curva),
              border-color 0.35s var(--curva), color 0.35s var(--curva);
}
.whats-flutuante .icone-whats { width: 1.55rem; height: 1.55rem; }
.whats-flutuante:hover {
  transform: translateY(-3px);
  color: var(--ouro-100);
  border-color: var(--ouro-400);
}
/* escondido enquanto a chamada final (que já tem o botão) está na tela */
.whats-flutuante--oculto {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

@media (max-width: 560px) {
  .final__acoes { flex-direction: column; align-items: stretch; }
  .menu-celular__contato .botao { flex: 1 1 8rem; }
}

@media print { .whats-flutuante { display: none; } }

/* --- Chamada final --- */
.final {
  position: relative;
  padding: calc(var(--respiro) * 1.2) 0;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.final__fundo { position: absolute; inset: 0; z-index: -1; }
.final__video { width: 100%; height: 100%; object-fit: cover; }
/* Aqui o texto fica CENTRALIZADO em cima da coroa, então o escurecimento
   também precisa ser mais forte no centro — o inverso do hero. */
.final__veu {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 46%, rgba(4,7,15,0.88) 0%,
                    rgba(4,7,15,0.72) 55%, rgba(4,7,15,0.9) 100%),
    linear-gradient(180deg, var(--navy-850) 0%, transparent 20%, transparent 80%, var(--navy-900) 100%);
}
.final__titulo { font-size: var(--t-4); margin-bottom: 1.3rem; }
.final__texto {
  color: var(--texto-2);
  font-size: var(--t-1);
  max-width: 34rem;
  margin: 0 auto 2.3rem;
  text-wrap: balance;   /* distribui as linhas para não sobrar uma palavra sozinha */
}

/* ============================================================
   7. RODAPÉ
   ============================================================ */
.rodape {
  padding: clamp(3rem, 6vw, 5rem) 0 2.5rem;
  background: var(--tinta);
  border-top: 1px solid var(--linha);
}
.rodape__interno {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
.rodape__marca .marca__nome { font-size: 1.6rem; display: inline-block; margin-bottom: 0.6rem; }
.rodape__marca p { color: var(--apagado); font-size: var(--t--1); max-width: 24rem; }
/* rodapé em duas colunas de links: dá mais caminhos internos para as páginas
   de serviço, que não cabem no menu do topo */
.rodape__colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--gap);
}
.rodape__coluna { display: flex; flex-direction: column; gap: 0.6rem; }
.rodape__titulo {
  font-family: var(--fonte-texto);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ouro-400);
  margin-bottom: 0.3rem;
}
.rodape__coluna a {
  font-size: var(--t--1);
  color: var(--texto-2);
  text-decoration: none;
  transition: color 0.3s var(--curva);
}
.rodape__coluna a:hover { color: var(--ouro-300); }
.rodape__creditos {
  color: var(--apagado);
  font-size: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linha-fria);
}

/* ============================================================
   8. RESPONSIVO E ACESSIBILIDADE
   ============================================================ */
@media (min-width: 900px) {
  .rodape__interno {
    grid-template-columns: 1fr 1.8fr;
    align-items: start;
  }
  .rodape__creditos { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .menu, .topo__cta { display: none; }
  .menu-botao { display: block; }

  /* No celular a seção não trava na tela: o vídeo da coroa fica no topo e os
     três pilares descem normalmente embaixo dele. Rolar com o dedo numa
     seção presa é desconfortável — por isso o layout muda de verdade aqui. */
  .pilares__palco { min-height: 0; display: block; }
  .pilares__video-caixa { position: relative; aspect-ratio: 16 / 9; }
  .pilares__vinheta {
    background:
      linear-gradient(180deg, rgba(10,16,36,0.25) 0%, rgba(10,16,36,0.55) 62%, var(--navy-850) 100%);
  }
  .pilares__textos { display: block; padding: 2.5rem 0 1rem; }
  .pilar {
    grid-area: auto;
    max-width: none;
    padding: 2rem 0;
    border-top: 1px solid var(--linha);
  }
  .pilar:first-child { border-top: 0; }
}

@media (max-width: 560px) {
  .hero__conteudo { padding-top: 7rem; }
  .botao { width: 100%; justify-content: center; }
  .hero__acoes { flex-direction: column; align-items: stretch; }
  .menu-celular .botao { align-self: stretch; }
}

/* Quem pediu ao sistema para reduzir animação recebe o site parado.
   Nada de movimento, nada de vídeo em laço — só o conteúdo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-revelar],
  html.js [data-palavras] .palavra { opacity: 1 !important; }
  .hero__rolar-linha { animation: none; }
}