/* ═══════════════════════════════════════════════════════════
   site.css — camada de página do site Lorenci.
   Tokens vêm de styles.css (pasta tokens/). Aqui ficam apenas as
   primitivas compartilhadas entre index, agendamento, atualizações,
   política e admin — para que nenhuma página redefina a paleta.
   ═══════════════════════════════════════════════════════════ */
@import url("styles.css?v=2");

/* ── layout ── */
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.wrap-narrow{max-width:760px}
.band{padding:clamp(64px,9vw,116px) 0}

/* ── tipografia utilitária ── */
.serif{font-family:var(--font-display);font-weight:var(--fw-regular);letter-spacing:var(--ls-tight);text-wrap:pretty}
.eyebrow{font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--fs-eyebrow);line-height:1;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-accent)}
.on-deep .eyebrow{color:var(--brand-sand)}
.lede{color:var(--text-muted);font-size:var(--fs-lead);line-height:var(--lh-relaxed)}
.crm{font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--fs-eyebrow);letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}

/* ── botões ──
   Alvo mínimo 44px (WCAG 2.5.8). Contrastes: branco sobre --brand-deep 12.5:1,
   sobre o hover 7.1:1; --lw-ink sobre --brand-gold 7.0:1. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:44px;padding:14px 30px;border:0;border-radius:var(--radius-pill);cursor:pointer;
font-family:var(--font-body);font-weight:var(--fw-bold);font-size:var(--fs-small);letter-spacing:.03em;
transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.btn svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-primary{background:var(--brand-deep);color:var(--text-on-deep)}
.btn-primary:hover{background:var(--brand-deep-hover);color:var(--text-on-deep);transform:translateY(-2px)}
.btn-gold{background:var(--brand-gold);color:var(--lw-deep)}
.btn-gold:hover{background:#fff;color:var(--lw-deep);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--text-on-deep);border:1px solid rgba(255,255,255,.32)}
.btn-ghost:hover{background:rgba(255,255,255,.1);color:var(--text-on-deep)}
.btn-block{width:100%}
.btn:active{transform:scale(var(--press-scale))}

/* ── link com seta ── */
.cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;
font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--fs-small);color:var(--brand-deep)}
.cta:hover{color:var(--brand-accent)}
.cta svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-base) var(--ease-out)}
.cta:hover svg{transform:translateX(4px)}

/* ── formulários ──
   Borda em --border-field (3.5:1) para cumprir WCAG 1.4.11. */
.field{display:block;margin-bottom:var(--sp-5)}
.field > label,label.field-label{display:block;font-family:var(--font-body);font-weight:var(--fw-semibold);
font-size:var(--fs-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:9px}
.input,input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],input[type=number],select,textarea{
width:100%;font-family:var(--font-body);font-size:var(--fs-body);line-height:1.5;color:var(--text-heading);
background:var(--surface-card);border:1px solid var(--border-field);border-radius:var(--radius-sm);
padding:12px 14px;min-height:44px;transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
textarea{resize:vertical;min-height:110px}
.input:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-accent);box-shadow:0 0 0 3px rgba(39,121,132,.18)}
.hint{margin-top:6px;font-size:var(--fs-micro);color:var(--text-muted)}

/* ── superfícies ── */
.card{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-sm);padding:clamp(24px,3vw,34px)}
.rule{width:44px;height:1px;background:var(--brand-sand);opacity:.75;margin:26px 0 22px}
.deep,.topbar,.site-footer{--text-heading:var(--text-on-deep);--text-body:var(--text-on-deep-muted);
--text-accent:var(--text-on-deep-accent);--text-link:var(--text-on-deep-muted);--focus-ring:var(--focus-ring-on-deep)}
.deep{background:var(--surface-deep);color:var(--text-on-deep)}

