/* 🔴 O ID FOI RENOMEADO — colisao medida em 01/09/2026, com PRINT do dono.
 *    A referencia chama o botao flutuante de `#agendar`. A pagina da clinica JA TINHA
 *    uma <section id="agendar"> -- o formulario de agendamento -- e esta regra a
 *    sequestrou: `position:fixed` numa secao de conteudo, 260px de largura, o
 *    formulario virou uma tira vertical por cima dos cards.
 * ⛔ COPIAR EM BLOCO NAO E SO COPIAR VALORES: os NOMES vem junto, e nome colide.
 * ⭐ A pergunta que pega a familia, antes de colar qualquer referencia:
 *    quais ids e classes dela JA EXISTEM na pagina de destino? Um grep responde.
 */
/* hero-cena.css — A CENA DE ABERTURA, COPIADA da referencia da Dra. Marina Duarte.
 *
 * ⛔ ESTE ARQUIVO NAO E UMA RELEITURA. Cada regra abaixo saiu, valor por valor, de
 *    templates/motion-referencia/marina-duarte-motion.html -- o artifact que o dono
 *    aprovou e mandou virar padrao ("exatamente isso, para TODAS as paginas").
 *
 * 🔴 FLAGRANTE QUE O PARIU, palavra dele em 01/09/2026:
 *    "a primeira foto que aparece nao tem texto nenhum ... uma foto com nada nao serve
 *     para nada ... tem que ter uma coisa para guiar a pessoa para baixo e ai depois ve a
 *     foto profissional ... o que ta vindo nao tem nada a ver com o que foi criado para
 *     dentista, nada a ver, ta totalmente fora, desconexo"
 *
 * ⭐ O QUE A CENA TEM, e faltava tudo na minha versao anterior:
 *      cam1  = a SALA        (foto de ambiente, entra em zoom lento)
 *      cam2  = o ROSTO       (o profissional, revelado por circulo que abre)
 *      .hcopy = olho + H1 POR CIMA da foto        <- ele: "nao tinha texto nenhum"
 *      #nomao = nome e linha de apoio do profissional
 *      #cartao = credencial + BOTAO de acao
 *      #dica  = "Desce"                            <- ele: "chama a setinha para baixo"
 *      #hero-cta = CTA fixo que sobe no fim
 *
 * ⚠️ AS CORES vem do proprio modelo, por variavel -- e so isso muda de pagina para
 *    pagina. A GEOMETRIA e o TEMPO nao mudam: e o que "igual ao da dentista" quer dizer.
 */

:root{
  --hero-fundo: var(--verde, #163f33);
  --hero-ouro:  var(--ouro,  #c9a227);
  --hero-claro: #fdfcf9;
  --hero-dim:   var(--ink-dim, #6b6257);
}

#palco{height:230svh;position:relative}
/* 🔴 O PAR NOME + CARTAO FLUI — regressao MINHA, achada medindo em 02/09/2026: com os
 *    dois em `bottom:` independentes, numa janela de 620 de altura eles colidiam em
 *    24 de 24 paginas. E o MESMO defeito das frases: ponto fixo num terreno que varia.
 * ⭐ Entao `#fixo` vira coluna e os dois descem em FLUXO, colados no rodape. Flex nao
 *    sobrepoe por construcao -- vale para qualquer altura de tela e qualquer nome. */
#fixo{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--verde,#163f33)}
.cam{position:absolute;inset:0;will-change:transform,opacity}
.cam img{width:100%;height:100%;object-fit:cover;display:block}
/* cena 1: clinica VIVA — sem véu pesado; legibilidade vem da tarja do texto */
/* 🔴 A SEGUNDA CAMADA E UM MARTELO DELE, 02/09/2026: "pode botar um pouquinho de sombra
 *    na foto de trás para a gente ler melhor os blocos de texto, mas só um pouco, de uma
 *    forma que não atrapalhe — que tá aparecendo um pouco demais aí a parte da TV".
 * ⭐ Escolhida por ele OLHANDO as três formas no servidor local (véu global × faixa só na
 *    coluna dos blocos × sombra no próprio bloco): ficou a GLOBAL, e a razão dele é a que
 *    manda — a queixa era a foto competindo, não os blocos precisando de moldura.
 * ⚠️ .22 e o teto do "só um pouco": acima disso a sala morre, e é a sala que prova ao
 *    lead que a estrutura serve ao negócio dele. */
#veu{position:absolute;inset:0;will-change:opacity;
    background:linear-gradient(180deg,rgba(246,242,234,.5),rgba(246,242,234,.06) 45%,rgba(22,63,51,.35)),
               linear-gradient(180deg,rgba(12,31,29,.22),rgba(12,31,29,.22))}
/* cena 2: A DOUTORA EM DESTAQUE — pôster */   #cam2{clip-path:circle(0% at 50% 46%)}  /* PISO: nasce com o medalhao ja visivel — pedido do dono, 01/09 */
#cam2 img{object-position:50% 18%;transform-origin:50% 30%}
#tinta{position:absolute;inset:0;opacity:0;
    background:linear-gradient(200deg,rgba(22,63,51,.0) 30%,rgba(22,63,51,.78) 78%),
               linear-gradient(20deg,rgba(201,162,90,.35),rgba(201,162,90,0) 40%)}
#nomao{position:absolute;left:0;right:0;bottom:29svh;z-index:3;text-align:center;
    opacity:0;transform:translateY(26px);will-change:opacity,transform}
