/* OperVyn, site no modelo de portfólio escuro */
:root {
  --fundo: #0A0A16;
  --fundo-2: #0E0F21;
  --cartao: #121329;
  --linha: rgba(255, 255, 255, .08);
  --linha-2: rgba(255, 255, 255, .14);
  --texto: #EDEDF5;
  --suave: #9C9CB8;
  --apagado: #6B6B88;
  --cor: #8B7CFF;
  --cor-forte: #6C4BFF;
  --raio: 14px;
  --vao: 24px;
  --t: 'Inter Tight', system-ui, sans-serif;
  --c: 'Inter', system-ui, sans-serif;
  --m: 'Geist Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { background: var(--fundo); color: var(--texto); font: 400 16px/1.6 var(--c); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { font-family: var(--t); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; text-wrap: balance; }
p { text-wrap: pretty; }

.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }

.rotulo { font: 500 12px/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--cor); display: flex; align-items: center; gap: 12px; }

/* botões */
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 10px; font: 600 15px/1 var(--c); white-space: nowrap; transition: background .25s, border-color .25s, transform .25s, box-shadow .25s; }
.bt i { font-style: normal; font-size: 15px; transition: transform .25s; }
.bt:hover i { transform: translate(2px, -2px); }
.bt-cheio { background: var(--cor-forte); color: #fff; box-shadow: 0 10px 30px -10px rgba(108, 75, 255, .7); }
.bt-cheio:hover { background: #7A5CFF; box-shadow: 0 14px 36px -10px rgba(108, 75, 255, .9); }
.bt-linha { border: 1px solid var(--linha-2); color: var(--texto); }
.bt-linha:hover { border-color: var(--cor); }
.bt-p { height: 42px; padding: 0 18px; font-size: 14px; }
.bt-texto { height: auto; padding: 0 0 4px; border-radius: 0; color: var(--texto); border-bottom: 1px solid var(--cor); transition: color .2s; }
.bt-texto:hover { color: var(--cor); }
.capa .bt { border-radius: 999px; }
.so-cel { display: none; }

/* topo em barra inteira, com filete embaixo e o conteúdo alinhado ao resto do site */
.topo { position: fixed; inset: 0 0 auto; z-index: 50; }
.topo-in { position: relative; height: 72px; padding: 0 max(24px, calc((100% - 1200px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--linha); background: rgba(10, 10, 22, .4); backdrop-filter: blur(16px); transition: background .3s; }
.topo.rolou .topo-in { background: rgba(10, 10, 22, .92); }
.marca { display: flex; align-items: center; gap: 10px; font: 600 21px/1 var(--t); letter-spacing: -.035em; }
.marca svg { width: 30px; height: 30px; }
.menu { display: flex; gap: 36px; }
.menu a { position: relative; font: 500 12px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--suave); padding: 6px 0; transition: color .2s; }
.menu a:hover, .menu a.on { color: var(--texto); }
.menu a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -24px; height: 2px; border-radius: 2px; background: var(--cor); }
.menu-abre { display: none; width: 42px; height: 42px; border: 1px solid var(--linha-2); border-radius: 10px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.menu-abre i { width: 18px; height: 1.5px; background: var(--texto); transition: transform .25s; }
.menu-abre[aria-expanded="true"] i:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-abre[aria-expanded="true"] i:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* capa com carrossel curvo */
.capa { position: relative; padding: 136px 0 72px; border-bottom: 1px solid var(--linha); overflow: hidden; isolation: isolate; }
.brilho { position: absolute; z-index: -1; width: 900px; height: 900px; left: -320px; top: -480px; border-radius: 50%; background: radial-gradient(circle, rgba(139, 124, 255, .95) 0%, rgba(108, 75, 255, .55) 30%, rgba(108, 75, 255, 0) 68%); filter: blur(30px); animation: respira 9s ease-in-out infinite alternate; }
.brilho-2 { left: auto; right: -420px; top: -300px; width: 700px; height: 700px; opacity: .35; animation-delay: -4s; }
@keyframes respira { to { transform: translate(40px, 30px) scale(1.06); } }
.luzes { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.luzes i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .5; animation: cintila 3.6s ease-in-out infinite; }
@keyframes cintila { 50% { opacity: .08; } }
/* o A da marca parado no fundo da capa, o tamanho acompanha a largura e a altura da tela */
.a-fundo { --a: min(110.5vw, 102.4vh, 1060px); position: absolute; z-index: -1; top: calc(86px - var(--a) * .1194); left: 50%; width: var(--a); height: var(--a); margin-left: calc(var(--a) / -2); max-width: none; opacity: .3; pointer-events: none; }
@media (max-width: 700px) { .a-fundo { opacity: .24; } }
/* a base do A some no fundo atrás do carrossel, com degradê porque máscara some no Opera GX */
.capa::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 400px; background: linear-gradient(180deg, rgba(10, 10, 22, 0), var(--fundo) 72%); pointer-events: none; }

.capa-txt { width: min(1200px, 100% - 48px); margin: 0 auto; text-align: center; }
.selo { display: inline-flex; align-items: center; gap: 16px; font: 500 13px/1 var(--c); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: var(--texto); }
.selo i { width: 1px; height: 14px; background: var(--cor); }
.capa h1 { font-size: clamp(38px, 5.2vw, 72px); letter-spacing: -.035em; line-height: 1.04; margin: 26px 0 20px; }
.capa h1 span { display: block; }
.capa h1 em { font-style: normal; color: var(--cor); background: linear-gradient(105deg, var(--cor) 0 44%, #EDE9FF 50%, var(--cor) 56% 100%); background-size: 300% 100%; background-position: 90% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: reflexo 7s ease-in-out infinite; }
@keyframes reflexo { 0%, 55% { background-position: 90% 0; } 85%, 100% { background-position: 10% 0; } }
.capa-sub { max-width: 620px; margin: 0 auto; color: #B9B9D0; font-size: 18px; }
/* entrada da capa, um elemento depois do outro */
.capa-txt > * { animation: sobe .7s cubic-bezier(.2, .7, .2, 1) both; }
.capa-txt > :nth-child(2) { animation-delay: .08s; }
.capa-txt > :nth-child(3) { animation-delay: .16s; }
.capa-txt > :nth-child(4) { animation-delay: .24s; }
.palco { animation: surge .9s .3s ease-out both; }
@keyframes sobe { from { opacity: 0; transform: translateY(14px); } }
@keyframes surge { from { opacity: 0; } }
.capa-ctas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--vao); width: calc(50% - var(--vao) / 2); margin: 36px auto 0; }
.capa .bt-cheio { box-shadow: 0 10px 30px -10px rgba(108, 75, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .22); }
.capa .bt-linha { border-color: rgba(139, 124, 255, .45); background: rgba(108, 75, 255, .06); }
.capa .bt-linha:hover { border-color: var(--cor); }

/* o cartão é maior no layout do que na tela (--peca) e o main.js reduz com scale, assim o navegador nunca amplia uma camada pronta e a tela não borra */
.palco { --peca: 400px; position: relative; height: 440px; margin-top: 30px; perspective: 1400px; }
.peca { position: absolute; left: 50%; top: 50%; width: 580px; aspect-ratio: 1280 / 800; margin: -181px 0 0 -290px; border-radius: 23px; overflow: hidden; background: var(--cartao); border: 1.5px solid var(--linha-2); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); will-change: transform; transition: border-color .25s; }
@media (max-width: 1500px) { .palco { --peca: 340px; height: 375px; } }
.peca:hover { border-color: var(--cor); }
.peca canvas { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; background-size: cover !important; background-position: top !important; }
/* o nome da tela fica solto sobre um escurecimento no pé do cartão, como legenda de vídeo */
.peca::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, rgba(10, 10, 22, 0), rgba(10, 10, 22, .92)); pointer-events: none; }
.peca span { position: absolute; z-index: 1; left: 24px; bottom: 20px; font: 600 22px/1.2 var(--t); letter-spacing: -.01em; color: #fff; }


/* seções */
.sec { padding: 110px 0; border-bottom: 1px solid var(--linha); }
.sec h2 { font-size: clamp(30px, 3.3vw, 42px); margin-top: 18px; }
.cab { margin-bottom: 56px; }

/* sobre */
.sobre { background: var(--fundo-2); }
.sobre-in { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; }
.sobre-txt h2 span { color: var(--suave); }
.sobre-txt > p:not(.rotulo) { color: var(--suave); margin: 22px 0 32px; max-width: 500px; }
.numeros { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao); }
.numeros li { padding: 34px 32px; display: flex; flex-direction: column; gap: 10px; }
.numeros li:nth-child(odd) { border-right: 1px solid var(--linha); }
.numeros li:nth-child(-n+2) { border-bottom: 1px solid var(--linha); }
.numeros b { font: 700 40px/1 var(--t); letter-spacing: -.03em; }
.numeros span { color: var(--suave); font-size: 14.5px; line-height: 1.5; max-width: 220px; }

