/* Security Distribuidora · direção em DESIGN.md ("sala de monitoramento": noite, azul do escudo, cobre só na Elétrica) */
@font-face { font-family: "Chakra Petch"; font-weight: 500; font-display: swap; src: url(/assets/fonts/chakra-500.woff2) format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 600; font-display: swap; src: url(/assets/fonts/chakra-600.woff2) format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-display: swap; src: url(/assets/fonts/chakra-700.woff2) format("woff2"); }
@font-face { font-family: "Chivo"; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/chivo.woff2) format("woff2"); }
@font-face { font-family: "Chivo Mono"; font-weight: 500; font-display: swap; src: url(/assets/fonts/chivo-mono-500.woff2) format("woff2"); }

:root {
  --logo-blue: #1C439B;
  --azul: oklch(0.42 0.15 265);
  --azul-vivo: oklch(0.62 0.17 262);
  --azul-claro: oklch(0.82 0.08 260);
  --noite: oklch(0.15 0.04 265);
  --noite-2: oklch(0.2 0.05 265);
  --noite-3: oklch(0.26 0.06 265);
  --papel: oklch(0.97 0.006 260);
  --papel-2: oklch(0.93 0.01 260);
  --tinta: oklch(0.2 0.02 265);
  --tinta-2: oklch(0.42 0.02 265);
  --cobre: oklch(0.65 0.12 52);
  --rec: oklch(0.63 0.23 27);
  --f-disp: "Chakra Petch", "Avenir Next", "Segoe UI", sans-serif;
  --f-txt: "Chivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Chivo Mono", ui-monospace, Menlo, monospace;
  --s1: clamp(.5rem, .4rem + .4vw, .75rem);
  --s2: clamp(1rem, .8rem + .8vw, 1.5rem);
  --s3: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  --s4: clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
  --s5: clamp(4rem, 2.6rem + 6vw, 8.5rem);
  --t-xl: clamp(2.6rem, 1.3rem + 5.6vw, 6rem);
  --t-l: clamp(2rem, 1.3rem + 2.8vw, 3.6rem);
  --t-m: clamp(1.25rem, 1.05rem + .8vw, 1.7rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --borda: 1px solid color-mix(in oklch, currentColor 16%, transparent);
  --topo-h: 72px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--noite); color: var(--tinta); font: 400 1.0625rem/1.6 var(--f-txt); overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-disp); font-weight: 700; line-height: 1.02; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--azul-vivo); outline-offset: 3px; border-radius: 4px; }
.pular { position: absolute; left: 1rem; top: -4rem; z-index: 99; background: var(--papel); color: var(--tinta); padding: .6rem 1rem; border-radius: 6px; }
.pular:focus { top: 1rem; }
.chave { font: 600 1rem/1 var(--f-disp); color: var(--azul-vivo); display: inline-flex; align-items: center; gap: .6rem; }
.chave::before { content: ""; width: 1.8rem; height: 2px; background: currentColor; }