/* 🔴 A LINHA GANHOU BLOCO — ordem dele, 02/09/2026: "o QUEM ATENDE VOCE esta ficando sem
 *    destaque, algumas fotos que sao mais claras, entao eu acho que ele tem que ter tambem
 *    um bloco ou algo do tipo".
 *
 * ⛔ Medido antes de mexer, o pior pixel da foto atras dela, nas 24 paginas com a cena:
 *      23 de 24 abaixo de 4,5:1  ·  17 delas em 1,00:1
 *    O 1,00 nao e arredondamento: e o dourado caindo sobre um ponto da foto com a MESMA
 *    luminancia. Ela nao ficava fraca -- ela sumia, e a sombra de texto era o unico
 *    motivo de ainda se enxergar alguma coisa.
 *
 * ⭐ A cura e a mesma que as frases ja usam: TARJA. Fundo proprio tira a linha da disputa
 *    com a foto, entao o contraste passa a ser contra um fundo que a casa controla -- e
 *    vale para qualquer foto de qualquer cliente, clara ou escura.
 * ⚠️ E a tinta muda junto, por medicao: sobre tarja clara o ouro da marca da ~2:1. O
 *    #715B16 e o mesmo escurecimento ja aprovado por ele para o `olho` das frases. */
#nomao .apre{display:inline-block;font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;
    color:#715B16;font-weight:700;margin-bottom:.6rem;text-shadow:none;
    background:rgba(246,242,234,.92);backdrop-filter:blur(6px);
    border-radius:999px;padding:.34rem .9rem;box-shadow:0 6px 22px rgba(10,20,16,.16)}
#nomao h2{font-family:'Fraunces',Georgia,serif;font-weight:600;
    font-size:clamp(2.2rem,10vw,3.8rem);line-height:1.02;color:#fdfcf9;
    text-shadow:0 3px 26px rgba(10,20,16,.65);letter-spacing:-.01em}
#nomao p{color:rgba(253,252,249,.92);font-size:1rem;margin-top:.5rem;
    text-shadow:0 1px 12px rgba(10,20,16,.7)}
/* 🔴 E O `space-between` FICA — eu ja tinha trocado por `center` e ELE MANDOU VOLTAR,
 *    em 02/09/2026: "ficou ruim como esta agora; como tava, tava bom -- as frases estavam
 *    bem distribuidas, so nao tava aparecendo direito na tela por causa da MENSAGEM"
 *    (o aviso de cookies, que cobre o rodape ate alguem responder).
 *
 * ⛔ E ESSA E A LICAO, nao o valor do CSS: a queixa anterior dele -- "o ultimo esta
 *    fugindo do quadro" -- eu li como defeito de LAYOUT e era OCLUSAO por um banner.
 *    Consertei o que nao estava quebrado e quebrei o que estava bom.
 * ⭐ A pergunta que teria evitado, e custa uma medicao: o que esta na FRENTE disso na
 *    tela dele? A minha medicao rodava sem o aviso, entao ela nunca veria a causa. */