.etapas { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 80px; border-top: 1px solid var(--linha); }
.etapas li { padding: 30px 28px 0 0; display: flex; flex-direction: column; gap: 8px; position: relative; }
.etapas li::before { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 2px; background: var(--cor); }
.etapas i { font: 500 12px/1 var(--m); font-style: normal; color: var(--cor); letter-spacing: .1em; }
.etapas b { font: 600 18px/1.3 var(--t); margin-top: 8px; }
.etapas span { color: var(--suave); font-size: 14.5px; line-height: 1.55; }

/* o que substituímos */
.funcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 56px; }
.funcoes li { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 16px; align-items: center; }
.funcoes i { font: 500 12px/1 var(--m); font-style: normal; color: var(--cor); width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--linha-2); border-radius: 9px; grid-row: span 1; }
.funcoes b { display: block; font: 600 15.5px/1.3 var(--t); }
.funcoes div span { display: block; font-size: 12.5px; color: var(--apagado); margin-top: 2px; }
.funcoes em { font: 500 12.5px/1 var(--m); font-style: normal; color: var(--suave); align-self: start; padding-top: 4px; }
.funcoes s { grid-column: 1 / -1; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .07); margin-top: 12px; position: relative; overflow: hidden; }
.funcoes s::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cor-forte), var(--cor)); transform-origin: left; transform: scaleX(0); transition: transform 1.3s cubic-bezier(.2, .7, .2, 1) .15s; }
.funcoes .vis s::after { transform: scaleX(var(--v)); }
.conta { display: grid; grid-template-columns: 1fr 1fr; margin-top: 64px; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.conta > div { padding: 30px 34px; display: flex; flex-direction: column; gap: 6px; }
.conta small { font: 500 11px/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); }
.conta b { font: 700 28px/1.15 var(--t); letter-spacing: -.02em; margin-top: 6px; }
.conta span { color: var(--suave); font-size: 14.5px; }
.conta .nosso { background: rgba(108, 75, 255, .1); border-left: 1px solid var(--linha); }
.conta .nosso small, .conta .nosso b { color: var(--cor); }
.nota { margin-top: 18px; font-size: 12.5px; color: var(--apagado); text-align: center; }

