/* ===== Studio Norte — gerado por gerar.py ===== */
:root{
  --primaria:#111111;
  --primaria-clara:#333333;
  --acento:#C9C9C9;
  /* Cores DERIVADAS da paleta, para texto e para botao com texto branco.
     Calculadas por legivel(): cada tema entra com a sua paleta e sai com a
     razao minima da WCAG garantida. Sem isto, um verde claro de tema novo
     nasce com texto branco a 2,3:1 — foi medido no Bloco 9. */
  --primaria-ink:#111111;
  /* O acento é feito para brilhar sobre fundo escuro; em sete dos dez temas ele
     dá de 1,66:1 a 2,17:1 como TEXTO sobre a superfície clara (medido). Este
     token é o mesmo acento ajustado para texto: nos temas escuros ele volta
     igual ao original, e nos claros escurece só o necessário. */
  --acento-ink:#757575;
  /* E o mesmo acento ajustado para as faixas escuras, onde a tinta clara da
     superfície não vale: MEDIDO 3,57:1 no eyebrow "Quem somos" do arquétipo
     tela, sobre #2a0e17. O helper escolhe sozinho se clareia ou escurece. */
  --acento-escuro:#c9c9c9;
  --primaria-gde:#111111;
  --primaria-btn:#111111;
  --primaria-btn-clara:#333333;
  --escura:#0B0B0B;
  --escura-2:#171717;
  --clara:#FFFFFF;
  --fundo:#FAFAFA;
  --tinta:#111111;
  --texto:#5A5A5A;
  --linha:#E6E6E6;
  --raio:10px;
  --raio-p:10px;
  --sombra:0 4px 22px rgba(0,0,0,.07);
  --sombra-g:0 18px 54px rgba(0,0,0,.15);
  --max:1180px;
  --titulo:'Archivo Black',sans-serif;
  --corpo:'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--corpo);color:var(--texto);background:var(--fundo);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5,.d{font-family:var(--titulo);color:var(--tinta);
  line-height:1.14;letter-spacing:-.03em}
img,video{max-width:100%;display:block}
/* O <picture> do srcset fica `display:contents` para o layout do <img> ficar
   EXATAMENTE como era sem wrapper: .im-ret é item de grid em .pessoa-f e
   .im-gal/.im-hero-arte são dimensionados por porcentagem do contêiner.
   Medido: com `display:block` o retrato colapsa para 0x0 (o <img> deixa de ser
   item do grid e passa a resolver width contra o <picture>), então contents não
   é preferência estética — é o que preserva o desenho aprovado. */
picture{display:contents}
a{color:var(--primaria-ink)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--primaria-ink);margin-bottom:14px}
.eyebrow::before{content:'';width:22px;height:2px;background:var(--acento);border-radius:2px}

/* ---------- botoes ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 27px;border-radius:4px;font-weight:600;
  font-size:.93rem;text-decoration:none;border:0;cursor:pointer;font-family:inherit;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,background .25s;
  white-space:nowrap}
.btn-p{background:linear-gradient(135deg,var(--primaria-btn),var(--primaria-btn-clara));
  color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.btn-p:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.26)}
.btn-v{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.3);
  backdrop-filter:blur(12px)}
.btn-v:hover{background:rgba(255,255,255,.2);transform:translateY(-3px)}
.btn-c{background:var(--clara);color:var(--primaria-ink);border:1.5px solid var(--linha)}
.btn-c:hover{border-color:var(--primaria);transform:translateY(-3px)}
.btn-esc{background:var(--escura);color:#fff}
.btn-esc:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.3)}

/* ---------- progresso de scroll ---------- */
#prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:999;
  background:linear-gradient(90deg,var(--primaria),var(--acento));transition:width .1s linear}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:900;padding:16px 0;
  transition:all .4s cubic-bezier(.4,0,.2,1)}
header.solido{background:rgba(255,255,255,.9);
  backdrop-filter:blur(18px) saturate(180%);padding:10px 0;
  box-shadow:0 1px 0 rgba(0,0,0,.06),0 8px 30px rgba(0,0,0,.07)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:22px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.logo-m{width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,var(--primaria),var(--acento));display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.22)}
