/* Protemax Segurança — site (etapa 1). Usa só os tokens de tokens.css. */
@font-face { font-family: "Open Sans"; src: url("../fonts/opensans-var-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--pm-noite); color: var(--cor-texto); font: 400 var(--fs-texto)/1.6 var(--fonte-texto); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); line-height: 1.02; letter-spacing: var(--tracking-titulo); color: var(--cor-titulo); text-wrap: balance; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--peso-forte); letter-spacing: -.01em; }
:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 3px; }
section, .frase { background: var(--cor-fundo); color: var(--cor-texto); position: relative; }

body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: var(--grao-opacidade);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }

.pular { position: absolute; left: var(--esp-2); top: -4rem; z-index: 100; background: var(--pm-amarelo); color: var(--pm-preto); padding: var(--esp-1) var(--esp-2); font-weight: 700; }
.pular:focus { top: var(--esp-2); }

.grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); max-width: var(--largura-max); margin-inline: auto; padding-inline: var(--margem); }
.etiqueta { display: inline-flex; align-items: center; gap: .75rem; font: 700 var(--fs-etiqueta)/1.3 var(--fonte-texto); letter-spacing: var(--tracking-etiqueta); text-transform: uppercase; color: var(--cor-destaque); }
.etiqueta::before { content: ""; width: .6rem; height: .6rem; background: currentColor; transform: rotate(45deg); }
.ic { width: 1.25em; height: 1.25em; flex: none; }
.link-linha { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size var(--tempo-ui) var(--curva-saida); padding-bottom: 2px; font-weight: 600; }
.link-linha:hover, .link-linha:focus-visible { background-size: 100% 2px; }

.botao { display: inline-flex; align-items: center; gap: .6rem; min-height: 3rem; padding: .85rem 1.5rem; background: var(--cor-botao); color: var(--cor-botao-texto); font: 700 1rem/1.1 var(--fonte-texto); text-decoration: none; border: var(--borda) solid var(--cor-botao); border-radius: var(--raio); transition: background var(--tempo-micro), border-color var(--tempo-micro), transform var(--tempo-micro) var(--curva-padrao); }
.botao:hover { background: var(--cor-botao-hover); border-color: var(--cor-botao-hover); transform: translateY(-2px); }
.botao:active { transform: translateY(1px); }
.botao--linha { background: transparent; border-color: rgba(255,255,255,.5); color: var(--pm-branco); }
.botao--linha:hover { background: rgba(255,255,255,.08); border-color: var(--pm-branco); }
.botao--grande { font-size: clamp(1rem, .9rem + .5vw, 1.25rem); padding: 1.2rem 2rem; }

.moldura { overflow: hidden; background: var(--pm-grafite); }
.moldura img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tempo-revelar) var(--curva-saida); }
.moldura:hover img { transform: scale(var(--zoom-foto)); }