/* ── barra superior das páginas internas ── */
.topbar{background:var(--surface-deep);padding:16px clamp(20px,5vw,48px);
display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar .brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);
font-size:17px;color:var(--text-on-deep);letter-spacing:var(--ls-tight)}
.topbar .brand img{height:30px;width:auto}
.topbar .back{display:inline-flex;align-items:center;min-height:44px;
font-family:var(--font-body);font-size:var(--fs-label);font-weight:var(--fw-semibold);color:var(--text-on-deep-muted)}
.topbar .back:hover{color:var(--text-on-deep)}

/* ── rodapé ── */
.site-footer{background:var(--surface-footer);color:var(--text-on-deep-muted);
padding:clamp(48px,6vw,76px) 0 40px;font-size:var(--fs-label)}
.site-footer h4{font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);
letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--brand-sand);margin-bottom:12px}
.site-footer a{color:var(--text-on-deep-muted)}
.site-footer a:hover{color:var(--text-on-deep-accent)}
.site-footer .f-legal{font-size:var(--fs-micro);color:rgba(255,255,255,.7)}

/* ── vídeo vertical de página ──────────
   Um vídeo por página dedicada, gravado no formato de Reels (9:16). O bloco
   só entra na build quando o arquivo existe (ver build.py e videos.json) —
   página sem vídeo gravado não ganha um retângulo vazio, que é o problema que
   a home tem hoje. O vídeo é servido pelo próprio domínio: não há player de
   terceiro, então nada carrega cookie antes do consentimento. */
.video-secao{border-top:1px solid var(--border-hairline);padding:clamp(36px,5vw,56px) 0}
.video-secao .wrap{display:grid;gap:clamp(20px,3.5vw,40px);align-items:center;
  grid-template-columns:minmax(0,300px) minmax(0,1fr)}
.video-quadro{position:relative;width:100%;max-width:300px;aspect-ratio:9/16;
  background:var(--surface-deep);border:1px solid var(--border-hairline);
  border-radius:var(--radius-sm);overflow:hidden;
  box-shadow:0 24px 50px -30px rgba(18,48,44,.55)}
.video-quadro video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;background:#000}
.video-texto h2{font-size:var(--fs-subheading);margin:12px 0 10px;color:var(--text-heading)}
.video-texto p{color:var(--text-muted);font-size:var(--fs-body);
  line-height:var(--lh-relaxed);max-width:44ch;margin:0}
.video-texto .duracao{display:inline-block;margin-top:16px;font-family:var(--font-body);
  font-weight:var(--fw-semibold);font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--text-muted);
  border:1px solid var(--border-hairline);border-radius:var(--radius-pill);padding:7px 14px}
/* No celular o vídeo vem depois do texto: quem rolou até aqui já leu a chamada,
   e assim o retrato não empurra o conteúdo para fora da primeira tela. */
@media(max-width:720px){
  .video-secao .wrap{grid-template-columns:1fr;justify-items:center;text-align:center}
  .video-secao .video-quadro{order:2}
  .video-texto{order:1}
  .video-texto p{max-width:38ch;margin:0 auto}
}

/* Fachada do YouTube: o poster é nosso e o player só é buscado no clique,
   pela mesma razão dos mapas — embed comum grava cookie do Google antes de
   qualquer consentimento e carrega quase um megabyte de JavaScript. */
.video-quadro .video-abrir,.reel .video-abrir{position:absolute;inset:0;width:100%;height:100%;
  padding:0;border:0;background:none;cursor:pointer;display:block}