.logo-m svg{width:21px;height:21px;fill:#fff}
.logo-t{font-family:var(--titulo);font-weight:800;font-size:1.05rem;color:#fff;
  line-height:1.15;letter-spacing:-.02em}
.logo-s{font-size:.62rem;color:rgba(255,255,255,.72);letter-spacing:.13em;
  text-transform:uppercase;font-weight:600}
header.solido .logo-t{color:var(--tinta)}
header.solido .logo-s{color:var(--texto)}

/* ---------- header sobre topo claro ----------
   Alguns layouts nao abrem com hero escuro (editorial, tipografico, cartaz):
   o primeiro bloco e claro. Sem isto o logo, o menu e o telefone ficam brancos
   sobre fundo claro e somem. O estado 'claro' mantem o header transparente mas
   pinta o texto como o estado solido — entao o topo E o sticky ficam legiveis.
   O JS continua alternando apenas 'solido' ao rolar; 'claro' e fixo na pagina. */
header.claro .logo-t{color:var(--tinta)}
header.claro .logo-s{color:var(--texto)}
header.claro nav a{color:var(--texto)}
header.claro nav a.atual,header.claro nav a:hover{color:var(--primaria-ink)}
header.claro .tel{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(0,0,0,.72)}
header.claro .tel:hover{background:rgba(0,0,0,.05)}
header.claro .burger span{background:var(--tinta)}
header.claro.solido .logo-t{color:var(--tinta)}
nav{display:flex;gap:26px;align-items:center}
nav a{color:rgba(255,255,255,.86);text-decoration:none;font-size:.89rem;font-weight:500;
  position:relative;transition:color .2s;white-space:nowrap}
nav a::after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;
  background:var(--acento);transition:width .3s}
nav a:hover::after,nav a.atual::after{width:100%}
nav a.atual{color:var(--acento);font-weight:700}
header.solido nav a{color:var(--texto)}
header.solido nav a.atual,header.solido nav a:hover{color:var(--primaria-ink)}
.tel{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:700;
  font-size:.88rem;padding:9px 16px;border-radius:100px;border:1.5px solid rgba(255,255,255,.25);
  /* MEDIDO: com a pilula transparente o telefone ficava em 2.67:1 sobre a parte
     clara do hero (8 de 83 medicoes abaixo de 4.5). O fundo escuro translucido
     garante o piso de contraste independentemente do que passa por tras.
     MEDIDO DE NOVO, no estado rolado: com .55 o piso nao se sustentava sobre o
     cabecalho claro (clinica-03 3.15:1, clinica-02 3.45:1) — sobre branco a
     pilula compunha ~#737373. Com .72 sobre qualquer fundo o texto branco fica
     em 9,3:1 no pior caso (fundo branco) e nunca abaixo de 4,5. */
  background:rgba(0,0,0,.72);
  transition:all .25s}
.tel:hover{background:rgba(0,0,0,.7)}
.tel svg{width:15px;height:15px;fill:currentColor}
header.solido .tel{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(0,0,0,.72)}
.burger{display:none;background:0;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:23px;height:2px;background:#fff;margin:5px 0;
  transition:.3s;border-radius:2px}
header.solido .burger span{background:var(--tinta)}

/* CTA do cabecalho. Era estilo inline no HTML; virou classe para o mobile
   poder compacta-lo (a regra do mobile nao vence estilo inline). */
.btn-cab{padding:11px 20px;font-size:.86rem}

/* ---------- hero ---------- */
.hero{position:relative;display:flex;align-items:center;overflow:hidden;
  background:var(--escura)}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform:scale(1.06)}
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,11,11,.8) 0%,rgba(11,11,11,.52) 45%,rgba(11,11,11,.94) 100%)}
.hero-grao{position:absolute;inset:0;z-index:2;opacity:.2;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.hero .wrap{position:relative;z-index:3;width:100%}
/* composicoes de hero */
.hero-centro{min-height:96vh;padding:150px 0 80px;text-align:center}
.hero-centro .lead{max-width:640px;margin-left:auto;margin-right:auto}
.hero-split{min-height:100vh;padding:140px 0 90px}
.hero-split .grade{display:grid;grid-template-columns:1.12fr .88fr;gap:54px;align-items:center}
.hero-lado{min-height:96vh;padding:150px 0 80px}
.hero-lado .grade{display:grid;grid-template-columns:.85fr 1.15fr;gap:0;align-items:center}
.hero h1{font-size:clamp(2.2rem,5.4vw,4.2rem);font-weight:800;color:#fff;
  margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--acento)}
.hero .lead{font-size:1.08rem;color:rgba(255,255,255,.8);margin-bottom:32px}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:34px}
.hero-centro .hero-cta{justify-content:center}
.badge{display:inline-flex;align-items:center;gap:9px;padding:8px 17px 8px 11px;
  border-radius:100px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(12px);color:#fff;font-size:.78rem;font-weight:600;margin-bottom:24px}
.badge .pt{width:7px;height:7px;border-radius:50%;background:var(--acento);
  box-shadow:0 0 0 4px rgba(255,255,255,.16);animation:pulsa 2.4s infinite}
@keyframes pulsa{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}
.confianca{display:flex;gap:24px;flex-wrap:wrap;align-items:center;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.14)}
.hero-centro .confianca{justify-content:center}
.conf-i{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.82);
  font-size:.82rem;font-weight:500}
.conf-i svg{width:17px;height:17px;fill:var(--acento);flex-shrink:0}

/* ---------- painel flutuante (buscador / agendamento) ---------- */
.painel{background:rgba(255,255,255,.97);
  backdrop-filter:blur(24px);border-radius:calc(var(--raio) + 6px);padding:28px;
  box-shadow:var(--sombra-g);border:1px solid rgba(255,255,255,.6)}