.hcopy{position:absolute;inset:0;z-index:3;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:7svh 0 10svh}
.hcopy .tarja{display:inline-block;background:rgba(246,242,234,.88);backdrop-filter:blur(6px);
    border-radius:16px;padding:1.1rem 1.5rem;box-shadow:0 10px 34px rgba(10,25,19,.18)}
.hcopy .olho{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ouro,#c9a227);
    font-weight:700;margin-bottom:.5rem}
.hcopy h1{font-family:'Fraunces',Georgia,serif;font-weight:340;font-size:clamp(1.9rem,8vw,3rem);
    line-height:1.08;color:var(--verde,#163f33);text-wrap:balance}
.hcopy h1 em{font-style:italic;color:var(--ouro,#c9a227)}
/* 🔴 TODO `var(--x)` DESTA FOLHA LEVA VALOR DE RESERVA — flagrante do dono em 02/09/2026:
 *    "atendimento particular e convenio CRO 000, nao da nem para enxergar".
 * ⛔ Token que a pagina nao define deixa a declaracao INVALIDA, e o navegador nao avisa
 *    ninguem: nada no console, nada vermelho, e a propriedade cai para o valor herdado --
 *    que costuma ser plausivel. O `grep` acha a linha; a tela nao mostra o efeito dela.
 *
 * ⚠️ Medido nas 19 paginas com a cena, e a CLASSE era maior que o flagrante:
 *      `--branco` e `--ivory`  -> NENHUMA das 19 define
 *      `--verde`, `--ouro`, `--ink-dim` -> so a `clinica` define; as outras 18, nao
 *
 *    O que isso pintava, medido antes e depois:
 *      #cartao   -> fundo TRANSPARENTE (o CRO a 11,2px sobre a foto)  ->  5,98:1
 *      #hero-cta -> quase preto sobre o verde, no botao que CONVERTE  ->  7,63:1
 *      #nomao .apre ("QUEM CUIDA DE VOCE") -> PRETO sobre o palco verde,
 *                   1,49:1 em 18 paginas -- invisivel                 ->  4,84:1
 *
 * 🔴 E NENHUMA REGUA PEGAVA: a `prova-legibilidade` mede o texto sobre a FOTO, e a `.apre`
 *    aparece depois, sobre o palco. Regua verde sobre defeito, pela terceira vez no dia.
 * ⭐ Os valores de reserva sao os MESMOS que o `:root` desta folha ja declarava la em cima
 *    -- nao sao escolha nova, sao o padrao que ja existia e que so metade das regras usava. */
#cartao{position:absolute;left:0;right:0;bottom:4svh;margin-inline:auto;transform:translateY(34px);
    opacity:0;z-index:4;width:min(88vw,23rem);text-align:center;background:var(--branco,#fff);
    border:1px solid rgba(22,63,51,.12);border-radius:18px;padding:1.2rem 1.4rem 1.35rem;
    box-shadow:0 24px 60px rgba(10,25,19,.4);transition:opacity .2s linear,transform .2s linear}
#cartao .cro{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim,#6b6257);margin-bottom:.8rem}
#dica{position:absolute;bottom:3.4svh;left:50%;transform:translateX(-50%);z-index:3;
    color:#fdfcf9;font-size:1.15rem;line-height:1;opacity:.85;   /* 02/09: era "Desce" em .66rem; virou a seta, pedido dele */
    text-shadow:0 1px 8px rgba(10,20,16,.8)}
/* ⛔ `#fixo>.selo`, nunca `.selo`: a folha da PÁGINA vem depois desta e também define `.selo`
 *    (os selos do herói). No chaveiro (02/09/2026) o `.selo` dele — caixa alta, espaçado, maior —
 *    vencia este e o selo de demonstração saía cortado nas duas pontas a 390px. */
#fixo>.selo{position:absolute;top:calc(12px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
    z-index:5;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--verde,#163f33);
    border:1px solid rgba(22,63,51,.2);border-radius:999px;padding:.38rem .8rem;
    background:rgba(246,242,234,.75);backdrop-filter:blur(8px);white-space:nowrap}
#hero-cta{position:fixed;left:50%;transform:translateX(-50%) translateY(150%);
    bottom:calc(14px + env(safe-area-inset-bottom));z-index:9;background:var(--verde,#163f33);
    color:var(--ivory,#fdfcf9);font-weight:700;font-size:.96rem;padding:.9rem 1.7rem;border-radius:999px;
    text-decoration:none;box-shadow:0 10px 30px rgba(22,63,51,.35);
    transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}
#hero-cta.on{transform:translateX(-50%) translateY(0)}
/* ⛔ MARTELO DELE, 02/09/2026 ("aquele duplo de ligar e de WhatsApp, um do lado do outro, eles
 *    mantêm; aquele único que apareceu lá sozinho, pegando na borda da página, some"): no
 *    celular a demo já tem a barra dupla (.acao-mobile, ≤760px, em demo.css) e a pílula da cena
 *    empilhava por baixo dela. Onde a barra existe, a pílula não aparece. No desktop não há
 *    barra, e a pílula fica — é a referência aprovada. */
/* 🔴 E às 13h50 ele viu a pílula no DESKTOP do chaveiro, cortada pela barra do selo de
 *    demonstração ("o botão continua aparecendo, dessa vez pior ainda, cortando"). A pílula
 *    sai em TODA largura: a barra dupla (celular) e o topo (desktop) já têm o CTA. */
#hero-cta{display:none}

/* ⭐ A SEGUNDA LINHA e os CHIPS — pedido do dono em 01/09/2026: "começa com H1, começa com algumas
 *    frases ou algo do tipo que conduz a pessoa ali para baixo".
 * ⛔ Ela NAO existe na referencia da dentista: e o "dali pra melhor" que ele autorizou. */
.hcopy .apoio{margin-top:.7rem;font-size:.95rem;line-height:1.45;color:var(--hero-dim);
  max-width:26rem;margin-left:auto;margin-right:auto}

/* ⛔ E O TEXTO NAO SE INVENTA: a frase e os tres chips sao os que JA estavam no heroi
 *    antigo desta pagina, recuperados do arquivo antes de ele ser substituido.
 *    Palavra dele: "a gente pode comecar com algumas daquelas frases que ja ficava no
 *    inicio do site". ⭐ Copiar tambem vale para a COPY, nao so para o CSS. */
.hcopy .chips{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:.9rem;
  list-style:none;padding:0}
.hcopy .chips li{font-size:.7rem;letter-spacing:.02em;color:var(--hero-fundo);
  background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.06);
  border-radius:999px;padding:.32rem .7rem;white-space:nowrap}

/* 🔴 A TARJA ENCOLHE NO CELULAR — medido em 01/09/2026, com print do dono.
 * ⛔ Com `object-fit:cover` a ALTURA da foto casa 1:1 com a tela, entao o rosto desta
 *    foto cai SEMPRE a ~45% — e o circulo tem de estar la. Nao ha object-position que
 *    resolva: no eixo Y ele nao tem efeito quando a altura e a dimensao restritiva.
 * ⭐ Entao quem cede e a TARJA: ela sobe e encolhe, para terminar acima dos 34%.
 * ⚠️ Isto NAO e a referencia — la a tarja e curta porque o H1 tem 4 palavras. Aqui ela
 *    carrega o H1 + a frase real do site + 3 chips, por pedido dele. */
@media (max-width: 640px){
  /* ⛔ removido: largura de TARJA numa .hcopy que virou CAMADA — deslocava a coluna 16px */
  
  .hcopy h1{font-size:clamp(1.35rem,5.6vw,1.9rem);line-height:1.12}
  .hcopy .olho{font-size:.58rem;letter-spacing:.24em;margin-bottom:.35rem}
  
  
  
}

/* ⭐ ESTADO INICIAL das frases: escondidas, esperando a rolagem. O JS as acende em cascata. */
.hcopy .apoio,.hcopy .chips li{opacity:0;transform:translateY(10px);
  transition:opacity .35s ease,transform .35s cubic-bezier(.16,1,.3,1)}

/* 🔴 AS FRASES SAO BLOCOS EMPILHADOS — pedido do dono, 01/09/2026:
 *    "ter um bloco embaixo do bloco, tem frases, e ai conforme vai descendo a tela
 *     NUNCA FICA VAZIA; depois emenda na foto".
 * ⛔ A primeira tentativa espalhou as frases pelos cantos e estava errada: ele nao
 *    pediu dispersao, pediu PILHA — uma embaixo da outra, ocupando a coluna.
 * ⭐ O criterio de pronto e dele e e simples: rolando, nunca ha tela vazia. */
/* 🔴 AS FRASES DEIXARAM DE TER POSICAO FIXA — flagrante dele em 02/09/2026, com print:
 *    "ta errado, vou ter que ficar corrigindo esse detalhe em todos eles? a gente ja tem
 *     o modelo pronto e aprovado, por que que os outros vao ter que sair diferente? olha
 *     ai a frase uma por cima da outra".
 *
 * ⛔ A PERGUNTA DELE E A CAUSA: elas moravam em `top: 25svh / 39svh / 53svh`, numeros
 *    fixos, e o TEXTO de cada cliente tem tamanho diferente. A `clinica` -- que ele
 *    aprovou -- tem frases curtas e coube; a `advogados` tem um paragrafo de 4 linhas e
 *    invade a de baixo. O modelo aprovado nao estava certo: estava com sorte.
 *
 * ⚠️ E o defeito e de ALTURA DE JANELA, nao de pagina -- por isso ele via e eu nao.
 *    Medido, frase sobre frase:
 *        1000x620 -> 19 de 19        1440x800 -> 16 de 19
 *        1200x700 -> 16 de 19        1440x900 ->  2 de 19        1680x1050 -> 0
 *
 * ⭐ A cura e estrutural, nao de numero: COLUNA em fluxo. Flex nao sobrepoe por
 *    construcao, entao texto de qualquer tamanho cabe -- em qualquer janela, para
 *    qualquer cliente, sem ninguem "corrigir esse detalhe em todos eles".
 * ⭐ E o `space-between` guarda o pedido dele de 01/09 ("e esse espaco vazio, que que eu
 *    faco da minha vida com esse espaco"): a pilha continua ocupando a altura inteira.
 * ⛔ O `translateX(-50%)` SAIU do JS junto: ele existia so porque a frase era absoluta
 *    com `left:50%`. Em fluxo centrado ele empurraria tudo meia largura para a esquerda. */
.hcopy .frase{position:static;opacity:0;
  transform:translateY(16px);
  width:min(90vw,30rem);text-align:center;
  transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1)}

.hcopy .f1{background:rgba(246,242,234,.9);backdrop-filter:blur(6px);
  border-radius:16px;padding:.9rem 1.1rem;box-shadow:0 10px 34px rgba(10,20,16,.18)}
.hcopy .f1 .olho{display:block;font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--hero-ouro);font-weight:700;margin-bottom:.4rem}
.hcopy .f1 h1{font-family:'Fraunces',Georgia,serif;font-weight:340;
  font-size:clamp(1.4rem,6vw,2.4rem);line-height:1.1;color:var(--hero-fundo)}