.video-quadro .video-abrir img,.reel .video-abrir img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.video-quadro .video-abrir:focus-visible,.reel .video-abrir:focus-visible{outline:2px solid var(--brand-sand);outline-offset:-4px}
.video-quadro iframe,.reel iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:var(--radius-circle);display:grid;place-items:center;
  background:rgba(14,58,55,.62);border:1px solid rgba(255,255,255,.55);
  transition:background var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.video-play svg{width:24px;height:24px;fill:#fff;stroke:none;margin-left:3px}
.video-abrir:hover .video-play{background:rgba(14,58,55,.84);transform:translate(-50%,-50%) scale(1.06)}

/* A capa fica no lugar reservado e o palco sai por cima dela. Quando o vídeo
   vai flutuar, é o palco que se solta — o quadro continua ocupando o mesmo
   espaço, com a capa ao fundo, então a página não pula nem abre um buraco. */
.video-capa-fundo{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.video-palco{position:absolute;inset:0}

/* Só chega aqui depois que a pessoa deu play e continuou rolando. Nada flutua
   por conta própria: caixa que persegue quem está lendo é padrão de anúncio. */
.video-palco.flutuando{position:fixed;inset:auto 16px 16px auto;
  width:186px;height:331px;z-index:60;overflow:hidden;
  border-radius:var(--radius-sm);background:#000;
  box-shadow:0 18px 44px -14px rgba(18,48,44,.6)}
@media(max-width:520px){
  .video-palco.flutuando{width:150px;height:267px;inset:auto 12px 12px auto}
}
.video-quadro video,.reel video{cursor:pointer}
.video-fechar{display:none}
.video-palco[data-ativo] .video-fechar{display:grid;place-items:center;
  position:absolute;top:6px;right:6px;z-index:2;width:32px;height:32px;
  border:0;border-radius:var(--radius-circle);cursor:pointer;
  background:rgba(10,39,36,.74);color:#fff}
.video-palco[data-ativo] .video-fechar:hover{background:rgba(10,39,36,.92)}
.video-palco[data-ativo] .video-fechar:focus-visible{outline:2px solid var(--brand-sand);
  outline-offset:2px}
.video-fechar svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round}

/* ── formulário de contato ─────────────
   O mesmo em toda página que o mostra: /contato/ e a home. Por isso mora
   aqui e não no bloco de uma página só — foi assim que o acordeão da home
   ficou sem estilo uma vez, por estar preso ao <style> de outra página. */
/* ── o formulário ── */
.lead-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:clamp(28px,5vw,56px);align-items:start}
@media(max-width:860px){.lead-grid{grid-template-columns:1fr}}
.lead-form .pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.lead-form .pair{grid-template-columns:1fr}}
.lead-form label{display:block;font:var(--fw-semibold) var(--fs-label)/1.4 var(--font-body);
  color:var(--text-heading);margin-bottom:6px}
.lead-form input[type=text],.lead-form input[type=email],.lead-form input[type=tel]{
  width:100%;padding:13px 14px;border:1px solid var(--border-field);border-radius:var(--radius-sm);
  background:var(--surface-card);color:var(--text-body);font:400 15.5px/1.4 var(--font-body);min-height:48px}
.lead-form input:focus-visible{outline:2px solid var(--brand-accent);outline-offset:1px;border-color:var(--brand-accent)}
.lead-form input[aria-invalid="true"]{border-color:var(--danger)}
.lead-form .campo{margin-bottom:18px}
.lead-form .erro{margin:6px 0 0;font-size:var(--fs-micro);color:var(--danger)}

/* Turno e unidade em cartões clicáveis: no celular um menu suspenso esconde as
   opções atrás de um toque, e aqui a escolha é o miolo do formulário. */