.painel h3{font-size:1.16rem;margin-bottom:5px}
.painel .sub{font-size:.83rem;color:var(--texto);margin-bottom:20px}
.campo{margin-bottom:14px}
.campo label{display:block;font-size:.75rem;font-weight:700;color:var(--tinta);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
.campo select,.campo input,.campo textarea{width:100%;padding:12px 14px;
  border-radius:var(--raio-p);border:1.5px solid var(--linha);font-family:inherit;
  font-size:.91rem;color:var(--tinta);background:#fff;transition:border-color .2s,box-shadow .2s;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%23888'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:10px}
.campo input,.campo textarea{background-image:none}
.campo textarea{min-height:110px;resize:vertical}
.campo select:focus,.campo input:focus,.campo textarea:focus{outline:0;
  border-color:var(--primaria);box-shadow:0 0 0 4px rgba(0,0,0,.06)}
.linha-2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.painel .btn{width:100%;margin-top:6px}
.fino{font-size:.72rem;color:var(--texto);opacity:.72;text-align:center;margin-top:12px}

/* ---------- secoes ---------- */
section{padding:100px 0;position:relative}
.sec-cab{max-width:650px;margin-bottom:52px}
.sec-cab.centro{margin-left:auto;margin-right:auto;text-align:center}
.sec-cab.centro .eyebrow{justify-content:center}
.sec-cab h2{font-size:clamp(1.85rem,3.4vw,2.75rem);font-weight:800;margin-bottom:15px}
.sec-cab p{font-size:1.02rem}
.fundo-claro{background:var(--clara)}
.fundo-escuro{background:var(--escura-2);color:#fff}
.fundo-escuro h2,.fundo-escuro h3,.fundo-escuro h4{color:#fff}
.fundo-escuro .sec-cab p{color:rgba(255,255,255,.72)}

/* ---------- cartoes ---------- */
.grade-cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.cartao{padding:26px 23px;border-radius:var(--raio);border:1.5px solid var(--linha);
  background:var(--clara);transition:transform .3s cubic-bezier(.34,1.4,.64,1),
  box-shadow .3s,border-color .3s;position:relative;overflow:hidden}
.cartao::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--primaria),var(--acento));transform:scaleX(0);
  transform-origin:left;transition:transform .35s}
.cartao:hover{transform:translateY(-6px);box-shadow:var(--sombra-g);border-color:transparent}
.cartao:hover::before{transform:scaleX(1)}
.cartao h4{font-size:1.02rem;margin-bottom:6px}
.cartao p{font-size:.86rem;line-height:1.55}
.ico{width:47px;height:47px;border-radius:13px;display:grid;place-items:center;
  margin-bottom:16px;background:linear-gradient(135deg,var(--primaria),var(--acento));
  opacity:.92;transition:transform .3s}
.cartao:hover .ico{transform:scale(1.08) rotate(-4deg)}
.ico svg{width:22px;height:22px;fill:#fff}

/* ---------- listas de servico / preco ---------- */
.servico{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:19px 0;border-bottom:1px solid var(--linha)}
.servico:last-child{border-bottom:0}
.servico .info h4{font-size:1.06rem;margin-bottom:4px}
.servico .info p{font-size:.86rem}
.servico .preco{font-family:var(--titulo);font-size:1.4rem;font-weight:800;
  color:var(--primaria-gde);white-space:nowrap}
.servico .dur{font-size:.77rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--texto);opacity:.85}

/* ---------- numeros ---------- */
.grade-num{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.num{text-align:center;padding:32px 18px;border-radius:var(--raio);
  background:var(--clara);border:1.5px solid var(--linha)}
.num .v{font-family:var(--titulo);font-size:clamp(2rem,3.8vw,2.8rem);font-weight:800;
  color:var(--primaria-gde);line-height:1;margin-bottom:8px}
.num .l{font-size:.86rem}

/* ---------- pessoas ---------- */
.grade-pessoas{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.pessoa{border-radius:var(--raio);overflow:hidden;border:1.5px solid var(--linha);
  background:var(--clara);transition:transform .3s,box-shadow .3s}
.pessoa:hover{transform:translateY(-6px);box-shadow:var(--sombra-g)}
.pessoa-f{aspect-ratio:1;background:linear-gradient(140deg,var(--escura-2),var(--primaria));
  display:grid;place-items:center;position:relative;overflow:hidden}
.pessoa-f::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 30% 22%, rgba(255,255,255,.2), transparent 62%)}
.pessoa-f .ini{font-family:var(--titulo);font-size:3rem;font-weight:800;
  color:rgba(255,255,255,.94);text-shadow:0 3px 14px rgba(0,0,0,.28)}
.pessoa-f .tag{position:absolute;bottom:11px;right:11px;padding:4px 11px;border-radius:100px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(8px);color:#fff;font-size:.69rem;font-weight:600}
.pessoa-c{padding:17px}
.pessoa-c h4{font-size:.97rem;margin-bottom:3px}
.pessoa-c .papel{font-size:.78rem;color:var(--primaria-ink);font-weight:600;margin-bottom:7px}
.pessoa-c .meta{font-size:.73rem;opacity:.7}

/* ---------- depoimentos ---------- */
.grade-dep{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:20px}
.dep{padding:28px;border-radius:var(--raio);background:var(--clara);
  border:1.5px solid var(--linha);display:flex;flex-direction:column;
  transition:transform .3s,box-shadow .3s}
.dep:hover{transform:translateY(-5px);box-shadow:var(--sombra)}
.estrelas{display:flex;gap:3px;margin-bottom:14px}
.estrelas svg{width:16px;height:16px;fill:#111111}
.dep q{font-size:.93rem;color:var(--tinta);line-height:1.7;font-style:normal;
  flex:1;margin-bottom:18px;display:block}
.dep-quem{display:flex;align-items:center;gap:11px;padding-top:16px;
  border-top:1px solid var(--linha)}
.av{width:41px;height:41px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;color:#fff;font-size:.9rem;
  background:linear-gradient(135deg,var(--primaria),var(--acento))}
.dep-quem strong{display:block;font-size:.87rem;color:var(--tinta)}
.dep-quem small{font-size:.75rem;opacity:.72}

/* ---------- selos / convenios ---------- */
.grade-selos{display:flex;flex-wrap:wrap;gap:11px}
.selo{padding:11px 21px;border-radius:100px;background:var(--clara);
  border:1.5px solid var(--linha);font-weight:600;font-size:.86rem;
  transition:all .25s}
.selo:hover{border-color:var(--primaria);transform:translateY(-3px)}
.fundo-escuro .selo{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);
  color:rgba(255,255,255,.9)}

/* ---------- passos ---------- */
.grade-passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:20px}
.passo{padding:30px 26px;border-radius:var(--raio);background:var(--clara);
  border:1.5px solid var(--linha);transition:transform .3s}
.passo:hover{transform:translateY(-5px)}
.passo .n{font-family:var(--titulo);font-size:2.4rem;font-weight:800;
  color:var(--primaria);opacity:.22;line-height:1;margin-bottom:13px}
.passo h4{font-size:1.04rem;margin-bottom:8px}
.passo p{font-size:.87rem}

/* ---------- galeria ---------- */
.grade-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.gal{aspect-ratio:1;border-radius:var(--raio);overflow:hidden;position:relative;
  background:linear-gradient(140deg,var(--escura-2),var(--escura));
  border:1px solid var(--linha);display:grid;place-items:center;
  transition:transform .35s,border-color .35s}
.gal:hover{transform:scale(1.03);border-color:var(--primaria)}
.gal svg{width:36px;height:36px;fill:rgba(255,255,255,.28)}
/* Legenda da foto. MEDIDO: era rgba(255,255,255,.75) direto sobre a imagem e
   ficava ilegivel sobre pele e fundo claro na galeria. Agora a legenda tem fundo
   proprio em degrade — a fotografia segue intacta, sem recorte, filtro ou troca
   de master: o que mudou foi so a apresentacao do texto. */
.gal span{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 12px 10px;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:#fff;
  font-weight:600;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.82))}
