/* Conta do Bolo — página de vendas (v3, página enxuta de 08/10: 8 blocos). Tokens iguais a criativos/app/tokens.css (a página é publicada sozinha,
   por isso os valores estão copiados aqui; mudou lá, muda aqui). Mobile first, 375 px de referência; desktop em 1120 px. */
@font-face { font-family: "Fraunces"; src: url("fontes/Fraunces-sub.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fontes/DMSans-sub.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --cb-creme: #FFFBF5; --cb-surface: #FFFFFF; --cb-massa: #F1E0C5; --cb-massa-50: #F8EEDC; --cb-linha: #E6D5BC; --cb-borda-campo: #9C8571;
  --cb-texto: #3B2A20; --cb-texto-2: #5C4A3E; --cb-texto-3: #7A6657;
  --cb-chocolate-900: #2A1D15; --cb-terracota: #9A3F17; --cb-terracota-600: #7F3211; --cb-terracota-100: #F6DFD2;
  --cb-caramelo: #EFB35E; --cb-caramelo-100: #FBE9C9; --cb-pessego: #F2B58F;
  --cb-ganho: #2F6B45; --cb-ganho-100: #E4F0DC; --cb-ganho-claro: #B9E4A4; --cb-erro: #A31515; --cb-foco: #1A56DB;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-text: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.625rem; --fs-2xl: 2rem; --fs-hero: clamp(2.1rem, 8.6vw, 5rem);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-24: 96px;
  --page-x: 20px; --tap: 56px;
  --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(42, 29, 21, .06), 0 1px 1px rgba(42, 29, 21, .04);
  --sh-2: 0 2px 4px rgba(42, 29, 21, .05), 0 12px 28px rgba(42, 29, 21, .09);
  --sh-3: 0 28px 48px -16px rgba(42, 29, 21, .45);
  --sh-btn: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 8px 18px -6px rgba(154, 63, 23, .55);
  --ease: cubic-bezier(.22, .8, .24, 1); --t-fast: 140ms; --t-base: 260ms; --t-slow: 640ms;
  --sec-y: var(--sp-16);
}
@media (min-width: 900px) { :root { --page-x: 24px; --sec-y: var(--sp-24); --fs-2xl: 3rem; --fs-xl: 2rem; } }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--cb-creme); color: var(--cb-texto); font-family: var(--font-text); font-size: var(--fs-md); line-height: 1.55; font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, canvas { display: block; max-width: 100%; height: auto; }
a { color: var(--cb-terracota); }
:focus-visible { outline: 3px solid var(--cb-foco); outline-offset: 3px; border-radius: var(--r-sm); }
.i { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wrap { width: min(100% - 2 * var(--page-x), 1120px); margin-inline: auto; }
.display { font-family: var(--font-display); font-weight: 800; font-variation-settings: "SOFT" 100; letter-spacing: -0.02em; line-height: 1.05; }
.h2 { font-size: var(--fs-2xl); max-width: 22ch; }
.eyebrow { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cb-terracota); }
.eyebrow.light { color: var(--cb-pessego); }
.lead { margin-top: var(--sp-4); color: var(--cb-texto-2); font-size: var(--fs-md); line-height: 1.55; max-width: 58ch; }
.hint { color: var(--cb-texto-3); font-size: var(--fs-sm); line-height: 1.45; }
mark { background: linear-gradient(transparent 62%, var(--cb-caramelo) 62% 92%, transparent 92%); color: inherit; padding: 0 .04em; }
.preencher { display: inline-block; background: #FFF3C4; color: var(--cb-texto); padding: 0 6px; border-radius: 6px; font: 500 var(--fs-sm)/1.5 ui-monospace, Menlo, Consolas, monospace; }
.sec { padding-block: var(--sec-y); }
.sec-head { margin-bottom: var(--sp-8); }
.sec-head .eyebrow + .h2 { margin-top: var(--sp-2); }
.center { text-align: center; }

/* Botões, selos, cartões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: var(--tap); padding: 12px var(--sp-5); border: 0; border-radius: var(--r-md); font: 700 var(--fs-md)/1.2 var(--font-text); text-decoration: none; text-align: center; cursor: pointer; transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease); }
.btn:active { transform: translateY(1px) scale(.992); }
.btn.primary { background: var(--cb-terracota); color: var(--cb-creme); box-shadow: var(--sh-btn); }
.btn.primary:hover { background: var(--cb-terracota-600); }
.btn.big { min-height: 64px; font-size: var(--fs-lg); border-radius: var(--r-lg); padding-inline: var(--sp-6); }
.cta-block { margin-top: var(--sp-6); }
.micro { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--cb-texto-3); text-align: center; }
.micro.selo { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--cb-ganho); font-weight: 700; }
.micro.selo .i { width: 20px; height: 20px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; background: var(--cb-massa-50); color: var(--cb-texto); border: 1px solid var(--cb-linha); white-space: nowrap; }
.badge.exemplo { background: var(--cb-caramelo-100); border-color: #E6C48A; }
.card { background: var(--cb-surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); border: 1px solid var(--cb-linha); padding: var(--sp-5); }
.card.flat { box-shadow: none; background: var(--cb-massa-50); }
.panel.dark { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: var(--sp-10) var(--sp-5); color: var(--cb-creme); background:
  radial-gradient(70% 50% at 0 0, rgba(239, 179, 94, .22), transparent 60%),
  radial-gradient(70% 60% at 100% 100%, rgba(185, 228, 164, .10), transparent 60%), var(--cb-chocolate-900); box-shadow: var(--sh-3); }
.panel.dark .h2 { color: var(--cb-creme); }
.panel.dark .lead { color: #E8D9C3; }
@media (min-width: 900px) { .panel.dark { padding: var(--sp-16); } }

/* Campos (iguais ao app) */
.field label { display: block; font-weight: 700; margin-bottom: 6px; line-height: 1.3; font-size: var(--fs-md); }
.control { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-4); background: var(--cb-surface); border: 1.5px solid var(--cb-borda-campo); border-radius: var(--r-sm); gap: var(--sp-2); transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.control:focus-within { border-color: var(--cb-terracota); box-shadow: 0 0 0 4px var(--cb-terracota-100); }
.control input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font: 600 var(--fs-lg)/1 var(--font-text); color: var(--cb-texto); padding: 0; min-height: 52px; }
.control input::placeholder { color: var(--cb-texto-3); font-weight: 500; }
.control .adorn { color: var(--cb-texto-2); font-weight: 700; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.two > * { min-width: 0; }
@media (max-width: 480px) { .sim-form .two { grid-template-columns: 1fr; gap: var(--sp-4); } }
.field + .field, .two + .field, .field + .two, .two + .two { margin-top: var(--sp-4); }

/* Barra do topo */
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--cb-creme) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.topbar-in { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cb-texto); font-family: var(--font-display); font-weight: 800; font-variation-settings: "SOFT" 100; font-size: 1.2rem; letter-spacing: -0.01em; }
.brand img { width: 36px; height: 36px; border-radius: 10px; }
.brand b { font-weight: 500; color: var(--cb-terracota); }

