/* ==========================================================================
   TROK — site oficial
   Mesma identidade do app: roxo #6746EA, amarelo #FBBC1F, grafite #292D45,
   Unbounded nos títulos e Plus Jakarta Sans no texto.
   ========================================================================== */
:root{
  --roxo:#6746EA; --roxo-escuro:#4F31CF; --roxo-claro:#9A86F5; --roxo-nevoa:#EEEAFE;
  --amarelo:#FBBC1F; --amarelo-nev:#FFF5DB; --grafite:#292D45; --grafite-2:#353A57;
  --tinta:#292D45; --tinta-2:#6E7190; --fundo:#F4F4F7; --branco:#fff; --linha:#E6E6EE;
  --f-display:"Unbounded", system-ui, sans-serif;
  --f-texto:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --larg:1180px; --g:clamp(20px, 5vw, 48px);
  --sombra:0 18px 50px rgba(41,45,69,.12);
  --mola:cubic-bezier(.2,.9,.3,1.25);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--f-texto); color:var(--tinta); background:var(--fundo); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; padding:0; }
h1,h2,h3,p{ margin:0; }
:focus-visible{ outline:3px solid var(--roxo); outline-offset:3px; border-radius:8px; }
.travado{ overflow:hidden; }

/* --- abertura com a logo animada -------------------------------------------- */
.intro{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; }
.intro__fundo{ position:absolute; inset:0; background:radial-gradient(90% 60% at 50% 45%, #7A5BF2, var(--roxo) 50%, #4C30CC); }
.intro__logo{ position:relative; width:min(62vw, 300px); }
.intro__logo svg{ width:100%; height:auto; overflow:visible; }

/* --- cabeçalho ----------------------------------------------------------------- */
.cab{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:24px;
  padding:14px var(--g); max-width:calc(var(--larg) + 2 * var(--g)); margin:0 auto;
  transition:background .3s, box-shadow .3s, padding .3s;
}
.cab.rolou{ background:rgba(244,244,247,.88); backdrop-filter:blur(14px) saturate(140%); box-shadow:0 1px 0 var(--linha); padding-block:10px; max-width:none; }
.cab__logo img{ width:96px; }
.progresso{ position:absolute; left:0; right:0; bottom:-1px; height:3px; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg, var(--roxo), var(--amarelo)); border-radius:0 3px 3px 0; pointer-events:none; }
.cab__menu{ display:flex; gap:26px; margin-left:auto; font-size:14.5px; font-weight:600; color:var(--tinta-2); }
.cab__menu a{ position:relative; padding:6px 0; transition:color .2s; }
.cab__menu a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:var(--roxo); transform:scaleX(0); transition:transform .25s; }
.cab__menu a:hover{ color:var(--tinta); }
.cab__menu a:hover::after{ transform:scaleX(1); }
.cab__acoes{ display:flex; align-items:center; gap:14px; }
.idiomas{ display:flex; background:var(--branco); border-radius:12px; padding:3px; box-shadow:0 2px 10px rgba(41,45,69,.06); }
.idiomas button{ font-size:12px; font-weight:800; padding:7px 9px; border-radius:9px; color:var(--tinta-2); }
.idiomas button[aria-pressed="true"]{ background:var(--grafite); color:#fff; }

/* --- botões ---------------------------------------------------------------------- */
.botao{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:56px; padding:0 26px; border-radius:18px;
  font-weight:700; font-size:15.5px; transition:translate .25s var(--mola), scale .25s var(--mola), box-shadow .25s; }
.botao:hover{ translate:0 -2px; }
.botao:active{ scale:.97; }
.botao--p{ min-height:44px; padding:0 18px; font-size:14px; border-radius:14px; }
.botao--roxo{ background:var(--roxo); color:#fff; box-shadow:0 12px 26px rgba(103,70,234,.35); }
.botao--amarelo{ background:var(--amarelo); color:var(--grafite); box-shadow:0 12px 26px rgba(251,188,31,.38); }

.lojas{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.loja{ display:inline-flex; align-items:center; gap:10px; min-height:56px; padding:0 20px 0 16px; border-radius:16px; background:var(--grafite); color:#fff;
  transition:translate .25s var(--mola); }
.loja:hover{ translate:0 -2px; }
.loja span{ display:grid; line-height:1.1; }
.loja small{ font-size:10.5px; opacity:.7; font-weight:600; }
.loja b{ font-size:16px; font-weight:700; letter-spacing:-.01em; }
.loja--clara{ background:#fff; color:var(--grafite); }

/* --- herói ----------------------------------------------------------------------- */
.heroi{ max-width:calc(var(--larg) + 2 * var(--g)); margin:0 auto; padding:34px var(--g) 70px; display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center; }
.selo-local{ display:inline-flex; align-items:center; gap:9px; padding:8px 14px; border-radius:99px; background:var(--branco); box-shadow:0 2px 10px rgba(41,45,69,.06); font-size:13px; font-weight:700; color:var(--tinta-2); }
.selo-local i{ width:8px; height:8px; border-radius:99px; background:#12A05C; box-shadow:0 0 0 4px rgba(18,160,92,.15); }
.heroi__titulo{ font-family:var(--f-display); font-weight:700; font-size:clamp(36px, 4.6vw, 60px); line-height:1.04; letter-spacing:-.045em; margin:22px 0 20px; }
.destaque-txt{ color:var(--roxo); }
.heroi__sub{ font-size:clamp(16px, 1.6vw, 19px); line-height:1.6; color:var(--tinta-2); max-width:520px; margin-bottom:30px; }
.heroi__fatos{ list-style:none; margin:34px 0 0; padding:0; display:flex; gap:30px; flex-wrap:wrap; }
.heroi__fatos li{ display:grid; gap:2px; }
.heroi__fatos b{ font-family:var(--f-display); font-size:20px; font-weight:700; letter-spacing:-.03em; }
.heroi__fatos span{ font-size:13px; color:var(--tinta-2); }

.heroi__arte{ position:relative; aspect-ratio:1/1.02; min-height:340px; }
.heroi__disco{ position:absolute; inset:4% 2% 10% 6%; border-radius:44% 56% 52% 48% / 50% 44% 56% 50%;
  background:radial-gradient(120% 90% at 70% 15%, #7C5DF4, var(--roxo) 50%, #4C30CC); box-shadow:var(--sombra); overflow:hidden; }
.heroi__chao{ position:absolute; left:0; right:0; bottom:0; height:44%; background:var(--grafite); clip-path:polygon(0 42%, 100% 0, 100% 100%, 0 100%); }
.heroi__bike{ position:absolute; left:3%; width:94%; bottom:13%; filter:drop-shadow(0 30px 26px rgba(0,0,0,.35)); }
.bolha{ position:absolute; display:flex; align-items:center; gap:10px; padding:10px 16px 10px 10px; border-radius:18px; background:#fff; box-shadow:var(--sombra); font-size:13px; }
.bolha b{ display:block; font-size:14px; }
.bolha small{ display:block; font-size:11.5px; color:var(--tinta-2); }
.bolha b small{ display:inline; }
.bolha__ic{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--roxo); color:var(--amarelo); flex:0 0 38px; }
.bolha__ic svg{ width:12px; height:20px; }
.bolha__ic--am{ background:var(--amarelo); color:var(--grafite); }
.bolha__ic--am svg,.bolha__ic--red svg{ width:19px; height:19px; }
.bolha__ic--red{ background:#FDE8E9; color:#EF3B45; }
.bolha--troca{ left:-2%; top:12%; }
.bolha--aluguel{ right:-2%; top:34%; }
.bolha--like{ left:14%; bottom:2%; }

/* --- faixa de produtos ------------------------------------------------------------ */
.faixa{ overflow:hidden; padding:10px 0 30px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.faixa__trilho{ display:flex; gap:18px; width:max-content; padding-right:18px; }
.faixa__eco{ display:contents; }
/* etiqueta, foto, nome e detalhe um embaixo do outro: nada fica por cima de nada */
.faixa__item{ width:196px; flex:0 0 auto; border-radius:26px; background:#fff; box-shadow:0 8px 24px rgba(41,45,69,.07); padding:14px 16px 16px; display:flex; flex-direction:column; gap:4px; transition:translate .3s var(--mola), box-shadow .3s; }
.faixa__item:hover{ translate:0 -6px; box-shadow:0 18px 34px rgba(41,45,69,.12); }
.faixa__tag{ align-self:flex-start; font-size:10.5px; font-weight:800; padding:4px 9px; border-radius:8px; }
.faixa__tag.t{ background:var(--roxo-nevoa); color:var(--roxo-escuro); }
.faixa__tag.a{ background:var(--amarelo-nev); color:#8A6200; }
.faixa__foto{ position:relative; height:112px; flex:0 0 112px; margin:6px 0 8px; }
.faixa__foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 10px rgba(41,45,69,.16)); }
.faixa__item b{ font-size:14px; font-weight:800; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.faixa__item small{ font-size:12.5px; color:var(--tinta-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.faixa__item em{ font-style:normal; font-weight:800; color:var(--roxo); }

/* --- onde funciona ------------------------------------------------------------------ */
.cidades{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:48px; align-items:center; padding-block:60px 30px; }
.cidades .secao__apoio{ margin-bottom:0; }
.cidades__lista{ display:grid; gap:12px; }
.cidade{ display:flex; align-items:center; gap:16px; background:#fff; border-radius:22px; padding:18px 20px; box-shadow:0 8px 24px rgba(41,45,69,.06); }
.cidade b{ display:block; font-family:var(--f-display); font-size:18px; font-weight:600; letter-spacing:-.02em; }
.cidade small{ display:block; font-size:13.5px; color:var(--tinta-2); margin-top:2px; }
.cidade__pino{ flex:0 0 46px; width:46px; height:46px; border-radius:15px; display:grid; place-items:center; background:var(--roxo); color:var(--amarelo); }
.cidade__pino svg{ width:22px; height:22px; }
.cidade--on small::before{ content:""; display:inline-block; width:8px; height:8px; border-radius:99px; background:#12A05C; box-shadow:0 0 0 3px rgba(18,160,92,.15); margin-right:8px; vertical-align:1px; }
.cidade--breve{ background:transparent; box-shadow:none; border:2px dashed #CFCBE6; }
.cidade--breve .cidade__pino{ background:var(--roxo-nevoa); color:var(--roxo); }

/* --- seções ------------------------------------------------------------------------ */
.secao{ max-width:calc(var(--larg) + 2 * var(--g)); margin:0 auto; padding:90px var(--g); }
.secao__sobre{ font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--roxo); margin-bottom:12px; }
.secao__titulo{ font-family:var(--f-display); font-weight:700; font-size:clamp(30px, 4vw, 48px); letter-spacing:-.04em; line-height:1.08; max-width:760px; }
.secao__apoio{ font-size:17px; line-height:1.6; color:var(--tinta-2); margin:18px 0 28px; max-width:460px; }

.passos{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; margin-top:48px; }
.passo{ position:relative; background:#fff; border-radius:30px; padding:22px 26px 30px; box-shadow:0 10px 30px rgba(41,45,69,.06); }
.passo img{ width:100%; height:210px; object-fit:contain; margin-bottom:14px; }
.passo__n{ position:absolute; top:18px; left:18px; width:38px; height:38px; border-radius:12px; background:var(--grafite); color:#fff; display:grid; place-items:center; font-family:var(--f-display); font-weight:700; }
.passo h3{ font-family:var(--f-display); font-size:20px; font-weight:600; letter-spacing:-.03em; margin-bottom:8px; }
.passo p{ font-size:15px; line-height:1.6; color:var(--tinta-2); }

.secao--escura{ max-width:none; background:var(--grafite); color:#fff; border-radius:44px; margin:0 clamp(8px, 2vw, 24px); padding-inline:max(var(--g), calc((100% - var(--larg)) / 2)); }
.secao--escura .secao__sobre{ color:var(--amarelo); }
.recursos{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-top:44px; }
/* o hover usa `translate` (separado de `transform`) para não brigar com a animação de entrada */
.recurso{ background:var(--grafite-2); border-radius:26px; padding:24px; min-height:200px; display:flex; flex-direction:column; gap:10px; transition:translate .3s var(--mola), background .3s; }
.secao--escura{ transform-origin:50% 0; }
.recurso:hover{ translate:0 -6px; background:#3E4466; }
.recurso__ic{ width:50px; height:50px; border-radius:16px; background:var(--roxo); color:var(--amarelo); display:grid; place-items:center; margin-bottom:8px; }
.recurso__ic svg{ width:24px; height:24px; }
.recurso__ic .simb{ width:14px; height:24px; }
.recurso h3{ font-family:var(--f-display); font-size:17px; font-weight:600; letter-spacing:-.02em; }
.recurso p{ font-size:14px; line-height:1.55; color:rgba(255,255,255,.65); }
.recurso__txt{ display:flex; flex-direction:column; gap:10px; }
.recurso--grande{ grid-column:span 2; background:var(--roxo); display:grid; grid-template-columns:minmax(0, 1fr) 250px; gap:20px; align-items:center; overflow:hidden; }
.recurso--grande p{ color:rgba(255,255,255,.82); max-width:330px; }

/* mini Descobrir dentro do card grande */
.mini-desc{ position:relative; height:230px; }
.mini-desc__card{ position:absolute; left:50%; top:4px; width:150px; margin-left:-75px; padding:10px 10px 12px; border-radius:20px; background:#fff; color:var(--tinta); box-shadow:0 18px 30px rgba(20,10,70,.3); display:flex; flex-direction:column; gap:2px; transform-origin:50% 100%; }
.mini-desc__card img{ height:92px; width:100%; object-fit:contain; margin-bottom:6px; }
.mini-desc__card b{ font-family:var(--f-display); font-size:13px; font-weight:600; letter-spacing:-.02em; }
.mini-desc__card small{ font-size:11px; color:var(--tinta-2); }
.mini-desc__card--tras{ top:14px; height:150px; opacity:.85; }
.mini-desc__acoes{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); display:flex; align-items:center; gap:12px; }
.mini-desc__nao,.mini-desc__sim{ display:grid; place-items:center; border-radius:99px; box-shadow:0 10px 20px rgba(20,10,70,.25); }
.mini-desc__nao{ width:38px; height:38px; background:#fff; color:#EF3B45; font-size:15px; font-weight:800; }
.mini-desc__sim{ width:48px; height:48px; background:var(--amarelo); color:var(--roxo); }
.mini-desc__sim .simb{ width:12px; height:21px; }
.mini-desc__match{ position:absolute; right:-4px; top:96px; display:flex; align-items:center; gap:6px; padding:7px 11px; border-radius:12px; background:var(--grafite); color:#fff; font-size:12px; font-weight:800; box-shadow:0 10px 20px rgba(20,10,70,.3); }
.mini-desc__match .simb{ width:8px; height:14px; color:var(--amarelo); }

/* mini calendário no card de aluguel */
.mini-cal{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:5px; margin-top:auto; padding-top:10px; }
.mini-cal span{ aspect-ratio:1; border-radius:9px; display:grid; place-items:center; font-size:11px; font-weight:700; background:rgba(255,255,255,.08); color:rgba(255,255,255,.6); }
.mini-cal .on{ background:var(--roxo); color:#fff; }
.mini-cal .pend{ background:rgba(251,188,31,.2); color:var(--amarelo); }
.recurso--grande:hover{ background:#7253EE; }
.recurso--grande .recurso__ic{ background:var(--amarelo); color:var(--grafite); }

/* --- demonstração ----------------------------------------------------------------- */
.demo{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:60px; align-items:center; }
.demo__palco{ position:relative; display:grid; place-items:center; padding:30px 40px; }
.demo__fundo{ position:absolute; width:440px; height:440px; border-radius:42% 58% 50% 50% / 50% 44% 56% 50%; background:radial-gradient(120% 90% at 70% 15%, #7C5DF4, var(--roxo) 50%, #4C30CC); opacity:.95; }
.dicas{ list-style:none; counter-reset:d; margin:0 0 30px; padding:0; display:grid; gap:12px; max-width:470px; }
.dicas li{ counter-increment:d; display:flex; align-items:center; gap:14px; background:#fff; border-radius:18px; padding:14px 18px 14px 14px; font-size:15px; font-weight:600; line-height:1.4; box-shadow:0 6px 20px rgba(41,45,69,.05); }
.dicas li::before{ content:counter(d); flex:0 0 34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--roxo-nevoa); color:var(--roxo); font-family:var(--f-display); font-weight:700; font-size:14px; }
.celular{ position:relative; width:340px; height:700px; border-radius:52px; padding:12px; background:#17151F; box-shadow:0 40px 80px rgba(28,25,45,.3), inset 0 0 0 2px #34304A; }
.celular__tela{ position:relative; width:100%; height:100%; border-radius:41px; overflow:hidden; background:var(--roxo); }
.celular iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.celular__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
/* antes de ligar: a tela real aparece apagada e o botão fica sobre um véu sólido */
.celular__play{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:14px; color:#fff; font-weight:800; font-size:15px;
  background:rgba(41,45,69,.62); backdrop-filter:blur(3px); transition:background .3s; }
.celular__play:hover{ background:rgba(41,45,69,.5); }
.celular__play-ic{ width:76px; height:76px; border-radius:99px; place-items:center; background:var(--amarelo); color:var(--roxo); box-shadow:0 14px 30px rgba(251,188,31,.45); transition:transform .3s var(--mola); }
.celular__play:hover .celular__play-ic{ transform:scale(1.08); }
.celular__play-ic svg{ width:18px; height:31px; }
.celular__play > span:last-child{ padding:9px 16px; border-radius:99px; background:rgba(255,255,255,.14); }

/* --- segurança -------------------------------------------------------------------- */
.seguranca{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-top:44px; }
.seg{ display:flex; gap:16px; align-items:flex-start; background:#fff; border-radius:24px; padding:22px; box-shadow:0 10px 30px rgba(41,45,69,.05); }
.seg__ic{ width:46px; height:46px; flex:0 0 46px; border-radius:15px; background:var(--roxo-nevoa); color:var(--roxo); display:grid; place-items:center; }
.seg__ic svg{ width:22px; height:22px; }
.seg h3{ font-size:16px; font-weight:800; margin-bottom:5px; }
.seg p{ font-size:14px; line-height:1.55; color:var(--tinta-2); }
.nota-honesta{ margin-top:22px; padding:16px 20px; border-radius:18px; background:var(--amarelo-nev); color:#6E5000; font-size:14px; line-height:1.55; }

/* --- baixar ------------------------------------------------------------------------- */
.baixar{ position:relative; overflow:hidden; margin:0 clamp(8px, 2vw, 24px); border-radius:44px; color:#fff;
  background:radial-gradient(120% 90% at 80% 10%, #7C5DF4, var(--roxo) 50%, #4C30CC); padding:90px max(var(--g), calc((100% - var(--larg)) / 2)); }
.baixar__marca{ position:absolute; right:-40px; top:-60px; width:340px; color:rgba(255,255,255,.07); }
.baixar__marca svg{ width:100%; height:auto; }
.baixar{ display:grid; grid-template-columns:minmax(0, 1fr) 380px; gap:40px; align-items:center; }
.baixar__txt{ position:relative; max-width:640px; z-index:1; }
.baixar__arte{ position:relative; height:440px; }
.celular--baixar{ position:absolute; left:50%; top:10px; margin-left:-130px; width:260px; height:540px; border-radius:42px; padding:10px; box-shadow:0 40px 70px rgba(20,10,70,.45), inset 0 0 0 2px #34304A; }
.celular--baixar .celular__tela{ border-radius:33px; }
.celular--baixar img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.icone-app{ position:absolute; left:0; top:40px; display:grid; justify-items:center; gap:6px; font-size:12.5px; font-weight:700; }
.icone-app img{ width:84px; height:84px; border-radius:22px; box-shadow:0 16px 30px rgba(20,10,70,.4); }
.baixar h2{ font-family:var(--f-display); font-size:clamp(32px, 4.4vw, 54px); font-weight:700; letter-spacing:-.045em; line-height:1.05; }
.baixar p{ font-size:17px; line-height:1.6; opacity:.85; margin:18px 0 28px; }
.instalar{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin:22px 0 26px; }
.instalar__passo{ background:rgba(255,255,255,.12); border-radius:18px; padding:16px 18px; display:grid; gap:4px; }
.instalar__passo b{ font-size:15px; }
.instalar__passo span{ font-size:13.5px; opacity:.85; line-height:1.45; }

/* --- dúvidas ------------------------------------------------------------------------- */
.duvidas{ display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); gap:56px; align-items:start; }
.duvidas__lado{ position:sticky; top:110px; }
.ajuda-card{ margin-top:32px; background:var(--grafite); color:#fff; border-radius:28px; padding:26px; display:grid; gap:10px; }
.ajuda-card__ic{ width:48px; height:48px; border-radius:15px; background:var(--roxo); color:var(--amarelo); display:grid; place-items:center; margin-bottom:4px; }
.ajuda-card__ic svg{ width:23px; height:23px; }
.ajuda-card h3{ font-family:var(--f-display); font-size:19px; font-weight:600; letter-spacing:-.02em; }
.ajuda-card p{ font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.72); }
.ajuda-card__acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:8px; }
.ajuda-card__email{ font-size:14px; font-weight:700; color:var(--amarelo); }
.ajuda-card__email:hover{ text-decoration:underline; }
.faq{ display:grid; gap:12px; }
.faq details{ background:#fff; border-radius:20px; box-shadow:0 6px 20px rgba(41,45,69,.05); }
.faq summary{ list-style:none; display:flex; align-items:center; gap:14px; padding:20px 22px; font-size:16px; font-weight:700; cursor:pointer; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; margin-left:auto; width:30px; height:30px; flex:0 0 30px; border-radius:10px; background:var(--fundo); display:grid; place-items:center; font-size:20px; font-weight:600; transition:transform .25s; }
.faq details[open] summary::after{ transform:rotate(45deg); background:var(--roxo); color:#fff; }
.faq p{ padding:0 22px 22px; font-size:15px; line-height:1.6; color:var(--tinta-2); }

/* --- rodapé ------------------------------------------------------------------------- */
.rodape{ margin-top:90px; background:var(--grafite); color:#fff; padding:56px var(--g) 40px; }
.rodape > *{ max-width:var(--larg); margin-inline:auto; }
.rodape__topo{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.rodape__topo p{ font-family:var(--f-display); font-size:18px; font-weight:600; letter-spacing:-.02em; }
.rodape__links{ display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:32px; padding-top:28px; border-top:1px solid rgba(255,255,255,.1); font-size:14.5px; color:rgba(255,255,255,.75); }
.rodape__links a:hover{ color:#fff; }
.rodape__legal{ margin-top:20px; font-size:12.5px; color:rgba(255,255,255,.45); }

.simbolo-site{ display:inline-grid; }
.simbolo-site svg{ display:block; }

/* --- celular e tablet ---------------------------------------------------------------- */
@media (max-width:1020px){
  .cab__menu{ display:none; }
  .heroi{ grid-template-columns:1fr; padding-top:16px; gap:10px; }
  .heroi__arte{ max-width:520px; width:100%; margin:28px auto 8px; order:-1; }
  .recursos{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .recurso:last-child{ grid-column:span 2; }
  .demo{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .demo .secao__apoio, .dicas{ margin-inline:auto; }
  .dicas li{ text-align:left; }
  .baixar{ grid-template-columns:1fr; }
  .baixar__arte{ display:none; }
  .duvidas{ grid-template-columns:1fr; gap:34px; }
  .cidades{ grid-template-columns:1fr; gap:26px; }
  .duvidas__lado{ position:static; }
  .recurso--grande{ grid-template-columns:minmax(0, 1fr) 220px; }
  .seguranca{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .cab{ gap:10px; }
  .cab__acoes .botao--p{ display:none; }
  .passos{ grid-template-columns:1fr; }
  .recursos{ grid-template-columns:1fr; }
  .recurso--grande, .recurso:last-child{ grid-column:auto; }
  .secao{ padding-block:64px; }
  .heroi__fatos{ gap:20px; }
  .lojas .loja, .lojas .botao{ flex:1 1 100%; }
  .instalar{ grid-template-columns:1fr; }
  .celular{ width:300px; height:620px; }
  .demo__palco{ padding:20px 0; }
  .demo__fundo{ width:330px; height:330px; }
  .recurso--grande{ grid-template-columns:1fr; }
  .mini-desc{ max-width:280px; width:100%; margin:0 auto; }
  .faixa__item{ width:172px; }
  .bolha{ transform:scale(.86); }
  .bolha--troca{ left:0; }
  .bolha--aluguel{ right:0; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}