/* casos */
.casos { background: var(--fundo-2); }
/* dois cartões por vez: em três, a tela fica tão pequena que o texto dela vira borrão */
.trilho { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 2); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; outline: none; }
.trilho::-webkit-scrollbar { display: none; }
.caso { scroll-snap-align: start; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao); overflow: hidden; display: flex; flex-direction: column; transition: border-color .3s, transform .3s; }
.caso:hover { border-color: rgba(139, 124, 255, .45); transform: translateY(-3px); }
.caso-tela { position: relative; aspect-ratio: 1280 / 762; background: #0B0B18; border-bottom: 1px solid var(--linha); }
.caso-tela canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.caso-tela i { position: absolute; left: 16px; top: 14px; font: 500 12px/1 var(--m); font-style: normal; color: #fff; padding: 7px 9px; border-radius: 7px; background: rgba(10, 10, 22, .78); backdrop-filter: blur(6px); }
.caso-txt { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.caso h3 { font-size: 19px; }
.caso-txt > p:not(.caso-eco) { color: var(--suave); font-size: 14.5px; line-height: 1.55; margin: 10px 0 22px; }
.caso { cursor: pointer; }
.caso-eco { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--linha); font-size: 13.5px; color: var(--suave); }
.caso-abre { display: inline-flex; align-items: center; gap: 8px; font: 600 13.5px/1 var(--c); color: var(--texto); white-space: nowrap; }
.caso-eco b { white-space: nowrap; }
@media (max-width: 900px) { .caso-eco { flex-direction: column; align-items: flex-start; gap: 12px; } }
.caso-abre i { font-style: normal; color: var(--cor); transition: transform .25s; }
.caso:hover .caso-abre i { transform: translateX(3px); }
.caso-eco b { color: var(--cor); font-weight: 600; }
.trilho-ctl { display: flex; align-items: center; gap: 22px; margin-top: 36px; }
.seta { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--linha-2); transition: border-color .2s, opacity .2s; }
.seta:hover { border-color: var(--cor); }
.seta:disabled { opacity: .3; cursor: default; border-color: var(--linha-2); }
.pontos-nav { display: flex; gap: 8px; }
.pontos-nav button { width: 8px; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .2); transition: width .3s, background .3s; }
.pontos-nav button.on { width: 24px; background: var(--cor); }
.nota-c { margin-top: 22px; text-align: left; }

/* app nas lojas */
.lojas { overflow: hidden; }
.lojas-in { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; }
.lojas-txt h2 span { color: var(--cor); }
.lojas-txt > p:not(.rotulo) { color: var(--suave); margin: 22px 0 30px; max-width: 480px; }
.publica { display: flex; flex-direction: column; border-top: 1px solid var(--linha); max-width: 480px; }
.publica li { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linha); font-size: 15px; color: var(--texto); text-wrap: balance; }
.publica i { font: 500 12px/1 var(--m); font-style: normal; color: var(--cor); letter-spacing: .1em; }
.selos-loja { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: fit-content; margin-top: 34px; }
.loja { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px; border: 1px solid var(--linha-2); border-radius: 12px; background: var(--cartao); font: 600 16px/1.1 var(--t); white-space: nowrap; }
.loja svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
.loja small { display: block; font: 500 10px/1 var(--m); letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); margin-bottom: 4px; }

/* o palco também respeita a altura da janela: celular e legenda sempre cabem juntos (notebook baixo, celular deitado) */
.lojas-vis { position: relative; width: 100%; max-width: max(240px, calc((100vh - 200px) / 1.02)); margin-inline: auto; aspect-ratio: 1 / 1.02; display: grid; place-items: center; }
.lojas-txt, .lojas-dir { min-width: 0; }
.anel { position: absolute; width: 84%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--linha-2); }
.anel-arco { border: 0; background: conic-gradient(from 90deg, var(--cor-forte) 0 42%, transparent 42%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px)); mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px)); filter: drop-shadow(0 0 18px rgba(108, 75, 255, .55)); animation: gira 28s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
/* celulares em carrossel: o da frente inclinado, o próximo atrás à direita e o anterior atrás à esquerda */
.lojas-dir { display: flex; flex-direction: column; align-items: center; }
/* o celular da frente tem 44% do palco; com os de trás abertos 30% para cada lado, o conjunto cabe no palco em qualquer largura */
/* a moldura tem a proporção exata da tela gravada (390x844, com barra de status e indicador de início),
   cantos e botões laterais em porcentagem para escalar junto, e uma inclinação leve de iPhone */