/* (a) Primeira tela */
.hero { position: relative; padding: var(--sp-3) 0 var(--sp-10); overflow: clip; background: radial-gradient(90% 36% at 100% 0, rgba(239, 179, 94, .28), transparent 60%), var(--cb-creme); }
.hero-title { font-size: var(--fs-hero); margin-top: var(--sp-2); }
.hero .eyebrow { letter-spacing: .08em; white-space: nowrap; }
.hero .lead { font-size: 1.0625rem; margin-top: var(--sp-3); }
.hero .cta-block { margin-top: var(--sp-5); }
.sim-link { margin-top: var(--sp-2); }
.sim-link a { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (min-width: 900px) { .hero .lead { font-size: 1.125rem; } }
.stage { position: relative; height: 640px; margin: var(--sp-4) calc(-1 * var(--page-x)) 0; }
.phone { position: relative; width: 280px; aspect-ratio: 9 / 19; padding: 10px; border-radius: 44px; background: linear-gradient(160deg, #3B2A20, #1E140F); box-shadow: var(--sh-3), inset 0 0 0 1.5px rgba(255, 251, 245, .14); }
.phone .screen { position: relative; height: 100%; overflow: hidden; border-radius: 34px; background: var(--cb-creme); }
.phone .screen img { width: 100%; height: auto; }
.phone-hero { position: absolute; left: 50%; top: 24px; transform: translateX(-50%) rotate(-3deg); }
.phone-hero .screen { display: flex; flex-direction: column; padding: 8px 10px 12px; gap: 8px; background: radial-gradient(120% 40% at 100% 0, rgba(239, 179, 94, .22), transparent 60%), var(--cb-creme); }
.pbar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px; font-family: var(--font-display); font-weight: 800; font-variation-settings: "SOFT" 100; font-size: 1rem; }
.pbar .i { width: 20px; height: 20px; }
.pprev { padding: 8px; border-radius: 18px; background: var(--cb-massa); box-shadow: inset 0 0 0 1px var(--cb-linha); }
.pprev img { border-radius: 10px; box-shadow: 0 14px 24px -12px rgba(42, 29, 21, .5); }
.pmeta { font-size: 11px; color: var(--cb-texto-3); padding: 0 4px; }
.pcheck { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; border: 1.5px solid var(--cb-terracota); background: var(--cb-terracota-100); font-size: 12px; font-weight: 700; }
.pcheck i { width: 18px; height: 18px; border-radius: 6px; background: var(--cb-terracota); display: grid; place-items: center; color: var(--cb-creme); }
.pcheck i .i { width: 12px; height: 12px; stroke-width: 3; }
.pcheck b { margin-left: auto; color: var(--cb-terracota); }
.pbtns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: auto; align-content: end; align-items: end; }
.pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; max-height: 42px; border-radius: 12px; font-size: 13px; font-weight: 700; }
.pbtn .i { width: 16px; height: 16px; }
.pbtn.alt { background: var(--cb-massa-50); box-shadow: inset 0 0 0 1.5px var(--cb-linha); }
.pbtn.pri { background: var(--cb-terracota); color: var(--cb-creme); box-shadow: var(--sh-btn); }
.chip { position: absolute; padding: 10px 14px 11px; border-radius: 18px; background: var(--cb-surface); box-shadow: var(--sh-2); border: 1px solid var(--cb-linha); line-height: 1.15; }
.chip small { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--cb-texto-2); }
.chip b { display: block; margin-top: 2px; font-family: var(--font-display); font-weight: 800; font-variation-settings: "SOFT" 100; font-size: 1.55rem; color: var(--cb-terracota); letter-spacing: -0.01em; }
.chip b em { font: 700 var(--fs-xs)/1 var(--font-text); letter-spacing: 0; color: var(--cb-texto-2); }
.chip.win { background: var(--cb-ganho-100); border-color: #C5DDB8; }
.chip.win small, .chip.win b, .chip.win b em { color: var(--cb-ganho); }
.chip-1 { left: 10px; top: 86px; --rot: -4deg; --d: 320ms; }
.chip-2 { right: 10px; top: 300px; --rot: 3deg; --d: 440ms; }
.chip-3 { left: 22px; bottom: 56px; --rot: 2deg; --d: 560ms; }
.ready .phone-hero { animation: phone-in var(--t-slow) var(--ease) both; }
.ready .chip { animation: chip-in var(--t-slow) var(--ease) var(--d) both, chip-float 6s ease-in-out calc(var(--d) + var(--t-slow)) infinite; }
.chip-2.chip { animation-direction: normal, reverse; }
@keyframes phone-in { from { opacity: 0; transform: translateX(-50%) translateY(18px) rotate(-1deg); } to { opacity: 1; transform: translateX(-50%) rotate(-3deg); } }
@keyframes chip-in { from { opacity: 0; transform: translateY(12px) rotate(var(--rot)); } to { opacity: 1; transform: translateY(0) rotate(var(--rot)); } }
@keyframes chip-float { 0%, 100% { transform: translateY(0) rotate(var(--rot)); } 50% { transform: translateY(-4px) rotate(var(--rot)); } }
.paused .chip { animation-play-state: paused; }
/* celular (≤ 480 px): o palco encolhe para a dobra caber em ~1.100 px; a tabela e os botões ficam (são a promessa) */
@media (max-width: 480px) {
  .stage { height: 500px; }
  .phone-hero { width: 228px; top: 16px; padding: 8px; border-radius: 38px; }
  .phone-hero .screen { border-radius: 30px; padding: 6px 8px 10px; }
  .phone-hero .pmeta, .phone-hero .pcheck { display: none; }
  .chip-1 { left: 6px; top: 56px; } .chip-2 { right: 6px; top: 232px; } .chip-3 { left: 14px; bottom: 28px; }
  .chip b { font-size: 1.4rem; }
}
@media (min-width: 900px) {
  .hero { padding: var(--sp-10) 0 var(--sp-16); }
  .hero-grid { display: grid; grid-template-columns: 6fr 6fr; gap: var(--sp-10); align-items: center; }
  .hero-title { font-size: clamp(3rem, 4.6vw, 4.4rem); max-width: 13ch; }
  .hero .cta-block { margin-top: var(--sp-6); }
  .hero .sim-link { text-align: left; }
  .hero .cta-block .btn { width: auto; min-width: 380px; }
  .hero .micro { text-align: left; }
  .stage { height: 700px; margin: 0; }
  .phone-hero { width: 300px; top: 48px; left: 58%; }
  .chip-1 { left: 8px; top: 96px; } .chip-2 { right: 0; top: 330px; } .chip-3 { left: 32px; bottom: 100px; }
}

/* (b) Simulador */
.sim { padding: var(--sp-5); border-radius: var(--r-xl); }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: var(--sp-5); }
@media (min-width: 900px) { .tabs { display: flex; flex-wrap: wrap; } }
.tabs button { min-height: 44px; padding: 6px 10px; line-height: 1.1; border-radius: var(--r-pill); border: 1px solid var(--cb-linha); background: var(--cb-massa-50); color: var(--cb-texto); font: 700 var(--fs-sm)/1 var(--font-text); cursor: pointer; transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-fast) var(--ease); }
.tabs button[aria-selected="true"] { background: var(--cb-chocolate-900); color: var(--cb-creme); border-color: var(--cb-chocolate-900); }
.tabs button:active { transform: scale(.97); }
.more { margin-top: var(--sp-4); border-radius: var(--r-md); border: 1px dashed var(--cb-borda-campo); padding: 0 var(--sp-4); }
.more summary { display: grid; grid-template-columns: 1fr 24px; align-items: center; column-gap: 10px; min-height: 52px; padding: 10px 0; font-weight: 700; cursor: pointer; list-style: none; }
.more summary small { display: block; grid-column: 1; margin-top: 2px; }
.more summary .i { grid-column: 2; grid-row: 1 / span 2; }
.more summary::-webkit-details-marker { display: none; }
.more summary small { flex: 1; font-weight: 500; color: var(--cb-texto-3); font-size: var(--fs-xs); line-height: 1.3; }
.more summary .i { transition: transform var(--t-base) var(--ease); color: var(--cb-terracota); }
.more[open] summary .i { transform: rotate(180deg); }
.more[open] summary { border-bottom: 1px dashed var(--cb-linha); margin-bottom: var(--sp-4); }
.more .hint { margin: var(--sp-3) 0 var(--sp-4); }
.sim-error { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: #FBE4E4; color: var(--cb-erro); font-weight: 700; font-size: var(--fs-sm); }
.sim-out { margin-top: var(--sp-5); }
.out { border-radius: var(--r-lg); overflow: hidden; color: var(--cb-creme); background: radial-gradient(70% 60% at 0 0, rgba(239, 179, 94, .18), transparent 60%), var(--cb-chocolate-900); box-shadow: var(--sh-3); }
.out-cols { display: grid; grid-template-columns: 1fr 1fr; }
.out-col { padding: var(--sp-4) var(--sp-4) var(--sp-5); min-width: 0; }
.out-col small { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cb-pessego); line-height: 1.3; }
.out-num { margin-top: 6px; white-space: nowrap; font-family: var(--font-display); font-weight: 800; font-variation-settings: "SOFT" 100; font-size: clamp(1.35rem, 5.6vw, 2.1rem); letter-spacing: -0.02em; line-height: 1.05; }
.out-sub { display: block; margin-top: 4px; font-size: var(--fs-sm); color: #E8D9C3; }
.out-col.win { position: relative; overflow: hidden; background: rgba(185, 228, 164, .12); box-shadow: inset 1px 0 0 rgba(185, 228, 164, .35); }
.out-col.win small { color: var(--cb-ganho-claro); }
.out-col.win .out-num { color: var(--cb-ganho-claro); }
.out-col.win.shine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 251, 245, .22) 50%, transparent 65%); background-size: 250% 100%; animation: sweep 1s var(--ease) 1 both; pointer-events: none; }
@keyframes sweep { from { background-position: 140% 0; } to { background-position: -40% 0; } }
.out-col.short .out-num { color: var(--cb-pessego); }
.out-num em { display: block; font: 700 var(--fs-xs)/1.2 var(--font-text); letter-spacing: .04em; text-transform: uppercase; color: var(--cb-pessego); margin-bottom: 2px; }
.out-col small { min-height: calc(2 * 1.3em); }
.out-lines { padding: var(--sp-3) var(--sp-4) 0; display: grid; gap: 8px; }
.out-line { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: #E8D9C3; }
.out-line b { color: var(--cb-ganho-claro); font-weight: 800; }
.out-line.hour { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(239, 179, 94, .14); color: var(--cb-creme); }
.out-line.hour .i { width: 20px; height: 20px; color: var(--cb-caramelo); margin-top: 1px; }
.out-line.hour b { color: var(--cb-caramelo); }
.out-line[hidden] { display: none; }
.sim-note { margin-top: var(--sp-3); font-size: var(--fs-xs); line-height: 1.5; color: var(--cb-texto-3); }
.out-lines { padding-bottom: var(--sp-4); }
.out.stale .out-num { opacity: .45; }
.mini { display: grid; grid-template-columns: 112px 1fr; gap: var(--sp-4); align-items: center; margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--cb-massa); }
.mini-paper { position: relative; }
.mini-paper canvas { width: 100%; border-radius: 8px; box-shadow: 0 10px 18px -8px rgba(42, 29, 21, .5); background: #fff; transition: opacity var(--t-fast) var(--ease); }
.mini-side .hint { margin-top: var(--sp-2); }
@media (min-width: 900px) {
  .sim { padding: var(--sp-8); }
  .sim-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-8); align-items: start; }
  .sim-out { margin-top: 0; }
  .out-num { font-size: 2.4rem; }
  .mini { grid-template-columns: 150px 1fr; padding: var(--sp-5); }
  .sim .cta-block { max-width: 520px; margin-inline: auto; }
}