.hcopy .f1 h1 em{font-style:italic;color:var(--hero-ouro)}

.hcopy .f2,.hcopy .f3,.hcopy .f4{width:min(90vw,30rem);font-size:clamp(.82rem,3.6vw,1.02rem);line-height:1.35;
  color:var(--hero-fundo);background:rgba(246,242,234,.9);backdrop-filter:blur(4px);
  border-radius:12px;padding:.6rem .9rem;box-shadow:0 6px 22px rgba(10,20,16,.16)}
.hcopy .f5,.hcopy .f6{width:auto;max-width:min(90vw,30rem);font-size:.68rem;color:var(--hero-fundo);
  background:rgba(255,255,255,.86);border:1px solid rgba(0,0,0,.06);
  border-radius:999px;padding:.32rem .8rem;box-shadow:0 4px 14px rgba(10,20,16,.14)}

/* a PILHA: uma embaixo da outra, cobrindo a coluna toda — sem vao vazio */
/* ⭐ COLUNA, nao blocos soltos — flagrante dele: "ta tudo descentralizado".
 *    Mesma largura, mesmo eixo, ritmo apertado: le como UMA peca descendo. */
/* 🔴 A COLUNA OCUPA A ALTURA INTEIRA — flagrante dele, 01/09: "e esse espaco vazio,
 *    que que eu faco da minha vida com esse espaco". A pilha estava toda na metade de
 *    cima e o terco de baixo nascia morto. */


