@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("fonts/bricolage-grotesque.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/dm-sans.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --lit: #FF9A76;
  --sand: #F6F3EC; --ink: #14201B; --muted: #5F6B65; --line: #E2DED3;
  --green: #10B981; --deep: #0A7A57; --forest: #0C2A20;
  --gutter: clamp(20px, 5vw, 80px);
  --head: 72px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--head); -webkit-text-size-adjust: 100%; }
body { font-family: "DM Sans", system-ui, sans-serif; background: var(--sand); color: var(--ink); font-size: 18px; line-height: 1.5; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, blockquote { font-family: "Bricolage Grotesque", "DM Sans", sans-serif; font-weight: 700; letter-spacing: -0.012em; line-height: 1.04; text-wrap: balance; }
h2 { font-size: clamp(36px, 5vw, 72px); }
ul, ol { list-style: none; }

/* ---- botões e logo ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--deep); color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; padding: 16px 26px; border-radius: 999px; transition: transform .15s, background .15s; }
.btn:hover { background: #086547; transform: translateY(-2px); }
.btn svg { width: 21px; height: 21px; flex: none; }
.btn.small { font-size: 15px; padding: 10px 18px; }
.btn.small svg { width: 18px; height: 18px; }
.btn.light, .hero .btn, header:not(.solid) .btn { background: #fff; color: var(--ink); }
.btn.light:hover, .hero .btn:hover, header:not(.solid) .btn:hover { background: #fff; }
.btn.light svg, .hero .btn svg, header:not(.solid) .btn svg { color: var(--deep); }
.ghost { color: #fff; font-weight: 600; text-underline-offset: 5px; }

.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo .mk { width: 34px; height: 34px; flex: none; }
.logo .wm { height: 30px; width: auto; flex: none; }

header { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--head); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #fff; transition: background .3s, color .3s, box-shadow .3s; }
header.solid { --lit: #F2694A; background: rgba(246,243,236,.94); backdrop-filter: blur(12px); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
header nav { display: flex; gap: 28px; font-size: 15px; font-weight: 500; }
header nav a { text-decoration: none; opacity: .85; }
header nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 900px) { header nav { display: none; } }
.btn { white-space: nowrap; }
@media (max-width: 420px) {
  header { gap: 8px; }
  .logo { gap: 8px; }
  .logo .mk { width: 30px; height: 30px; }
  .logo .wm { height: 26px; }
  .btn.small { font-size: 14px; padding: 9px 13px; gap: 7px; }
}

/* ---- aparelhos ---- */
/* a moldura é borda e a tela é recortada pela própria borda: os cantos de dentro acompanham sempre os de fora */
.phone { --r: 40px; --pad: 7px; border: var(--pad) solid #0B0F0D; border-radius: var(--r); overflow: hidden; background: #0B0F0D; box-shadow: 0 40px 70px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06); }
.phone > img { display: block; width: 100%; height: auto; }

/* barra de status e indicador de início desenhados, para a tela não encostar na moldura */
.os { display: flex; align-items: center; justify-content: space-between; aspect-ratio: 100 / 11; padding: 0 8% 0 10%; flex: none; container-type: inline-size; background: #F4F1E9; color: #14201B; }
.os time { font-size: 4.4cqw; font-weight: 600; line-height: 1; letter-spacing: .01em; }
.os i { width: 18cqw; height: 3.2cqw; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 12'%3E%3Crect x='0' y='8' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='5.8' width='3' height='6.2' rx='.8'/%3E%3Crect x='9' y='3.4' width='3' height='8.6' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='.8'/%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M22.2 4.6a8.6 8.6 0 0 1 11.6 0'/%3E%3Cpath d='M24.8 7.4a4.8 4.8 0 0 1 6.4 0'/%3E%3C/g%3E%3Ccircle cx='28' cy='10.3' r='1.5'/%3E%3Crect x='40.5' y='.75' width='21' height='10.5' rx='3' fill='none' stroke='black' stroke-opacity='.45' stroke-width='1.2'/%3E%3Crect x='42.5' y='2.75' width='14' height='6.5' rx='1.6'/%3E%3Crect x='62.6' y='4.2' width='1.6' height='3.6' rx='.8' fill-opacity='.45'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 12'%3E%3Crect x='0' y='8' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='5.8' width='3' height='6.2' rx='.8'/%3E%3Crect x='9' y='3.4' width='3' height='8.6' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='.8'/%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M22.2 4.6a8.6 8.6 0 0 1 11.6 0'/%3E%3Cpath d='M24.8 7.4a4.8 4.8 0 0 1 6.4 0'/%3E%3C/g%3E%3Ccircle cx='28' cy='10.3' r='1.5'/%3E%3Crect x='40.5' y='.75' width='21' height='10.5' rx='3' fill='none' stroke='black' stroke-opacity='.45' stroke-width='1.2'/%3E%3Crect x='42.5' y='2.75' width='14' height='6.5' rx='1.6'/%3E%3Crect x='62.6' y='4.2' width='1.6' height='3.6' rx='.8' fill-opacity='.45'/%3E%3C/svg%3E") center / contain no-repeat; }
.os-home { display: grid; place-items: center; aspect-ratio: 100 / 6.5; background: #F4F1E9; color: #14201B; }
.os-home::before { content: ""; width: 34%; height: 18%; border-radius: 99px; background: currentColor; }
.window { border-radius: 14px; overflow: hidden; background: #18181B; box-shadow: 0 50px 90px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.07); }
.window .dots { height: 26px; background: #27272A; display: flex; align-items: center; gap: 7px; padding: 0 12px; }
.window .dots i { width: 9px; height: 9px; border-radius: 50%; background: #3F3F46; }
.window img { width: 100%; height: auto; }

/* conversa de WhatsApp desenhada em HTML, para poder acontecer na frente de quem lê */
.wa { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.wa > .os { background: #0F4C3A; color: #fff; }
.wa > .os-home { position: absolute; left: 0; right: 0; bottom: 0; background: none; z-index: 1; }
.wa-top { display: flex; align-items: center; gap: 10px; background: #0F4C3A; color: #fff; padding: 4px 16px 12px; flex: none; }
.wa-top b { display: block; font-size: 15px; line-height: 1.2; }
.wa-top small { font-size: 12px; opacity: .75; }
.wa-av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: none; background: #3E5240; }
.wa-av.letter { display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.wa-av img { width: 100%; height: 100%; object-fit: cover; }
.msgs { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; padding: 14px 11px 10px; background: #EFE9DF; }
.wa::after { content: "Mensagem"; flex: none; background: #EFE9DF; color: #7b857f; font-size: 14px; padding: 0 11px 18px; }
.m { align-self: flex-start; max-width: 86%; background: #fff; color: #1b2420; border-radius: 4px 14px 14px 14px; padding: 8px 11px 6px; font-size: 14px; line-height: 1.32; box-shadow: 0 1px 1px rgba(0,0,0,.1); flex: none; animation: pop .35s both cubic-bezier(.2,.9,.3,1.2); transform-origin: left bottom; }
.m.still { animation: none; }
.msgs > * { transition: opacity .3s; }
.msgs.swap > * { opacity: 0; }
.m.me { align-self: flex-end; background: #CFF5DE; border-radius: 14px 4px 14px 14px; transform-origin: right bottom; }
.m time { display: block; text-align: right; font-size: 10.5px; color: #6c766f; margin-top: 2px; }
.m img { width: calc(100% + 16px); max-width: none; margin: -4px -8px 7px; border-radius: 10px; aspect-ratio: 16 / 10; object-fit: cover; }
.m.file { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; }
.m.file time { grid-column: 1 / -1; }
.m.file small { display: block; font-size: 12px; color: #6c766f; }
.pdf { background: #DC2626; color: #fff; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 9px 7px; }
.choices { align-self: stretch; display: grid; gap: 5px; flex: none; animation: pop .35s both; }
.choices span { position: relative; isolation: isolate; background: #fff; color: var(--deep); font-size: 14px; font-weight: 600; text-align: center; border-radius: 12px; padding: 8px; transition: color .25s; }
/* o verde é uma camada que acende por opacidade: animar background-color aqui piscava branco em alguns navegadores */
.choices span::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--deep); opacity: 0; transition: opacity .25s; }
.choices span.hit { color: #fff; }
.choices span.hit::before { opacity: 1; }
.hold { flex: none; }
.typing { align-self: flex-start; background: #fff; border-radius: 4px 14px 14px 14px; padding: 11px 13px; display: flex; gap: 4px; flex: none; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa5a0; animation: blink 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes blink { 40% { transform: translateY(-3px); background: #5f6b65; } }

/* ---- capa ---- */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 13fr); align-items: center; gap: 24px; padding: calc(var(--head) + 28px) 0 44px var(--gutter); overflow: hidden; background: var(--forest); color: #fff; isolation: isolate; }
.hero-photos { position: absolute; inset: 0; z-index: -2; }
.hero-photos img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity 1.6s; }
.hero-photos img.on { opacity: 1; }
.hero-photos img.on, .hero-photos img.out { animation: drift 14s ease-out both; }
@keyframes drift { from { transform: scale(1.09); } to { transform: scale(1); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(8,30,22,.84) 0%, rgba(8,30,22,.62) 42%, rgba(8,30,22,.12) 100%); }
.hero h1 { font-size: clamp(44px, 5.8vw, 96px); font-weight: 800; line-height: 1; letter-spacing: -0.018em; }
.hero p { margin-top: 24px; font-size: clamp(18px, 1.5vw, 21px); max-width: 30em; color: #E6EFEA; }
.cta { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
/* celular e janela saem da mesma medida (--pp, a altura do celular), para a proporção entre eles não mudar com o formato da tela */
.hero-devices { --col: calc((100vw - var(--gutter) - 24px) * 13 / 23); --pp: clamp(480px, min(var(--col) * .74, 70svh), 780px); --win: min(var(--pp) * 1.2125, 100% - var(--gutter)); position: relative; height: calc(var(--pp) * 1.14); }
/* quando o celular fica no tamanho mínimo, o texto da conversa diminui junto; a partir de cerca de 540px de altura fica igual ao resto do site */
.hero-devices { --chat: clamp(11.5px, 11.5px + (var(--pp) - 480px) * .0417, 14px); }
.hero-devices .m { font-size: var(--chat); padding: calc(var(--chat) * .57) calc(var(--chat) * .79) calc(var(--chat) * .43); }
.hero-devices .m time { font-size: calc(var(--chat) * .75); }
.hero-devices .choices span { font-size: var(--chat); padding: calc(var(--chat) * .57); }
.hero-devices .wa-top { padding: calc(var(--chat) * .3) calc(var(--chat) * 1.14) calc(var(--chat) * .86); }
.hero-devices .wa-top b { font-size: calc(var(--chat) * 1.07); }
.hero-devices .wa-top small { font-size: calc(var(--chat) * .86); }
.hero-devices .wa-av { width: calc(var(--chat) * 2.57); height: calc(var(--chat) * 2.57); }
.hero-devices .wa::after { font-size: var(--chat); }
/* a janela inteira cabe na tela, e o celular fica na frente dela, à esquerda e descendo além da borda de baixo */
.hero-devices .window { position: absolute; right: var(--gutter); top: 0; width: var(--win); }
.hero-devices .phone { position: absolute; left: calc(100% - var(--gutter) - var(--win) * .88); bottom: 0; height: var(--pp); width: calc(var(--pp) * .485); }
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-right: 0; padding-bottom: 0; }
  .hero-text { padding-right: var(--gutter); }
  .hero-devices { --chat: 14px; height: 600px; margin-top: 16px; }
  .hero-devices .window { left: 26%; right: auto; top: 0; width: 130%; }
  .hero-devices .phone { left: 0; bottom: -24px; height: 100%; width: min(300px, 80vw); }
  .hero-devices .window { left: 30%; }
}

/* ---- uma noite ---- */
.night { position: relative; color: #fff; }
/* lvh: quando a barra de endereço do celular recolhe, a tela cresce; com svh a cena ficava mais baixa e o fundo da página aparecia embaixo */
.night-stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: #081420; }
.sky { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s; }
.sky.s0 { background: radial-gradient(90% 70% at 70% 10%, #1B3A55 0%, #0B1B2B 60%, #081420 100%); }
.sky.s1 { background: radial-gradient(70% 60% at 75% 0%, #0F2740 0%, #071220 60%, #050C16 100%); }
.sky.s2 { background: linear-gradient(180deg, #5B7FA3 0%, #F2B896 62%, #FBE3C6 100%); }
.sky.s3 { background: linear-gradient(180deg, #CDEBDD 0%, #F6F3EC 80%); }
.night[data-sky="0"] .s0, .night[data-sky="1"] .s1, .night[data-sky="2"] .s2, .night[data-sky="3"] .s3 { opacity: 1; }
.stars { position: absolute; inset: 0; transition: opacity 1s; background-image:
  radial-gradient(1.5px 1.5px at 8% 14%, #fff 50%, transparent), radial-gradient(1px 1px at 22% 42%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 36% 9%, #fff 50%, transparent),
  radial-gradient(1px 1px at 48% 30%, #fff 50%, transparent), radial-gradient(1px 1px at 62% 7%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 74% 24%, #fff 50%, transparent),
  radial-gradient(1px 1px at 88% 12%, #fff 50%, transparent), radial-gradient(1px 1px at 94% 38%, #fff 50%, transparent), radial-gradient(1px 1px at 14% 66%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 30% 82%, #fff 50%, transparent); opacity: .7; }
.night[data-sky="2"] .stars, .night[data-sky="3"] .stars { opacity: 0; }
.clock { position: absolute; left: var(--gutter); top: calc(var(--head) + 2vh); font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(72px, 13vw, 210px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: #fff; opacity: .95; transition: color .9s; }
.night[data-sky="2"] .clock { color: #fff; }
.night[data-sky="3"] .clock { color: var(--forest); }
.devices { position: absolute; inset: 0; }
.device { position: absolute; right: calc(var(--gutter) + 3vw); top: calc(50% + 34px); --ph: max(520px, min(calc(100svh - 112px), 680px)); height: var(--ph); width: calc(var(--ph) * .485); transform: translateY(-46%) scale(.96); opacity: 0; visibility: hidden; transition: opacity .55s, transform .55s, visibility .55s; }
.device.on { opacity: 1; visibility: visible; transform: translateY(-50%); }
.device .phone { height: 100%; }
.device.wide { width: min(980px, 60vw); right: -6vw; height: auto; }
.device:not(.on) .m { animation: none; }
.device.on .m:nth-child(1) { animation-delay: .15s; }
.device.on .m:nth-child(2) { animation-delay: .55s; }
.device.on .m:nth-child(3) { animation-delay: .95s; }
.device.on .m:nth-child(4) { animation-delay: 1.35s; }
.night-steps { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100lvh; pointer-events: none; }
.step { min-height: 95svh; display: flex; align-items: flex-end; padding: 0 var(--gutter) 13svh; }
.step-card { width: min(36vw, 560px); pointer-events: auto; opacity: .22; transition: opacity .5s, color .5s; }
.step.on .step-card { opacity: 1; }
.step h2 { font-size: clamp(30px, 3.4vw, 52px); }
.step p { margin-top: 14px; font-size: clamp(17px, 1.35vw, 20px); }
.night[data-sky="2"] .step-card { color: var(--forest); }
.night[data-sky="3"] .step-card { color: var(--forest); }
/* a primeira cena já começa com o cartão no meio do caminho: ele segura um pouco no lugar antes de subir, para dar tempo de ler */
@media (min-width: 901px) {
  .step:first-child { min-height: 145svh; }
  .step:first-child .step-card { position: sticky; bottom: 13svh; }
}
@media (max-width: 900px) {
  .clock { font-size: 64px; top: calc(var(--head) + 14px); }
  /* o celular mantém a proporção real e continua atrás do cartão de texto; --over deixa a última mensagem e a barra "Mensagem" logo acima do cartão (--card vem do site.js) */
  .device { --dtop: calc(var(--head) + 90px); --dw: min(290px, 76vw); --dh: calc(var(--dw) / .485); --over: max(18px, calc(var(--dtop) + var(--dh) + var(--card, 200px) + 8px - 100svh)); left: 50%; right: auto; width: var(--dw); height: var(--dh); top: var(--dtop); transform: translate(-50%, 12px) scale(.97); }
  .device .wa::after { padding-bottom: var(--over); }
  .device.on { transform: translate(-50%, 0); }
  .device.wide { left: 16px; width: 170vw; right: auto; height: auto; transform: translateY(12px); }
  .device.wide.on { transform: none; }
  .step { min-height: 110svh; padding: 0 16px 18px; }
  .step-card { width: 100%; padding: 16px 18px; border-radius: 18px; background: rgba(8,20,32,.9); backdrop-filter: blur(8px); opacity: 0; }
  .night[data-sky="2"] .step-card, .night[data-sky="3"] .step-card { background: rgba(255,255,255,.94); }
  .step h2 { font-size: 24px; }
  .step p { font-size: 15.5px; margin-top: 7px; line-height: 1.4; }
}
/* telas baixas: relógio, topo do celular e cartão menores, para sobrar espaço para a conversa */
@media (max-width: 900px) and (max-height: 760px) {
  .clock { font-size: 42px; top: calc(var(--head) + 12px); }
  .device { --dtop: calc(var(--head) + 62px); }
  .device .wa-top { padding: 2px 14px 9px; }
  .device .wa-av { width: 30px; height: 30px; }
  .step-card { padding: 12px 16px; }
  .step h2 { font-size: 20px; }
  .step p { font-size: 14px; margin-top: 5px; line-height: 1.35; }
}

/* ---- portas ---- */
.doors { padding: clamp(64px, 8vw, 120px) var(--gutter) clamp(64px, 8vw, 110px); background: var(--t, #DCEFE4); transition: background .6s; }
.doors[data-door="0"] { --t: #D8F0E2; } .doors[data-door="1"] { --t: #F0E5CF; } .doors[data-door="2"] { --t: #DAE6F2; } .doors[data-door="3"] { --t: #E6E2F4; }
.doors-head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px 60px; align-items: end; }
.doors-head p { color: var(--muted); max-width: 26em; }
.tabs { margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tabs button { position: relative; text-align: left; padding: 14px 0 16px; font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: clamp(16px, 1.7vw, 24px); letter-spacing: -0.02em; opacity: .5; border-top: 3px solid rgba(20,32,27,.18); transition: opacity .2s; }
.tabs button:hover { opacity: .85; }
.tabs button[aria-selected="true"] { opacity: 1; }
.tabs i { position: absolute; left: 0; top: -3px; height: 3px; width: 0; background: var(--ink); }
.tabs button[aria-selected="true"] i { width: 100%; }
.doors.autoplay .tabs button[aria-selected="true"] i { animation: fill var(--dur, 8s) linear both; }
@keyframes fill { from { width: 0; } to { width: 100%; } }
/* todas as abas na mesma célula: a seção fica com a altura da mais alta e nada pula ao trocar de aba */
.panels { margin-top: 30px; display: grid; }
.panels > .panel { grid-area: 1 / 1; }
.panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; min-height: 620px; }
.js .panel[hidden] { display: grid; visibility: hidden; }
.panel[hidden] .phone, .panel[hidden] .float, .panel[hidden] .window { animation: none !important; }
.panel h3 { font-size: clamp(30px, 3.4vw, 50px); }
.panel ul { margin-top: 26px; display: grid; gap: 14px; }
.panel li { padding-left: 26px; position: relative; color: #3b4641; line-height: 1.42; }
.panel li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--deep); }
.panel li b { color: var(--ink); font-weight: 600; }
.panel-screens { position: relative; display: flex; align-items: flex-start; gap: 4%; padding-left: 6%; }
.panel-screens .phone { flex: none; width: min(290px, 44%); }
.panel-screens .phone:nth-child(1) { animation: rise .6s both; }
.panel-screens .phone:nth-child(2) { margin-top: 56px; animation: rise .6s .12s both; }
.panel-screens.single { display: block; padding-left: 0; }
.panel-screens.single .window { animation: rise .6s both; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
.panel-screens .phone.wa { aspect-ratio: 520 / 1213; }
.float { position: absolute; left: 49%; top: 96px; width: min(360px, 49%); background: #fff; border-radius: 22px; padding: 22px; box-shadow: 0 34px 60px -30px rgba(20,32,27,.55); animation: rise .6s .12s both; font-size: 15px; line-height: 1.35; }
.float > b { font-family: "Bricolage Grotesque", sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; display: block; }
.track { margin-top: 16px; display: grid; gap: 14px; }
.track li { position: relative; padding-left: 26px; font-weight: 600; }
.track li small { display: block; font-weight: 400; color: var(--muted); font-size: 14px; }
.track li::before { content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #C9CFCA; background: #fff; }
.track li.done::before { background: var(--deep); border-color: var(--deep); }
.track li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 21px; bottom: -13px; width: 2px; background: #DDE3DE; }
.relay { margin-top: 14px; display: grid; gap: 8px; }
.relay p { background: #F0ECE3; border-radius: 4px 14px 14px 14px; padding: 9px 12px; justify-self: start; max-width: 92%; }
.relay p.out { background: var(--ink); color: #fff; border-radius: 14px 4px 14px 14px; justify-self: end; }
.note { display: block; margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.float.mobile { display: none; }

@media (max-width: 860px) {
  .doors-head, .panel { grid-template-columns: 1fr; }
  .tabs { grid-template-columns: repeat(2, 1fr); gap: 4px 14px; }
  .panel { min-height: 0; }
  .panel-screens { gap: 6%; padding-left: 0; }
  .panel-screens .phone { width: 47%; }
  .panel-screens .phone:nth-child(2) { margin-top: 40px; }
  /* no celular a conversa vira um cartão, como os das outras abas */
  .panel-screens .phone.wa { display: none; }
  .float.mobile { display: block; }
  /* moldura e cantos na mesma proporção do desktop (7px e 40px em 290px) */
  .panel-screens { container-type: inline-size; }
  .panel-screens .phone { --r: 6.5cqw; --pad: max(3px, 1.13cqw); }
  .float { left: 42%; width: 58%; top: 56px; padding: 15px; font-size: 13.5px; }
  .float > b { font-size: 17px; }
  .track li small { font-size: 12.5px; }
  .note { font-size: 12.5px; }
}

/* ---- marca ---- */
.brand { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 40px; padding: clamp(70px, 8vw, 110px) var(--gutter) 0; color: #fff; overflow: hidden; isolation: isolate; background: var(--forest); }
.brand-photos { position: absolute; inset: 0; z-index: -2; }
.brand-photos img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 1s, transform 6s ease-out; }
.brand-photos img.on { opacity: 1; transform: scale(1); }
.brand::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(10,18,14,.84) 0%, rgba(10,18,14,.6) 55%, rgba(10,18,14,.3) 100%); }
.brand-text { padding-bottom: clamp(40px, 6vw, 90px); }
.brand-text p { margin-top: 20px; max-width: 30em; color: #ECEFEA; font-size: clamp(17px, 1.4vw, 20px); }
.brand-pick { margin-top: 34px; display: grid; gap: 10px; max-width: 460px; }
.brand-pick button { display: flex; align-items: center; gap: 14px; text-align: left; padding: 10px 18px 10px 10px; border-radius: 18px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); transition: background .2s, color .2s; color: #fff; }
.brand-pick button:hover { background: rgba(255,255,255,.2); }
.brand-pick button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.brand-pick img { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.brand-pick b { display: block; font-size: 17px; line-height: 1.2; }
.brand-pick small { font-size: 13.5px; opacity: .78; }
.brand-phone { align-self: end; justify-self: center; width: min(360px, 100%); }
.brand-phone { container-type: inline-size; }
.brand-phone .phone { --r: 42px; --pad: 8px; position: relative; border-bottom: 0; border-radius: 42px 42px 0 0; aspect-ratio: 360 / 640; overflow: hidden; }
.brand-phone .phone img { position: absolute; left: 0; top: calc((100cqw - 16px) * .11); width: 100%; opacity: 0; transition: opacity .6s; }
.brand-phone .os { background: #3F4A40; color: #fff; transition: background-color .6s; }
.brand[data-brand="1"] .brand-phone .os { background: #1C1712; }
.brand[data-brand="2"] .brand-phone .os { background: #24272E; }
.brand-phone .phone img.on { opacity: 1; }
@media (max-width: 860px) {
  .brand { grid-template-columns: 1fr; min-height: 0; }
  .brand-phone { width: min(320px, 90%); }
}

/* ---- administrativo ---- */
.admin { padding: clamp(64px, 8vw, 120px) var(--gutter); }
.admin-head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px 60px; align-items: end; }
.admin-head p { color: var(--muted); }
.admin-grid { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr); gap: 20px; align-items: stretch; }
.cal, .result, .events { background: #fff; border-radius: 26px; padding: 24px; box-shadow: 0 0 0 1px var(--line); }
.cal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 16px; }
.cal-head b { font-family: "Bricolage Grotesque", sans-serif; font-size: 24px; letter-spacing: -0.02em; }
.auto { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--deep); background: #E4F5EC; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.auto::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-days span { aspect-ratio: 1; display: grid; place-items: center; font-size: 14px; border-radius: 10px; color: var(--muted); font-variant-numeric: tabular-nums; transition: background .3s, color .3s, transform .3s; }
.cal-days span.w { aspect-ratio: auto; font-size: 12px; font-weight: 600; padding-bottom: 4px; }
.cal-days span.has { background: #E4F5EC; color: var(--deep); font-weight: 700; }
.cal-days span.now { background: var(--deep); color: #fff; transform: scale(1.12); }
.events { display: grid; gap: 2px; padding: 12px; }
.events li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 16px; font-size: 15px; line-height: 1.32; color: var(--muted); transition: background .3s, color .3s; }
.events time { font-family: "Bricolage Grotesque", sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.events b { display: block; color: var(--ink); font-weight: 600; }
.events li.now { background: #E4F5EC; color: #2c4a3d; }
.result h3 { font-family: inherit; font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.total { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: clamp(38px, 3.6vw, 54px); letter-spacing: -0.03em; line-height: 1.15; margin: 4px 0 16px; font-variant-numeric: tabular-nums; }
.total small { font-family: "DM Sans", sans-serif; font-size: 14px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.row { margin-top: 12px; }
.row div { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.row div b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.row > span { display: block; height: 9px; margin-top: 5px; border-radius: 5px; background: #EFECE4; overflow: hidden; }
.row > span i { display: block; height: 100%; border-radius: 5px; background: var(--green); width: var(--w); transition: width 1.3s cubic-bezier(.2,.8,.2,1); }
.js .result:not(.seen) .row > span i { width: 0; }
@media (max-width: 1100px) { .admin-grid { grid-template-columns: 1fr 1fr; } .events { grid-column: 1 / -1; order: 3; } }
@media (max-width: 720px) { .admin-grid, .admin-head { grid-template-columns: minmax(0, 1fr); } }

/* ---- origem ---- */
.origin-photo { height: min(90svh, 760px); overflow: hidden; background: var(--forest); }
.origin-photo img { width: 100%; height: 118%; max-width: none; object-fit: cover; }
@supports (animation-timeline: view()) {
  .origin-photo img { animation: pan linear both; animation-timeline: view(); }
  @keyframes pan { from { transform: translateY(-14%); } to { transform: translateY(0); } }
}
.origin-quote { margin: clamp(-260px, -18vw, -110px) var(--gutter) 0; position: relative; background: var(--deep); color: #fff; border-radius: 30px; padding: clamp(28px, 4.4vw, 68px); }
.origin-quote blockquote { font-size: clamp(27px, 3.6vw, 56px); line-height: 1.06; max-width: 22em; }
.origin-body { padding: clamp(48px, 6vw, 90px) var(--gutter) clamp(64px, 8vw, 110px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 70px; align-items: start; }
.origin-body h2 { font-size: clamp(32px, 3.6vw, 52px); }
.origin-body p { margin-top: 16px; color: var(--muted); }
.steps { counter-reset: s; display: grid; gap: 0; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 56px 1fr; gap: 2px 14px; padding: 20px 0; border-top: 1px solid var(--line); }
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps li::before { content: counter(s); grid-row: span 2; font-family: "Bricolage Grotesque", sans-serif; font-size: 40px; font-weight: 700; line-height: 1; color: var(--deep); }
.steps b { font-family: "Bricolage Grotesque", sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.steps span { color: var(--muted); }
@media (max-width: 860px) { .origin-body { grid-template-columns: 1fr; } }

/* ---- contato: a última seção é a conversa que a página inteira prometeu ---- */
.contact { position: relative; isolation: isolate; overflow: hidden; background: var(--forest); color: #fff; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(32px, 6vw, 96px); padding: clamp(80px, 10vw, 150px) var(--gutter); min-height: 88svh; }
.contact-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.contact::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(8,30,22,.94) 0%, rgba(8,30,22,.82) 55%, rgba(8,30,22,.55) 100%); }
.contact h2 { font-size: clamp(42px, 6.2vw, 100px); font-weight: 800; line-height: 1; letter-spacing: -0.018em; }
.contact-text > p { margin-top: 22px; font-size: clamp(18px, 1.5vw, 21px); color: #E6EFEA; max-width: 28em; }
.contact .btn { margin-top: 34px; }
.ways { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px 44px; }
.ways dt { font-size: 14px; color: #B9CFC5; }
.ways dd a { font-size: 18px; font-weight: 600; text-underline-offset: 5px; overflow-wrap: anywhere; }
.talk { display: grid; gap: 10px; }
.talk .m { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.35; padding: 14px 18px; max-width: 92%; animation: none; box-shadow: 0 18px 36px -20px rgba(0,0,0,.6); border-radius: 6px 22px 22px 22px; justify-self: start; transition: opacity .45s, transform .45s; }
.talk .m.me { justify-self: end; border-radius: 22px 6px 22px 22px; }
.talk .m time { font-size: 12px; margin-top: 4px; }
.talk .who { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; margin-bottom: 4px; transition: opacity .45s; }
.talk .who i { width: 34px; height: 34px; border-radius: 10px; background: var(--deep); color: #fff; display: grid; place-items: center; flex: none; }
.talk .who svg { width: 22px; height: 22px; }
.js .contact:not(.seen) .talk .m { opacity: 0; transform: translateY(16px) scale(.97); }
.contact .talk .m:nth-of-type(1) { transition-delay: .2s; }
.contact .talk .m:nth-of-type(2) { transition-delay: 1.1s; }
.contact .talk .m:nth-of-type(3) { transition-delay: 2s; }
footer { background: var(--forest); color: #B9CFC5; font-size: 13px; text-align: center; padding: 12px var(--gutter); }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; min-height: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}