/*
Theme Name:  OMEGA Clínica
Theme URI:   https://omegaplugins.com
Description: Tema editorial para clínica de estética — estética clínica premium: preto profundo, serifa clássica em versais, muito respiro. Feito para a página de procedimento: resposta direta no topo, leitura confortável no celular e CTA de WhatsApp sempre à mão. Integra com o plugin OMEGA Clínica (schema, NAP, mapa por CID).
Version:     1.1.0
Updated:     2026-08-07
Author:      OMEGA Plugins
License:     GPL2
Text Domain: omega-clinica
*/

/* Tokens ------------------------------------------------------------------
   Direção visual: Clínica Otávio Macedo — preto profundo, serifa em versais,
   acento discreto, quase sem cor.

   Uma decisão deliberada: o CHROME (topo, hero, rodapé) é escuro; o CORPO do
   artigo é claro. Texto branco sobre preto em 1.500 palavras cansa a vista no
   celular, e a página de procedimento existe para ser lida até o fim. Assim
   fica a assinatura visual do modelo sem custo de legibilidade. */
:root{
  --oc-preto:#0d0d0d;
  --oc-preto-2:#161616;
  --oc-tinta:#16181a;
  --oc-tinta-suave:#5b6469;
  --oc-fundo:#ffffff;
  --oc-fundo-alt:#f7f7f6;
  --oc-borda:#e4e4e2;
  --oc-borda-escura:#2a2a2a;
  --oc-claro:#f2f2f0;
  --oc-realce:#12b8a0;        /* acento discreto, como o do modelo */
  --oc-largura:44rem;         /* medida de leitura, não a tela toda */
  --oc-largura-larga:76rem;
  --oc-serif:"Cormorant Garamond",Garamond,Georgia,"Times New Roman",serif;
  --oc-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--oc-fundo);
  color:var(--oc-tinta);
  font-family:var(--oc-sans);
  font-size:1.05rem;
  line-height:1.7;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}

/* Display serifado em versais — a assinatura do modelo -------------------- */
.oc-display{
  font-family:var(--oc-serif);
  font-weight:400;
  text-transform:uppercase;
  font-variant:small-caps;
  letter-spacing:.02em;
  line-height:1.08;
}

/* Acessibilidade ---------------------------------------------------------- */
.oc-skip{position:absolute;left:-9999px}
.oc-skip:focus{
  left:1rem;top:1rem;z-index:99;background:#fff;color:var(--oc-tinta);
  padding:.7rem 1rem;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.25)
}
.screen-reader-text{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap
}

/* Faixa de aviso ---------------------------------------------------------- */
.oc-aviso{
  background:var(--oc-preto-2);color:var(--oc-claro);text-align:center;
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.7rem 1rem;line-height:1.4;border-bottom:1px solid var(--oc-borda-escura)
}
.oc-aviso strong{color:var(--oc-realce);font-weight:600}

/* Cabeçalho escuro -------------------------------------------------------- */
.oc-topo{background:var(--oc-preto);color:var(--oc-claro)}
.oc-topo__in{
  max-width:var(--oc-largura-larga);margin:0 auto;padding:1.6rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap
}
.oc-marca{
  font-family:var(--oc-serif);font-size:1.35rem;letter-spacing:.04em;
  color:var(--oc-claro);text-decoration:none;line-height:1.2;font-variant:small-caps
}
.oc-marca small{
  display:block;font-family:var(--oc-sans);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:#8b9296;margin-top:.35rem;font-variant:normal
}
.oc-topo__tel{
  font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--oc-claro);text-decoration:none;border:1px solid #3a3a3a;
  padding:.6rem 1.1rem;border-radius:2px;white-space:nowrap;transition:border-color .2s,color .2s
}
.oc-topo__tel:hover{border-color:var(--oc-realce);color:var(--oc-realce)}