/* (c1) Recibo */
.recibo-sec { background: linear-gradient(180deg, var(--cb-creme), var(--cb-massa-50) 30%, var(--cb-massa-50)); }
.receipt-wrap { margin-top: var(--sp-8); filter: drop-shadow(0 14px 22px rgba(42, 29, 21, .14)); }
.receipt { position: relative; padding: var(--sp-6) var(--sp-5) var(--sp-8); background: #FFFDF8; border-radius: 6px;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 100% repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 100% repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat; }
.receipt h3 { font-size: var(--fs-lg); }
.receipt .sub { font-size: var(--fs-sm); color: var(--cb-texto-3); margin-top: 4px; }
.receipt dl { margin-top: var(--sp-4); }
.receipt .row { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; font-size: 1rem; opacity: 0; transform: translateY(8px); }
.in .receipt .row, .no-motion .receipt .row { opacity: 1; transform: none; transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
.receipt .row dt { color: var(--cb-texto-2); max-width: 60%; }
.receipt .row.hl dt mark { background: linear-gradient(transparent 55%, var(--cb-caramelo-100) 55% 95%, transparent 95%); color: var(--cb-texto); font-weight: 700; padding: 0 .1em; }
.receipt .row::before { content: ""; order: 1; flex: 1; border-bottom: 2px dotted #D8C6AB; transform: translateY(-4px); min-width: 16px; }
.receipt .row dd { order: 2; font-weight: 700; white-space: nowrap; }
.receipt .row.win { margin-top: 6px; padding-top: 12px; border-top: 1.5px solid var(--cb-texto); }
.receipt .row.win dt, .receipt .row.win dd { color: var(--cb-ganho); font-weight: 800; }
.receipt .row.total { padding-top: 12px; margin-top: 4px; border-top: 1.5px solid var(--cb-texto); }
.receipt .row.total::before { display: none; }
.receipt .row.total dt { color: var(--cb-texto); font-weight: 800; font-size: var(--fs-lg); font-family: var(--font-display); font-variation-settings: "SOFT" 100; }
.receipt .row.total dd { margin-left: auto; color: var(--cb-terracota); font-size: 2rem; font-family: var(--font-display); font-weight: 800; font-variation-settings: "SOFT" 100; letter-spacing: -0.01em; }
.in .receipt .row.total dd { animation: pulse 700ms var(--ease) 700ms 1; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.under { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--cb-texto-2); text-align: center; }
.under b { color: var(--cb-texto); }
@media (min-width: 900px) {
  .recibo-grid { display: grid; grid-template-columns: 6fr 5fr; gap: var(--sp-16); align-items: center; }
  .receipt-wrap { margin-top: 0; }
  .receipt { padding: var(--sp-8) var(--sp-8) var(--sp-10); }
}

/* (a2) Faixa de fotos: ambientação, como fotos soltas na mesa (3 no celular, 5 no desktop) */
.fotos-sec { display: none; padding: 0 0 var(--sp-6); background: var(--cb-creme); }
.fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: calc(-1 * var(--sp-2)); }
.fotos li { position: relative; aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden; background: var(--cb-massa); box-shadow: var(--sh-2); border: 4px solid var(--cb-surface); transform: rotate(var(--rot, 0)); }
.fotos li:nth-child(1) { --rot: -2deg; } .fotos li:nth-child(2) { --rot: 1.2deg; } .fotos li:nth-child(3) { --rot: -1deg; } .fotos li:nth-child(4) { --rot: 1.6deg; } .fotos li:nth-child(5) { --rot: -1.4deg; }
.fotos li:nth-child(n+4) { display: none; }
.fotos img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .fotos-sec { display: block; padding-bottom: var(--sp-8); }
  .fotos { grid-template-columns: repeat(5, 1fr); gap: var(--sp-5); margin-top: calc(-1 * var(--sp-8)); }
  .fotos li:nth-child(n+4) { display: block; }
}

/* (4) Vídeo do app real numa moldura (dentro do bloco do orçamento) */
.video-phone { width: min(272px, 100%); padding: 9px; border-radius: 42px; margin: 0 auto; }
.video-phone .screen { aspect-ratio: 750 / 1624; height: auto; border-radius: 33px; }
.app-video, .app-static { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; background: var(--cb-creme); }
.app-static { display: none; }
/* a legenda fica fora da moldura, logo abaixo do celular (a moldura mantém a proporção do aparelho) */
.video-phone { margin-bottom: 72px; }
.video-phone figcaption { position: absolute; top: calc(100% + var(--sp-3)); left: 0; right: 0; font-size: var(--fs-sm); color: #E8D9C3; line-height: 1.4; }
.video-phone figcaption b { color: var(--cb-creme); }
.video-phone figcaption.with-ctrl { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.vid-ctrl { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255, 251, 245, .35); background: rgba(255, 251, 245, .08); color: var(--cb-creme); cursor: pointer; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.vid-ctrl:hover { background: rgba(255, 251, 245, .18); }
.vid-ctrl:active { transform: scale(.94); }
.vid-ctrl .i { width: 20px; height: 20px; stroke-width: 2.2; }
.vid-ctrl .i + .i { display: none; }
.vid-ctrl[aria-pressed="true"] .i { display: none; }
.vid-ctrl[aria-pressed="true"] .i + .i { display: block; }
.vid-ctrl[hidden] { display: none; }

/* Balões de WhatsApp (orçamento e "tá caro" da oferta) */
.wa { border-radius: var(--r-lg); overflow: hidden; background: #ECE3D5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='1' fill='%23D9CBB5'/%3E%3C/svg%3E"); border: 1px solid var(--cb-linha); padding: 0 0 var(--sp-4); font-size: var(--fs-sm); line-height: 1.45; }
.wa-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--cb-chocolate-900); color: var(--cb-creme); }
.wa-bar b { display: block; font-size: var(--fs-sm); } .wa-bar small { display: block; font-size: var(--fs-xs); color: #B9A48F; }
.wa-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cb-massa); color: var(--cb-texto); font-weight: 800; }
.wa-in, .wa-out { margin: var(--sp-3) var(--sp-3) 0; max-width: 88%; padding: 9px 12px; border-radius: 14px; box-shadow: var(--sh-1); }
.wa-in { background: #fff; border-top-left-radius: 4px; }
.wa-out { background: var(--cb-ganho-100); margin-left: auto; border-top-right-radius: 4px; }
.wa-out p, .wa-in p { margin: 0; }
.wa-copy { display: inline-flex; align-items: center; gap: 6px; margin: var(--sp-3) var(--sp-3) 0 auto; padding: 5px 10px; border-radius: var(--r-pill); background: var(--cb-chocolate-900); color: var(--cb-creme); font-size: var(--fs-xs); font-weight: 700; float: right; }
.wa-copy .i { width: 16px; height: 16px; stroke-width: 3; }
.wa::after { content: ""; display: block; clear: both; }

/* (5) Oferta: cartão claro sobre massa (o bloco anterior, o orçamento, é escuro) */
.oferta-sec { background: linear-gradient(180deg, var(--cb-creme), var(--cb-massa-50) 18%, var(--cb-massa-50)); }
.offer { position: relative; padding: var(--sp-8) var(--sp-5) var(--sp-6); border-radius: var(--r-xl); border-top: 4px solid var(--cb-caramelo); color: var(--cb-texto); box-shadow: var(--sh-3); }
.offer-title { text-align: center; margin-inline: auto; font-size: var(--fs-xl); }
.offer-head { text-align: center; margin-top: var(--sp-3); }
.offer-price { font-size: 4rem; color: var(--cb-terracota); line-height: 1; }
.offer-sub { margin-top: 4px; font-weight: 700; color: var(--cb-texto-2); }
.offer-groups { display: grid; gap: var(--sp-6); margin-top: var(--sp-6); }
.offer-group h3 { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cb-terracota); padding-bottom: 8px; border-bottom: 1px solid var(--cb-linha); }
.offer-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.offer-list li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.4; font-size: 1rem; }
.offer-list .i { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--cb-terracota); color: var(--cb-creme); stroke-width: 3; margin-top: 1px; }
.wa-mini { margin-top: var(--sp-3); padding-bottom: var(--sp-3); font-size: .875rem; line-height: 1.45; }
.wa-mini .wa-in { margin-top: var(--sp-3); }
.offer .cta-block { margin-top: var(--sp-6); }
.offer-after { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.ancora { font-size: var(--fs-sm); color: var(--cb-texto-3); line-height: 1.5; text-align: center; }
.ancora .preencher { display: inline; margin-left: 6px; }
.nowrap { white-space: nowrap; }
.prazo { display: flex; gap: 12px; align-items: flex-start; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--cb-caramelo-100); line-height: 1.5; font-size: var(--fs-sm); color: var(--cb-texto); }
.prazo .i { color: var(--cb-terracota); margin-top: 1px; }
@media (min-width: 900px) {
  .offer { max-width: 880px; margin-inline: auto; padding: var(--sp-12) var(--sp-12) var(--sp-10); }
  .offer-price { font-size: 4.5rem; }
  .offer-groups { grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
  .offer .cta-block { max-width: 460px; margin-inline: auto; }
  .offer-after { max-width: 640px; margin-inline: auto; }
}

/* (6) Garantia: selo à esquerda do título no celular; CTA */
.garantia-sec { padding-bottom: var(--sp-12); }
.garantia { display: grid; gap: var(--sp-4); align-items: start; }
.garantia-head { display: flex; align-items: center; gap: var(--sp-4); }
.garantia .lead { margin-top: 0; }
.garantia .cta-block { margin-top: var(--sp-5); }
.selo7 { flex: none; display: grid; place-items: center; align-content: center; width: 72px; height: 72px; border-radius: 50%; border: 2.5px solid var(--cb-terracota); color: var(--cb-terracota); background: var(--cb-surface); box-shadow: var(--sh-2); position: relative; }
.selo7::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px dashed var(--cb-terracota); opacity: .6; }
.selo7 .display { font-size: 2rem; line-height: 1; }
.selo7 small { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
@media (min-width: 900px) {
  .garantia { grid-template-columns: 5fr 7fr; gap: var(--sp-10); align-items: center; max-width: 980px; }
  .selo7 { width: 120px; height: 120px; border-width: 3px; }
  .selo7::before { inset: 7px; }
  .selo7 .display { font-size: 3.2rem; }
  .selo7 small { font-size: var(--fs-xs); }
  .garantia .cta-block .btn { width: auto; min-width: 380px; }
  .garantia .micro { text-align: left; }
}

/* (h) FAQ */
.faq-sec { background: var(--cb-massa-50); }
.faq { display: grid; gap: var(--sp-3); }
.faq details { border-radius: var(--r-lg); border: 1px solid var(--cb-linha); background: var(--cb-surface); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: var(--sp-3) var(--sp-5); font-weight: 700; cursor: pointer; list-style: none; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { color: var(--cb-terracota); transition: transform var(--t-base) var(--ease); }
.faq details[open] summary .i { transform: rotate(180deg); }
.faq details p { padding: 0 var(--sp-5) var(--sp-5); color: var(--cb-texto-2); line-height: 1.55; }
@media (min-width: 900px) { .faq-grid { display: grid; grid-template-columns: 4fr 8fr; gap: var(--sp-10); align-items: start; } .faq-grid .sec-head { position: sticky; top: 96px; } }

/* (i) Rodapé */
.foot { background: var(--cb-chocolate-900); color: #E8D9C3; padding: var(--sp-12) 0 calc(var(--sp-12) + 80px); font-size: var(--fs-sm); line-height: 1.6; }
.foot a { color: var(--cb-creme); }
.foot-grid { display: grid; gap: var(--sp-6); }
.brand.light { color: var(--cb-creme); } .brand.light b { color: var(--cb-pessego); }
.foot-brand p { margin-top: var(--sp-2); }
.foot-legal p + p { margin-top: var(--sp-3); }
.foot-small { color: #B9A48F; }
@media (min-width: 900px) { .foot { padding-bottom: var(--sp-12); } .foot-grid { grid-template-columns: 1fr 2fr; gap: var(--sp-16); } }

/* CTA fixo do celular */
.stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: var(--sp-3) var(--page-x) calc(var(--sp-3) + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--cb-creme) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--cb-linha); transform: translateY(110%); transition: transform var(--t-base) var(--ease); }
.stickybar.show { transform: none; }
.stickybar[hidden] { display: none; }
@media (min-width: 900px) { .stickybar { display: none; } }

/* Motion: entrada ao rolar (uma vez). Sem JS, tudo fica visível. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .chip { opacity: 0; }
.js .ready .chip { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .js .reveal, .js .chip, .receipt .row { opacity: 1; transform: none; }
  .chip { transform: rotate(var(--rot)); }
  .app-video, .vid-ctrl { display: none !important; }
  .app-static { display: block; }
}

/* Unidade do anúncio (v=cento / v=pedido): o script do <head> marca o <html> antes da 1ª pintura */
html:not([data-v="cento"]) [data-v-only="cento"], html:not([data-v="pedido"]) [data-v-only="pedido"] { display: none !important; }
html[data-v="cento"] [data-v-not~="cento"], html[data-v="pedido"] [data-v-not~="pedido"] { display: none !important; }

/* Simulador: por unidade x por cento (só nas abas que se vendem no cento) */
.seg-unit { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: var(--sp-5); border-radius: var(--r-pill); background: var(--cb-massa-50); border: 1px solid var(--cb-linha); }
.seg-unit[hidden] { display: none; }
.seg-unit button { min-height: 40px; padding: 6px 16px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--cb-texto-2); font: 700 var(--fs-sm)/1 var(--font-text); cursor: pointer; transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease); }
.seg-unit button[aria-pressed="true"] { background: var(--cb-surface); color: var(--cb-texto); box-shadow: var(--sh-1); }

