/* Commercial pages (Wave 1 phase B): Preços, Imobiliárias, Teste grátis, Contato, Sobre, Mapa do site, 404.
   Loaded after home.css, which places the shared plans, hero stage, settings, FAQ and final CTA.
   Only tokens, two card variants, no glass, transform and opacity motion only, phone first. */

/* ============================================================ Page top (pages without the 3D hero) */
.page-top { padding-top: clamp(32px, 6vw, 88px); overflow: clip; }
.page-top > .container { position: relative; z-index: 1; }
.page-top .aurora .a1 { right: -10%; top: -40%; }
.page-title { font-size: var(--fs-34); line-height: var(--lh-tight); letter-spacing: -0.03em; max-width: 20ch; }
@media (min-width: 1024px) { .page-title { font-size: var(--fs-60); line-height: 1.04; } }
.page-hero .hero-ctas { margin-top: var(--s-5); }
.section-tight { padding-block: var(--s-6); }
@media (min-width: 1024px) { .section-tight { padding-block: var(--s-7); } }

/* ============================================================ Preços */
.page-precos .pricing { padding-bottom: var(--s-7); }
.page-precos .section-head { margin-bottom: var(--s-5); }
.plan-name { font-size: var(--fs-26); }
.price .from { font-size: var(--fs-14); color: var(--text-2); }
/* In the 12 months mode the monthly price shows crossed out beside it (design finding 19). */
.pwas { display: none; color: var(--text-2); font-size: var(--fs-16); }
.pwas s { text-decoration-thickness: 1px; }
.pricing:has([data-billing][data-index="1"]) .pwas { display: inline; }
.inc { display: grid; gap: 0; border-top: 1px solid var(--border); }
.inc li { display: flex; align-items: baseline; gap: 8px; padding-block: 9px; border-bottom: 1px solid var(--border); }
.inc li b { font-family: var(--font-display); font-size: var(--fs-18); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.inc li span { color: var(--text-2); }
.inc li.inc-wide span { color: var(--text); font-weight: 500; }
.plans-foot { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: var(--s-4); font-size: var(--fs-14); color: var(--text-2); }
.plans-foot span { display: inline-flex; align-items: center; gap: 8px; }
.plans-foot span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: none; }
.after-plans { margin-top: var(--s-6); }

/* The four boxes reuse the receipt strip; on phones each box keeps its sentence (it is the answer). */
.boxes .receipt-item .link + .link { margin-top: 0; }
@media (min-width: 900px) and (max-width: 1199px) {
  .boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .boxes .receipt-item:nth-child(3) { background-image: radial-gradient(circle, var(--border-strong) 1px, transparent 1.4px); background-size: 8px 2px; background-repeat: repeat-x; }
  .boxes .receipt-item:nth-child(3)::before { top: -4px; left: 50%; margin: 0 0 0 -3.5px; }
}