.gal.grande{grid-column:span 2;grid-row:span 2}
.gal.grande svg{width:56px;height:56px}

/* ---------- mapa ---------- */
.mapa{border-radius:var(--raio);overflow:hidden;border:1.5px solid var(--linha);
  aspect-ratio:4/3;position:relative;display:grid;place-items:center;
  background:
    linear-gradient(90deg,transparent 0 8%,#FFFFFF 8% 8.7%,
      transparent 8.7% 22%,#FFFFFF 22% 22.7%,
      transparent 22.7% 46%,#FFFFFF 46% 46.9%,
      transparent 46.9% 71%,#FFFFFF 71% 71.7%,
      transparent 71.7% 100%),
    linear-gradient(0deg,transparent 0 14%,#FFFFFF 14% 14.9%,
      transparent 14.9% 33%,#FFFFFF 33% 33.8%,
      transparent 33.8% 58%,#FFFFFF 58% 58.8%,
      transparent 58.8% 79%,#FFFFFF 79% 79.8%,
      transparent 79.8% 100%),
    linear-gradient(135deg,#F0F0F0 0%,#E2E2E2 50%,#D4D4D4 100%)}
.mapa::before{content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 46%,#B4B4B4 46% 49%,
    transparent 49%)}
.mapa .pino{width:54px;height:54px;border-radius:50%;background:var(--primaria);
  display:grid;place-items:center;position:relative;z-index:2;
  box-shadow:0 0 0 12px rgba(0,0,0,.1),0 0 0 26px rgba(0,0,0,.05);
  animation:pulsa 2.6s infinite}
.mapa .pino svg{width:25px;height:25px;fill:#fff}

/* ---------- unidades ---------- */
.unidade{padding:20px 22px;border-radius:var(--raio-p);border:1.5px solid var(--linha);
  background:var(--clara);transition:border-color .25s,box-shadow .25s}
.unidade:hover{border-color:var(--primaria);box-shadow:var(--sombra)}
.unidade h4{font-size:.98rem;margin-bottom:5px;display:flex;align-items:center;gap:8px}
.unidade .etq{font-size:.64rem;padding:3px 9px;border-radius:100px;
  background:var(--primaria-btn);color:#fff;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em}
.unidade p{font-size:.85rem;margin-bottom:4px}
.unidade a{font-size:.82rem;font-weight:600;text-decoration:none}
.unidade a:hover{text-decoration:underline}
.lista-unidades{display:flex;flex-direction:column;gap:13px}

/* ---------- horarios ---------- */
.horarios{border:1.5px solid var(--linha);border-radius:var(--raio);overflow:hidden;
  background:var(--clara)}
.horarios-cab{padding:14px 21px;background:var(--primaria-btn);color:#fff;
  font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.13em}
.horario{display:flex;justify-content:space-between;padding:12px 21px;
  border-bottom:1px solid var(--linha);font-size:.87rem}
.horario:last-child{border-bottom:0}
.horario .d{color:var(--tinta);font-weight:500}
.horario .h{opacity:.8}
.horario.fechado .h{color:#D9534F;font-weight:600}

/* ---------- slots de horario ---------- */
/* O botao de horario tem fundo BRANCO fixo, entao a tinta dele tem de ser
   calculada contra branco, e nao contra a superficie do tema: nos temas de
   superficie escura o --texto e um tom apagado (areia, cinza-azulado) que sobre
   branco da 2,67:1. Defeito que existia tambem no formulario de contato e so
   apareceu quando a lista de alvos deixou de ser so cabecalho/hero.
   O alvo de 4,8 (e nao 4,5) e folga medida: o recorte pega a antialias da letra,
   entao o valor nominal de 4,5 rendeu 4,42-4,46 no pixel. */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin-top:8px}
.slot{padding:11px 5px;border-radius:8px;border:1.5px solid var(--linha);
  background:#fff;color:#5a5a5a;font-size:.85rem;font-weight:600;cursor:pointer;
  text-align:center;transition:all .2s;font-family:inherit}
.slot:hover:not(.off){border-color:var(--primaria);color:var(--primaria)}
.slot.sel{background:var(--primaria-btn);color:#fff;border-color:transparent}
.slot.off{opacity:.3;cursor:not-allowed;text-decoration:line-through}

/* ---------- formularios longos ---------- */
.form-longo{max-width:720px;margin:0 auto;background:var(--clara);padding:38px;
  border-radius:var(--raio);border:1.5px solid var(--linha);box-shadow:var(--sombra)}
.ok-msg{display:none;text-align:center;padding:26px 0}
.ok-msg.mostra{display:block}
.ok-msg .anel{width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,var(--primaria),var(--acento));display:grid;
  place-items:center;margin:0 auto 16px}
.ok-msg .anel svg{width:30px;height:30px;fill:#fff}
.ok-msg h4{font-size:1.12rem;margin-bottom:7px}
.ok-msg p{font-size:.88rem}

/* ---------- FAQ ---------- */
.faq{border:1.5px solid var(--linha);border-radius:var(--raio-p);background:var(--clara);
  margin-bottom:11px;overflow:hidden}
.faq summary{padding:17px 21px;cursor:pointer;font-weight:600;color:var(--tinta);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:1.3rem;color:var(--primaria);
  font-weight:400;line-height:1;transition:transform .25s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq .corpo{padding:0 21px 19px;font-size:.9rem}

/* ---------- migalhas ---------- */
.migalhas{padding:106px 0 0;font-size:.83rem;opacity:.75}
.migalhas a{text-decoration:none}
.migalhas a:hover{text-decoration:underline}

/* ---------- cabecalho de pagina interna ---------- */
.cab-pagina{position:relative;padding:130px 0 62px;background:var(--escura);
  color:#fff;overflow:hidden}
.cab-pagina video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:.5}
.cab-pagina .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.86))}
.cab-pagina .wrap{position:relative;z-index:3}
.cab-pagina h1{font-size:clamp(2rem,4.2vw,3.1rem);font-weight:800;color:#fff;
  margin-bottom:12px}
.cab-pagina p{color:rgba(255,255,255,.78);max-width:620px;font-size:1.02rem}

/* ---------- CTA final ---------- */
.cta-final{background:linear-gradient(150deg,var(--escura),var(--escura-2));color:#fff;
  position:relative;overflow:hidden}
.cta-final::before{content:'';position:absolute;top:-140px;right:-140px;width:500px;
  height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.09),transparent 68%)}