/* (4) Orçamento no app real: balão da cliente → vídeo do app → mensagem pronta, num painel escuro */
.orc-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.orc-stage > * { min-width: 0; }
.orc-chat { background: none; border: 0; padding: 0; font-size: var(--fs-sm); color: var(--cb-texto); }
.orc-chat .wa-in, .orc-chat .wa-out { margin: 0; }
.orc-in .wa-in { max-width: 86%; }
.orc-msg { max-width: 94%; margin-left: auto; }
.orc-msg p { white-space: pre-line; overflow-wrap: anywhere; font-size: .875rem; line-height: 1.5; }
.orc-out .wa-copy { margin-right: 0; }
.orc-line { margin-top: var(--sp-6); text-align: center; color: #E8D9C3; font-size: 1rem; }
.orc-line b { color: var(--cb-creme); font-weight: 800; white-space: nowrap; }
.orc-line b.win { color: var(--cb-ganho-claro); }
.orc-sec .cta-block { max-width: 460px; margin: var(--sp-5) auto 0; }
@media (min-width: 900px) {
  .orc-stage { grid-template-columns: 1fr 300px 1fr; gap: var(--sp-10); align-items: center; margin-top: var(--sp-4); }
  .orc-in { transform: rotate(-1.5deg); align-self: start; margin-top: var(--sp-16); }
  .orc-out { transform: rotate(1deg); align-self: end; margin-bottom: var(--sp-10); }
  .video-phone { width: 300px; }
}
.pprev picture { display: block; }

/* Desempenho (Lighthouse da página publicada, 08/10): o primeiro layout gastava ~430 ms no celular lento, a maior parte
   moldando o texto das seções de baixo com as fontes da marca. content-visibility: auto adia o layout e a pintura de cada
   seção até ela se aproximar da tela. contain-intrinsic-size = altura do conteúdo medida (375 px e 1280 px, SEM o padding, que o navegador soma), para a barra de rolagem
   e os saltos por âncora (#oferta, #garantia) caírem no lugar; "auto" guarda a altura real depois do primeiro desenho. */
.sim-sec, .recibo-sec, .orc-sec, .oferta-sec, .garantia-sec, .faq-sec, .foot { content-visibility: auto; }
@media (max-width: 899px) {
  .sim-sec { contain-intrinsic-size: auto 1478px; }
  .recibo-sec { contain-intrinsic-size: auto 862px; }
  .orc-sec { contain-intrinsic-size: auto 1691px; }
  .oferta-sec { contain-intrinsic-size: auto 1545px; }
  .garantia-sec { contain-intrinsic-size: auto 434px; }
  .faq-sec { contain-intrinsic-size: auto 803px; }
  .foot { contain-intrinsic-size: auto 327px; }
}
@media (min-width: 900px) {
  .sim-sec { contain-intrinsic-size: auto 863px; }
  .recibo-sec { contain-intrinsic-size: auto 628px; }
  .orc-sec { contain-intrinsic-size: auto 1199px; }
  .oferta-sec { contain-intrinsic-size: auto 1018px; }
  .garantia-sec { contain-intrinsic-size: auto 231px; }
  .faq-sec { contain-intrinsic-size: auto 654px; }
  .foot { contain-intrinsic-size: auto 156px; }
}