/* ============================================================
   PELE PREMIUM DOS MODELOS DE DEMONSTRAÇÃO (24/09/2026)
   ============================================================
   Carregada DEPOIS de ../demo.css e sobrepõe a demo. Uma folha para a
   família inteira: só seletores do esqueleto do contrato de construção
   (header .marca .sociais .btn-topo · #atalhos .cartao-atalhos .atalho ·
   .numeros · .cab .olho .sub · .grade .card .ico .n .lista .mais ·
   .faixa · #fotos figure · .dep .google-nota · .onde-grade .onde-item ·
   .cta .acoes · footer.pe · .acao-mobile · .flutuante).

   ⛔ Nenhum seletor exclusivo de um ramo. A cor do ramo entra por --a no
      <style> do <head> de cada modelo; tudo o mais tem valor-padrão aqui.
   ⛔ Nada desta folha toca o #palco (hero-cena.css é dono dele).
   ⭐ Desenhada primeiro a 390px; o desktop entra por min-width.
   ============================================================ */

:root{
  --a:#F26522;                                   /* acento do ramo: o modelo sobrescreve */
  --a-claro:color-mix(in srgb,var(--a) 62%,#fff); /* acento para TEXTO sobre fundo escuro */
  --a-txt:#FFFFFF;                               /* texto sobre botão de acento */
  --fundo:#131417;
  --superficie:#1B1C20;
  --superficie-2:#232428;
  --borda:rgba(255,255,255,.10);
  --borda-forte:rgba(255,255,255,.18);
  --texto:#F5F5F3;
  --texto-2:rgba(255,255,255,.70);
  --texto-3:rgba(255,255,255,.54);
  --zap:#25D366;
  --zap-txt:#0A2E17;
  --fonte-titulo:Outfit,Inter,system-ui,sans-serif;
  --fonte-texto:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:16px;
  --max:1200px;
  --raio:12px;
  --raio-btn:8px;
  --sombra:0 8px 24px rgba(0,0,0,.35);
  --sombra-foto:0 8px 28px rgba(0,0,0,.6);
  --sombra-zap:0 6px 24px rgba(37,211,102,.45);
  /* os tokens da demo.css passam a apontar para a base escura */
  --bg:var(--fundo);
  --bg-2:var(--superficie);
  --txt:var(--texto);
  --txt-2:var(--texto-2);
  --linha:var(--borda);
  --escuro:#0E0F12;
  --cor-secundaria:var(--a);                     /* as bordas pulsantes de vida.css */
}

/* ---------- PELE CLARA: clínica, advogados e o que mais o ramo pedir ----------
   O modelo liga com <body data-pele="clara">. Só os tokens mudam; cabeçalho, rodapé e a
   barra fixa do celular continuam escuros (é a regra do brief: escuro lê pesado nesses ramos,
   mas a moldura da página fica). O acento para TEXTO escurece, em vez de clarear. */
body[data-pele="clara"]{
  --fundo:#FFFFFF;
  --superficie:#F5F5F3;
  --superficie-2:#ECECE9;
  --borda:#E4E4E0;
  --borda-forte:#CFCFCA;
  --texto:#1A1B1E;
  --texto-2:#5B646F;
  --texto-3:#626A74; /* o #7A828C de antes dava 3,56:1 sobre #F5F5F3 e 3,29:1 sobre a legenda da foto; este dá 5,02 e 4,63 */
  --a-claro:color-mix(in srgb,var(--a) 78%,#000);
  --sombra:0 8px 24px rgba(16,20,26,.08);
  --sombra-foto:0 8px 28px rgba(16,20,26,.18);
}
body[data-pele="clara"] header,
body[data-pele="clara"] footer.pe,
body[data-pele="clara"] .acao-mobile{
  --texto:#F5F5F3;--texto-2:rgba(255,255,255,.70);--texto-3:rgba(255,255,255,.54);
  --borda:rgba(255,255,255,.10);--borda-forte:rgba(255,255,255,.18);
  --a-claro:color-mix(in srgb,var(--a) 62%,#fff);
}
body[data-pele="clara"] .atalho{background:rgba(0,0,0,.03);}
body[data-pele="clara"] .atalho:hover{background:color-mix(in srgb,var(--a) 10%,transparent);}
body[data-pele="clara"] .dep .av{background:rgba(0,0,0,.06);}
body[data-pele="clara"] .btn-2:hover,body[data-pele="clara"] .btn-linha:hover{background:rgba(0,0,0,.05);}
body[data-pele="clara"] .cartao-atalhos{box-shadow:0 -12px 48px rgba(16,20,26,.14);}
body[data-pele="clara"] .faixa-caixa{background:color-mix(in srgb,var(--a) 8%,var(--superficie));}

html{scroll-padding-top:72px;}
/* A demo.css rola suave; com a preferência de menos movimento a rolagem volta a ser direta
   (e a imagem lazy carrega na captura, que rola rápido). */
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}
body{font-family:var(--fonte-texto);background:var(--fundo);color:var(--texto);font-size:16px;}
/* As bordas pulsantes de vida.css leem --cor-secundaria; o config.js de alguns modelos a grava
   inline no <html>, e só uma declaração direta no pseudo-elemento vence a herança. */
body::before,body::after{--cor-secundaria:var(--a);}
.container{max-width:var(--max);padding:0 var(--gutter);}
a:focus-visible,button:focus-visible{outline:2px solid var(--a-claro);outline-offset:2px;}
::selection{background:var(--a);color:#fff;}

h1,h2,h3{font-family:var(--fonte-titulo);color:var(--texto);}
h2{font-size:clamp(30px,4vw,52px);line-height:1.02;letter-spacing:-.03em;font-weight:800;text-wrap:balance;}
h3{font-size:19px;font-weight:700;letter-spacing:-.01em;}
.olho{color:var(--a-claro);font-size:11px;letter-spacing:.18em;margin-bottom:12px;}
.sub{color:var(--texto-2);font-size:16px;max-width:52ch;margin-top:12px;line-height:1.55;text-wrap:pretty;} /* sem palavra viúva ("todas.", "quebrar.") na última linha; visto em 24/09 nas 7 páginas */
section{padding:clamp(56px,7vw,104px) 0;}
.cab{margin-bottom:clamp(24px,3vw,40px);}
/* Algarismo de largura fixa só onde há NÚMERO em coluna. Em todo b/strong ele alargava o hífen
   da Inter para a largura de um algarismo (9,7px contra 7,03 a 15px): "Micro-ondas" no título do
   atalho saía "Micro - ondas", e 5 modelos têm palavra com hífen em negrito. */
.numeros b,.google-nota .n,.google-nota b,.card .preco{font-variant-numeric:tabular-nums;}

/* ---------- Botões: toque mínimo 48px, raio 8 ---------- */
.btn{
  font-family:var(--fonte-texto);background:var(--a);color:var(--a-txt);
  font-weight:700;font-size:15px;line-height:1.2;
  min-height:52px;padding:12px 22px;border-radius:var(--raio-btn);gap:9px;
}
.btn:hover{background:color-mix(in srgb,var(--a) 84%,#000);}
.btn svg{width:18px;height:18px;flex:none;}
.btn-zap{background:var(--zap);color:var(--zap-txt);}
.btn-zap:hover{background:#1FBA57;}
.btn-2{background:transparent;color:var(--texto);border:1.5px solid var(--borda-forte);}
.btn-2:hover{background:rgba(255,255,255,.08);}
.acoes{gap:10px;}

/* ---------- Cabeçalho: 64px, escuro com blur ---------- */
header{
  height:64px;background:rgba(14,15,18,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--borda);
}
header .container{height:64px;padding-top:0;padding-bottom:0;gap:12px;}
.marca{font-family:var(--fonte-titulo);font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.1;min-width:0;overflow:hidden;}
.marca b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* nome longo vira reticência, nunca rolagem lateral */
.marca span{
  font-family:var(--fonte-texto);font-size:10px;font-weight:600;letter-spacing:.14em;
  color:var(--a-claro);opacity:1;margin-top:3px;white-space:nowrap;
}
/* line-height próprio: com o 1.1 da .marca e o overflow:hidden dela, a cedilha e o til de baixo
   saíam cortados (REMOCÃO, GONCALO, MANUTENCÃO; medido em 9 modelos a 1440 e 1024). O margin-top
   desconta a meia-entrelinha a mais, e a altura da marca quase não muda. */
.marca span{line-height:1.5;margin-top:1px;}
@media(max-width:479px){.marca span{display:none;}}
header nav ul{gap:22px;}
header nav a{font-size:14px;font-weight:500;color:var(--texto-2);white-space:nowrap;} /* "Onde estamos" quebrava em duas linhas a 901px */
header nav a:hover{color:var(--texto);}
.sociais{display:none;align-items:center;gap:8px;}
.sociais a{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--borda-forte);background:rgba(255,255,255,.05);color:var(--texto);
}
.sociais a:hover{background:rgba(255,255,255,.12);}
.sociais svg{width:16px;height:16px;}
@media(min-width:901px){.sociais{display:flex;}}
.btn-topo{
  background:var(--a);color:var(--a-txt);font-size:13px;font-weight:700;
  min-height:40px;display:inline-flex;align-items:center;padding:0 16px;border-radius:var(--raio-btn);
}
.btn-topo:hover{background:color-mix(in srgb,var(--a) 84%,#000);}
@media(max-width:900px){.btn-topo{min-height:48px;}} /* toque mínimo de 48px onde se toca com o dedo (eram 40) */
@media(max-width:400px){.btn-topo{font-size:12.5px;padding:0 12px;}}

/* ---------- O cartão de atalhos: colado ao palco, primeiro toque ---------- */
#atalhos{padding:0;}
#atalhos .cab{display:none;} /* no celular o cartão é o primeiro toque; o título entra no desktop, ao lado */
.cartao-atalhos{
  position:relative;z-index:5;margin-top:-16px;
  background:var(--superficie);border:1px solid var(--borda-forte);
  border-radius:0 0 16px 16px;padding:16px 14px 14px;
  box-shadow:0 -12px 48px rgba(0,0,0,.5);
}
.cartao-atalhos .cabeca{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-bottom:12px;}
.cartao-atalhos .agora{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--texto);}
.cartao-atalhos .agora::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--zap);box-shadow:0 0 0 3px rgba(37,211,102,.22);}
.cartao-atalhos .google-nota{margin:0;padding:5px 10px;gap:6px;font-size:12px;background:transparent;border:1px solid var(--borda);box-shadow:none;}
.cartao-atalhos .google-nota .n{font-size:14px;color:var(--texto);}
.cartao-atalhos .google-nota .estrelas{font-size:12px;letter-spacing:1px;}
.cartao-atalhos .google-nota .qtd{font-size:12px;color:var(--texto-2);}
.cartao-atalhos .itens{display:grid;gap:8px;}
.atalho{
  display:grid;grid-template-columns:40px 1fr 20px;align-items:center;gap:12px;
  min-height:56px;padding:8px 12px;border-radius:10px;color:var(--texto);
  background:rgba(255,255,255,.04);border:1px solid var(--borda);
}
.atalho:hover{background:color-mix(in srgb,var(--a) 12%,transparent);border-color:color-mix(in srgb,var(--a) 45%,transparent);}
.atalho .ico{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--a) 18%,transparent);color:var(--a-claro);}
.atalho .ico svg{width:20px;height:20px;display:block;}
.atalho b{display:block;font-size:15px;font-weight:700;line-height:1.2;}
.atalho small{display:block;font-size:12.5px;color:var(--texto-2);margin-top:2px;line-height:1.3;}
.atalho .seta{color:var(--texto-3);}
.atalho .seta svg{width:18px;height:18px;display:block;}
.cartao-atalhos .btn-zap{width:100%;min-height:56px;font-size:16px;margin-top:12px;box-shadow:0 4px 14px rgba(37,211,102,.22);flex-wrap:wrap;gap:6px 10px;}
.cartao-atalhos .btn-zap .fone{font-size:13.5px;font-weight:600;white-space:nowrap;opacity:.9;}
.cartao-atalhos .linha-confianca{font-size:12.5px;color:var(--texto-3);text-align:center;margin-top:10px;text-wrap:balance;}

/* ---------- Números: linha de selos compacta ---------- */
.numeros{background:var(--fundo);color:var(--texto);padding:14px 0 0;}
/* grid-auto-rows:1fr: no 2x2 do celular, uma legenda que quebra deixava as duas linhas com
   alturas diferentes. flex-start: centrado na vertical, o número do cartão com legenda de duas
   linhas subia e a linha de base da fileira se perdia (visto a 901 e 1024px). */
.numeros .container{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:8px;text-align:left;}
.numeros .container > div{
  display:flex;flex-direction:column;justify-content:flex-start;min-height:64px;
  background:var(--superficie);border:1px solid var(--borda);border-radius:10px;padding:10px 12px;
}
.numeros b{font-family:var(--fonte-titulo);font-size:clamp(18px,5vw,26px);font-weight:700;line-height:1.05;color:var(--texto);}
.numeros b em{font-style:normal;color:var(--a-claro);font-size:.6em;margin-left:2px;}
/* O número que vem do config.js mora num <span data-cliente> dentro do <b>, e a regra
   .numeros span da demo.css (13,5px, a 86%) o encolhia: "15 anos" saía com o 15 miúdo. */
.numeros b span{font-size:inherit;opacity:1;}
.numeros .legenda{font-size:12px;color:var(--texto-2);margin-top:3px;opacity:1;}

/* ---------- Serviços: cartões compactos, lista em duas colunas ---------- */
.grade{gap:14px;}
.card{
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio);
  padding:20px 18px;box-shadow:var(--sombra);gap:10px;position:relative;
}
.card .ico{
  width:44px;height:44px;border-radius:10px;margin-bottom:0;
  background:color-mix(in srgb,var(--a) 16%,transparent);color:var(--a-claro);
}
.card .ico svg{width:22px;height:22px;}
.card .n{position:absolute;top:22px;right:18px;font-family:var(--fonte-titulo);font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--texto-3);}
.card h3{font-size:20px;}
.card p{font-size:15px;color:var(--texto-2);line-height:1.55;}
/* Duas colunas só quando o CARTÃO é largo (miolo de 292px ou mais), no máximo duas: a conta é
   pela largura do cartão, não da tela. Abaixo disso (g-3 entre 921 e ~1100px, dois cartões por
   linha perto de 621px, .g-4, celular de 360px) cada coluna ficava com 100 a 130px e todo item de
   duas palavras quebrava. Ramo de item longo (nome de tratamento, plano) põe 1fr na página. */