.fones { position: relative; width: 44%; aspect-ratio: 410 / 864; animation: boia 7s ease-in-out infinite; }
.fone { --giro: perspective(1600px) rotateX(7deg) rotateY(-11deg) rotateZ(3deg); position: absolute; inset: 0; display: block; padding: 0; border-radius: 14% / 6.6%; background: linear-gradient(145deg, #2A2B52, #111226 45%, #1B1C3A); border: 0; box-shadow: inset 0 0 0 1.5px #343665, inset 0 0 0 3px #0B0B18, 40px 60px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .05); transform: var(--giro); transition: transform .9s cubic-bezier(.2, .7, .2, 1), filter .9s, opacity .9s; }
.fone::before, .fone::after { content: ""; position: absolute; width: 1.1%; border-radius: 4px; background: #2A2B52; }
.fone::before { left: -1%; top: 14%; height: 16%; background: linear-gradient(#2A2B52 0 22%, transparent 22% 38%, #2A2B52 38% 100%); } /* silencioso e volume */
.fone::after { right: -1%; top: 25%; height: 12.5%; }                                                                                    /* botão lateral */
.fone[data-pos="frente"] { z-index: 3; cursor: default; }
.fone[data-pos="dir"] { z-index: 2; transform: translate(30%, -5%) var(--giro) scale(.72); filter: brightness(.42) saturate(.6); cursor: pointer; }
.fone[data-pos="esq"] { z-index: 1; transform: translate(-30%, 3%) var(--giro) scale(.66); filter: brightness(.3) saturate(.5); cursor: pointer; }
.fone[data-pos="fora"] { opacity: 0; transform: var(--giro) scale(.5); pointer-events: none; }
.fone[data-pos="dir"]:hover, .fone[data-pos="esq"]:hover { filter: brightness(.68) saturate(.85); }
.fone:focus-visible { outline: 2px solid var(--cor); outline-offset: 6px; }
/* a tela é absoluta porque altura em porcentagem não funciona dentro de um button; a borda tem 2,4% da largura em volta */
.fone-tela { position: absolute; inset: 1.15% 2.4%; display: block; border-radius: 12.3% / 5.7%; overflow: hidden; background: #F3F5F9; }
.fone-tela canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; background-size: cover !important; background-position: top !important; }
/* o vídeo de verdade fica escondido e cada quadro é desenhado num canvas, assim o navegador não põe botões em cima */
video.fonte { position: absolute !important; left: 0; top: 0; width: 2px !important; height: 2px !important; opacity: 0; pointer-events: none; }
@keyframes boia { 50% { translate: 0 -12px; } }
/* capítulos: os três apps lado a lado; o filete do ativo se preenche com o andamento do vídeo (--p) */
.bola { z-index: 4; position: absolute; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--cartao); border: 1px solid var(--linha-2); box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .9); animation: boia 6s ease-in-out infinite; }
.bola svg { width: 28px; height: 28px; fill: var(--texto); }
.bola-play { left: 2%; top: 12%; animation-delay: -2s; }
.bola-apple { right: 2%; bottom: 14%; animation-delay: -4s; }
.bola-apple svg { translate: 0 -1px; }

/* rodapé, carta dos sócios no grid: foto nas colunas 1 a 3, foto nas colunas 4 a 6 e texto a partir da 7 */
.carta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); padding: 110px 0; border-bottom: 1px solid var(--linha); }
.retratos { grid-column: 1 / 7; display: grid; grid-template-columns: 1fr 1fr; gap: var(--vao); }
.retratos figure { position: relative; overflow: hidden; border-radius: var(--raio); }
.retratos img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; object-position: 50% 15%; }
.retratos figure::after { content: ""; position: absolute; inset: 62% 0 0; background: linear-gradient(180deg, rgba(10, 10, 22, 0), rgba(10, 10, 22, .9)); }
.retratos figcaption { position: absolute; z-index: 1; left: 24px; bottom: 20px; font: 600 18px/1.2 var(--t); color: #fff; }
.carta-txt { grid-column: 7 / -1; display: flex; flex-direction: column; justify-content: center; }
.aspas { display: block; height: 44px; font: 700 84px/.6 var(--t); color: var(--cor); }
.carta-txt blockquote { font: 600 clamp(28px, 2.9vw, 42px)/1.16 var(--t); letter-spacing: -.024em; text-wrap: balance; }
.assina { margin-top: 20px; font-size: 15px; color: var(--suave); }
.convite { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--linha); }
.convite p { font: 600 18px/1.3 var(--t); letter-spacing: -.012em; }
.convite .bt { flex: none; min-width: 260px; }
.colunas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--vao); padding-top: 72px; }
.colunas small { display: block; margin-bottom: 16px; font: 500 11px/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); }
.colunas nav a, .col-fale a, .col-fale span { display: block; padding: 5px 0; font-size: 15px; color: var(--suave); transition: color .2s; }
.colunas nav a:hover, .col-fale a:hover { color: var(--cor); }
.col-marca p { max-width: 240px; margin-top: 14px; font-size: 14.5px; color: var(--apagado); }
.rodape-base { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding: 22px 0 28px; border-top: 1px solid var(--linha); font-size: 13px; color: var(--apagado); }
@media (max-width: 1120px) { .convite { flex-direction: column; align-items: flex-start; gap: 18px; } }
@media (max-width: 900px) {
  .carta { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding: 80px 0; }
  .retratos, .carta-txt { grid-column: auto; }
  .retratos img { min-height: 320px; }
  .convite { align-items: stretch; }
  .colunas { grid-template-columns: 1fr 1fr; gap: 36px 24px; padding-top: 48px; }
  .col-marca { grid-column: 1 / -1; }
  .col-fale { order: 3; grid-column: 1 / -1; }
  .rodape-base { flex-direction: column; gap: 4px; margin-top: 40px; }
}
@media (max-width: 600px) { .retratos { gap: 12px; } .retratos img { min-height: 240px; } .retratos figcaption { left: 12px; bottom: 12px; font-size: 16px; } }
mark.pendente { background: #FFE266; color: #11111C; padding: 1px 6px; border-radius: 2px; font-weight: 600; }

/* entrada ao rolar */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.rv.vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .brilho, .luzes i, .anel-arco, .fones, .bola, .capa h1 em, .capa-txt > *, .palco { animation: none; } .fone { transition: none; } }