/* ---------- botões ---------- */
.bt { --bg: transparent; display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: .75rem 1.25rem; border-radius: 6px; font: 600 1rem/1 var(--f-disp); text-decoration: none; border: 1.5px solid currentColor; background: var(--bg); position: relative; overflow: hidden; isolation: isolate; transition: color .3s var(--ease), border-color .3s var(--ease); }
.bt svg { width: 1.2rem; height: 1.2rem; flex: none; }
.bt::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--azul-vivo); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.bt:hover::after { transform: scaleX(1); }
.bt-cheio { --bg: var(--azul); color: #fff; border-color: var(--azul); }
.bt-cheio:hover { border-color: var(--azul-vivo); }
.bt-linha:hover { color: #fff; border-color: var(--azul-vivo); }

/* ---------- topo: o escudo pendurado e o fio com os nós ---------- */
.topo { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--topo-h); padding-top: env(safe-area-inset-top, 0px); display: flex; align-items: center; gap: var(--s2); padding-inline: max(16px, 3vw); color: #fff; transition: background .4s var(--ease), box-shadow .4s var(--ease); }
/* avoid-ai-design-ignore: K3 (barra fixa sobre conteúdo que rola por baixo) */
.topo.solido { background: color-mix(in oklch, var(--noite) 88%, transparent); backdrop-filter: blur(12px) saturate(1.2); box-shadow: 0 1px 0 color-mix(in oklch, var(--azul-vivo) 30%, transparent); }
.escudo { flex: none; align-self: flex-start; width: 96px; height: 98px; background: #fff; color: var(--tinta); display: grid; place-items: center; padding: 10px 10px 22px;
  clip-path: polygon(0 0, 100% 0, 100% 64%, 50% 100%, 0 64%); filter: drop-shadow(0 8px 18px rgb(0 0 0 / .35)); transition: transform .5s var(--ease); transform-origin: top center; }
.escudo .logo { width: 100%; height: auto; }
.topo.solido .escudo { transform: scale(.78); }
.fio { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: clamp(1rem, 3vw, 2.6rem); position: relative; height: 100%; }
.fio-cabo { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, color-mix(in oklch, #fff 26%, transparent) 12%, color-mix(in oklch, #fff 26%, transparent)); overflow: hidden; }
.fio-pulso { position: absolute; top: -1px; left: 0; width: 90px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--azul-claro), #fff); filter: drop-shadow(0 0 6px var(--azul-vivo)); animation: pulso 3.6s linear infinite; }
@keyframes pulso { from { transform: translateX(-100px); } to { transform: translateX(100vw); } }
.fio a { position: relative; display: flex; align-items: center; gap: .45rem; text-decoration: none; font: 600 .95rem/1 var(--f-disp); padding: .7rem .2rem; background: transparent; }
.fio a i { width: 11px; height: 11px; border-radius: 50%; background: var(--noite); border: 2px solid color-mix(in oklch, #fff 60%, transparent); transition: background .3s, border-color .3s, box-shadow .3s; }
.fio a span { padding: .2rem .4rem; background: color-mix(in oklch, var(--noite) 70%, transparent); border-radius: 4px; }
.fio a:hover i, .fio a.ativo i { background: var(--azul-vivo); border-color: #fff; box-shadow: 0 0 0 4px color-mix(in oklch, var(--azul-vivo) 35%, transparent), 0 0 16px var(--azul-vivo); }
.borne { flex: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .55rem 1rem .55rem .85rem; text-decoration: none; font: 600 .95rem/1 var(--f-disp); color: #fff; background: #16753f; border-radius: 6px; position: relative; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); }
.borne::before, .borne::after { content: ""; position: absolute; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: rgb(255 255 255 / .45); }
.borne::before { left: 5px; } .borne::after { right: 5px; }
.borne svg { width: 1.25rem; height: 1.25rem; }

/* estrelas do logo: uma por seção, acendem conforme a pessoa desce */
.estrelas { position: fixed; right: max(12px, 1.4vw); top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: .7rem; }
.estrelas a { display: block; width: 22px; height: 22px; padding: 0; }
.estrelas svg { width: 100%; height: 100%; overflow: visible; }
.estrelas .e1 { fill: transparent; stroke: color-mix(in oklch, var(--azul-claro) 70%, transparent); stroke-width: 2.4; transition: fill .4s, stroke .4s; }
.estrelas .e2 { fill: transparent; transition: fill .4s; }
.estrelas a.passou .e1, .estrelas a.ativo .e1 { fill: var(--azul-vivo); stroke: var(--azul-vivo); }
.estrelas a.passou .e2, .estrelas a.ativo .e2 { fill: color-mix(in oklch, var(--noite) 55%, transparent); }
.estrelas a.ativo { transform: scale(1.3); filter: drop-shadow(0 0 8px var(--azul-vivo)); transition: transform .4s var(--ease); }
.pg-privacidade .estrelas, .pg-falta .estrelas { display: none; }

/* ---------- topo da página: a câmera ---------- */
.cena { position: relative; height: 170svh; background: var(--noite); color: #fff; }
.cena-palco { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: end; padding: calc(var(--topo-h) + var(--s4)) max(16px, 6vw) var(--s4); }
.cena-fundo { position: absolute; inset: -10%; pointer-events: none;
  background:
    radial-gradient(42vmax 42vmax at var(--sx, 70%) var(--sy, 45%), color-mix(in oklch, var(--azul-vivo) 30%, transparent), transparent 70%),
    linear-gradient(color-mix(in oklch, var(--azul-claro) 8%, transparent) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, color-mix(in oklch, var(--azul-claro) 8%, transparent) 1px, transparent 1px) 0 0 / 56px 56px,
    radial-gradient(120% 90% at 80% 10%, var(--noite-3), var(--noite) 60%); }
#cam3d { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s var(--ease); }
.cam-on #cam3d { opacity: 1; }
.cam-poster { position: absolute; right: 4vw; top: 50%; width: min(52vw, 640px); transform: translateY(-58%); transition: opacity .8s var(--ease); pointer-events: none; }
.cam-on .cam-poster { opacity: 0; }
/* avoid-ai-design-ignore: SD4 (o HUD imita a tela de gravação de um CFTV: é o assunto do site) */
.hud { position: absolute; inset: calc(var(--topo-h) + 18px) max(16px, 2.4vw) 18px; pointer-events: none; font: 500 .75rem/1 var(--f-mono); letter-spacing: .12em; color: color-mix(in oklch, #fff 72%, transparent); }
.hud-c { position: absolute; width: 26px; height: 26px; border: 2px solid color-mix(in oklch, #fff 55%, transparent); }
.hud-c1 { left: 0; top: 0; border-right: 0; border-bottom: 0; } .hud-c2 { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.hud-c3 { left: 0; bottom: 0; border-right: 0; border-top: 0; } .hud-c4 { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.hud-tag { position: absolute; left: 40px; top: 6px; }
.hud-rec { position: absolute; right: 40px; top: 6px; display: flex; gap: .45rem; align-items: center; }
.hud-rec b { width: 9px; height: 9px; border-radius: 50%; background: var(--rec); animation: rec 1.2s steps(2, jump-none) infinite; }
@keyframes rec { 50% { opacity: .15; } }
.hud-hora { position: absolute; right: 40px; bottom: 6px; font-variant-numeric: tabular-nums; }
.hud-geo { position: absolute; left: 40px; bottom: 6px; }
.cena-texto { position: relative; z-index: 2; max-width: 40rem; }
.cena-texto .rotulo { font: 600 1.05rem/1 var(--f-disp); color: var(--azul-claro); margin-bottom: var(--s2); }
.cena h1 { font-size: var(--t-xl); line-height: .98; }
.cena h1 .l { display: block; overflow: hidden; padding-bottom: .06em; }
.cena h1 .l > span { display: inline-block; }
.js .cena h1 .l > span { transform: translateY(105%); animation: subir 1.05s var(--ease) forwards; }
.js .cena h1 .l:nth-child(2) > span { animation-delay: .12s; } .js .cena h1 .l:nth-child(3) > span { animation-delay: .24s; } .js .cena h1 .l:nth-child(4) > span { animation-delay: .36s; }
.cena h1 .l:last-child > span { color: var(--azul-claro); }
@keyframes subir { to { transform: none; } }
.cena .lead { margin-top: var(--s2); font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); color: color-mix(in oklch, #fff 80%, transparent); max-width: 34rem; }
.acoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--s3); }
.cena .bt-linha { color: #fff; }
.rolar { position: absolute; left: 50%; bottom: 22px; width: 22px; height: 36px; border: 2px solid color-mix(in oklch, #fff 45%, transparent); border-radius: 12px; }
.rolar i { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: rolar 1.8s var(--ease) infinite; }
@keyframes rolar { 60% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- capítulos (as três linhas) ---------- */
.capitulo { position: relative; padding: var(--s5) max(16px, 6vw); }
.cap-grade { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s4); align-items: center; max-width: 1320px; margin: 0 auto; }
.cap-texto h2 { font-size: var(--t-l); margin: var(--s2) 0; }
.cap-lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); max-width: 34rem; }
.itens { list-style: none; padding: 0; margin: var(--s3) 0; display: grid; gap: 0; max-width: 30rem; }
.itens li { display: flex; align-items: center; gap: .9rem; padding: .8rem 0; border-bottom: var(--borda); font: 600 1.1rem/1.2 var(--f-disp); }
.itens li::before { content: ""; width: 10px; height: 10px; flex: none; transform: rotate(45deg); border: 2px solid var(--marca, var(--azul-vivo)); }
.cap-texto .bt { margin-top: .4rem; }

.cap-seguranca { background: var(--noite-2); color: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 50% 100%, 0 calc(100% - 5vw)); padding-bottom: calc(var(--s5) + 5vw); }
.cap-seguranca .cap-lead { color: color-mix(in oklch, #fff 78%, transparent); }
.planta { margin: 0; color: var(--azul-claro); }
.planta-svg { width: 100%; height: auto; }
.planta .cone { fill: var(--azul-vivo); fill-opacity: .1; stroke: var(--azul-vivo); stroke-opacity: .35; transition: fill-opacity .5s var(--ease), stroke-opacity .5s; }
.planta .cam circle { fill: var(--noite); stroke: var(--azul-claro); stroke-width: 3; }
.planta .cam.on .cone { fill-opacity: .34; stroke-opacity: .9; }
.planta .cam.on circle { fill: var(--rec); stroke: #fff; }
.planta .cam .cone { transform-origin: 0 0; animation: varrer 6s ease-in-out infinite alternate; }
.planta .cam[data-c="2"] .cone { animation-delay: -1.5s; } .planta .cam[data-c="3"] .cone { animation-delay: -3s; } .planta .cam[data-c="4"] .cone { animation-delay: -4.5s; }
@keyframes varrer { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.planta .trajeto { color: #fff; }
.planta figcaption { margin-top: .8rem; font-size: .875rem; line-height: 1.4; color: color-mix(in oklch, #fff 55%, transparent); }

.cap-eletrica { --marca: var(--cobre); background: var(--papel); color: var(--tinta); margin-top: -5vw; padding-top: calc(var(--s5) + 5vw); }
.cap-eletrica .chave { color: oklch(0.52 0.12 50); }
.cabo { position: relative; aspect-ratio: 1; width: min(100%, 620px); margin-inline: auto; }
.cabo::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklch, var(--cobre) 22%, transparent), transparent 65%); }
#cabo3d { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s var(--ease); }
.cabo-on #cabo3d { opacity: 1; }
.cabo-poster { position: absolute; inset: 14%; transition: opacity .6s; }
.cabo-on .cabo-poster { opacity: 0; }
.cabo-leg { position: absolute; left: 0; right: 0; bottom: 2%; display: flex; justify-content: center; gap: 1.4rem; font: 500 .875rem/1 var(--f-mono); color: var(--tinta-2); }
.cabo-leg span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: .4rem; vertical-align: -1px; border-radius: 50%; background: #22252d; }
.cabo-leg span:nth-child(2)::before { background: #1f5fd6; } .cabo-leg span:nth-child(3)::before { background: var(--cobre); }

.cap-automacao { --aut-ceu: oklch(0.3 0.08 265); --aut-casa: oklch(0.38 0.06 265); --aut-janela: oklch(0.85 0.12 85); --aut-chao: oklch(0.22 0.04 265); --aut-muro: oklch(0.46 0.03 265); --aut-ferro: oklch(0.12 0.02 265);
  background: linear-gradient(180deg, var(--noite-3), var(--noite)); color: #fff; overflow: hidden; }
.cap-automacao .cap-lead { color: color-mix(in oklch, #fff 78%, transparent); }
.cap-automacao .cap-grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.cap-automacao .cap-texto { order: 2; }
.portao { border-radius: 10px; overflow: hidden; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .7), 0 0 0 1px color-mix(in oklch, #fff 10%, transparent); }
.portao-svg { width: 100%; height: auto; }
.pt-led { animation: led 1s steps(2, jump-none) infinite; }
@keyframes led { 50% { opacity: .2; } }
.pt-feixe { animation: feixe 1.2s linear infinite; }
@keyframes feixe { to { stroke-dashoffset: -28; } }
.garen { margin: var(--s3) 0 0; max-width: 360px; transform: rotate(-2deg); background: #fff; padding: 8px 8px 0; border-radius: 4px; box-shadow: 0 24px 40px -18px rgb(0 0 0 / .6); }
.garen img { width: 100%; height: auto; border-radius: 2px; }
.garen figcaption { font: 500 .875rem/1 var(--f-mono); color: var(--tinta-2); padding: .7rem .2rem; }

/* ---------- faixa da empresa ---------- */
.faixa { position: relative; overflow: hidden; background: var(--azul); color: #fff; padding: var(--s5) max(16px, 6vw); }
.faixa::before { content: ""; position: absolute; right: -6vw; top: 50%; width: 52vw; aspect-ratio: 1; translate: 0 calc(-50% + var(--par, 0px)); background: radial-gradient(circle at 40% 40%, color-mix(in oklch, #fff 14%, transparent), transparent 60%);
  clip-path: polygon(10% 0, 90% 0, 90% 58%, 50% 100%, 10% 58%); }
.faixa-grade { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4); align-items: center; max-width: 1180px; margin: 0 auto; }
.anos { display: flex; align-items: flex-end; gap: 1rem; }
.anos-n { font: 700 clamp(6rem, 3rem + 14vw, 15rem)/.8 var(--f-disp); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.anos-t { font: 600 clamp(1.1rem, 1rem + .6vw, 1.5rem)/1.1 var(--f-disp); padding-bottom: .6rem; }
.faixa h2 { font-size: var(--t-m); margin-bottom: var(--s1); }
.faixa p { max-width: 40rem; font-size: 1.125rem; }
.faixa .cnpj { margin-top: var(--s2); font: 500 .875rem/1.4 var(--f-mono); color: color-mix(in oklch, #fff 70%, transparent); }

/* ---------- contato ---------- */
.contato { background: var(--papel); padding: var(--s5) max(16px, 6vw); }
.contato-grade { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s4); max-width: 1180px; margin: 0 auto; align-items: start; }
.contato h2 { font-size: var(--t-l); margin: var(--s2) 0 var(--s3); }
.canais { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.canal { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.1rem; border-radius: 8px; background: #fff; text-decoration: none; border: var(--borda); transition: border-color .3s, transform .3s var(--ease); }
.canal:hover { border-color: var(--azul-vivo); transform: translateX(4px); }
.canal svg { width: 1.6rem; height: 1.6rem; flex: none; color: var(--azul); }
.canal-wa svg { color: #16753f; }
.canal span { display: grid; gap: .1rem; }
.canal b { font: 600 .875rem/1.2 var(--f-disp); color: var(--tinta-2); }
.horario { margin-top: var(--s2); display: grid; gap: .2rem; }
.horario b { font: 600 .875rem/1.2 var(--f-disp); color: var(--tinta-2); margin-bottom: .3rem; }
.form { background: var(--noite); color: #fff; border-radius: 12px; padding: var(--s3); display: grid; gap: 1rem; box-shadow: 0 40px 70px -40px rgb(10 17 40 / .7); }
.campo { display: grid; gap: .4rem; }
.campo span { font: 600 .9rem/1 var(--f-disp); color: var(--azul-claro); }
.campo input, .campo textarea { width: 100%; font: inherit; color: #fff; background: var(--noite-2); border: 1.5px solid var(--noite-3); border-radius: 6px; padding: .8rem .9rem; min-height: 48px; transition: border-color .25s, box-shadow .25s; }
.campo textarea { resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--azul-vivo); box-shadow: 0 0 0 4px color-mix(in oklch, var(--azul-vivo) 25%, transparent); }
.campo.erro input, .campo.erro textarea { border-color: var(--rec); }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-nota { font-size: .875rem; color: color-mix(in oklch, #fff 65%, transparent); }
.form .bt { justify-self: start; }
.form-status { min-height: 1.4em; font-weight: 500; color: var(--azul-claro); }
.form[aria-busy="true"] .bt { opacity: .6; pointer-events: none; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- rodapé ---------- */
.rodape { background: var(--noite); color: color-mix(in oklch, #fff 78%, transparent); padding: var(--s4) max(16px, 6vw) var(--s3); font-size: .95rem; }
.rodape-grade { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: var(--s3); max-width: 1180px; margin: 0 auto; align-items: start; }
.rodape .logo { width: 140px; height: auto; color: #fff; --logo-blue: oklch(0.7 0.13 262); }
.rodape p + p { margin-top: .7rem; }
.rodape nav { display: grid; gap: .5rem; }
.rodape nav a, .rodape .redes a { text-decoration: none; }
.rodape nav a:hover { color: #fff; text-decoration: underline; }
.redes { display: flex; gap: .8rem; } .redes svg { width: 1.4rem; height: 1.4rem; }
.assinatura { max-width: 1180px; margin: var(--s3) auto 0; padding-top: var(--s2); border-top: 1px solid color-mix(in oklch, #fff 12%, transparent); font-size: .85rem; }
.assinatura a { text-decoration: none; color: color-mix(in oklch, #fff 60%, transparent); }
.assinatura a:hover { color: #fff; }

/* ---------- páginas de texto ---------- */
.texto-pagina { background: var(--papel); padding: calc(var(--topo-h) + var(--s5)) max(16px, 6vw) var(--s5); }
.texto-pagina article { max-width: 68ch; margin: 0 auto; }
.texto-pagina h1 { font-size: var(--t-l); margin: var(--s2) 0 var(--s3); }
.texto-pagina h2 { font-size: var(--t-m); margin: var(--s3) 0 var(--s1); }
.texto-pagina p { margin-bottom: 1rem; }
.pg-privacidade .topo, .pg-falta .topo { background: var(--noite); }

/* ---------- reveal ---------- */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- celular ---------- */
@media (max-width: 900px) {
  :root { --topo-h: 64px; }
  .fio a span { display: none; }
  .fio { gap: 1.1rem; }
  .fio a { padding: .9rem .35rem; }
  .estrelas { display: none; }
  .escudo { width: 78px; height: 82px; padding: 8px 8px 18px; }
  .cena { height: 130svh; }
  .cena-palco { grid-template-columns: 1fr; align-items: end; padding-bottom: calc(var(--s4) + 24px); }
  .cam-poster { width: 92vw; right: -6vw; top: 30%; }
  .hud-geo, .rolar { display: none; }
  .cap-grade, .cap-automacao .cap-grade, .contato-grade, .faixa-grade { grid-template-columns: 1fr; }
  .cap-automacao .cap-texto { order: 0; }
  .rodape-grade { grid-template-columns: 1fr; }
  .dupla { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .borne span { display: none; }
  .borne { padding: .55rem .8rem; }
  .fio a[data-no="contato"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .js .cena h1 .l > span { transform: none; }
  .cena { height: auto; }
  .cena-palco { position: relative; }
  .fio-pulso { display: none; }
}