/* The car home `/` (approved 2026-10-28): the CSS of the approved mock vault/home-ferramentas/v4.html (home-carro
   heroi.css + its page styles), variant-only rules removed. Rendered by src/home/carro.ts. Fraunces: SIL OFL 1.1. */
@font-face { font-family: 'Fraunces'; font-weight: 700; font-style: normal; font-display: swap; src: url('/design/fonts/fraunces-700.woff2') format('woff2'); }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font-ui); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.marca { display: inline-flex; align-items: center; gap: 6px; font: 600 22px/1 var(--font-ui); letter-spacing: -.02em; color: inherit; text-decoration: none; }
.marca svg { width: 30px; height: 30px; }
.nav__cta { font: 500 14px/1 var(--font-ui); padding: 10px 14px; border-radius: var(--r-pill); text-decoration: none; color: inherit; background: var(--tint-10); }
.pre { font: 500 11px/1 var(--font-doc); letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; border-radius: var(--r-pill); }
:root { --disp: 'Fraunces', Georgia, serif; }
body { background: var(--ink-deep); }
.j { position: relative; min-height: 100vh; min-height: 100svh; color: #fff; overflow: hidden; isolation: isolate; }
.j__foto { position: absolute; inset: 0; z-index: -2; background: url('/design/fotos/pexels-4173270.jpg') center 30% / cover no-repeat var(--ink-deep); }
.j::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(41,18,16,.86) 0%, rgba(41,18,16,.5) 44%, rgba(41,18,16,0) 70%),
              linear-gradient(0deg, rgba(41,18,16,.72) 0%, rgba(41,18,16,0) 48%); }
