/* Presq Agency · telas.css
   O iPhone desenhado (iPhone 15 Pro, largura/altura 0,482, IDENTIDADE seção 18) e as telas de app.
   Escopado em .iphone, .tela, .tela-*, .selo e .tela-janela. Usa os tokens da direção de arte com reserva,
   então funciona antes da base do site.
   Medidas: a interface é desenhada em pontos de iOS (tela de 393 x 852 pt). --pt0 é 1 pt na escala do aparelho;
   --pt é 1 pt vezes o "zoom" do app (--z), que cresce sozinho quando o aparelho é pequeno
   (como se o celular estivesse mais perto), pra o que importa continuar legível em 212 px. */

/* ---------------- o aparelho ---------------- */
.iphone{
  position:relative;
  width:var(--iphone-w,400px);
  aspect-ratio:482 / 1000;
  flex:none;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
}
.iphone-corpo{
  position:absolute; inset:0;
  box-sizing:border-box;
  padding:calc(var(--iphone-w,400px) * .025);
  border-radius:calc(var(--iphone-w,400px) * .15);
  background:#0E0E10;
  box-shadow:
    inset 0 0 0 max(1px, calc(var(--iphone-w,400px) * .005)) #6C6C71,
    inset 0 0 0 max(1.5px, calc(var(--iphone-w,400px) * .0075)) #2A2A2D,
    0 calc(var(--iphone-w,400px) * .1) calc(var(--iphone-w,400px) * .22) rgba(17,17,19,.20),
    0 calc(var(--iphone-w,400px) * .01) calc(var(--iphone-w,400px) * .03) rgba(17,17,19,.14);
}
/* brilho menta atrás (o único permitido): <div class="iphone iphone--brilho"> */
.iphone--brilho::before{
  /* sombra em vez de fundo: o brilho não cria rolagem lateral no celular */
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:8% 6%; border-radius:32%;
  box-shadow:0 0 calc(var(--iphone-w,400px) * .9) calc(var(--iphone-w,400px) * .32) var(--brilho-cor, rgba(61,220,151,.13));
}
.iphone--sem-sombra .iphone-corpo{box-shadow:inset 0 0 0 max(1px, calc(var(--iphone-w,400px) * .005)) #6C6C71, inset 0 0 0 max(1.5px, calc(var(--iphone-w,400px) * .0075)) #2A2A2D}

.iphone-tela,.tela-janela{container-type:inline-size}
.iphone,.tela-janela,.tela{--pt0:calc(100cqw / 393)}
.iphone-tela{
  position:relative; width:100%; height:100%;
  border-radius:calc(var(--iphone-w,400px) * .13 - var(--iphone-w,400px) * .025);
  overflow:hidden; background:#fff;
  -webkit-mask-image:-webkit-radial-gradient(white, black); /* recorte do canto no Safari durante a troca */
  isolation:isolate;
}
.iphone-tela > video,.iphone-tela > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}