/* Allowance meter: a data graphic, segments proportional to 80, 20, 10 and the rest. */
.meter-fig { margin: 0; padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.meter { display: flex; gap: 3px; height: 14px; }
.meter i { border-radius: 4px; }
.meter .m-ok { flex: 80; background: linear-gradient(90deg, var(--brand-line), #D9BD80); }
.meter .m-warn { flex: 20; background: var(--brand); }
.meter .m-free { flex: 10; background: repeating-linear-gradient(135deg, var(--ok-soft) 0 5px, color-mix(in srgb, var(--ok) 12%, var(--ok-soft)) 5px 10px); border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--ok-soft)); }
.meter .m-team { flex: 16; background: var(--surface-2); border: 1px solid var(--border-strong); }
.meter-steps { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.meter-steps li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.meter-steps b { font-family: var(--font-display); font-size: var(--fs-18); font-variant-numeric: tabular-nums; }
.meter-steps span { color: var(--text-2); }
.meter-steps .ms-110 b { color: var(--ok); }
@media (min-width: 900px) {
  .meter-fig { padding: var(--s-6); }
  .meter-steps { grid-template-columns: 80fr 20fr 10fr 16fr; gap: 0 14px; }
  .meter-steps li { display: block; padding-top: var(--s-3); border-top: 1px solid var(--border); }
  .meter-steps span { display: block; margin-top: 4px; font-size: var(--fs-14); }
  .meter-steps .ms-80 { text-align: right; }
}
.meter-note { margin-top: var(--s-4); color: var(--text-2); max-width: 70ch; }
.extras-title { margin-top: var(--s-7); margin-bottom: var(--s-2); font-size: var(--fs-21); }
.extras .xp { margin-left: auto; font-family: var(--font-display); color: var(--brand-ink); font-weight: 700; white-space: nowrap; }

/* Comparison table: a real table; on phones it scrolls sideways with the first column held. */
/* position: relative keeps the sr-only labels (absolutely positioned) inside the scroller. */
.cmp-wrap { position: relative; overflow-x: auto; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.cmp { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--fs-14); }
.cmp th, .cmp td { padding: 11px 14px; text-align: center; border-top: 1px solid var(--border); vertical-align: middle; }
.cmp thead th { border-top: 0; font-family: var(--font-display); font-size: var(--fs-16); font-weight: 700; background: var(--surface); padding-block: 14px; }
.cmp thead th.is-featured { color: var(--brand-ink); }
.cmp tbody th[scope="row"] { text-align: left; font-weight: 500; color: var(--text); }
.cmp tbody th[scope="row"] .soon-tag { margin-left: 6px; vertical-align: 1px; }
.cmp th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); width: 44%; }
.cmp .grp th { text-align: left; font-family: var(--font); font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); background: var(--surface-2); padding-block: 8px; }
.cmp td { color: var(--text); font-variant-numeric: tabular-nums; }
.cmp .cmp-yes { width: 18px; height: 18px; color: var(--ok); stroke-width: 2.2; vertical-align: middle; }
.cmp .cmp-no { color: var(--text-2); }
/* The plan comparison on /precos/: the plan names stay pinned under the glass header while the table
   scrolls by (owner, 2026-10-04 "Tabela de preços"). The wrap clips instead of scrolling, so the page is
   the sticky header's scroll container; on phones the table fits the width (fixed layout, first column
   36 percent) instead of scrolling sideways, so the plan row and the item column both stay readable. */
.cmp-wrap--sticky { overflow: visible; }
@supports (overflow: clip) { .cmp-wrap--sticky { overflow: clip; } }
.cmp-wrap--sticky thead th { position: sticky; top: var(--header-h); z-index: 2; box-shadow: inset 0 -1px 0 var(--border); }
/* The corner cell is pinned both ways, so it sits above the item column that slides under it. */
.cmp-wrap--sticky thead th:first-child { z-index: 3; }
@media (max-width: 599px) {
  .cmp-wrap--sticky .cmp { min-width: 0; table-layout: fixed; font-size: 0.8125rem; }
  .cmp-wrap--sticky .cmp th, .cmp-wrap--sticky .cmp td { padding: 10px 6px; overflow-wrap: break-word; hyphens: auto; }
  .cmp-wrap--sticky .cmp th:first-child { width: 36%; padding-left: 12px; }
  .cmp-wrap--sticky .cmp thead th { font-size: 0.78rem; padding: 12px 2px; hyphens: none; overflow-wrap: normal; letter-spacing: -0.01em; }
  .cmp-wrap--sticky .cmp .grp th { padding-left: 12px; }
}
@media (min-width: 1024px) { .cmp { font-size: var(--fs-16); } .cmp th, .cmp td { padding: 13px 20px; } }