.card .lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(140px,calc((100% - 12px)/2)),1fr));gap:6px 12px;margin:2px 0 4px;font-size:14.5px;color:var(--texto-2);}
.card .lista li{position:relative;padding-left:12px;line-height:1.35;}
.card .lista li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;border-radius:50%;background:var(--a);}
.card .btn-zap{width:100%;margin-top:auto;min-height:52px;font-size:15px;}
.card .mais{
  align-self:center;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 8px;
  font-size:14px;font-weight:600;color:var(--a-claro);
}
.card .mais::after{content:"›";font-size:18px;line-height:1;}
.card .mais:hover{color:var(--texto);}

/* ---------- Faixa de destaque: ícone num quadrado + pergunta + botão ---------- */
.faixa{padding:0 0 clamp(40px,5vw,64px);}
.faixa-caixa{
  display:grid;gap:14px;padding:22px 18px;border-radius:14px;
  background:color-mix(in srgb,var(--a) 14%,var(--superficie));
  border:1px solid color-mix(in srgb,var(--a) 40%,transparent);
}
.faixa .ico{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--a) 22%,transparent);color:var(--a-claro);}
.faixa .ico svg{width:24px;height:24px;display:block;}
.faixa h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;}
.faixa p{font-size:15px;color:var(--texto-2);margin-top:6px;line-height:1.5;text-wrap:pretty;}
.faixa .btn{width:100%;}

