/* 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: o banner da linha elétrica (28/10/2026) ---------- */
.cena { position: relative; background: var(--noite); color: #fff; overflow: hidden; }
.cena-palco { position: relative; min-height: min(100svh, 980px); display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); grid-template-areas: "texto vitrine" "linha linha"; align-items: center; gap: var(--s3) var(--s4);
  padding: calc(var(--topo-h) + var(--s4)) max(16px, 6vw) var(--s4); max-width: 1500px; margin: 0 auto; }
.cena-fundo { position: absolute; inset: 0 -50vw; pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 74% 46%, color-mix(in oklch, var(--azul) 70%, transparent), transparent 70%),
    radial-gradient(22vmax 16vmax at 80% 70%, color-mix(in oklch, var(--cobre) 18%, transparent), transparent 70%),
    linear-gradient(color-mix(in oklch, var(--azul-claro) 6%, transparent) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, color-mix(in oklch, var(--azul-claro) 6%, transparent) 1px, transparent 1px) 0 0 / 56px 56px,
    radial-gradient(120% 90% at 80% 10%, var(--noite-3), var(--noite) 60%); }
.cena-texto { grid-area: texto; position: relative; z-index: 2; max-width: 40rem; }
.cena-texto .rotulo { font: 600 1.05rem/1.3 var(--f-disp); color: var(--azul-claro); margin-bottom: var(--s2); }
.cena h1 { font-size: min(var(--t-xl), 4.6rem); 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: nowrap; align-items: center; gap: .8rem; margin-top: var(--s3); }
.acoes .bt { white-space: nowrap; }
.cena .bt-linha { color: #fff; }
/* a foto da linha (do banner da loja) entra apagando nas bordas, sem caixa */
.vitrine { grid-area: vitrine; position: relative; z-index: 1; margin: 0; }
.vitrine img { width: 100%; height: auto; -webkit-mask-image: radial-gradient(ellipse 64% 64% at 52% 52%, #000 48%, transparent 100%); mask-image: radial-gradient(ellipse 64% 64% at 52% 52%, #000 48%, transparent 100%); }
.js .vitrine img { opacity: 0; transform: translateY(24px) scale(.97); animation: vitrine 1.2s .25s var(--ease) forwards; }
@keyframes vitrine { to { opacity: 1; transform: none; } }
.selo { position: absolute; left: 4%; top: 6%; display: grid; padding: .7rem 1rem .75rem 2.6rem; border-radius: 6px; background: var(--azul); font: 600 1rem/1.15 var(--f-disp); color: #fff; box-shadow: 0 18px 40px -16px rgb(0 0 0 / .6);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.selo b { font-size: 1.35rem; color: oklch(0.88 0.15 92); }
.selo::before { content: ""; position: absolute; left: .85rem; top: .85rem; width: 1.15rem; height: 1.15rem; background: oklch(0.88 0.15 92); clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 98%, 50% 76%, 20% 98%, 30% 60%, 0 38%, 38% 36%); }
/* os itens da linha num fio, como os nós do menu */
.linha { grid-area: linha; position: relative; z-index: 2; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.linha li { position: relative; display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border-radius: 8px; background: color-mix(in oklch, var(--noite-2) 85%, transparent); border: 1px solid color-mix(in oklch, var(--azul-claro) 18%, transparent); font: 600 1rem/1.15 var(--f-disp); }
.linha li span { text-wrap: balance; }
.linha li svg { width: 2rem; height: 2rem; flex: none; color: var(--azul-claro); }
.linha .linha-fio { position: absolute; left: 0; right: 0; top: -12px; height: 2px; padding: 0; border: 0; border-radius: 0; background: color-mix(in oklch, #fff 14%, transparent); overflow: hidden; }
.js .linha li:not(.linha-fio) { opacity: 0; transform: translateY(14px); animation: vitrine .8s var(--ease) forwards; }
.js .linha li:nth-child(2) { animation-delay: .5s; } .js .linha li:nth-child(3) { animation-delay: .58s; } .js .linha li:nth-child(4) { animation-delay: .66s; }
.js .linha li:nth-child(5) { animation-delay: .74s; } .js .linha li:nth-child(6) { animation-delay: .82s; } .js .linha li:nth-child(7) { animation-delay: .9s; }

/* ---------- 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; }

/* Elétrica vem logo depois do topo: a ponta em V é dela e fica por cima da faixa da empresa */
.cap-eletrica { --marca: var(--cobre); background: var(--papel); color: var(--tinta); z-index: 1; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 50% 100%, 0 calc(100% - 5vw)); padding-bottom: calc(var(--s5) + 5vw); }
.cap-eletrica .chave { color: oklch(0.52 0.12 50); }
.cap-foto { margin: 0; width: min(100%, 620px); margin-inline: auto; border-radius: 6px; overflow: hidden; box-shadow: 0 24px 48px -24px color-mix(in oklch, var(--tinta) 45%, transparent); }
.cap-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- segurança sob encomenda (segundo plano) ---------- */
.encomenda { max-width: 1320px; margin: var(--s4) auto 0; }
.encomenda-grade { display: flex; align-items: center; gap: 1.2rem; padding: 1.1rem 1.4rem; border: 1px solid color-mix(in oklch, var(--tinta) 14%, transparent); border-radius: 6px; }
.encomenda-ic { flex: none; width: 36px; height: 36px; color: var(--azul); }
.encomenda-grade > div { flex: 1; min-width: 0; }
.encomenda h2 { font-size: 1.125rem; margin: 0; }
.encomenda p { margin: .2rem 0 0; color: var(--tinta-2); }
.encomenda .bt { flex: none; white-space: nowrap; }
@media (max-width: 560px) { .encomenda-grade { flex-wrap: wrap; } .encomenda .bt { margin-left: calc(36px + 1.2rem); } }
/* ---------- faixa da empresa ---------- */
.faixa { position: relative; overflow: hidden; background: var(--azul); color: #fff; padding: calc(var(--s5) + 5vw) max(16px, 6vw) var(--s5); margin-top: -5vw; }
.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; }
.cf-turnstile { min-height: 65px; }
.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; }
.dms-pref-wrap { max-width: 1180px; margin: var(--s2) auto 0; }
.dms-pref { border: 0; padding: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.dms-pref:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 4px; }

/* ---------- 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-palco { min-height: 0; grid-template-columns: 1fr; grid-template-areas: "texto" "vitrine" "linha"; gap: var(--s2); }
  .linha { grid-template-columns: 1fr 1fr; }
  .cap-grade, .contato-grade, .faixa-grade { grid-template-columns: 1fr; }
  .rodape-grade { grid-template-columns: 1fr; }
  .dupla { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  /* botão não empilha: o secundário vira link de texto ao lado do principal */
  .acoes { gap: 1rem; }
  .acoes .bt-linha { border: 0; padding-inline: 0; text-decoration: underline; text-underline-offset: 4px; }
  .acoes .bt-linha::after { content: none; }
  .selo { font-size: .85rem; padding: .5rem .75rem .55rem 2.1rem; }
  .selo b { font-size: 1.1rem; }
  .selo::before { left: .65rem; top: .6rem; width: .95rem; height: .95rem; }
  .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; }
  .fio-pulso { display: none; }
}