/* Sales demo.

   Two audiences, one file.

   The prospect opens the link on a phone or a laptop, and gets a real
   responsive page built the way the landing page is built: a tinted stage
   holding a white window, hairlines instead of shadows, radii that shrink as
   they nest (12 → 9 → 7 → 5), one accent colour, small dense labels inside the
   panel and larger calmer type outside it. WhatsApp's own colours exist only
   inside the handset, where they are the truth.

   The camera records `?rec=1`. There, body.rec turns .janela, .vidro and .tira
   into `display: contents` and the old fixed 1600x900 canvas comes back
   untouched, so the film is the film it always was. Anything structural is
   scoped to body:not(.rec) for that reason. */

body { background: #f6f8fa; overflow: hidden; }
[hidden] { display: none !important; }  /* .play/.capa/.fecho set display, which beats the UA rule */
#fit { position: fixed; inset: 0; display: grid; place-items: center; padding: clamp(0px, 1.8vw, 28px); }
.stage { width: 1600px; height: 900px; background: #fff; position: relative; transform-origin: center; display: flex; flex-direction: column; overflow: hidden; }

/* ---------------------------------------------------------------- a câmera */
body.rec .stage { transform: scale(1); }
body.rec #fit { padding: 0; }
body.rec .janela, body.rec .vidro, body.rec .tira { display: contents; }
body.rec .marca, body.rec .conectado, body.rec .statusbar, body.rec #linhaResposta { display: none; }

/* --------------------------------------------------------- o palco tingido */
body:not(.rec) .stage {
  width: min(100%, 1500px); height: 100%; background: #eaf0f7; border-radius: 12px;
  padding: clamp(12px, 1.3vw, 20px); gap: 11px;
}
/* a janela branca: uma hairline e uma sombra de 4%, como no site */
body:not(.rec) .janela {
  flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff;
  border: 1px solid #d9e2ec; border-radius: 9px; box-shadow: 0 12px 40px rgba(32,55,77,.05); overflow: hidden;
}

/* ------------------------------------------------------- a barra da janela */
.bar { height: 74px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 40px; border-bottom: 1px solid var(--line); }
.bar .logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.bar .mono { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 15px; letter-spacing: -.02em; }
.bar .nome { font-size: 20px; font-weight: 500; letter-spacing: -.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .sp { flex: 1; }
.bar .relogio { font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar .estado { font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 999px; background: var(--surface); color: var(--ink-3); transition: background .4s, color .4s; white-space: nowrap; }
.bar .estado.aberta { background: var(--success-bg); color: var(--success); }
.bar .verclinica { display: none; }
.bar .marca { font-size: 13.5px; letter-spacing: -.04em; }
.bar .conectado { font-size: 11px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bar .conectado::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

body:not(.rec) .bar { height: 58px; padding: 0 20px; gap: 11px; border-bottom-color: #e3e8ee; }
body:not(.rec) .bar .mono, body:not(.rec) .bar .logo { width: 27px; height: 27px; font-size: 11px; }
body:not(.rec) .bar .nome { font-size: 14px; }
body:not(.rec) .bar .relogio { font-size: 11.5px; }
body:not(.rec) .bar .estado { font-size: 10.5px; padding: 4px 10px; }

/* --------------------------------------------------- onde a história está
   O mesmo controle da landing page: segmentos de 1px, sem raio a não ser nas
   pontas, e o ativo em branco. Some quando a pessoa começa a escrever, porque
   aí não há mais história para percorrer. */
.passos { display: none; }
body:not(.rec) .passos { display: flex; align-items: center; flex: none; padding: 9px 20px; border-bottom: 1px solid #edf1f5; }
body:not(.rec).tentar .passos { display: none; }
body:not(.rec) .passos .passo {
  display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: #536477;
  border: 1px solid #cdd9e7; border-right: 0; padding: 7px 14px; background: transparent; white-space: nowrap;
  transition: background .25s, color .25s;
}
body:not(.rec) .passos .passo:first-child { border-radius: 6px 0 0 6px; }
body:not(.rec) .passos .passo:nth-child(3) { border-right: 1px solid #cdd9e7; border-radius: 0 6px 6px 0; }
body:not(.rec) .passos .passo span { font-size: 11px; color: #7d8ea3; font-variant-numeric: tabular-nums; }
body:not(.rec) .passos .passo b { font-weight: 400; }
body:not(.rec) .passos .passo.on { background: #fff; color: #164d97; box-shadow: inset 0 0 0 1px #cdd9e7; }
body:not(.rec) .passos .passo.on span { color: #5b82b4; }

/* ------------------------------------------------------------- os dois lados */
.corpo { flex: 1; display: grid; grid-template-columns: 470px 1fr; min-height: 0; }
body:not(.rec) .corpo { grid-template-columns: 1.1fr 1fr; }

/* ------------------------------------------------------------------ o celular */
.fone { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; min-width: 0; background: #ECE5DD; }
body:not(.rec) .fone { border-right: 0; background: #f7f9fb; display: grid; place-items: center; padding: clamp(10px, 1.3vw, 20px); }

/* o aparelho: a moldura é a única coisa escura da tela */
body:not(.rec) .vidro {
  width: min(100%, 344px); height: 100%; min-height: 0; min-width: 0; display: flex; flex-direction: column;
  background: #ECE5DD; border: 9px solid #121a22; border-radius: 30px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(20,32,48,.18), 0 0 0 1px #2b3745;
}
.statusbar { flex: none; background: #075E54; color: #fff; font-size: 10.5px; letter-spacing: .01em; padding: 6px 15px 1px; display: flex; align-items: center; justify-content: space-between; font-variant-numeric: tabular-nums; }
.statusbar .sb-ic { width: 30px; height: 7px; border-radius: 1px; opacity: .6; background: repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 6px); }

.fone-topo { background: #075E54; color: #fff; padding: 13px 20px; display: flex; align-items: center; gap: 12px; flex: none; }
.fone-topo .av { width: 40px; height: 40px; border-radius: 50%; background: #128C7E; display: grid; place-items: center; font-weight: 600; font-size: 13px; overflow: hidden; flex: none; }
.fone-topo .av img { width: 100%; height: 100%; object-fit: cover; }
.fone-topo .n { font-size: 15px; font-weight: 500; }
.fone-topo .s { font-size: 12px; opacity: .85; height: 15px; }
body:not(.rec) .fone-topo { padding: 9px 13px; gap: 10px; }
body:not(.rec) .fone-topo .av { width: 32px; height: 32px; font-size: 11.5px; }
body:not(.rec) .fone-topo .n { font-size: 13.5px; }
body:not(.rec) .fone-topo .s { font-size: 11px; height: 14px; }

.thread { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 18px 16px 22px; }
body:not(.rec) .thread { overflow-y: auto; overscroll-behavior: contain; padding: 13px 11px 15px; }
body:not(.rec) .thread .wa-b { font-size: 13.5px; }
.thread .wa-b { animation: sobe .28s ease-out; }
@keyframes sobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.selo8s { position: absolute; top: -11px; right: -6px; font-size: 12px; font-weight: 600; color: var(--blue); background: #fff; border: 1px solid #bcd4ee; padding: 2px 8px; border-radius: 999px; box-shadow: var(--sh-sm); }
.parou { align-self: center; display: flex; align-items: center; gap: 10px; width: 88%; color: #6b7780; font-size: 11px; margin: 6px 0 2px; }
.parou::before, .parou::after { content: ''; height: 1px; flex: 1; background: #cbd3d8; }
.digitando { display: inline-flex; gap: 3px; align-items: center; }
.digitando i { width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: .55; animation: pisca 1.1s infinite; }
.digitando i:nth-child(2) { animation-delay: .18s; } .digitando i:nth-child(3) { animation-delay: .36s; }
@keyframes pisca { 0%,60%,100% { opacity: .35; } 30% { opacity: 1; } }

/* o que a clínica vê, recortado dentro da conversa — a versão de celular do
   painel da direita, para a prova sobreviver numa tela de 390px */
.cutin { align-self: stretch; background: #fff; border: 1px solid #dfe5ec; border-radius: 7px; padding: 10px 12px; margin: 4px 0; animation: sobe .3s ease-out; }
.cutin .k { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #61748c; }
.cutin strong { display: block; font-size: 13px; font-weight: 500; margin-top: 3px; color: var(--ink-2); }
.cutin p { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* ------------------------------------------------- o lado da clínica */
.ops { padding: 26px 40px 0; display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; }
.ops > .overline { color: #616a72; }
body:not(.rec) .ops { background: #fcfdfe; border-left: 1px solid #e4e8ed; padding: 20px 20px 16px; overflow-y: auto; }
body:not(.rec) .ops > .overline { font-size: 9px; letter-spacing: .09em; color: #61748c; }

.cartao { background: #fff; border: 1px solid #dfe5ec; border-radius: 7px; margin-top: 14px; transition: border-color .35s; }
.cartao.aceso { border-color: #99b8dd; }
.cartao-topo { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #edf0f4; font-size: 12px; color: var(--ink-3); }
.consulta { display: flex; align-items: center; gap: 15px; padding: 18px 16px; }
.data-tile { border: 1px solid #e1e7ef; border-radius: 5px; text-align: center; width: 54px; flex: none; padding: 7px 0; }
.data-tile strong { display: block; font-size: 23px; font-weight: 400; line-height: 1.15; }
.data-tile span { font-size: 9px; letter-spacing: .08em; color: #65738a; text-transform: uppercase; }
.consulta .quem strong { font-size: 13px; font-weight: 500; }
.consulta .quem p { font-size: 11.5px; color: #73808b; margin-top: 3px; }
.consulta .estado { font-size: 10px; margin-top: 8px; display: inline-block; color: #3f6189; background: #edf3fa; padding: 3px 7px; border-radius: 3px; }
.vazio-agenda { padding: 22px 16px; color: var(--ink-4); font-size: 13px; font-style: italic; }

/* o painel do visitante é mais denso que o do filme */
body:not(.rec) .cartao-topo { padding: 11px 15px; font-size: 11px; }
body:not(.rec) .consulta { gap: 14px; padding: 16px 15px; }
body:not(.rec) .data-tile { width: 48px; padding: 6px 0; }
body:not(.rec) .data-tile strong { font-size: 22px; line-height: 1.2; }
body:not(.rec) .consulta .quem strong { font-size: 12px; }
body:not(.rec) .consulta .quem p { font-size: 10.5px; }
body:not(.rec) .consulta .estado { font-size: 9px; margin-top: 7px; padding: 3px 6px; }
body:not(.rec) .vazio-agenda { padding: 14px 15px; font-size: 11.5px; }

/* estado por opacidade, como no site: nada acende em verde */
.linha { display: flex; align-items: center; gap: 13px; margin-top: 18px; color: var(--ink-3); opacity: .4; transition: opacity .35s; }
.linha.ativa { opacity: 1; }
.linha .ic { width: 32px; height: 32px; border-radius: 7px; background: #eef2f6; border: 1px solid #e2e8ef; display: grid; place-items: center; flex: none; font-size: 14px; }
.linha.ativa .ic { background: #edf5ef; border-color: #cfe4d6; color: transparent; position: relative; }
.linha.ativa .ic::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #246644; font-size: 13px; }
.linha strong { font-size: 12px; font-weight: 500; color: #4a5967; display: block; }
.linha p { font-size: 11px; color: var(--ink-3); margin-top: 2px; max-width: 250px; }

body:not(.rec) .linha { gap: 12px; margin-top: 17px; opacity: .48; }
body:not(.rec) .linha .ic { width: 30px; height: 30px; font-size: 13px; }
body:not(.rec) .linha strong { font-size: 11.5px; }
body:not(.rec) .linha p { font-size: 10.5px; line-height: 1.5; }

.eventos { margin-top: auto; border-top: 1px solid #e6eaf0; padding: 12px 0 18px; }
body:not(.rec) .eventos { margin-top: 20px; padding: 11px 0 0; }
.eventos p { display: flex; align-items: center; gap: 9px; font-size: 10.5px; color: #65758a; margin: 6px 0; animation: sobe .3s ease-out; }
body:not(.rec) .eventos p { font-size: 9.5px; }
.eventos p b { width: 4px; height: 4px; border-radius: 50%; background: #668fbb; flex: none; }
.eventos p time { margin-left: auto; color: #8491a0; font-variant-numeric: tabular-nums; }

/* o botão principal do site: quase preto, 6px, rótulo e seta bem separados */
.verfecho { display: none; }
body.tentar .verfecho {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  margin-top: auto; flex: none; min-height: 52px; padding: 0 20px;
  background: #272c31; color: #fff; border-radius: 6px; font-size: 14px; font-weight: 500;
  transition: background .2s, transform .2s;
}
body.tentar .verfecho::after { content: '→'; font-size: 15px; }
body.tentar .verfecho:hover { background: var(--blue); transform: translateY(-1px); }

/* --------------------------------------------------------------- narração */
.frase { flex: none; height: 88px; display: flex; align-items: center; padding: 0 40px; border-top: 1px solid var(--line); font-size: 21px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.frase span { opacity: 0; transition: opacity .2s; }
.frase span.on { opacity: 1; }
.rodape { position: absolute; left: 40px; bottom: 14px; font-size: 11.5px; color: #9aa4ac; }

/* fora da janela, como a legenda do site fica fora do palco */
body:not(.rec) .tira { flex: none; display: flex; align-items: center; gap: 16px; padding: 0 4px; min-height: 24px; }
body:not(.rec) .frase { flex: 1; height: auto; padding: 0; border-top: 0; font-size: clamp(13.5px, 1.05vw, 16px); font-weight: 400; letter-spacing: 0; color: #4d5966; line-height: 1.45; }
body:not(.rec) .rodape { position: static; font-size: 10.5px; color: #8b949c; flex: none; }

/* ------------------------------------------------------------------- aviso */
.aviso { position: absolute; top: 96px; right: 40px; width: 380px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-xl); padding: 15px 17px; opacity: 0; visibility: hidden; transform: translateY(-24px); transition: transform .5s cubic-bezier(.2,.8,.3,1), opacity .35s; z-index: 5; }
.aviso.on { transform: none; opacity: 1; visibility: visible; }
.aviso .cab { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3); margin-bottom: 7px; }
.aviso .cab b { color: var(--primary); font-weight: 600; }
.aviso h4 { font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.aviso p { font-size: 12.5px; line-height: 1.5; color: #55606a; }
body:not(.rec) .aviso { top: 16px; right: 16px; width: min(330px, calc(100% - 32px)); border-radius: 9px; box-shadow: 0 14px 36px rgba(32,55,77,.13); padding: 13px 15px; }
body:not(.rec) .aviso h4 { font-size: 12.5px; }
body:not(.rec) .aviso p { font-size: 11.5px; }

/* --------------------------------------------------------- sua vez de escrever */
.compose { flex: none; display: none; flex-direction: column; gap: 8px; min-width: 0; padding: 11px 12px calc(11px + env(safe-area-inset-bottom)); background: #f0f2f5; border-top: 1px solid #e3e6ea; }
body.tentar .compose { display: flex; }
.convite { font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.convite b { font-weight: 600; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.chips button { background: #fff; border: 1px solid #dbe1e7; color: #46525e; font-size: 11.5px; padding: 6px 10px; border-radius: 999px; line-height: 1.2; transition: border-color .15s, color .15s; }
.chips button:hover { border-color: var(--primary); color: var(--primary); }
.chips button.usada { color: var(--ink-4); border-color: #e7ebef; }
.escrever { display: flex; gap: 8px; align-items: center; }
.escrever input { flex: 1; min-width: 0; border: 1px solid #dfe3e7; background: #fff; border-radius: 999px; padding: 10px 15px; font-size: 15px; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
/* o anel global de 3px fica grosso demais num campo em pílula */
.escrever input:focus, .escrever input:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(42,120,214,.12); }
.escrever input:disabled { opacity: .6; }
.escrever button { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #128C7E; color: #fff; display: grid; place-items: center; transition: background .15s, opacity .15s; }
.escrever button:hover { background: #0f7a6d; }
.escrever button:disabled { opacity: .45; }
#fit button:focus-visible, #fit a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------------------------------------------------------------- camadas */
.capa, .fecho { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #fff; transition: opacity .45s; padding: 24px; text-align: center; }
body:not(.rec) .capa, body:not(.rec) .fecho { border-radius: 12px; }
.capa img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; }
.capa .mono { width: 92px; height: 92px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-size: 32px; font-weight: 600; }
.capa h1 { font-size: clamp(27px, 3.3vw, 46px); font-weight: 400; letter-spacing: -.042em; line-height: 1.1; text-wrap: balance; }
.capa p { font-size: clamp(15px, 1.3vw, 17px); color: var(--ink-3); max-width: 46ch; line-height: 1.6; }
.capa .comecar { background: #272c31; color: #fff; font-size: 15px; font-weight: 500; min-height: 54px; padding: 0 24px; border-radius: 6px; display: inline-flex; align-items: center; gap: 28px; transition: background .2s, transform .2s; }
.capa .comecar::after { content: '→'; }
.capa .comecar:hover { background: var(--blue); transform: translateY(-2px); }
.capa .nota { font-size: 12.5px; color: var(--ink-4); margin-top: -6px; }
body.rec .capa .comecar, body.rec .capa .nota { display: none; }
body.rec .capa h1 { font-weight: 500; }

.fecho { background: #14243a; color: #fff; justify-content: center; gap: 0; overflow-y: auto; }
.fecho .linhas { width: min(620px, 100%); }
.fecho .l { display: flex; gap: 22px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.12); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; text-align: left; }
.fecho .l.on { opacity: 1; transform: none; }
.fecho .l time { font-size: 14px; color: #8fb8e8; width: 96px; flex: none; font-variant-numeric: tabular-nums; }
.fecho .l span { font-size: clamp(15px, 1.25vw, 19px); }
.fecho .preco { width: min(620px, 100%); margin-top: 30px; font-size: 15px; line-height: 1.7; color: #c6d2e0; opacity: 0; transition: opacity .5s; text-align: left; }
.fecho .preco.on { opacity: 1; }
.fecho .preco b { color: #fff; font-weight: 500; }
.fecho .site { margin-top: 18px; font-size: 13px; color: #8fb8e8; }
.fecho .ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; width: min(620px, 100%); }
.fecho .ctas a { font-size: 15px; font-weight: 500; min-height: 54px; display: inline-flex; align-items: center; justify-content: center; padding: 0 26px; border-radius: 6px; }
.fecho .ctas .zap { background: #25D366; color: #07301a; }
.fecho .ctas .cal { background: transparent; color: #cfe0f3; border: 1px solid rgba(255,255,255,.35); }
.fecho .voltar { margin-top: 18px; font-size: 13px; color: #8fb8e8; background: none; }

.play { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(255,255,255,.86); }
.play button { background: #272c31; color: #fff; font-size: 15px; font-weight: 500; min-height: 54px; padding: 0 24px; border-radius: 6px; transition: background .2s, transform .2s; }
.play button:hover { background: var(--blue); transform: translateY(-2px); }
.play .dica { position: absolute; bottom: 90px; font-size: 13px; color: var(--ink-3); }

/* os controles da história: invisíveis E não clicáveis até serem oferecidos */
.controles { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 25; }
.controles.on { opacity: 1; pointer-events: auto; }
.controles button { background: rgba(20,36,58,.85); color: #fff; font-size: 12px; padding: 7px 14px; border-radius: 6px; }
body.rec .controles { display: none; }

.pular { flex: none; margin-left: auto; background: transparent; color: #7a8896; font-size: 12.5px; padding: 6px 2px; }
.pular:hover { color: var(--blue); }
body.rec .pular { display: none; }

/* ---------------------------------------------------------------- celulares */
@media (max-width: 760px) {
  body:not(.rec) #fit { padding: 0; }
  body:not(.rec) .stage { width: 100%; background: #fff; border-radius: 0; padding: 0; gap: 0; }
  body:not(.rec) .janela { border: 0; border-radius: 0; box-shadow: none; }
  body:not(.rec) .bar { height: 54px; padding: 0 13px; gap: 9px; }
  body:not(.rec) .bar .marca, body:not(.rec) .bar .conectado, body:not(.rec) .bar .relogio { display: none; }
  body:not(.rec) .bar .estado { display: none; }
  body:not(.rec) .bar .verclinica { display: block; margin-left: auto; background: var(--surface); color: #46525e; font-size: 12px; font-weight: 500; padding: 7px 12px; border-radius: 999px; }

  /* uma coluna: no celular a conversa é o produto */
  body:not(.rec) .corpo { grid-template-columns: 1fr; }
  body:not(.rec) .fone { padding: 0; background: transparent; display: flex; }
  body:not(.rec) .vidro { width: 100%; min-width: 0; border: 0; border-radius: 0; box-shadow: none; }
  body:not(.rec) .statusbar { display: none; }
  body:not(.rec) .thread .wa-b { font-size: 15px; }
  body:not(.rec) .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  body:not(.rec) .chips::-webkit-scrollbar { display: none; }
  body:not(.rec) .chips button { flex: none; }
  body:not(.rec) .escrever input { font-size: 16px; }   /* abaixo disso o iOS dá zoom */

  /* o painel da clínica vira uma gaveta que sobe */
  body:not(.rec) .ops { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40; background: #fff; border-left: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -12px 40px rgba(16,32,56,.22); padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); max-height: 78vh; overflow-y: auto; transform: translateY(102%); transition: transform .34s cubic-bezier(.2,.8,.3,1); }
  body:not(.rec).sheet .ops { transform: none; }
  body:not(.rec) .ops::before { content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 38px; height: 4px; border-radius: 2px; background: #dfe4ea; }
  body:not(.rec) .eventos { margin-top: 16px; }
  body:not(.rec) .aviso { position: fixed; top: 62px; left: 12px; right: 12px; width: auto; z-index: 41; }

  body:not(.rec) .passos { padding: 7px 13px; }
  body:not(.rec) .passos .passo { font-size: 11.5px; padding: 6px 10px; gap: 0; }
  body:not(.rec) .passos .passo span { display: none; }
  body:not(.rec) .tira { padding: 9px 13px; background: #f4f6f8; border-top: 1px solid #e6eaee; }
  body:not(.rec) .frase { font-size: 13.5px; }
  body:not(.rec) .rodape { display: none; }
  body:not(.rec) .capa h1 { font-size: 26px; }
  body:not(.rec) .fecho { justify-content: flex-start; padding-top: 36px; }
  body:not(.rec) .fecho .l time { width: 72px; font-size: 12.5px; }
  body:not(.rec) .fecho .ctas a { flex: 1; }
}

/* a sombra da gaveta */
.sombra { position: fixed; inset: 0; background: rgba(12,22,36,.42); z-index: 39; opacity: 0; pointer-events: none; transition: opacity .3s; }
body.sheet .sombra { opacity: 1; pointer-events: auto; }