/* 🔴 DOIS FLAGRANTES DELE NA MESMA TELA, 01/09/2026:
 *    "essa informacao do CRO que ta escondida, ta mal colocada" -> #nomao e #cartao
 *      se sobrepunham: a linha de apoio caia POR CIMA da credencial.
 *    "a foto ta pegando a pagina toda, tem que ter uma borda do lado" -> a cena era
 *      full-bleed de borda a borda. */

/* a foto respira: moldura com cantos, em vez de sangrar ate a borda */
#fixo{padding:10px;background:var(--hero-fundo);clip-path:inset(10px round 18px)}
/* ⛔ o clip-path e o que faz a borda EXISTIR: #cam1 leva scale(1.14) e transbordava o
 *    padding; overflow:hidden corta na caixa de BORDA, nao na de conteudo. */
#fixo .cam,#fixo #veu,#fixo #tinta{inset:10px;border-radius:18px;overflow:hidden}
#fixo .cam img{border-radius:18px}

/* ⛔ o CRO deixa de disputar espaco com a linha de apoio: sobe para dentro do cartao,
 *    e o #nomao ganha folga por baixo. */
@media (max-width:640px){
  #nomao h2{font-size:clamp(1.9rem,8.5vw,3rem)}
  #nomao p{font-size:.92rem;padding:0 1.2rem}
  #cartao .cro{font-size:.62rem;letter-spacing:.12em}
}

