/* Rascunho da página do piso da MaxForce. Identidade deles: preto, vermelho do logo (#E3221B), título Anton itálico.
   A página usa consultas de contêiner (@container), então "Celular" e "Computador" mudam o desenho de verdade. */
:root {
  --preto: #0A0A0B; --carvao: #121214; --carvao2: #1A1A1D; --carvao3: #232327;
  --verm: #E3221B; --verm2: #FF3A2F; --txt: #F4F4F2; --cinza: #A6A6AD; --cinza2: #6F6F78;
  --claro: #F2F1EE; --claro2: #E7E5E0; --tinta: #151517;
  --linha: rgba(255,255,255,.09); --sug: rgba(255,207,51,.17); --sug-l: rgba(255,207,51,.75);
  --adm: 58px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #2a2a2e; color: var(--txt); font: 400 16px/1.55 Inter, system-ui, -apple-system, Segoe UI, sans-serif; -webkit-font-smoothing: antialiased; }
img, video, iframe { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }

/* ---------- barra do rascunho (não faz parte da página) ---------- */
.adm { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--adm); background: #fff; color: #18181b; border-bottom: 1px solid #e4e4e7; box-shadow: 0 2px 14px rgba(0,0,0,.12); }
.adm-in { height: 100%; display: flex; align-items: center; gap: 18px; padding: 0 16px; max-width: 1500px; margin: 0 auto; }
.adm-marca { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.adm-marca b { font-size: 15px; }
.adm-marca span { font-size: 12px; color: #71717a; white-space: nowrap; }
.adm-prog { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: #52525b; min-width: 140px; }
.adm-trilho { height: 6px; border-radius: 9px; background: #ececef; overflow: hidden; }
.adm-trilho i { display: block; height: 100%; width: 0; background: #16a34a; border-radius: 9px; transition: width .4s; }
.adm-acoes { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.troca { display: inline-flex; background: #f1f1f3; border-radius: 10px; padding: 3px; }
.troca button { border: 0; background: none; padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #52525b; cursor: pointer; white-space: nowrap; }
.troca button.on { background: #fff; color: #18181b; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.adm-ajuda { border: 1px solid #e4e4e7; background: #fff; border-radius: 10px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.estado { font-size: 12px; color: #71717a; min-width: 120px; text-align: right; }
.estado.ok { color: #15803d; } .estado.erro { color: #b91c1c; }

.ajuda { position: fixed; z-index: 99; top: calc(var(--adm) + 12px); right: 16px; width: min(380px, calc(100% - 32px)); background: #fff; color: #18181b; border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.ajuda-in { padding: 18px 20px; font-size: 14px; }
.ajuda ul { margin: 10px 0 14px; display: grid; gap: 8px; }
.ajuda li { padding-left: 14px; position: relative; color: #3f3f46; }
.ajuda li::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--verm); }
.ajuda button { width: 100%; border: 0; border-radius: 10px; padding: 10px; background: #18181b; color: #fff; font-weight: 700; cursor: pointer; }
.amostra-sug { font-style: normal; background: var(--sug); box-shadow: inset 0 -2px 0 var(--sug-l); padding: 0 3px; }
.ajuda mark { background: rgba(255,207,51,.45); color: inherit; padding: 0 2px; }

/* ---------- palco: computador (página inteira) ou celular (moldura de 390 px) ---------- */
.carregando { padding: 80px 20px; text-align: center; color: var(--cinza); }

/* ---------- a página ---------- */
.lp { container: lp / inline-size; background: var(--preto); overflow-x: hidden; position: relative; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
.wrap.estreito { max-width: 820px; }
.s { position: relative; padding: 64px 0; }
.dest { color: var(--verm2); }
mark { background: rgba(255,207,51,.4); color: inherit; border-radius: 3px; padding: 0 2px; }
.ver mark { background: rgba(255,207,51,.25); }
.centro { text-align: center; }
.cab { margin-bottom: 30px; }
.cab.centro { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }
.chapeu { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--verm2); margin-bottom: 10px; }
.h1, .h2 { font-family: Anton, Impact, sans-serif; font-weight: 400; font-style: italic; text-transform: uppercase; letter-spacing: .005em; line-height: 1.02; }
.h1 { font-size: 40px; }
.h2 { font-size: 32px; }
.h3 { font-size: 17px; font-weight: 800; line-height: 1.25; }
.sub { color: var(--cinza); font-size: 16.5px; margin-top: 12px; }
.p { color: var(--cinza); font-size: 15px; }
.p-g { color: #cfcfd4; font-size: 16.5px; }
.mini { color: var(--cinza2); font-size: 13px; margin-top: 10px; }
.fecho { text-align: center; max-width: 720px; margin: 30px auto 0; font-size: 17px; font-weight: 600; color: #e9e9ec; }
.checks { display: grid; gap: 10px; margin: 22px 0 26px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 15.5px; }
.checks svg { flex: none; width: 22px; height: 22px; padding: 3px; margin-top: 1px; border-radius: 50%; background: var(--verm); color: #fff; stroke-width: 3; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 14px 26px; border-radius: 12px; border: 0; cursor: pointer; text-decoration: none;
  font-weight: 800; font-size: 16px; letter-spacing: .01em; text-transform: uppercase; color: #fff; background: var(--verm); box-shadow: 0 10px 30px rgba(227,34,27,.35); transition: transform .2s, box-shadow .2s, background .2s; }
.btn svg { width: 20px; height: 20px; flex: none; stroke-width: 2.6; }
.btn:hover { background: var(--verm2); transform: translateY(-2px); box-shadow: 0 16px 36px rgba(227,34,27,.45); }
.btn-g { width: 100%; }
.btn-p { min-height: 42px; padding: 9px 16px; font-size: 13px; box-shadow: none; }
.btn-wpp { background: #1fae54; box-shadow: 0 10px 30px rgba(31,174,84,.35); width: 100%; }
.btn-wpp:hover { background: #22c45f; box-shadow: 0 16px 36px rgba(31,174,84,.45); }
.btn-wpp svg { width: 24px; height: 24px; }

.card { background: var(--carvao2); border: 1px solid var(--linha); border-radius: 18px; padding: 22px; }
.grade3, .grade4 { display: grid; gap: 14px; grid-template-columns: 1fr; }
.ico { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(227,34,27,.14); color: var(--verm2); margin-bottom: 14px; }
.ico svg { width: 24px; height: 24px; }

.foto { position: relative; overflow: hidden; border-radius: 18px; background: var(--carvao3); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto.bg { position: absolute; inset: 0; border-radius: 0; z-index: 0; }
.foto.bg::after { content: ''; position: absolute; inset: 0; }

/* topo */
.lp .s-topo { padding: 0; position: sticky; top: 0; z-index: 30; background: rgba(10,10,11,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); }
.palco.pc .s-topo { top: 0; }
.lp.editar .s-topo { position: relative; top: 0; }
.topo-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.foto.logo { width: 132px; height: auto; background: none; border-radius: 0; overflow: visible; }
.foto.logo img { height: auto; object-fit: contain; }

/* primeira tela */
.lp .s-hero { padding: 40px 0 56px; overflow: hidden; }
.s-hero .foto.bg img { opacity: .38; }
.s-hero .foto.bg::after { background: linear-gradient(180deg, rgba(10,10,11,.55), rgba(10,10,11,.75) 55%, var(--preto)), radial-gradient(70% 60% at 85% 30%, rgba(227,34,27,.22), transparent 70%); }
.hero-in { display: grid; gap: 34px; }
.selo { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(227,34,27,.45); background: rgba(227,34,27,.12); color: #ffd6d3; font-size: 12.5px; font-weight: 700; margin-bottom: 16px; }
.hero-txt .sub { font-size: 17px; color: #d0d0d6; }
.hero-vid { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.leg { font-size: 13px; color: var(--cinza); text-align: center; max-width: 320px; }

.video { position: relative; overflow: hidden; border-radius: 22px; background: #000; }
.video video, .video iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.video.vert { width: min(100%, 330px); aspect-ratio: 9 / 16; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 70px rgba(227,34,27,.28); }
.video.vert.link { aspect-ratio: auto; height: 640px; background: #fff; }
.video.pequeno { width: min(100%, 260px); }
.som { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(0,0,0,.65); color: #fff; font-size: 13px; font-weight: 700; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap; }
.som svg { width: 18px; height: 18px; }
.som.on { background: var(--verm); }
.v-vazio, .foto-vazia { display: grid; place-items: center; min-height: 160px; height: 100%; color: var(--cinza2); font-size: 13px; padding: 16px; text-align: center; }

/* faixa */
.lp .s-faixa { padding: 0; background: var(--verm); }
.faixa-in { display: flex; gap: 10px 26px; justify-content: center; flex-wrap: wrap; padding: 16px 20px; }
.chip { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 13.5px; text-transform: uppercase; letter-spacing: .03em; color: #fff; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: #fff; flex: none; }

/* teste */
.s-teste { background: radial-gradient(80% 60% at 50% 0%, rgba(227,34,27,.12), transparent 70%), var(--preto); }
.teste-card { position: relative; }
.teste-card .n { position: absolute; top: 16px; right: 18px; font-family: Anton, Impact, sans-serif; font-style: italic; font-size: 30px; color: rgba(255,255,255,.07); }
.teste-card .h3 { margin-bottom: 6px; }
.s-teste .btn-g { max-width: 460px; margin-top: 26px; }

/* dor (parte clara) */
.s-dor { background: var(--claro); color: var(--tinta); }
.s-dor .chapeu { color: var(--verm); }
.s-dor .dest { color: var(--verm); }
.s-dor .card { background: #fff; border-color: var(--claro2); box-shadow: 0 6px 20px rgba(0,0,0,.05); }
.s-dor .p { color: #55555c; }
.s-dor .ico { background: rgba(227,34,27,.1); color: var(--verm); }
.s-dor .fecho { color: var(--tinta); }

/* fábrica */
.s-fabrica { background: var(--carvao); }
.fab-in { display: grid; gap: 34px; }
.nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px 0 20px; }
.num { padding: 16px; border-radius: 14px; background: var(--carvao2); border: 1px solid var(--linha); display: flex; flex-direction: column; gap: 2px; }
.num-v { font-family: Anton, Impact, sans-serif; font-weight: 400; font-style: italic; font-size: 28px; line-height: 1.05; color: #fff; text-transform: uppercase; }
.num-l { color: var(--cinza); font-size: 13.5px; }
.chamada { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px dashed rgba(227,34,27,.5); color: #ffd6d3; font-weight: 600; font-size: 15px; }
.chamada svg { width: 26px; height: 26px; flex: none; color: var(--verm2); }
.fab-midia { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; justify-items: center; }
.fab-foto { width: 100%; aspect-ratio: 9 / 8; }

/* preço */
.s-preco { background: var(--preto); }
.preco-card { max-width: 760px; margin: 0 auto; padding: 30px 22px; border-radius: 24px; background: linear-gradient(180deg, var(--carvao2), var(--carvao)); border: 1px solid rgba(227,34,27,.45);
  box-shadow: 0 0 0 6px rgba(227,34,27,.06), 0 30px 70px rgba(0,0,0,.45); text-align: left; }
.preco-card .h2 { font-size: 34px; }
.preco-card .checks { margin: 18px 0 22px; }

/* usos */
.s-usos { background: var(--carvao); }
.uso-card .h3 { margin-bottom: 4px; }

/* um fornecedor só */
.s-combo { background: var(--preto); }
.combo-in { display: grid; gap: 30px; align-items: center; }
.combo-txt .btn-g { margin-top: 24px; }
.combo-fotos { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; aspect-ratio: 1 / 1; }
.cf { height: 100%; }
.cf1 { grid-row: 1 / 3; }

/* prova */
.s-prova { background: var(--carvao); }
.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.g-item { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--carvao3); }
.g-item img, .g-item video { width: 100%; height: 100%; object-fit: cover; }
.g-doc { display: grid; place-items: center; height: 100%; font-weight: 800; color: var(--cinza); }
.dep { position: relative; }
.dep .aspas { position: absolute; top: 4px; right: 16px; font-family: Georgia, serif; font-size: 70px; line-height: 1; color: rgba(227,34,27,.35); }
.dep blockquote { color: #dcdce0; font-size: 15.5px; font-style: italic; }
.dep .quem { margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--cinza); }

/* passos */
.s-passos { background: var(--preto); }
.passos-l { display: grid; gap: 14px; counter-reset: p; }
.passo { position: relative; padding: 22px 22px 22px 76px; border-radius: 18px; background: var(--carvao2); border: 1px solid var(--linha); }
.pn { position: absolute; left: 20px; top: 20px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--verm); color: #fff; font-family: Anton, Impact, sans-serif; font-style: italic; font-size: 20px; }
.passo .h3 { margin-bottom: 4px; }

/* orçamento */
.s-orcamento { background: radial-gradient(70% 70% at 50% 100%, rgba(227,34,27,.18), transparent 70%), var(--carvao); scroll-margin-top: 70px; }
.orc-in { display: grid; gap: 26px; }
.orc-txt .cab { margin-bottom: 0; }
.quiz { background: #fff; color: var(--tinta); border-radius: 22px; padding: 22px 20px 24px; box-shadow: 0 30px 70px rgba(0,0,0,.5); width: 100%; max-width: 560px; justify-self: center; }
.q-topo { display: flex; align-items: center; justify-content: space-between; min-height: 30px; font-size: 13px; color: #6b6b73; }
.q-voltar { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 0; cursor: pointer; font-weight: 700; color: #3f3f46; }
.q-voltar svg { width: 18px; height: 18px; }
.q-cont { margin-left: auto; }
.q-trilho { height: 5px; border-radius: 9px; background: #ececef; margin: 8px 0 20px; overflow: hidden; }
.q-trilho i { display: block; height: 100%; background: var(--verm); border-radius: 9px; transition: width .35s; }
.q-tit { font-size: 21px; font-weight: 800; line-height: 1.25; margin-bottom: 16px; color: var(--tinta); }
.ops { display: grid; gap: 10px; }
.op { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 12px 16px; border-radius: 12px; border: 1.5px solid #e2e2e6; background: #fafafa; cursor: pointer; text-align: left; font-weight: 600; font-size: 15.5px; color: var(--tinta); transition: border-color .15s, background .15s; }
.op i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #c9c9cf; flex: none; }
.op:hover { border-color: var(--verm); background: #fff; }
.op.on { border-color: var(--verm); background: #fff4f3; }
.op.on i { border: 6px solid var(--verm); }
.q-in { width: 100%; height: 54px; padding: 0 16px; border-radius: 12px; border: 1.5px solid #e2e2e6; background: #fafafa; font: 500 16px Inter, sans-serif; color: var(--tinta); margin-bottom: 10px; outline: none; }
.q-in:focus { border-color: var(--verm); background: #fff; box-shadow: 0 0 0 4px rgba(227,34,27,.12); }
.q-seg { margin-top: 6px; }
.q-erro { min-height: 20px; color: #c0281f; font-size: 13.5px; margin-top: 8px; }
.q-selo { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #f1f1f3; color: #6b6b73; margin-bottom: 14px; }
.q-selo svg { width: 28px; height: 28px; stroke-width: 3; }
.q-selo.ok { background: #e8f8ee; color: #1fae54; }
.qp .p { color: #55555c; margin-bottom: 18px; }
.q-rasc { margin-top: 14px; padding: 14px; border-radius: 12px; background: #fff8e1; border: 1px solid #f3d27a; font-size: 13.5px; color: #4a3b0b; }
.q-rasc pre { margin: 8px 0 0; white-space: pre-wrap; font: 500 13.5px/1.5 Inter, sans-serif; color: #18181b; }

/* edição das perguntas */
.quiz-ed { display: grid; gap: 14px; }
.q-ed { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid #ececef; }
.q-n { width: 30px; height: 30px; border-radius: 9px; background: var(--verm); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.q-ed .q-tit { font-size: 17px; margin-bottom: 8px; }
.q-ops-ed { white-space: pre-wrap; padding: 10px 12px; border-radius: 10px; border: 1.5px dashed #d4d4d8; font-weight: 600; font-size: 14.5px; line-height: 1.9; color: var(--tinta); }
.q-campo-ed { padding: 12px 14px; border-radius: 10px; border: 1.5px solid #e2e2e6; background: #fafafa; color: #8a8a92; font-size: 14.5px; margin-bottom: 6px; }
.dica { display: block; margin-top: 6px; font-size: 12px; color: #8a8a92; }
.q-fim-ed { padding: 16px; border-radius: 14px; background: #f6f6f8; }
.q-fim-ed small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a8a92; margin-bottom: 8px; }
.q-fim-ed.ok { background: #effaf3; }
.q-fim-ed .p { color: #55555c; margin-bottom: 12px; }

/* dúvidas */
.s-duvidas { background: var(--claro); color: var(--tinta); }
.s-duvidas .p { color: #55555c; }
.faq { display: grid; gap: 10px; }
.faq-i { background: #fff; border: 1px solid var(--claro2); border-radius: 14px; }
.faq-i summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 20px; font-weight: 700; font-size: 16px; }
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary i { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--claro); position: relative; transition: transform .25s; }
.faq-i summary i::before, .faq-i summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--verm); transform: translate(-50%, -50%); }
.faq-i summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: opacity .25s; }
.faq-i[open] summary i::after { opacity: 0; }
.faq-i p { padding: 0 20px 18px; color: #55555c; }
.faq-i.aberto { padding: 16px 18px; }
.faq-q { font-weight: 700; margin-bottom: 6px; }

/* final */
.lp .s-final { padding: 90px 0; overflow: hidden; text-align: center; }
.s-final .foto.bg img { opacity: .3; }
.s-final .foto.bg::after { background: radial-gradient(70% 80% at 50% 50%, rgba(227,34,27,.25), rgba(10,10,11,.85)); }
.final-in { max-width: 780px; }
.final-in .h2 { font-size: 36px; }
.final-in .btn-g { max-width: 460px; margin-top: 26px; }

/* rodapé */
.lp .s-rodape { padding: 40px 0 46px; background: #050506; border-top: 1px solid var(--linha); text-align: center; }
.rod-in { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.foto.logo-rod { width: 120px; background: none; border-radius: 0; margin-bottom: 10px; }
.foto.logo-rod img { height: auto; object-fit: contain; }
.r { color: var(--cinza2); font-size: 13px; }
.r.insta { display: inline-flex; align-items: center; gap: 6px; color: var(--cinza); }
.r.insta svg { width: 16px; height: 16px; }
.r.fino { font-size: 12px; opacity: .8; margin-top: 6px; }

/* bastidores */
.s-bastidores { background: #fffbeb; color: #3f3a2a; }
.bast { display: grid; gap: 14px; }
.bast-i { background: #fff; border: 1px dashed #e6c76a; border-radius: 14px; padding: 16px; }
.bast-i b { display: block; margin-bottom: 8px; font-size: 14px; }
.bast-i .p { color: #3f3a2a; white-space: pre-wrap; }

/* ---------- computador ---------- */
@container lp (min-width: 860px) {
  .s { padding: 96px 0; }
  .h1 { font-size: 64px; }
  .h2 { font-size: 46px; }
  .sub { font-size: 18px; }
  .lp .s-hero { padding: 64px 0 90px; }
  .lp .s-final { padding: 130px 0; }
  .hero-in { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 56px; }
  .hero-txt .btn-g { width: auto; min-width: 380px; }
  .grade4 { grid-template-columns: repeat(4, 1fr); }
  .grade3 { grid-template-columns: repeat(3, 1fr); }
  .fab-in { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; }
  .fab-midia { grid-template-columns: 1.25fr .75fr; align-items: end; }
  .fab-foto { aspect-ratio: 4 / 5; }
  .preco-card { padding: 44px 48px; text-align: center; }
  .preco-card .h2 { font-size: 50px; }
  .preco-card .checks { grid-template-columns: 1fr 1fr; text-align: left; max-width: 620px; margin: 26px auto 30px; }
  .preco-card .btn-g { width: auto; min-width: 380px; }
  .combo-in { grid-template-columns: .9fr 1.1fr; gap: 56px; }
  .combo-txt .btn-g { width: auto; }
  .galeria { grid-template-columns: repeat(4, 1fr); }
  .passos-l { grid-template-columns: repeat(4, 1fr); }
  .passo { padding: 76px 22px 24px; }
  .orc-in { grid-template-columns: .9fr 1.1fr; align-items: center; gap: 56px; }
  .quiz { padding: 28px 30px 30px; }
  .final-in .h2 { font-size: 54px; }
  .foto.logo { width: 150px; }
}
@container lp (min-width: 560px) and (max-width: 859px) {
  .grade4, .grade3 { grid-template-columns: 1fr 1fr; }
  .fab-midia { grid-template-columns: 1.2fr .8fr; }
}

/* ---------- modo de editar ---------- */
.lp.editar .s { padding-top: 92px; }
.lp.editar .s-topo, .lp.editar .s-faixa { padding-top: 64px; }
.lp.editar .s-faixa { padding-bottom: 6px; }
.etq { position: absolute; z-index: 25; top: 14px; left: 14px; right: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; pointer-events: none; }
.etq > * { pointer-events: auto; }
.etq-n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #fff; color: #18181b; font-weight: 800; font-size: 13px; }
.etq b { font-size: 13px; font-weight: 800; color: #fff; background: rgba(0,0,0,.55); padding: 4px 10px; border-radius: 8px; }
.s-dor .etq b, .s-duvidas .etq b, .s-bastidores .etq b { background: #18181b; }
.etq-info { width: 28px; height: 28px; border-radius: 8px; border: 0; background: rgba(255,255,255,.92); color: #18181b; display: grid; place-items: center; cursor: pointer; }
.etq-info svg { width: 18px; height: 18px; }
.etq-ok { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 9px; padding: 6px 12px; background: #fff; color: #18181b; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.etq-ok svg { width: 16px; height: 16px; stroke-width: 3; }
.etq.aprovada .etq-ok { background: #16a34a; color: #fff; }
.etq.aprovada .etq-n { background: #16a34a; color: #fff; }
.etq-nota { flex-basis: 100%; max-width: 640px; background: #fff; color: #27272a; font-size: 13.5px; line-height: 1.5; padding: 12px 14px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }

.ed { outline: none; border-radius: 4px; transition: background .2s, box-shadow .2s; cursor: text; min-width: 20px; }
.ed:hover { box-shadow: 0 0 0 2px rgba(255,255,255,.28); }
.s-dor .ed:hover, .s-duvidas .ed:hover, .quiz .ed:hover, .s-bastidores .ed:hover { box-shadow: 0 0 0 2px rgba(0,0,0,.18); }
.ed:focus { box-shadow: 0 0 0 2px #ffcf33 !important; background: rgba(255,207,51,.08); }
.ed.sug { background: var(--sug); box-shadow: inset 0 -2px 0 var(--sug-l); }
.ed:empty::before { content: attr(data-ph); opacity: .45; font-style: italic; }
span.ed, b.ed { display: inline-block; }
.btn .ed { min-width: 60px; }
.lp.editar .btn { cursor: default; }
.lp.editar .btn:hover { transform: none; }

.trocar { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.95); color: #18181b; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.trocar svg { width: 17px; height: 17px; }
.foto .msg, .galeria .msg, .v-troca .msg { position: absolute; left: 10px; bottom: 56px; z-index: 3; max-width: calc(100% - 20px); font-size: 12px; font-weight: 600; color: #fff; background: rgba(0,0,0,.7); border-radius: 8px; padding: 0 8px; }
.foto .msg:empty, .galeria .msg:empty, .v-troca .msg:empty { display: none; }
.foto.bg .trocar { top: 64px; bottom: auto; right: 14px; }
.foto.logo .trocar, .foto.logo-rod .trocar { position: static; margin-top: 6px; padding: 5px 9px; font-size: 12px; }
.foto.vazia { min-height: 160px; border: 2px dashed rgba(255,255,255,.2); }
.galeria { position: relative; }
.g-add { aspect-ratio: 1; border: 2px dashed rgba(255,255,255,.25); border-radius: 14px; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 10px; cursor: pointer; color: var(--cinza); font-size: 13px; font-weight: 600; text-align: center; }
.s-bastidores .g-add { border-color: #e6c76a; color: #7c6a2c; }
.g-add svg { width: 26px; height: 26px; }
.g-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.7); color: #fff; display: grid; place-items: center; cursor: pointer; }
.g-x svg { width: 15px; height: 15px; }
.video-ed { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.v-troca { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(100%, 330px); }
.v-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; padding: 9px 14px; background: #fff; color: #18181b; font-size: 13px; font-weight: 700; cursor: pointer; }
.v-btn svg { width: 18px; height: 18px; }
.v-painel { width: 100%; display: grid; gap: 8px; background: #fff; color: #18181b; border-radius: 12px; padding: 12px; }
.v-painel input { width: 100%; height: 42px; border-radius: 9px; border: 1.5px solid #d4d4d8; padding: 0 10px; font: 500 14px Inter, sans-serif; }
.v-usar { border: 0; border-radius: 9px; padding: 10px; background: #18181b; color: #fff; font-weight: 700; cursor: pointer; }
.v-arq { font-size: 12.5px; color: #52525b; text-align: center; cursor: pointer; text-decoration: underline; }
.v-troca .msg { position: static; background: none; color: #ffd6d3; }
.lp.editar .faixa-in { padding-top: 18px; }

/* modo de ver: sem nenhum sinal de edição */
.lp.ver .etq { display: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.lp.editar .foto.bg { z-index: auto; }
/* no celular, as áreas de uso em duas colunas (cartões curtos) */
.s-usos .grade3 { grid-template-columns: 1fr 1fr; gap: 10px; }
.s-usos .uso-card { padding: 16px; }
.s-usos .uso-card .ico { width: 40px; height: 40px; margin-bottom: 10px; }
@container lp (min-width: 860px) { .s-usos .grade3 { grid-template-columns: repeat(3, 1fr); gap: 14px; } .s-usos .uso-card { padding: 22px; } }

/* ---------- faixa que corre (03/11, pedido do Jefferson: o mesmo padrão elegante das páginas da Ellus e da Limark) ----------
   Faixa escura, letras em caixa alta espaçadas, losango vermelho separando, bordas finas vermelhas e as pontas sumindo. */
.lp .s-faixa { padding: 0; background: linear-gradient(180deg, #151517, #0b0b0c); border-style: solid; border-width: 1px 0;
  border-image: linear-gradient(90deg, transparent, rgba(227,34,27,.75) 18%, rgba(227,34,27,.75) 82%, transparent) 1; }
.faixa-corre { position: relative; overflow: hidden; padding: 17px 0; }
.faixa-corre::before, .faixa-corre::after { content: ''; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 1; pointer-events: none; }
.faixa-corre::before { left: 0; background: linear-gradient(90deg, #0b0b0c, transparent); }
.faixa-corre::after { right: 0; background: linear-gradient(270deg, #0b0b0c, transparent); }
.faixa-trilho { display: flex; align-items: center; width: max-content; animation: faixaCorre 38s linear infinite; }
.faixa-trilho > * { margin-right: 24px; flex: none; }
.faixa-trilho span { font: 700 13px/1 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #f4f4f2; white-space: nowrap; }
.faixa-trilho .sep, .faixa-ed .sep { font-style: normal; font-size: 10px; color: var(--verm2); }
.faixa-corre:hover .faixa-trilho { animation-play-state: paused; }
@keyframes faixaCorre { to { transform: translateX(-50%); } }
.faixa-ed { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; padding: 16px 20px 6px; }
.faixa-ed .chip { font-weight: 700; font-size: 13px; letter-spacing: .14em; }
.faixa-dica { text-align: center; font-size: 12px; color: var(--cinza2); padding: 0 16px 14px; }
.faixa-dica.escura { padding: 14px 0 0; }
@container lp (min-width: 860px) { .faixa-corre { padding: 21px 0; } .faixa-trilho span { font-size: 14.5px; } .faixa-trilho > * { margin-right: 32px; } }

/* ---------- avaliações do Google (03/11): pílula com a nota e os cartões passando, como na página da Ellus ---------- */
.s-google { background: radial-gradient(60% 55% at 50% 0%, rgba(227,34,27,.17), transparent 70%), var(--preto); overflow: hidden; }
.s-google .cab { margin-bottom: 18px; }
.g-pilula { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 9px 18px; border-radius: 999px; background: #fff; color: #202124; font-size: 13.5px; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.g-logo { width: 20px; height: 20px; flex: none; }
.g-nota { font-size: 18px; font-weight: 800; }
.g-estrelas { color: #fbbc04; letter-spacing: 1px; font-size: 15px; line-height: 1; }
.g-total { color: #5f6368; }
.g-corre { position: relative; overflow: hidden; padding: 16px 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); }
.g-trilho { display: flex; align-items: stretch; width: max-content; animation: gCorre var(--dur, 48s) linear infinite; }
.g-corre:hover .g-trilho { animation-play-state: paused; }
@keyframes gCorre { to { transform: translateX(-50%); } }
.g-card { flex: 0 0 290px; margin-right: 16px; background: #fff; color: #202124; border-radius: 16px; padding: 16px 16px 15px; text-align: left; box-shadow: 0 14px 32px rgba(0,0,0,.45); }
.g-card header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.g-card header div { flex: 1; min-width: 0; }
.g-card header b { display: block; font-size: 14px; line-height: 1.3; }
.g-card header small { color: #70757a; font-size: 12px; }
.g-card header .g-logo { width: 18px; height: 18px; }
.g-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; background: #f1f3f4; }
.g-av .g-logo { width: 18px; height: 18px; }
.g-card p { margin-top: 7px; font-size: 13.5px; line-height: 1.5; color: #3c4043; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.g-mais { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px; background: #fff; color: #202124; font-weight: 700; font-size: 14px; text-decoration: none; }
.g-grade-ed { display: grid; grid-template-columns: 1fr; gap: 12px; }
.g-grade-ed .g-card { margin: 0; }
.g-txt-ed { margin-top: 7px; font-size: 13.5px; line-height: 1.55; color: #3c4043; white-space: pre-wrap; }
.g-link-ed { margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.g-link-ed .g-link { background: #fff; color: #202124; font-weight: 700; padding: 9px 16px; border-radius: 999px; }
.g-link-ed .g-url { font-size: 13px; color: var(--cinza); }
.g-card .ed:hover, .g-pilula .ed:hover, .g-link-ed .g-link:hover { box-shadow: 0 0 0 2px rgba(0,0,0,.18); }
@container lp (min-width: 560px) { .g-grade-ed { grid-template-columns: 1fr 1fr; } }
@container lp (min-width: 860px) { .g-grade-ed { grid-template-columns: repeat(3, 1fr); } .g-card { flex-basis: 340px; margin-right: 22px; padding: 20px; } .g-pilula { font-size: 15px; padding: 10px 22px; } .g-nota { font-size: 21px; } .g-corre { padding: 26px 0 36px; } }

/* ---------- textura nos fundos lisos (03/11, pedido do Jefferson, como na página da Ellus) ----------
   Camada atrás do conteúdo, bem leve, sumindo nas bordas. O grão lembra a própria borracha do piso. */
.s-teste, .s-dor, .s-fabrica, .s-preco, .s-usos, .s-combo, .s-prova, .s-google, .s-passos, .s-orcamento, .s-duvidas, .lp .s-rodape { isolation: isolate; }
.s-teste::before, .s-dor::before, .s-fabrica::before, .s-preco::before, .s-usos::before, .s-combo::before, .s-prova::before, .s-google::before,
.s-passos::before, .s-orcamento::before, .s-duvidas::before, .lp .s-rodape::before, .s-fabrica::after, .s-dor::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* o teste: riscas finas saindo do alto */
.s-teste::before { background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 15px);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent 75%); }
/* a dor (fundo claro): pontinhos nos cantos */
.s-dor::before { background: radial-gradient(rgba(17,17,19,.15) 1.1px, transparent 1.6px) 0 0 / 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000, transparent 60%); mask-image: radial-gradient(ellipse at 100% 0%, #000, transparent 60%); }
.s-dor::after { background: radial-gradient(rgba(227,34,27,.22) 1.1px, transparent 1.6px) 0 0 / 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse at 0% 100%, #000, transparent 50%); mask-image: radial-gradient(ellipse at 0% 100%, #000, transparent 50%); }
/* fábrica: grão de borracha + o hexágono da marca, enorme e quase sumindo */
.s-fabrica::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 180px 180px; opacity: .085; }
.s-fabrica::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115'%3E%3Cpath d='M50 3 97 30v55L50 112 3 85V30z' fill='none' stroke='%23E3221B' stroke-width='3'/%3E%3C/svg%3E") no-repeat right -90px bottom -80px / 460px auto; opacity: .1; }
/* preço: anéis finos atrás do cartão */
.s-preco::before { background: repeating-radial-gradient(circle at 50% 50%, rgba(227,34,27,.09) 0 1px, transparent 1px 38px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 62%); mask-image: radial-gradient(circle at 50% 50%, #000, transparent 62%); }
/* onde usar: papel quadriculado bem leve */
.s-usos::before { background: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 34px 34px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
/* um fornecedor só: riscas do lado das fotos */
.s-combo::before { background: repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 14px);
  -webkit-mask-image: radial-gradient(ellipse at 100% 50%, #000, transparent 65%); mask-image: radial-gradient(ellipse at 100% 50%, #000, transparent 65%); }
/* fotos de clientes e rodapé: grão de borracha */
.s-prova::before, .lp .s-rodape::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 180px 180px; opacity: .07; }
/* Google: riscas finas com o brilho vermelho no alto */
.s-google::before { background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 15px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
/* como funciona: quadriculado sumindo nas bordas */
.s-passos::before { background: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 30px 30px, linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000, transparent 80%); mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000, transparent 80%); }
/* orçamento: pontinhos vermelhos no canto */
.s-orcamento::before { background: radial-gradient(rgba(227,34,27,.35) 1.1px, transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at 0% 0%, #000, transparent 55%); mask-image: radial-gradient(ellipse at 0% 0%, #000, transparent 55%); }
/* dúvidas (fundo claro): pontinhos no canto de baixo */
.s-duvidas::before { background: radial-gradient(rgba(17,17,19,.13) 1.1px, transparent 1.6px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse at 0% 100%, #000, transparent 58%); mask-image: radial-gradient(ellipse at 0% 100%, #000, transparent 58%); }
@media (prefers-reduced-motion: reduce) { .faixa-trilho, .g-trilho { animation: none !important; } .faixa-corre, .g-corre { overflow-x: auto; } }

/* ---------- faixas de Black Friday (03/11, pedido do Jefferson: "faixas de Black Friday em pontos estratégicos") ----------
   Duas fitas inclinadas cruzando a página: a vermelha na frente com as frases e a preta atrás, correndo ao contrário. */
.lp .s.s-bf { padding: 0; height: 124px; overflow: hidden; background: var(--preto); }
.bf { position: relative; height: 100%; }
.bf-fita { position: absolute; left: -8%; right: -8%; top: 50%; overflow: hidden; padding: 12px 0; }
.bf-a { z-index: 2; background: linear-gradient(180deg, #ef2a22, #d81d16); transform: translateY(-50%) rotate(-2.4deg);
  border-top: 2px solid #0a0a0b; border-bottom: 2px solid #0a0a0b; box-shadow: 0 12px 34px rgba(227,34,27,.38); }
.bf-b { z-index: 1; background: #121214; transform: translateY(-50%) rotate(2.2deg); border-top: 1px solid rgba(227,34,27,.65); border-bottom: 1px solid rgba(227,34,27,.65); }
.bf-trilho { display: flex; align-items: center; width: max-content; animation: bfCorre 34s linear infinite; }
.bf-trilho > * { margin-right: 22px; flex: none; }
.bf-trilho span { font: 400 20px/1 Anton, Impact, sans-serif; font-style: italic; text-transform: uppercase; letter-spacing: .02em; color: #fff; white-space: nowrap; }
.bf-trilho i { font-style: normal; font-size: 12px; color: #0a0a0b; }
.bf-b .bf-trilho span { font-size: 15px; letter-spacing: .14em; color: rgba(255,255,255,.78); }
.bf-b .bf-trilho i { color: var(--verm2); }
.bf-volta { animation-name: bfVolta; animation-duration: 46s; }
.bf mark { background: rgba(255,255,255,.22); color: #fff; }
.bf:hover .bf-trilho { animation-play-state: paused; }
@keyframes bfCorre { to { transform: translateX(-50%); } }
@keyframes bfVolta { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@container lp (min-width: 860px) {
  .lp .s.s-bf { height: 160px; }
  .bf-fita { padding: 15px 0; }
  .bf-trilho span { font-size: 27px; }
  .bf-trilho > * { margin-right: 30px; }
  .bf-b .bf-trilho span { font-size: 18px; }
}
/* selo da Black na primeira tela, com um ponto vermelho pulsando */
.bf-pilula { display: inline-flex; align-items: center; gap: 9px; margin: 0 8px 12px 0; padding: 7px 14px 7px 12px; border-radius: 8px; background: #0a0a0b;
  border: 1.5px solid var(--verm); color: #fff; font: 400 15px/1 Anton, Impact, sans-serif; font-style: italic; text-transform: uppercase; letter-spacing: .04em; }
.bf-pilula::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--verm2); flex: none; animation: bfPulso 1.6s ease-out infinite; }
@keyframes bfPulso { 0% { box-shadow: 0 0 0 0 rgba(255,58,47,.7); } 100% { box-shadow: 0 0 0 9px rgba(255,58,47,0); } }
.lp.editar .bf-pilula::before { animation: none; }
/* no modo de editar, a faixa fica parada e reta, para dar para escrever */
.lp.editar .s.s-bf { height: auto; overflow: visible; padding: 64px 0 22px; }
.bf-ed { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 760px; margin: 0 auto; padding: 16px 20px; border-radius: 14px;
  background: linear-gradient(180deg, #ef2a22, #d81d16); transform: rotate(-1deg); box-shadow: 0 12px 30px rgba(227,34,27,.3); }
.bf-selo { font: 400 22px/1 Anton, Impact, sans-serif; font-style: italic; color: #fff; letter-spacing: .04em; }
.bf-txt-ed { width: 100%; color: #fff; font-weight: 800; font-size: 14px; line-height: 1.7; text-align: center; text-transform: uppercase; letter-spacing: .06em; white-space: pre-wrap; }
.bf-ed .dica { color: rgba(255,255,255,.8); }
.bf-ed .ed.sug { background: rgba(255,255,255,.14); box-shadow: inset 0 -2px 0 rgba(255,255,255,.7); }
@media (prefers-reduced-motion: reduce) { .bf-trilho { animation: none !important; } .bf-pilula::before { animation: none; } }
/* foto de quem avaliou no Google (03/11): redonda no cartão; no modo de editar, botão pequeno de trocar */
img.g-av { object-fit: cover; background: #e8eaed; }
.foto.g-av-foto { width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: visible; background: #e8eaed; }
.foto.g-av-foto img { border-radius: 50%; }
.foto.g-av-foto .trocar { right: -8px; bottom: -8px; padding: 4px; border-radius: 50%; }
.foto.g-av-foto .trocar span { display: none; }
.foto.g-av-foto .trocar svg { width: 13px; height: 13px; }
.foto.g-av-foto.vazia { border: 1.5px dashed #c4c7c5; min-height: 0; }
.foto.g-av-foto .foto-vazia { min-height: 0; padding: 0; font-size: 9px; }
.g-card header small { flex: 1; }

/* aviso "clique em Editar" com a setinha apontando para o botão (03/11) */
.dica-editar { position: fixed; z-index: 101; display: flex; align-items: center; gap: 10px; max-width: min(330px, calc(100vw - 16px));
  padding: 11px 36px 11px 12px; border-radius: 12px; background: #18181b; color: #fff; font-size: 13.5px; line-height: 1.35;
  box-shadow: 0 14px 34px rgba(0,0,0,.4); animation: dicaEntra .45s ease-out both, dicaBalanca 2.2s ease-in-out .6s infinite; }
.dica-editar::before { content: ''; position: absolute; top: -6px; left: var(--seta, 50%); width: 13px; height: 13px; border-radius: 3px; background: #18181b; transform: translateX(-50%) rotate(45deg); }
.dica-seta { width: 26px; height: 26px; flex: none; padding: 4px; border-radius: 8px; background: var(--verm); color: #fff; }
.dica-editar b { color: #ff8a83; }
#dicaFechar { position: absolute; top: 4px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 7px; background: none; color: #a1a1aa; font-size: 18px; line-height: 1; cursor: pointer; }
#dicaFechar:hover { color: #fff; background: rgba(255,255,255,.08); }
@keyframes dicaEntra { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: none; } }
@keyframes dicaBalanca { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.troca button.chama { color: #fff; background: var(--verm); box-shadow: 0 0 0 0 rgba(227,34,27,.55); animation: chamaEditar 1.8s ease-out infinite; }
@keyframes chamaEditar { 0% { box-shadow: 0 0 0 0 rgba(227,34,27,.55); } 100% { box-shadow: 0 0 0 9px rgba(227,34,27,0); } }
@media (prefers-reduced-motion: reduce) { .dica-editar, .troca button.chama { animation: none; } }

/* ---------- imagens realistas no lugar dos ícones (03/11), flutuando de leve como na página da Ellus ---------- */
.el-flut { display: block; width: auto; height: 86px; max-width: 128px; object-fit: contain; margin: 0 0 14px -4px;
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.55)); animation: elFlutua 4.2s ease-in-out infinite; }
.grade4 > :nth-child(2) .el-flut, .grade3 > :nth-child(2) .el-flut { animation-delay: -1.1s; }
.grade4 > :nth-child(3) .el-flut, .grade3 > :nth-child(3) .el-flut { animation-delay: -2.2s; }
.grade4 > :nth-child(4) .el-flut, .grade3 > :nth-child(4) .el-flut { animation-delay: -3.1s; }
.grade3 > :nth-child(5) .el-flut { animation-delay: -1.7s; } .grade3 > :nth-child(6) .el-flut { animation-delay: -2.8s; }
@keyframes elFlutua { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
.s-usos .uso-card .el-flut { height: 70px; max-width: 110px; margin-bottom: 10px; }
.dor-card { padding-top: 0; overflow: hidden; }
.dor-foto { margin: 0 -22px 16px; height: 128px; overflow: hidden; }
.dor-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.dor-card:hover .dor-foto img { transform: scale(1.06); }
.s-dor .foto.dor-banner { aspect-ratio: 21 / 9; margin: 0 0 18px; border-radius: 20px; box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.lp.editar .s-dor .foto.dor-banner.vazia { border-color: rgba(0,0,0,.2); background: #e7e5e0; }
.lp.editar .s-dor .foto-vazia { color: #6b6b73; }
@container lp (min-width: 860px) { .el-flut { height: 104px; max-width: 150px; } .s-usos .uso-card .el-flut { height: 84px; } .dor-foto { height: 150px; } }

/* ---------- halter da Max Force flutuando no canto do vídeo (como a casinha e a chave da Ellus) ---------- */
.vid-caixa { position: relative; display: flex; flex-direction: column; align-items: center; width: min(100%, 330px); }
.vid-caixa .video.vert { width: 100%; }
.halter-flut { position: absolute; z-index: 4; top: -42px; right: -46px; width: 150px; height: auto; pointer-events: none;
  filter: drop-shadow(0 22px 22px rgba(0,0,0,.65)) drop-shadow(0 0 18px rgba(227,34,27,.25)); animation: halterFlutua 4.8s ease-in-out infinite; }
@keyframes halterFlutua { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(-2deg); } }
@container lp (min-width: 860px) { .halter-flut { width: 190px; top: -58px; right: -84px; } }

/* ---------- fitas de Black Friday paradas nas quinas de cima da primeira tela ---------- */
.fita-canto { position: absolute; z-index: 3; top: 0; width: 300px; height: 300px; overflow: hidden; pointer-events: none; }
.fita-canto.esq { left: 0; }
.fita-canto.dir { right: 0; transform: scaleX(-1); }
.fita-canto span { position: absolute; top: 58px; left: -86px; width: 340px; padding: 11px 0; transform: rotate(-45deg); text-align: center;
  font: 400 21px/1 Anton, Impact, sans-serif; font-style: italic; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, #ff3b31 0%, #e3221b 46%, #b8130e 100%);
  box-shadow: 0 10px 22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.25);
  text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.fita-canto span::before, .fita-canto span::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; border-top: 1px dashed rgba(255,255,255,.45); }
.fita-canto span::before { top: 4px; } .fita-canto span::after { bottom: 4px; }
.fita-canto.dir span { transform: rotate(-45deg) scaleX(-1); }
.lp .s-hero { padding-top: 92px; }
@container lp (min-width: 860px) { .lp .s-hero { padding-top: 64px; } .fita-canto { width: 340px; height: 340px; } .fita-canto span { top: 70px; left: -90px; width: 380px; font-size: 25px; padding: 13px 0; } }
@container lp (max-width: 559px) { .fita-canto { width: 190px; height: 190px; } .fita-canto span { top: 34px; left: -62px; width: 240px; font-size: 14px; padding: 7px 0; } }
.lp.editar .fita-canto { top: 44px; }

/* faixa que corre da Black: só a vermelha, mais devagar */
.lp .s.s-bf { height: 96px; }
.bf-a { transform: translateY(-50%) rotate(-1.6deg); }
.bf-trilho { animation-duration: 72s; }
@container lp (min-width: 860px) { .lp .s.s-bf { height: 120px; } }
@media (prefers-reduced-motion: reduce) { .el-flut, .halter-flut { animation: none; } }
/* ajuste 03/11: fitas dos cantos mais longe da quina (a palavra inteira aparece) e halter no canto esquerdo do vídeo */
.fita-canto { width: 340px; height: 340px; }
.fita-canto span { top: 92px; left: -62px; width: 360px; }
@container lp (min-width: 860px) { .fita-canto { width: 400px; height: 400px; } .fita-canto span { top: 104px; left: -66px; width: 420px; } }
@container lp (max-width: 559px) { .fita-canto { width: 220px; height: 220px; } .fita-canto span { top: 52px; left: -50px; width: 260px; } }
.halter-flut { right: auto; left: -50px; top: -30px; }
@keyframes halterFlutua { 0%, 100% { transform: translateY(0) rotate(8deg); } 50% { transform: translateY(-14px) rotate(4deg); } }
@container lp (min-width: 860px) { .halter-flut { left: -96px; right: auto; top: -40px; } }
/* ajuste 2 (03/11): fita menor e mais perto da quina, conteúdo da 1ª tela um pouco mais baixo; halter maior e com brilho para aparecer no escuro */
.fita-canto span { top: 74px; left: -56px; width: 330px; font-size: 19px; padding: 10px 0; }
@container lp (min-width: 860px) { .lp .s-hero { padding-top: 108px; } .fita-canto span { top: 80px; left: -58px; width: 350px; font-size: 21px; padding: 11px 0; } }
@container lp (max-width: 559px) { .fita-canto { width: 170px; height: 170px; } .fita-canto span { top: 30px; left: -50px; width: 210px; font-size: 12px; padding: 6px 0; } .lp .s-hero { padding-top: 96px; } }
.halter-flut { width: 170px; top: -26px; left: -64px;
  filter: brightness(1.45) contrast(1.08) drop-shadow(0 0 1.5px rgba(255,255,255,.55)) drop-shadow(0 0 26px rgba(227,34,27,.65)) drop-shadow(0 22px 22px rgba(0,0,0,.7)); }
@container lp (min-width: 860px) { .halter-flut { width: 240px; top: -34px; left: -132px; } }
.s-usos .uso-card .el-flut { height: 84px; max-width: 150px; }
@container lp (min-width: 860px) { .s-usos .uso-card .el-flut { height: 100px; max-width: 170px; } }
/* imagens nos cartões escuros: um pouco mais de luz e um brilho leve para não sumirem no preto */
.s-teste .el-flut, .s-usos .el-flut { filter: brightness(1.22) drop-shadow(0 0 1px rgba(255,255,255,.35)) drop-shadow(0 0 16px rgba(227,34,27,.3)) drop-shadow(0 12px 14px rgba(0,0,0,.55)); }

/* PEÇAS DE ESTILO do rascunho v2 (03/11/2026): botões Desfazer/Refazer/Histórico, janela do Mac, iPhone, histórico.
   Cores neutras: trocar var(--a-ouro) pela cor de destaque do cliente (na MaxForce, var(--verm)). */
:root { --a-navy: #0A0A0B; --a-ouro: #E3221B; }
.adm-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e4e4e7; background: #fff; border-radius: 10px; padding: 7px 11px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.adm-btn svg { width: 16px; height: 16px; flex: none; }
.adm-btn:disabled { opacity: .38; cursor: default; }
.adm-btn:not(:disabled):hover { border-color: #c9c9cf; background: #fafafa; }
.adm-desfaz { display: inline-flex; gap: 4px; }

/* ---------- palco: a página dentro da janela do Mac (computador) ou do iPhone (celular) ---------- */
.palco { min-height: 100vh; padding: calc(var(--adm) + 18px) 20px 18px; display: flex; justify-content: center; align-items: flex-start;
  background: radial-gradient(1200px 700px at 50% -10%, #3a3a40 0%, #1d1d21 60%, #141416 100%); }
.moldura { position: relative; }
.mac-barra, .ip-topo, .ip-barrinha { display: none; }
.lp { position: relative; overflow-x: hidden; }
.lp .carregando { padding: 80px 20px; text-align: center; color: #8a93a0; }

/* computador: janela do Mac, com as três bolinhas e a barra de endereço */
.palco.pc .moldura { width: min(1440px, 100%); border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.06), 0 34px 90px rgba(0,0,0,.55); }
.palco.pc .mac-barra { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; position: relative;
  background: linear-gradient(#ededed, #dcdcdc); border-bottom: 1px solid #bdbdbd; user-select: none; }
.mac-barra i { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.25); }
.mac-barra i:nth-child(1) { background: #ff5f57; } .mac-barra i:nth-child(2) { background: #febc2e; } .mac-barra i:nth-child(3) { background: #28c840; }
.mac-url { position: absolute; left: 50%; top: 8px; translate: -50% 0; width: min(480px, 56%); height: 24px; border-radius: 7px; background: #fff;
  display: flex; align-items: center; justify-content: center; gap: 6px; font: 500 12.5px Inter, sans-serif; color: #4b4b4f; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.mac-url svg { width: 12px; height: 12px; color: #6b6b70; }
.palco.pc .lp { height: calc(100vh - var(--adm) - 36px - 40px); overflow-y: auto; }

/* celular: iPhone, com a ilha no alto, a hora, o sinal e a bateria, e a barrinha embaixo */
.palco.cel .moldura { width: 412px; height: min(880px, calc(100vh - var(--adm) - 36px)); border-radius: 64px; padding: 11px;
  background: #0b0b0d; display: flex; flex-direction: column;
  box-shadow: 0 0 0 2px #2e2e33, 0 0 0 5px #a3a4aa, 0 0 0 6px #6b6c72, 0 40px 90px rgba(0,0,0,.6); }
.palco.cel .moldura::before { content: ''; position: absolute; left: -8px; top: 168px; width: 3px; height: 58px; border-radius: 3px 0 0 3px; background: #8e8f95;
  box-shadow: 0 74px 0 #8e8f95, 0 -52px 0 0 #8e8f95; }   /* volume e silencioso */
.palco.cel .moldura::after { content: ''; position: absolute; right: -8px; top: 222px; width: 3px; height: 92px; border-radius: 0 3px 3px 0; background: #8e8f95; }   /* liga e desliga */
.palco.cel .ip-topo { display: flex; flex: none; position: relative; height: 52px; align-items: center; justify-content: space-between;
  padding: 4px 30px 0 40px; background: var(--a-navy); color: #fff; font: 600 15.5px -apple-system, Inter, sans-serif; border-radius: 53px 53px 0 0; }
.ip-ilha { position: absolute; left: 50%; top: 11px; translate: -50% 0; width: 122px; height: 35px; border-radius: 20px; background: #000; }
.ip-icones { display: inline-flex; align-items: center; gap: 6px; }
.ip-icones svg { height: 12px; width: auto; }
.palco.cel .lp { flex: 1; min-height: 0; overflow-y: auto; border-radius: 0 0 53px 53px; scrollbar-width: none; }
.palco.cel .lp::-webkit-scrollbar { display: none; }
.palco.cel .ip-barrinha { display: block; position: absolute; left: 50%; bottom: 19px; translate: -50% 0; width: 136px; height: 5px; border-radius: 3px; z-index: 40;
  background: rgba(255,255,255,.88); box-shadow: 0 0 0 1px rgba(0,0,0,.28); pointer-events: none; }

/* no celular de verdade: sem moldura, a página ocupa a tela */
@media (max-width: 760px) {
  :root { --adm: 100px; }
  .adm-in { flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; align-content: center; }
  .adm-marca span, .so-pc, .adm-prog .adm-trilho, .adm-btn .rot { display: none; }
  .adm-prog { min-width: 0; }
  .adm-acoes { margin-left: 0; order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .adm-acoes::-webkit-scrollbar { display: none; }
  .adm-acoes > * { flex: none; }
  .adm-btn { padding: 7px 9px; }
  .troca button { padding: 7px 10px; }
  .estado { margin-left: auto; min-width: 0; }
  .palco { padding: var(--adm) 0 0; display: block; background: #0A0A0B; }
  .palco.cel .moldura, .palco.pc .moldura { width: 100%; height: auto; border-radius: 0; padding: 0; box-shadow: none; background: none; display: block; }
  .palco .moldura::before, .palco .moldura::after, .palco .ip-topo, .palco .ip-barrinha, .palco .mac-barra { display: none !important; }
  .palco .lp { height: auto !important; overflow: visible !important; border-radius: 0 !important; }
  .lp .s-topo { top: var(--adm); }
  .lp.editar .s-topo { top: 0; }
}

.lp section.piscou { animation: piscou 1.6s ease-out; }
@keyframes piscou { 0% { box-shadow: inset 0 0 0 4px rgba(227,34,27,.9); } 100% { box-shadow: inset 0 0 0 4px rgba(227,34,27,0); } }

/* ---------- histórico de alterações ---------- */
.hist { position: fixed; z-index: 102; top: var(--adm); right: 0; bottom: 0; width: min(420px, 100%); background: #fff; color: #18181b; box-shadow: -18px 0 50px rgba(0,0,0,.35);
  display: flex; flex-direction: column; font-family: Inter, sans-serif; animation: histEntra .3s ease-out; }
@keyframes histEntra { from { translate: 40px 0; opacity: 0; } to { translate: none; opacity: 1; } }
.hist-cab { padding: 16px 18px 12px; border-bottom: 1px solid #ececef; display: grid; gap: 4px; }
.hist-cab b { font-size: 16px; }
.hist-cab p { margin: 0; font-size: 12.5px; color: #6b6b70; line-height: 1.45; }
.hist-cab button { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: #f1f1f3; cursor: pointer; font-size: 18px; }
.hist-lista { flex: 1; overflow-y: auto; padding: 8px 10px 20px; }
.hist-dia { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #b8130e; padding: 12px 8px 6px; }
.hist-item { display: grid; grid-template-columns: 46px 1fr; gap: 10px; padding: 10px 8px; border-radius: 10px; }
.hist-item:hover { background: #faf7f1; }
.hist-hora { font-size: 12.5px; font-weight: 700; color: #52525b; padding-top: 1px; }
.hist-item b { display: block; font-size: 13px; }
.hist-item small { display: block; font-size: 12px; color: #6b6b70; margin-top: 1px; }
.hist-txt { font-size: 12.5px; color: #3f3f46; margin-top: 5px; line-height: 1.4; word-break: break-word; }
.hist-txt s { color: #a1a1aa; }
.hist-voltar { margin-top: 7px; border: 1px solid #e0d3b9; background: #fff; color: #6a5122; border-radius: 8px; padding: 5px 10px; font: 700 12px Inter, sans-serif; cursor: pointer; }
.hist-voltar:hover { background: #fbf6ec; }
.hist-vazio { padding: 30px 12px; text-align: center; color: #71717a; font-size: 13.5px; }
.aviso-rapido { position: fixed; z-index: 120; left: 50%; bottom: 22px; translate: -50% 0; background: #18181b; color: #fff; font: 600 13.5px Inter, sans-serif;
  padding: 10px 16px; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.4); animation: dicaEntra .3s ease-out both; }
/* 03/11: faixa das garantias mais devagar (pedido do Jefferson: estava rápida) */
.faixa-trilho { animation-duration: 76s; }
/* 03/11: halter menor, no canto de baixo à esquerda do vídeo, sem cobrir texto (fica no vão entre o texto e o vídeo) */
.halter-flut { top: auto; bottom: 8px; left: -18px; right: auto; width: 104px; }
@keyframes halterFlutua { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-10px) rotate(-4deg); } }
@container lp (min-width: 860px) { .halter-flut { top: auto; bottom: 8px; left: -112px; width: 150px; } }
/* 03/11: imagens do teste paradas (pedido do Jefferson) */
.s-teste .el-flut { animation: none; transform: none; }
/* 03/11: fita dos cantos mais comprida, para as pontas saírem pelas bordas da tela (não aparece o fim da fita) */
.fita-canto span { width: 620px; left: -201px; }
@container lp (min-width: 860px) { .fita-canto span { width: 720px; left: -243px; } }
@container lp (max-width: 559px) { .fita-canto span { width: 480px; left: -185px; } }
.lp.editar .fita-canto { top: 0; }

/* 03/11: fotos geradas no ChatGPT no alto dos cartões do teste e das áreas de uso (paradas, como as do piso barato) */
.teste-card, .uso-card { padding-top: 0; overflow: hidden; }
.card-foto { position: relative; margin: 0 -22px 16px; height: 140px; overflow: hidden; }
.s-usos .uso-card .card-foto { margin: 0 -16px 12px; height: 110px; }
.card-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(26,26,29,.65)); }
.teste-card:hover .card-foto img, .uso-card:hover .card-foto img { transform: scale(1.06); }
.teste-card .n { z-index: 2; color: rgba(255,255,255,.55); text-shadow: 0 2px 8px rgba(0,0,0,.6); }
@container lp (min-width: 860px) { .card-foto { height: 160px; } .s-usos .uso-card .card-foto { margin: 0 -22px 14px; height: 170px; } }
/* 03/11: na fábrica, o vídeo do mesmo tamanho da foto, lado a lado */
.fab-midia { grid-template-columns: 1fr 1fr; align-items: stretch; gap: 12px; }
.fab-midia .fab-foto { aspect-ratio: 3 / 4; height: 100%; }
.fab-midia > .video, .fab-midia > .video-ed { width: 100%; height: 100%; }
.fab-midia .video.vert, .fab-midia .video.vert.pequeno { width: 100%; height: 100%; aspect-ratio: auto; min-height: 100%; }
.fab-midia > .video-ed > .video { flex: 1; }
@container lp (min-width: 860px) { .fab-midia { grid-template-columns: 1fr 1fr; align-items: stretch; } .fab-midia .fab-foto { aspect-ratio: 3 / 4; } }
/* 03/11: etiqueta da fábrica menor, numa linha, com a bolinha verde de "online"; no celular o título sobe para perto das fitas */
.selo { gap: 7px; padding: 5px 11px 5px 9px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; color: #e9e9ec;
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.selo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.7); animation: online 1.8s ease-out infinite; }
@keyframes online { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.7); } 100% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } }
.lp.editar .selo { white-space: normal; }
@container lp (max-width: 559px) {
  .lp .s-hero { padding-top: 64px; }
  .selo { font-size: 10px; padding: 4px 9px 4px 8px; margin-bottom: 12px; }
  .h1 { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) { .selo::before { animation: none; } }
@container lp (max-width: 559px) { .fita-canto span { top: 18px; left: -195px; font-size: 11px; padding: 5px 0; } }

/* 03/11: balões flutuantes com trechos das avaliações reais do Google (mesmo visual do rascunho do Carlos) */
.g-baloes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.g-balao { display: none; }
@container lp (min-width: 1100px) {
  .g-balao { display: block; position: absolute; max-width: 250px; padding: 10px 16px; border-radius: 4px; background: rgba(255,255,255,.06);
    border: 1px solid rgba(227,34,27,.35); color: #eef0f3; font: italic 500 15px/1.4 Inter, sans-serif; box-shadow: 0 12px 30px rgba(0,0,0,.35);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: gBalao 7s ease-in-out infinite; }
  .g-balao i { display: block; font-style: normal; color: #fbbc04; font-size: 11px; letter-spacing: 1px; margin-bottom: 3px; }
  .g-balao-1 { left: 4%; top: 70px; } .g-balao-2 { right: 4%; top: 58px; animation-delay: -2s; }
  .g-balao-3 { left: 8%; top: 220px; animation-delay: -4s; } .g-balao-4 { right: 7%; top: 212px; animation-delay: -5.5s; }
}
@keyframes gBalao { 50% { transform: translateY(-10px); } }
.g-baloes-ed { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 2px; }
.g-balao-ed { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid rgba(227,34,27,.4); background: rgba(255,255,255,.06); color: #eef0f3; font-style: italic; font-size: 14px; max-width: 260px; }
.g-balao-ed i { font-style: normal; color: #fbbc04; font-size: 11px; letter-spacing: 1px; }
@media (prefers-reduced-motion: reduce) { .g-balao { animation: none; } }
@container lp (min-width: 1100px) { .g-balao-1 { top: 34px; } .g-balao-2 { top: 26px; } .g-balao-3 { top: 150px; left: 9%; } .g-balao-4 { top: 146px; right: 8%; } }

/* balões arredondados; "exemplo" enquanto a frase não for de um cliente real */
.g-balao, .g-balao-ed { border-radius: 16px; }
@container lp (min-width: 1100px) { .g-balao { border-radius: 16px; padding: 11px 16px 10px; } }
.g-ex { display: inline-block; margin-top: 5px; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.2); border-radius: 99px; padding: 1px 7px; }
/* 03/11: sem a marquinha "exemplo" nos balões (pedido do Jefferson); o aviso fica só no rótulo do campo, no modo Editar */
.g-ex { display: none !important; }

/* 12/11/2026: selo dos cartões de exemplo e espaço para os balões não cobrirem os cartões */
.g-card { position: relative; }
.g-selo-ex { position: absolute; top: 14px; right: 14px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: #E3221B; color: #fff;
  font: 700 10px/1.2 Inter, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; box-shadow: 0 4px 10px rgba(0,0,0,.3); }
@container lp (min-width: 1100px) { .s-google .g-baloes:not(:empty) ~ .g-corre { margin-top: 84px; } }
/* 12/11/2026: sem o selo EXEMPLO nos cartões (ordem do Jefferson); o "(exemplo)" fica só no nome, no modo Editar */
.g-selo-ex { display: none !important; }

/* 12/11/2026: aviso de conteúdo demonstrativo abaixo do título dos depoimentos */
.g-aviso-demo { margin: 12px auto 0; display: inline-block; padding: 4px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  color: rgba(255,255,255,.62); font: 600 11.5px/1.3 Inter, sans-serif; letter-spacing: .4px; }
.s-google .cab .g-aviso-demo { display: table; }
/* 12/11/2026: aviso menor (pedido do Jefferson), ainda legível */
.s-google .cab .g-aviso-demo { margin-top: 10px; padding: 2px 9px; font-size: 10px; letter-spacing: .3px; }
.s-google .cab .g-aviso-demo { margin-top: 8px; padding: 1px 8px; font-size: 9px; }
.s-google .cab .g-aviso-demo { color: rgba(255,255,255,.5); border-color: rgba(255,255,255,.12); }