/* Conteúdo ---------------------------------------------------------------- */
.oc-main{max-width:var(--oc-largura);margin:0 auto;padding:3rem 1.5rem 4rem}
.oc-titulo{
  font-family:var(--oc-serif);font-weight:400;text-transform:uppercase;
  font-variant:small-caps;letter-spacing:.015em;
  font-size:2.35rem;line-height:1.08;margin:0 0 1rem
}
.oc-meta{
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oc-tinta-suave);margin:0 0 2.5rem
}

.oc-conteudo h2{
  font-family:var(--oc-serif);font-weight:400;text-transform:uppercase;
  font-variant:small-caps;letter-spacing:.02em;
  font-size:1.7rem;line-height:1.15;margin:3rem 0 .8rem
}
.oc-conteudo h3{
  font-size:1.02rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;margin:2rem 0 .5rem;color:var(--oc-tinta)
}
.oc-conteudo p{margin:0 0 1.15rem}
.oc-conteudo ul,.oc-conteudo ol{margin:0 0 1.15rem;padding-left:1.15rem}
.oc-conteudo li{margin:.45rem 0}
.oc-conteudo a{color:var(--oc-tinta);text-decoration:underline;text-underline-offset:3px}
.oc-conteudo a:hover{color:var(--oc-realce)}

/* Resposta direta — o que o leitor apressado lê e a IA cita ---------------- */
.omega-resposta-direta{
  border-top:1px solid var(--oc-preto);border-bottom:1px solid var(--oc-borda);
  padding:1.6rem 0;margin:0 0 2.5rem
}
.omega-resposta-direta p{
  margin:0;font-family:var(--oc-serif);font-size:1.4rem;line-height:1.45;color:var(--oc-tinta)
}

