/* Duollab · site institucional (home e /sobre)
   Identidade do Instagram (26/10/2026): preto, off-white e vermelho-coral; títulos condensados em caixa alta
   (Bebas Neue) com a última parte em coral; textos em Inter; botões em pílula coral "Quero ...".
   Logo: marca em blocos (um "d") + "duollab" em /assets/logo-duollab(-negativo).svg. */
:root{
  --preto:#0B0C0B; --preto-2:#141514; --preto-3:#1C1D1C;
  --off:#F5F4EF; --branco:#FFFFFF;
  --coral:#F84F35; --coral-esc:#E03D24;
  --ink:#111211; --ink-2:#3d3e3c; --cinza:#6B6B66; --cinza-cl:#A9A9A3;
  --linha:rgba(17,18,17,.12); --linha-cl:rgba(245,244,239,.12);
  --raio:18px;
  --t-tit:'Bebas Neue', 'Oswald', Impact, sans-serif;
  --t-txt:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*{margin:0; padding:0; box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{font-family:var(--t-txt); font-size:16px; line-height:1.6; color:var(--ink); background:var(--off); -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--t-tit); font-weight:400; text-transform:uppercase; letter-spacing:.005em; line-height:.92}
h1 em,h2 em,h3 em{font-style:normal; color:var(--coral)}
.wrap{max-width:1200px; margin:0 auto; padding:0 32px}
:focus-visible{outline:2px solid var(--coral); outline-offset:3px; border-radius:6px}
.escuro{background:var(--preto); color:var(--off)}
.claro{background:var(--off); color:var(--ink)}

/* ---------- rótulo ---------- */
.rotulo{display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase}
.rotulo::before{content:''; width:10px; height:10px; border-radius:2px; background:var(--coral)}

/* ---------- botões ---------- */
.bt{display:inline-flex; align-items:center; gap:12px; border-radius:999px; padding:15px 26px; font-family:var(--t-txt); font-size:15px; font-weight:600; line-height:1; border:1.5px solid transparent; transition:background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; cursor:pointer; white-space:nowrap}
.bt svg{width:18px; height:18px; transition:transform .2s}
.bt:hover svg{transform:translateX(4px)}
.bt-coral{background:var(--coral); color:#fff; box-shadow:0 10px 28px -12px rgba(248,79,53,.7)}
.bt-coral:hover{background:var(--coral-esc)}
.bt-linha{border-color:rgba(245,244,239,.35); color:var(--off)}
.bt-linha:hover{border-color:var(--off); background:rgba(245,244,239,.06)}
.mais{display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--coral)}
.mais svg{width:16px; height:16px; transition:transform .2s}
.mais:hover svg{transform:translateX(4px)}

/* ---------- cabeçalho ---------- */
.topo{position:sticky; top:0; z-index:50; background:rgba(11,12,11,.97); backdrop-filter:saturate(1.2) blur(12px); -webkit-backdrop-filter:saturate(1.2) blur(12px); border-bottom:1px solid transparent; transition:border-color .2s; color:var(--off)}
.topo.rolou{border-bottom-color:var(--linha-cl)}
.topo .wrap{display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px}
.marca{display:inline-flex; align-items:center}
.marca img{width:150px; height:auto}
.menu{display:flex; gap:34px; font-size:14.5px; font-weight:500}
.menu a{position:relative; padding:6px 0; color:#d6d5cf; transition:color .2s}
.menu a:hover,.menu a[aria-current="page"]{color:#fff}
.menu a::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--coral); transform:scaleX(0); transform-origin:left; transition:transform .25s}
.menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
.topo .bt{padding:11px 20px; font-size:14px}
.abrir-menu{display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--linha-cl); background:transparent; align-items:center; justify-content:center; cursor:pointer; color:var(--off)}
.abrir-menu svg{width:22px; height:22px}