/* ---------- topo ---------- */
.topo { position: fixed; inset: 0 0 auto; z-index: 50; transition: background var(--tempo-ui), box-shadow var(--tempo-ui); }
.topo.is-solido { background: rgba(11, 11, 12, .94); box-shadow: 0 1px 0 var(--pm-linha); }
.topo__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); max-width: var(--largura-max); margin-inline: auto; padding: .75rem var(--margem); }
.topo__marca { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--pm-branco); }
.topo__marca img { width: 48px; height: 48px; }
.topo__marca span { font-weight: 800; font-size: 1.125rem; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.topo__marca small { display: block; font-size: .625rem; font-weight: 700; letter-spacing: .3em; color: var(--pm-cinza); margin-top: .25rem; }
.topo nav ul { display: flex; gap: var(--esp-4); }
.topo nav a { color: var(--pm-branco); font-size: .9375rem; }
.topo .botao { min-height: 2.75rem; padding: .6rem 1.1rem; }

/* ---------- 1. hero ---------- */
.hero { padding-top: 8rem; background: radial-gradient(ellipse 60% 50% at 85% 20%, rgba(207, 0, 1, .28), transparent 70%), var(--pm-noite); overflow: hidden; }
.hero__grade { align-items: center; }
.hero__texto { grid-column: 1 / 9; position: relative; z-index: 2; }
.hero__onde { display: flex; align-items: center; gap: .6rem; font: 700 var(--fs-etiqueta)/1 var(--fonte-texto); letter-spacing: var(--tracking-etiqueta); text-transform: uppercase; color: var(--pm-cinza); }
.ponto { width: .6rem; height: .6rem; border-radius: 50%; background: var(--pm-vermelho); box-shadow: 0 0 0 0 rgba(207, 0, 1, .7); animation: pulso 2s var(--curva-padrao) 3; }
@keyframes pulso { 70% { box-shadow: 0 0 0 .6rem rgba(207, 0, 1, 0); } 100% { box-shadow: 0 0 0 0 rgba(207, 0, 1, 0); } }
.hero h1 { margin-top: var(--esp-3); font-size: var(--fs-display); line-height: .98; }
.hero h1 .linha { display: block; overflow: clip; padding-bottom: .06em; }
.hero h1 .linha > span { display: inline-block; }
.hero h1 em { font-style: normal; color: var(--pm-vermelho-texto); }
.hero__sub { margin-top: var(--esp-4); max-width: 46ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--pm-cinza); }
.hero__acoes { margin-top: var(--esp-5); display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.hero__selo { grid-column: 9 / 13; justify-self: end; width: min(100%, 22rem); filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .6)); }
.hero__foto { position: relative; margin-top: var(--esp-6); }
.hero__foto .moldura { height: clamp(18rem, 42vw, 40rem); clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%); }
.hero__foto .moldura img { object-position: 50% 60%; }
.hero__fatos { position: absolute; left: var(--margem); right: var(--margem); bottom: var(--esp-4); display: grid; grid-template-columns: repeat(3, 1fr); max-width: 52rem; background: rgba(11, 11, 12, .88); backdrop-filter: blur(6px); border-top: 3px solid var(--pm-vermelho); }
.hero__fatos li { padding: var(--esp-3); color: var(--pm-cinza); font-size: var(--fs-pequeno); border-left: 1px solid var(--pm-linha); }
.hero__fatos li:first-child { border-left: 0; }
.hero__fatos b { display: block; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); font-weight: 800; line-height: 1; color: var(--pm-branco); margin-bottom: .3rem; letter-spacing: -.02em; }

/* ---------- 2. serviços ---------- */
.servicos { padding-block: var(--esp-8); }
.servicos__cabeca { grid-column: 1 / 8; margin-bottom: var(--esp-6); }
.servicos__cabeca h2 { margin-top: var(--esp-3); }
.servicos__lista { grid-column: 1 / 8; border-top: 2px solid var(--pm-preto); counter-reset: s; }
.servicos__lista li { display: grid; grid-template-columns: 3.5rem 1fr; column-gap: var(--calha); padding-block: var(--esp-3); border-bottom: 1px solid var(--cor-linha); transition: background var(--tempo-ui); }
.servicos__lista .n { grid-row: span 2; font-weight: 800; color: var(--pm-vermelho); font-variant-numeric: tabular-nums; padding-top: .2rem; }
.servicos__lista h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 800; transition: transform var(--tempo-ui) var(--curva-saida), color var(--tempo-ui); }
.servicos__lista p { color: var(--cor-texto-suave); margin-top: .25rem; }
.servicos__lista li:hover h3 { transform: translateX(.3rem); color: var(--pm-vermelho); }
.servicos__foto { grid-column: 9 / 13; grid-row: 1 / span 2; align-self: start; position: sticky; top: 7rem; }
.servicos__foto .moldura { aspect-ratio: 3 / 4.6; box-shadow: 14px 14px 0 var(--pm-vermelho); }

/* ---------- 3. como funciona ---------- */
.como { background: var(--pm-preto); }
.como__palco { min-height: 100svh; display: flex; align-items: center; padding-block: var(--esp-7); }
.como__palco .grade { width: 100%; align-items: center; }
.como__texto { grid-column: 1 / 7; }
.como__texto h2 { margin-block: var(--esp-3) var(--esp-5); }
.passo { display: grid; grid-template-columns: 3rem 1fr; gap: var(--esp-2); padding-block: var(--esp-3); border-top: 1px solid var(--pm-linha); transition: opacity var(--tempo-ui); }
.js-passos .passo { opacity: .4; }
.js-passos .passo.is-ativo { opacity: 1; }
.passo__n { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; font-weight: 800; border: 2px solid var(--pm-vermelho); color: var(--pm-branco); transition: background var(--tempo-ui); }
.passo__n { background: var(--pm-vermelho); }
.js-passos .passo__n { background: transparent; }
.js-passos .passo.is-ativo .passo__n { background: var(--pm-vermelho); }
.passo p { color: var(--pm-cinza); margin-top: .25rem; }
.como__foto { grid-column: 8 / 13; position: relative; }
.como__foto .moldura { aspect-ratio: 3 / 4; max-height: 76svh; }
.como__barra { position: absolute; left: -1.5rem; top: 0; bottom: 0; width: 3px; background: var(--pm-linha); }
.como__barra i { display: block; width: 100%; height: 100%; background: var(--pm-vermelho); transform-origin: top; transform: scaleY(.33); transition: transform var(--tempo-ui) var(--curva-saida); }