/* Founder offer: one quiet panel with one link (no counter here, no urgency). */
.founder-sec { padding-block: var(--s-6) 0; }
.founder { display: grid; gap: var(--s-4); align-items: end; }
.founder .eyebrow { margin-bottom: var(--s-2); }
.founder h2 { font-size: var(--fs-21); }
.founder p:not(.eyebrow) { margin-top: var(--s-2); max-width: 62ch; }
@media (min-width: 900px) { .founder { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s-6) var(--s-7); } }

/* ============================================================ Imobiliárias */
/* The buyer simulator: radio buttons styled as question chips, answers switched by :has(). */
.sim-grid { display: grid; gap: var(--s-5); }
@media (min-width: 1024px) { .sim-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-8); align-items: center; } .sim-grid .section-head { margin-bottom: 0; } }
.sim { display: grid; gap: var(--s-4); }
.sim-q { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.sim-q legend { width: 100%; padding: 0; margin-bottom: var(--s-2); font-size: var(--fs-14); font-weight: 600; color: var(--text-2); }
.sim-q input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sim-q label { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border-strong); font-size: var(--fs-14); font-weight: 600; color: var(--text); cursor: pointer; transition-property: transform, border-color, background-color; transition-duration: var(--t-press); transition-timing-function: var(--ease-out); }
.sim-q label:active { transform: scale(0.97); }
.sim-q input:checked + label { background: var(--brand-soft); border-color: var(--brand-ink); color: var(--brand-ink); }
.sim-q input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .sim-q label:hover { border-color: var(--text-3); } }
.sim-chat { border-radius: var(--r-lg); overflow: hidden; background: var(--chat-bg); border: 1px solid var(--border); box-shadow: var(--shadow); min-height: 300px; display: flex; flex-direction: column; }
.sim-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--wa-head); color: var(--bubble-text); border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.sim-head .avatar { width: 34px; height: 34px; font-size: var(--fs-12); }
.sim-head b { font-size: var(--fs-14); flex: 1; min-width: 0; }
.sim-a { display: none; flex-direction: column; gap: 8px; padding: 16px 12px; flex: 1; justify-content: flex-end; }
.sim-a .m { font-size: var(--fs-14); }
.sim-why { align-self: flex-end; display: flex; justify-content: flex-end; }
.sim:has(#sim-1:checked) #sim-a1, .sim:has(#sim-2:checked) #sim-a2,
.sim:has(#sim-3:checked) #sim-a3, .sim:has(#sim-4:checked) #sim-a4 { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .sim-a .m, .sim-a .sim-why { animation: bd-msg-in 320ms var(--ease-out) both; }
  .sim-a .m.out { animation-delay: 140ms; }
  .sim-a .sim-why { animation-delay: 260ms; }
}
@media (prefers-reduced-motion: reduce) { .sim-a .m, .sim-a .sim-why { animation: bd-msg-fade 250ms linear both; } }
/* Browsers without :has() show every answer, in order: complete content, no script needed. */
@supports not selector(:has(*)) { .sim-a { display: flex; } }

.page-imob .control .c-list { align-self: center; }
.table-note { margin-top: var(--s-3); }
.locales { min-width: 0; }
@media (max-width: 639px) { .locales th, .locales td { padding: 9px 8px; } .locales th:first-child { width: auto; } }
.locales td { text-align: left; }
.duo { display: grid; gap: var(--s-4); }
.duo .card-plain { display: grid; gap: var(--s-3); align-content: start; }
.duo .card-plain .eyebrow { margin-bottom: 0; }
.duo .card-plain p:not(.eyebrow) { color: var(--text-2); }
.duo .card-plain p.duo-big { font-family: var(--font-display); font-size: var(--fs-21); line-height: 1.3; letter-spacing: -0.01em; color: var(--text); }
.duo .duo-big b { color: var(--brand-ink); }
@media (min-width: 900px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } .duo .card-plain { padding: var(--s-6); } }