.j__nav { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 22px clamp(18px, 4vw, 56px); }
.j__nav .marca { color: #fff; }
.j__nav .lado { display: flex; gap: 10px; align-items: center; }
.j__nav .pre { background: var(--ink-deep-60); color: #fff; backdrop-filter: blur(10px); }
.j__nav .nav__cta { background: #fff; color: var(--ink-deep); }
.j__txt { position: absolute; left: clamp(18px, 6.5vw, 96px); bottom: clamp(40px, 9vh, 96px); width: min(620px, 88vw); display: grid; gap: 20px; }
.j__h { margin: 0; font: 700 clamp(40px, 4.8vw, 70px)/1.03 var(--disp); letter-spacing: -.02em; text-wrap: balance; }
.j__sub { margin: 0; font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.5; color: var(--on-dark-75); max-width: 44ch; }
.j__sub b { color: #fff; font-weight: 600; }
.j__sub sup { font: 500 10px/1 var(--font-doc); color: var(--on-dark-60); }
.mail { display: flex; gap: 10px; flex-wrap: wrap; }
.mail input { flex: 1 1 240px; min-width: 0; height: 56px; padding: 0 24px; border: 0; border-radius: var(--r-pill); font: 400 17px/1 var(--font-ui); color: var(--ink);
  background: linear-gradient(180deg, #F3F3F3, #FFFFFF); }
.mail input::placeholder { color: var(--mauve); }
.mail button { height: 56px; padding: 0 26px; border: 0; border-radius: var(--r-pill); background: var(--peach); color: var(--ink-deep); font: 600 16px/1 var(--font-ui); cursor: pointer; }
.pontos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--on-dark-75); font-size: 14.5px; }
.pontos li { display: flex; gap: 7px; align-items: center; }
.pontos li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--peach-20) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23FFB883' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.conv2 { position: absolute; right: clamp(18px, 5vw, 80px); bottom: clamp(40px, 9vh, 96px); width: min(400px, 34vw); list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.msg { position: relative; padding: 13px 16px; font-size: 15px; line-height: 1.4; border-radius: 18px; }
.msg small { display: block; font: 500 11px/1 var(--font-doc); letter-spacing: .06em; margin-bottom: 8px; }
.msg--eu { margin-left: 34px; background: #D9E8FF; color: var(--ink-deep); border-radius: 18px 18px 4px 18px; }
.msg--eu small { color: rgba(41,18,16,.6); }
.voz { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.voz__play { width: 34px; height: 34px; border-radius: 50%; background: var(--ink-deep); display: grid; place-items: center; flex: none; }
.voz__play::before { content: ""; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.voz__onda { flex: 1; height: 22px; display: flex; align-items: center; gap: 3px; }
.voz__onda i { width: 3px; border-radius: 2px; background: var(--ink-deep); opacity: .8; }
.voz small { margin: 0; color: rgba(41,18,16,.6); }
.msg--eu q { font-style: italic; }
.msg--greg { margin-left: 34px; background: rgba(56,24,20,.78); border: 1px solid var(--on-dark-20); border-radius: 18px 18px 18px 4px; backdrop-filter: blur(18px); color: #fff; }
.msg--greg small { color: var(--peach); }
.msg--greg .av { position: absolute; left: -34px; bottom: 0; width: 26px; height: 26px; border-radius: 8px; background: var(--peach); display: grid; place-items: center; color: var(--ink-deep); }
.msg--greg .av svg { width: 20px; height: 20px; }
.feito { margin-top: 10px; background: var(--cream); color: var(--ink); border-radius: 12px; padding: 10px 12px; display: grid; gap: 3px; font-size: 14px; }
.feito b { font-weight: 600; }
.feito b::before { content: "✓ "; color: var(--band-barato); }
@media (max-width: 900px) {
  .j { min-height: auto; overflow: visible; }
  .j__foto { position: relative; inset: auto; height: 52vh; min-height: 340px; background-position: 70% 25%; }
  .j::after { inset: 0 0 auto 0; height: 52vh; min-height: 340px; background: linear-gradient(0deg, var(--ink-deep) 0%, rgba(41,18,16,0) 40%), linear-gradient(180deg, rgba(41,18,16,.55) 0%, rgba(41,18,16,0) 30%); }
  .j__nav .pre { display: none; }
  .j__txt { position: relative; left: auto; bottom: auto; width: auto; padding: 8px 18px 22px; }
  .mail button { width: 100%; }
  .conv2 { position: relative; right: auto; bottom: auto; width: auto; padding: 0 18px 36px; }
}
.s2 { overflow: hidden; }
.s2[hidden] { display: none; }
.trk { display: flex; width: max-content; align-items: center; animation: drift 46s linear infinite; }
.trk ul { display: flex; align-items: center; gap: clamp(24px, 4vw, 56px); list-style: none; margin: 0; padding: 0 clamp(12px, 2vw, 28px); }
.trk li { display: flex; align-items: center; justify-content: center; width: 170px; height: 56px; }
.trk img { height: calc(var(--h, 40px) * .85); width: auto; max-width: 170px; object-fit: contain; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .trk { animation: none; }
}
.s2b { background: var(--paper); padding: 56px 0 44px; display: grid; gap: 26px; text-align: center; }
.s2b p { margin: 0 auto; max-width: 52ch; padding: 0 18px; }
.s2b .t { font-size: 17px; color: var(--ink-60); }
.s2b .n { font-size: 13px; color: var(--ink-50); }
.s2b .trk img { filter: none; }
.s3 { padding: clamp(64px, 8vw, 128px) clamp(18px, 6.5vw, 96px); }
.s3[hidden] { display: none; }
.s3 h2 { margin: 0 0 12px; font: 700 clamp(32px, 3.6vw, 52px)/1.05 'Fraunces', Georgia, serif; letter-spacing: -.02em; max-width: 20ch; text-wrap: balance; }
.s3 .lead { margin: 0 0 clamp(32px, 4vw, 56px); font-size: 18px; line-height: 1.5; color: var(--ink-60); max-width: 52ch; }
.s3 h3 { margin: 0; font: 700 clamp(21px, 1.6vw, 25px)/1.15 'Fraunces', Georgia, serif; letter-spacing: -.01em; }
.s3 p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-60); }
.k { font: 500 11.5px/1 var(--font-doc); letter-spacing: .07em; text-transform: uppercase; color: var(--peach-ink); }
.soon { font: 500 11px/1 var(--font-doc); letter-spacing: .05em; text-transform: uppercase; background: var(--tint-10); color: var(--ink-60); padding: 5px 8px; border-radius: var(--r-pill); }
@keyframes rip { from { transform: scale(.6); opacity: .6; } to { transform: scale(1.15); opacity: 0; } }
.s3b { background: var(--paper); }
.s3b { background: var(--paper); }
.bx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tl { background: var(--cream); border-radius: 32px; padding: clamp(28px, 3vw, 44px); display: grid; gap: 16px; align-content: start; min-width: 0; }
.tl--2 { grid-column: span 2; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(24px, 3vw, 48px); align-items: center; }
.tl--2 > .txt { display: grid; gap: 16px; }
.qt { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-60); }
.qt small { display: block; margin-top: 6px; font: 500 10.5px/1 var(--font-doc); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-50); }
.tl h3 { font: 700 clamp(22px, 1.7vw, 27px)/1.15 'Fraunces', Georgia, serif; letter-spacing: -.01em; margin: 0; }
.tl p.d { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-60); }
.stage { position: relative; display: grid; padding: 8px 0 4px; }
.pc { background: var(--paper); border-radius: 20px; box-shadow: 0 18px 40px rgba(41,18,16,.09), 0 1px 0 rgba(41,18,16,.04); padding: 18px 20px; color: var(--ink); }
.pc + .pc { margin-top: 10px; }
.pc--back { transform: scale(.94); opacity: .75; margin-top: -6px !important; position: relative; z-index: 0; }
.pc--front { position: relative; z-index: 1; }
.pc__h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.pc__h b { font-size: 17px; font-weight: 600; }
.mono { font-family: var(--font-doc); font-size: 14px; color: var(--ink-60); }
.cv { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--hairline); font-size: 15px; }
.cv:first-of-type { border-top: 0; }
.cv i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.cv .ok { background: var(--band-barato-11); color: var(--band-barato); }
.cv .no { background: #FBE4DA; color: var(--band-caro); }
.cv em { font-style: normal; font-family: var(--font-doc); font-size: 13.5px; color: var(--ink-60); }
.row1 { display: flex; align-items: center; gap: 12px; }
.badge { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font: 600 13px/1 var(--font-doc); }
.b-peach { background: var(--peach-pale); color: var(--peach-ink); }
.b-ink { background: var(--ink-deep); color: #fff; }
.row1 > span:nth-child(2) { display: grid; gap: 3px; flex: 1; min-width: 0; }
.row1 small { color: var(--ink-50); font-size: 13px; }
.row1 b { font-weight: 600; font-size: 15.5px; }
.steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.steps span { font-size: 13px; padding: 6px 10px; border-radius: var(--r-pill); background: var(--cream); }
.steps span.on { background: var(--ink-deep); color: #fff; }
.lst { display: grid; gap: 8px; }
.li { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; background: var(--paper); border-radius: 16px; padding: 10px 14px 10px 10px; box-shadow: 0 10px 24px rgba(41,18,16,.06); }
.li .lg { width: 52px; height: 52px; border-radius: 12px; background: #fff; border: 1px solid var(--hairline); display: grid; place-items: center; overflow: hidden; }
.li .lg img { max-width: 40px; max-height: 32px; width: auto; height: auto !important; object-fit: contain; }
.li .lg.vazio { background: var(--cream); border: 0; font: 500 11px/1 var(--font-doc); color: var(--ink-50); }
.li span:nth-child(2) { display: grid; gap: 2px; }
.li span:nth-child(2) b { font-weight: 600; font-size: 15px; }
.li small { color: var(--ink-50); font-size: 12.5px; }
.li .pr { font: 600 19px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.li .pr small { font-weight: 400; font-size: 12px; }
.li .pr.best { color: var(--band-barato); }
.s3 .nota { margin: 2px 0 0; font: 500 10.5px/1.3 var(--font-doc); letter-spacing: .04em; color: var(--ink-50); }
@media (max-width: 960px) {
  .bx { grid-template-columns: 1fr; }
  .tl--2 { grid-column: auto; grid-template-columns: 1fr; }
}
.s3 .qt { justify-self: start; max-width: 34ch; background: #D9E8FF; color: var(--ink-deep); border-radius: 18px 18px 18px 4px; padding: 12px 16px; font-size: 15.5px; line-height: 1.4; box-shadow: 0 8px 20px rgba(41,18,16,.05); }
.s3 .qt small { color: rgba(41,18,16,.55); }
.tl > .qt, .tl--2 .txt > .qt { order: -1; }
.fr { display: flex; align-items: center; gap: 12px; }
.fr b { display: block; font-weight: 600; font-size: 16px; }
.fr small { color: var(--ink-50); font-size: 13.5px; }
.vl { padding: clamp(88px, 9vw, 150px) 0; }
.vl__in { padding: 0 clamp(18px, 6.5vw, 96px); }
.vl h2 { margin: 0; font: 700 clamp(36px, 4.2vw, 64px)/1.03 'Fraunces', Georgia, serif; letter-spacing: -.025em; text-wrap: balance; }
.vl .lead { margin: 18px 0 0; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: var(--ink-60); max-width: 50ch; }
.vl .vlic { margin: 0; font-size: 14px; color: var(--ink-50); }
.d1 { background: var(--paper); }
.d1 .hd { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(36px, 4vw, 56px); }
.d1 .nav { display: flex; gap: 10px; flex: none; }
.d1 .nav button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--hairline); background: #fff; color: var(--ink); font-size: 20px; cursor: pointer; }
.d1 .rl { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(300px, 27vw, 400px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: clamp(18px, 6.5vw, 96px); padding: 0 clamp(18px, 6.5vw, 96px) 8px; scrollbar-width: none; }
.d1 .rl::-webkit-scrollbar { display: none; }
.pcard { scroll-snap-align: start; position: relative; aspect-ratio: 4 / 5.4; border-radius: 28px; overflow: hidden; color: #fff; display: grid; grid-template-rows: auto 1fr auto; padding: 26px 26px 24px; isolation: isolate; }
.pcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.pcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(41,18,16,.55) 0%, rgba(41,18,16,0) 30%, rgba(41,18,16,0) 42%, rgba(41,18,16,.9) 100%); }
.pcard .k { font: 800 13px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.pcard .bt { display: grid; gap: 12px; }
.pcard .dor { margin: 0; font: 700 clamp(22px, 1.7vw, 26px)/1.15 'Fraunces', Georgia, serif; }
.d1 .ft { margin-top: 28px; }
.pcard--4 { grid-template-rows: auto 1fr auto; }
.chp { align-self: center; justify-self: start; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; background: rgba(255,255,255,.92); color: var(--ink); border-radius: 18px; padding: 12px 16px 12px 12px; box-shadow: 0 18px 40px rgba(0,0,0,.22); backdrop-filter: blur(10px); max-width: 92%; }
.chp__a { min-width: 46px; height: 46px; padding: 0 8px; border-radius: 12px; display: grid; place-items: center; font: 700 20px/1 'Fraunces', Georgia, serif; background: var(--peach-pale); color: var(--peach-ink); }
.chp--no .chp__a { background: #FBE4DA; color: var(--band-caro); font: 700 16px/1 var(--font-ui); }
.chp--ok .chp__a { background: var(--band-barato-11); color: var(--band-barato); }
.chp b { display: block; font-weight: 600; font-size: 16px; line-height: 1.2; }
.chp small { display: block; color: var(--ink-50); font-size: 13px; margin-top: 2px; }
.pcard--4 .dor { font-size: clamp(22px, 1.65vw, 25px); }
.fx4 { margin: 0; font-size: 15.5px; line-height: 1.45; color: rgba(255,255,255,.9); padding-left: 14px; border-left: 2px solid var(--peach); }
@media (max-width: 960px) {
  .d1 .hd { flex-direction: column; align-items: start; }
  .d1 .rl { grid-auto-columns: 82%; }
  .d1 .nav { display: none; }
  .chp { align-self: start; margin-top: 14px; padding: 10px 14px 10px 10px; }
  .chp__a { min-width: 40px; height: 40px; font-size: 17px; }
  .chp b { font-size: 15px; }
  .chp small { font-size: 12.5px; }
  .pcard { aspect-ratio: 4 / 5.6; }
  .pcard::after { background: linear-gradient(180deg, rgba(41,18,16,.5) 0%, rgba(41,18,16,0) 26%, rgba(41,18,16,.35) 46%, rgba(41,18,16,.94) 72%); }
}
.s2b { padding-bottom: 24px; }
.vl.d4 { padding-top: clamp(56px, 6vw, 96px); }
.tl { grid-template-rows: auto; }
.fq { padding: clamp(88px, 9vw, 140px) clamp(18px, 6.5vw, 96px); }
.fq h2, .wl h2 { margin: 0; font: 700 clamp(34px, 3.8vw, 56px)/1.04 'Fraunces', Georgia, serif; letter-spacing: -.02em; text-wrap: balance; }
.fq .lead, .wl .lead { margin: 16px 0 0; font-size: 18px; line-height: 1.5; color: var(--ink-60); max-width: 46ch; }
.fq1 { background: var(--ink-deep); color: #fff; }
.fq1 .lead { color: var(--on-dark-60); }
.f1 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.f1l { border-top: 1px solid var(--on-dark-20); }
.f1q { border-bottom: 1px solid var(--on-dark-20); }
.f1q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 24px 0; font: 700 clamp(20px, 1.6vw, 24px)/1.2 'Fraunces', Georgia, serif; }
.f1q summary::-webkit-details-marker { display: none; }
.f1q summary span { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--on-dark-30); display: grid; place-items: center; font: 400 20px/1 var(--font-ui); transition: transform .2s; }
.f1q[open] summary span { transform: rotate(45deg); background: var(--peach); color: var(--ink-deep); border-color: var(--peach); }
.f1q p { margin: 0 0 26px; font-size: 17px; line-height: 1.55; color: var(--on-dark-75); max-width: 56ch; }
.wl { padding: clamp(88px, 9vw, 140px) clamp(18px, 6.5vw, 96px); }
.wl__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(32px, 6vw, 96px); align-items: center; max-width: 1240px; margin: 0 auto; }
.pontos2 { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; font-size: 16px; color: var(--ink); }
.pontos2 li::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--band-barato-11); color: var(--band-barato); font-size: 12px; font-weight: 700; margin-right: 10px; }
:root { --azul: #D9E8FF; --azul-ink: #1D4F91; }
.wl3 { background: var(--cream); }
.wchat { background: #fff; border-radius: 28px; padding: 32px; box-shadow: 0 30px 70px rgba(41,18,16,.12); display: grid; gap: 14px; }
.wq { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: end; }
.wq .av { width: 34px; height: 34px; border-radius: 10px; background: var(--peach); color: var(--ink-deep); display: grid; place-items: center; }
.wq .av svg { width: 26px; height: 26px; }
.wq p { margin: 0; background: var(--ink-deep); color: #fff; border-radius: 20px 20px 20px 4px; padding: 16px 18px; display: grid; gap: 6px; }
.wq b { font: 700 23px/1.2 'Fraunces', Georgia, serif; }
.wq p span { font-size: 14.5px; color: var(--on-dark-75); }
@media (max-width: 960px) {
  .f1 { grid-template-columns: 1fr; }
  .wl__in { grid-template-columns: 1fr; }
}
:root { --azul: #D9E8FF; --azul-ink: #1D4F91; --azul-ink-12: rgba(29,79,145,.12); --cinza: #F2F2F0; --cinza-2: #E4E4E1; }
body { position: relative; overflow-x: hidden; }
:focus-visible { outline: 3px solid var(--azul-ink); outline-offset: 2px; }
.topo :focus-visible, .j :focus-visible { outline-color: var(--peach); }
.topo { position: absolute; top: 0; left: 0; right: 0; z-index: 30; }
.topo .j__nav { position: relative; color: #fff; }
.lado { display: inline-flex; align-items: center; gap: 10px; }
.tk { display: flex; align-items: stretch; height: 38px; background: #1c0c0b; color: #fff; border-bottom: 1px solid var(--on-dark-20); }
.tk__vp { position: relative; flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
.tk__tr { display: flex; width: max-content; height: 100%; animation: tk-roll 70s linear infinite; }
.tk__set { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.tk__set li { display: flex; align-items: center; }
.tk__set li::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--on-dark-30); margin: 0 18px; }
.tk a { display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 0; white-space: nowrap; color: var(--on-dark-75); text-decoration: none; font: 400 13.5px/1 var(--font-ui); }
.tk a b { color: #fff; font-weight: 600; }
.tk a small { font: 500 10.5px/1 var(--font-doc); color: var(--on-dark-60); }
.tk a:hover b, .tk a:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
.tk a:focus-visible { outline-offset: -2px; }
@keyframes tk-roll { to { transform: translateX(-50%); } }
.tk:hover .tk__tr, .tk:focus-within .tk__tr, .tk.is-paused .tk__tr { animation-play-state: paused; }
.tk__p { flex: none; display: grid; place-items: center; width: 44px; border: 0; border-left: 1px solid var(--on-dark-20); background: transparent; color: #fff; cursor: pointer; }
.tk__p svg { width: 12px; height: 12px; }
.tk__p .i-play { display: none; }
.tk.is-paused .tk__p .i-play { display: block; }
.tk.is-paused .tk__p .i-pause { display: none; }
.tk__p:focus-visible { outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
  .tk__tr { animation: none; }
  .tk__set[aria-hidden] { display: none; }
  .tk__p { display: none; }
  .tk__vp { -webkit-mask-image: none; mask-image: none; padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 700px) {
  .tk__set li:nth-child(n+2) { display: none; }
  .tk__set li::after { display: none; }
}
.s2b { grid-template-columns: minmax(0, 1fr); }
.topo .j__nav { position: relative; }
@media (max-width: 900px) {
  .j { padding-top: 38px; }
  .j::after { top: 38px; }
}
.bt .tl:not(.tl--2) { display: flex; flex-direction: column; gap: 16px; }
.bt .tl:not(.tl--2) > .qt { align-self: flex-start; }
.bt .tl--2 > .txt { align-content: start; }
.tb { margin-top: auto; padding-top: 6px; }
.tb .soon { flex: none; font-size: 10px; padding: 4px 7px; }
.tb a { -webkit-tap-highlight-color: transparent; }
.tb a:focus-visible { outline: 3px solid var(--azul-ink); outline-offset: 3px; }
.mc__a { transition: transform .15s ease; }
.tb a:hover .mc__a, .tb a:focus-visible .mc__a { transform: translateX(3px); }
.tb2 { display: grid; gap: 10px; }
.mc { display: grid; grid-template-columns: 42px minmax(0, 1fr) 40px; gap: 12px; align-items: center; min-height: 68px; padding: 12px 12px 12px 12px;
  background: #fff; border-radius: 20px; border: 1.5px solid var(--tint-10); color: var(--ink-deep); text-decoration: none;
  box-shadow: 0 10px 24px rgba(41,18,16,.07); transition: border-color .15s, box-shadow .15s, transform .15s; }
.mc:hover { border-color: var(--ink-deep); box-shadow: 0 14px 30px rgba(41,18,16,.13); transform: translateY(-1px); }
.mc__i { width: 42px; height: 42px; border-radius: 13px; background: var(--peach-pale); color: var(--peach-ink); display: grid; place-items: center; }
.mc__i svg { width: 23px; height: 23px; }
.mc__t { display: grid; gap: 3px; min-width: 0; }
.mc__t b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font: 600 16px/1.25 var(--font-ui); }
.mc__t small { font-size: 13px; line-height: 1.35; color: var(--ink-60); }
.mc__a { width: 40px; height: 40px; border-radius: 50%; background: var(--ink-deep); color: #fff; display: grid; place-items: center; font: 700 17px/1 var(--font-ui); }
@media (max-width: 700px) {
  .mc { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 12px; }
  .mc__i { width: 40px; height: 40px; }
}
@media (max-width: 960px) {
  .bt .tl--2 > .txt { display: contents; }
  .bt .tl--2 > .stage { order: 2; }
  .bt .tl--2 .tb { order: 3; margin-top: 0; }
}
.pc--er { padding: 18px 20px 8px; }
.pc--er .pc__h { margin-bottom: 4px; }
.er { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--hairline); }
.er:first-of-type { border-top: 0; }
.er > span:first-child b { display: block; font: 500 15px/1.25 var(--font-ui); }
.er > span:first-child small { display: block; margin-top: 3px; font: 500 12px/1.2 var(--font-doc); color: var(--ink-60); }
.er__n { white-space: nowrap; font-variant-numeric: tabular-nums; }
.er__n b { font: 700 26px/1 'Fraunces', Georgia, serif; letter-spacing: -.02em; }
.er__n small { font: 500 13px/1 var(--font-ui); color: var(--ink-60); }
.er--on .er__n b { color: var(--band-barato); }
.tl--w .stage { display: grid; gap: 8px; }
.tl--w .txt { display: grid; gap: 16px; align-content: start; }
@media (min-width: 961px) {
  .bt .tl.tl--w { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 48px); align-items: center; }
  .tl--w .tb { margin-top: 0; padding-top: 0; }
}
/* ── port additions (2026-10-28): the existing novidades sign-up's consent line, privacy link and status ── */
.calert__consent { flex: 1 1 100%; display: flex; gap: 10px; align-items: flex-start; margin: 0; font: 400 13px/1.45 var(--font-ui); text-align: left; }
.calert__consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; }
.calert__priv { flex: 1 1 100%; font: 400 13px/1.4 var(--font-ui); text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.calert__status { flex: 1 1 100%; margin: 0; font: 500 14px/1.45 var(--font-ui); text-align: left; }
.calert__status:empty { display: none; }
@media (max-width: 700px) {
  .calert__priv { display: inline-flex; align-items: center; min-height: 40px; }
}
.j .calert__consent, .j .calert__status { color: var(--on-dark-75); }
.j .calert__consent input { accent-color: var(--peach); }
.j .calert__priv { color: var(--on-dark-60); }
.j .calert__status[data-state='erro'] { color: var(--peach); }
.wchat .wmail { margin-top: 18px; }
.wchat .wmail input { background: var(--cream); }
.wchat .calert__consent, .wchat .calert__priv, .wchat .calert__status { color: var(--ink-60); }
.wchat .calert__consent input { accent-color: var(--ink-deep); }
.wchat .calert__status[data-state='erro'] { color: var(--peach-ink); }
/* ── H2 «video» arm (2026-10-29, docs/ops/testes.md). Only under html[data-braco="video"]: with no test or the «foto» arm
   none of this matches, so neither poster nor clip loads. The photo's place, size and the .j::after gradient stay the
   approved hero's; the clip only replaces the photo. Phone ≤ 640 px: the street-level clip; desktop: the drone clip. ── */
html[data-braco="video"] .j__foto { background-image: url('/design/video/v27405039-poster.jpg'); background-position: center; overflow: hidden; }
.j__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.j__v.on { opacity: 1; }
.j__pausa { position: absolute; z-index: 5; right: clamp(18px, 4vw, 56px); top: 132px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; color: #fff; cursor: pointer; background: rgba(41,18,16,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.j__pausa svg { width: 12px; height: 12px; }
.j__pausa .i-play, .j__pausa.is-paused .i-pause { display: none; }
.j__pausa.is-paused .i-play { display: block; }
@media (max-width: 900px) {
  html[data-braco="video"] .j__foto { background-position: center; }
  .j__pausa { top: calc(38px + 52vh - 56px); right: 16px; }
}
@media (max-width: 640px) {
  html[data-braco="video"] .j__foto { background-image: url('/design/video/v27405039-phone-poster.jpg'); }
}
@media (prefers-reduced-motion: reduce) { .j__v, .j__pausa { display: none; } }
/* ════ The home top (owner pick 2026-10-29, DECISIONS «home top = H3/K3 + V1 + ferramentas + N3»): the hero H3 + K3
   cards, «O nosso compromisso» V1 and the tools as action pills. Ported from vault/home-agora (r2.css, r3.css, agora.css,
   energia worktree). Palette = the approved hero's bubbles: visitor #D9E8FF / #1D4F91, Greg rgba(56,24,20,.78) + 1px
   --on-dark-20 + blur, peach only on the one primary button, the cream chip with a green ✓. No CSS uppercase on new labels.
   Selectors on the hero are .j.hh: chrome.css (loaded after this sheet) sets .j's phone padding for the ticker. ════ */
:root { --bq: #D9E8FF; --bq-ink: #1D4F91; --bg: rgba(56,24,20,.78); --chrome: 0px;
  --cp-ink: var(--ink-deep); --cp-ink2: rgba(41,18,16,.68); --cp-mut: rgba(41,18,16,.45); --cp-card: rgba(255,255,255,.62); --cp-line: #ECE7E1; }
@media (max-width: 900px) { :root { --chrome: 40px; } }
@media (max-width: 700px) { :root { --chrome: 116px; } } /* N3: the logo row (64) + the two tabs (52), chrome.css */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ── hero frame ── */
.j.hh { min-height: 0; }
.hh__in { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto;
  row-gap: 32px; align-items: end; padding: 128px clamp(18px, 6.5vw, 96px) clamp(28px, 5vh, 56px); }
.hh__txt { display: grid; gap: 20px; max-width: 640px; align-content: end; }
.hh__h { margin: 0; font: 700 clamp(40px, 4.4vw, 64px)/1.03 var(--disp); letter-spacing: -.02em; text-wrap: balance; }
.hh__sub { margin: 0; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: var(--on-dark-75); max-width: 44ch; }
.hh__cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; justify-self: start; min-height: 56px; padding: 0 26px;
  border-radius: var(--r-pill); background: var(--peach); color: var(--ink-deep); font: 600 16px/1 var(--font-ui); text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease; }
.hh__cta:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(255,184,131,.25); }
.hh__cta span, .tc__go span, .cp__cta span { transition: transform .15s ease; }
.hh__cta:hover span, .t3 a:hover .tc__go span, .t3 .tc__go:hover span { transform: translateX(3px); }
.cp__cta:hover span { transform: translateY(2px); }
.hh__seg { margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--on-dark-60); display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.hh__seg a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--on-dark-30); }
.hh__seg a:hover { text-decoration-color: var(--peach); }

/* ── the four K3 cards: the question as a blue tab on a Greg card, a piece of the tool under it ── */
.hh__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hh__grid > li { min-width: 0; }
.k3 .t3 > a, .k3 .t3 > div { height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; border-radius: 20px; background: var(--bg);
  border: 1px solid var(--on-dark-20); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: #fff; text-decoration: none; transition: border-color .15s, transform .15s; }
.k3 .t3 > a:hover, .k3 .t3 > div:hover { border-color: var(--peach); transform: translateY(-2px); }
.tc__q { align-self: flex-start; margin: 0 0 6px; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--bq); color: var(--ink-deep); font: 600 14px/1.3 var(--font-ui); }
.t3__k { font-size: 13px; color: var(--on-dark-75); }
.t3__s { display: block; margin: 2px 0; }
.k3 .tc__go { margin-top: auto; } /* no source line under the surface (owner 2026-10-29): the button sits at the card's foot */
.k3 .t3__s { margin-bottom: 8px; }
.tc__src { margin-top: auto; padding-top: 4px; font: 500 11px/1.3 var(--font-doc); color: var(--on-dark-60); }
.tc__go { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 4px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--cream); color: var(--ink-deep); font: 600 14px/1 var(--font-ui); text-decoration: none; transition: background .15s; }
.t3 a:hover .tc__go, .t3--div .tc__go:hover { background: #fff; }
/* the hero cards come in one after the other (CSS only: they end visible with or without JS) */
@keyframes hh-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .k3 > li { animation: hh-in .6s cubic-bezier(.2,.7,.2,1) both; }
  .k3 > li:nth-child(1) { animation-delay: .15s; } .k3 > li:nth-child(2) { animation-delay: .24s; }
  .k3 > li:nth-child(3) { animation-delay: .33s; } .k3 > li:nth-child(4) { animation-delay: .42s; }
}

/* brand rows with logos (light by default; dark in the hero) */
.lgt { flex: none; width: 48px; height: 32px; border-radius: 8px; background: #fff; border: 1px solid #EEF0F2; display: grid; place-items: center; overflow: hidden; }
.lgt img { max-width: 40px; max-height: 24px; width: auto; height: auto; object-fit: contain; }
.lgt--sq img { max-width: 34px; max-height: 32px; }
.prl { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.prw { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px 6px 6px; border-radius: 12px; background: #fff; color: var(--cp-ink); }
.prw__n { display: grid; gap: 2px; min-width: 0; font: 600 13px/1.2 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prw__n small { font: 500 10.5px/1.1 var(--font-ui); color: var(--cp-mut); }
.prw--best { background: #E4F1EC; }
.prw--best .prw__n small, .prw--best .prw__p { color: var(--band-barato); font-weight: 600; }
.prw__p { font: 600 14px/1 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prw__p small { font-weight: 400; font-size: 11px; color: var(--cp-mut); }
.prh { margin: 2px 0 6px; font: 500 11px/1.2 var(--font-doc); color: var(--cp-mut); }
.prl + .prh { margin-top: 12px; }
.hh .prw { background: rgba(255,255,255,.08); color: #fff; padding: 4px 8px 4px 4px; gap: 8px; border-radius: 10px; }
.hh .prw--best { background: rgba(15,122,90,.32); }
.hh .prw--best .prw__p, .hh .prw--best .prw__n small { color: #9FE3C8; }
.hh .prw__p small, .hh .prw .prw__n small { color: var(--on-dark-60); }
.hh .prw--best .prw__n small { color: #9FE3C8; }
.hh .lgt { width: 44px; height: 28px; border-radius: 7px; border: 0; }
.hh .lgt img { max-width: 38px; max-height: 20px; }
.hh .lgt--sq img { max-width: 30px; max-height: 28px; }

/* the AC/DC switch (site/home/agora.js); without JS the AC price shows */
.evs { display: grid; gap: 8px; }
.evs__seg { display: flex; gap: 3px; padding: 3px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); }
.evs__seg button { flex: 1; min-height: 36px; padding: 0 8px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--on-dark-75); font: 500 13px/1 var(--font-ui);
  cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.evs__seg button:hover { color: #fff; }
.evs__seg button[aria-pressed="true"] { background: var(--bq); color: var(--ink-deep); font-weight: 600; }
.evs__seg button:focus-visible { outline-offset: 1px; }
.evs__n { margin: 2px 0 0; font: 700 clamp(30px, 2.5vw, 38px)/1 var(--disp); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; }
.evs__n small { font: 500 14px/1 var(--font-ui); letter-spacing: 0; color: var(--on-dark-75); }
.evs__n [data-tipo]:not([hidden]) { display: inline-block; }
@keyframes evs-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .evs.is-on .evs__n [data-tipo]:not([hidden]) { animation: evs-in .28s ease both; } }
.evs__k { margin: 0; font-size: 13px; line-height: 1.35; color: var(--on-dark-75); }

/* the IUC calendar page */
.mcal { display: flex; gap: 12px; align-items: center; }
.mcal__pg { flex: none; width: 66px; border-radius: 12px; overflow: hidden; background: #fff; color: var(--ink-deep); text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: transform .25s cubic-bezier(.2,.7,.2,1); transform-origin: 50% 0; }
.t3 a:hover .mcal__pg { transform: rotate(-4deg); }
.mcal__pg i { display: block; padding: 5px 0 4px; background: var(--peach); font: 600 12px/1 var(--font-doc); font-style: normal; }
.mcal__pg b { display: block; padding: 8px 0 9px; font: 700 19px/1 var(--disp); letter-spacing: -.01em; }
.mcal__t { display: grid; gap: 4px; }
.mcal__t b { font: 600 15px/1.2 var(--font-ui); color: #fff; }
.mcal__t small { font-size: 13px; line-height: 1.35; color: var(--on-dark-75); }

/* the accident checklist + the 8-day chip; the ticks draw themselves in (CSS only) */
.chk { display: grid; gap: 8px; }
.chk ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.chk li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.3; color: var(--on-dark-75); }
.chk li i, .ck li i { flex: none; width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--on-dark-30); display: grid; place-items: center; }
.chk li.on i { background: var(--bq); border-color: var(--bq); color: var(--bq-ink); }
.chk li.on { color: #fff; }
.chk li svg, .ck li svg { width: 11px; height: 11px; }
.chk__d { justify-self: start; display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 10px; border-radius: var(--r-pill); background: var(--cream); color: var(--ink); font-size: 12.5px; }
.chk__d b { font-weight: 700; }
.chk__d::before { content: "✓"; color: var(--band-barato); font-weight: 700; }
@keyframes tick { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .chk li.on path { stroke-dasharray: 16; animation: tick .35s ease-out both; }
  .chk li.on:nth-child(1) path { animation-delay: .9s; } .chk li.on:nth-child(2) path { animation-delay: 1.1s; }
}

/* ── «O nosso compromisso» V1: light cards on cream, one sentence, a product surface, an «exemplo» tag ── */
.cp { padding: clamp(72px, 8vw, 120px) 16px; background: var(--cream); color: var(--cp-ink); }
.cp__in { max-width: 1120px; margin-inline: auto; }
.cp__hd { max-width: 640px; margin: 0 auto; display: grid; gap: 12px; justify-items: center; text-align: center; }
.cp h2 { margin: 0; font: 700 clamp(30px, 3.4vw, 48px)/1.05 var(--disp); letter-spacing: -.02em; color: inherit; }
.cp__lead { margin: 0; max-width: 60ch; text-wrap: balance; font: 500 clamp(16px, 1.3vw, 18px)/1.5 var(--font-ui); color: var(--cp-ink2); }
.cp__g { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cp__c { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 36px 32px 40px; border-radius: 24px; background: var(--cp-card); }
.cp__t { display: grid; gap: 8px; }
.cp__t h3 { margin: 0; font: 700 21px/1.15 var(--disp); letter-spacing: -.01em; color: inherit; }
.cp__t p { margin: 0; max-width: none; font: 500 15.5px/1.5 var(--font-ui); color: var(--cp-ink2); }
.cp__art { position: relative; margin-top: auto; height: 300px; overflow: clip; }
.cp .ex { position: absolute; right: 18px; bottom: 14px; font: 500 11px/1 var(--font-doc); letter-spacing: .02em; color: var(--ink-50); }
.cp__ft { display: flex; justify-content: center; margin-top: 36px; }
.cp__cta { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: var(--r-pill); background: var(--ink-deep); color: #fff;
  font: 600 15.5px/1 var(--font-ui); text-decoration: none; transition: background .15s, transform .15s; }
.cp__cta:hover { background: #000; transform: translateY(-1px); }
.cp :focus-visible { outline-color: var(--azul-ink); }

/* surface 1 · the phone: the two date chips, the checklist, the muted «Em breve» row */
.sf--ph .ph { position: absolute; left: 9%; right: 9%; top: 0; bottom: -30px; padding: 38px 12px 0; display: grid; align-content: start; gap: 7px;
  border: 6px solid #E6E1DB; border-bottom: 0; border-radius: 40px 40px 0 0; background: #FBFAF8; }
.sf--ph .ph::before { content: ""; position: absolute; left: 50%; top: 12px; width: 30%; height: 15px; border-radius: 9px; background: #DCD6CF; transform: translateX(-50%); }
.dt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 10px 7px 7px; border-radius: 12px; background: #fff; box-shadow: 0 4px 14px rgba(41,18,16,.06); }
.dt__c { width: 38px; height: 40px; border-radius: 9px; background: var(--bq); color: var(--bq-ink); display: grid; place-content: center; text-align: center; font: 500 10px/1 var(--font-doc); }
.dt__c b { display: block; font: 700 16px/1 var(--font-ui); margin-bottom: 2px; }
.dt--due .dt__c { background: var(--peach); color: var(--ink-deep); }
.dt__t { display: grid; gap: 2px; min-width: 0; }
.dt__t b { font: 600 12.5px/1.2 var(--font-ui); }
.dt__t small { font: 500 11px/1.3 var(--font-ui); color: var(--cp-ink2); }
.ck { list-style: none; margin: 0; padding: 8px 10px; display: grid; gap: 6px; border-radius: 12px; background: #fff; }
.ck li { display: flex; gap: 8px; align-items: center; font: 500 12px/1.25 var(--font-ui); color: var(--cp-ink); }
.ck li i { border-color: #CFC7BF; }
.ck li.on i { background: var(--bq-ink); border-color: var(--bq-ink); color: #fff; }
/* the «Em breve» row: the /seguro-auto/ «a carregar» shimmer (jr-shim), slow */
.soonr { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border: 1px dashed #D3CBC3; border-radius: 12px;
  font: 500 11.5px/1.2 var(--font-ui); color: var(--cp-mut); background: linear-gradient(90deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 70%) 0 0 / 200% 100%; }
@keyframes jr-shim { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: no-preference) { .soonr { animation: jr-shim 2.6s linear infinite; } }
.soonr em { font: 500 10px/1 var(--font-doc); font-style: normal; padding: 4px 7px; border-radius: var(--r-pill); background: var(--peach-pale, #FFF1E6); color: var(--peach-ink); white-space: nowrap; }

/* surface 2 · the IUC result + the fading stack of notices */
.sf--iuc { position: absolute; inset: 0; display: grid; align-content: start; gap: 14px; }
.iu { padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(41,18,16,.07); display: grid; gap: 10px; }
.iu__f { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.iu__f dt { font: 500 10.5px/1.2 var(--font-doc); color: var(--cp-mut); }
.iu__f dd { margin: 2px 0 0; font: 600 13px/1.2 var(--font-ui); }
.iu__r { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-top: 10px; border-top: 1px solid var(--cp-line); }
.iu__r small { font: 500 12px/1 var(--font-ui); color: var(--cp-ink2); }
.iu__r b { font: 700 26px/1 var(--disp); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.nt { display: grid; justify-items: center; }
.nt__c { width: 94%; display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; background: #fff;
  box-shadow: 0 8px 26px rgba(41,18,16,.1); position: relative; z-index: 3; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.nt__c + .nt__c { width: 85%; margin-top: -3px; z-index: 2; opacity: .55; box-shadow: none; background: rgba(255,255,255,.75); }
.nt__c + .nt__c + .nt__c { width: 76%; z-index: 1; opacity: .3; }
.nt__i { width: 32px; height: 32px; border-radius: 9px; background: var(--bq); color: var(--bq-ink); display: grid; place-items: center; }
.nt__c + .nt__c .nt__i { background: none; color: var(--cp-mut); }
.nt__i svg { width: 17px; height: 17px; }
.nt__c p { margin: 0; max-width: none; font: 500 11.5px/1.35 var(--font-ui); color: var(--cp-ink); }
.nt__c + .nt__c p { color: var(--cp-mut); }

/* surface 3 · brand rows and networks, fading out at the bottom */
.sf--fuel { position: absolute; inset: 0; -webkit-mask: linear-gradient(180deg, #000 80%, transparent 100%); mask: linear-gradient(180deg, #000 80%, transparent 100%); }
.sf--fuel .prw { box-shadow: 0 1px 2px rgba(41,18,16,.05); }

/* ── scroll reveals (site/home/agora.js adds html.rv-on and .is-in; without JS or with reduced motion nothing is hidden):
   the cards rise in turn, the notices stack up, the ticks draw ── */
.rv-on [data-rv] { transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 110ms); }
.rv-on [data-rv]:not(.is-in) { opacity: 0; transform: translateY(28px); }
.rv-on .cp__c:not(.is-in) .nt__c { opacity: 0; transform: translateY(16px); }
.rv-on .cp__c .nt__c:nth-child(1) { transition-delay: .45s; } .rv-on .cp__c .nt__c:nth-child(2) { transition-delay: .6s; } .rv-on .cp__c .nt__c:nth-child(3) { transition-delay: .75s; }
.rv-on .ck li.on path { stroke-dasharray: 16; transition: stroke-dashoffset .35s ease-out .5s; }
.rv-on .ck li.on + li.on path { transition-delay: .7s; }
.rv-on .cp__c:not(.is-in) .ck li.on path { stroke-dashoffset: 16; }
@media (prefers-reduced-motion: reduce) {
  .rv-on [data-rv], .rv-on .cp__c .nt__c { opacity: unset; transform: none !important; transition: none; }
}

/* ── «Ferramentas e simuladores gratuitos»: the tool cards as action pills (dark = a live tool, muted = «Em breve») ── */
.ag-tools h2 { max-width: 22ch; }
.ag-tools .tb2 { display: flex; flex-wrap: wrap; gap: 10px; }
.ag-tools .mc { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 18px 6px 6px; border-radius: var(--r-pill); border: 0; box-shadow: none; transform: none; }
.ag-tools .mc__i { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.ag-tools .mc__i svg { width: 20px; height: 20px; }
.ag-tools .mc__t small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ag-tools .mc__t b { font: 600 15px/1.2 var(--font-ui); }
.ag-tools .mc__a { width: auto; height: auto; background: none; font-size: 16px; }
.ag-tools .mc--on { background: var(--ink-deep); color: #fff; }
.ag-tools .mc--on .mc__i { background: var(--peach); color: var(--ink-deep); }
.ag-tools .mc--on .mc__a { color: var(--peach); }
.ag-tools .mc--on:hover { background: #000; border: 0; box-shadow: 0 12px 26px rgba(41,18,16,.2); transform: translateY(-1px); }
.ag-tools .mc--soon { background: var(--tint-10); color: var(--ink-60); }
.ag-tools .mc--soon .mc__i { background: #fff; color: var(--ink-60); }
.ag-tools .mc--soon .mc__a { color: var(--ink-60); }
.ag-tools .mc--soon .soon { background: #fff; }
.ag-tools .mc--soon:hover { border: 0; background: var(--tint-20); box-shadow: none; }
.ag-tools .mc:focus-visible { outline: 3px solid var(--azul-ink); outline-offset: 3px; }

/* ── tablet ── */
@media (min-width: 901px) and (max-width: 1180px) {
  .hh__grid { grid-template-columns: 1fr 1fr; }
  .cp__g { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
}

/* ── phone: a photo band under the nav, then the words, the cards (2 × 2), the button ── */
@media (max-width: 900px) {
  .j.hh { padding-top: 0; }
  .j.hh::after { inset: 0 0 auto 0; top: 0; height: calc(var(--chrome) + 211px); min-height: 0;
    background: linear-gradient(0deg, var(--ink-deep) 0%, rgba(41,18,16,0) 60%), linear-gradient(180deg, rgba(41,18,16,.55) 0%, rgba(41,18,16,0) 40%); }
  .hh .j__foto { position: absolute; inset: 0 0 auto 0; height: calc(var(--chrome) + 210px); min-height: 0; background-position: 70% 28%; }
  .hh__in { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: calc(var(--chrome) + 92px) 16px 36px; gap: 16px; }
  .hh__txt { display: contents; }
  .hh__h { order: 1; font-size: clamp(31px, 8.4vw, 40px); line-height: 1.04; }
  .hh__sub { order: 2; font-size: 15.5px; }
  .hh__grid { order: 3; }
  .hh__cta { order: 4; width: 100%; }
  .hh__seg { order: 5; }
  .k3.hh__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .k3 .t3 > a, .k3 .t3 > div { padding: 10px 10px 12px; border-radius: 18px; gap: 5px; }
  .t3 .tc__q { font-size: 12.5px; padding: 6px 9px; margin-bottom: 2px; }
  .t3__k { font-size: 12px; }
  .tc__src { font-size: 10px; }
  .k3 .evs__seg button { font-size: 11.5px; min-height: 32px; padding: 0 4px; }
  .k3 .evs__n { font-size: 26px; }
  .k3 .evs__n small { font-size: 12px; }
  .k3 .evs__k { font-size: 11.5px; }
  .k3 .mcal { flex-direction: column; align-items: flex-start; gap: 8px; }
  .k3 .mcal__pg { width: 56px; }
  .k3 .mcal__t b { font-size: 13px; }
  .k3 .mcal__t small { font-size: 11.5px; }
  .k3 .chk li { font-size: 11.5px; gap: 6px; }
  .k3 .chk li i { width: 15px; height: 15px; }
  .k3 .chk__d { font-size: 11.5px; padding: 5px 8px; }
  .k3 .tc__go { min-height: 34px; padding: 0 10px; gap: 5px; font-size: 12px; white-space: nowrap; letter-spacing: -.01em; }
  .cp__g { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 32px; }
  .cp__c { padding: 28px 22px 36px; gap: 18px; }
  .cp__art { height: 290px; }
  .cp__art:has(.sf--ph) { height: 316px; }
  .soonr { white-space: nowrap; font-size: 11px; }
  .cp__cta { width: 100%; justify-content: center; }
  /* H2's pause button sits on the photo band, under the nav */
  .hh .j__pausa { top: calc(var(--chrome) + 12px); right: 16px; }
}
@media (max-width: 600px) {
  /* two narrow columns: the brand rows keep the logo and the price */
  .hh .k3 .prw { grid-template-columns: auto minmax(0, 1fr); padding: 3px 7px 3px 3px; }
  .hh .k3 .prw__n { display: none; }
  .hh .k3 .prw__p { justify-self: end; font-size: 13px; }
  .hh .k3 .prw__p small { display: none; }
}
@media (max-width: 700px) {
  .ag-tools .mc { width: 100%; }
  .ag-tools .mc__a { margin-left: auto; }
}
@media (max-width: 380px) {
  .k3 .tc__go { white-space: normal; line-height: 1.15; padding-block: 6px; }
}
@media (max-width: 370px) {
  .sf--ph .ph { left: 4%; right: 4%; }
}

/* ════ The sign-up (owner pick 2026-10-29: vault/home-agora r6 F2 + r5 E3). Left: the phone (/seguro-auto/ .ph1 shell)
   with the notice stack (.nt3), animated by site/home/agora.js; right: the light card and the form.
   Fix against the mock («the illustration isn't loading properly»): the mock masked the whole white phone to transparent
   from 48 % of its height, so on the dark panel the shell turned into a grey smear, the 2nd and 3rd notices dissolved in
   it, and on the phone (260 px panel) only one notice showed. Here the shell is opaque and sized from its top; only the
   panel's bottom edge fades (a dark overlay under the stack), so the first paint is the complete three-notice stack. ════ */
.le { --le-pri: #1D4F91; --le-pri-h: #163f75; --le-ink: #101828; --le-ink-2: #4A5565; --le-ph: #6A7282;
  padding: clamp(64px, 7vw, 112px) 16px; background: var(--cream); }
.le *, .le *::before, .le *::after { box-sizing: border-box; }
.le p { max-width: none; }
.le h2 { margin: 0; font: 700 36px/40px var(--disp); letter-spacing: -.015em; text-wrap: balance; color: var(--le-ink); }
.le .eb { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--font-ui); letter-spacing: .01em; background: var(--peach); color: var(--ink-deep);
  padding: 8px 12px; border-radius: 999px; white-space: nowrap; }
.le .eb::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.le__s { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.le__c { background: #fff; border-radius: 24px; padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 24px; box-shadow: 0 30px 70px rgba(41,18,16,.08); }
.le__t3 { display: grid; gap: 8px; }
.le__sub { margin: 0; color: var(--le-ink-2); font: 500 17px/1.45 var(--font-ui); }
.le-pts { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font: 500 15px/1.35 var(--font-ui); color: var(--le-ink); }
.le-pts li { display: flex; gap: 10px; align-items: center; }
.le-pts li::before { content: "✓"; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--band-barato-11); color: var(--band-barato); font-size: 12px; font-weight: 700; }

/* the form */
.le-f { display: grid; gap: 14px; text-align: left; }
.le-f__row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.le-fl { display: grid; gap: 6px; flex: 1 1 220px; min-width: 0; }
.le-fl--tel { gap: 8px 0; }
.le-lab { font: 600 13px/16px var(--font-ui); color: var(--le-ink); }
.le-lab small { font-weight: 500; color: var(--le-ink-2); font-size: 13px; }
.le-in { height: 48px; width: 100%; padding: 0 16px; border: 0; border-radius: 12px; background: var(--cream); box-shadow: inset 0 0 0 1px #E4E4E7;
  font: 500 16px/1 var(--font-ui); color: var(--le-ink); }
.le-in::placeholder { color: var(--le-ph); }
.le-in:focus-visible, .le-tel:focus-within { outline: 2px solid var(--le-pri); outline-offset: 2px; }
.le-tel { display: flex; align-items: center; height: 48px; border-radius: 12px; background: var(--cream); box-shadow: inset 0 0 0 1px #E4E4E7; overflow: hidden; }
.le-tel b { flex: none; padding: 0 10px 0 14px; font: 600 16px/1 var(--font-ui); color: var(--le-ink-2); border-right: 1px solid rgba(16,24,40,.15); height: 24px; display: inline-flex; align-items: center; }
.le-tel .le-in { background: transparent; box-shadow: none; border-radius: 0; padding-left: 10px; }
.le-tel .le-in:focus-visible { outline: 0; }
.le-help { margin: 0; font: 500 13px/1.4 var(--font-ui); color: var(--le-ink-2); }
.le-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 12px 18px; border-radius: 12px; border: 0;
  background: var(--le-pri); color: #fff; font: 600 15px/1.2 var(--font-ui); cursor: pointer; white-space: nowrap; transition: background .15s, transform .15s; }
.le-btn:hover { background: var(--le-pri-h); transform: translateY(-1px); }
.le-btn:focus-visible { outline: 2px solid var(--le-pri); outline-offset: 2px; }
.le-btn:disabled { opacity: .7; cursor: progress; transform: none; }
.le-ck { display: flex; gap: 10px; align-items: flex-start; margin: 0; font: 400 13px/1.45 var(--font-ui); color: var(--le-ink-2); cursor: pointer; }
.le-ck input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--le-pri); }
.le-ck[hidden] { display: none; }
.le-f__cks { display: grid; gap: 10px; }
.le-ft { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }
.le-priv { display: inline-flex; align-items: center; min-height: 44px; font: 400 13px/1.4 var(--font-ui); color: var(--le-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.le .calert__status { margin: 0; font: 600 14px/1.45 var(--font-ui); color: var(--le-ink); }
.le .calert__status[data-state='erro'] { color: var(--peach-ink); }
.le .calert__status:empty { display: none; }

/* the panel: the phone and its notices */
.le__pic { position: relative; min-height: 520px; border-radius: 24px; overflow: clip; isolation: isolate;
  background: radial-gradient(70% 60% at 50% 38%, rgba(255,184,131,.22), rgba(255,184,131,0) 70%), var(--ink-deep); }
.le__pic .eb { position: absolute; top: 20px; left: 20px; z-index: 4; }
.lp-ph { position: absolute; left: 50%; top: 64px; bottom: -40px; width: min(370px, 66%); transform: translateX(-50%);
  border: 6px solid #E4E5E8; border-bottom: 0; border-radius: 46px 46px 0 0; background: #F7F7F8; }
.lp-ph::before { content: ""; position: absolute; left: 50%; top: 14px; width: 30%; height: 18px; border-radius: 10px; background: #D6D8DC; transform: translateX(-50%); }
.lp-ph__t { position: absolute; left: 0; right: 0; top: 50px; text-align: center; font: 600 44px/1 var(--font-ui); letter-spacing: -.02em; color: #101828; font-variant-numeric: tabular-nums; }
.lp-st { position: absolute; left: 6%; right: 6%; top: 118px; margin: 0; padding: 0; list-style: none; display: grid; justify-items: center; }
.lp-n { width: 100%; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; background: #fff; border-radius: 14px; padding: 11px 12px;
  box-shadow: 0 10px 28px rgba(16,24,40,.12); position: relative; z-index: 3;
  transition: width .3s cubic-bezier(.4,0,.2,1), opacity .3s cubic-bezier(.4,0,.2,1), background-color .3s; }
.lp-n + .lp-n { width: 92%; margin-top: 6px; z-index: 2; opacity: .62; box-shadow: 0 4px 12px rgba(16,24,40,.06); }
.lp-n + .lp-n + .lp-n { width: 84%; z-index: 1; opacity: .36; }
.lp-n + .lp-n + .lp-n + .lp-n { display: none; }
.lp-n__i { width: 34px; height: 34px; border-radius: 9px; background: #E3ECF7; color: #1D4F91; display: grid; place-items: center; }
.lp-n--greg .lp-n__i { background: var(--peach); color: var(--ink-deep); }
.lp-n__i svg { width: 18px; height: 18px; }
.lp-n--greg .lp-n__i svg { width: 24px; height: 24px; }
.lp-n p { margin: 0; font: 500 14px/1.38 var(--font-ui); color: #101828; text-align: left; }
.lp-n p b { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 2px; font: 600 12px/1.2 var(--font-ui); color: #1D4F91; }
.lp-n p b small { font: 500 11px/1.2 var(--font-ui); color: #99A1AF; }
@media (prefers-reduced-motion: no-preference) { .lp-n.is-in { animation: lp-in .5s cubic-bezier(.4,0,.2,1) both; } }
@keyframes lp-in { from { opacity: 0; transform: translateY(-16px) scale(.96); } to { opacity: 1; transform: none; } }
.lp-pausa { position: absolute; left: 14px; bottom: 14px; z-index: 5; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(20,10,8,.55); color: #fff;
  display: grid; place-items: center; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lp-pausa[hidden] { display: none; }
.lp-pausa svg { width: 12px; height: 12px; }
.lp-pausa .i-play, .lp-pausa[aria-pressed="true"] .i-pause { display: none; }
.lp-pausa[aria-pressed="true"] .i-play { display: block; }
.lp-pausa:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .lp-n { transition: none; } }
@media (max-width: 960px) {
  .le { padding: 56px 16px; }
  .le h2 { font-size: 26px; line-height: 30px; }
  .le__s { grid-template-columns: 1fr; gap: 12px; }
  .le__c { padding: 28px 20px; gap: 20px; }
  .le-f__row { flex-direction: column; align-items: stretch; }
  .le-fl { flex: none; }
  .le-ft { flex-direction: column; align-items: flex-start; gap: 0; }
  .le__pic { min-height: 0; height: 372px; }
  .lp-ph { top: 60px; width: min(300px, 76%); border-radius: 36px 36px 0 0; }
  .lp-ph__t { display: none; }
  .lp-st { top: 42px; left: 5%; right: 5%; }
  .lp-n { padding: 9px 10px; grid-template-columns: 30px 1fr; gap: 8px; }
  .lp-n__i { width: 30px; height: 30px; }
  .lp-n p { font-size: 12.5px; }
  .lp-pausa { left: auto; right: 12px; bottom: 12px; }
}