/* barra de status: 9:41, ilha dinâmica, sinal, wi-fi e bateria (sempre HTML, por cima da tela ou do vídeo) */
.iphone-status{
  position:absolute; z-index:5; left:0; right:0; top:0;
  height:calc(var(--pt0)*54); box-sizing:border-box;
  padding:calc(var(--pt0)*11) calc(var(--pt0)*10) 0 calc(var(--pt0)*14);
  display:flex; align-items:flex-start;
  color:var(--status-cor,#000); pointer-events:none;
}
.iphone-hora,.iphone-sinais{flex:1; height:calc(var(--pt0)*37); display:flex; align-items:center; justify-content:center}
.iphone-hora{
  font:600 calc(var(--pt0)*17)/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}
.iphone-sinais{width:calc(var(--pt0)*78); height:calc(var(--pt0)*13); flex:1; margin-top:calc(var(--pt0)*12)}
.iphone-ilha{flex:none; width:calc(var(--pt0)*126); height:calc(var(--pt0)*37); border-radius:calc(var(--pt0)*19); background:#000}
.iphone-inicio{
  position:absolute; z-index:5; left:50%; bottom:calc(var(--pt0)*8);
  width:calc(var(--pt0)*139); height:max(3px, calc(var(--pt0)*5)); margin-left:calc(var(--pt0)*-69.5);
  border-radius:calc(var(--pt0)*3); background:var(--status-cor,#000); pointer-events:none;
}
/* com vídeo: o 9:41 e a barra de início já estão desenhados no vídeo; fica só a ilha */
.iphone--video .iphone-hora,.iphone--video .iphone-sinais,.iphone--video .iphone-inicio{visibility:hidden}
.iphone[data-status="claro"]{--status-cor:#fff}

/* ---------------- base comum das telas ---------------- */
.tela{
  --z:1;
  --pt:calc(100cqw / 393 * var(--z));
  position:absolute; inset:0;
  display:flex; flex-direction:column; overflow:hidden;
  box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  font-size:calc(var(--pt)*17); line-height:1.25; color:#000;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  text-align:left; letter-spacing:normal; text-wrap:wrap; /* o app quebra a linha como o app de verdade */
}
.tela *,.tela *::before,.tela *::after{box-sizing:border-box}
.tela :where(div,span,b,small,i,img,svg){margin:0; max-width:none}
.tela b{font-weight:600}
.tela .ic{display:block; flex:none}
.tela-janela{position:relative; overflow:hidden}
.tela-janela .tela{position:absolute}
/* zoom do app conforme o tamanho do aparelho */
@container (max-width:300px){ .tela{--z:var(--z-med,1.22)} }
@container (max-width:232px){ .tela{--z:var(--z-peq,1.42)} }
/* aparelho muito pequeno (até 180 px de tela, ex.: o celular de 140 a 190 px no celular): o app chega mais perto
   (texto principal perto de 10 px). Abaixo disso, use .iphone-recorte com o aparelho a 260 px ou mais. */
@container (max-width:180px){ .tela{--z:var(--z-mini,1.75)} }
/* listas e painéis com colunas (escritório, painel, Google, busca) cortariam as linhas nesse zoom: ficam no zoom pequeno */
.tela-escritorio,.tela-painel,.tela-google,.tela-busca{--z-mini:var(--z-peq,1.42)}

.av-loja{display:grid; place-items:center; border-radius:50%; background:#DCE5E0; flex:none}

/* estado de animação: sem classe = estado final, COMPLETO (é o pôster e o quadro parado);
   .tocando = a sequência tocando uma vez, no máximo 2 s, terminando no estado final. */
/* .armada (com .tocando): a tela que nasceu abaixo da dobra fica parada no PRIMEIRO quadro da sequência até tocar.
   As animações são as mesmas do .tocando, todas com fill "both", então o quadro parado é o 0%. */
.armada,.armada *,.armada *::before,.armada *::after{animation-play-state:paused!important}

/* ---------------- WhatsApp (iOS, claro) ---------------- */
.tela-whatsapp{background:#EFEAE2}
.wa-topo{flex:none; background:#F6F6F6; padding-top:calc(var(--pt0)*54); border-bottom:1px solid #DADADA; position:relative; z-index:2}
.wa-cab{height:calc(var(--pt)*52); display:flex; align-items:center; gap:calc(var(--pt)*8); padding:0 calc(var(--pt)*12) 0 calc(var(--pt)*4)}
.wa-quem{flex:1; min-width:0; display:flex; flex-direction:column; gap:calc(var(--pt)*1); padding-left:calc(var(--pt)*2)}
.wa-nome{font-size:calc(var(--pt)*17); font-weight:600; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* cinzas do app um tom mais escuros que o original, pra passar de 4,5:1 (online 4,7:1 no topo; hora 5:1 no balão verde) */
.wa-sub{position:relative; display:block; font-size:calc(var(--pt)*12.5); line-height:1.2; color:#6E6E73; white-space:nowrap}
.wa-dig{position:absolute; left:0; top:0; background:#F6F6F6; padding-right:calc(var(--pt)*20); opacity:0}
.wa-ics{display:flex; align-items:center; gap:calc(var(--pt)*20)}
@container (max-width:232px){ .wa-ics{gap:calc(var(--pt)*14)} .wa-cab{gap:calc(var(--pt)*6)} }
.wa-chat{
  flex:1; min-height:0; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--pt)*8) calc(var(--pt)*2) calc(var(--pt)*6);
  background:#EFEAE2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='204' height='204' viewBox='0 0 204 204'%3E%3Cpath d='M11 8m-4 2l2-5 2 5 2-5M40 7m-4-1c0 3 8 3 8 0M75 11m-3 0a3 3 0 1 0 6 0a3 3 0 1 0-6 0M116 9m-3 0a3 3 0 1 0 6 0a3 3 0 1 0-6 0M143 12m-4 2l2-5 2 5 2-5M177 9m-3-3l6 6m0-6l-6 6M31 46m-3 0a3 3 0 1 0 6 0a3 3 0 1 0-6 0M58 43m-3 0a3 3 0 1 0 6 0a3 3 0 1 0-6 0M97 40m-3-3h6v6h-6zM125 48m-4 1c2-4 6-4 8 0M163 46m-4 1c2-4 6-4 8 0M201 41m-3 2l3-6 3 6zM14 76m-3-3l6 6m0-6l-6 6M43 79m-3-3l6 6m0-6l-6 6M82 75m-3 0a3 3 0 1 0 6 0a3 3 0 1 0-6 0M111 81m-4-1c0 3 8 3 8 0M148 79m-3 0h6m-3-3v6M183 79m-3 2l3-6 3 6zM26 110m-3-3h6v6h-6zM58 112m-4-1c0 3 8 3 8 0M98 113m-3 0h6m-3-3v6M129 109m-3-3l6 6m0-6l-6 6M167 114m-4 1c2-4 6-4 8 0M198 110m-3 0h6m-3-3v6M12 142m-3-3l6 6m0-6l-6 6M48 147m-6 0q3-4 6 0t6 0M79 149m-3 0h6m-3-3v6M109 143m-3 2l3-6 3 6zM149 143m-3 0a3 3 0 1 0 6 0a3 3 0 1 0-6 0M180 149m-3 2l3-6 3 6zM29 181m-3 0a3 3 0 1 0 6 0a3 3 0 1 0-6 0M64 181m-4 1c2-4 6-4 8 0M92 183m-3 0a3 3 0 1 0 6 0a3 3 0 1 0-6 0M128 180m-4 1c2-4 6-4 8 0M162 182m-4 2l2-5 2 5 2-5M200 177m-4 1c2-4 6-4 8 0' fill='none' stroke='%23D6CEC0' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round' opacity='.75'/%3E%3C/svg%3E") repeat;
  background-size:calc(var(--pt0)*204) calc(var(--pt0)*204);
}
.wa-dia{
  align-self:center; margin-bottom:calc(var(--pt)*6);
  background:#fff; border-radius:calc(var(--pt)*7); padding:calc(var(--pt)*3) calc(var(--pt)*9);
  font-size:calc(var(--pt)*12.5); font-weight:500; color:#54656F;
  box-shadow:0 1px .5px rgba(11,20,26,.1);
}
.wa-linha{display:grid; grid-template-rows:1fr}
.wa-in{min-height:0; overflow:hidden; display:flex; padding:calc(var(--pt)*3) calc(var(--pt)*8) calc(var(--pt)*3)}
.wa-linha.sai .wa-in{justify-content:flex-end}
.wa-b{
  position:relative; max-width:80%;
  padding:calc(var(--pt)*6) calc(var(--pt)*8) calc(var(--pt)*6) calc(var(--pt)*9);
  border-radius:calc(var(--pt)*8);
  background:#fff; color:#111B21;
  font-size:calc(var(--pt)*17); line-height:1.29;
  box-shadow:0 1px .5px rgba(11,20,26,.13);
  overflow-wrap:anywhere;
}
.wa-linha.entra .wa-b{border-top-left-radius:0}
.wa-linha.sai .wa-b{border-top-right-radius:0; background:#D9FDD3}
.wa-b::before{
  content:""; position:absolute; top:0; width:calc(var(--pt)*8); height:calc(var(--pt)*13); background:inherit;
  -webkit-mask:var(--rab) no-repeat 0 0 / 100% 100%; mask:var(--rab) no-repeat 0 0 / 100% 100%;
}
.wa-linha.entra .wa-b::before{left:calc(var(--pt)*-8); --rab:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M8 0H1.6C.2 0-.3 1.7.8 2.5L8 13z'/%3E%3C/svg%3E")}
.wa-linha.sai .wa-b::before{right:calc(var(--pt)*-8); --rab:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M0 0h6.4c1.4 0 1.9 1.7.8 2.5L0 13z'/%3E%3C/svg%3E")}
.wa-tx{display:block}
.wa-esp{display:inline-block; width:calc(var(--pt)*40); height:1px}
.wa-linha.sai .wa-esp{width:calc(var(--pt)*60)}
.wa-meta{
  position:absolute; right:calc(var(--pt)*8); bottom:calc(var(--pt)*5);
  display:flex; align-items:center; gap:calc(var(--pt)*3);
  font-size:calc(var(--pt)*11); line-height:1; color:#5B6B74; font-variant-numeric:tabular-nums;
}
.wa-tiques{width:calc(var(--pt)*16); height:calc(var(--pt)*11); color:#53BDEB; display:block}
.wa-link{display:flex; align-items:center; gap:calc(var(--pt)*9); margin:calc(var(--pt)*-1) calc(var(--pt)*-3) calc(var(--pt)*6) calc(var(--pt)*-4); padding:calc(var(--pt)*7); border-radius:calc(var(--pt)*6); background:#F0F2F5}
.wa-link-ic{width:calc(var(--pt)*44); height:calc(var(--pt)*44); flex:none; border-radius:calc(var(--pt)*6); background:#1DAA61; display:grid; place-items:center}
.wa-link-tx{display:flex; flex-direction:column; gap:calc(var(--pt)*2); min-width:0}
.wa-link-tx b{font-size:calc(var(--pt)*15); line-height:1.2; color:#111B21}
.wa-link-tx small{font-size:calc(var(--pt)*12); line-height:1.2; color:#667781; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wa-base{
  flex:none; display:flex; align-items:center; gap:calc(var(--pt)*12);
  padding:calc(var(--pt)*7) calc(var(--pt)*12) calc(calc(var(--pt0)*34) + calc(var(--pt)*3));
  background:#F6F6F6; border-top:1px solid #DADADA;
}
.wa-campo{flex:1; height:calc(var(--pt)*34); border-radius:calc(var(--pt)*17); background:#fff; border:1px solid #DEDEDE; display:flex; align-items:center; justify-content:flex-end; padding:0 calc(var(--pt)*8)}

/* WhatsApp tocando: cada balão entra na hora dele (--a); "digitando…" no topo antes da resposta; tiques ficam azuis quando o negócio lê */
/* a linha nunca anima a altura (CLS); o lugar do balão já está reservado e ele entra por cima */
.tela-whatsapp .wa-chat{contain:layout paint}
.tela-whatsapp.tocando .wa-linha .wa-b{animation:wa-balao .36s cubic-bezier(.2,.85,.3,1) var(--a,0s) both}
.tela-whatsapp .wa-linha.entra .wa-b{transform-origin:0 100%}
.tela-whatsapp .wa-linha.sai .wa-b{transform-origin:100% 100%}
.tela-whatsapp.tocando .wa-dig{animation:wa-dig var(--d,1s) linear var(--a,0s) both}
.tela-whatsapp.tocando .wa-tiques{animation:wa-lido .25s ease var(--t,0s) both}
.tela-whatsapp.tocando .wa-dia:not(.wa-velha){animation:wa-fade .25s ease both}
.tela-whatsapp .wa-velha .wa-tiques{color:#53BDEB}
.tela-whatsapp.tocando .wa-velha,.tela-whatsapp.tocando .wa-velha .wa-b,.tela-whatsapp.tocando .wa-velha .wa-tiques{animation:none}
.tela-whatsapp.tocando .wa-ja .wa-b,.tela-whatsapp.tocando .wa-dia:not(.wa-velha){animation:none}
.tela-whatsapp .wa-dia.wa-velha{margin-top:0}
.tela-whatsapp .wa-linha.wa-velha + .wa-dia{margin-top:calc(var(--pt)*6)}
/* a conversa de antes (lembrete da véspera) só entra quando o aparelho tem espaço: nunca empurra a pergunta pra fora */
@container (max-width:232px){ .tela-whatsapp .wa-velha{display:none} .tela-whatsapp .wa-chat{padding-bottom:calc(var(--pt)*20)} }
@keyframes wa-entra{from{grid-template-rows:0fr}to{grid-template-rows:1fr}}
@keyframes wa-balao{from{opacity:0; transform:translateY(calc(var(--pt)*10)) scale(.94)}to{opacity:1; transform:none}}
@keyframes wa-dig{0%{opacity:0}12%{opacity:1}88%{opacity:1}100%{opacity:0}}
@keyframes wa-lido{from{color:#8696A0}to{color:#53BDEB}}
@keyframes wa-fade{from{opacity:0}to{opacity:1}}

/* ---------------- Instagram (iOS, claro) ---------------- */
.tela-instagram{background:#fff; --z-peq:1.12; --z-med:1.08}
.ig-topo{flex:none; padding-top:calc(var(--pt0)*54); background:#fff; position:relative; z-index:2}
.ig-barra{height:calc(var(--pt)*44); display:flex; align-items:center; justify-content:space-between; padding:0 calc(var(--pt)*16) 0 calc(var(--pt)*14)}
.ig-marca{width:calc(var(--pt)*99); height:calc(var(--pt)*37); display:block}
.ig-ics{display:flex; align-items:center; gap:calc(var(--pt)*22)}
.ig-feed{flex:1; min-height:0; overflow:hidden; position:relative}
.ig-post-cab{height:calc(var(--pt)*54); display:flex; align-items:center; gap:calc(var(--pt)*10); padding:0 calc(var(--pt)*12) 0 calc(var(--pt)*10)}
.ig-aro{width:calc(var(--pt)*40); height:calc(var(--pt)*40); border-radius:50%; padding:calc(var(--pt)*2); flex:none; background:linear-gradient(45deg,#FEDA75 0%,#FA7E1E 30%,#D62976 60%,#962FBF 85%,#4F5BD5 100%)}
.ig-aro .av-loja{width:100% !important; height:100% !important; border:calc(var(--pt)*2) solid #fff}
.ig-user{flex:1; font-size:calc(var(--pt)*14); font-weight:600}
.ig-midia{position:relative; width:100%; aspect-ratio:4 / 5; overflow:hidden; background:#EFEFEF}
.ig-trilho{display:flex; height:100%; will-change:auto}
.ig-trilho img{flex:none; width:100%; height:100%; object-fit:cover; display:block}
.ig-cont{position:absolute; top:calc(var(--pt)*12); right:calc(var(--pt)*12); display:grid; background:rgba(18,18,18,.72); color:#fff; border-radius:calc(var(--pt)*13); padding:calc(var(--pt)*4) calc(var(--pt)*9); font-size:calc(var(--pt)*12); font-weight:500; line-height:1.2; font-variant-numeric:tabular-nums}
.ig-cont span{grid-area:1/1}
.ig-cont span + span{opacity:0}
.ig-coracao-g{position:absolute; left:50%; top:50%; width:calc(var(--pt)*92); height:calc(var(--pt)*92); margin:calc(var(--pt)*-46) 0 0 calc(var(--pt)*-46); opacity:0; filter:drop-shadow(0 calc(var(--pt)*2) calc(var(--pt)*10) rgba(0,0,0,.25)); pointer-events:none}
.ig-acoes{height:calc(var(--pt)*44); display:flex; align-items:center; padding:0 calc(var(--pt)*12)}
.ig-esq{flex:1; display:flex; align-items:center; gap:calc(var(--pt)*15)}
.ig-dir{flex:1; display:flex; justify-content:flex-end}
.ig-curtir{position:relative; display:block}
.ig-curtir .ic + .ic{position:absolute; left:0; top:0}
.ig-pontos{position:relative; display:flex; gap:calc(var(--pt)*4)}
.ig-pontos i{width:calc(var(--pt)*6); height:calc(var(--pt)*6); border-radius:50%; background:#C7C7CC; display:block}
.ig-pontos .ig-ponto-on{position:absolute; left:0; top:0; background:#0095F6}
.ig-legenda{padding:calc(var(--pt)*2) calc(var(--pt)*12) 0; font-size:calc(var(--pt)*14); line-height:1.3}
.ig-mais{color:#737373}
.ig-nav{
  flex:none; display:flex; align-items:center; justify-content:space-around;
  padding:calc(var(--pt)*12) calc(var(--pt)*6) calc(calc(var(--pt0)*34) + calc(var(--pt)*10));
  background:#fff; border-top:1px solid #DBDBDB; position:relative; z-index:2;
}
.ig-nav-av .av-loja{border:calc(var(--pt)*1) solid #DBDBDB}

/* Instagram tocando (2 s): o post sobe no feed e recebe a curtida com dois toques. Parado: post inteiro, coração vermelho */
.tela-instagram.tocando .ig-post{animation:ig-sobe .5s cubic-bezier(.16,1,.3,1) .05s both}
.tela-instagram.tocando .ig-coracao-g{animation:ig-pulo .65s cubic-bezier(.2,.9,.3,1.2) .55s both}
.tela-instagram.tocando .ig-curtido{animation:ig-curte .35s cubic-bezier(.3,1.6,.5,1) .6s both}
@keyframes ig-sobe{from{transform:translateY(calc(var(--pt)*120)); opacity:0}to{transform:none; opacity:1}}
@keyframes ig-pulo{0%{opacity:0; transform:scale(.2)}22%{opacity:1; transform:scale(1.1)}36%{transform:scale(.95)}48%{transform:scale(1)}74%{opacity:1; transform:scale(1)}100%{opacity:0; transform:scale(.9) translateY(calc(var(--pt)*-24))}}
@keyframes ig-curte{from{opacity:0; transform:scale(.3)}to{opacity:1; transform:scale(1)}}

/* capa genérica de exemplo (decisão 10): Papel, número em Verde, título em Tinta, perfil seunegocio */
.ig-capa{flex:none; width:100%; height:100%; position:relative; background:#F5F5F2; color:#111113; font-family:Geist,-apple-system,sans-serif; overflow:hidden}
.ig-capa-in{position:absolute; inset:calc(var(--pt)*26) calc(var(--pt)*26) calc(var(--pt)*24); display:flex; flex-direction:column}
.ig-capa-num{font-size:calc(var(--pt)*118); font-weight:700; letter-spacing:-.06em; line-height:.86; color:#0A7F5C}
.ig-capa-tit{margin-top:calc(var(--pt)*12); font-size:calc(var(--pt)*31); font-weight:700; letter-spacing:-.04em; line-height:1.04; text-wrap:balance}
.ig-capa-pe{margin-top:auto; display:flex; justify-content:space-between; align-items:center; font-family:"Geist Mono",ui-monospace,monospace; font-size:calc(var(--pt)*11); color:#5E5E66; letter-spacing:.02em; text-transform:uppercase}
.ig-capa-pe i{display:inline-block; width:calc(var(--pt)*7); height:calc(var(--pt)*7); border-radius:50%; background:#0A7F5C; margin-right:calc(var(--pt)*6)}
.ig-capa-barras{margin-top:calc(var(--pt)*18); display:grid; gap:calc(var(--pt)*10)}
.ig-capa-barras i{display:block; height:calc(var(--pt)*11); border-radius:calc(var(--pt)*6); background:#DCDCD6}

/* ---------------- Google (busca no celular) ---------------- */
.tela-google{background:#fff; color:#1F1F1F; padding-top:calc(var(--pt0)*54); font-family:Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
.g-busca{flex:none; margin:calc(var(--pt)*6) calc(var(--pt)*12) calc(var(--pt)*8); height:calc(var(--pt)*46); border-radius:calc(var(--pt)*23); background:#fff; box-shadow:0 1px 6px rgba(32,33,36,.28); display:flex; align-items:center; gap:calc(var(--pt)*10); padding:0 calc(var(--pt)*14); font-size:calc(var(--pt)*16)}
.g-q{flex:1; min-width:0; white-space:nowrap; overflow:hidden}
.g-q span{display:inline-block}
.g-abas{flex:none; display:flex; gap:calc(var(--pt)*22); padding:calc(var(--pt)*4) calc(var(--pt)*16) 0; border-bottom:1px solid #E3E3E3; font-size:calc(var(--pt)*14); color:#5F6368; white-space:nowrap; overflow:hidden}
.g-aba{position:relative; padding-bottom:calc(var(--pt)*10)}
.g-aba.on{color:#1F1F1F; font-weight:600}
.g-aba.on::after{content:""; position:absolute; left:0; right:0; bottom:0; height:calc(var(--pt)*3); border-radius:calc(var(--pt)*2) calc(var(--pt)*2) 0 0; background:#1F1F1F}
.g-card{flex:none; display:flex; flex-direction:column; align-items:flex-start; gap:calc(var(--pt)*5); padding:calc(var(--pt)*16) calc(var(--pt)*16) 0}
.g-patro{font-size:calc(var(--pt)*12); font-weight:700; line-height:1.3; color:#1F1F1F}
.g-nome{font-size:calc(var(--pt)*22); line-height:1.2}
.g-estrelas,.g-estrelas-p{display:flex; gap:calc(var(--pt)*1)}
.g-estrelas i,.g-estrelas-p i{display:block; font-style:normal}
.g-linha{font-size:calc(var(--pt)*14); color:#4D5156}
.g-aberto{color:#188038; font-weight:500}
.g-botoes{flex:none; display:flex; justify-content:space-between; padding:calc(var(--pt)*14) calc(var(--pt)*18) calc(var(--pt)*4)}
.g-bt{display:flex; flex-direction:column; align-items:center; gap:calc(var(--pt)*6); font-size:calc(var(--pt)*12); font-weight:500; color:#0B57D0; white-space:nowrap}
.g-bt i{width:calc(var(--pt)*44); height:calc(var(--pt)*44); border-radius:50%; background:#D3E3FD; display:grid; place-items:center; position:relative}
.g-bt.cheio i{background:#0B57D0}
.g-bt:last-child i::after{content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 calc(var(--pt)*3) #0B57D0; opacity:0}
.g-aval{flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:calc(var(--pt)*18); margin-top:calc(var(--pt)*16); padding:calc(var(--pt)*14) calc(var(--pt)*16) 0; border-top:1px solid #ECECEC}
.g-aval-tit{display:flex; justify-content:space-between; align-items:center; font-size:calc(var(--pt)*16); font-weight:500; white-space:nowrap; gap:calc(var(--pt)*8)}
.g-azul{font-size:calc(var(--pt)*13); color:#0B57D0}
.g-rev{display:flex; flex-direction:column; gap:calc(var(--pt)*8)}
.g-rev-cab{display:flex; align-items:center; gap:calc(var(--pt)*10)}
.g-rev-av{width:calc(var(--pt)*30); height:calc(var(--pt)*30); border-radius:50%; background:#E8EAED; flex:none; display:grid; place-items:center; color:#fff; font-size:calc(var(--pt)*14); font-weight:500; line-height:1}
.g-rev-q{display:flex; flex-direction:column; gap:calc(var(--pt)*2); min-width:0}
.g-rev-n{font-size:calc(var(--pt)*14); font-weight:500; color:#1F1F1F; line-height:1.2}
.g-rev-l{display:flex; align-items:center; gap:calc(var(--pt)*6)}
.g-rev-t{font-size:calc(var(--pt)*12); color:#70757A; white-space:nowrap}
.tela .g-rev-tx{margin:0; font-size:calc(var(--pt)*13.5); line-height:1.38; color:#1F1F1F; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.tela-google .barra{display:block; height:calc(var(--pt)*9); border-radius:calc(var(--pt)*5); background:#E8EAED}
.g-rev--mais{display:none}
@container (min-width:300px){ .g-rev--mais{display:flex} }

/* Google tocando (2 s): a busca é digitada, o perfil entra, as estrelas acendem, os botões entram e o WhatsApp recebe o toque.
   Parado: o perfil inteiro (estrelas sem nota, Aberto agora, Ligar, Rotas, Site, WhatsApp) e as avaliações em barra. */
.tela-google.tocando .g-q span{animation:g-digita .3s steps(20,end) .05s both}
.tela-google.tocando .g-card{animation:g-sobe .4s cubic-bezier(.16,1,.3,1) .3s both}
.tela-google.tocando .g-aval{animation:g-sobe .4s cubic-bezier(.16,1,.3,1) .7s both}
.tela-google.tocando .g-estrelas i{animation:g-estrela .25s cubic-bezier(.3,1.6,.5,1) calc(.45s + var(--i) * .05s) both}
.tela-google.tocando .g-bt{animation:g-bt .35s cubic-bezier(.3,1.5,.5,1) calc(.55s + var(--i) * .06s) both}
.tela-google.tocando .g-bt:last-child i::after{animation:g-toque .5s ease-out 1.15s both}
@keyframes g-digita{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes g-sobe{from{opacity:0; transform:translateY(calc(var(--pt)*18))}to{opacity:1; transform:none}}
@keyframes g-estrela{from{opacity:.0; transform:scale(.3)}to{opacity:1; transform:scale(1)}}
@keyframes g-bt{from{opacity:0; transform:scale(.6)}to{opacity:1; transform:scale(1)}}
@keyframes g-toque{0%{opacity:0; transform:scale(.9)}25%{opacity:.9}100%{opacity:0; transform:scale(1.45)}}
/* aparelho pequeno: zoom um pouco menor e busca mais justa, pra a busca inteira caber a 212 px */
.tela-google{--z-peq:1.3; --z-med:1.16}
@container (max-width:300px){ .g-busca{margin-inline:calc(var(--pt)*10); padding:0 calc(var(--pt)*12); gap:calc(var(--pt)*8); font-size:calc(var(--pt)*15)} }
/* a busca da clínica é mais longa ("limpeza de pele perto de mim"): letra um pouco menor no aparelho pequeno, inteira */
@container (max-width:300px){ .tela-google:not(.g-adv) .g-busca{font-size:calc(var(--pt)*13.5)} }

/* Google com os outros resultados no lugar das avaliações (google-dermatologista): nome, estrelas cinza parciais,
   categoria e horário; depois "Mais empresas" e as pesquisas relacionadas. A lista quebra em coluna dentro de uma
   caixa recortada: o bloco que não cabe INTEIRO vai pra coluna seguinte, fora da tela, então a tela termina sempre
   num bloco completo, sem linha cortada nem faixa em branco. */
.tela-google .g-outros{flex:1 1 0; min-height:0; overflow:hidden; display:flex; flex-direction:column; flex-wrap:wrap; align-content:flex-start;
  margin-top:calc(var(--pt)*14); border-top:calc(var(--pt)*8) solid #F1F3F4; padding-bottom:calc(var(--pt0)*18)}
.g-outro{flex:none; width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:calc(var(--pt)*4); padding:calc(var(--pt)*10) calc(var(--pt)*16); border-bottom:1px solid #ECEDEF}
.tela .g-outro-n{max-width:100%; font-size:calc(var(--pt)*17); font-weight:500; line-height:1.25; color:#1A0DAB; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.g-outro-l{font-size:calc(var(--pt)*13); line-height:1.3; color:#4D5156; white-space:nowrap}
.g-outro .g-fechado{color:#B3261E; font-weight:500}
.g-est-cinza{display:flex; gap:calc(var(--pt)*1.5)}
.g-est-cinza i{display:block; width:calc(var(--pt)*12); height:calc(var(--pt)*12);
  background:linear-gradient(90deg,#80868B var(--f,0%),#DADCE0 var(--f,0%));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.4L12 17.4l-5.8 3 1.1-6.4-4.7-4.6 6.5-.9z'/%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 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.4L12 17.4l-5.8 3 1.1-6.4-4.7-4.6 6.5-.9z'/%3E%3C/svg%3E") center / contain no-repeat}
.g-mais{border-bottom:0; padding-block:calc(var(--pt)*12) calc(var(--pt)*14)}
.g-mais-bt{align-self:stretch; display:flex; align-items:center; justify-content:center; gap:calc(var(--pt)*6); height:calc(var(--pt)*38); border-radius:calc(var(--pt)*19); background:#F1F3F4; font-size:calc(var(--pt)*14); font-weight:500; color:#1F1F1F; white-space:nowrap}
.g-rel{padding-block:calc(var(--pt)*8)}
.g-rel--1{border-top:calc(var(--pt)*6) solid #F1F3F4; padding-top:calc(var(--pt)*10); gap:calc(var(--pt)*8)}
.g-rel-tit{font-size:calc(var(--pt)*16); font-weight:500; line-height:1.25; color:#1F1F1F}
.g-rel-l{max-width:100%; display:flex; align-items:center; gap:calc(var(--pt)*12); font-size:calc(var(--pt)*14); line-height:1.3; color:#1F1F1F; white-space:nowrap; overflow:hidden}
.g-rel-l span{overflow:hidden; text-overflow:ellipsis}
.tela-google.tocando .g-outros{animation:g-sobe .4s cubic-bezier(.16,1,.3,1) .7s both}

/* ---------------- telas do sistema da agência (Geist, identidade Presq) ---------------- */
.tela-painel,.tela-escritorio,.tela-agenda{
  background:var(--papel,#F5F5F2); color:var(--tinta,#111113);
  font-family:Geist,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  padding-top:calc(var(--pt0)*54);
}
.pn-rot,.es-tag,.ag-dias,.ag-h span,.pn-marca{font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

/* painel do cliente */
.pn-corpo{flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:calc(var(--pt)*16); padding:calc(var(--pt)*6) calc(var(--pt)*16) 0}
.pn-topo{display:flex; align-items:center; justify-content:space-between; height:calc(var(--pt)*28)}
.pn-marca{font-family:Geist,-apple-system,sans-serif; display:inline-flex; align-items:baseline; font-size:calc(var(--pt)*15); line-height:1}
.pn-marca{font-weight:700; letter-spacing:-.045em}
.pn-marca i{display:inline-block; width:.2em; height:.2em; border-radius:50%; background:var(--verde,#0A7F5C); margin:0 .24em 0 .06em}
.pn-marca span{font-weight:400; letter-spacing:-.02em; color:var(--grafite,#5E5E66)}
.pn-ola{font-size:calc(var(--pt)*34); font-weight:700; letter-spacing:-.045em; line-height:1}
.pn-rot{display:flex; align-items:center; gap:calc(var(--pt)*7); margin-bottom:calc(var(--pt)*8); font-size:calc(var(--pt)*11.5); font-weight:500; letter-spacing:.03em; color:var(--grafite,#5E5E66)}
.pn-rot::before{content:""; width:calc(var(--pt)*6); height:calc(var(--pt)*6); border-radius:50%; background:var(--verde,#0A7F5C); flex:none}
.pn-cartao{background:var(--painel,#fff); border:1px solid var(--filete,#ECECE7); border-radius:calc(var(--pt)*18); padding:calc(var(--pt)*12)}
.pn-post{display:flex; align-items:center; gap:calc(var(--pt)*12)}
.pn-thumb{width:calc(var(--pt)*50); height:calc(var(--pt)*62); flex:none; border-radius:calc(var(--pt)*10); background:var(--noite,#0A0B0D); display:grid; place-items:center}
.pn-txt{display:flex; flex-direction:column; gap:calc(var(--pt)*3); min-width:0}
.pn-txt b{font-size:calc(var(--pt)*16); font-weight:600; letter-spacing:-.015em; line-height:1.2}
.pn-txt small{font-size:calc(var(--pt)*13); color:var(--grafite,#5E5E66)}
.pn-acoes{position:relative; display:grid; margin-top:calc(var(--pt)*12)}
.pn-acoes > *{grid-area:1/1}
.pn-bts{display:flex; gap:calc(var(--pt)*8); visibility:hidden; opacity:0}
.pn-bt{flex:1; height:calc(var(--pt)*42); border-radius:calc(var(--pt)*11); display:grid; place-items:center; font-size:calc(var(--pt)*15); font-weight:600; letter-spacing:-.01em; white-space:nowrap}
.pn-bt.pri{background:var(--tinta,#111113); color:var(--claro,#F5F5F2)}
.pn-bt.sec{background:#fff; border:1px solid var(--filete-forte,#D9D9D3); color:var(--tinta,#111113)}
.pn-ok{height:calc(var(--pt)*42); border-radius:calc(var(--pt)*11); display:flex; align-items:center; justify-content:center; gap:calc(var(--pt)*7); background:var(--campo,#EEF6F2); color:var(--verde,#0A7F5C); font-size:calc(var(--pt)*15); font-weight:600}
.pn-dedo{position:absolute; left:24%; top:50%; width:calc(var(--pt)*44); height:calc(var(--pt)*44); margin:calc(var(--pt)*-22) 0 0 calc(var(--pt)*-22); border-radius:50%; background:rgba(17,17,19,.22); box-shadow:0 0 0 calc(var(--pt)*1.5) rgba(255,255,255,.75), 0 calc(var(--pt)*6) calc(var(--pt)*16) rgba(17,17,19,.18); opacity:0; pointer-events:none}
.pn-tarefa,.pn-reuniao{display:flex; align-items:center; gap:calc(var(--pt)*10)}
.pn-tarefa b,.pn-reuniao b{flex:1; min-width:0; font-size:calc(var(--pt)*15); font-weight:600; letter-spacing:-.01em; line-height:1.25}
.pn-ck{width:calc(var(--pt)*22); height:calc(var(--pt)*22); flex:none; border-radius:50%; border:calc(var(--pt)*1.6) solid #C9C9C4}
.pn-jafiz{flex:none; height:calc(var(--pt)*32); padding:0 calc(var(--pt)*12); border-radius:calc(var(--pt)*9); border:1px solid var(--filete-forte,#D9D9D3); display:grid; place-items:center; font-size:calc(var(--pt)*14); font-weight:600; white-space:nowrap}
.pn-mini{width:calc(var(--pt)*36); height:calc(var(--pt)*36); flex:none; border-radius:calc(var(--pt)*10); background:#ECECE7; display:grid; place-items:center}
.pn-hoje{display:flex; align-items:center; gap:calc(var(--pt)*10)}
.pn-hoje .pn-txt{flex:1}
.pn-hoje .pn-txt b{font-size:calc(var(--pt)*15)}
.pn-tag{flex:none; font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:calc(var(--pt)*10.5); font-weight:600; letter-spacing:.05em; line-height:1; padding:calc(var(--pt)*5) calc(var(--pt)*7); border-radius:calc(var(--pt)*6); color:var(--verde,#0A7F5C); background:var(--campo,#EEF6F2)}
.pn-cal{width:calc(var(--pt)*36); height:calc(var(--pt)*36); flex:none; border-radius:calc(var(--pt)*10); background:var(--campo,#EEF6F2); display:grid; place-items:center}
.pn-abas{
  flex:none; display:flex; justify-content:space-around;
  padding:calc(var(--pt)*8) calc(var(--pt)*4) calc(calc(var(--pt0)*34) + calc(var(--pt)*2));
  background:rgba(255,255,255,.94); border-top:1px solid var(--filete,#ECECE7);
}
.pn-aba{display:flex; flex-direction:column; align-items:center; gap:calc(var(--pt)*3); min-width:0; font-size:calc(var(--pt)*10.5); font-weight:500; color:var(--grafite,#5E5E66); white-space:nowrap}
.pn-aba.on{color:var(--verde,#0A7F5C); font-weight:600}

/* painel tocando (2 s): os blocos entram, o botão Aprovar é tocado (anel) e o cartão vira "Aprovado".
   Parado: o post aprovado, a tarefa e a reunião. Sem bolinha solta: o toque mora no próprio botão. */
.pn-dedo{display:none}
.pn-bt{position:relative}
.pn-bt.pri::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 calc(var(--pt)*3) rgba(10,127,92,.55); opacity:0; pointer-events:none}
.tela-painel.tocando .pn-sec,.tela-painel.tocando .pn-ola{animation:pn-entra .45s cubic-bezier(.16,1,.3,1) calc(.05s + var(--i,0) * .06s) both}
.tela-painel.tocando .pn-ola{--i:-.5}
.tela-painel.tocando .pn-bts{animation:pn-bts 1.1s linear both}
.tela-painel.tocando .pn-bt.pri{animation:pn-aperta .3s ease .7s both}
.tela-painel.tocando .pn-bt.pri::after{animation:pn-anel .45s ease-out .7s both}
.tela-painel.tocando .pn-ok{animation:pn-ok .35s cubic-bezier(.16,1,.3,1) 1.02s both}
@keyframes pn-entra{from{opacity:0; transform:translateY(calc(var(--pt)*16))}to{opacity:1; transform:none}}
@keyframes pn-bts{0%,92%{visibility:visible; opacity:1}96%,100%{visibility:hidden; opacity:0}}
@keyframes pn-aperta{0%{transform:none}40%{transform:scale(.95); filter:brightness(1.4)}100%{transform:none}}
@keyframes pn-anel{0%{opacity:0; transform:scale(.96)}30%{opacity:1}100%{opacity:0; transform:scale(1.12)}}
@keyframes pn-ok{from{opacity:0; transform:scale(.96)}to{opacity:1; transform:none}}
/* aparelho pequeno: três blocos (aprovar, tarefa, reunião) inteiros, sem cortar o quarto */
@container (max-width:300px){ .pn-sec--hoje{display:none} .pn-corpo{gap:calc(var(--pt)*13)} }

/* escritório da advogada */
.es-corpo{flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:calc(var(--pt)*16); padding:calc(var(--pt)*10) calc(var(--pt)*16) calc(calc(var(--pt0)*34) + calc(var(--pt)*8))}
.es-tit,.ag-tit{font-size:calc(var(--pt)*30); font-weight:700; letter-spacing:-.045em; line-height:1}
.es-abas{position:relative; display:flex; padding:calc(var(--pt)*3); border-radius:calc(var(--pt)*11); background:#ECECE7}
.es-abas span{position:relative; z-index:1; flex:1; height:calc(var(--pt)*34); display:grid; place-items:center; font-size:calc(var(--pt)*14); font-weight:500; color:var(--grafite,#5E5E66); white-space:nowrap}
.es-abas span.on{color:var(--tinta,#111113); font-weight:600}
.es-abas .es-ind{position:absolute; z-index:0; left:calc(var(--pt)*3); top:calc(var(--pt)*3); bottom:calc(var(--pt)*3); width:calc((100% - calc(var(--pt)*6)) / 3); height:auto; border-radius:calc(var(--pt)*8); background:#fff; box-shadow:0 1px calc(var(--pt)*3) rgba(17,17,19,.12); transform:translateX(100%)}
.es-lista{display:flex; flex-direction:column; background:#fff; border:1px solid var(--filete,#ECECE7); border-radius:calc(var(--pt)*16); overflow:hidden}
.es-l{display:flex; align-items:center; gap:calc(var(--pt)*12); padding:calc(var(--pt)*14) calc(var(--pt)*14); border-top:1px solid var(--filete,#ECECE7)}
.es-l:first-child{border-top:0}
.es-ck{width:calc(var(--pt)*22); height:calc(var(--pt)*22); flex:none; border-radius:50%; border:calc(var(--pt)*1.6) solid #C9C9C4; display:grid; place-items:center}
.es-ck .ic{opacity:0}
.es-feito .es-ck,.es-vira .es-ck{background:var(--verde,#0A7F5C); border-color:var(--verde,#0A7F5C)}
.es-feito .es-ck .ic,.es-vira .es-ck .ic{opacity:1}
.es-b{flex:1; min-width:0; display:flex; flex-direction:column; gap:calc(var(--pt)*3)}
.es-n{display:block; font-size:calc(var(--pt)*14); font-weight:600; letter-spacing:-.01em; line-height:1.2; color:var(--tinta,#111113); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.es-s{display:block; font-size:calc(var(--pt)*11.5); line-height:1.2; color:var(--grafite,#5E5E66); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* feito: o texto fica mais claro com cor sólida (a opacidade 0,5 deixava 2,2:1); continua acima de 4,5:1 */
.es-feito .es-n,.es-vira .es-n{color:#6E6E75}
.es-feito .es-s,.es-vira .es-s{color:#75757C}
.es-tags{display:grid; justify-items:end}
.es-tag{grid-area:1/1; font-size:calc(var(--pt)*10.5); font-weight:600; letter-spacing:.05em; line-height:1; padding:calc(var(--pt)*5) calc(var(--pt)*7); border-radius:calc(var(--pt)*6); white-space:nowrap}
.t-hoje{color:var(--verde,#0A7F5C); background:var(--campo,#EEF6F2)}
.t-semana{color:var(--grafite,#5E5E66); background:#F0F0EC}
.t-feito{color:#71717A; background:transparent; padding-right:0}
.es-vira .t-hoje{opacity:0}

/* escritório tocando (2 s): a aba Prazos é escolhida, as linhas entram e o prazo de hoje é marcado como feito */
.tela-escritorio.tocando .es-ind{animation:es-ind .35s cubic-bezier(.65,0,.35,1) .05s both}
.tela-escritorio.tocando .es-l{animation:pn-entra .35s cubic-bezier(.16,1,.3,1) calc(.2s + var(--i) * .04s) both}
.tela-escritorio.tocando .es-vira .es-ck{animation:es-ck .3s ease .95s both}
.tela-escritorio.tocando .es-vira .es-ck .ic{animation:es-ic .3s cubic-bezier(.3,1.6,.5,1) 1s both}
.tela-escritorio.tocando .es-vira .es-n{animation:es-apaga-n .35s ease 1.05s both}
.tela-escritorio.tocando .es-vira .es-s{animation:es-apaga-s .35s ease 1.05s both}
.tela-escritorio.tocando .es-vira .t-hoje{animation:es-sai .25s ease 1.1s both}
.tela-escritorio.tocando .es-vira .t-feito{animation:es-entra .3s ease 1.2s both}
@keyframes es-ind{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes es-ck{from{background:#fff; border-color:#C9C9C4}to{background:#0A7F5C; border-color:#0A7F5C}}
@keyframes es-ic{from{opacity:0; transform:scale(.3)}to{opacity:1; transform:none}}
@keyframes es-apaga-n{from{color:#111113}to{color:#6E6E75}}
@keyframes es-apaga-s{from{color:#5E5E66}to{color:#75757C}}
@keyframes es-sai{from{opacity:1}to{opacity:0}}
@keyframes es-entra{from{opacity:0}to{opacity:1}}
/* a lista termina inteira (sem linha cortada) em qualquer tamanho */
.es-lista{flex:none}
@container (max-width:232px){ .es-l:nth-child(n+8){display:none} }

/* agenda da dermatologista */
.ag-corpo{flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:calc(var(--pt)*14); padding:calc(var(--pt)*10) calc(var(--pt)*16) calc(calc(var(--pt0)*34) + calc(var(--pt)*8))}
.ag-dias{display:flex; gap:calc(var(--pt)*6)}
.ag-dias span{flex:1; height:calc(var(--pt)*40); border-radius:calc(var(--pt)*11); display:grid; place-items:center; font-size:calc(var(--pt)*12); font-weight:500; color:var(--grafite,#5E5E66); background:#fff; border:1px solid var(--filete,#ECECE7)}
.ag-dias span.on{background:var(--tinta,#111113); color:var(--claro,#F5F5F2); border-color:var(--tinta,#111113)}
.ag-dia{font-size:calc(var(--pt)*20); font-weight:600; letter-spacing:-.025em; margin-top:calc(var(--pt)*4)}
.ag-grade{--hh:calc(var(--pt)*62); position:relative; flex:1; min-height:0}
.ag-h{height:var(--hh); display:flex; align-items:flex-start; gap:calc(var(--pt)*10); border-top:1px solid #E2E2DC}
.ag-h span{width:calc(var(--pt)*44); flex:none; transform:translateY(-50%); background:var(--papel,#F5F5F2); padding-right:calc(var(--pt)*4); font-size:calc(var(--pt)*11); color:var(--grafite,#5E5E66)}
.ag-ocup,.ag-novo{position:absolute; left:calc(var(--pt)*54); right:0; top:calc(var(--hh) * var(--y) + calc(var(--pt)*3)); height:calc(var(--hh) * var(--h) - calc(var(--pt)*6)); border-radius:calc(var(--pt)*10)}
.ag-ocup{background:#E9E9E4; display:flex; align-items:center; gap:calc(var(--pt)*8); padding:0 calc(var(--pt)*12); overflow:hidden; white-space:nowrap; font-size:calc(var(--pt)*13); line-height:1.1; color:var(--grafite,#5E5E66)}
.ag-ocup b{font-weight:600; color:var(--tinta,#111113); letter-spacing:-.01em}
.ag-ocup span{overflow:hidden; text-overflow:ellipsis}
.ag-novo{display:flex; align-items:center; justify-content:space-between; gap:calc(var(--pt)*8); padding:0 calc(var(--pt)*12); background:var(--verde,#0A7F5C); color:#fff; box-shadow:0 calc(var(--pt)*8) calc(var(--pt)*20) rgba(10,127,92,.28)}
.ag-novo b{font-size:calc(var(--pt)*15); font-weight:600; letter-spacing:-.01em; white-space:nowrap}

/* agenda tocando: os horários ocupados aparecem e a avaliação de terça às 9h entra em verde */
.tela-agenda.tocando .ag-ocup{animation:wa-fade .3s ease calc(.05s + var(--i) * .05s) both}
.tela-agenda.tocando .ag-novo{animation:ag-novo .5s cubic-bezier(.16,1,.3,1) .45s both}
.tela-agenda.tocando .ag-novo .ic{animation:es-ic .3s cubic-bezier(.3,1.6,.5,1) .85s both}
@keyframes ag-novo{from{opacity:0; clip-path:inset(0 0 100% 0 round calc(var(--pt)*10)); transform:translateY(calc(var(--pt)*-6))}to{opacity:1; clip-path:inset(0 0 0 0 round calc(var(--pt)*10)); transform:none}}

/* ---------------- tela de bloqueio (reserva HTML do V1, igual ao pôster notificacoes-tela.webp, q264) ----------------
   Motion v2, direção B: as medidas do vídeo em pt (u = 1/393 da largura); o texto das notificações na
   ampliação do vídeo (k = 22/15). Sem zoom por tamanho de aparelho: a reserva e o vídeo têm que ser o mesmo quadro. */
.iphone[data-tela="bloqueio"],.iphone[data-tela^="reels"]{--status-cor:#fff}
.iphone[data-tela="bloqueio"] .iphone-hora{visibility:hidden} /* na tela de bloqueio a hora fica grande, no meio */
.tela.bq{--u:var(--pt0); color:#fff; background:#0A0B0D; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif}
.bq-parede{position:absolute; inset:0; overflow:hidden; background:#0A0B0D}
.bq-parede i{position:absolute; display:block; border-radius:50%}
.bq-luz--menta{left:calc(var(--u)*-140); top:calc(var(--u)*520); width:calc(var(--u)*560); height:calc(var(--u)*520); opacity:.6;
  background:radial-gradient(circle at 50% 50%, rgba(61,220,151,.95) 0%, rgba(61,220,151,.35) 40%, rgba(61,220,151,0) 70%); filter:blur(calc(var(--u)*34))}
.bq-luz--agua{left:calc(var(--u)*150); top:calc(var(--u)*560); width:calc(var(--u)*420); height:calc(var(--u)*460); opacity:.45;
  background:radial-gradient(circle at 50% 50%, rgba(95,198,214,.9) 0%, rgba(95,198,214,.3) 42%, rgba(95,198,214,0) 70%); filter:blur(calc(var(--u)*36))}
.bq-horizonte{left:calc(var(--u)*-700); top:calc(var(--u)*-1500); width:calc(var(--u)*1793); height:calc(var(--u)*2160);
  background:radial-gradient(ellipse at 50% 70%, #0D1013 0%, #0A0B0D 70%); box-shadow:0 calc(var(--u)*10) calc(var(--u)*50) calc(var(--u)*6) rgba(10,11,13,.85)}
.bq-fio{position:absolute; inset:0; width:100%; height:100%; display:block}
.bq-topo{position:absolute; left:0; right:0; top:calc(var(--u)*62); display:flex; flex-direction:column; align-items:center}
.bq-data{height:calc(var(--u)*24); font-size:calc(var(--u)*19); font-weight:600; line-height:calc(var(--u)*24); color:rgba(255,255,255,.82)}
.bq-hora{
  height:calc(var(--u)*101.92); font-size:calc(var(--u)*104); font-weight:650; line-height:calc(var(--u)*101.92);
  letter-spacing:calc(var(--u)*-2.5); font-variant-numeric:tabular-nums;
  background-image:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(232,250,242,.9) 55%, rgba(196,240,222,.78) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 calc(var(--u)*2) calc(var(--u)*10) rgba(0,0,0,.35));
}
.bq-widgets{position:absolute; left:0; right:0; top:calc(var(--u)*206); display:flex; justify-content:center; gap:calc(var(--u)*12)}
.bq-w{width:calc(var(--u)*160); height:calc(var(--u)*64); border-radius:calc(var(--u)*18); padding:calc(var(--u)*8) calc(var(--u)*11);
  display:flex; flex-direction:column; justify-content:center; background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(calc(var(--u)*18)); backdrop-filter:blur(calc(var(--u)*18)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.bq-w-cab{display:flex; align-items:center; gap:calc(var(--u)*5); height:calc(var(--u)*16); font-size:calc(var(--u)*11.5); font-weight:600; letter-spacing:calc(var(--u)*.3); color:rgba(255,255,255,.62); white-space:nowrap}
.bq-w-cab svg{width:calc(var(--u)*12); height:calc(var(--u)*12); display:block; flex:none}
.bq-w b{height:calc(var(--u)*19); font-size:calc(var(--u)*15); line-height:calc(var(--u)*19); font-weight:600; color:rgba(255,255,255,.95); white-space:nowrap}
.bq-w-l2{height:calc(var(--u)*17); font-size:calc(var(--u)*13); line-height:calc(var(--u)*17); color:rgba(255,255,255,.7); white-space:nowrap}
.bq-lista{position:absolute; inset:0}
.bq-not,.bq-ativ,.bq-pilha{position:absolute; left:calc(var(--u)*16); width:calc(var(--u)*361); border-radius:calc(var(--u)*22)}
.bq-not{
  top:calc(var(--u)*var(--y)); height:calc(var(--u)*var(--h));
  display:flex; align-items:center; gap:calc(var(--u)*10); padding:0 calc(var(--u)*14); color:#000;
  background:linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(238,242,240,.8) 100%);
  -webkit-backdrop-filter:blur(calc(var(--u)*24)) saturate(1.6); backdrop-filter:blur(calc(var(--u)*24)) saturate(1.6);
  box-shadow:inset 0 var(--u) 0 rgba(255,255,255,.9), inset 0 0 0 calc(var(--u)*.6) rgba(255,255,255,.6), 0 calc(var(--u)*6) calc(var(--u)*18) rgba(0,0,0,.28);
}
.bq-pilha{
  display:block; top:calc(var(--u)*var(--y)); height:calc(var(--u)*88.4); transform:scale(var(--e)); transform-origin:50% 100%;
  background:linear-gradient(180deg, rgba(255,255,255,calc(.86*var(--a))) 0%, rgba(238,242,240,calc(.8*var(--a))) 100%);
  -webkit-backdrop-filter:blur(calc(var(--u)*24)) saturate(1.6); backdrop-filter:blur(calc(var(--u)*24)) saturate(1.6);
  box-shadow:inset 0 var(--u) 0 rgba(255,255,255,calc(.9*var(--a))), 0 calc(var(--u)*6) calc(var(--u)*18) rgba(0,0,0,calc(.28*var(--a)));
}
.bq-ativ{
  top:calc(var(--u)*286); height:calc(var(--u)*101.01);
  display:flex; align-items:center; gap:calc(var(--u)*12); padding:0 calc(var(--u)*16);
  background:linear-gradient(180deg, rgba(28,30,32,.82) 0%, rgba(18,20,22,.86) 100%);
  -webkit-backdrop-filter:blur(calc(var(--u)*24)) saturate(1.4); backdrop-filter:blur(calc(var(--u)*24)) saturate(1.4);
  box-shadow:inset 0 var(--u) 0 rgba(255,255,255,.10), inset 0 0 0 calc(var(--u)*.6) rgba(255,255,255,.08), 0 calc(var(--u)*6) calc(var(--u)*18) rgba(0,0,0,.3);
}
.bq-ic{width:calc(var(--u)*38); height:calc(var(--u)*38); border-radius:calc(var(--u)*9); display:block; position:relative; overflow:hidden; flex:none}
.bq-ic svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.bq-ic--wa{background:linear-gradient(180deg,#5BE07A 0%,#24C443 100%)}
.bq-ic--go,.bq-ic--ag{background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.bq-ic--pg{width:calc(var(--u)*44); height:calc(var(--u)*44); border-radius:calc(var(--u)*10.42); background:#111113}
.bq-ic--ag b,.bq-ic--ag i{position:absolute; left:0; right:0; text-align:center; font-style:normal; font-weight:600; font-family:system-ui,-apple-system,sans-serif}
.bq-ic--ag b{top:calc(var(--u)*4.6); height:calc(var(--u)*8); line-height:calc(var(--u)*8); font-size:calc(var(--u)*6.6); letter-spacing:calc(var(--u)*.2); color:#FF3B30}
.bq-ic--ag i{top:calc(var(--u)*13); height:calc(var(--u)*20); line-height:calc(var(--u)*20); font-size:calc(var(--u)*16); letter-spacing:calc(var(--u)*-.4); color:#1C1C1E}
.bq-txt{flex:1; min-width:0; display:flex; flex-direction:column}
.bq-cab{display:flex; align-items:center; justify-content:space-between; height:calc(var(--u)*28.6)}
.bq-tit{font-size:calc(var(--u)*22); font-weight:600; line-height:calc(var(--u)*28.6); white-space:nowrap}
.bq-quando{font-size:calc(var(--u)*19.07); line-height:calc(var(--u)*28.6); color:rgba(60,60,67,.8); white-space:nowrap} /* 5,5:1 no vidro claro (o .6 do iOS dava 3,3:1) */
.bq-corpo{display:block; height:calc(var(--u)*28.6); font-size:calc(var(--u)*22); line-height:calc(var(--u)*28.6); white-space:pre}
.bq-ativ-tit{height:calc(var(--u)*32.41); font-size:calc(var(--u)*24.93); font-weight:600; line-height:calc(var(--u)*32.41); color:#fff; white-space:nowrap}
.bq-ativ-apoio{height:calc(var(--u)*28.6); font-size:calc(var(--u)*22); line-height:calc(var(--u)*28.6); color:#3DDC97; white-space:nowrap}
.bq-botoes{position:absolute; left:0; right:0; top:calc(var(--u)*758)}
.bq-botoes span{position:absolute; top:0; width:calc(var(--u)*50); height:calc(var(--u)*50); border-radius:50%; background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); display:grid; place-items:center}
.bq-botoes span:first-child{left:calc(var(--u)*46)}
.bq-botoes span:last-child{left:calc(var(--u)*297)}
.bq-botoes span:first-child svg{width:calc(var(--u)*22); height:calc(var(--u)*22)}
.bq-botoes span:last-child svg{width:calc(var(--u)*24); height:calc(var(--u)*24)}
/* bloqueio tocando (1,3 s): o cartão de sinal e as notificações chegam de cima pra baixo, sem mexer o resto; a hora fica PARADA */
.tela.bq.tocando .bq-ativ,.tela.bq.tocando .bq-not{animation:bq-entra .45s cubic-bezier(.16,1,.3,1) calc(var(--i) * .18s) both}
.tela.bq.tocando .bq-pilha{animation:wa-fade .3s ease .7s both}
@keyframes bq-entra{from{opacity:0; transform:translateY(calc(var(--pt0)*-10)) scale(.96)}to{opacity:1; transform:none}}
/* usados também pela janela de busca (caso advogada) */
@keyframes bq-abre{from{grid-template-rows:0fr}to{grid-template-rows:1fr}}
@keyframes bq-chega{from{opacity:0; transform:translateY(calc(var(--pt)*-14)) scale(.96)}to{opacity:1; transform:none}}

/* ---------------- Reels (desenhado; quadro desfocado em Noite, interface completa) ---------------- */
.tela-reels{background:#0A0B0D; color:#fff; --z-med:1.12; --z-peq:1.2}
.rl-quadro{position:absolute; inset:-8%; overflow:hidden; filter:blur(calc(var(--pt0)*16));
  background:
    radial-gradient(ellipse 30% 22% at 50% 34%, rgba(232,214,196,.42) 0%, rgba(232,214,196,0) 100%),
    radial-gradient(ellipse 54% 34% at 50% 78%, rgba(95,198,214,.30) 0%, rgba(95,198,214,0) 100%),
    radial-gradient(circle at 18% 18%, rgba(61,220,151,.22) 0%, rgba(61,220,151,0) 42%),
    radial-gradient(circle at 86% 60%, rgba(245,245,242,.12) 0%, rgba(245,245,242,0) 38%),
    #121418}
.rl-quadro i{position:absolute; border-radius:50%}
/* capa desenhada: texto grande sobre Noite, como a capa de um carrossel; uma frase em Menta */
.rl-quadro.rl-quadro--capa{inset:0; filter:none; display:flex; flex-direction:column; justify-content:center; gap:calc(var(--pt)*14);
  padding:calc(var(--pt0)*96) calc(var(--pt)*58) calc(calc(var(--pt0)*34) + calc(var(--pt)*190)) calc(var(--pt)*24);
  background:radial-gradient(90% 55% at 15% 30%, rgba(61,220,151,.16) 0%, rgba(61,220,151,0) 70%), linear-gradient(180deg,#0E1012 0%,#0A0B0D 100%);
  font-family:Geist,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
.rl-capa-rot{display:flex; align-items:center; gap:calc(var(--pt)*7); font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:calc(var(--pt)*11); font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:#A1A1AA}
.rl-capa-rot::before{content:""; width:calc(var(--pt)*7); height:calc(var(--pt)*7); border-radius:50%; background:#3DDC97; flex:none}
.rl-capa-tit{font-size:calc(var(--pt)*36); font-weight:700; letter-spacing:-.045em; line-height:1; color:#F5F5F2; text-wrap:balance}
.rl-capa-tit em{font-style:normal; color:#3DDC97}
.rl-a{left:36%; top:22%; width:28%; height:20%; background:rgba(214,190,170,.35)}
.rl-b{left:22%; top:44%; width:56%; height:46%; background:rgba(40,70,74,.55)}
.rl-c{left:60%; top:8%; width:40%; height:30%; background:rgba(61,220,151,.10)}
.rl-sombra{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 88%)}
.rl-topo{position:absolute; left:0; right:0; top:calc(var(--pt0)*54); height:calc(var(--pt)*44); display:flex; align-items:center; justify-content:space-between; padding:0 calc(var(--pt)*16)}
.rl-topo b{font-size:calc(var(--pt)*22); font-weight:700; letter-spacing:-.01em}
.rl-lado{position:absolute; right:calc(var(--pt)*12); bottom:calc(calc(var(--pt0)*34) + calc(var(--pt)*74)); display:flex; flex-direction:column; align-items:center; gap:calc(var(--pt)*24)}
.rl-curtir{position:relative; display:block}
.rl-curtir .ic + .ic{position:absolute; left:0; top:0}
.rl-disco{width:calc(var(--pt)*30); height:calc(var(--pt)*30); border-radius:calc(var(--pt)*8); border:calc(var(--pt)*2) solid #fff; background:linear-gradient(135deg,#3DDC97,#0B5D7A)}
.rl-base{position:absolute; left:calc(var(--pt)*14); right:calc(var(--pt)*64); bottom:calc(calc(var(--pt0)*34) + calc(var(--pt)*70)); display:flex; flex-direction:column; gap:calc(var(--pt)*10)}
.rl-perfil{display:flex; align-items:center; gap:calc(var(--pt)*9)}
.rl-av .av-loja{border:calc(var(--pt)*1.5) solid #fff}
.rl-nome{display:block; font-size:calc(var(--pt)*14); font-weight:600; color:#fff; white-space:nowrap}
.rl-seguir{height:calc(var(--pt)*28); padding:0 calc(var(--pt)*11); border-radius:calc(var(--pt)*8); border:1px solid rgba(255,255,255,.75); display:grid; place-items:center; font-size:calc(var(--pt)*13); font-weight:600; white-space:nowrap}
.tela .rl-legenda{margin:0; font-size:calc(var(--pt)*13.5); line-height:1.3; color:rgba(255,255,255,.92)}
.rl-som{display:flex; align-items:center; gap:calc(var(--pt)*7)}
.rl-som svg{width:calc(var(--pt)*14); height:calc(var(--pt)*14); flex:none}
.rl-som span{font-size:calc(var(--pt)*12); color:rgba(255,255,255,.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rl-tempo{position:absolute; left:0; right:0; bottom:calc(calc(var(--pt0)*34) + calc(var(--pt)*50)); height:max(1.5px, calc(var(--pt)*2)); background:rgba(255,255,255,.28)}
.rl-tempo i{display:block; height:100%; width:62%; background:#fff}
.rl-nav{position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-around;
  padding:calc(var(--pt)*12) calc(var(--pt)*6) calc(calc(var(--pt0)*34) + calc(var(--pt)*4)); background:#000}
.rl-nav .ig-nav-av .av-loja{border:calc(var(--pt)*1) solid #fff}
/* a curtida nasce no quarto de baixo, ao lado da
   coluna de ícones (como o toque duplo perto do polegar), entre a manchete e a legenda, sem cobrir texto nenhum. */
.rl-coracao-g{position:absolute; left:auto; top:auto; right:calc(var(--pt)*58); bottom:calc(calc(var(--pt0)*34) + calc(var(--pt)*212)); width:calc(var(--pt)*84); height:calc(var(--pt)*84); margin:0; opacity:0; filter:drop-shadow(0 calc(var(--pt)*2) calc(var(--pt)*10) rgba(0,0,0,.3)); pointer-events:none}
/* Reels tocando (2 s): o quadro respira, a barra de tempo anda e o Reel é curtido. Parado: barra a 62%, coração vermelho */
.tela-reels.tocando .rl-quadro{animation:rl-respira 1.4s cubic-bezier(.16,1,.3,1) both}
.tela-reels.tocando .rl-tempo i{animation:rl-tempo 1.6s linear both}
.tela-reels.tocando .rl-coracao-g{animation:ig-pulo .65s cubic-bezier(.2,.9,.3,1.2) .7s both}
.tela-reels.tocando .rl-curtido{animation:ig-curte .35s cubic-bezier(.3,1.6,.5,1) .75s both}
@keyframes rl-respira{from{transform:scale(1.06)}to{transform:none}}
@keyframes rl-tempo{from{width:18%}to{width:62%}}

/* ---------------- janela de busca (caso advogada): janela fina de navegador, filete, sem sombra pesada ---------------- */
.janela-busca{position:relative; width:100%; container-type:inline-size; background:#fff; border:1px solid var(--janela-borda,#E2E2DC); border-radius:var(--r-janela,14px); overflow:hidden; box-shadow:0 1px 2px rgba(17,17,19,.05)}
.tela.tela-busca{--pt:clamp(.85px, calc(100cqw / 440), 1.2px); position:relative; inset:auto; overflow:visible; background:#fff; color:#1F1F1F; font-family:Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; font-size:calc(var(--pt)*14)}
.jb-barra{height:calc(var(--pt)*26); display:flex; align-items:center; gap:calc(var(--pt)*6); padding:0 calc(var(--pt)*11); background:#FAFAF7; border-bottom:1px solid #E2E2DC}
.jb-barra>i{width:calc(var(--pt)*8); height:calc(var(--pt)*8); border-radius:50%; background:#D9D9D3; flex:none}
.jb-end{margin:0 auto; display:flex; align-items:center; gap:calc(var(--pt)*5); height:calc(var(--pt)*17); padding:0 calc(var(--pt)*12); border-radius:calc(var(--pt)*6); background:#EFEFEA; font-size:calc(var(--pt)*10); color:#5E5E66; transform:translateX(calc(var(--pt)*-16))}
.jb-pag{padding:calc(var(--pt)*14) calc(var(--pt)*16) calc(var(--pt)*16)}
.jb-busca{height:calc(var(--pt)*38); display:flex; align-items:center; gap:calc(var(--pt)*9); padding:0 calc(var(--pt)*14); border-radius:calc(var(--pt)*19); box-shadow:0 0 0 1px #DFE1E5, 0 1px 4px rgba(32,33,36,.12); font-size:calc(var(--pt)*14.5); white-space:nowrap; overflow:hidden}
.jb-busca span{overflow:hidden; text-overflow:ellipsis}
.jb-abas{display:flex; gap:calc(var(--pt)*18); margin-top:calc(var(--pt)*10); padding:0 calc(var(--pt)*4); border-bottom:1px solid #EBEBEB; font-size:calc(var(--pt)*12.5); color:#5F6368; white-space:nowrap}
.jb-abas span{padding-bottom:calc(var(--pt)*8); position:relative}
.jb-abas .on{color:#1F1F1F; font-weight:600}
.jb-abas .on::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:calc(var(--pt)*2.5); background:#1F1F1F; border-radius:2px 2px 0 0}
.jb-lista{display:flex; flex-direction:column; margin-top:calc(var(--pt)*12)}
.jb-res{display:grid; grid-template-rows:1fr}
.jb-res>div{min-height:0; overflow:hidden}
.jb-card{display:flex; flex-direction:column; align-items:flex-start; gap:calc(var(--pt)*5); padding:calc(var(--pt)*12) 0; border-bottom:1px solid #EFEFEF}
.jb-patro{padding:calc(var(--pt)*12) calc(var(--pt)*12) calc(var(--pt)*14); margin-bottom:calc(var(--pt)*4); border:1px solid #E3E3E3; border-radius:calc(var(--pt)*12); background:#fff}
.jb-tag{font-size:calc(var(--pt)*11); font-weight:700; color:#1F1F1F; letter-spacing:.01em}
.jb-nome{font-size:calc(var(--pt)*18); font-weight:400; color:#1A0DAB; line-height:1.2}
.jb-linha{font-size:calc(var(--pt)*12.5); color:#4D5156}
.jb-bts{display:flex; gap:calc(var(--pt)*16); margin-top:calc(var(--pt)*6)}
.jb-bt{display:flex; flex-direction:column; align-items:center; gap:calc(var(--pt)*4); font-size:calc(var(--pt)*11); font-weight:500; color:#0B57D0; white-space:nowrap}
.jb-bt i{width:calc(var(--pt)*32); height:calc(var(--pt)*32); border-radius:50%; background:#D3E3FD; display:grid; place-items:center; position:relative}
.jb-bt.cheio i{background:#0B57D0}
.jb-bt:last-child i::after{content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 calc(var(--pt)*2.5) #0B57D0; opacity:0}
.jb-outro{gap:calc(var(--pt)*5)}
.jb-nome--outro{font-size:calc(var(--pt)*15.5)}
.jb-fechado{color:#D93025; font-weight:500}
.tela-busca .barra{display:block; height:calc(var(--pt)*8); border-radius:calc(var(--pt)*4); background:#E8EAED}
.jb-estrelas-cinza{display:flex; gap:calc(var(--pt)*1)}
.jb-estrelas-cinza i{display:block; font-style:normal}
.jb-estrelas-cinza path{fill:#DADCE0}
/* busca tocando (2 s): o anúncio entra no topo e empurra os outros; estrelas, botões e o toque no WhatsApp */
.tela-busca.tocando .jb-res--patro{animation:bq-abre .5s cubic-bezier(.16,1,.3,1) .15s both}
.tela-busca.tocando .jb-patro{animation:bq-chega .5s cubic-bezier(.16,1,.3,1) .15s both}
.tela-busca.tocando .jb-patro .g-estrelas i{animation:g-estrela .25s cubic-bezier(.3,1.6,.5,1) calc(.45s + var(--i) * .05s) both}
.tela-busca.tocando .jb-bt{animation:g-bt .35s cubic-bezier(.3,1.5,.5,1) calc(.55s + var(--i) * .06s) both}
.tela-busca.tocando .jb-bt:last-child i::after{animation:g-toque .5s ease-out 1.15s both}

/* ---------------- selo: a notificação do iOS que confirma a marcação ----------------
   Um lugar só, em todo aparelho: DENTRO da tela, no topo, logo abaixo da ilha (onde o iPhone mostra a notificação),
   no mesmo vidro claro das notificações da tela de bloqueio e do vídeo do Google. Mora na .iphone-tela, que recorta
   o que passar da borda: nunca atravessa a moldura e nunca cobre a caixa de mensagem. Medidas em pontos de iOS:
   a posição em --pt0 (fica sempre abaixo da ilha) e o texto em --pt, com o mesmo "chegar mais perto" do app
   quando o aparelho é pequeno. Entra só com opacidade e escala, já no lugar de repouso (nunca para embaixo da ilha). */
.selo{
  --z:1; --pt:calc(100cqw / 393 * var(--z));
  position:absolute; z-index:6; left:calc(var(--pt0)*8); right:calc(var(--pt0)*8); top:calc(var(--pt0)*57);
  display:flex; align-items:center; gap:calc(var(--pt)*10);
  padding:calc(var(--pt)*10) calc(var(--pt)*13) calc(var(--pt)*10) calc(var(--pt)*11);
  border-radius:calc(var(--pt0)*22);
  background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(243,245,244,.93) 100%);
  -webkit-backdrop-filter:blur(calc(var(--pt0)*20)) saturate(1.6); backdrop-filter:blur(calc(var(--pt0)*20)) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(0,0,0,.08), 0 calc(var(--pt0)*8) calc(var(--pt0)*22) rgba(0,0,0,.16);
  color:#000; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  font-size:calc(var(--pt)*15); line-height:1.25; letter-spacing:normal; text-align:left; text-wrap:wrap;
  -webkit-font-smoothing:antialiased; pointer-events:none; transform-origin:50% 0;
}
@container (max-width:300px){ .selo{--z:1.16} }
@container (max-width:232px){ .selo{--z:1.3} }
@container (max-width:180px){ .selo{--z:1.42} .selo-quando{display:none} }
/* aparelho de miniatura (tela até 160 px): o texto ficaria abaixo de 8 px; a notificação não entra */
@container (max-width:160px){ .selo{display:none} }
.selo-ic{width:calc(var(--pt)*34); height:calc(var(--pt)*34); flex:none; display:block; border-radius:calc(var(--pt)*8); background:#111113}
.selo-ic svg{width:100%; height:100%; display:block}
.selo-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:calc(var(--pt)*1)}
.selo-cab{display:flex; align-items:baseline; justify-content:space-between; gap:calc(var(--pt)*8)}
.selo-tit{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.selo-quando{flex:none; font-size:calc(var(--pt)*13); color:#6B6B70; white-space:nowrap}
.selo-corpo{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.selo.tocando{animation:selo-entra .4s cubic-bezier(.16,1,.3,1) var(--a,0s) both}
@keyframes selo-entra{from{opacity:0; transform:scale(.96)}to{opacity:1; transform:none}}
/* com o vídeo V2 como tela, a notificação HTML não entra: o vídeo já traz a dele na ilha ("Sinal pago") e o
   aparelho mostra uma notificação de cada vez (texto nunca por cima de texto) */
.iphone[data-video] .selo{display:none}

/* ---------------- movimento reduzido: estado final, sem animação ---------------- */
@media (prefers-reduced-motion:reduce){
  .tela *,.tela,.selo{animation:none !important; transition:none !important}
}

/* Reels no aparelho pequeno: a capa respira (sem palavra sozinha na linha) */
@container (max-width:232px){ .rl-capa-tit{font-size:calc(var(--pt)*29)} .rl-quadro.rl-quadro--capa{padding-right:calc(var(--pt)*52)} }

/* ---------------- Google: avaliações neutras (caso real sem frase de paciente) ---------------- */
.tela-google.g-neutra .g-aval{gap:calc(var(--pt)*20)}
.tela-google.g-neutra .g-rev--mais{display:flex}
.g-rev--neutra .g-rev-av{background:#E8EAED !important; position:relative}
.g-rev--neutra .g-rev-av::before{content:""; position:absolute; left:50%; top:28%; width:34%; height:34%; margin-left:-17%; border-radius:50%; background:#BDC1C6}
.g-rev--neutra .g-rev-av::after{content:""; position:absolute; left:50%; bottom:14%; width:60%; height:28%; margin-left:-30%; border-radius:50% 50% 30% 30%; background:#BDC1C6}
.g-rev--neutra .g-rev-n{font-weight:400; color:#5F6368}

/* ---------------- Recorte do aparelho no celular ----------------
   Pra página que precisa de um celular pequeno numa tela de 375: em vez de encolher o aparelho inteiro até o texto
   ficar com 5 px, desenhe o aparelho grande (240 a 260 px) e mostre só a parte de cima, cortada com um esfumado.
   Uso: <div class="iphone-recorte" style="--recorte:.62"><div class="iphone" data-tela="google"></div></div>
   --recorte = fração da altura do aparelho que aparece (padrão .62). --iphone-w continua mandando na largura. */
.iphone-recorte{--recorte:.62; position:relative; overflow:hidden; width:var(--iphone-w,250px); max-width:100%;
  height:calc(var(--iphone-w,250px) / .482 * var(--recorte));
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent); mask-image:linear-gradient(180deg,#000 82%,transparent)}
.iphone-recorte > .iphone{margin:0}
/* sugestão pro celular: .minha-caixa .iphone-recorte{--iphone-w:min(68vw,260px)} (62 a 70% da largura da tela) */