.opcoes{display:grid;gap:10px;margin:0;padding:0;border:0}
.opcoes.turnos{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.opcao{position:relative;display:block}
.opcao input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opcao span{display:block;padding:14px 16px;border:1px solid var(--border-field);
  border-radius:var(--radius-sm);background:var(--surface-card);
  font:var(--fw-semibold) 15px/1.35 var(--font-body);color:var(--text-heading);transition:.18s}
.opcao span small{display:block;font-weight:400;font-size:13px;color:var(--text-muted);margin-top:3px}
.opcao input:checked + span{border-color:var(--brand-accent);background:var(--surface-tint);
  box-shadow:inset 0 0 0 1px var(--brand-accent)}
.opcao input:focus-visible + span{outline:2px solid var(--brand-accent);outline-offset:2px}
.opcao span:hover{border-color:var(--brand-accent-soft)}
legend{font:var(--fw-semibold) var(--fs-label)/1.4 var(--font-body);color:var(--text-heading);
  margin-bottom:10px;padding:0}
fieldset{border:0;padding:0;margin:0 0 22px}

/* consentimento */
.consent{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;margin:4px 0 22px;
  background:var(--surface-tint);border:1px solid var(--border-hairline);border-radius:var(--radius-sm)}
.consent input{margin:2px 0 0;width:20px;height:20px;flex:none;accent-color:var(--brand-accent)}
.consent label{margin:0;font-weight:400;font-size:14.5px;line-height:1.6;color:var(--text-body)}

.enviar{display:inline-flex;align-items:center;gap:10px;background:var(--brand-deep);color:#fff;
  border:0;border-radius:var(--radius-pill);padding:16px 30px;cursor:pointer;
  font:var(--fw-bold) 16px/1 var(--font-body);min-height:54px;transition:.2s}
.enviar:hover{background:var(--brand-deep-hover);transform:translateY(-1px)}
.enviar:disabled{opacity:.6;cursor:wait;transform:none}
.enviar svg{width:18px;height:18px;fill:currentColor;stroke:none}
.nota{margin-top:14px;font-size:var(--fs-micro);color:var(--text-muted);line-height:1.7;max-width:52ch}
.aviso-form{margin-top:16px;padding:14px 16px;border-radius:var(--radius-sm);font-size:14.5px;line-height:1.6}
.aviso-form[data-tipo="erro"]{background:var(--danger-bg);color:var(--danger)}
.aviso-form[data-tipo="ok"]{background:var(--ok-bg);color:var(--ok)}

/* coluna de apoio */
.apoio{background:var(--surface-card);border:1px solid var(--border-hairline);
  border-radius:var(--radius-sm);padding:clamp(22px,3vw,28px)}
.apoio h2{font-size:var(--fs-subheading);margin-bottom:12px}
.apoio p{font-size:14.5px;line-height:1.65;color:var(--text-muted);margin-bottom:14px}
.apoio .zap{display:inline-flex;align-items:center;gap:9px;color:var(--brand-deep);
  font:var(--fw-bold) 15px/1 var(--font-body);min-height:44px}
.apoio .zap svg{width:19px;height:19px;fill:currentColor;stroke:none}
.apoio hr{border:0;border-top:1px solid var(--border-hairline);margin:18px 0}
.apoio dl{margin:0;font-size:14px;line-height:1.6}
.apoio dt{font-weight:var(--fw-bold);color:var(--text-heading);margin-top:12px}
.apoio dt:first-child{margin-top:0}
.apoio dd{margin:2px 0 0;color:var(--text-muted)}

/* ── quem atende ─────────────────────────
   Um rosto e a nota real do Google, logo antes do convite para marcar. As
   páginas de assunto argumentavam bem e não mostravam ninguém: quem chega de
   um anúncio precisa ver com quem vai falar antes de decidir. Fica aqui, e não
   no <style> de cada página, porque é o mesmo bloco em todas. */
.medico-band{background:var(--surface-card);border-top:1px solid var(--border-hairline);
  border-bottom:1px solid var(--border-hairline);padding:clamp(38px,5vw,60px) 0}
.medico-card{display:grid;grid-template-columns:minmax(0,212px) minmax(0,1fr);
  gap:clamp(22px,4vw,44px);align-items:center}
.medico-foto{width:100%;max-width:212px;height:auto;display:block;
  border-radius:var(--radius-sm);box-shadow:0 18px 40px -22px rgba(18,48,44,.45)}
.medico-texto h2{font-size:var(--fs-subheading);margin:10px 0 6px;color:var(--text-heading)}
.medico-crm{font-family:var(--font-body);font-weight:var(--fw-semibold);
  font-size:var(--fs-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--text-muted);margin-bottom:14px}
.medico-texto p{color:var(--text-body);font-size:var(--fs-body);
  line-height:var(--lh-relaxed);max-width:52ch;margin:0}
.gscore-claro{display:inline-flex;align-items:center;gap:10px;margin-top:20px;
  min-height:44px;padding:9px 17px;border:1px solid var(--border-field);
  border-radius:var(--radius-pill);color:var(--text-heading);
  font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:12px;line-height:1;
  letter-spacing:var(--ls-caps);text-transform:uppercase;transition:.25s;
  background:var(--surface-tint)}
.gscore-claro:hover{border-color:var(--brand-accent);background:var(--surface-tint)}
.gscore-claro .stars{display:flex;gap:3px;color:var(--lorenci-gold)}
.gscore-claro .stars svg{width:15px;height:15px}
.gscore-claro .gscore-num{font-family:var(--font-display);font-size:19px;
  font-weight:var(--fw-regular);letter-spacing:0;text-transform:none;color:var(--text-heading)}
@media(max-width:640px){
  .medico-card{grid-template-columns:1fr;justify-items:center;text-align:center}
  .medico-texto p{margin:0 auto}
}

/* ── acessibilidade ── */
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--brand-sand);color:var(--lw-deep);
padding:13px 22px;border-radius:0 0 6px 0;font:var(--fw-bold) var(--fs-small)/1 var(--font-body)}
.skip:focus{left:0}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ── fluidez (29/09): entrada suave, hover, FAQ que abre deslizando ── */
.revela{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease-out,ease),transform .55s var(--ease-out,ease)}
.revela.revelado{opacity:1;transform:none}
section[id]{scroll-margin-top:24px}
.unit{transition:background .3s,box-shadow .25s,transform .25s}
.unit:hover{box-shadow:0 14px 30px -12px rgba(11,38,56,.16)}
.faq summary::before{display:inline-block;content:"+"!important;transition:transform .22s ease}
.faq details[open] summary::before{transform:rotate(45deg)}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{height:0;overflow:clip;transition:height .32s ease,content-visibility .32s allow-discrete}
  .faq details[open]::details-content{height:auto}
}