/* ---------- 4. frase ---------- */
.frase { background: var(--pm-vermelho); color: var(--pm-branco); overflow: hidden; padding-block: var(--esp-4); }
.frase__texto { font: 800 clamp(2.5rem, 1rem + 7vw, 8rem)/1 var(--fonte-titulo); text-transform: uppercase; letter-spacing: -.03em; white-space: nowrap; width: max-content; }
.frase__texto span { color: var(--pm-preto); }

/* ---------- 5. equipe ---------- */
.equipe { padding-block: var(--esp-8); overflow: hidden; }
.equipe__cabeca > * { grid-column: 1 / 8; }
.equipe__cabeca h2 { margin-block: var(--esp-3) var(--esp-2); }
.equipe__cabeca p { color: var(--pm-cinza); }
.equipe__janela { margin-top: var(--esp-6); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--margem); scrollbar-color: var(--pm-vermelho) transparent; }
.equipe__trilho { display: flex; gap: var(--calha); width: max-content; padding-bottom: var(--esp-3); }
.equipe__trilho li { width: clamp(13rem, 22vw, 20rem); aspect-ratio: 9 / 14; scroll-snap-align: start; }
.equipe__trilho li:nth-child(even) { margin-top: var(--esp-6); }

/* ---------- 6. avaliações ---------- */
.avaliacoes { padding-block: var(--esp-8); }
.aval__nota { grid-column: 1 / 6; }
.aval__numero { display: flex; align-items: center; gap: var(--esp-3); margin-block: var(--esp-3) var(--esp-2); }
.aval__numero b { font-size: clamp(5rem, 3rem + 7vw, 10rem); font-weight: 800; line-height: .9; letter-spacing: -.04em; color: var(--pm-preto); }
.estrelas { display: flex; gap: .2rem; color: var(--pm-vermelho); }
.estrelas svg { width: 1.6rem; height: 1.6rem; }
.aval__nota p:not(.aval__numero) { color: var(--cor-texto-suave); margin-bottom: var(--esp-3); }
.aval__nota .link-linha { color: var(--pm-vermelho); }
.aval__lista { grid-column: 7 / 13; display: grid; gap: var(--esp-3); align-self: center; }
.aval__lista li { padding: var(--esp-4); background: var(--pm-branco); border-left: 4px solid var(--pm-vermelho); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .35); transition: transform var(--tempo-ui) var(--curva-saida); }
.aval__lista li:nth-child(2) { margin-left: var(--esp-6); }
.aval__lista li:hover { transform: translateY(-2px); }
.aval__lista blockquote { font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); font-weight: 700; line-height: 1.3; color: var(--pm-tinta); }

/* ---------- 7. onde ---------- */
.onde { padding-block: var(--esp-8); }
.onde__texto { grid-column: 1 / 6; }
.onde__texto h2 { margin-block: var(--esp-3); }
.onde__texto p { color: var(--pm-cinza); margin-bottom: var(--esp-5); max-width: 40ch; }
.onde__dados { grid-column: 7 / 13; }
.onde__dados li { display: flex; gap: var(--esp-2); padding-block: var(--esp-3); border-bottom: 1px solid var(--pm-linha); }
.onde__dados li:first-child { border-top: 1px solid var(--pm-linha); }
.onde__dados .ic { color: var(--pm-vermelho-texto); margin-top: .15rem; }
.onde__dados div { display: grid; gap: .2rem; }
.onde__dados b { font-size: var(--fs-etiqueta); letter-spacing: var(--tracking-etiqueta); text-transform: uppercase; color: var(--pm-cinza); }
.onde__dados a { justify-self: start; min-height: 1.75rem; }
.destaque-24 { color: var(--pm-vermelho-texto); font-weight: 700; }