/* CTA — sóbrio, alinhado ao modelo ---------------------------------------- */
.omega-cta{
  margin:3.5rem 0;padding:2.5rem 1.75rem;text-align:center;
  background:var(--oc-preto);color:var(--oc-claro);border-radius:2px
}
.omega-cta__txt{
  margin:0 0 1.5rem;font-family:var(--oc-serif);font-size:1.5rem;line-height:1.3;
  font-weight:400;color:#fff;font-variant:small-caps;letter-spacing:.015em
}
.omega-cta__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  background:var(--oc-realce);color:#04211d!important;
  font-weight:700;font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;line-height:1;
  padding:1.05rem 2.1rem;border-radius:2px;text-decoration:none!important;
  transition:background .2s ease,transform .15s ease
}
.omega-cta__btn:hover,.omega-cta__btn:focus{background:#16d6bb;transform:translateY(-1px)}
.omega-cta__btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.omega-cta__ico{flex:0 0 auto}
.omega-cta__obs{margin:1.1rem 0 0;font-size:.78rem;color:#8b9296;line-height:1.55}

/* Silo, mapa, transcrição -------------------------------------------------- */
.omega-silo{margin:3.5rem 0 0;padding-top:2rem;border-top:1px solid var(--oc-borda)}
.omega-silo h2{margin-top:0;font-size:1.2rem}
.omega-silo ul{list-style:none;padding:0;margin:0}
.omega-silo li{margin:.5rem 0}
.omega-silo a{color:var(--oc-tinta);text-decoration:none;border-bottom:1px solid var(--oc-borda)}
.omega-silo a:hover{border-color:var(--oc-realce);color:var(--oc-realce)}
.omega-mapa{margin:2.5rem 0;border-radius:2px;overflow:hidden;border:1px solid var(--oc-borda)}
.omega-mapa iframe{display:block}
.omega-transcricao{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--oc-borda)}
.omega-atualizado{
  color:var(--oc-tinta-suave);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;margin-top:2.5rem
}

/* Rótulo de seção — o "NOSSA CLÍNICA / AS ESPECIALIDADES" do modelo -------
   Versalete espaçado acima do título. É o que dá o ar editorial. */
.oc-rotulo{
  display:block;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--oc-tinta-suave);margin:0 0 .6rem;font-weight:600
}
.oc-rodape .oc-rotulo,.oc-topo .oc-rotulo{color:#8b9296}

/* Botão de contorno em versalete — o "AGENDE UMA VISITA" do modelo -------- */
.oc-btn{
  display:inline-block;padding:.95rem 2rem;border:1px solid currentColor;
  border-radius:2px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;text-decoration:none;color:var(--oc-tinta);
  transition:background .2s,color .2s,border-color .2s
}
.oc-btn:hover{background:var(--oc-preto);border-color:var(--oc-preto);color:#fff}
.oc-rodape .oc-btn,.omega-cta .oc-btn{color:var(--oc-claro)}
.oc-rodape .oc-btn:hover{background:var(--oc-realce);border-color:var(--oc-realce);color:#04211d}

/* Grade de especialidades — a matriz de procedimentos do modelo ----------- */
.oc-grade{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:1px;background:var(--oc-borda);border:1px solid var(--oc-borda);
  margin:2rem 0;padding:0;list-style:none
}
.oc-grade li{background:#fff;margin:0}
.oc-grade a{
  display:flex;align-items:center;min-height:7.5rem;padding:1.5rem 1.25rem;
  font-family:var(--oc-serif);font-size:1.2rem;line-height:1.2;
  font-variant:small-caps;text-transform:uppercase;letter-spacing:.02em;
  color:var(--oc-tinta);text-decoration:none;transition:background .2s,color .2s
}
.oc-grade a:hover{background:var(--oc-preto);color:#fff}

/* Cartões ------------------------------------------------------------------ */
.oc-lista{display:grid;gap:0;padding:0;margin:2rem 0 0;list-style:none}
.oc-card{border-top:1px solid var(--oc-borda);padding:1.75rem 0}
.oc-card:last-child{border-bottom:1px solid var(--oc-borda)}
.oc-card h2{
  font-family:var(--oc-serif);font-weight:400;font-variant:small-caps;
  text-transform:uppercase;letter-spacing:.015em;
  font-size:1.35rem;margin:0 0 .5rem;line-height:1.2
}
.oc-card h2 a{color:var(--oc-tinta);text-decoration:none}
.oc-card h2 a:hover{color:var(--oc-realce)}
.oc-card p{margin:0;color:var(--oc-tinta-suave);font-size:.96rem}

/* Busca -------------------------------------------------------------------- */
.oc-busca{display:flex;gap:.5rem;margin:1.5rem 0 0;flex-wrap:wrap}
.oc-busca input[type=search]{
  flex:1 1 14rem;padding:.85rem 1rem;border:1px solid var(--oc-borda);
  border-radius:2px;font-size:1rem;font-family:inherit;background:#fff
}
.oc-busca button{
  padding:.85rem 1.6rem;border:0;border-radius:2px;background:var(--oc-preto);
  color:#fff;font-weight:700;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;font-family:inherit
}
.oc-busca button:hover{background:var(--oc-realce);color:#04211d}

/* Rodapé escuro ------------------------------------------------------------ */
.oc-rodape{background:var(--oc-preto);color:var(--oc-claro);margin-top:5rem}
.oc-rodape__in{max-width:var(--oc-largura-larga);margin:0 auto;padding:3.5rem 1.5rem;font-size:.92rem}
.omega-nap{font-style:normal;line-height:1.85}
.omega-nap__nome{
  display:block;font-family:var(--oc-serif);font-size:1.3rem;font-variant:small-caps;
  letter-spacing:.03em;margin-bottom:.6rem;color:#fff
}
.omega-nap a{color:var(--oc-realce);text-decoration:none}
.omega-nap a:hover{text-decoration:underline}
.omega-nap__horario{display:block;margin-top:.7rem;color:#8b9296;font-size:.85rem}
.oc-rodape__aviso{margin-top:1.75rem;color:#7d8488;font-size:.8rem;line-height:1.65;max-width:42rem}

/* Foco visível ------------------------------------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--oc-realce);outline-offset:2px
}

@media (min-width:48rem){
  .oc-titulo{font-size:3.4rem}
  .oc-conteudo h2{font-size:2rem}
  .omega-cta__txt{font-size:1.85rem}
  .oc-main{padding-top:4rem}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .omega-cta__btn:hover{transform:none}
}