/* ---------- Fotos do lugar e do trabalho ---------- */
#fotos{background:var(--superficie);border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);}
#fotos .galeria{display:grid;gap:14px;}
#fotos figure{position:relative;margin:0;border-radius:10px;overflow:hidden;border:1px solid var(--borda-forte);background:var(--superficie-2);box-shadow:var(--sombra-foto);}
#fotos figure img{width:100%;height:220px;object-fit:cover;display:block;}
#fotos figure .num{
  position:absolute;top:12px;left:12px;z-index:2;padding:5px 10px;border-radius:6px;
  background:rgba(8,8,8,.88);backdrop-filter:blur(10px);color:#fff;
  font-family:var(--fonte-titulo);font-weight:700;font-size:17px;line-height:1;
}
#fotos figcaption{padding:12px 14px 13px;border-top:1px solid var(--borda);}
#fotos figcaption b{display:block;font-size:15px;color:var(--texto);font-weight:600;line-height:1.3;}
#fotos figcaption span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);margin-top:4px;font-weight:600;}

/* ---------- Avaliações ---------- */
.google-nota{
  background:var(--superficie);border:1px solid var(--borda-forte);box-shadow:none;
  display:inline-flex;margin-top:0;padding:10px 18px;
}
.google-nota .n{color:var(--texto);}
.google-nota .qtd{color:var(--texto-2);}
.google-nota .qtd b{color:var(--texto);}
.dep{background:var(--superficie);border-color:var(--borda);box-shadow:var(--sombra);padding:22px 20px;}
.dep p{color:var(--texto);font-size:15.5px;line-height:1.6;flex-grow:1;} /* depoimento curto subia o selo 24 a 50px acima dos vizinhos */
.dep .verificada{color:var(--a-claro);background:color-mix(in srgb,var(--a) 14%,transparent);}
.dep .av{background:rgba(255,255,255,.08);color:var(--texto);font-size:12px;letter-spacing:.04em;}
#clientes .cab .google-nota{margin-top:16px;}
.dep .quem{color:var(--texto);}
.dep .quem span{color:var(--texto-2);}