/* notebook */
@media (max-width: 1100px) {
  .menu { gap: 24px; }
  .funcoes { gap: 30px 36px; }
}

/* tablet */
@media (max-width: 900px) {
  .menu { position: absolute; top: calc(100% + 8px); left: 12px; right: 12px; flex-direction: column; gap: 0; padding: 6px 22px 8px; border: 1px solid var(--linha-2); border-radius: 14px; background: var(--fundo); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
  .menu.aberto { opacity: 1; transform: none; pointer-events: auto; }
  .menu a { padding: 14px 0; font: 400 16px/1.4 var(--c); letter-spacing: 0; text-transform: none; border-bottom: 1px solid var(--linha); }
  .menu a:last-child { border-bottom: 0; }
  .menu a.on::after { display: none; }
  .menu-abre { display: flex; }
  html { scroll-padding-top: 64px; }
  .topo-in { height: 64px; gap: 8px; padding: 0 24px; }
  .topo-in > .bt-p { margin-left: auto; }
  .sobre-in { grid-template-columns: 1fr; gap: 48px; }
  .etapas { grid-template-columns: 1fr 1fr; gap: 0 28px; }
  .etapas li:nth-child(n+3) { margin-top: 30px; border-top: 1px solid var(--linha); }
  .funcoes { grid-template-columns: 1fr 1fr; }
  .lojas-in { grid-template-columns: 1fr; gap: 40px; }
  .lojas-vis { max-width: min(520px, max(240px, calc((100vh - 200px) / 1.02))); }
}

/* celular */
@media (max-width: 600px) {
  .wrap { width: calc(100% - 32px); }
  .sec { padding: 80px 0; }
  .so-pc { display: none; }
  .so-cel { display: inline; }
  .capa { padding: 120px 0 64px; }
  .capa-sub { font-size: 16.5px; }
  .capa-txt { width: calc(100% - 32px); }
  .capa-ctas { grid-auto-flow: row; width: 100%; gap: 14px; }
  /* sem perspectiva: no celular ela faz o navegador compor o cartão em baixa resolução e o texto da tela borra */
  .palco { --peca: 240px; height: 290px; margin-top: 40px; perspective: none; }
  .peca { width: 348px; margin: -109px 0 0 -174px; }
  .peca span { left: 12px; bottom: 10px; font-size: 13px; }
  .numeros li { padding: 26px 20px; }
  .numeros b { font-size: 32px; }
  .etapas { grid-template-columns: 1fr; }
  .etapas li:nth-child(n+2) { margin-top: 26px; border-top: 1px solid var(--linha); }
  .funcoes { grid-template-columns: 1fr; gap: 26px; }
  .conta { grid-template-columns: 1fr; }
  .conta .nosso { border-left: 0; border-top: 1px solid var(--linha); }
  .conta > div { padding: 26px 22px; }
  .trilho { grid-auto-columns: 86%; gap: 16px; }
  .selos-loja { width: 100%; }
  .loja { padding: 0 14px; gap: 10px; font-size: 14.5px; min-width: 0; }
  .loja svg { width: 20px; height: 20px; }
  .fones { width: 46%; }
  .fone-tela { border-radius: 28px; }
  .bola { width: 54px; height: 54px; }
  .bola svg { width: 22px; height: 22px; }
  .bola-play { left: 0; top: 10%; }
  .bola-apple { right: 0; bottom: 12%; }
}

/* celular muito estreito: os selos das lojas um embaixo do outro */
@media (max-width: 340px) {
  .selos-loja { grid-template-columns: 1fr; }
}

/* problema, as seis frases em cartões de vidro, aspas grande em roxo */
.frases { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.frases li { display: grid; grid-template-columns: auto 1fr; gap: 0 24px; padding: 34px 24px 30px; border: 1px solid var(--linha); border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)); transition: border-color .3s; }
.frases li:hover { border-color: var(--linha-2); }
.frases q { grid-row: span 2; font: 700 72px/.5 var(--t); color: var(--cor); quotes: none; transform: translateY(22px); }
.frases q::before { content: "“"; }
.frases p { font: 600 23px/1.3 var(--t); letter-spacing: -.02em; }
.frases span { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 14px; color: var(--suave); }
.frases span i { font: 500 11px/1 var(--m); letter-spacing: .14em; color: var(--apagado); font-style: normal; }