.cta-final .wrap{position:relative;z-index:2;text-align:center}
.cta-final h2{color:#fff;font-size:clamp(1.85rem,3.6vw,2.7rem);margin-bottom:16px}
.cta-final p{color:rgba(255,255,255,.78);max-width:600px;margin:0 auto 30px;font-size:1.02rem}
.cta-final .hero-cta{justify-content:center}

/* ---------- footer ---------- */
footer{background:var(--escura);color:rgba(255,255,255,.6);padding:62px 0 28px;
  font-size:.87rem}
.ft-grade{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
footer h5{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:16px;font-weight:700}
footer a{color:rgba(255,255,255,.6);text-decoration:none;display:block;margin-bottom:9px;
  transition:color .2s,padding-left .2s}
footer a:hover{color:var(--acento);padding-left:4px}
.ft-base{padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.78rem}
.ft-social{display:flex;gap:11px;margin-top:15px}
.ft-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);
  display:grid;place-items:center;margin:0;padding:0}
.ft-social a:hover{background:var(--primaria);padding:0}
.ft-social svg{width:16px;height:16px;fill:#fff}

/* ---------- aviso de demonstracao ---------- */
.im-slot{display:block;width:100%;height:auto;object-fit:cover;background:#e9e4dc}
.im-ret{border-radius:10px}
.im-gal{position:absolute;inset:0;height:100%;z-index:0}
.gal{position:relative;overflow:hidden}

.hero-arte{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-arte .im-hero-arte{width:100%;height:100%;object-fit:cover}
.pessoa-f .im-ret,.ini .im-ret{border-radius:8px}
.demo-aviso{background:var(--escura);color:rgba(255,255,255,.82);
  padding:26px 0;font-size:.84rem;line-height:1.75}
.demo-aviso strong{color:#fff;display:block;margin-bottom:6px;
  letter-spacing:.02em}
.demo-aviso .wrap{max-width:820px}

/* ---------- whatsapp fixo ---------- */
.wa{position:fixed;right:20px;bottom:20px;z-index:800;width:56px;height:56px;
  border-radius:50%;background:#25D366;display:grid;place-items:center;
  box-shadow:0 8px 26px rgba(37,211,102,.42);text-decoration:none;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
/* O botao flutuante nao pode cobrir a barra fixa da tela (medido: o WhatsApp
   ficava sobre o CTA "Escolher horario"). Reserva a altura da barra + a area
   segura do aparelho. O 86px e o fallback sem JS; com JS a altura e medida. */
body.arq-tela .wa{bottom:calc(20px + var(--altura-barra,86px) + env(safe-area-inset-bottom,0px))}
/* A barra fixa do arquétipo tela cobre o fim da página. MEDIDO, com a página no
   fim e viewport de 390px: 20,6px da linha "Política de Privacidade · Termos"
   ficavam atrás dela — e como a barra é fixa e não há mais rolagem, aquele texto
   era permanentemente inalcançável no celular. A folga vai no PRÓPRIO rodapé (e
   não no body), para o fundo escuro dele continuar cobrindo até a borda em vez de
   sobrar uma faixa clara embaixo, e usa a mesma variável que o botão flutuante já
   usa — que o JS mede em runtime, logo acompanha a altura real da barra quando o
   texto dela quebra em duas linhas no celular. */
body.arq-tela footer{padding-bottom:calc(var(--altura-barra,86px) + 24px)}
.wa:hover{transform:scale(1.1)}
.wa svg{width:28px;height:28px;fill:#fff}
.wa::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:onda 2.4s infinite}
@keyframes onda{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}

/* ---------- animacao de entrada ---------- */
.js .rv{opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
.rv.on{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}.rv[data-d="4"]{transition-delay:.32s}
.rv[data-d="5"]{transition-delay:.4s}.rv[data-d="6"]{transition-delay:.48s}
@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition-duration:.01ms!important}
}

/* Eyebrow em faixa escura. A tinta da superfície clara (--acento-ink) é escura
   e some sobre o fundo escuro; nas faixas escuras a cor certa é o acento, que é
   feito para brilhar ali. São as faixas que o próprio tema declara como escuras
   — não é tinta neutra jogada por cima para calar o medidor. */
.fundo-escuro .eyebrow,.tela-escura .eyebrow,.mz-escuro .eyebrow,
.mz-foto .eyebrow,.ag-hero .eyebrow{color:var(--acento-escuro)}

/* CTA por item (cartão de especialidade, de profissional, de unidade). Discreto
   de propósito: o gesto é do cartão, não um botão novo competindo com o CTA da
   seção. A cor sai de --primaria-ink, já calculada para a superfície clara onde
   estes cartões vivem — por isso passa nos dez temas. */
.cta-item{display:inline-block;margin-top:10px;font-size:.82rem;font-weight:600;
  color:var(--primaria-ink);text-decoration:none;border-bottom:1.5px solid currentColor;
  padding-bottom:1px}
.cta-item:hover{opacity:.78}

/* ---------- agenda (demonstração funcional) ---------- */
/* Sem cor nova: tudo sai dos tokens do tema, então a agenda nasce coerente com
   qualquer paleta. É o mesmo motivo pelo qual ela funciona nos dez layouts sem
   um arquivo de estilo por layout. */
.ag-hero{position:relative;padding:150px 0 46px;background:var(--escura);color:#fff}
.ag-hero h1{color:#fff;font-size:clamp(1.9rem,4vw,3rem);margin-bottom:14px}
.ag-hero .lead{color:rgba(255,255,255,.8);max-width:60ch}
.ag-hero .eyebrow{color:var(--acento)}
.ag-grade{display:grid;grid-template-columns:1.25fr .75fr;gap:26px;align-items:start}
.ag-form,.ag-resumo,.ag-portao{background:var(--clara);border:1.5px solid var(--linha);
  border-radius:var(--raio);padding:26px}
.ag-form h3,.ag-resumo h3{font-size:1rem;margin:14px 0 12px}
.ag-form h3:first-child{margin-top:0}
.ag-resumo dl>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--linha);font-size:.88rem}
.ag-resumo dt{color:var(--texto);opacity:.8}
.ag-resumo dd{font-weight:600;color:var(--tinta);text-align:right}
.ag-ok{margin-top:16px;padding:14px 16px;border-radius:var(--raio-p);
  border:1.5px solid var(--primaria);background:color-mix(in srgb,var(--primaria) 8%,var(--clara))}
.ag-ok strong{display:block;color:var(--primaria-ink);margin-bottom:6px}
.ag-ok p{font-size:.85rem}
.ag-portao{max-width:520px;margin:0 auto}
.ag-barra{display:flex;justify-content:space-between;align-items:center;gap:14px;
  flex-wrap:wrap;margin-bottom:18px}
.ag-filtros{display:flex;align-items:center;gap:14px}
.ag-lista{display:grid;gap:12px}
.ag-item{background:var(--clara);border:1.5px solid var(--linha);
  border-left:4px solid var(--primaria);border-radius:var(--raio-p);padding:16px 18px}
.ag-item.s-cancelado{opacity:.62;border-left-color:#B3261E}
.ag-item.s-concluido{border-left-color:var(--texto)}
.ag-item-topo{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.ag-item-topo strong{color:var(--tinta)}
.ag-item p{font-size:.88rem;margin-top:4px}
.ag-selo{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;
  font-weight:700;color:var(--primaria-ink);border:1.5px solid var(--linha);
  border-radius:100px;padding:3px 10px;white-space:nowrap}
.ag-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ag-acoes .btn{padding:8px 14px;font-size:.8rem}
.ag-link{background:0;border:0;color:var(--primaria-ink);font:inherit;
  text-decoration:underline;cursor:pointer;padding:0}
@media(max-width:980px){.ag-grade{grid-template-columns:1fr}}

/* ---------- responsivo ---------- */
@media(max-width:980px){
  .hero-split .grade,.hero-lado .grade,.grade-2{grid-template-columns:1fr!important;gap:38px}
  .ft-grade{grid-template-columns:1fr 1fr;gap:28px}
  nav{display:none}
  /* O botao do menu existe a partir daqui — e o painel tambem, senao entre
     641 e 980 px o botao aparece e nao abre nada. */
  .burger{display:flex;flex-direction:column;justify-content:center;align-items:center;
    min-width:44px;min-height:44px;padding:0;margin-left:auto}
  /* Aparencia do menu aberto fica no CSS, nao no JS: antes o JS escrevia estilo
     inline com fundo branco fixo, o que ignorava o tema de cada layout. */
  header.menu-aberto nav{display:flex;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;padding:10px 20px 16px;z-index:901;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(18px) saturate(180%);
    box-shadow:0 18px 40px rgba(0,0,0,.18);max-height:70vh;overflow:auto}
  header.menu-aberto nav a{padding:15px 2px;font-size:1rem;color:var(--tinta);
    border-bottom:1px solid var(--linha)}
  header.menu-aberto nav a:last-child{border-bottom:0}
  header.menu-aberto nav a.atual{color:var(--primaria)}
  header.menu-aberto .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.menu-aberto .burger span:nth-child(2){opacity:0}
  header.menu-aberto .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hero-centro,.hero-split,.hero-lado{min-height:auto;padding:124px 0 66px}
  section{padding:72px 0}
  .grade-gal{grid-template-columns:repeat(2,1fr)}
  .gal.grande{grid-column:span 2;grid-row:span 1}
}
@media(max-width:640px){
  /* Cabecalho no mobile: a marca encolhe, o telefone sai do header e sobra um
     CTA compacto. Sem isto a linha estoura e o botao do menu fica fora da tela
     (medido: x=418 numa viewport de 390 px). */
  header .wrap.hd{padding-left:16px;padding-right:16px;gap:8px}
  .logo{min-width:0}
  .logo>div{min-width:0}
  .logo-t{font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .logo-s{display:none}
  .logo-m{width:34px;height:34px;border-radius:10px}
  .logo-m svg{width:18px;height:18px}
  .tel{display:none}
  .btn-cab{padding:9px 13px!important;font-size:.78rem!important}
  /* Tabela de precos do tipografico: no estreito as tres colunas nao cabem, a
     descricao desce para a propria linha em vez de espremer nome e preco. */
  .tp-tabela tr{display:flex;flex-wrap:wrap;justify-content:space-between;
    gap:4px 14px;padding:16px 0}
  .tp-tabela td{display:block;padding:0}
  .tp-tabela .desc{width:100%;padding-left:0}
}
@media(max-width:360px){
  .logo-t{font-size:.86rem}
}
@media(max-width:300px){
  /* Zoom alto em tela estreita (200% num celular da ~195 px de viewport CSS):
     sobra a marca e o menu.
     MEDIDO: esconder so o .logo-t nao bastava. O .logo tem flex-shrink:0 e o
     .logo-s (a sub-linha da marca) seguia medindo 137-186 px, empurrando o
     .burger para 205.1 / 207.9 / 224.6 numa viewport de 195 px (3 estouros em
     barbearia-02, clinica-05 e clinica-02). Agora a sub-linha sai, a marca pode
     encolher e o botao do menu reserva os seus 44 px. */
  .logo-t{display:none}
  .logo-s{display:none}
  .logo{min-width:0;flex-shrink:1}
  .burger{flex:0 0 44px}
  .btn-cab{display:none}
}
@media(max-width:560px){
  .linha-2{grid-template-columns:1fr}
  .ft-grade{grid-template-columns:1fr}
  .painel,.form-longo{padding:23px}
  .tel span{display:none}.tel{padding:10px}
  .hero-cta .btn{width:100%}
  .grade-gal{grid-template-columns:1fr}
  .gal.grande{grid-column:span 1}
}


/* ═══ CSS do arquétipo «tipografico» ═══ */

/* ── arquétipo tipográfico: tipo conduz, sem ícone, sem cartão ── */
.tp-topo{padding:180px 0 60px;border-bottom:3px solid var(--tinta)}
.tp-topo h1{font-size:clamp(3rem,11vw,9rem);line-height:.92;font-weight:800;
  letter-spacing:-.04em;text-transform:uppercase;margin-bottom:26px}
.tp-topo .sub{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;
  padding-top:24px;border-top:1px solid var(--linha)}
.tp-topo .sub p{font-size:1.06rem;line-height:1.75;max-width:46ch}
.tp-tabela{width:100%;border-collapse:collapse}
.tp-tabela tr{border-bottom:1px solid var(--linha);transition:background .2s}
.tp-tabela tr:hover{background:var(--clara)}
.tp-tabela td{padding:26px 0;vertical-align:baseline}
.tp-tabela .nome{font-family:var(--titulo);font-size:clamp(1.3rem,3.2vw,2.1rem);
  font-weight:800;text-transform:uppercase;letter-spacing:-.02em;color:var(--tinta)}
.tp-tabela .desc{font-size:.88rem;padding-left:34px;width:44%}
.tp-tabela .dur{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;
  opacity:.6;white-space:nowrap}
.tp-tabela .preco{font-family:var(--titulo);font-size:clamp(1.2rem,2.6vw,1.8rem);
  font-weight:800;color:var(--primaria);text-align:right;white-space:nowrap}
.tp-bloco{padding:80px 0;border-bottom:1px solid var(--linha)}
.tp-bloco .rot{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  font-weight:700;color:var(--primaria);margin-bottom:34px}
.tp-numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0}
.tp-num{padding:32px 26px;border-left:1px solid var(--linha)}
.tp-num:first-child{border-left:0}
.tp-num .v{font-family:var(--titulo);font-size:clamp(2.4rem,6vw,4rem);font-weight:800;
  line-height:1;color:var(--tinta);margin-bottom:10px}
.tp-num .l{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;opacity:.66}
.tp-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.tp-gal .g{aspect-ratio:1;background:var(--escura);display:grid;place-items:center;
  position:relative;overflow:hidden;transition:opacity .3s}
.tp-gal .g:hover{opacity:.82}
.tp-gal .g span{position:absolute;bottom:14px;left:14px;color:rgba(255,255,255,.72);
  font-size:.72rem;text-transform:uppercase;letter-spacing:.16em}
.tp-gal .g svg{width:30px;height:30px;fill:rgba(255,255,255,.2)}
.tp-frase{padding:100px 0;text-align:center}
.tp-frase blockquote{font-family:var(--titulo);font-size:clamp(1.5rem,4.4vw,3rem);
  font-weight:800;text-transform:uppercase;line-height:1.14;letter-spacing:-.03em;
  max-width:20ch;margin:0 auto 24px;color:var(--tinta)}
.tp-frase cite{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  font-style:normal;opacity:.6}
.tp-pessoas{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0}
.tp-p{padding:30px 24px;border-left:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.tp-p .n{font-family:var(--titulo);font-size:1.5rem;font-weight:800;color:var(--primaria);
  line-height:1;margin-bottom:12px}
.tp-p h4{font-size:1.06rem;margin-bottom:4px}
.tp-p .papel{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;opacity:.7}
.tp-p .meta{font-size:.78rem;opacity:.55;margin-top:8px}
@media(max-width:820px){
  .tp-topo .sub{grid-template-columns:1fr;gap:20px}
  .tp-tabela .desc,.tp-tabela .dur{display:none}
  .tp-gal{grid-template-columns:repeat(2,1fr)}
}