/* ---------- hero ---------- */
.hero{position:relative; padding:64px 0 88px; overflow:hidden}
.hero::before{content:''; position:absolute; inset:0; background:radial-gradient(60% 70% at 78% 40%, rgba(248,79,53,.10), transparent 70%); pointer-events:none}
.hero .wrap{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:48px; align-items:center}
.hero .rotulo{color:#d6d5cf}
.hero h1{font-size:clamp(3.4rem, 6.4vw, 6rem); margin:22px 0 24px; color:#fff}
.hero h1 em{display:block}
.hero p.lead{font-size:18px; color:#bdbcb6; max-width:30em; margin-bottom:34px}
.hero .acoes{display:flex; flex-wrap:wrap; gap:12px}

.vitrine{position:relative; aspect-ratio:1.12/1; min-height:400px}
.anel{position:absolute; border-radius:50%; border:2px solid var(--coral); box-shadow:0 0 30px rgba(248,79,53,.45), inset 0 0 30px rgba(248,79,53,.25); pointer-events:none}
.vitrine .anel{width:78%; aspect-ratio:1; right:2%; top:2%; opacity:.85}
.disp{position:absolute; margin:0; background:#1c1c1a; box-shadow:0 30px 60px -24px rgba(0,0,0,.8), 0 10px 22px -12px rgba(0,0,0,.6)}
.disp img{width:100%; height:100%; object-fit:cover; object-position:top; background:#fff}
.notebook{left:12%; top:18%; width:68%; z-index:2}
.notebook .tela{background:#1c1c1a; border-radius:14px 14px 4px 4px; padding:2.2% 2.2% 3%; aspect-ratio:16/10.6; border:1px solid #2c2d2b}
.notebook .tela img{border-radius:4px}
.notebook .base{height:12px; margin:0 -7%; border-radius:0 0 14px 14px; background:linear-gradient(#5a5a57,#2e2e2c)}
.notebook .base::after{content:''; display:block; width:18%; height:5px; margin:0 auto; border-radius:0 0 8px 8px; background:#1f1f1d}
.notebook.disp{background:none; box-shadow:none}
.celular{left:2%; top:38%; width:22%; aspect-ratio:9/19; border-radius:26px; padding:7px; z-index:3; border:1px solid #2c2d2b}
.celular img{border-radius:20px}
.tablet{right:0; top:44%; width:30%; aspect-ratio:3/4; border-radius:20px; padding:9px; z-index:3; border:1px solid #2c2d2b}
.tablet img{border-radius:12px}

/* ---------- seções ---------- */
.secao{padding:96px 0}
.cab{margin-bottom:44px}
.cab h2{font-size:clamp(2.6rem, 4.6vw, 4.1rem); margin-top:16px}
.cab p{font-size:17px; color:var(--cinza); max-width:34em; margin-top:16px}
.escuro .cab p{color:#a9a9a3}
.cab-lado{display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:end}
.cab-lado p{margin-top:0}

/* ---------- soluções: cartões alternados (escuro/claro) como no Instagram ---------- */
.sols{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.card-sol{position:relative; border-radius:var(--raio); padding:26px 24px 24px; display:flex; flex-direction:column; min-height:440px; overflow:hidden}
.card-sol.escuro{background:var(--preto)}
.card-sol.claro{background:var(--branco); border:1px solid var(--linha)}
.card-sol .topo-card{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:22px}
.card-sol .cat{font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--cinza)}
.card-sol.escuro .cat{color:#a9a9a3}
.card-sol .n{font-size:13px; font-weight:500; color:var(--cinza)}
.card-sol h3{font-size:2.35rem; margin-bottom:16px}
.card-sol.escuro h3{color:#fff}
.card-sol p{font-size:15px; color:var(--ink-2); margin-bottom:16px}
.card-sol.escuro p{color:#c4c3bd}
.card-sol .itens{list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:26px; flex:1}
.card-sol .itens li{position:relative; padding-left:16px; font-size:14px; line-height:1.4; color:var(--ink-2)}
.card-sol.escuro .itens li{color:#d6d5cf}
.card-sol .itens li::before{content:''; position:absolute; left:0; top:.5em; width:7px; height:7px; border-radius:2px; background:var(--coral)}
.card-sol .bt{align-self:flex-start; padding:12px 18px; font-size:14px; white-space:normal; text-align:left}
.card-sol .bt svg{flex:none}

/* ---------- projetos: lista com miniatura ---------- */
.projetos{display:flex; flex-direction:column; border-top:1px solid var(--linha-cl)}
.proj{display:grid; grid-template-columns:220px minmax(0,1fr) auto; gap:28px; align-items:center; padding:18px 4px; border-bottom:1px solid var(--linha-cl); transition:background .25s, padding .25s}
.proj figure{margin:0; aspect-ratio:16/10; border-radius:10px; overflow:hidden; background:var(--preto-3); border:1px solid var(--linha-cl)}
.proj figure img{width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.proj .info{display:flex; flex-direction:column; gap:3px; min-width:0}
.proj .info small{font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--coral)}
.proj .info b{font-family:var(--t-tit); font-weight:400; font-size:30px; letter-spacing:.01em; line-height:1.05; text-transform:uppercase; color:#fff}
.proj .info span{font-size:15px; color:#a9a9a3; max-width:36em}
.proj .ir{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; white-space:nowrap; padding:11px 18px; border:1.5px solid rgba(245,244,239,.25); border-radius:999px; color:var(--off); transition:background .25s, border-color .25s}
.proj .ir svg{width:16px; height:16px; transition:transform .2s}
.proj:hover{background:var(--preto-2); padding-left:16px; padding-right:16px}
.proj:hover figure img{transform:scale(1.04)}
.proj:hover .ir{background:var(--coral); border-color:var(--coral)}
.proj:hover .ir svg{transform:translateX(3px)}
.lojas{display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:30px; font-size:14px; color:#a9a9a3}
.lojas span{margin-right:6px}
.lojas a{display:block; transition:opacity .2s, transform .2s}
.lojas a:hover{opacity:.85; transform:translateY(-1px)}
.lojas img{height:40px; width:auto}

/* ---------- sobre ---------- */
.sobre .wrap{display:grid; grid-template-columns:1.25fr 1fr; gap:64px; align-items:center}
.sobre h2{font-size:clamp(2.6rem, 4.6vw, 4.1rem); margin:16px 0 22px}
.sobre .texto p{color:var(--ink-2); font-size:16.5px; max-width:34em; margin-bottom:14px}
.sobre .texto .mais{margin-top:10px}
.fatos{display:grid; gap:12px}
.fatos div{background:var(--preto); color:var(--off); border-radius:var(--raio); padding:22px 26px; display:flex; align-items:center; gap:22px}
.fatos b{font-family:var(--t-tit); font-weight:400; font-size:56px; line-height:1; color:var(--coral); min-width:1.6em}
.fatos div:last-child b{font-size:44px}
.fatos span{font-size:15px; color:#c4c3bd; line-height:1.4}

/* ---------- contato ---------- */
.contato{position:relative; padding:110px 0; overflow:hidden}
.contato .wrap{position:relative; z-index:1}
.contato h2{font-size:clamp(2.8rem, 5.2vw, 4.6rem); max-width:11em; color:#fff}
.contato p{color:#c4c3bd; font-size:18px; margin:20px 0 30px; max-width:26em}
.contato .acoes{display:flex; flex-wrap:wrap; align-items:center; gap:22px}
.contato .email{color:var(--off); font-weight:500; border-bottom:1px solid rgba(245,244,239,.35); padding-bottom:2px}
.contato .email:hover{color:var(--coral); border-color:var(--coral)}
.contato .anel{width:620px; height:620px; right:-160px; top:50%; transform:translateY(-50%)}
.contato .marca-3d{position:absolute; width:230px; height:auto; right:7%; top:50%; transform:translateY(-50%); filter:drop-shadow(0 20px 40px rgba(248,79,53,.35)); z-index:0}

/* ---------- rodapé ---------- */
.rodape{background:#070807; color:#bdbcb6; padding:60px 0 26px; font-size:14.5px; border-top:1px solid var(--linha-cl)}
.rodape .colunas{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px}
.rodape a.marca{display:inline-flex; margin-bottom:14px; padding:0}
.rodape a.marca img{width:128px}
.rodape p{max-width:22em; color:#8e8e88}
.rodape b{display:block; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--off); margin-bottom:14px}
.rodape a{display:block; padding:3px 0; color:#bdbcb6; transition:color .2s}
.rodape a:hover{color:var(--coral)}
.rodape .legal{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:44px; padding-top:22px; border-top:1px solid var(--linha-cl); font-size:13px; color:#7c7c76}

/* ---------- Microsoft 365 / e-mail corporativo (dentro de soluções) ---------- */
.ms{margin-top:16px; background:var(--preto); color:var(--off); border-radius:var(--raio); padding:40px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center; position:relative; overflow:hidden; scroll-margin-top:90px}
.ms::after{content:''; position:absolute; width:420px; height:420px; border-radius:50%; border:2px solid rgba(248,79,53,.5); box-shadow:0 0 40px rgba(248,79,53,.2); right:-170px; top:-170px; pointer-events:none}
.ms .rotulo{color:#d6d5cf}
.ms h3{font-size:clamp(2.4rem,4vw,3.6rem); color:#fff; margin:16px 0 16px}
.ms p{color:#c4c3bd; font-size:16px; margin-bottom:24px; max-width:32em}
.ms-nota{display:block; margin-top:18px; font-size:12.5px; color:#8e8e88; max-width:34em; line-height:1.5}
.ms-lista{list-style:none; display:grid; gap:10px; position:relative; z-index:1}
.ms-lista li{background:var(--preto-2); border:1px solid var(--linha-cl); border-radius:14px; padding:14px 18px; display:flex; flex-direction:column; gap:2px}
.ms-lista b{font-size:15px; color:#fff; font-weight:600; display:flex; align-items:center; gap:10px}
.ms-lista b::before{content:''; width:8px; height:8px; border-radius:2px; background:var(--coral); flex:none}
.ms-lista span{font-size:13.5px; color:#a9a9a3; padding-left:18px}
.rodape .legal .marcas{flex-basis:100%; font-size:12px; color:#5f5f5a}

/* ---------- botão flutuante de WhatsApp (só no celular) ---------- */
.wa-flut{display:none}

/* ---------- faixa de cookies ---------- */
.faixa-cookies{position:fixed; z-index:70; left:50%; bottom:20px; transform:translate(-50%,140%); width:min(720px,calc(100% - 32px)); background:var(--preto-2); color:var(--off); border:1px solid var(--linha-cl); border-radius:16px; padding:16px 18px; display:flex; align-items:center; gap:18px; box-shadow:0 20px 50px -20px rgba(0,0,0,.8); transition:transform .3s ease}
.faixa-cookies.on{transform:translate(-50%,0)}
.faixa-cookies p{font-size:14px; line-height:1.5; color:#c4c3bd; flex:1}
.faixa-cookies p a{color:var(--off); text-decoration:underline; text-underline-offset:2px}
.fc-acoes{display:flex; gap:8px; flex:none}
.fc-acoes button{font:600 14px/1 var(--t-txt); border-radius:999px; padding:12px 18px; cursor:pointer; border:1.5px solid rgba(245,244,239,.3); background:transparent; color:var(--off)}
.fc-acoes .fc-sim{background:var(--coral); border-color:var(--coral); color:#fff}
.fc-acoes button:hover{filter:brightness(1.08)}
.rodape .legal .legal-links a{display:inline; padding:0; color:#9c9c96}
.rodape .legal .legal-links a:hover{color:var(--coral)}
.politica{max-width:760px}
.politica h2{font-size:clamp(1.9rem,3.4vw,2.6rem); margin:44px 0 14px}
.politica p,.politica li{color:var(--ink-2); font-size:16.5px; margin-bottom:12px}
.politica ul{padding-left:20px; margin-bottom:12px}
.politica table{width:100%; border-collapse:collapse; margin:8px 0 18px; font-size:15px}
.politica th,.politica td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--linha); vertical-align:top}
.politica th{font-weight:600; background:var(--branco)}
.politica a{color:var(--coral); font-weight:600}
.politica .tab{overflow-x:auto}

/* ---------- página interna (sobre) ---------- */
.trilha{font-size:13.5px; color:#a9a9a3; margin-bottom:22px}
.trilha a:hover{color:var(--coral)}
.interna-hero{padding:72px 0 80px}
.interna-hero h1{font-size:clamp(3rem, 5.6vw, 5.2rem); margin:18px 0 20px; max-width:12em; color:#fff}
.interna-hero p{font-size:18px; color:#bdbcb6; max-width:36em}
.duas{display:grid; grid-template-columns:1fr 1.2fr; gap:64px}
.duas h2{font-size:clamp(2.4rem, 4vw, 3.6rem); margin-top:16px}
.duas p{color:var(--ink-2); font-size:16.5px; margin-bottom:16px}
.duas p a{color:var(--coral); font-weight:600}
.tit-sec{font-size:clamp(2.4rem,4vw,3.6rem); margin-top:16px}
.principios{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:40px}
.principios div{border-radius:var(--raio); padding:28px 26px}
.principios div:nth-child(odd){background:var(--preto); color:var(--off)}
.principios div:nth-child(even){background:var(--branco); border:1px solid var(--linha)}
.principios h3{font-size:2rem; margin-bottom:12px}
.principios div:nth-child(odd) h3{color:#fff}
.principios p{font-size:15.5px; color:var(--cinza)}
.principios div:nth-child(odd) p{color:#c4c3bd}

/* ---------- entrada suave ---------- */
.rv{opacity:0; transform:translateY(18px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1; transform:none}
.rv.d1{transition-delay:.08s} .rv.d2{transition-delay:.16s} .rv.d3{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none; transition:none}
  *,*::before,*::after{transition-duration:.01ms!important; animation-duration:.01ms!important}
}

/* ---------- responsivo ---------- */
@media (max-width:1100px){
  .menu{gap:24px}
  .sols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card-sol{min-height:0}
  .contato .marca-3d{width:170px; right:3%; opacity:.6}
}
@media (max-width:920px){
  .wrap{padding:0 22px}
  .topo .wrap{height:66px}
  .marca img{width:132px}
  .menu{display:none; position:absolute; top:66px; left:0; right:0; flex-direction:column; gap:0; background:var(--preto); border-bottom:1px solid var(--linha-cl); padding:8px 22px 18px; box-shadow:0 20px 30px -24px rgba(0,0,0,.8)}
  .menu a{padding:14px 0; border-bottom:1px solid var(--linha-cl); font-size:16px}
  .menu a::after{display:none}
  .topo.aberto .menu{display:flex}
  .topo .bt{display:none}
  .abrir-menu{display:inline-flex}
  .hero{padding:32px 0 48px}
  .hero .wrap{grid-template-columns:1fr; gap:24px}
  .vitrine{min-height:0; max-width:600px; width:100%; margin:0 auto}
  .cab-lado{grid-template-columns:1fr; gap:14px}
  .proj{grid-template-columns:170px minmax(0,1fr); gap:20px}
  .proj .ir{display:none}
  .sobre .wrap{grid-template-columns:1fr; gap:32px}
  .contato{padding:80px 0}
  .contato .marca-3d{display:none}
  .contato .anel{width:420px; height:420px; right:-220px}
  .rodape .colunas{grid-template-columns:1fr 1fr}
  .duas{grid-template-columns:1fr; gap:20px}
  .principios{grid-template-columns:1fr}
  .secao{padding:72px 0}
  .ms{grid-template-columns:1fr; padding:30px 24px; gap:26px}
  .ms .bt,.contato .bt{white-space:normal; text-align:left}
  .rodape a{padding:8px 0}
  .topo .marca{padding:6px 0}
  .mais{padding:10px 0}
  .contato .email{padding:10px 0 4px}
  .trilha a{display:inline-block; padding:10px 0}
  .faixa-cookies{flex-direction:column; align-items:stretch; gap:12px; bottom:calc(84px + env(safe-area-inset-bottom))}
  .fc-acoes button{flex:1}
  .wa-flut{display:flex; position:fixed; z-index:60; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; align-items:center; justify-content:center; box-shadow:0 10px 26px -8px rgba(0,0,0,.55)}
  .wa-flut svg{width:30px; height:30px}
  .rodape{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
}
@media (max-width:560px){
  .hero h1{font-size:3.4rem}
  .hero p.lead{font-size:16.5px}
  .hero .acoes .bt{flex:1 1 100%; justify-content:center; white-space:normal; text-align:center}
  .sols{grid-template-columns:1fr}
  .card-sol h3{font-size:2.2rem}
  .proj{grid-template-columns:104px minmax(0,1fr); gap:14px; padding:14px 0}
  .proj:hover{padding-left:0; padding-right:0}
  .proj .info b{font-size:24px}
  .proj .info span{font-size:13.5px}
  .proj .info small{font-size:11.5px}
  .card-sol .cat{font-size:12px}
  .rotulo{font-size:12px}
  .fatos div{flex-direction:column; align-items:flex-start; gap:6px; padding:20px 22px}
  .fatos b,.fatos div:last-child b{font-size:44px; min-width:0}
  .contato .anel{width:360px; height:360px; right:-250px; opacity:.6}
  .wrap{padding:0 18px}
  .hero h1{font-size:clamp(2.7rem, 13vw, 3.4rem)}
  .cab h2,.sobre h2{font-size:clamp(2.3rem, 11vw, 2.9rem)}
  .contato h2{font-size:clamp(2.4rem, 11.5vw, 3.1rem)}
  .secao{padding:60px 0}
  .cab{margin-bottom:28px}
  .cab p{font-size:16px}
  /* soluções viram carrossel de arrastar (como os posts do Instagram) */
  .sols{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin:0 -18px; padding:0 18px 6px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .sols::-webkit-scrollbar{display:none}
  .card-sol{flex:0 0 84%; scroll-snap-align:center; padding:24px 20px 22px}
  .sols .rv{opacity:1; transform:none}
  .arraste{display:flex}
  .ms{padding:26px 20px; margin-top:14px}
  .ms h3{font-size:2.5rem}
  .ms-lista li{padding:12px 14px}
  .rodape .colunas{grid-template-columns:1fr 1fr; gap:28px 20px}
  .rodape .colunas>div:first-child,.rodape .colunas>div:last-child{grid-column:1/-1}
  .rodape a{padding:7px 0}
  .lojas{gap:12px}
  .lojas span{flex-basis:100%}
  .lojas img{height:38px}
}
.arraste{display:none; align-items:center; justify-content:center; gap:8px; margin-top:14px; font-size:12.5px; color:var(--cinza)}
.arraste i{width:7px; height:7px; border-radius:2px; background:#cfcdc6; transition:background .2s, width .2s}
.arraste i.on{background:var(--coral); width:18px}