/* dúvidas */
/* cada dúvida é uma linha do grid: número na coluna 1, pergunta na 2 e resposta sempre à vista a partir da 7 */
.duvidas-in { border-top: 1px solid var(--linha); }
.duvidas-in li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); align-items: baseline; padding: 34px 0; border-bottom: 1px solid var(--linha); }
.inteira { white-space: nowrap; }
.duvidas-in i { font: 500 12px/1 var(--m); letter-spacing: .1em; color: var(--cor); }
.duvidas-in h3 { grid-column: 2 / 7; font: 600 24px/1.2 var(--t); letter-spacing: -.02em; text-wrap: balance; }
.duvidas-in p { grid-column: 7 / -1; font-size: 16px; color: var(--suave); text-wrap: balance; }
@media (max-width: 900px) {
  .duvidas-in li { grid-template-columns: 34px minmax(0, 1fr); column-gap: 0; row-gap: 10px; padding: 26px 0; }
  .duvidas-in h3 { grid-column: 2; font-size: 20px; }
  .duvidas-in p { grid-column: 2; font-size: 15px; }
}
@media (max-width: 900px) { .frases { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 600px) { .frases li { padding: 24px 24px 22px; gap: 0 16px; border-radius: 14px; } .frases q { font-size: 52px; transform: translateY(16px); } .frases p { font-size: 18px; } .frases span { margin-top: 14px; font-size: 13px; } }

/* contato, texto à esquerda e formulário de proposta em cartão, com campos preenchidos sem borda */
.contato-in { display: grid; grid-template-columns: 1fr 1.15fr; gap: 72px; align-items: start; }
.contato-sub { color: var(--suave); font-size: 18px; margin-top: 20px; max-width: 460px; }
.passos { margin-top: 40px; border-top: 1px solid var(--linha); max-width: 460px; }
.passos li { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.passos i { font: 500 12px/1 var(--m); font-style: normal; color: var(--cor); letter-spacing: .1em; }
.passos b { display: block; font: 600 16px/1.3 var(--t); }
.passos span { display: block; color: var(--suave); font-size: 14.5px; margin-top: 2px; }
.contato-alt { color: var(--suave); font-size: 15px; margin: 32px 0 14px; }

.proposta { padding: 28px 24px; border: 1px solid var(--linha-2); border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018)), var(--fundo-2); }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px var(--vao); }
.campos label { display: flex; flex-direction: column; gap: 8px; min-width: 0; cursor: text; }
.campos label > span { display: flex; align-items: baseline; gap: 8px; font: 500 13.5px/1.3 var(--c); color: var(--texto); }
/* asterisco nos obrigatórios, o opcional já diz que é opcional */
.campos label:not(:has(small)) > span::after { content: "*"; color: var(--cor); }
.campos small { font: 500 10px/1 var(--m); letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); }
.campos .inteiro { grid-column: 1 / -1; }
.campos input, .campos textarea { width: 100%; padding: 13px 16px; border: 1px solid transparent; border-radius: 8px; outline: none; background: rgba(255, 255, 255, .055); color: var(--texto); font: 400 16px/1.5 var(--c); transition: border-color .2s, background .2s; }
.campos input:focus, .campos textarea:focus { border-color: var(--cor); background: rgba(139, 124, 255, .08); }
.campos input::placeholder, .campos textarea::placeholder { color: var(--apagado); opacity: 1; }
.campos input:-webkit-autofill { -webkit-text-fill-color: var(--texto); caret-color: var(--texto); transition: background-color 9999s; }
.campos textarea { display: block; min-height: 100px; max-height: 240px; resize: none; field-sizing: content; }
/* fora da tela em vez de display none, senão o robô ignora o campo */
.campos .isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.proposta-pe { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 26px; }
#form-proposta .bt { flex: none; box-shadow: none; }
#form-proposta .bt:disabled { opacity: .6; cursor: default; }
.proposta-nota { font-size: 13px; line-height: 1.5; color: var(--apagado); }
.proposta-nota a { color: var(--suave); text-decoration: underline; text-underline-offset: 2px; }
.proposta-nota a:hover { color: var(--cor); }
.proposta-erro { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--cor); border-radius: 10px; font-size: 14px; text-align: center; }
.proposta-ok { outline: none; padding: 4px 0; }
.proposta-ok h2 { font-size: clamp(26px, 2.5vw, 32px); margin: 18px 0 12px; }
.proposta-ok > p:not(.rotulo) { color: var(--suave); margin-bottom: 26px; }
/* no celular o formulário sobe para logo depois do título, os passos e o WhatsApp vêm depois */
@media (max-width: 900px) { .contato-in { grid-template-columns: 1fr; gap: 0; } .contato-txt { display: contents; } .proposta { order: 1; margin-top: 32px; } .passos, .contato-alt, .contato-txt > .bt { order: 2; } .passos { max-width: none; } }
@media (max-width: 600px) { .proposta { padding: 24px; } .campos { grid-template-columns: 1fr; } .proposta-pe { flex-direction: column-reverse; align-items: stretch; gap: 14px; padding-top: 22px; } .proposta-nota { text-align: center; } .proposta-nota br, .proposta-erro br { display: none; } .proposta-erro { padding: 12px 8px; font-size: 13.5px; } .contato-sub { font-size: 16.5px; } }