/* ============================================================ Teste grátis: the timeline */
.tl { display: grid; gap: 0; max-width: 820px; }
.tl li { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; padding-bottom: var(--s-5); }
.tl li::before { content: ""; position: absolute; left: 96px; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
/* The line between the steps is a row of dots, never a dash (owner rule). */
.tl li:not(:last-child)::after { content: ""; position: absolute; left: 98px; top: 26px; bottom: 2px; width: 4px; background-image: radial-gradient(circle, var(--brand-line) 1.6px, transparent 2px); background-size: 4px 10px; background-repeat: repeat-y; }
.tl li > div { padding-left: 24px; }
.tl-day { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-16); color: var(--brand-ink); line-height: 1.6; }
.tl h3 { font-size: var(--fs-18); line-height: 1.35; }
.tl p { margin-top: 4px; color: var(--text-2); max-width: 58ch; }
.tl .tl-ph { margin-top: var(--s-2); font-size: var(--fs-14); }
@media (min-width: 768px) { .tl li { grid-template-columns: 120px minmax(0, 1fr); } .tl li::before { left: 124px; } .tl li:not(:last-child)::after { left: 126px; } .tl h3 { font-size: var(--fs-21); } }
.link-inline { display: inline; font-size: inherit; }

/* ============================================================ Contato and Sobre */
.channels { display: grid; gap: var(--s-4); }
.channel { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.channel-body { display: grid; gap: var(--s-2); justify-items: start; }
.channel h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-18); }
.channel .btn { margin-top: var(--s-2); }
.channel .link { overflow-wrap: anywhere; }
@media (min-width: 900px) { .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } .channel { padding: var(--s-6); } }
.facts { display: grid; max-width: 760px; border-top: 1px solid var(--border); }
.facts > div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--border); }
.facts dt { color: var(--text-2); }
.facts dd { font-weight: 500; overflow-wrap: anywhere; }
.facts a { color: var(--brand-ink); }
.facts-more { margin-top: var(--s-5); }
.page-sobre .origin { margin-top: 0; }
.page-sobre .origin .eyebrow { font-family: var(--font); font-size: var(--fs-14); }
.elist .elist-text + .link { margin-top: 6px; font-size: var(--fs-14); }

/* ============================================================ Mapa do site */
.sitemap { display: grid; gap: var(--s-5); }
.sm-group { border-top: 1px solid var(--border); padding-top: var(--s-4); }
.sm-group h3 { font-size: var(--fs-18); margin-bottom: var(--s-3); }
.sm-group ul { display: grid; gap: 4px; }
.sm-group li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 40px; color: var(--text-2); }
.sm-group a { color: var(--text); text-decoration: none; font-weight: 500; }
.sm-group a:hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) { .sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); } }
@media (min-width: 1024px) { .sitemap { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-7); } }

/* ============================================================ 404 */
.nf-grid { display: grid; gap: var(--s-6); align-items: center; }
.nf-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-5); }
@media (max-width: 479px) { .nf-links li { flex: 1 1 calc(50% - 5px); } .nf-links .btn { width: 100%; } }
.nf-more { margin-top: var(--s-4); }
.nf-chat { display: flex; flex-direction: column; gap: 8px; padding: 20px 14px; border-radius: var(--r-xl); background: var(--chat-bg); border: 1px solid var(--border); box-shadow: var(--shadow); max-width: 380px; }
.nf-chat .m { font-size: var(--fs-14); }
@media (min-width: 900px) { .nf-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--s-8); } .nf-chat { padding: 28px 20px; transform: rotate(-2deg); } }
.nf-en { max-width: 640px; display: grid; gap: var(--s-2); }
.nf-en-links { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: var(--s-2); }

/* A short closing call to action (Mapa do site, 404): the anchor the header's talk button falls back to. */
.final-compact .final-card { padding: var(--s-6) var(--s-5); }
.final-compact .lead a { color: var(--brand-ink); overflow-wrap: anywhere; }
@media (min-width: 900px) { .final-compact .final-card { padding: var(--s-7); } }