/*
 * Domus Podologia Clinica — adaptacao do OpenDesign V3 ao WordPress real.
 * Mantem os componentes dinamicos do site e aplica a linguagem visual aprovada.
 * Fonte: C:/Projetos/_Prototipos/Domus-LucieneCamargos/opendesign/
 */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ink: #12314a;
  --ink-2: #0b2236;
  --gold: #b8935b;
  --gold-text: #765526;
  --cream: #f4efe7;
  --paper: #fffcf7;
  --white: #fff;
  --texto: #243241;
  --muted: #525c66;
  --line: #e5ded3;
  --danger: #86443d;
  --radius: 14px;
  --radius-sm: 10px;
  --content: 1120px;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --section-y: clamp(2.5rem, 4.5vw, 4rem);
  --section-y-tight: clamp(1.75rem, 3vw, 2.5rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
}

h1, h2, h3, h4,
.secao__titulo,
.topo__titulo,
.card-caso__titulo,
.card__titulo,
.passo__titulo,
.menu__titulo,
.duvida__pergunta {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -.005em;
}

h1 { font-size: clamp(2.15rem, 5.2vw, 3.65rem); }
h2 { font-size: clamp(1.75rem, 3.8vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Ritmo vertical mais compacto. Secoes consecutivas de mesmo fundo nao somam
   dois espacamentos inteiros. */
.secao {
  padding: var(--section-y) var(--gutter);
}

.secao--topo {
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}

.secao--texto,
.secao--cta {
  padding-block: var(--section-y-tight);
}

.secao.fundo--branco + .secao.fundo--branco,
.secao.fundo--claro + .secao.fundo--claro,
.secao.fundo--bege + .secao.fundo--bege {
  padding-top: 0;
}

.secao__interno,
.cabecalho__interno,
.rodape__interno {
  width: min(var(--content), 100%);
}

.fundo--branco { background: var(--paper); }
.fundo--claro { background: var(--paper); }
.fundo--bege { background: var(--cream); }
.fundo--escuro,
.rodape { background: var(--ink-2); }

.secao__titulo {
  color: var(--ink);
  font-size: clamp(1.75rem, 3.8vw, 2.7rem);
  line-height: 1.12;
}

.secao__texto {
  max-width: 68ch;
  color: var(--muted);
  margin-bottom: 1.2rem;
}

.eyebrow {
  margin-bottom: 1.15rem;
  color: var(--gold-text);
  font: 700 .74rem/1 var(--sans);
  letter-spacing: .18em;
}

/* Botoes V3: cantos discretos, sem elevacao e com estados claros. */
.botao {
  min-height: 52px;
  padding: .9rem 1.65rem;
  border-width: 1.5px;
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: .95rem;
  line-height: 1.2;
  transition: background-color .16s, border-color .16s, color .16s;
}

.botao:hover { transform: none; }
.botao--destaque { background: var(--ink); }

.fundo--escuro .botao--destaque {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.fundo--escuro .botao--destaque:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
}

.botoes { gap: .85rem; margin-top: 1.6rem; }

/* Cabecalho: simbolo oficial + assinatura tipografica. */
.cabecalho {
  z-index: 100;
  background: rgba(255, 252, 247, .94);
  border-bottom-color: var(--line);
}

.cabecalho__interno {
  min-height: 74px;
  padding: .4rem var(--gutter);
  gap: 1.5rem;
}

/* O bloco de shortcode do WordPress pode inserir paragrafos vazios entre os
   fragmentos do cabecalho. Eles ocupavam gaps do flex e faziam a navegacao
   quebrar em duas linhas em 1280 px. */
.cabecalho__interno > p:empty { display: none; }
.cabecalho__interno > p:has(.cabecalho__botao-menu) { display: contents; margin: 0; }

.marca--cabecalho {
  gap: .7rem;
  padding-block: .4rem;
}

.marca--cabecalho .marca__imagem {
  width: auto;
  height: 46px;
  aspect-ratio: 420 / 316;
  object-fit: contain;
}

.marca__texto {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .2rem;
}

.marca__nome {
  color: var(--ink);
  font: 500 1.18rem/1 var(--serif);
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.marca__assinatura {
  color: var(--gold-text);
  font: 500 .6rem/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.menu { gap: .15rem; }
.cabecalho__nav .menu { flex-wrap: nowrap; }

.menu__item > a {
  min-height: 44px;
  padding: .6rem;
  border: 0;
  border-radius: 8px;
  color: var(--texto);
  font: 500 .9rem/1 var(--sans);
  white-space: nowrap;
}

.menu__item > a:hover {
  border: 0;
  background: #f0eadf;
  color: var(--ink);
}

.menu__item--atual > a {
  box-shadow: inset 0 -2px 0 var(--gold);
  color: var(--ink);
  font-weight: 600;
}

.cabecalho__acoes .botao {
  min-height: 48px;
  padding-inline: 1rem;
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  white-space: nowrap;
}

.cabecalho__acoes .botao:hover { background: #f0eadf; }

.cabecalho__botao-menu {
  width: auto;
  min-width: 86px;
  height: 44px;
  border: 1.5px solid #cfc6b8;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: 600 .88rem/1 var(--sans);
}

.cabecalho__botao-menu::before { content: "Menu"; margin-right: .55rem; }
.cabecalho__tracos { display: inline-block; width: 17px; }

/* Hero e topo interno. */
.topo {
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.75rem, 4vw, 3rem);
}

.topo--sem-imagem { grid-template-columns: minmax(0, 58rem); }
.topo--sem-imagem .topo__texto { max-width: 58rem; }

/* ⚠️ 22ch era estreito demais: qualquer título com mais de 22 caracteres
 * quebrava, mesmo com metade da largura livre ao lado. "Tratamentos
 * podológicos da Domus" (32) quebrava; "Quem passa pela Domus percebe o
 * cuidado." (40) também. Medido na tela, não no olho.
 *
 * O limite continua existindo — linha de título muito longa cansa a leitura —
 * mas agora cabe a frase inteira nos títulos reais do site. */
.topo__titulo {
  max-width: 54ch;
  margin-bottom: .65rem;
  color: var(--white);
  font-size: clamp(2.15rem, 5.2vw, 3.65rem);
  line-height: 1.12;
  letter-spacing: -.005em;
}

.topo--sem-imagem .topo__titulo { max-width: 56ch; }
.topo__subtitulo { max-width: 72ch; color: rgba(255,255,255,.86); }
.topo__assinatura { color: var(--gold); font: 500 .72rem/1.4 var(--sans); letter-spacing: .15em; text-transform: uppercase; }

.figura img {
  border-radius: var(--radius);
  box-shadow: none;
}

/* ⚠️ Quadro por ORIENTAÇÃO da foto, não um 4/3 para todas.
 *
 * As fotos da Domus são verticais (a da Luciene é 1012×1800). Forçadas num
 * quadro 4/3 deitado com object-fit:cover, sobrava uma faixa horizontal — e no
 * bloco "Cuidado conduzido por Luciene Camargos" o corte comia o rosto dela.
 * Conferido na tela em 30/08/2026.
 *
 * O topo é largo de propósito (fica ao lado do texto). O retrato e o lateral
 * acompanham a foto: verticais. */
/* ⚠️ QUADRO SEGUE A ORIENTAÇÃO DA FOTO. Regra dura, e custou três telas.
 *
 * O acervo da Domus é quase todo VERTICAL (1012×1800, 1350×1800). Enfiado num
 * quadro deitado com object-fit:cover, sobra uma faixa horizontal do meio — e
 * o que fica de fora é justamente o rosto. Em 30/08/2026 isso cortou a cabeça
 * da Luciene em três lugares: no bloco de autoridade da home, no "Formação e
 * orientação" da Sobre, e nos três cards da Área Profissional.
 *
 * Só o topo é deitado, porque ali a foto fica ao lado do texto e a largura é
 * o que importa. Todo o resto acompanha a foto. */
.figura--topo img { aspect-ratio: 4 / 3; }
.figura--lateral img { aspect-ratio: 4 / 5; }
.figura--retrato img { aspect-ratio: 4 / 5; }
.figura--card img { aspect-ratio: 4 / 5; }

/* Cards e passos sem sombra, sem movimento decorativo. */
.card-caso__link,
.card__link,
.passo,
.contato-card,
.duvida,
.aviso {
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

.card-caso__link:hover,
.card__link:hover {
  transform: none;
  border-color: var(--ink);
  box-shadow: none;
  background: #f0eadf;
}

.passos { gap: 1.15rem; }

.passo {
  padding: 1.15rem 0 0;
  border: 0;
  border-top: 2px solid var(--gold);
  border-radius: 0;
  background: transparent;
}

.passo__numero {
  display: block;
  width: auto;
  height: auto;
  margin-bottom: .7rem;
  border: 0;
  border-radius: 0;
  color: var(--gold-text);
  font: 600 .78rem/1 var(--sans);
  letter-spacing: .1em;
}

.passo__titulo { font-size: 1.15rem; }

.lista-sinais li {
  border-color: var(--line);
  border-radius: var(--radius-sm);
}

.duvidas { max-width: 76ch; gap: .7rem; }

.duvida__pergunta {
  min-height: 44px;
  padding: 1.15rem 3rem 1.15rem 1.35rem;
  color: var(--ink);
  font: 600 1rem/1.4 var(--sans);
}

.duvida__pergunta:hover { background: #f0eadf; }

.duvida__resposta { padding: 0 1.35rem 1.35rem; }

.aviso {
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--line);
  background: var(--cream);
}

/* CTA final: alinhamento editorial e frase em uma linha no desktop. */
.secao--cta {
  padding-block: clamp(2.5rem, 4.5vw, 3.75rem);
}

.cta {
  max-width: none;
  margin: 0;
  text-align: left;
}

.cta .secao__titulo {
  max-width: 46ch;
  font-size: clamp(1.75rem, 3.8vw, 2.7rem);
}

.cta .secao__texto {
  width: fit-content;
  max-width: 76ch;
  margin: .9rem 0 0;
  color: rgba(255,255,255,.85);
}

.cta .botao { margin-top: 0; }
.cta .botoes { margin-top: 1.6rem; }

/* Contato e formularios mantem a funcao real, com acabamento V3. */
.contato-grade { gap: 1.15rem; }
.contato-card { background: var(--paper); padding: 1.6rem; }
.contato-rotas { border-radius: var(--radius); }

.domus-form,
.domus-auth__form { max-width: 34rem; }

.domus-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.domus-form input,
.domus-form select,
.domus-form textarea,
.domus-auth__form input[type="text"],
.domus-auth__form input[type="email"],
.domus-auth__form input[type="password"] {
  min-height: 52px;
  border: 1.5px solid #cfc6b8;
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--texto);
  font-family: var(--sans);
}

/* Mantém o estado inicial do seletor legível também no Chrome/Lighthouse,
   que pode aplicar o cinza do sistema ao primeiro option de um campo required. */
.domus-form select:invalid {
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted);
}

.domus-form select:valid {
  color: var(--texto) !important;
  -webkit-text-fill-color: var(--texto);
}

.domus-form .button {
  display: inline-flex;
  width: auto;
  justify-self: start;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: .9rem 1.65rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: 600 .95rem/1.2 var(--sans);
  cursor: pointer;
}

.domus-form .button:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Rodape: lockup completo claro, sem cartao branco em volta da marca. */
.rodape {
  padding: clamp(2.25rem, 4vw, 3.25rem) var(--gutter) 0;
  color: rgba(255,255,255,.8);
}

.rodape__grade { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr; gap: 2.25rem; }

.rodape .marca--rodape {
  display: block;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.rodape .marca--rodape:hover { border: 0; }

.rodape .marca--rodape .marca__imagem {
  width: auto;
  height: clamp(112px, 13vw, 146px);
  aspect-ratio: 760 / 541;
}

.rodape .menu__titulo {
  margin-bottom: 1rem;
  color: var(--gold);
  font: 600 .76rem/1 var(--sans);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.rodape .menu--rodape { gap: .55rem; }
.rodape .menu--rodape a { min-height: auto; padding: 0; color: rgba(255,255,255,.8); white-space: normal; }
.rodape .menu--rodape a:hover { background: transparent; color: #fff; text-decoration: underline; }

.rodape__base {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-block: 1.5rem;
  border-top-color: rgba(255,255,255,.16);
}

/* A regra geral do menu é mais específica que .rodape a. Reforça a cor
   acessível dos links legais sobre o azul profundo do rodapé. */
.rodape__base .menu--legal a {
  color: var(--cream);
}

.rodape__base .menu--legal a:hover,
.rodape__base .menu--legal a:focus-visible {
  color: var(--white);
}

@media (max-width: 1079px) {
  .cabecalho__nav,
  .cabecalho__acoes { display: none; }

  .cabecalho__botao-menu { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }

  .menu-movel:not([hidden]) {
    display: block;
    padding-inline: var(--gutter);
  }

  .menu-movel .menu { gap: 0; }
  .menu-movel .menu__item > a { width: 100%; padding: .85rem .5rem; border-bottom: 1px solid var(--line); }
}

@media (max-width: 860px) {
  .topo { grid-template-columns: 1fr; }
  .figura--topo img { aspect-ratio: 3 / 2; }
  .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479px) {
  body { font-size: 16px; }
  .secao { padding-inline: 1.25rem; }
  .cabecalho__interno { padding-inline: 1.25rem; }
  .marca--cabecalho .marca__imagem { height: 38px; }
  .marca__nome { font-size: 1.05rem; letter-spacing: .1em; }
  .marca__assinatura { display: none; }
  .cabecalho__botao-menu { min-width: 82px; }
  .botao { width: 100%; }
  .domus-form .button { width: 100%; justify-self: stretch; }
  .botoes { align-items: stretch; }
  .cta .secao__texto { width: auto; max-width: 100%; }
  .rodape__grade { grid-template-columns: 1fr; }
}

/* Páginas técnicas da área do aluno recebem uma introdução editorial única,
   sem alterar os formulários produzidos pelo plugin. */
.domus-system-page-heading {
  max-width: 46rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.domus-system-page-heading h1 {
  margin-bottom: .65rem;
  color: var(--ink);
}

.domus-system-page-heading > p:last-child {
  max-width: 62ch;
  color: var(--muted);
}

.barra-movel .botao--whatsapp {
  background: var(--ink);
  color: var(--paper);
}

.barra-movel .botao--whatsapp:hover {
  background: var(--ink-2);
  color: var(--paper);
}


/* ============================================================
   Largura de título x largura de leitura — são medidas diferentes
   ============================================================
   O limite de ~68ch existe para TEXTO CORRIDO: linha longa demais
   cansa a leitura. Só que ele estava espremendo o TÍTULO junto,
   e título não se lê como parágrafo — se lê de relance.

   Resultado na tela, em 30/08/2026: "O conteúdo das formações fica
   na área do aluno" quebrava em duas linhas com metade da largura
   livre ao lado. O mesmo em Tratamentos, Avaliações, Conteúdos,
   Contato e Área Profissional.

   Aqui o título volta a usar a largura da seção; o texto mantém a
   dele. ============================================================ */
.bloco-texto .secao__titulo,
.destaque .secao__titulo,
.autoridade .secao__titulo,
.vitrine .secao__titulo,
.duvidas .secao__titulo,
.secao__interno > .secao__titulo { max-width: none; }

/* ============================================================
   LARGURA ÚNICA DO CONTEÚDO — 30/08/2026
   ------------------------------------------------------------
   Pedido do Gutenberg, com prints de 10 páginas: "todas as
   sessões têm que ter o mesmo tamanho" e "não aproveita o
   espaço, o site todo".

   O QUE ESTAVA ERRADO. Cada bloco tinha a SUA largura de
   leitura, todas mais estreitas que a coluna da seção:

       coluna da seção .......... 1120px
       título de seção ...........  855px  (76ch)
       parágrafo .................  855px  (68ch)
       perguntas (dúvidas) .......  855px  (76ch)
       texto do CTA ..............  724px
       caixa de aviso ............ 1120px  ← única no tamanho certo

   Como a caixa de aviso é a única com borda visível, o olho
   comparava direto: o parágrafo cortava 265px antes dela. Foi
   o "o texto corta antes do quadrado, não está alinhado".
   E o título quebrava sozinho ("...prevenção em / urgência")
   com 265px vazios do lado.

   A REGRA AGORA. Uma medida só, igual à coluna. Tudo — título,
   texto, subtítulo, caixa, pergunta, CTA — termina na mesma
   linha à direita. Nada de largura por bloco.

   O preço disso é linha mais longa para ler, e ele é pago com
   entrelinha maior (1.75): é a compensação clássica de medida
   larga. Sem isso o olho perde a volta para a linha seguinte.
   ============================================================ */

:root { --medida: 100%; }

/* Um só valor. Se um dia precisar apertar a leitura, muda AQUI. */
.secao__titulo,
.secao__texto,
.secao__chapeu,
.bloco-texto,
.bloco-texto > *,
.destaque,
.destaque--sozinho,
.duvidas,
.cta,
.cta .secao__titulo,
.cta .secao__texto,
.contato-acesso,
.domus-system-page-heading > p:last-child { max-width: var(--medida); }

/* Medida larga só se sustenta com entrelinha generosa. */
.bloco-texto > p,
.secao__texto { line-height: 1.75; }

/* ---- Topo -------------------------------------------------
   Sem foto: o texto ocupava 58rem (928px) e sobrava coluna à
   toa. Passa a usar a largura inteira.
   Com foto: a coluna do texto tinha 563px — apertada demais
   para um título em serifada de ~58px, que quebrava em 3
   linhas. A proporção passa a favorecer o texto (~640px).     */
.topo { grid-template-columns: 1.5fr 1fr; }
.topo--sem-imagem { grid-template-columns: minmax(0, 100%); }
.topo--sem-imagem .topo__texto { max-width: none; }
.topo__titulo,
.topo__subtitulo { max-width: none; }

/* Em tela estreita nada disso vale: volta a ser uma coluna só. */
@media (max-width: 1079px) {
  .topo { grid-template-columns: 1fr; }
}

/* ============================================================
   MENU FIXO AO ROLAR — 30/08/2026
   ------------------------------------------------------------
   "ao rolar a tela, o menu tem que ficar fixo, não pode sumir."

   O .cabecalho JÁ era position: sticky desde sempre, e nunca
   funcionou. A causa não estava nele: um elemento sticky só
   gruda DENTRO da caixa do pai, e o WordPress embrulha todo
   template part num <div class="wp-block-template-part">.
   Medido: pai com 75px, header com 75px — zero de margem para
   deslizar. Ele "grudava" e imediatamente saía junto com o pai.

   display:contents faz o embrulho sumir do layout sem sumir do
   HTML: o cabeçalho passa a ser filho direto do container que
   rola, e aí o sticky tem o documento inteiro para grudar.
   ============================================================ */

.wp-block-template-part:has(> .cabecalho) { display: contents; }

/* Navegador sem :has() — o sticky continua sem funcionar, mas
   o menu não some da página. Nada quebra, só não gruda. */
@supports not selector(:has(*)) {
  .cabecalho { position: sticky; top: 0; }
}

/* ---- Mapa ----------------------------------------------------
   Era uma fachada com botão; virou o iframe direto, preguiçoso.
   A moldura fica com o mesmo desenho de card do resto do site. */
.domus-map-quadro {
  display: block;
  width: 100%;
  min-height: 380px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-soft, #f2ede5);
}

/* ---- Últimos blocos que ainda paravam antes da borda ---------
   Sobraram do primeiro passe porque não estavam na lista: são
   os parágrafos soltos dentro de CTA, aviso e destaque, que não
   carregam a classe .secao__texto.                              */
.cta > p,
.cta__texto,
.aviso,
.aviso > p,
.destaque > p,
.secao__interno > p,
.secao__aviso { max-width: var(--medida); }

/* ============================================================
   BIBLIOTECA DE CONTEÚDOS — /conteudos/ (30/08/2026)
   ------------------------------------------------------------
   "não tem pesquisa, não tem filtro, parece tudo bagunçado,
    demora a bater o olho e ver o que tem que fazer."

   A lista antiga era um bloco de HTML corrido. Agora são cards
   com tema, título e resumo — nessa ordem, porque é a ordem em
   que o olho decide: do que é isso → o que diz → vale ler.
   ============================================================ */

.biblioteca__controles {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.5rem;
  margin: 0 0 1.75rem;
}

.biblioteca__busca { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 22rem; }

.biblioteca__rotulo {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.biblioteca__campo {
  width: 100%;
  padding: .7rem .9rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.biblioteca__campo:focus-visible { outline: 2px solid var(--ouro); outline-offset: 1px; }

.biblioteca__temas { display: flex; flex-wrap: wrap; gap: .4rem; }

.biblioteca__tema-botao {
  padding: .45rem .85rem;
  font: inherit;
  font-size: .88rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.biblioteca__tema-botao:hover { color: var(--ink); border-color: var(--ink); }
.biblioteca__tema-botao.is-ativo { color: var(--paper); background: var(--ink); border-color: var(--ink); }

.biblioteca__vazio { flex: 1 1 100%; margin: 0; color: var(--muted); }
.biblioteca__limpar {
  font: inherit; color: var(--ink); background: none; border: 0;
  padding: 0; text-decoration: underline; cursor: pointer;
}

.biblioteca {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.biblioteca__item { margin: 0; }

.biblioteca__link {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  height: 100%;
  padding: 1.4rem;
  color: inherit;
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.biblioteca__link:hover { border-color: var(--ink); }
.biblioteca__link:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }

.biblioteca__tema {
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ouro-escuro, var(--muted));
}

.biblioteca__titulo { margin: 0; font-size: 1.22rem; line-height: 1.25; color: var(--ink); }
.biblioteca__resumo { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }

/* O "Ler o conteúdo" desce para o rodapé do card mesmo quando os
   resumos têm alturas diferentes — senão a fileira fica desalinhada. */
.biblioteca__acao {
  margin-top: auto;
  padding-top: .4rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
}
.biblioteca__link:hover .biblioteca__acao { text-decoration: underline; }

/* ============================================================
   AVALIAÇÕES NO CELULAR — 31/08/2026
   ------------------------------------------------------------
   O Gutenberg mandou print do celular: cartões em duas colunas
   com 159px cada, nome colidindo com a data, "Ver no Google"
   duplicado sobreposto e cartão cortado na lateral. Medido em
   375px: 42px de estouro horizontal.

   ⚠️ A CAUSA NÃO É DESTE SITE — é do plugin canônico, e por
   isso vale para a Amanda e a Tamiris também. É especificidade:

     @media (max-width: 1000px)            <- 3 classes
       .layout-grid.columns-3 .reviews { 2 colunas }
     @media (max-width: 640px)             <- 2 classes
       .layout-grid .reviews          { 1 coluna  }

   Em 375px as DUAS valem. A de 1000px é mais específica, então
   ganha — e a regra de celular nunca teve efeito em nenhum
   site do parque. Não é ordem de declaração; é peso do seletor.

   Corrijo aqui, no tema, e NÃO no plugin: ele é compartilhado
   com outros dois sites e a correção lá é do chat mestre.
   Está no para-o-chat-mestre.md.
   ============================================================ */

@media (max-width: 640px) {

  /* Uma coluna, com peso suficiente para vencer a regra de 1000px.
     Repetir a classe .columns-N é o que iguala a especificidade sem
     recorrer a !important — que esconderia o defeito em vez de
     explicá-lo. */
  .grp-avaliacoes-google-layout-grid.grp-avaliacoes-google-columns-2 .grp-avaliacoes-google-reviews,
  .grp-avaliacoes-google-layout-grid.grp-avaliacoes-google-columns-3 .grp-avaliacoes-google-reviews,
  .grp-avaliacoes-google-layout-grid.grp-avaliacoes-google-columns-4 .grp-avaliacoes-google-reviews {
    grid-template-columns: 1fr;
  }

  /* O carrossel da página de avaliações mostrava ~1,4 cartão por vez:
     o de trás aparecia pela metade e as setas passavam por cima do
     texto. Um cartão inteiro por vez, e o dedo arrasta para o próximo. */
  .dag-slide { flex: 0 0 100%; }
  .dag-carousel { padding: 0 8px; }

  /* O cabeçalho do cartão era flex nowrap: com 159px de largura, o nome
     quebrava em três linhas e a data caía por cima dele. Com uma coluna
     sobra largura, mas o wrap fica como rede de segurança para nome
     longo em tela estreita. */
  .grp-avaliacoes-google-card-head { flex-wrap: wrap; }

  /* O cabeçalho do cartão tem um grid interno de duas colunas
     (nome | data). Em 271px de cartão sobram 167px para as duas, e o
     nome quebrava em três linhas com a data espremida ao lado — foi o
     que apareceu no print do celular. Uma coluna: a data desce para
     baixo do nome, onde tem a largura inteira. */
  .grp-avaliacoes-google-card-head > div {
    grid-template-columns: 1fr;
  }

  /* ⚠️ Só mudar para uma coluna NÃO basta, e essa é a parte não óbvia.
     A data tem `grid-column: 2` EXPLÍCITO no plugin. Um item colocado
     na coluna 2 de um grid de uma coluna faz o navegador criar uma
     segunda coluna IMPLÍCITA — e o layout volta a ser dois. Medido:
     `grid-template-columns` computava "62.42px 106.58px" mesmo com a
     regra acima aplicada.

     Então a data também precisa voltar para a coluna 1. Ela fica na
     linha 3 porque o plugin já ocupa a 1 com o nome e a 2 com as
     estrelas — a ordem na tela vira nome / estrelas / data. */
  .grp-avaliacoes-google-card-head > div > span {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    padding-right: 0;
    margin-top: 2px;
  }

  /* As estrelas são um <span> também e seriam pegas pela regra acima.
     O seletor de classe tem mais peso e devolve o lugar delas. */
  .grp-avaliacoes-google-card-head > div > .grp-avaliacoes-google-stars {
    grid-column: 1;
    grid-row: 2;
  }

  /* Menos respiro nas bordas devolve ~20px para o texto, que em tela
     estreita é a diferença entre duas linhas e três. */
  .grp-avaliacoes-google-card {
    padding: 18px 16px 16px;
  }

  /* Nada dentro do cartão pode ultrapassar a borda dele. */
  .grp-avaliacoes-google-card,
  .grp-avaliacoes-google-card * { max-width: 100%; }
}

/* ── Dobra das avaliações ────────────────────────────────────────────────
   A regra que ESCONDE é gerada em PHP (o número de cartões visíveis muda
   por seção) e chega por wp_add_inline_style. Aqui fica só a aparência do
   botão e o aviso visual de que há mais coisa embaixo. */
.avaliacoes-dobra {
  position: relative;
}

/* Um véu curto no fim da lista dobrada: diz "continua" sem precisar de texto. */
.avaliacoes-dobra.esta-dobrado .grp-avaliacoes-google-reviews {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent 100%);
}

.avaliacoes-dobra__acao {
  margin: 1.5rem 0 0;
  text-align: center;
}

.avaliacoes-dobra__botao {
  appearance: none;
  background: transparent;
  border: 1px solid var(--wp--preset--color--azul, #1f3b5b);
  border-radius: 999px;
  color: var(--wp--preset--color--azul, #1f3b5b);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: .75rem 1.75rem;
  transition: background-color .18s ease, color .18s ease;
}

.avaliacoes-dobra__botao:hover,
.avaliacoes-dobra__botao:focus-visible {
  background: var(--wp--preset--color--azul, #1f3b5b);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .avaliacoes-dobra__botao { transition: none; }
}

/* ── Ajustes pedidos pela Luciene em 19/09/2026 ──────────────────────────── */

/* Prova do topo: estrelas e local ganham ícone, então a lista vira linha. */
.topo__prova li {
  align-items: center;
  display: flex;
  gap: .5rem;
}

.prova__estrelas {
  color: var(--wp--preset--color--dourado, #c7a56a);
  font-size: .95em;
  letter-spacing: .06em;
  line-height: 1;
}

.prova__pino {
  color: var(--wp--preset--color--dourado, #c7a56a);
  font-size: 1.05em;
  line-height: 1;
}

/* Rótulo de ação dentro do card de caso: substitui a seta solta. */
.card-caso__acao {
  align-items: center;
  color: var(--wp--preset--color--azul, #1f3b5b);
  display: inline-flex;
  font-size: .9rem;
  font-weight: 600;
  gap: .4rem;
  margin-top: auto;
  padding-top: .85rem;
}

.card-caso__acao .card-caso__seta {
  transition: transform .18s ease;
}

.card-caso__link:hover .card-caso__acao .card-caso__seta,
.card-caso__link:focus-visible .card-caso__acao .card-caso__seta {
  transform: translateX(3px);
}

/* Fecho da seção de passos: ação principal e saída secundária. */
.passos__acao {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

.passos__link {
  color: var(--wp--preset--color--azul, #1f3b5b);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .25em;
}

@media (max-width: 640px) {
  .passos__acao {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .passos__acao .botao { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .card-caso__acao .card-caso__seta { transition: none; }
}


/* ============================================================
   Cromo mínimo — a página que se abre sozinha
   ============================================================
   Vale para quem tem "cromo": "minimo" no pacote (hoje o
   Diagnóstico Renovar). Não é uma variação estética: é o que
   faz a página funcionar no celular, que é por onde vem a
   maioria de quem responde.

   Some o menu, some o rodapé inteiro e — a parte que importa —
   some a .barra-movel, que é position:fixed bottom:0 até 760px
   e ficava bem em cima do botão "Continuar". Um botão que diz
   "vá embora para o WhatsApp" colado no botão que diz "responda
   a próxima" não é escolha: é ruído na hora da decisão.

   O topo aqui NÃO é sticky, ao contrário do cabeçalho normal.
   São 16 perguntas roladas no polegar; cada pixel preso no
   topo é um pixel a menos de pergunta na tela.
   ============================================================ */

.cabecalho--minimo {
  position: static;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.cabecalho--minimo .cabecalho__interno {
  display: flex;
  justify-content: center;
  padding-block: .75rem;
}

.cabecalho--minimo .marca__imagem { height: 34px; width: auto; }

/* A marca do Renovar Consultoria, na página do Diagnóstico.
   É um lockup empilhado (símbolo em cima, palavra embaixo), e não o símbolo
   solto da Domus com o texto ao lado. Nos 34px do cabeçalho comum a palavra
   CONSULTORIA ficaria com 2px de altura, então ela tem altura própria.
   O arquivo tem alfa de verdade: o fundo branco do original virou transparência,
   senão apareceria um retângulo branco sobre o --paper, que é #fffcf7. */
.marca--renovar { display: flex; justify-content: center; }
.cabecalho--minimo .marca--renovar .marca__imagem { height: 72px; }

@media (max-width: 760px) {
  .cabecalho--minimo .marca--renovar .marca__imagem { height: 58px; }
}

.rodape--minimo {
  background: var(--paper);
  border-top: 1px solid var(--line);
  color: var(--ink);
  padding-block: 1.75rem 2.25rem;
}

.rodape--minimo .rodape__interno {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
}

/* O caminho de volta ao site: o único link "de saída" que a
   página oferece, e por isso ele é discreto e fica no fim. */
.rodape--minimo .rodape__voltar {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;                  /* alvo de toque */
  padding: .55rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: .95rem;
  text-decoration: none;
}

.rodape--minimo .rodape__voltar::after { content: "→"; }
.rodape--minimo .rodape__voltar:hover { border-color: var(--ink); }

.rodape--minimo .rodape__base {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  opacity: .75;
}

.rodape--minimo .menu--legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rodape--minimo .menu--legal a { color: inherit; }

/* Sem barra fixa, o padding que abria espaço para ela não tem
   mais motivo — e sobrava como um vão branco no fim da página. */
@media (max-width: 760px) {
  body:has(.rodape--minimo) { padding-bottom: 0; }
}


/* ─── Contatos: a lista de gestão, dentro do site ──────────────────────────
   Escrita para o celular primeiro, e não por princípio: é de lá que a Luciene
   olha. Cartão por pessoa, nunca tabela — tabela de cinco colunas em 375px
   vira rolagem lateral, e rolagem lateral numa lista que se percorre com o
   polegar é o que faz abandonar a tela.
   O detalhe abre em <details>: funciona sem JavaScript e o leitor de tela
   entende sozinho. */

.domus-gestao { max-width: 62rem; margin-inline: auto; }

.domus-gestao__topo h2 { margin: 0 0 .25rem; }
.domus-gestao__topo p  { margin: 0 0 1.25rem; color: var(--muted, #5A636B); }

.domus-gestao__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 0 0 1.5rem;
}
.domus-gestao__filtros label { flex: 1 1 100%; }
.domus-gestao__rotulo {
  display: block;
  margin: 0 0 .25rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted, #5A636B);
}

.domus-gestao__busca input,
.domus-gestao__filtros select {
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid var(--line, #E2E5E9);
  border-radius: .5rem;
  font: inherit;
  background: #fff;
}
.domus-gestao__btn {
  flex: 1 1 100%;
  padding: .75rem 1rem;
  border: 0;
  border-radius: .5rem;
  background: var(--ink, #12314a);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;           /* alvo de toque */
}

.domus-gestao__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.domus-gestao__cartao {
  border: 1px solid var(--line, #E2E5E9);
  border-radius: .6rem;
  padding: .8rem .9rem;
  background: #fff;
}
.domus-gestao__cartao h3 { margin: 0; font-size: 1rem; line-height: 1.3; }

.domus-gestao__foco { margin: .3rem 0 .45rem; font-size: .92rem; }
.domus-gestao__foco strong { color: var(--gold, #b8935b); }

.domus-gestao__meta { margin: .1rem 0 0; font-size: .85rem; word-break: break-word; }

.domus-gestao__acao { margin: .5rem 0 0; }
.domus-gestao__zap {
  display: block;
  text-align: center;
  padding: .65rem 1rem;
  border-radius: .5rem;
  background: var(--gold, #b8935b);
  color: #fff;
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  min-height: 44px;
  line-height: 1.6;
}
.domus-gestao__sem { color: var(--muted, #5A636B); font-size: .85rem; font-style: italic; }

.domus-gestao__detalhe { margin-top: .6rem; }
.domus-gestao__detalhe > summary,
.domus-gestao__respostas > summary {
  cursor: pointer;
  padding: .45rem 0;
  font-weight: 600;
  font-size: .9rem;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.domus-gestao__interacao { padding: .6rem 0; border-top: 1px solid var(--line, #E2E5E9); }
.domus-gestao__interacao h4 { margin: 0; font-size: .95rem; }
.domus-gestao__quando { margin: 0 0 .5rem; font-size: .85rem; color: var(--muted, #5A636B); }
.domus-gestao__mensagem { white-space: pre-wrap; }

.domus-gestao__barras { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .4rem; }
.domus-gestao__barras li { display: grid; grid-template-columns: 5.5rem 1fr 3rem; align-items: center; gap: .5rem; font-size: .88rem; }
.domus-gestao__barras .e-o-foco,
.domus-gestao__barras li.e-o-foco .domus-gestao__eixo { font-weight: 700; }
.domus-gestao__trilho { display: block; height: 8px; border-radius: 4px; background: #E8EAED; overflow: hidden; }
.domus-gestao__trilho > span { display: block; height: 8px; background: #B9C3CC; }
.domus-gestao__barras li.e-o-foco .domus-gestao__trilho > span { background: var(--gold, #b8935b); }
.domus-gestao__pct { text-align: right; }

.domus-gestao__respostas dl { margin: .5rem 0 0; }
.domus-gestao__respostas dt { font-size: .88rem; margin-top: .5rem; }
.domus-gestao__respostas dd { margin: 0 0 .35rem; font-size: .88rem; font-weight: 600; color: var(--muted, #5A636B); }
.domus-gestao__eixo-titulo {
  margin-top: 1rem !important;
  font-size: .75rem !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink, #12314a);
  font-weight: 700;
}

.domus-gestao__paginas { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.5rem 0; }
.domus-gestao__paginas a {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line, #E2E5E9);
  border-radius: .5rem;
  text-decoration: none;
}
.domus-gestao__paginas a.e-a-atual { background: var(--ink, #12314a); color: #fff; border-color: var(--ink, #12314a); }

.domus-gestao__vazio { color: var(--muted, #5A636B); }
.domus-gestao__volta { margin-top: 2rem; }

@media (min-width: 640px) {
  .domus-gestao__filtros label     { flex: 1 1 auto; }
  .domus-gestao__busca             { flex: 2 1 16rem !important; }
  .domus-gestao__btn               { flex: 0 0 auto; }
  .domus-gestao__zap               { display: inline-block; }
  .domus-gestao__barras li         { grid-template-columns: 8rem 1fr 3rem; }
}

/* No computador a mesma lista vira TABELA.
   O Gutenberg olhou em tela larga e viu o que eu não tinha olhado: cartão de
   largura inteira com um botão dourado gigante gasta 300px de altura por
   pessoa, e três pessoas ocupam a tela toda. Cartão é a forma certa em 375px
   e a errada em 1700px. Mesma marcação, duas formas.

   ⚠️ O <details> ocupa a linha inteira SEMPRE, numa segunda faixa da grade, e
   não só quando abre. A primeira versão tentava expandi-lo com `:has()` — e
   estava errada: os filhos de um <details> não são itens da grade do <li>,
   são filhos do próprio <details>. `grid-column` neles não faz nada. Esta
   versão não depende de `:has()` nem de `display: contents`, que quebra o
   abrir e fechar em alguns navegadores. */
@media (min-width: 900px) {
  .domus-gestao__lista {
    gap: 0;
    border: 1px solid var(--line, #E2E5E9);
    border-radius: .6rem;
    overflow: hidden;
    background: #fff;
  }

  .domus-gestao__cartao {
    border: 0;
    border-bottom: 1px solid var(--line, #E2E5E9);
    border-radius: 0;
    padding: .5rem .9rem;
    display: grid;
    grid-template-columns: minmax(14rem, 2fr) minmax(9rem, 1fr) auto;
    grid-template-areas:
      "quem foco acao"
      "det  det  det";
    align-items: center;
    column-gap: 1.25rem;
    row-gap: .1rem;
  }
  .domus-gestao__cartao:nth-child(even) { background: #fbfaf8; }
  .domus-gestao__cartao:last-child      { border-bottom: 0; }

  .domus-gestao__quem { grid-area: quem; min-width: 0; }
  .domus-gestao__quem h3 { font-size: .95rem; }
  .domus-gestao__meta { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .domus-gestao__foco { grid-area: foco; margin: 0; font-size: .88rem; }
  .domus-gestao__acao { grid-area: acao; margin: 0; justify-self: end; }

  .domus-gestao__zap {
    display: inline-block;
    padding: .35rem .8rem;
    font-size: .82rem;
    min-height: 0;
    line-height: 1.5;
    white-space: nowrap;
  }

  .domus-gestao__detalhe { grid-area: det; margin: 0; }
  .domus-gestao__detalhe > summary {
    min-height: 0;
    padding: .1rem 0;
    font-size: .8rem;
    font-weight: 500;
    color: var(--muted, #5A636B);
  }
  .domus-gestao__detalhe[open] > summary { margin-bottom: .35rem; }

  .domus-gestao__interacao { padding: .5rem 0; }
  .domus-gestao__barras li { grid-template-columns: 9rem minmax(6rem, 22rem) 3rem; }
  .domus-gestao__respostas dl { columns: 2; column-gap: 2.5rem; }
  .domus-gestao__respostas dt, .domus-gestao__respostas dd { break-inside: avoid; }
}


/* ─── Faixa de aviso no topo (mudança de endereço, 09/10/2026) ─────────────
   Fundo escuro de propósito: texto branco sobre o dourado da casa não passa
   no contraste mínimo de leitura. Estática, nunca fixa. */
.faixa-aviso { background: var(--ink, #12314a); color: #fff; }
.faixa-aviso__interno {
  max-width: 72rem;
  margin: 0 auto;
  padding: .65rem 1rem;
  font-size: .92rem;
  line-height: 1.45;
  text-align: center;
}
.faixa-aviso__link {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  padding: .2rem 0;          /* alvo de toque mais alto no celular */
}
.faixa-aviso__link:hover,
.faixa-aviso__link:focus-visible { color: #fff; text-decoration-thickness: 2px; }