/* 🔴 A TINTA DOURADA DA CENA — martelada por ele em 02/09/2026, por questionário,
 *    olhando as quatro versões no servidor local.
 * ⛔ O #C9A227 da referência dá 2,17:1 sobre a tarja #F6F2EA — abaixo do WCAG nos dois.
 * ⭐ A escolha foi a MISTA, e a razão é de tamanho, não de gosto:
 *      `em` do H1 = 38,4px -> texto GRANDE, exige 3:1
 *      `olho`     =  9,6px -> texto MIUDO, exige 4,5:1
 *    Assim o dourado grande, que é o que carrega a marca, quase não muda.
 *
 * 🔴 E OS NUMEROS FORAM CORRIGIDOS NO MESMO DIA, por erro MEU de medição: eu calculei
 *    o contraste sobre a tarja IDEAL (#F6F2EA, o valor do CSS) e a régua mede o PIXEL
 *    RENDERIZADO — que é a tarja a 90% sobre a foto, mais o véu novo. O fundo real,
 *    medido com a tinta em `transparent` para preservar o layout, é **#E4E1E1**.
 * ⛔ Contra ele os valores da primeira volta davam 3,87 e 2,65 — reprovando os dois.
 * ⭐ O alvo que ele martelou não mudou; mudaram os números que o alcançam, e agora com
 *    folga (3,42 e 5,03) em vez de colados no piso. */
