/* Modelo M3 Hub para assistência técnica — foco em converter: chamar no WhatsApp ou ir até a loja.
   Tipografia: Montserrat (títulos e números) + Inter (corpo), as duas hospedadas no próprio site. */
:root {
  --ink: #141414; --ink2: #4d5258; --bg: #fff; --soft: #f4f5f6; --line: rgba(0, 0, 0, .12);
  --zap: var(--cor, #138a43); --zap-h: var(--cor-h, #0f7339); --estrela: #e8a317;
  --sans: "Inter Reserva", "Helvetica Neue", Helvetica, Arial, sans-serif; --tit: "Montserrat", "Inter Reserva", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --w: min(1180px, 100% - 40px); --raio: 18px; --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.05rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, dt, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.w { width: var(--w); margin: 0 auto; }
h1, h2, h3, .numeros b, .nota b, .marca { font-family: var(--tit); }
h1, h2 { font-weight: 700; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.6vw, 4.8rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); line-height: 1.06; letter-spacing: -.03em; }
h3 { font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.38rem); line-height: 1.2; letter-spacing: -.02em; }
.sub { color: var(--ink2); font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 52ch; }
section { padding: clamp(56px, 9vw, 112px) 0; }
.soft { background: var(--soft); }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 26px; border-radius: 999px; font: 500 1rem/1 var(--sans); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background-color .25s, transform .3s var(--ease), border-color .25s; }
.btn:active { transform: scale(.98); }
.btn svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.btn-zap { background: var(--zap); color: #fff; }
.btn-zap:hover { background: var(--zap-h); }
.btn-borda { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-borda:hover { background: var(--ink); color: #fff; }
.btn-claro { background: #fff; color: var(--ink); }
.btn-claro:hover { background: var(--soft); }
.btn-mini { min-height: 42px; padding: 10px 20px; font-size: .92rem; }
.link { border-bottom: 1px solid currentColor; padding-bottom: 2px; text-decoration: none; }

/* topo */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.topo .w { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.marca { font-weight: 700; font-size: 1.45rem; letter-spacing: -.03em; text-decoration: none; margin-right: auto; }
.nav { display: none; gap: 28px; font-size: .94rem; }
.nav a { text-decoration: none; color: var(--ink2); }
.nav a:hover { color: var(--ink); }
@media (min-width: 900px) { .nav { display: flex; } }

/* primeira dobra */
.heroi { padding: clamp(32px, 6vw, 72px) 0 clamp(40px, 6vw, 80px); }
.heroi .w { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .heroi .w { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; } }
.heroi h1 { max-width: 15ch; }
.heroi .sub { margin-top: 22px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.selos { display: grid; gap: 10px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .98rem; }
@media (min-width: 560px) { .selos { grid-template-columns: 1fr 1fr; } }
.selos li { position: relative; padding-left: 26px; line-height: 1.4; }
.selos li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 12px; height: 7px; border-left: 2px solid var(--zap); border-bottom: 2px solid var(--zap); transform: rotate(-45deg); }
.vitrine { position: relative; }
.vitrine img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--pos, 50% 50%); border-radius: var(--raio); background: var(--soft); }
.vitrine .onde { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; gap: 2px; padding: 14px 18px; border-radius: 14px; background: rgba(255, 255, 255, .95); font-size: .94rem; }
.vitrine .onde b { font-weight: 500; }
.vitrine .onde span { color: var(--ink2); }

/* números de autoridade */
.numeros { padding: clamp(36px, 5vw, 60px) 0; background: var(--cor, var(--ink)); color: #fff; }
.numeros ul { width: var(--w); margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
@media (min-width: 800px) { .numeros ul { grid-template-columns: repeat(4, 1fr); } }
.numeros li { display: grid; gap: 4px; }
.numeros b { font-weight: 700; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.025em; line-height: 1; }
.numeros span { color: rgba(255, 255, 255, .78); font-size: .95rem; }

/* serviços */
.cabeca { display: grid; gap: 16px; margin-bottom: clamp(32px, 5vw, 56px); }
.cards { display: grid; gap: 16px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--raio); overflow: hidden; }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card .corpo { display: flex; flex-direction: column; gap: 10px; padding: 22px; flex: 1; }
.card p { color: var(--ink2); font-size: 1rem; }
.card .preco { color: var(--ink); font-weight: 500; }
.card .meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .9rem; color: var(--ink2); }
.card .btn { margin-top: auto; align-self: flex-start; }
.card .corpo > :last-child { margin-top: auto; }
.card .num { font-size: .78rem; font-weight: 500; letter-spacing: .14em; color: var(--ink2); }

/* como funciona */
.passos { display: grid; gap: 28px; counter-reset: p; }
@media (min-width: 700px) { .passos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .passos:has(li:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); } .passos:not(:has(li:nth-child(4):last-child)) { grid-template-columns: repeat(3, 1fr); } }
.passos li { padding-top: 20px; border-top: 1px solid var(--ink); display: grid; gap: 8px; align-content: start; }
.passos .n { font-size: .78rem; font-weight: 500; letter-spacing: .16em; color: var(--ink2); }
.passos p { color: var(--ink2); }

/* avaliações */
.nota { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin-bottom: 8px; }
.nota b { font-weight: 700; font-size: clamp(3rem, 7vw, 5.6rem); letter-spacing: -.03em; line-height: 1; }
.nota .est { color: var(--estrela); font-size: 1.6rem; letter-spacing: 3px; }
.nota span.t { color: var(--ink2); }
.elogios { display: grid; gap: 16px; margin-top: 8px; }
@media (min-width: 760px) { .elogios { grid-template-columns: repeat(2, 1fr); } }
.elogio { background: var(--soft); border-radius: var(--raio); padding: clamp(22px, 3vw, 34px); display: grid; gap: 16px; align-content: space-between; }
.elogio blockquote { margin: 0; font-family: var(--tit); font-weight: 500; font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.3; letter-spacing: -.02em; }
.elogio footer { font-size: .86rem; color: var(--ink2); }
.fonte { margin-top: 20px; font-size: .9rem; color: var(--ink2); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fonte a { color: var(--ink); }

/* a loja e como chegar */
.loja .w { display: grid; gap: 40px; }
@media (min-width: 900px) { .loja .w.duas { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: start; } }
.loja .texto { display: grid; gap: 20px; align-content: start; }
.loja .texto p { color: var(--ink2); }
.dados { display: grid; gap: 18px; margin-top: 6px; padding-top: 22px; border-top: 1px solid var(--line); }
.dados dt { font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); margin-bottom: 4px; }
.dados dd { line-height: 1.5; }
.fotos { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.fotos figure { overflow: hidden; border-radius: var(--raio); background: #e6e8ea; }
.fotos img { width: 100%; height: 100%; object-fit: cover; }
.fotos .f1 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.fotos .f2, .fotos .f3 { aspect-ratio: 1 / 1; }
.fotos:has(.f1:last-child) .f1 { aspect-ratio: 4 / 3; }
.mapa { grid-column: 1 / -1; width: 100%; height: clamp(280px, 42vw, 440px); border: 0; border-radius: var(--raio); background: #e6e8ea; }

/* perguntas */
.faq { border-top: 1px solid var(--line); max-width: 920px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; cursor: pointer; list-style: none; font-size: clamp(1.1rem, 1.6vw, 1.35rem); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 300; font-size: 1.8rem; line-height: 1; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 26px; color: var(--ink2); max-width: 62ch; }

/* chamada final */
.fim { background: var(--cor, var(--ink)); color: #fff; }
.fim .w { display: grid; gap: 28px; }
.fim h2 { max-width: 16ch; }
.fim .acoes { margin-top: 4px; }
.fim p { color: rgba(255, 255, 255, .78); max-width: 52ch; }
.fim .btn-borda { border-color: rgba(255, 255, 255, .6); color: #fff; }
.fim .btn-borda:hover { background: #fff; color: var(--ink); }

/* rodapé */
.rodape { padding: 28px 0 100px; font-size: .88rem; color: var(--ink2); }
.rodape .w { display: flex; flex-wrap: wrap; gap: 10px 32px; }
.rodape a { color: var(--ink); }
.rodape .aviso { flex-basis: 100%; }
@media (min-width: 761px) { .rodape { padding-bottom: 36px; } }

/* barra fixa do celular: WhatsApp, ligar e como chegar */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); }
.barra .btn { min-height: 48px; padding: 10px 8px; font-size: .92rem; }
@media (min-width: 761px) { .barra { display: none; } }
@media (max-width: 760px) { .topo .btn { display: none; } }

/* entrada discreta */
@media (prefers-reduced-motion: no-preference) {
  .card, .elogio, .passos li { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
  .card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .25); }
}

/* faixa de aviso (demo) */
.faixa { background: #fff3cd; color: #5c4400; text-align: center; padding: 10px 20px; font-size: .9rem; border-bottom: 1px solid #ecd9a0; }

/* preços: tabela por aparelho, "a partir de" e prazo, sempre com o botão do WhatsApp */
.precos-grupos { display: grid; gap: 20px; }
@media (min-width: 900px) { .precos-grupos { grid-template-columns: repeat(2, 1fr); } }
.grupo { background: #fff; border: 1px solid var(--line); border-radius: var(--raio); padding: clamp(20px, 3vw, 32px); }
.grupo h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); margin-bottom: 8px; }
.linha { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 16px 0; border-top: 1px solid var(--line); align-items: baseline; }
.linha:first-of-type { margin-top: 12px; }
.linha .n { font-weight: 500; }
.linha .p { font-family: var(--tit); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; text-align: right; white-space: nowrap; }
.linha .p small { font-family: var(--sans); font-weight: 400; font-size: .78rem; color: var(--ink2); letter-spacing: 0; margin-right: 6px; }
.linha .t { grid-column: 1 / -1; font-size: .9rem; color: var(--ink2); }
.precos-rodape { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.precos-rodape p { color: var(--ink2); max-width: 60ch; font-size: .95rem; }

/* Hero escuro com a foto do trabalho ao fundo (ideia A) */
.heroi.escuro { position: relative; isolation: isolate; background: #0b0d10; color: #fff; min-height: min(640px, 88vh); display: grid; align-items: end; padding: clamp(72px, 12vw, 150px) 0 clamp(36px, 5vw, 64px); }
.heroi.escuro .fundo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); opacity: .6; }
.heroi.escuro::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #0b0d10 6%, rgba(11,13,16,.55) 55%, rgba(11,13,16,.25)); }
.heroi.escuro .w { display: block; }
.heroi.escuro .texto { max-width: 760px; }
.heroi.escuro h1 { max-width: 14ch; font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: 1; }
.heroi.escuro .sub { color: rgba(255,255,255,.86); }
.heroi.escuro .btn-borda { color: #fff; border-color: rgba(255,255,255,.55); background: transparent; }
.heroi.escuro .selos { border-top-color: rgba(255,255,255,.22); color: rgba(255,255,255,.92); }
.heroi.escuro .selos li::before { border-color: #ffb21a; }
.heroi .etiqueta { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 14px; border-radius: 99px; background: rgba(255,255,255,.14); font-size: .86rem; font-weight: 500; }
.heroi .etiqueta i { width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 0 rgba(255,59,48,.6); animation: pulsa 2s infinite; }
@keyframes pulsa { 70% { box-shadow: 0 0 0 9px rgba(255,59,48,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); } }
@media (prefers-reduced-motion: reduce) { .heroi .etiqueta i { animation: none; } }
.heroi.escuro .onde { margin-top: 22px; display: grid; gap: 2px; font-size: .94rem; color: rgba(255,255,255,.78); }
.heroi.escuro .onde b { font-weight: 500; color: #fff; }
.heroi:not(.escuro) .onde { display: none; }
/* Vitrine de reparos: um card por aparelho, com foto e preço (ideia C) */
.vitrine-precos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 26px; }
@media (min-width: 900px) { .vitrine-precos { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.vcard { display: block; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: var(--raio); overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.vcard:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.vcard img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--soft); }
.vcard .vc { display: grid; gap: 2px; padding: 14px 16px 16px; }
.vcard small { color: var(--ink2); font-size: .8rem; }
.vcard b { font-family: var(--tit); font-weight: 800; font-size: 1.15rem; line-height: 1.15; }
.vcard .vp { color: var(--zap); font-weight: 600; margin-top: 4px; }
.vcard .vt { font-size: .85rem; color: var(--ink2); }
.vcard .vb { margin-top: 8px; font-weight: 600; font-size: .92rem; }

/* Aparelhos no boleto */
.boleto { background: var(--cor-h, var(--ink)); color: #fff; }
.boleto .sub { color: rgba(255,255,255,.82); }
.cond { display: grid; gap: 10px; margin-bottom: 28px; }
@media (min-width: 700px) { .cond { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } }
.cond li { position: relative; padding: 14px 16px 14px 44px; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; font-weight: 500; }
.cond li::before { content: ""; position: absolute; left: 18px; top: 19px; width: 12px; height: 7px; border-left: 2px solid #ffb21a; border-bottom: 2px solid #ffb21a; transform: rotate(-45deg); }
.boleto .vcard { color: var(--ink); }
.boleto .precos-rodape p { color: rgba(255,255,255,.7); }
.boleto .btn-zap, .fim .btn-zap { background: #fff; color: var(--cor, var(--ink)); }
.fim .btn-borda:hover { color: var(--cor, var(--ink)); }

/* Topo na cor da marca, com o logo em branco */
.topo.azul { background: var(--cor); border-bottom-color: rgba(255,255,255,.14); -webkit-backdrop-filter: none; backdrop-filter: none; }
.topo.azul .marca img { height: 46px; width: auto; }
.topo.azul .nav a { color: rgba(255,255,255,.82); }
.topo.azul .nav a:hover { color: #fff; }
.topo.azul .btn-zap { background: #fff; color: var(--cor); }
.topo.azul .btn-zap:hover { background: #e9eefc; }
.nav a, .topo .btn-mini { white-space: nowrap; }
@media (max-width: 1020px) { .nav { display: none; } .topo .btn-mini { margin-left: auto; } }
/* Quatro serviços: quatro colunas (ou 2x2 em telas médias), sem sobrar um card sozinho */
@media (min-width: 980px) { .cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); } }

.card .midia { position: relative; }
.card .midia video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Preço dentro do cartão do serviço (o que a gente conserta e quanto custa, juntos) */
.card .preco { font-family: var(--tit); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; color: var(--zap); line-height: 1.1; }
.card .preco small { font-family: var(--sans); font-weight: 400; font-size: .82rem; color: var(--ink2); letter-spacing: 0; margin-right: 4px; }

/* Aparelhos no boleto: cartão com simulação das parcelas (sem JavaScript, só radio + CSS) */
.bcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 26px; }
@media (min-width: 760px) { .bcards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .bcards { grid-template-columns: repeat(5, 1fr); } }
.catalogo .bcards { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .catalogo .bcards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .catalogo .bcards { grid-template-columns: repeat(4, 1fr); } }
.bcard { background: #fff; color: var(--ink); border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); }
.bcard img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--soft); }
.bcard .bc { display: grid; gap: 8px; padding: 14px 14px 16px; flex: 1; align-content: start; }
.bcard h3 { font-size: 1.05rem; line-height: 1.15; }
.bcard .bp { font-family: var(--tit); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1; }
.bcard .bp small { font-family: var(--sans); font-weight: 400; font-size: .78rem; color: var(--ink2); letter-spacing: 0; }
.bcard .be { font-size: .82rem; color: var(--ink2); line-height: 1.35; }
.bcard .sim input { position: absolute; opacity: 0; pointer-events: none; }
.bcard .ops { display: flex; gap: 6px; margin: 2px 0 8px; }
.bcard .ops label { flex: 1; text-align: center; padding: 7px 0; border: 1px solid var(--line); border-radius: 10px; font-weight: 600; font-size: .88rem; cursor: pointer; }
.bcard .res { display: none; background: var(--soft); border-radius: 12px; padding: 10px 12px; }
.bcard .res b { display: block; font-family: var(--tit); font-weight: 800; font-size: 1.15rem; color: var(--zap); }
.bcard .res span { font-size: .78rem; color: var(--ink2); }
.bcard .o1:checked ~ .p1, .bcard .o2:checked ~ .p2, .bcard .o3:checked ~ .p3 { display: block; }
.bcard .o1:checked ~ .ops .l1, .bcard .o2:checked ~ .ops .l2, .bcard .o3:checked ~ .ops .l3 { background: var(--zap); border-color: var(--zap); color: #fff; }
.bcard .o1:focus-visible ~ .ops .l1, .bcard .o2:focus-visible ~ .ops .l2, .bcard .o3:focus-visible ~ .ops .l3 { outline: 2px solid var(--ink); outline-offset: 2px; }
.bcard .btn { justify-content: center; text-align: center; font-size: .9rem; padding: 12px 14px; margin-top: 4px; }
.boleto .bcard .btn-zap { background: var(--zap); color: #fff; }
.boleto .precos-rodape .btn-borda { color: #fff; border-color: rgba(255,255,255,.6); }
.boleto .precos-rodape .btn-borda:hover { background: #fff; color: var(--cor, var(--ink)); }

/* Avaliações no estilo do Google: logo, contagem e só as de 5 estrelas */
.gresumo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--raio); margin-bottom: 20px; }
.glogo { width: 44px; height: 44px; flex: none; }
.gtxt { display: grid; margin-right: auto; line-height: 1.3; }
.gtxt b { font-family: var(--tit); font-weight: 800; font-size: 1.25rem; }
.gtxt span { color: var(--ink2); font-size: .95rem; }
.gnota { color: var(--ink) !important; font-weight: 600; }
.gnota i { font-style: normal; color: #fbbc04; letter-spacing: 2px; }
.gcards { display: grid; gap: 14px; }
@media (min-width: 760px) { .gcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .gcards { grid-template-columns: repeat(3, 1fr); } }
.gcard { background: #fff; border: 1px solid var(--line); border-radius: var(--raio); padding: 20px; display: grid; gap: 10px; align-content: start; }
.gtopo { display: flex; align-items: center; gap: 12px; }
.gav { width: 42px; height: 42px; border-radius: 50%; background: #e8eaed url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239aa0a6'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-3.3 0-8 1.7-8 5v1h16v-1c0-3.3-4.7-5-8-5Z'/%3E%3C/svg%3E") center / 62% no-repeat; flex: none; font-size: 0; }
.gquem { display: grid; line-height: 1.25; margin-right: auto; }
.gquem b { font-weight: 600; font-size: .98rem; }
.gquem small { color: var(--ink2); font-size: .78rem; }
.gmini { width: 22px; height: 22px; flex: none; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%3E%3Cpath%20fill='%23EA4335'%20d='M24%209.5c3.54%200%206.71%201.22%209.21%203.6l6.85-6.85C35.9%202.38%2030.47%200%2024%200%2014.62%200%206.51%205.38%202.56%2013.22l7.98%206.19C12.43%2013.72%2017.74%209.5%2024%209.5z'/%3E%3Cpath%20fill='%234285F4'%20d='M46.98%2024.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58%202.96-2.26%205.48-4.78%207.18l7.73%206c4.51-4.18%207.09-10.36%207.09-17.65z'/%3E%3Cpath%20fill='%23FBBC05'%20d='M10.53%2028.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92%2016.46%200%2020.12%200%2024c0%203.88.92%207.54%202.56%2010.78l7.97-6.19z'/%3E%3Cpath%20fill='%2334A853'%20d='M24%2048c6.48%200%2011.93-2.13%2015.89-5.81l-7.73-6c-2.15%201.45-4.92%202.3-8.16%202.3-6.26%200-11.57-4.22-13.47-9.91l-7.98%206.19C6.51%2042.62%2014.62%2048%2024%2048z'/%3E%3C/svg%3E") center / contain no-repeat; }
.gest { color: #fbbc04; letter-spacing: 3px; font-size: 1.15rem; line-height: 1; }
.gcard blockquote { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink); }
/* Hero: o bloco de baixo (vantagens e endereço) usa a largura toda e cada vantagem cabe numa linha */
.heroi.escuro .texto { max-width: none; }
.heroi.escuro .selos { max-width: 1060px; gap: 12px 48px; }
@media (min-width: 900px) { .heroi.escuro .selos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.heroi.escuro .selos li { text-wrap: balance; }
/* Faixa de números centralizada */
.numeros ul { text-align: center; }
.numeros li { justify-items: center; align-content: start; }

/* Carrossel de avaliações do Google */
.gcar { position: relative; }
.gtrilho { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; outline-offset: 4px; }
.gtrilho::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .gtrilho { grid-auto-columns: calc((100% - 14px) / 2); } }
@media (min-width: 1100px) { .gtrilho { grid-auto-columns: calc((100% - 28px) / 3); } }
.gtrilho .gcard { scroll-snap-align: start; align-content: start; }
.gseta { display: none; position: absolute; top: 42%; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.14); }
.gseta.ant { left: -14px; } .gseta.prox { right: -14px; }
.gcar.js .gseta { display: grid; place-items: center; }
.gcar.uma .gseta { display: none; }
.gbolas { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.gbolas button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #c9cdd2; cursor: pointer; }
.gbolas button.on { background: var(--zap); transform: scale(1.25); }
.gest .off { color: #d4d7db; }
@media (max-width: 760px) { .gseta.ant { left: 4px; } .gseta.prox { right: 4px; } }
/* Marca muito escura (ex.: Conectau): botão principal branco sobre o hero */
.marca-escura .heroi.escuro .btn-zap { background: #fff; color: var(--cor); }
.marca-escura .topo.azul .marca img { height: 60px; }

.heroi.escuro h1.longo { max-width: 18ch; font-size: clamp(2.2rem, 5.2vw, 4.2rem); line-height: 1.04; }

/* Acompanhamento pelo sistema da loja (esboço da tela) */
.acomp-grade { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .acomp-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.acomp-pontos { display: grid; gap: 12px; margin: 22px 0 28px; }
.acomp-pontos li { position: relative; padding-left: 30px; line-height: 1.45; }
.acomp-pontos li::before { content: ""; position: absolute; left: 3px; top: .35em; width: 13px; height: 7px; border-left: 2px solid var(--zap); border-bottom: 2px solid var(--zap); transform: rotate(-45deg); }
.acomp-tela img { width: 100%; height: auto; border-radius: var(--raio); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.mock { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 44px rgba(0,0,0,.16); overflow: hidden; max-width: 460px; margin: 0 auto; }
.mock-topo { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: var(--cor); color: rgba(255,255,255,.9); font-size: .8rem; }
.mock-topo i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); }
.mock-topo span { margin-left: 10px; }
.mock-corpo { padding: 20px 20px 22px; display: grid; gap: 16px; }
.mock-os { display: grid; gap: 2px; }
.mock-os b { font-family: var(--tit); font-weight: 800; font-size: 1.15rem; }
.mock-os span { color: var(--ink2); font-size: .92rem; }
.mock-linha { display: grid; gap: 0; }
.mock-linha li { position: relative; display: flex; gap: 14px; padding-bottom: 16px; }
.mock-linha li:last-child { padding-bottom: 0; }
.mock-linha li::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--line); }
.mock-linha li:last-child::before { display: none; }
.mock-linha .bola { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); background: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: #fff; }
.mock-linha .feito .bola { background: #1e9e57; border-color: #1e9e57; }
.mock-linha .feito::before { background: #1e9e57; }
.mock-linha .atual .bola { border-color: var(--cor); box-shadow: 0 0 0 4px rgba(0,0,0,.08); background: var(--cor); }
.mock-linha .tx { display: grid; gap: 1px; line-height: 1.3; }
.mock-linha .tx b { font-weight: 600; font-size: .95rem; }
.mock-linha .depois .tx b { color: var(--ink2); font-weight: 500; }
.mock-linha small { color: var(--ink2); font-size: .8rem; }
.mock-rot { font-size: .8rem; color: var(--ink2); margin: 0; }
.mock-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mock-fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; box-shadow: none; }
.acomp-nota { margin-top: 14px; font-size: .82rem; color: var(--ink2); text-align: center; }

/* Tema com cor de destaque separada da cor da marca (ex.: Conectau = preto, branco e amarelo) */
.tema-destaque { --zap: var(--destaque); --zap-h: var(--destaque-h); }
.tema-destaque .btn-zap, .tema-destaque .heroi.escuro .btn-zap, .tema-destaque .topo.azul .btn-zap, .tema-destaque .boleto .btn-zap, .tema-destaque .fim .btn-zap, .tema-destaque .bcard .btn-zap { background: var(--destaque); color: var(--destaque-ink); }
.tema-destaque .btn-zap:hover, .tema-destaque .topo.azul .btn-zap:hover { background: var(--destaque-h); }
.tema-destaque .card .preco, .tema-destaque .bcard .res b { color: var(--ink); }
.tema-destaque .card .preco { box-shadow: inset 0 -.42em 0 var(--destaque); display: inline-block; align-self: start; padding: 0 .1em; }
.tema-destaque .card .preco small { box-shadow: none; }
.tema-destaque .numeros b { color: var(--destaque); }
.tema-destaque .bcard .ops label { border-color: #d6d9dd; }
.tema-destaque .bcard .o1:checked ~ .ops .l1, .tema-destaque .bcard .o2:checked ~ .ops .l2, .tema-destaque .bcard .o3:checked ~ .ops .l3 { background: var(--destaque); border-color: var(--destaque); color: var(--destaque-ink); }
.tema-destaque .bcard .res { background: #fff7e0; }
.tema-destaque .gbolas button.on { background: var(--destaque); box-shadow: 0 0 0 2px var(--ink) inset; }
.tema-destaque .acomp-pontos li::before, .tema-destaque .selos li::before { border-color: var(--destaque); }
.tema-destaque .btn-borda { border-color: var(--ink); }
.tema-destaque .mock-linha .feito .bola { background: var(--destaque); border-color: var(--destaque); color: var(--destaque-ink); }
.tema-destaque .mock-linha .feito::before { background: var(--destaque); }
.tema-destaque .mock-linha .atual .bola { background: var(--cor); border-color: var(--destaque); box-shadow: 0 0 0 4px rgba(243,185,61,.35); }
.tema-destaque .gseta { border-color: var(--ink); }
.tema-destaque .topo.azul .marca img { height: 60px; }
.topo.azul .marca { flex: none; }
.topo.azul .marca img { max-width: none; width: auto; }
@media (max-width: 520px) { .marca-escura .topo.azul .marca img, .tema-destaque .topo.azul .marca img { height: 46px; } }
@media (max-width: 1180px) { .tema-destaque .nav { display: none; } .tema-destaque .topo .btn-mini { margin-left: auto; } }

/* Triagem express: gráfico do que mais chega + passo a passo que termina numa mensagem pronta no WhatsApp */
.tri { background: var(--cor, var(--ink)); color: #fff; }
.tri .sub { color: rgba(255,255,255,.8); }
.tri-grade { display: grid; gap: 28px; align-items: start; }
@media (min-width: 960px) { .tri-grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; } }
.tri-stats { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--raio); padding: 24px; display: grid; gap: 18px; justify-items: center; }
.tri-rot { font-family: var(--tit); font-weight: 800; font-size: 1.05rem; text-align: center; }
svg.tri-rosca { width: min(210px, 62vw); aspect-ratio: 1; display: block; overflow: visible; }
.tri-causa { background: var(--soft); border-radius: 14px; padding: 14px 16px; margin-bottom: 18px; display: grid; gap: 6px; }
.tri-causa-d { font-size: .92rem; color: var(--ink2); }
.tri-leg { display: grid; gap: 10px; width: 100%; }
.tri-leg li { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; font-size: .95rem; }
.tri-leg i { width: 12px; height: 12px; border-radius: 3px; }
.tri-leg b { font-family: var(--tit); font-weight: 800; }
.tri-nota { font-size: .8rem; color: rgba(255,255,255,.62); text-align: center; }
.tri-app { background: #fff; color: var(--ink); border-radius: var(--raio); padding: clamp(20px, 3vw, 32px); display: grid; gap: 18px; min-height: 420px; align-content: start; }
.tri-app .tri-nota { color: var(--ink2); }
.tri-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 28px; }
.tri-passo { font-size: .85rem; color: var(--ink2); font-weight: 500; }
.tri-volta { border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; }
.tri-barra { height: 6px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.tri-barra i { display: block; height: 100%; width: 0; background: var(--destaque, var(--zap)); transition: width .3s var(--ease); }
.tri-etapa h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin-bottom: 16px; }
.tri-etapa h3 small { font-family: var(--sans); font-weight: 500; font-size: .8rem; color: var(--ink2); margin-left: 6px; }
.tri-ops { display: flex; flex-wrap: wrap; gap: 10px; }
.tri-ops.col { flex-direction: column; }
.op { font: inherit; cursor: pointer; background: #fff; color: var(--ink); border: 1.5px solid #cfd3d8; border-radius: 14px; padding: 12px 18px; font-weight: 600; text-align: left; transition: border-color .15s, background .15s, transform .15s; }
.op:hover { border-color: var(--ink); transform: translateY(-1px); }
.op.on { background: var(--destaque, var(--zap)); border-color: var(--destaque, var(--zap)); color: var(--destaque-ink, #fff); }
.op b { display: block; font-weight: 700; } .op small { display: block; font-weight: 400; font-size: .82rem; opacity: .75; margin-top: 2px; }
.tri-ops.col .op { width: 100%; }
.op:focus-visible, .tri-volta:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.tri-livre label { display: block; font-size: .9rem; color: var(--ink2); margin-bottom: 8px; }
.tri-linha { display: flex; gap: 10px; flex-wrap: wrap; }
.tri-linha input { flex: 1 1 200px; font: inherit; padding: 12px 14px; border: 1.5px solid #cfd3d8; border-radius: 12px; }
.tri-res { display: grid; gap: 0; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.tri-res div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.tri-res div:first-child { border-top: 0; }
.tri-res dt { color: var(--ink2); font-size: .88rem; } .tri-res dd { margin: 0; font-weight: 600; }
.tri-enviar { width: 100%; justify-content: center; text-align: center; }
.tri-etapa [hidden], .tri [hidden] { display: none !important; }
/* Cartão da avaliação do tamanho do próprio texto (sem sobra em branco) */
/* Cartões do mesmo tamanho (baixos): texto longo corta em 2 linhas e ganha "Ver mais" (abre a avaliação inteira) */
.gtrilho { align-items: stretch; }
.gtrilho .gcard { align-self: stretch; align-content: start; grid-template-rows: auto auto 1fr auto; }
.gcard { padding: 12px 18px 12px; gap: 4px; }
.gcard blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: .95rem; line-height: 1.45; height: 2.9em; padding: 0; }
.gmais { justify-self: start; background: none; border: 0; padding: 0; line-height: 1.2; font: inherit; font-weight: 700; font-size: .92rem; color: var(--zap, var(--ink)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gmais:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
dialog.gdlg { border: 0; border-radius: var(--raio, 16px); padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: #fff; color: var(--ink); box-shadow: 0 24px 80px rgba(0,0,0,.35); }
dialog.gdlg::backdrop { background: rgba(8, 14, 28, .6); }
.gdlg .gcard { border: 0; margin: 0; padding: 22px 24px 8px; max-height: calc(100vh - 140px); overflow-y: auto; }
.gdlg .gcard blockquote { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 1rem; height: auto; }
.gdlg .gmais { display: none; }
.gdlg form { padding: 8px 24px 20px; text-align: right; }
.gdlg form button { font: inherit; font-weight: 700; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
h2.com-logo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
h2.com-logo img { height: clamp(64px, 9vw, 108px); width: auto; display: block; }

/* Uma bolinha por avaliação */
.gbolas { flex-wrap: wrap; gap: 5px; max-width: 760px; margin-left: auto; margin-right: auto; }
.gbolas button { width: 7px; height: 7px; }
.gbolas button.on { transform: none; background: var(--zap); box-shadow: none; }
.tema-destaque .gbolas button.on { background: var(--destaque); box-shadow: 0 0 0 1px var(--ink); }

/* Bolinhas numa linha só, deslizando de uma em uma; o logo do título não quebra de linha */
.gbolas { display: block; overflow: hidden; max-width: 520px; height: 14px; margin: 18px auto 0; flex-wrap: nowrap; -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.gbolas .bt { display: flex; gap: 5px; width: max-content; padding: 3px 0; transition: transform .45s var(--ease); }
.gbolas button { flex: none; width: 7px; height: 7px; }
h2.com-logo { flex-wrap: nowrap; white-space: nowrap; font-size: clamp(1.5rem, 3.2vw, 2.7rem); gap: 6px 14px; }
h2.com-logo img { height: clamp(40px, 5.2vw, 66px); flex: none; max-width: none; }

.gcard blockquote:empty { display: none; }

/* Diagnóstico rápido */
.diag-grade { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .diag-grade { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px; } }
.diag-ops { display: flex; flex-wrap: wrap; gap: 10px; }
.diag-res { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--raio); padding: clamp(20px, 3vw, 30px); display: grid; gap: 12px; min-height: 220px; align-content: start; }
.diag-vazio { color: var(--ink2); }
.diag-rot { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.diag-cx { display: grid; gap: 12px; justify-items: start; }
.diag-cx h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.diag-dica { background: var(--soft); border-radius: 12px; padding: 12px 14px; font-size: .95rem; }
.diag-nota { font-size: .8rem; color: var(--ink2); }
.diag [hidden] { display: none !important; }

/* 7 ou 8 serviços: 4 por linha em tela larga, com a última linha centralizada */
@media (min-width: 900px) {
  .cards:has(> :nth-child(7)) { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
  .cards:has(> :nth-child(7)) > .card { flex: 0 0 calc((100% - 42px) / 4); max-width: calc((100% - 42px) / 4); }
  .cards:has(> :nth-child(7)) .card .corpo { padding: 18px; }
  .cards:has(> :nth-child(7)) .card h3 { font-size: 1.15rem; }
}

/* Boleto em fundo claro (opcional: boleto.fundo = "claro") e selo "Mais vendido" nos cartões */
.boleto.claro { background: #fff; color: var(--ink); }
.boleto.claro .sub { color: var(--ink2); }
.boleto.claro .cond li { border-color: var(--line); background: var(--soft); }
.boleto.claro .precos-rodape p { color: var(--ink2); }
.boleto.claro .precos-rodape .btn-borda { color: var(--ink); border-color: var(--ink); }
.boleto.claro .precos-rodape .btn-borda:hover { background: var(--ink); color: #fff; }
.boleto.claro .bcard { box-shadow: 0 6px 24px rgba(11, 18, 32, .08); }
.bcard { position: relative; }
.bselo { position: absolute; top: 10px; left: 10px; z-index: 1; background: var(--destaque, #f3b93d); color: var(--destaque-ink, #0b1220); font: 800 .7rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }

/* Luz atrás do quadro de porcentagens: o preto "iluminado" por baixo */
.tri { overflow: hidden; }
.tri-stats { position: relative; isolation: isolate; box-shadow: 0 34px 90px -28px color-mix(in srgb, var(--destaque, #f3b93d) 55%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--destaque, #f3b93d) 35%, transparent); }
.tri-stats::before { content: ""; position: absolute; z-index: -1; left: -14%; right: -14%; top: 30%; bottom: -34%; background: radial-gradient(ellipse 60% 55% at 50% 78%, color-mix(in srgb, var(--destaque, #f3b93d) 42%, transparent), color-mix(in srgb, var(--destaque, #f3b93d) 12%, transparent) 50%, transparent 72%); filter: blur(22px); pointer-events: none; }

/* Halo atrás do quadro da ordem de serviço (mesmo teste de luz, no fundo claro) */
body.tema-destaque .acomp { overflow: hidden; }
body.tema-destaque .acomp-tela { position: relative; isolation: isolate; }
body.tema-destaque .acomp-tela::before { content: ""; position: absolute; z-index: -1; inset: -30% -40% -34% -40%; background: radial-gradient(ellipse 50% 50% at 50% 54%, color-mix(in srgb, var(--destaque, #f3b93d) 78%, transparent), color-mix(in srgb, var(--destaque, #f3b93d) 34%, transparent) 42%, transparent 74%); filter: blur(30px); pointer-events: none; }
body.tema-destaque .acomp-tela .mock, body.tema-destaque .acomp-tela img { box-shadow: 0 40px 90px -24px rgba(11, 18, 32, .45), 0 18px 36px -14px rgba(11, 18, 32, .28); }


/* ===== Estilo "vidro" (liga com "estilo": "vidro" no cadastro) — translucidez estilo Apple ===== */
body.vidro {
  --v-fundo: rgba(255, 255, 255, .32); --v-borda: rgba(255, 255, 255, .7); --v-blur: blur(22px) saturate(190%);
  --v-sombra: 0 10px 38px rgba(24, 30, 64, .10), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .35);
  --v-escuro-fundo: rgba(255, 255, 255, .09); --v-escuro-borda: rgba(255, 255, 255, .22);
  --v-escuro-sombra: 0 14px 44px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(255, 255, 255, .06);
  background-color: #f2f3f8;
  background-image: radial-gradient(760px 560px at 6% 14%, rgba(243, 185, 61, .30), transparent 62%), radial-gradient(820px 640px at 96% 34%, rgba(110, 128, 255, .22), transparent 62%), radial-gradient(900px 700px at 26% 78%, rgba(243, 185, 61, .22), transparent 62%), radial-gradient(700px 560px at 88% 92%, rgba(255, 120, 150, .14), transparent 62%);
  background-attachment: fixed;
}
/* seções claras deixam o fundo colorido aparecer atrás do vidro */
body.vidro .soft, body.vidro .boleto.claro, body.vidro .acomp { background: transparent; }

/* barra do topo: pílula de vidro flutuando sobre o banner */
body.vidro .topo { position: sticky; top: 14px; z-index: 60; width: min(1280px, calc(100% - 28px)); margin: 14px auto -92px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 26px; background: rgba(16, 16, 20, .34); -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%); box-shadow: 0 18px 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(255, 255, 255, .08); }
body.vidro .topo .w { width: 100%; padding: 0 12px 0 22px; min-height: 64px; gap: clamp(12px, 1.6vw, 22px); }
body.vidro .topo .nav { gap: clamp(12px, 1.5vw, 22px); font-size: .9rem; }
body.vidro .topo .btn-mini { flex-shrink: 0; white-space: nowrap; }
body.vidro .topo .marca { flex-shrink: 0; }
body.vidro .topo.azul .marca img { height: 42px; }
body.vidro .topo .nav a { color: rgba(255, 255, 255, .88); }
body.vidro .topo .btn-mini { box-shadow: 0 6px 20px rgba(243, 185, 61, .35), inset 0 1px 0 rgba(255, 255, 255, .5); }
body.vidro .heroi.escuro { padding-top: clamp(150px, 16vw, 220px); }

/* cartões claros viram vidro fosco */
body.vidro .card, body.vidro .bcard, body.vidro .gcard, body.vidro .mock, body.vidro .gresumo, body.vidro .cond li, body.vidro .passos li, body.vidro .faq details, body.vidro .vcard { background: var(--v-fundo); -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); border: 1px solid var(--v-borda); box-shadow: var(--v-sombra); }
body.vidro .passos li { padding: 22px; border-top: 1px solid var(--v-borda); border-radius: var(--raio); }
body.vidro .faq details { margin-bottom: 10px; padding: 0 20px; border-radius: 16px; }
body.vidro .gcard, body.vidro .gresumo { border-radius: var(--raio); }
body.vidro .cond li { border-color: var(--v-borda); }
body.vidro .bcard .btn-zap, body.vidro .card .btn-zap { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
body.vidro .gseta { background: var(--v-fundo); -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); border: 1px solid var(--v-borda); box-shadow: var(--v-sombra); }

/* sobre fundo escuro: vidro esfumaçado */
body.vidro .tri-stats, body.vidro .heroi.escuro .selos li, body.vidro .heroi .etiqueta, body.vidro .heroi.escuro .btn-borda, body.vidro .fim .btn-borda { background: var(--v-escuro-fundo); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); border: 1px solid var(--v-escuro-borda); box-shadow: var(--v-escuro-sombra); }
body.vidro .tri-app { background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 24px 70px rgba(0, 0, 0, .45), inset 0 1px 0 #fff; }
body.vidro .heroi.escuro .selos { border-top: 0; gap: 12px 16px; }
body.vidro .heroi.escuro .selos li { padding: 12px 16px 12px 42px; border-radius: 16px; }
body.vidro .heroi.escuro .selos li::before { left: 17px; top: 1.1em; }
body.vidro .heroi .etiqueta { padding: 8px 16px; }
body.vidro .heroi.escuro .btn-borda:hover { background: rgba(255, 255, 255, .22); color: #fff; }

/* quem prefere menos transparência, ou não tem suporte, vê sólido */
@media (prefers-reduced-transparency: reduce) {
  body.vidro .topo { background: #101014; }
  body.vidro .card, body.vidro .bcard, body.vidro .gcard, body.vidro .mock, body.vidro .gresumo, body.vidro .cond li, body.vidro .passos li, body.vidro .faq details, body.vidro .tri-app { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.vidro .topo { background: #101014; }
  body.vidro .card, body.vidro .bcard, body.vidro .gcard, body.vidro .mock, body.vidro .gresumo, body.vidro .cond li, body.vidro .passos li, body.vidro .faq details { background: rgba(255, 255, 255, .92); }
}

/* ===== Vidro, segunda rodada: números, luz do Acompanhe, setas das avaliações ===== */
/* faixa de números: cada número ganha o seu vidrinho */
body.vidro .numeros { background: radial-gradient(520px 260px at 12% 0%, rgba(243, 185, 61, .30), transparent 70%), radial-gradient(520px 260px at 88% 100%, rgba(243, 185, 61, .22), transparent 70%), var(--cor, var(--ink)); }
body.vidro .numeros ul { gap: 14px; }
body.vidro .numeros li { padding: 20px 14px; border-radius: 20px; background: var(--v-escuro-fundo); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); border: 1px solid var(--v-escuro-borda); box-shadow: var(--v-escuro-sombra); }

/* Acompanhe: a luz sai de baixo do quadro, como no quadro de porcentagens */
body.vidro .acomp { overflow-x: clip; overflow-y: visible; position: relative; z-index: 0; }
body.vidro .acomp-tela { position: relative; isolation: isolate; }
body.vidro .acomp-tela::before { content: none; }
body.vidro .acomp-tela .mock, body.vidro .acomp-tela img { box-shadow: 0 30px 70px -28px rgba(11, 18, 32, .35), 0 12px 28px -16px rgba(11, 18, 32, .22), inset 0 1px 0 rgba(255, 255, 255, .95); }

/* setas das avaliações: ficam nas laterais, fora dos cartões */
@media (min-width: 760px) {
  body.vidro .gcar { padding: 0 58px; }
  body.vidro .gseta.ant { left: 0; } body.vidro .gseta.prox { right: 0; }
}
@media (max-width: 759px) {
  body.vidro .gcar { padding-bottom: 62px; }
  body.vidro .gseta { top: auto; bottom: 0; }
  body.vidro .gseta.ant { left: calc(50% - 52px); } body.vidro .gseta.prox { right: calc(50% - 52px); }
}

/* avaliações: a sombra dos cartões era cortada pela faixa de rolagem e virava uma tira cinza */
body.vidro .gtrilho .gcard { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .35); }

/* dúvidas: os cartões acompanham a largura do título */
body.vidro .faq { max-width: none; border-top: 0; }
body.vidro .faq details p { max-width: 80ch; }

/* crédito do rodapé: logo da agência, pequeno */
.rodape .credito a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.rodape .credito span { color: var(--ink2); font-size: .82rem; line-height: 1; }
.rodape .credito img { height: 24px; width: auto; display: block; border-radius: 4px; }

/* vídeo do Instagram: o clique na mídia do cartão abre o vídeo completo */
.card.com-reel { position: relative; }
.reel-abrir { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 4 / 3; border: 0; padding: 0; background: transparent; cursor: pointer; display: flex; align-items: flex-end; justify-content: flex-start; z-index: 2; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.reel-abrir span { margin: 12px; padding: 8px 14px; border-radius: 999px; background: rgba(11, 18, 32, .72); color: #fff; font: 600 .84rem/1 var(--corpo, inherit); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: inline-flex; gap: 8px; align-items: center; transition: background .2s; }
.reel-abrir:hover span, .reel-abrir:focus-visible span { background: rgba(11, 18, 32, .9); }
.reel-abrir:focus-visible { outline: 3px solid var(--destaque, #f3b93d); outline-offset: -3px; }
.reel-abrir i { font-style: normal; font-size: .8em; color: var(--destaque, #f3b93d); }
dialog.reel-dlg { border: 0; padding: 0; background: transparent; max-width: none; width: min(410px, calc(100vw - 20px)); max-height: none; overflow: visible; }
dialog.reel-dlg::backdrop { background: rgba(0, 0, 0, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.reel-tela { position: relative; width: 100%; aspect-ratio: 9 / 16; max-height: calc(100vh - 28px); margin: 0 auto; background: #000; border-radius: 18px; overflow: hidden; color: #fff; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; box-shadow: 0 30px 90px rgba(0, 0, 0, .6); }
.reel-video { position: absolute; inset: 0; overflow: hidden; background: #000; }
.reel-video iframe { position: absolute; left: 0; top: 0; border: 0; background: #000; max-width: none; }
.reel-topo { position: absolute; z-index: 3; top: 0; left: 0; right: 0; padding: 14px 14px 36px; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(#000a, transparent); pointer-events: none; }
.reel-rot { font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.reel-fecha { pointer-events: auto; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .18); color: #fff; display: grid; place-items: center; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.reel-lado { position: absolute; z-index: 3; right: 8px; bottom: 120px; display: grid; gap: 18px; justify-items: center; }
.reel-ic { display: grid; justify-items: center; gap: 3px; background: none; border: 0; color: #fff; cursor: pointer; text-decoration: none; padding: 4px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); }
.reel-ic small { font-size: .68rem; font-weight: 600; }
.reel-ic:hover svg, .reel-ic:focus-visible svg { transform: scale(1.12); }
.reel-ic svg { transition: transform .15s; }
.reel-base { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 60px 70px 16px 14px; background: linear-gradient(transparent, #000c); pointer-events: none; }
.reel-perfil { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.reel-av { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; font-weight: 700; overflow: hidden; flex: none; border: 2px solid #fff3; }
.reel-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-user { font-weight: 700; font-size: .95rem; }
.reel-seguir { padding: 5px 14px; border: 1px solid rgba(255, 255, 255, .85); border-radius: 8px; color: #fff; font-weight: 600; font-size: .85rem; text-decoration: none; background: transparent; }
.reel-seguir:hover { background: rgba(255, 255, 255, .18); }
.reel-legenda { margin: 10px 0 0; font-size: .9rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }

/* "O que a gente mais conserta" abaixo do título dos serviços */
.cabeca .mais { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .95rem; color: var(--ink2); }
.cabeca .mais b { color: var(--ink); font-weight: 700; margin-right: 4px; }
.cabeca .mais span { padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--destaque, var(--zap)) 22%, #fff); color: var(--ink); font-weight: 600; font-size: .88rem; border: 1px solid color-mix(in srgb, var(--destaque, var(--zap)) 45%, transparent); }

/* vidro: botão amarelo "acende" ao passar o mouse */
body.vidro .btn-zap { transition: background-color .25s ease, box-shadow .3s ease, transform .2s ease, filter .25s ease; }
body.vidro .btn-zap:hover, body.vidro .btn-zap:focus-visible {
  background-color: #ffcb4d !important; filter: saturate(1.1) brightness(1.04); transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255, 226, 150, .85), 0 0 18px 3px rgba(243, 185, 61, .75), 0 0 46px 10px rgba(243, 185, 61, .42), inset 0 1px 0 rgba(255, 255, 255, .7);
}
body.vidro .btn-zap:active { transform: translateY(0); filter: brightness(1); }
@media (prefers-reduced-motion: reduce) { body.vidro .btn-zap { transition: none; transform: none !important; } }

/* vidro: "Como chegar" é botão de contato também e acende igual ao amarelo */
body.vidro .btn-borda:has(.pin-maps) { transition: background-color .25s ease, box-shadow .3s ease, transform .2s ease, filter .25s ease, border-color .25s ease; }
body.vidro .btn-borda:has(.pin-maps):hover, body.vidro .btn-borda:has(.pin-maps):focus-visible {
  background-color: #ffcb4d !important; border-color: rgba(255, 226, 150, .9); color: #0b1220; filter: saturate(1.1) brightness(1.04); transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255, 226, 150, .85), 0 0 18px 3px rgba(243, 185, 61, .75), 0 0 46px 10px rgba(243, 185, 61, .42), inset 0 1px 0 rgba(255, 255, 255, .7);
}
body.vidro .btn-borda:has(.pin-maps):active { transform: translateY(0); filter: brightness(1); }
@media (prefers-reduced-motion: reduce) { body.vidro .btn-borda:has(.pin-maps) { transition: none; transform: none !important; } }
body.vidro .heroi.escuro .btn-borda:has(.pin-maps):hover, body.vidro .heroi.escuro .btn-borda:has(.pin-maps):focus-visible, body.vidro .fim .btn-borda:has(.pin-maps):hover, body.vidro .fim .btn-borda:has(.pin-maps):focus-visible { background-color: #ffcb4d !important; color: #0b1220; border-color: rgba(255, 226, 150, .9); }

/* vídeo do próprio site dentro da janela de Reels */
.reel-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.reel-tela.local .reel-base { bottom: 52px; }
.reel-tela.local .reel-lado { bottom: 170px; }