/* ---------- 8. final e rodapé ---------- */
.final { padding-block: var(--esp-9); background: var(--pm-degrade-escudo); }
.final .grade > * { grid-column: 1 / 11; justify-self: start; }
.final h2 { font-size: var(--fs-display); margin-bottom: var(--esp-5); }
.final .botao { background: var(--pm-branco); border-color: var(--pm-branco); color: var(--pm-preto); }
.final .botao:hover { background: var(--pm-amarelo); border-color: var(--pm-amarelo); }
.rodape { background: var(--pm-preto); color: var(--pm-cinza); padding-block: var(--esp-5) var(--esp-6); font-size: var(--fs-pequeno); }
.rodape .grade { align-items: center; row-gap: var(--esp-3); }
.rodape img { grid-column: 1 / 3; width: 88px; }
.rodape p:nth-of-type(1) { grid-column: 3 / 8; }
.rodape p:nth-of-type(2) { grid-column: 8 / 13; text-align: right; }
.rodape strong { color: var(--pm-branco); }
.zap-fixo { display: none; }

/* ---------- motion na rolagem (CSS primeiro; visível por padrão) ---------- */
@keyframes revelar { from { opacity: 0; transform: translateY(2.5rem); } to { opacity: 1; transform: none; } }
@keyframes correr { from { transform: translateX(2%); } to { transform: translateX(-38%); } }
@keyframes paralaxe { from { transform: translateY(-7%) scale(1.14); } to { transform: translateY(7%) scale(1.14); } }
@keyframes abrir-foto { from { transform: scale(1.18); } to { transform: scale(1); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .revela { animation: revelar linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; }
    .frase__texto { animation: correr linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .parallax img { animation: paralaxe linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .hero__foto img { animation: abrir-foto linear both; animation-timeline: view(); animation-range: entry 0% exit 60%; }
  }
}
.js-revela .revela:not(.is-visto) { opacity: 0; transform: translateY(2.5rem); }
.js-revela .revela { transition: opacity var(--tempo-revelar) var(--curva-saida), transform var(--tempo-revelar) var(--curva-saida); }

/* ---------- responsivo ---------- */
@media (max-width: 1024px) {
  .topo nav { display: none; }
  .hero__texto { grid-column: 1 / 10; }
  .hero__selo { grid-column: 10 / 13; }
  .servicos__cabeca, .servicos__lista { grid-column: 1 / 9; }
  .servicos__foto { grid-column: 9 / 13; }
  .aval__nota, .aval__lista, .onde__texto, .onde__dados { grid-column: 1 / 13; }
  .aval__lista, .onde__dados { margin-top: var(--esp-5); }
}
@media (max-width: 760px) {
  .hero { padding-top: 6.5rem; }
  .hero__texto { grid-column: 1 / 13; grid-row: 2; }
  .hero__selo { display: none; }
  .hero h1 { font-size: clamp(2.1rem, 1rem + 4.6vw, 2.6rem); }
  .hero__acoes .botao { width: 100%; justify-content: center; }
  .hero__foto { margin-top: var(--esp-6); }
  .hero__foto .moldura { height: 16rem; clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%); }
  .hero__fatos { position: static; margin: 0 var(--margem); grid-template-columns: 1fr; }
  .hero__fatos li { border-left: 0; border-top: 1px solid var(--pm-linha); display: flex; align-items: baseline; gap: var(--esp-2); }
  .hero__fatos li:first-child { border-top: 0; }
  .hero__fatos b { margin: 0; }
  .servicos__cabeca, .servicos__lista { grid-column: 1 / 13; }
  .servicos__foto { position: static; grid-column: 1 / 13; grid-row: auto; width: 80%; margin-top: var(--esp-6); }
  .como__palco { min-height: 0; }
  .como__texto, .como__foto { grid-column: 1 / 13; }
  .como__foto { margin-top: var(--esp-5); }
  .como__barra { display: none; }
  .equipe__cabeca > * { grid-column: 1 / 13; }
  .equipe__trilho li { width: 64vw; }
  .aval__lista li:nth-child(2) { margin-left: 0; }
  .rodape img, .rodape p:nth-of-type(1), .rodape p:nth-of-type(2) { grid-column: 1 / 13; text-align: left; }
  .topo__marca span { display: none; }
  .topo .botao span { display: none; }
  .zap-fixo { display: flex; position: fixed; left: var(--esp-2); right: var(--esp-2); bottom: var(--esp-2); z-index: 60; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.5); opacity: 0; transform: translateY(150%); transition: opacity var(--tempo-ui), transform var(--tempo-ui) var(--curva-saida); }
  .zap-fixo.is-visivel { opacity: 1; transform: none; }
  .rodape { padding-bottom: 7rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ponto { animation: none; }
  .botao, .moldura img, .servicos__lista h3, .link-linha, .passo, .como__barra i { transition: none; }
}