.hcopy .f1 h1 em{color:#91741C}
.hcopy .f1 .olho{color:#715B16}

/* 🔴 A FOTO DE PESSOA É RETRATO E O PALCO NO DESKTOP É PAISAGEM — flagrante do dono
 *    em 02/09/2026: "está tudo cortado da foto, tá tudo esquisito, só está bom no celular".
 * ⛔ Medido: cam2 é 520x780; num palco de 1420x880 sobra 41% da ALTURA dela — o rosto
 *    sai da tela e fica uma orelha ocupando 1440px. No celular sobram 100%, e por isso
 *    o defeito não aparecia lá: a cena nasceu SEM desenho de desktop (o único
 *    @media (min-width:900px) daqui só reposicionava as frases).
 * ⭐ No desktop ela deixa de sangrar e vira coluna retrato centralizada: 100% nas duas.
 * ⚠️ A pilha — foto, nome, cartão — foi conferida SEM SOBREPOSIÇÃO em seis alturas de
 *    tela (900 · 800 · 1050 · 720 · 1080 · 768), rodando, nunca por aritmética. */
@media (min-width:900px){
  /* ⛔ ENQUADRAMENTO — flagrante dele em 02/09/2026: "esse bloco do agendar avaliação tá
   *    quase encostando na foto embaixo, tá uma linhazinha... melhor enquadramento de tudo".
   * ⚠️ Medido: o cartão terminava a 18px do fim do palco, e o topo do medalhão entrava
   *    39px POR BAIXO do cabeçalho (que mede 75px em toda largura, medido de 1024 a 1920).
   * ⭐ Por isso o medalhão deixa de ser CENTRADO e passa a ser ANCORADO abaixo do
   *    cabeçalho: centragem por porcentagem muda de lugar a cada altura de tela, âncora
   *    não. E ele CEDE a altura quando a tela é baixa — os 465px são a soma medida do que
   *    a pilha precisa embaixo (nome 171 + cartão 147 + as folgas), para o conserto não
   *    valer só em 1440x900. */
  /* 🔴 A FOTO ENTRA NO MESMO FLUXO — ordem dele, 02/09/2026: "agora ficou muito pra
   *    baixo, ele pode ficar mais colado com a foto".
   * ⛔ A causa era estrutural: a foto era ABSOLUTA e o nome FLUIA. Flex nao sabe onde
   *    termina o que esta fora do fluxo, entao o vao entre os dois era o que sobrasse da
   *    altura da tela -- e nao a distancia que alguem escolheu.
   * ⭐ Com os tres no mesmo fluxo (foto -> nome -> cartao), o `gap` manda, e "colado"
   *    passa a ser um numero da casa em vez de um resto de conta. */
  /* ⛔ A COLUNA E SO DO DESKTOP -- regressao MINHA, medida em 02/09/2026: com ela valendo
   *    tambem no celular, o cartao vazava 24px para fora do palco em 24 de 24 paginas e
   *    sobrepunha o nome. A razao e estrutural: no celular o `#cam2` E o fundo inteiro
   *    (absoluto), entao so o nome e o cartao ficavam no fluxo -- e nao cabiam.
   * ⭐ No celular eles voltam a ser absolutos, que e o estado que sempre funcionou la. */
  #fixo{display:flex;flex-direction:column;justify-content:center;align-items:center;
    gap:clamp(.4rem,1.4svh,1rem);padding-block:calc(75px + 2svh) 4svh}
  #nomao{position:static;width:100%;bottom:auto}
  #cartao{position:static;bottom:auto;margin-inline:auto}
  #fixo #cam2{
    position:static; inset:auto; flex:none;
    height:min(38svh, calc(100svh - 420px)); width:auto; aspect-ratio:520/780;
    transform:none;
    box-shadow:0 30px 90px rgba(10,25,19,.45);
  }
  /* ⭐ O PAR NOME + CARTAO SE APROXIMA — ordem dele, 02/09/2026: "entre o Piscinas Modelo
   *    e o CTA de baixo tem um espaco, voce pode usar melhor esse espaco centralizando os
   *    dois" e "pode descer um pouquinho o nome modelo".
   * ⛔ O nome DESCE (bottom menor) e o cartao SOBE (bottom maior): o vao entre eles encolhe
   *    ~6svh e o par passa a ocupar o centro do terreno que sobra abaixo do medalhao, em
   *    vez de ficar um colado no meio e o outro colado na borda. */
  /* ⛔ o nome e a linha de apoio tinham altura FIXA em px: numa tela de 720 de altura
   *    eles comiam 46% do palco e a pilha se sobrepunha. Aqui eles se medem pela
   *    ALTURA da tela, como o medalhão — senão o conserto valeria só em 1440x900. */
  #nomao h2{font-size:clamp(1.7rem,5.6svh,3.4rem)}
  #nomao p{font-size:clamp(.85rem,1.9svh,1rem)}
  #nomao .apre{font-size:clamp(.6rem,1.4svh,.72rem)}
}