/* ── botões flutuantes (js/interface.js) ── */
.flut{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + var(--aviso-cookies,0px) + env(safe-area-inset-bottom));z-index:60;
  display:flex;align-items:center;gap:10px;pointer-events:none}
.flut a,.flut button{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
  border:0;border-radius:999px;cursor:pointer;font:700 14px/1 var(--font-body);letter-spacing:.02em;text-decoration:none;
  box-shadow:0 12px 30px -8px rgba(8,31,46,.38);transition:transform .22s ease,box-shadow .22s ease,background .2s,opacity .22s ease}
.flut svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flut-agendar{padding:0 24px;background:var(--brand-deep);color:#fff;opacity:0;transform:translateY(18px);visibility:hidden}
.flut-agendar.visivel{opacity:1;transform:none;visibility:visible}
.flut-agendar:hover{background:var(--brand-deep-hover);color:#fff;transform:translateY(-2px)}
.flut-chat{padding:0 20px 0 18px;background:#fff;color:var(--lw-ink);border:1px solid var(--border-hairline)!important}
.flut-chat:hover{transform:translateY(-2px);box-shadow:0 16px 34px -8px rgba(8,31,46,.45)}
.flut-chat.carregando svg{animation:flut-pulso 1s ease-in-out infinite}
@keyframes flut-pulso{50%{opacity:.35}}
.flut a:focus-visible,.flut button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
@media (max-width:760px){
  .flut{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(12px + var(--aviso-cookies,0px) + env(safe-area-inset-bottom))}
  .flut-agendar{flex:1}
  .flut-chat{width:52px;padding:0;margin-left:auto}
  .flut-chat span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  body.com-flut footer,body.com-flut .site-footer{padding-bottom:calc(40px + 72px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  .revela{opacity:1;transform:none;transition:none}
  .flut a,.flut button{transition:none}
}