/* ---------- Onde encontrar ---------- */
.onde-grade{display:grid;gap:12px;}
.onde-item{
  display:flex;flex-direction:column;gap:6px;min-height:150px;
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio);padding:18px 16px;
}
.onde-item .plataforma{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--texto-3);margin-bottom:4px;}
.onde-item .plataforma svg{width:14px;height:14px;color:var(--a-claro);}
.onde-item h3{font-size:19px;}
.onde-item h3 .estrelas{font-size:17px;}
/* 15, 13 e 14px: os 13,5, 12 e 12px de antes eram pequenos demais para o leigo no celular. */
.onde-item p{font-size:15px;color:var(--texto-2);line-height:1.5;}
.onde-item .bairros{gap:6px;margin-top:6px;}
.onde-item .bairros span{background:transparent;border-color:var(--borda-forte);color:var(--texto-2);font-size:13px;padding:5px 10px;}
/* Ficha de endereço fixo (loja, consultório, escritório): a lista de linhas no lugar dos chips. */
.onde-item .linhas{display:grid;gap:4px;margin-top:4px;font-size:15px;color:var(--texto-2);}
.onde-item .linhas b{color:var(--texto);font-weight:600;}
/* Toque mínimo de 48px (eram 44). Equilibrado, o link em caixa alta que quebra não deixa a
   última palavra sozinha na segunda linha. */
.onde-item .link{
  margin-top:auto;padding-top:10px;min-height:48px;display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--a-claro);
  text-wrap:balance;
}
.onde-item .link:hover{color:var(--texto);}

/* ---------- CTA final: caixa de destaque ---------- */
.cta{background:var(--fundo);padding-top:0;text-align:left;}
/* --cta-fundo e --cta-txt (opcionais, no :root do modelo): acento CLARO e saturado (turquesa,
   amarelo-limão) vira, no fecho, o único bloco chapado de cor viva da página, no limite do "nada
   neon" do brief § 6. O modelo desce a caixa para um tom fechado sem mudar o acento do resto. */
.cta-caixa{background:var(--cta-fundo,var(--a));color:var(--cta-txt,var(--a-txt));border-radius:16px;padding:30px 20px 24px;box-shadow:0 12px 36px rgba(0,0,0,.35);}
.cta h2{color:var(--cta-txt,var(--a-txt));margin-bottom:8px;font-size:clamp(28px,4vw,48px);}
/* O apoio sai na cor CHEIA do texto sobre o acento: a 86% ele media 3,82:1 no próprio chaveiro
   (#E30613) e ficava abaixo do AA com todo acento que desse menos de ~5,6:1 no branco. */