/* ficha de cada caso, a mesma linguagem do site: rótulos em mono, filetes e uma cor só */
html:has(.ficha[open]) { overflow: hidden; }
.ficha { width: min(1120px, 100% - 48px); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--linha-2); border-radius: 18px; background: var(--fundo-2); color: var(--texto); scrollbar-width: thin; scrollbar-color: var(--linha-2) transparent; }
.ficha::backdrop { background: rgba(5, 5, 12, .8); backdrop-filter: blur(6px); }
.ficha-fechar { position: sticky; z-index: 3; top: 16px; float: right; width: 42px; height: 42px; margin: 16px 16px 0 0; border: 1px solid var(--linha-2); border-radius: 10px; background: var(--fundo-2); font-size: 15px; transition: border-color .2s; }
.ficha-fechar:hover { border-color: var(--cor); }
.ficha-corpo { padding: 44px 48px 48px; }
.ficha p, .ficha li { text-wrap: pretty; }
.ficha h3, .ficha h4 { text-wrap: balance; }
.ficha .dt, .c-head .tag { font: 500 12px/1.3 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--cor); }
.c-head { display: flex; flex-direction: column; gap: 14px; padding-right: 48px; }
.c-head h3 { font-size: clamp(30px, 3.4vw, 44px); }
.c-head em, .lucro-t em { font-style: normal; color: var(--cor); }
.dor { margin-top: 30px; max-width: 800px; }
.dor p:not(.dt) { margin-top: 10px; font-size: 17px; color: #C4C4DA; }
.dor b, .result b, .lucro b { color: var(--texto); font-weight: 600; }

.jornada { margin-top: 36px; overflow: hidden; border: 1px solid var(--linha); border-radius: 14px; background: var(--cartao); }
.j-passos { display: grid; grid-template-columns: repeat(var(--np, 5), minmax(0, 1fr)); border-bottom: 1px solid var(--linha); }
.j-passos button { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; height: 100%; padding: 16px 18px 14px; text-align: left; color: var(--suave); transition: color .2s; }
.j-passos li + li button { border-left: 1px solid var(--linha); }
.j-passos button:hover, .j-passos li.on button { color: var(--texto); }
.j-passos .n { font: 500 12px/1 var(--m); letter-spacing: .1em; color: var(--cor); }
.j-passos b { font: 600 15px/1.25 var(--t); letter-spacing: -.01em; }
.j-tag { margin-top: auto; padding-top: 4px; font: 500 11px/1 var(--m); letter-spacing: .06em; color: var(--apagado); }
.j-passos button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--cor); transform: scaleX(0); transform-origin: left; }
.j-passos li.on button::after { animation: tempo var(--jdur, 6s) linear forwards; }
.jornada.pausa .j-passos li.on button::after { animation-play-state: paused; }
@keyframes tempo { to { transform: scaleX(1); } }
.j-palco { position: relative; height: 630px; }
.j-cena { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; padding: 28px 44px; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.j-cena.on { opacity: 1; visibility: visible; }
/* a tela e o celular têm a largura exata da imagem -1x, para ela aparecer pixel a pixel, sem o navegador redimensionar */
.j-cena.larga { grid-template-columns: minmax(0, 586px) minmax(260px, 1fr); gap: 36px; padding: 28px 32px; }
.j-cena .cel { justify-self: center; width: 272px; padding: 8px; border-radius: 34px; background: linear-gradient(145deg, #34356A, #111226 45%, #1B1C3A); box-shadow: inset 0 0 0 1px #3D3F75; }
.j-cena .cel img { display: block; width: 100%; height: auto; border-radius: 27px; }
.j-cena .cel.nu { background: none; box-shadow: none; }
.j-cena .pc { position: relative; overflow: hidden; border: 1px solid var(--linha-2); border-radius: 10px; background: #0B0B18; }
.j-cena .pc img { display: block; width: 100%; height: auto; }
.j-cena .pc canvas { display: block; width: 100%; aspect-ratio: 1280 / 762; object-fit: cover; object-position: top; }
.j-txt h4 { margin: 12px 0 12px; font: 700 26px/1.14 var(--t); letter-spacing: -.02em; }
.j-txt p:not(.dt) { font-size: 15.5px; color: #C4C4DA; }
.j-txt .dt-n { margin-right: 10px; color: var(--apagado); }

.result { margin-top: 30px; font-size: 17px; color: #C4C4DA; }
.subst { margin-top: 12px; font-size: 15px; color: var(--suave); }
.subst span { margin-right: 10px; font: 500 12px/1 var(--m); letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); }

/* conta do antes e depois */
.ficha .conta { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; margin-top: 30px; border: 0; border-radius: 0; overflow: visible; }
.ficha .conta > div { padding: 0; }
.ficha .conta > .c-lado { display: flex; flex-direction: column; gap: 6px; padding: 26px 28px; border: 1px solid var(--linha); border-radius: 14px; }
.c-lado.depois { background: rgba(108, 75, 255, .1); }
.ficha .c-lado small { font: 500 11px/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); }
.ficha .c-lado b { margin-top: 6px; font: 700 28px/1.15 var(--t); letter-spacing: -.02em; color: var(--texto); }
.ficha .c-lado.depois b, .ficha .c-lado.depois small { color: var(--cor); }
.c-lado span { color: var(--suave); font-size: 15px; }
.c-lado em { font-style: normal; color: #C4C4DA; font-size: 15px; }
.ficha .conta > .c-seta { align-self: center; padding: 0 16px; color: var(--cor); font-size: 20px; }

/* quanto custaria comprar separado */
.case-mercado { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--linha); }
.case-mercado > h4 { margin-top: 12px; font: 700 clamp(24px, 2.6vw, 30px)/1.14 var(--t); letter-spacing: -.02em; }
.mk-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; margin-top: 26px; }
.mk-grid > * { min-width: 0; }
.mk-list { border-top: 1px solid var(--linha); }
.mk-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 6px 10px; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.mk-n { padding-top: 3px; font: 500 12px/1.3 var(--m); color: var(--cor); }
.mk-f b { display: block; font: 600 16px/1.25 var(--t); letter-spacing: -.01em; }
.mk-f span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--apagado); }
.mk-v { text-align: right; }
.mk-v b { font: 500 14.5px/1.3 var(--m); white-space: nowrap; }
.mk-v i { font-style: normal; font-size: 12px; color: var(--apagado); }
.mk-v small { display: block; margin-top: 3px; font-size: 12px; color: var(--apagado); }
.mk-bar { grid-column: 2 / -1; position: relative; height: 4px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .07); }
.mk-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--lo) * 100%); background: var(--cor-forte); }
.mk-bar em { position: absolute; top: 0; bottom: 0; left: calc(var(--lo) * 100%); width: calc((var(--hi) - var(--lo)) * 100%); background: rgba(139, 124, 255, .4); }
.mk-side { display: flex; flex-direction: column; gap: 14px; }
.mk-total, .mk-nosso { padding: 24px 26px; border: 1px solid var(--linha); border-radius: 14px; }
.mk-nosso { background: rgba(108, 75, 255, .1); }
.mk-total small, .mk-nosso small { display: block; font: 500 11px/1.3 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); }
.mk-nosso small { color: var(--cor); }
.mk-total > b, .mk-nosso > b { display: block; margin-top: 10px; font: 700 28px/1.15 var(--t); letter-spacing: -.02em; }
.mk-total > b i { font-style: normal; font-size: 15px; font-weight: 500; color: var(--suave); }
.mk-ano { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha); }
.mk-ano > span { display: block; font-size: 13.5px; color: var(--suave); }
.mk-ano strong { display: block; margin-top: 2px; font: 700 30px/1.15 var(--t); letter-spacing: -.02em; color: var(--cor); }
.mk-total p { margin-top: 10px; font-size: 14px; color: var(--suave); }
.mk-nosso ul { margin-top: 12px; }
.mk-nosso li { padding: 9px 0; border-top: 1px solid var(--linha); font-size: 14px; color: #C4C4DA; }
.lucro { margin-top: 26px; padding: 24px 26px; border: 1px solid var(--linha); border-radius: 14px; }
.lucro-t { font: 700 24px/1.2 var(--t); letter-spacing: -.02em; }
.lucro p:not(.lucro-t) { margin-top: 8px; font-size: 15px; color: #C4C4DA; }
.ficha .nota { margin-top: 20px; text-align: left; }
.ficha-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--linha); }
.ficha-cta p { font: 700 24px/1.2 var(--t); letter-spacing: -.02em; }