.cta .sub{color:var(--cta-txt,var(--a-txt));margin:0 0 20px;max-width:46ch;}
.cta .acoes .btn{flex:1 1 100%;}
.cta .btn-zap{background:#0E0F12;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.35);}
.cta .btn-zap:hover{background:#000;}
.cta .btn-zap svg{color:var(--zap);}
/* Contorno cheio de 2px e um véu leve da cor do texto: com acento claro (--a-txt escuro), 1px a
   60% saía marrom sobre o laranja e lia como botão desabilitado ao lado do preto. */
.cta .btn-2{border:2px solid var(--cta-txt,var(--a-txt));color:var(--cta-txt,var(--a-txt));background:color-mix(in srgb,var(--cta-txt,var(--a-txt)) 7%,transparent);}
.cta .btn-2:hover{background:color-mix(in srgb,var(--cta-txt,var(--a-txt)) 16%,transparent);}

/* ---------- Rodapé: 4 colunas ---------- */
footer.pe{background:#0E0F12;color:var(--texto-2);padding:52px 0 28px;font-size:14px;border-top:1px solid var(--borda);}
/* A folga que o selo e a barra do celular reservam embaixo do rodapé (padding-bottom do body)
   saía no fundo da página: branca na pele clara, cinza (#131417) sob o preto do rodapé na
   escura, e na foto de página inteira lia como "fundo vazio". A sombra sem desfoque estende o
   preto por baixo, e sombra não aumenta a rolagem. Com ESPALHAMENTO, não só deslocada: a
   "0 400px 0" de antes começava 400px abaixo do TOPO do rodapé, e no desktop (rodapé de ~380px)
   sobrava uma tira de 20px. */
footer.pe{box-shadow:0 200px 0 200px #0E0F12;}
footer.pe .container{grid-template-columns:1fr;gap:28px;}
footer.pe .marca{font-size:20px;margin-bottom:10px;display:block;}
footer.pe .marca span{display:block;}
footer.pe p{font-size:14px;line-height:1.55;max-width:34ch;}
footer.pe h4{color:var(--a-claro);font-size:11px;letter-spacing:.2em;margin-bottom:14px;}
footer.pe li{margin-bottom:10px;}
footer.pe a{display:inline-block;padding:2px 0;}
footer.pe .redes{margin-top:0;}
footer.pe .redes a{border-color:var(--borda-forte);color:var(--texto-2);padding:8px 14px;}
/* Até 900px (celular e tablet, onde se toca com o dedo) cada link vira uma linha de 48px, o toque
   mínimo do contrato; os 2px de antes davam uns 26px. */
@media(max-width:900px){
  footer.pe li{margin-bottom:0;}
  footer.pe li:not(:has(a)){padding:6px 0;}
  footer.pe ul a,footer.pe .marca{display:inline-flex;flex-direction:column;justify-content:center;min-height:48px;padding:0;}
  footer.pe .redes{gap:8px;}
  footer.pe .redes a{display:inline-flex;align-items:center;min-height:48px;}
}
/* Com 4 colunas os três botões de rede não cabem na coluna de 1fr e quebravam 2+1: empilhados,
   viram lista como as colunas vizinhas. */
@media(min-width:761px){footer.pe .redes{flex-direction:column;align-items:flex-start;gap:8px;}}
footer.pe .fim{font-size:13px;color:var(--texto-3);margin-top:8px;max-width:none;}

/* ---------- Barra fixa do celular: os dois botões grandes ---------- */
@media(max-width:760px){
  .acao-mobile{
    background:rgba(14,15,18,.94);border-top:1px solid var(--borda-forte);
    padding:10px 12px;gap:10px;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  }
  .acao-mobile .btn{min-height:52px;padding:10px 8px;font-size:15px;}
  /* A demo.css reserva 150px para esta barra (bottom:76px, 73px de altura), mas o selo.js injeta
     depois body{padding-bottom:88px} (76px acima de 560) e vence pela ordem: a 390x844, rolado
     até o fim, a barra (695 a 768) cobria a linha .fim do rodapé (687 a 728 no chaveiro).
     160 = 76 + 73 + 11 de respiro; "html body" vence o "body" do selo.js sem !important, e o
     analitica.js continua somando a altura do aviso por cima. */
  html body{padding-bottom:160px;}
  /* Ligar sai no acento. Ramo de acento perto do verde do WhatsApp liga o contorno pelos tokens
     no :root (--tel-fundo, --tel-fundo-hover, --tel-txt, --tel-borda), senão a barra vira dois
     botões verdes e o leigo não sabe qual é o principal. */
  .acao-mobile .btn-tel{background:var(--tel-fundo,var(--a));color:var(--tel-txt,var(--a-txt));border:var(--tel-borda,0);}
  .acao-mobile .btn-tel:hover{background:var(--tel-fundo-hover,color-mix(in srgb,var(--a) 84%,#000));}
}

/* ---------- Flutuante: só no desktop (a regra do celular vem DEPOIS, para vencer) ---------- */
.flutuante{
  position:fixed;right:24px;bottom:calc(76px + 24px);z-index:85; /* acima da barra de demonstração do selo.js */
  width:58px;height:58px;border-radius:50%;
  background:var(--zap);color:#fff;display:grid;place-items:center;
  box-shadow:var(--sombra-zap);
}
.flutuante svg{width:28px;height:28px;}
@media(max-width:760px){.flutuante{display:none;}}

/* ---------- O que o lote dos 27 modelos pediu à pele (24 e 25/09, consolidado) ----------
   Entra aqui o que se repetiu em dois modelos ou mais, ou que é defeito da família; o que é de
   um ramo só continua no <style> da página. */
/* Etapas numeradas (demo.css .etapas/.etapa) sobre a base escura: o cartão nascia com --bg e
   o número na primária da demo; e o contador morava só em .etapas, então dentro de .grade
   toda etapa saía "1". */
.grade{counter-reset:e;}
.etapa{background:var(--superficie);border-color:var(--borda);box-shadow:var(--sombra);}
.etapa::before{background:var(--a);color:var(--a-txt);}
.etapa h3{color:var(--texto);}
.etapa p{color:var(--texto-2);}
/* O selo do número sobe 15px para fora do cartão (demo.css .etapa::before, top:-15px): sem folga,
   o selo 1 encostava no título da seção e, com o vão de 14px, os selos 2 a 4 no cartão de cima. */
.grade:has(> .etapa){padding-top:16px;row-gap:32px;}
/* Com a grade em 1 ou 2 colunas o selo pendurado encostava no cartão de cima: ali ele entra no
   cartão, acima do título, e a grade volta ao vão comum. */
@media(max-width:920px){
  .etapa::before{position:static;margin-bottom:12px;}
  .etapa h3{margin-top:0;}
  .grade:has(> .etapa){padding-top:0;row-gap:14px;}
}
/* Acento CLARO (amarelo, laranja, verde-claro): o modelo define --a-txt escuro no :root, e a
   seleção acompanha em vez de chumbar branco (o .sub e o .btn-2 do CTA já leem --a-txt acima). */
::selection{color:var(--a-txt);}
/* Registro profissional (CRO, OAB, CREA, CRM) não se parte no fim da linha. */
.nw{white-space:nowrap;}
/* Link de demonstração sem endereço (rede e ficha do Google da empresa fictícia) é um <a> sem
   href: não abre aba nenhuma, e aqui perde a mãozinha. No site do cliente o endereço entra. */
.sociais a:not([href]),.google-nota:not([href]),.onde-item .link:not([href]),footer.pe .redes a:not([href]),.feed-topo .btn:not([href]){cursor:default;}
/* Depoimento ILUSTRATIVO (.verificada.exemplo) não leva o visto de "verificada". */
.dep .verificada.exemplo::before{content:none;}
/* Cabeça do cartão de atalhos para ramo que não mostra nota do Google na demo. */
.cartao-atalhos .horario{font-size:12.5px;color:var(--texto-3);}
/* Entre 901 e 1179px o cabeçalho não cabe marca, quatro ou cinco links, três círculos e botão
   (medido no chaveiro: "Onde estamos" quebrava a 901px e a marca saía cortada). Os círculos
   saem nessa faixa (o botão e o "Onde encontrar" levam aos mesmos canais); abaixo de 1024px
   sai também a linha da marca. */
@media(min-width:901px) and (max-width:1179px){
  header .sociais{display:none;}
  header nav ul{gap:16px;}
}
@media(min-width:901px) and (max-width:1023px){header .marca span{display:none;}}
/* A faixa conta com a folga de baixo da seção anterior; depois da galeria (fundo e borda
   próprios) ela colava na borda. */
#fotos + .faixa,.alt + .faixa{padding-top:clamp(40px,5vw,64px);} /* .alt: seção com fundo próprio (medido 1px de distância na lavanderia) */
/* Quatro cartões lado a lado (.g-4 acima de 920px): um rótulo que quebra em duas linhas deixava
   aquele botão mais alto e fora da linha dos vizinhos (medido 60/60/52/60 a 1024px). Altura de
   duas linhas para todos e respiro lateral menor. */
@media(min-width:921px){.g-4 .card .btn-zap{min-height:60px;padding-left:12px;padding-right:12px;}}
/* E as LINHAS de dentro: título e texto têm alturas diferentes em cada cartão, e as quatro listas
   começavam em até três alturas (medido a 1024 em 17 dos 17 modelos com .g-4 de serviço, ex.
   3290/3267/3243/3267). Com subgrid, ícone, título, texto, lista e botão dividem as mesmas trilhas
   na fileira (2 por linha a partir de 621px, 4 a partir de 921). Só o cartão com essa ordem exata
   de cinco peças entra (o .n entre o ícone e o título é absoluto e não ocupa trilha): um sexto
   filho no fluxo cairia em cima do quinto. O botão perde o margin-top:auto
   (em grade, margem automática come a sobra). */
@media(min-width:621px){
  @supports (grid-template-rows:subgrid){
    .g-4 > .card:has(> .ico ~ h3 + p + .lista + .btn:last-child){display:grid;grid-row:span 5;grid-template-rows:subgrid;align-content:start;}
    .g-4 > .card:has(> .ico ~ h3 + p + .lista + .btn:last-child) > .btn{margin-top:0;}
  }
}

/* Cartão de PLANO: o preço grande, o destaque e a etiqueta. A etiqueta sai do FLUXO, no alto à
   direita ao lado do número: em fluxo ela empurrava a cabeça do cartão destaque ~35px e os dois
   planos lado a lado ficavam desalinhados (vida.css põe overflow:hidden em todo [class*="card"],
   então ela mora DENTRO da caixa). Preço que não é número ("por quilo") fica em escala de linha. */
.card .preco{font-family:var(--fonte-titulo);font-size:clamp(34px,4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--a-claro);margin:2px 0 4px;}
.card .preco small{font-family:var(--fonte-texto);font-size:15px;font-weight:600;letter-spacing:0;color:var(--texto-2);margin-left:4px;}
.card .preco.consulta{font-size:18px;font-weight:700;letter-spacing:0;line-height:1.3;}
.card.destaque{border-color:color-mix(in srgb,var(--a) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--a) 35%,transparent),var(--sombra);}
.card .etiqueta{position:absolute;top:20px;right:52px;padding:5px 10px;border-radius:6px;background:var(--a);color:var(--a-txt);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;white-space:nowrap;}
@media(min-width:901px){.card .etiqueta{top:19px;right:56px;}}
/* Cartão de pergunta (#duvidas) sem ícone nem número: o h3 é a pergunta. */
#duvidas .card h3{font-size:18px;line-height:1.3;}

/* Formulário e lista com check (demo.css) pintados pela primária e pelo fundo claro: sobre a
   base escura o check e o foco sumiam, o campo saía branco e a caixa se confundia com a página. */
.orc-grade{display:grid;gap:clamp(28px,4vw,56px);align-items:start;}
@media(min-width:901px){.orc-grade{grid-template-columns:1fr 1.1fr;}}
.checks li{color:var(--texto);font-size:15.5px;}
.checks li::before{color:var(--a-claro);}
.form{background:var(--superficie);border-color:var(--borda-forte);}
.campo label{color:var(--texto);}
.campo label em{color:var(--texto-3);font-style:normal;font-weight:500;}
.campo input,.campo select,.campo textarea{background:var(--fundo);color:var(--texto);border-color:var(--borda-forte);}
.campo input::placeholder,.campo textarea::placeholder{color:var(--texto-3);}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--a);outline-color:color-mix(in srgb,var(--a) 45%,transparent);}
.form .nota{color:var(--texto-3);}

/* Botão de contorno (.btn-linha): o .btn desta folha pinta o fundo com o acento, e só a ordem
   de carga da demo.css o zerava; sem isto ele saía texto claro sobre o acento. */
.btn-linha{background:transparent;color:var(--texto);border:1.5px solid var(--borda-forte);}
.btn-linha:hover{background:rgba(255,255,255,.08);color:var(--texto);}

/* Feed de rede social reservado (demo.css .feed): os quadros eram degradê da primária com brilho
   radial, o bloco mais claro da página, e o leigo lia "página inacabada". Quadro com conteúdo
   (ícone e o nome do post) vira cartão sólido; quadro vazio fica tracejado com "Sua foto aqui",
   que é o que diz que o vazio é de propósito. */
* + .feed-topo{margin-top:56px;} /* o feed vem depois dos depoimentos, no mesmo container; primeiro filho (clínica) não ganha */
.feed-topo .av{background:color-mix(in srgb,var(--a) 18%,transparent);color:var(--a-claro);}
.feed-topo .arroba span{color:var(--texto-2);}
.feed > div,.feed > div:nth-child(even){
  background:var(--superficie);border:1px solid var(--borda);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:10px 8px;text-align:center;
}
.feed > div:not(:has(> *)),.feed > div:not(:has(> *)):nth-child(even){background:var(--superficie-2);border:1px dashed var(--borda-forte);}
.feed > div::after{content:none;}
.feed > div::before{color:var(--texto-3);}
.feed > div:has(> *)::before{content:none;}
.feed > div > svg{box-sizing:content-box;width:22px;height:22px;padding:11px;flex:none;border-radius:12px;background:color-mix(in srgb,var(--a) 14%,transparent);color:var(--a-claro);}
.feed .ico{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--a) 14%,transparent);color:var(--a-claro);}
.feed .ico svg{width:22px;height:22px;display:block;}
.feed > div > span:not(.ico),.feed > div > b{font-size:13px;font-weight:600;line-height:1.3;color:var(--texto-2);}
.feed-nota{margin-top:14px;font-size:14px;color:var(--texto-2);text-align:center;}

/* Vídeo em destaque (demo.css .video-destaque): a moldura da demo clara sumia na base escura e a
   legenda ficava sem separação. No desktop o título vai ao lado do vídeo, como na dobra dos
   atalhos (com 860px encostado à esquerda sobrava um vazio à direita do container). */
.video-destaque{border:1px solid var(--borda-forte);box-shadow:var(--sombra-foto);margin:0;}
.video-destaque figcaption{background:var(--superficie-2);color:var(--texto-2);opacity:1;border-top:1px solid var(--borda);}
@media(min-width:901px){
  #video .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);gap:48px;align-items:center;}
  #video .cab{margin:0;}
  #video .video-destaque{max-width:none;}
}

/* Foto larga de apoio (demo.css .foto-larga): o teto de 420px com aspect-ratio a encolhia para
   ~745px e a centralizava; na pele tudo alinha à esquerda na coluna do container. */
.foto-larga{border:1px solid var(--borda-forte);box-shadow:var(--sombra-foto);border-radius:var(--raio);overflow:hidden;margin-inline:0;max-height:none;}
.foto-larga img{width:100%;height:100%;object-fit:cover;display:block;}
@media(min-width:641px){.foto-larga{aspect-ratio:12/5;}}

/* Herói de CAPA (.hero, sem o palco): o segundo botão sobre FOTO tem fundo sólido escuro (o
   contorno vazado media 2,38:1 na parte clara da foto), e o número do painel de passos sai no
   acento, não na primária (senão o herói ficava com dois acentos). */
.hero .btn-2{background:#16191E;color:#F5F5F3;border:1.5px solid rgba(255,255,255,.45);}
.hero .btn-2:hover{background:#23272E;}
.hero .painel-item .n{background:var(--a);color:var(--a-txt);}

/* Galerias que o acervo permite: duas paisagens (.duas), uma paisagem com um retrato (.par),
   três paisagens (.tres) e a paisagem .larga que fecha a grade de quatro. */
@media(min-width:561px){
  #fotos .galeria.duas{grid-template-columns:1fr 1fr;}
  /* .par: as duas fotos na mesma altura. O retrato dita a altura da linha (com teto) e a
     paisagem preenche o cartão até a legenda, sem o vazio que sobrava embaixo dela. */
  #fotos .galeria.par{grid-template-columns:1.4fr 1fr;align-items:stretch;}
  #fotos .galeria.par figure{display:grid;grid-template-rows:minmax(0,1fr) auto;}
  #fotos .galeria.par figure.retrato{grid-column:auto;grid-row:auto;}
  /* contain:size (com aspect-ratio:auto) tira as duas fotos da conta da linha: sem ele a altura
     natural da paisagem (1200x800, com a proporção que o navegador tira de width/height) passava
     da do retrato entre ~561 e ~1300px, e sobrava uma tira vazia de 19 a 24px entre o retrato e
     a legenda (medido a 760 e 1024px). O piso de cada foto é o min-height, e as duas preenchem. */
  #fotos .galeria.par figure img{height:100%;min-height:300px;contain:size;aspect-ratio:auto;}
  #fotos .galeria.par figure.retrato img{min-height:clamp(300px,32vw,460px);}
  #fotos .galeria.tres{grid-template-columns:1fr 1fr;}
  #fotos .galeria.tres figure:last-child{grid-column:1/-1;}
  #fotos figure.larga{grid-column:1/-1;}
}
@media(min-width:901px){
  #fotos .galeria.tres{grid-template-columns:repeat(3,minmax(0,1fr));}
  #fotos .galeria.tres figure:last-child{grid-column:auto;}
  #fotos .galeria.tres figure img{height:260px;}
  #fotos figure.larga img{height:380px;} /* em 280px a paisagem larga virava uma tira */
}
/* Cartão SEM foto no lugar do retrato (.galeria.par > aside.entrega): ramo cujo acervo não tem
   segunda foto que não repita o palco. Ícone grande, título, texto, lista com check e um rótulo
   no pé (.rodape), como o brief manda para o lugar sem foto; o cartão dita a altura da linha e a
   paisagem preenche a mesma altura. Pedido por pos-obra e marido-de-aluguel. */
#fotos .entrega{
  display:flex;flex-direction:column;gap:12px;padding:22px 20px;border-radius:10px;
  background:var(--superficie-2);border:1px solid var(--borda-forte);box-shadow:var(--sombra-foto);
}
#fotos .entrega .ico{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--a) 18%,transparent);color:var(--a-claro);}
#fotos .entrega .ico svg{width:24px;height:24px;display:block;}
#fotos .entrega h3{font-size:20px;}
#fotos .entrega p{font-size:15px;color:var(--texto-2);line-height:1.5;}
#fotos .entrega .checks{gap:10px;}
#fotos .entrega .checks li{font-size:15px;}
#fotos .entrega .rodape{margin-top:auto;padding-top:12px;border-top:1px solid var(--borda);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);font-weight:600;}
@media(min-width:901px){#fotos .entrega{padding:28px 26px;}}
/* No celular o retrato saía com os 220px da paisagem e cortava a cabeça de quem aparece. */
@media(max-width:560px){#fotos figure.retrato img{height:320px;object-position:50% 30%;}}

/* Vídeos curtos (demo.css .videos/.video) e dúvidas em acordeão (.faq): a demo centraliza os
   dois (fileira flex de cartões de 1/4, acordeão de 820px no meio) e na pele tudo alinha à
   esquerda na coluna do container. Com um vídeo e uma vaga a fileira vira grade de duas colunas;
   a vaga (.reservado) some no celular, onde sozinha empilhada só mostraria caixa vazia. O quadro
   reservado toma a proporção 16:10 do vídeo real (era 9:16, e o cartão do vídeo real ficava com
   300px vazios embaixo). */
.video{border-color:var(--borda-forte);box-shadow:var(--sombra-foto);}
.video p{color:var(--texto-2);}
.videos{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;}
.videos .video{width:auto;}
.videos .quadro{aspect-ratio:16/10;}
.videos .video.reservado{display:none;}
@media(min-width:561px){
  .videos{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
  .videos .video.reservado{display:block;}
}
.faq{margin:0;max-width:860px;}
.faq details{background:var(--superficie);border-color:var(--borda);}
.faq summary{color:var(--texto);}
.faq details p{color:var(--texto-2);}

/* Herói de CAPA (.hero-capa) seguido do cartão de atalhos: a pele puxa o cartão 28px para cima
   porque foi desenhada para o #palco; depois da foto da capa sobravam 12px e a borda do cartão
   encostava na da foto. 24px dão os 64px do chaveiro. No celular, com o painel de passos, os dois
   botões do herói caíam embaixo da barra fixa e do aviso de medição: o painel sai (o que ele diz
   está no cartão de atalhos, logo abaixo) e o topo aperta. */
@media(min-width:901px){.hero-capa + #atalhos .cartao-atalhos{margin-top:24px;}}
@media(max-width:760px){
  .hero-capa{padding-top:40px;}
  .hero-capa .painel{display:none;}
}

/* Tamanhos mínimos no celular (brief § 4: legenda 13px), medidos a 390px: olho 11px, legenda dos
   números 12px e a unidade 11,7px, legenda dos atalhos e linha de confiança 12,5px, nome do post
   do feed 13px e a linha em caixa alta da legenda da galeria 11px. */
@media(max-width:760px){
  .olho{font-size:12px;}
  .numeros .legenda{font-size:13px;}
  .numeros b em{font-size:max(13px,.6em);}
  .atalho small,.cartao-atalhos .linha-confianca{font-size:13px;}
  .feed > div > span:not(.ico){font-size:14px;}
  #fotos figcaption span{font-size:13px;letter-spacing:.1em;}
}

/* ---------- Movimento: só com prefers-reduced-motion: no-preference ---------- */
@media (prefers-reduced-motion: no-preference){
  .atalho{transition:background .2s ease,border-color .2s ease,transform .2s ease;}
  .atalho:hover{transform:translateX(3px);}
  .card::before{
    content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--a);
    transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.16,1,.3,1);
  }
  .card:hover::before{transform:scaleX(1);}
  #fotos figure img{transition:transform .4s cubic-bezier(.16,1,.3,1);}
  .onde-item{transition:border-color .2s ease;}
  .onde-item:hover{border-color:var(--borda-forte);}
}

/* ============================================================
   DESKTOP (a partir de 561px vai abrindo; 901px é o desenho completo)
   ============================================================ */
@media(min-width:561px){
  .cartao-atalhos .itens{grid-template-columns:1fr 1fr;gap:10px;}
  .faixa .btn{width:auto;}
  .onde-grade{grid-template-columns:repeat(2,minmax(0,1fr));}
  .onde-item.local{grid-column:1/-1;}
  .cta .acoes .btn{flex:0 1 auto;}
  #fotos .galeria{grid-template-columns:1.4fr 1fr;}
  /* o retrato (figure.retrato) ocupa as duas linhas da coluna da direita, sem esticar a foto */
  #fotos figure.retrato{grid-column:2;grid-row:1/3;display:grid;grid-template-rows:minmax(0,1fr) auto;}
  #fotos figure.retrato img{height:100%;}
}
@media(min-width:761px){
  footer.pe .container{grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;}
}
@media(min-width:901px){
  :root{--gutter:48px;}
  header .container{gap:24px;}
  .marca{font-size:18px;}
  .btn-topo{font-size:13.5px;padding:0 20px;}
  /* título à esquerda, cartão de 460px à direita: a dobra abaixo do palco deixa de ser "tudo centralizado" */
  #atalhos .container{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:48px;align-items:center;padding-top:40px;}
  #atalhos .cab{display:block;margin:0;}
  #atalhos .cab h2{font-size:clamp(30px,3.4vw,44px);}
  .cartao-atalhos{
    max-width:none;margin:-28px 0 0;border-radius:16px;padding:22px 24px 20px;
    box-shadow:0 24px 64px rgba(0,0,0,.55);
  }
  .cartao-atalhos .itens{grid-template-columns:1fr;}
  .cartao-atalhos .cabeca{margin-bottom:16px;}
  .cartao-atalhos .btn-zap{margin-top:14px;}
  .numeros{padding:28px 0 0;}
  .numeros .container{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
  .numeros .container > div{padding:16px 18px;min-height:84px;}
  .numeros b{font-size:28px;}
  .numeros .legenda{font-size:13px;}
  .grade{gap:20px;}
  .card{padding:26px 24px 24px;gap:12px;}
  .faixa-caixa{grid-template-columns:auto 1fr auto;align-items:center;padding:26px 30px;gap:22px;}
  #fotos .galeria{gap:20px;}
  #fotos figure img{height:280px;}
  .onde-grade{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
  .onde-item{padding:26px 24px;min-height:200px;}
  .onde-item.local{grid-column:1/-1;grid-row:2;}
  .onde-item.rede{grid-row:1;grid-column:3;}
  .cta-caixa{padding:56px 56px 48px;border-radius:20px;display:grid;grid-template-columns:1.2fr auto;align-items:center;gap:32px;}
  .cta .sub{margin:0;}
  .cta .acoes{justify-content:flex-end;}
  footer.pe{padding:72px 0 40px;}
}