@media (max-width: 900px) {
  .ficha { width: 100%; max-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; }
  .ficha-corpo { padding: 20px 20px 36px; }
  .c-head { padding-right: 44px; }
  .j-passos { display: none; }
  .j-palco { height: auto; }
  .j-cena, .j-cena.larga { position: static; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 18px; opacity: 1; visibility: visible; }
  .j-cena + .j-cena { border-top: 1px solid var(--linha); }
  .j-cena .cel { width: min(256px, 72vw); }
  .ficha .conta { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ficha .conta > .c-seta { justify-self: center; rotate: 90deg; padding: 0; }
  .mk-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ficha-cta { flex-direction: column; align-items: stretch; text-align: center; }
}

/* faixa de clientes */
.problema { border-bottom: 0; }
.clientes { overflow: hidden; }
.clientes .cab { text-align: center; }
.clientes .cab .rotulo { justify-content: center; }
.faixa { position: relative; overflow: hidden; }
.faixa::before, .faixa::after { content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; width: 14vw; pointer-events: none; }
.faixa::before { left: 0; background: linear-gradient(90deg, var(--fundo), rgba(10, 10, 22, 0)); }
.faixa::after { right: 0; background: linear-gradient(270deg, var(--fundo), rgba(10, 10, 22, 0)); }
.faixa-trilho { display: flex; width: max-content; animation: faixa 62s linear infinite; }
.faixa:hover .faixa-trilho { animation-play-state: paused; }
@keyframes faixa { to { transform: translateX(-25%); } }
.faixa-lista { display: flex; align-items: center; flex: none; list-style: none; margin: 0; padding: 0; }
.faixa-lista li { display: grid; place-items: center; height: 84px; padding: 0 44px; }
.faixa-lista img { width: auto; height: var(--h); max-width: none; }
@media (max-width: 600px) {
  .faixa-lista li { height: 64px; padding: 0 26px; }
  .faixa-lista img { height: calc(var(--h) * .74); }
}
@media (prefers-reduced-motion: reduce) {
  .faixa-trilho { width: auto; animation: none; }
  .faixa-lista { flex-wrap: wrap; justify-content: center; flex: 1; }
  .faixa-lista[aria-hidden] { display: none; }
  .faixa::before, .faixa::after { display: none; }
}

/* grid do site: 12 colunas dentro do .wrap, com vão de 24px, da logo ao rodapé.
   O bloco da esquerda ocupa as colunas 1 a 5 e o da direita começa sempre na coluna 7. No tablet e no celular fica tudo em uma coluna */
@media (min-width: 901px) {
  .topo-in, .lojas-in, .contato-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); }
  .topo-in > .marca { grid-column: 1 / 4; }
  .topo-in > .menu { grid-column: 4 / 10; }
  .topo-in > .bt-texto { grid-column: 10 / -1; justify-self: end; }
  .lojas-txt, .contato-txt { grid-column: 1 / 6; }
  .lojas-dir, .proposta { grid-column: 7 / -1; }
  .lojas-txt > p:not(.rotulo), .publica, .contato-sub, .passos { max-width: none; }
  .frases { gap: var(--vao); }
}
@media (max-width: 600px) { .topo-in { padding-inline: 16px; } .menu { left: 16px; right: 16px; } }
@media (max-width: 900px) { .capa-ctas { width: 100%; } }