:root {
  --cor-primaria: #4682B4;
  --cor-secundaria: #1F3E5A;
  --cor-destaque: #2E5A80;
  --cor-fundo: #EFEFEF;
  --cor-texto900: #14293C;
  --cor-texto800: #4F4F4F;
  --cor-azul050: #E0E0E0;
  --cor-azul100: #E8E8E8;
  --cor-azul200: #C7DAEA;
  --cor-texto: #14293C;
}

/* ============================================================
   SPA MED — Sorocaba Campus
   Tema próprio. Deriva de marca/dna.md v2.0 e marca/playbook.md.

   Design Read: institucional de hospedagem com prática de saúde,
   para adulto 40-60 cético a wellness místico e a clínica fria.
   Dials: VARIANCIA 4 · MOVIMENTO 2 · DENSIDADE 3.
   Assinatura: a escada da promessa (experimenta, entende, leva
   embora) como escada literal que sobe na página.

   Travas (skill high-level-design §4):
   - Forma: raio 2px em TUDO, inclusive botões (DNA proíbe pílula).
   - Cor: um destaque só, o Azul Spa Med. Sem gradiente, sem onda.
   - Tema: claro, papel quente. Tintas de azul não invertem o tema.
   ============================================================ */

/* Marcellus: a display do cliente, a mesma dos titulos do site atual.
   ATENCAO: ela tem UM PESO SO (400). Nao existe bold nem italico. Pedir 600
   faz o navegador falsear o negrito, o que borra o desenho da serifa. Por
   isso a hierarquia dos titulos e por TAMANHO e COR, nunca por peso. */
@font-face { font-family: 'Marcellus'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fontes/marcellus-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Marcellus'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fontes/marcellus-400-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF; }
/* Jost: a fonte de texto do cliente, a mesma do site atual. E VARIAVEL, entao
   um arquivo so cobre 400, 500 e 600 (a Inter exigia tres). Geometrica, de
   x-height menor que a Inter: por isso o corpo subiu de 1.0625rem para
   1.125rem e o line-height caiu de 1.65 para 1.6, senao o texto le pequeno
   e esparramado. Ver a nota de tipografia no DNA v2.4. */
@font-face { font-family: 'Jost'; font-weight: 400 600; font-style: normal; font-display: swap; src: url('/fontes/jost-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-weight: 400 600; font-style: normal; font-display: swap; src: url('/fontes/jost-var-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fontes/ibmplexmono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fontes/ibmplexmono-500.woff2') format('woff2'); }

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --display: 'Marcellus', Georgia, serif;
  --fonte: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* v2.8: o fundo padrao passou a ser o azul-100. O off-white saiu da paleta;
     o nome do token continua --papel porque ele nomeia o PAPEL na pagina, nao a cor. */
  --papel: #EFEFEF;
  /* v2.9: texto corrido virou azul-900; Grafite saiu da paleta. O nome do
     token continua --grafite porque ele nomeia o papel (tinta), nao a cor. */
  --grafite: #14293C;
  --azul: #2E5A80;
  --azul-marca: #4682B4;  /* Steel Blue institucional: grafismo, regua, borda, numero grande */
  --azul-fundo: #1F3E5A;
  /* DNA v2.7: toda SUPERFICIE e toda LINHA saem da escala do azul.
     Nao existe mais cinza de superficie no tema. */
  --azul-050: #E0E0E0;   /* v4.0: secao alternada — o degrau abaixo do papel, o que se ve */
  --azul-100: #E8E8E8;   /* v4.0: apoio DENTRO do card branco (linha par de tabela, campo) */
  --azul-200: #C7DAEA;   /* texto e detalhe claro sobre fundo escuro */
  --azul-900: #14293C;
  --azul-300: #C0C0C0;   /* v4.0: linha, divisoria e borda saem da prata, nao do azul */
  --azul-400: #7FA9CC;   /* borda ativa e moldura, quando precisa ler como azul */

  /* Azul de texto pequeno. REMEDIDO na paleta v4.0 (os numeros antigos eram
     da paleta azul e nenhum conferia): --azul sobre Branco 7.27, sobre papel
     6.32, sobre azul-050 5.50, sobre azul-100 5.93. Todos AA para texto
     normal, com folga real. Sobre azul-fundo ele MORRE (1.53) — em superficie
     escura o texto e Branco (11.08) ou azul-200 (7.73), nunca o --azul. */
  --azul-texto: var(--azul);

  /* Texto secundario. REMEDIDO na v4.0: 8.19 no Branco, 7.12 no papel,
     6.21 no azul-050, 6.69 no azul-100. AA em toda superficie clara.
     (Os valores antigos 6.82/7.84/8.76 eram da paleta anterior.) */
  --cinza: #4F4F4F;
  /* Linha unica do tema, agora derivada do azul. Antes eram dois tokens
     (--hairline e --cinza-claro) com o mesmo #DBD8D2. */
  --linha: #C0C0C0;

  /* escala de espaco, base 4pt. Os tres compassos de secao vivem em cima dela */
  --espaco-2xs: .5rem;
  --espaco-xs: .75rem;
  --espaco-sm: 1rem;
  --espaco-md: 1.5rem;
  --espaco-lg: 2rem;
  --espaco-xl: 3rem;
  --espaco-2xl: 4rem;
  --secao-densa: clamp(2.25rem, 4vw, 3.25rem);
  --secao-padrao: clamp(3.5rem, 7vw, 5.5rem);
  --secao-ampla: clamp(5.5rem, 11vw, 8.5rem);
  --raio: 2px;
  --transicao: .25s cubic-bezier(0.16, 1, 0.3, 1);

  /* altura real do topo: duas faixas no desktop, uma no mobile */
  --topo-h: 119px;

  --z-topo: 40;
  --z-menu-mobile: 41;
  --z-whatsapp: 50;
}

/* A superficie alternada era Areia (#D9CFC0), mais escura que o papel, e
   por isso precisava de um bloco inteiro corrigindo cinza, azul de texto
   e hairline dentro dela — e de um segundo bloco restaurando os tokens
   nos cards claros que caiam ali dentro. Os dois blocos sairam na v2.5.

   Na v2.5 a alternada virou --azul-050, e o efeito colateral foi que ela
   sumiu: 050 contra papel da 1.008 de contraste, ou seja, a mesma cor na
   tela. Na v2.7 a alternada passou para --azul-100 (1.14 contra o papel),
   que se ve sem virar bloco de cor. Os tokens de texto continuam valendo
   nas duas superficies, entao os blocos de correcao seguem desnecessarios. */

html { scroll-behavior: smooth; }
body {
  font-family: var(--fonte); color: var(--grafite); background: var(--papel);
  line-height: 1.6; font-size: 1.125rem; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* TIPOGRAFIA OPTICA — tracking e leading sao especificos por TAMANHO.
   Um unico letter-spacing para h1, h2 e h3 esta errado em algum ponto da
   escala: a letra parece esparramada quando o corpo cresce e apertada quando
   ele encolhe. Marcellus a 67px com tracking 0 abre demais entre as letras.
   Regra: quanto maior o texto, mais NEGATIVO o tracking e mais apertado o
   leading. O tracking POSITIVO fica no corpo pequeno (os rotulos mono, que
   ja usam .06em a .12em mais abaixo). */
h1, h2, h3 {
  font-family: var(--display); font-weight: 400; color: var(--grafite);
  text-wrap: balance;
}
h1 { line-height: 1.06; letter-spacing: -0.018em; font-optical-sizing: auto; }
h2 { line-height: 1.14; letter-spacing: -0.012em; }
h3 { line-height: 1.25; letter-spacing: -0.006em; }

:focus-visible { outline: 3px solid var(--azul-marca); outline-offset: 2px; border-radius: var(--raio); }
.pular-conteudo { position: absolute; left: -9999px; top: 0; background: var(--grafite); color: var(--papel); padding: .6rem 1rem; z-index: 60; }
.pular-conteudo:focus { left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Movimento reduzido nao e o unico sinal. Sao TRES, independentes entre si.
   Os outros dois ficam no FIM deste arquivo, depois da regra .topo — se
   ficassem aqui, a regra base de .topo (declarada bem mais abaixo, com a
   mesma especificidade) venceria pela ordem e os overrides nao valeriam
   nada. Foi exatamente o que aconteceu na primeira tentativa. */

.container { max-width: 1180px; margin: 0 auto; padding-inline: 1.5rem; }

/* RITMO DE PAGINA (04/08/2026)
   Antes toda secao tinha padding-block: 5.5rem fixo. Uma pagina inteira no mesmo
   compasso le como fila de blocos de peso igual: nada domina, e o visitante
   varre em vez de ler. Agora sao tres compassos, e cada pagina escolhe um
   dominante.

   --secao-densa   continua o assunto da secao anterior: aproxima, nao separa
   --secao-padrao  o compasso normal, agora fluido
   --secao-ampla   a secao dominante da pagina. Uma por pagina, nunca duas */
.secao { padding-block: var(--secao-padrao); }
.secao--densa { padding-block: var(--secao-densa); }
.secao--ampla { padding-block: var(--secao-ampla); }

.secao-cabeca { margin-bottom: 3rem; max-width: 44rem; }
.secao-cabeca h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
.secao-cabeca p { margin-top: 1rem; color: var(--cinza); font-size: 1.08rem; text-wrap: pretty; }

/* Na secao dominante o cabecalho quebra a simetria: titulo numa coluna larga,
   texto de apoio numa estreita ao lado, alinhados pela base. E a unica
   composicao assimetrica da pagina, e e o que marca qual secao manda. */
.secao--ampla .secao-cabeca {
  max-width: none; margin-bottom: var(--espaco-2xl);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: end;
}
.secao--ampla .secao-cabeca h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); max-width: 16ch; }
.secao--ampla .secao-cabeca p { margin-top: 0; }
@media (max-width: 860px) {
  .secao--ampla .secao-cabeca { grid-template-columns: 1fr; gap: 1rem; }
  .secao--ampla .secao-cabeca p { margin-top: .5rem; }
}

/* Ancora escura no meio de pagina longa. O DNA pede um ponto escuro de fixacao
   em peca que corre varias telas so de texto sobre superficie clara; sem ele a
   marca escorrega para leitura de clinica. Nao e decoracao: carrega uma frase
   que a pagina precisa dizer. */
.ancora { background: var(--azul-fundo); color: #fff; }
.ancora .container { padding-block: clamp(3rem, 6vw, 4.5rem); }
.ancora p {
  font-family: var(--display); font-weight: 400; color: #fff; margin: 0;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.18; max-width: 24ch;
  text-wrap: balance;
}
.ancora .apoio {
  font-family: var(--fonte); font-size: 1rem; line-height: 1.6;
  color: var(--azul-200); max-width: 46ch; margin-top: 1.25rem;
}

/* Titulo de bloco dentro de uma secao, quando o assunto nao merece secao
   propria. Substitui os margin-top inline que estavam nos templates. */
.titulo-bloco { font-size: 1.2rem; margin: 2.5rem 0 1rem; }

/* rótulo de seção. Teto da skill: 1 a cada 3 seções. */
.rotulo {
  font-family: var(--fonte-mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--azul);
  display: block; margin-bottom: 1rem;
}

.regua { display: block; width: 3rem; height: 2px; background: var(--azul-marca); margin-bottom: 1.25rem; }

/* ---------- Topo ---------- */
.topo {
  /* v2.9: o topo e sempre branco. O logo e script de traco fino e lava
     sobre azul claro; onde ha logo azul, o fundo e branco.

     A regra do topo branco CONTINUA valendo — o que muda e como ele e branco.
     Em vez de uma faixa opaca comendo 119px fixos, ele passa a ser uma camada
     translucida com o conteudo correndo POR BAIXO. O branco a 82% sobre o
     desfoque continua entregando fundo claro para o logo azul (o requisito
     real da regra), e a pagina ganha profundidade em vez de uma tampa. */
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  position: sticky; top: 0; z-index: var(--z-topo);
  /* aresta clara no alto = a luz pegando o material */
  border-top: 1px solid rgba(255,255,255,.5);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao);
}
/* BORDA DE ROLAGEM, no lugar do fio permanente de 1px.
   O fio so precisa existir quando ha conteudo passando por baixo da chrome.
   No topo da pagina ele nao separa nada e so suja a primeira dobra. */
.topo[data-rolou] { border-bottom-color: var(--linha); }
.topo::after {
  content: ''; position: absolute; inset: 100% 0 auto 0; height: 20px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  opacity: 0; transition: opacity var(--transicao); pointer-events: none;
}
.topo[data-rolou]::after { opacity: 1; }
/* Topo com o logo NO CENTRO (01/08/2026, a pedido do cliente): selo a
   esquerda, logo centrado, navegacao numa segunda faixa.

   A navegacao nao cabe na mesma linha: com sete itens ela pede 669px, e a
   coluna lateral de um grid 1fr auto 1fr tem ~530px no container de 1180.
   O grid entao alarga a coluna do menu e empurra o logo 193px para fora do
   centro — ou seja, em uma linha so o logo centrado e impossivel sem cortar
   itens do menu. Por isso o menu desce para a linha 2, centralizado, e as
   duas laterais da linha 1 ficam simetricas de verdade. */
.topo-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 72px; gap: 1.5rem 1.5rem; }
.selo-topo { justify-self: start; grid-column: 1; grid-row: 1; }
.selo-vazio { grid-column: 1; grid-row: 1; }
.topo-inner > .logo { justify-self: center; grid-column: 2; grid-row: 1; }
.topo-inner > .menu {
  grid-column: 1 / -1; grid-row: 2; justify-content: center; width: 100%;
  border-top: 1px solid var(--linha); padding-top: .7rem; padding-bottom: .2rem;
}
/* height="44" no HTML é anulado por img{height:auto}. Fixado aqui. */
.logo img { height: 40px; width: auto; max-width: none; }
/* Selo comemorativo ao lado do logo. O gap de 1.5rem existe para cumprir o
   clear space do DNA: margem livre igual à altura do "S" do script, que a
   40px de logo fica em torno de 24px. Nao encostar os dois. */
.marca-topo { display: flex; align-items: center; gap: 1.5rem; }
.selo-topo { height: 46px; width: auto; max-width: none; flex-shrink: 0; }
.logo-texto { font-family: var(--display); font-size: 1.3rem; font-weight: 400; color: var(--azul); }
.menu { display: flex; gap: 1.6rem; align-items: center; }
.menu a {
  font-size: .9rem; font-weight: 500; color: var(--grafite); white-space: nowrap;
  padding: .3rem 0; position: relative;
}
.menu a:hover { color: var(--azul); text-decoration: none; }
.menu a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--azul-marca); transition: right var(--transicao);
}
.menu a:hover::after { right: 0; }
.menu-toggle, .menu-botao { display: none; }

@media (max-width: 1040px) {
  .menu { gap: 1.15rem; }
  .menu a { font-size: .85rem; }
}
@media (max-width: 880px) {
  :root { --topo-h: 72px; }
  .menu-botao { display: block; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--grafite); padding: .5rem; justify-self: end; grid-column: 3; }
  .topo-inner > .menu {
    /* no mobile a faixa 2 nao existe: o menu volta a ser dropdown */
    grid-row: auto; border-top: 0; padding-top: 0; padding-bottom: 0; width: auto;
    display: none; position: absolute; top: 72px; left: 0; right: 0; background: #fff;
    flex-direction: column; align-items: flex-start; padding: 1.25rem 1.5rem 1.5rem; gap: 1.1rem;
    border-bottom: 1px solid var(--linha); z-index: var(--z-menu-mobile);
  }
  .menu-toggle:checked ~ .menu { display: flex; }
  .topo-inner > .menu { justify-content: flex-start; }
  .menu a { font-size: 1rem; }
}

/* ---------- Botões: raio 2px, nunca pílula (DNA) ---------- */
.botao {
  display: inline-block; background: var(--azul); color: #fff;
  font-family: var(--fonte); font-weight: 500; font-size: 1rem;
  padding: .85rem 1.75rem; border-radius: var(--raio);
  transition: background var(--transicao), transform var(--transicao);
}
.botao:hover { background: var(--azul-fundo); text-decoration: none; }
/* O retorno ao toque tem que ser INSTANTANEO. Herdando a --transicao de
   250ms, o botao so afundava um quarto de segundo depois do dedo, e e
   exatamente essa latencia que faz a interface parecer morta. A ida e
   rapida (90ms); a volta pode manter a curva longa, porque soltar nao
   precisa de resposta imediata. */
.botao:active { transform: translateY(1px); transition-duration: 90ms; }
.botao-borda { background: transparent; color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.botao-borda:hover { background: var(--azul); color: #fff; }
.botao-claro { background: #fff; color: var(--azul-fundo); }
.botao-claro:hover { background: var(--azul-050); color: var(--azul-fundo); }

/* ============================================================
   CAPA — split assimétrico.
   Nota corrigida em 31/07/2026: este comentário dizia que "o DNA
   proíbe elemento gráfico flutuante". Leitura errada. A regra da
   seção 3.8 é de composição FOTOGRÁFICA, sobre o que entra dentro
   do quadro (selo, laço, faixa diagonal). Moldura de layout é outra
   coisa, e existe no site desde 31/07 (ver .item-estrutura).
   A capa segue sem moldura por escolha de composição, não por
   proibição: aqui a foto divide o espaço com o texto e um fio a
   mais competiria com a régua do título.
   ============================================================ */
/* CAPA FULL BLEED (31/07/2026, a pedido do cliente)
   A foto ocupa a tela e o texto vive sobre ela. Substituiu a capa em
   duas colunas, em que foto e texto dividiam a largura.

   O veu e CHAPADO, nao gradiente: o DNA proibe gradiente em qualquer
   peca (secao 3.1), e a regra de contraste diz que texto sobre foto so
   existe com veu. Azul Profundo a 58% e o ponto em que o branco passa
   AA sobre a area mais clara desta foto — ver a nota da v3.0 do DNA. */
/* A ABERTURA — um componente so, usado pela home e por toda pagina interna.
   Trave pedida pelo cliente em 31/07/2026: as internas nao usam versao
   reduzida; e exatamente a primeira dobra da home. Por isso os seletores
   andam juntos daqui para baixo — mexer aqui muda o site inteiro. */
.capa, .cabecalho-pagina { position: relative; isolation: isolate; display: flex; align-items: center;
        min-height: clamp(520px, calc(100svh - var(--topo-h, 72px)), 860px); overflow: hidden;
        background: var(--azul-fundo); border-bottom: 0; }
.capa .capa-foto, .cabecalho-pagina .capa-foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%; z-index: -2;
  /* O veu chapado a 52% nao escurecia a foto: substituia metade de cada
     pixel por azul, e junto com ela iam o verde da mata e o turquesa da
     piscina. Medido: a foto tem dominancia de azul -0.064 e o veu antigo
     levava para +0.149, invertendo o equilibrio de cor da imagem.

     Agora quem escurece e o brilho, que preserva o matiz, e a saturacao
     compensa a perda que todo escurecimento causa. O veu ficou so como
     tingimento leve. Resultado medido na area do texto: contraste do
     branco sobe de 3.76 para 5.36 e a dominancia de azul cai para +0.035
     — mais legivel e quatro vezes menos frio. */
  filter: brightness(.58) saturate(1.2);
}
/* v3.3: veu de azul-900 a 3%. Veio de Azul Profundo 20% (v3.1) para
   azul-900 6% (v3.2) e agora para 3%, por decisao do cliente. Neste nivel o
   veu e praticamente so um selo de marca sobre a foto: quem escurece e o
   brilho, na regra da .capa-foto logo acima. Se a abertura parecer sem cor,
   mexer em brilho e saturacao — nunca na cor do veu (DNA v3.2). */
.capa .capa-veu, .cabecalho-pagina .capa-veu { position: absolute; inset: 0; background: var(--azul-900); opacity: .03; z-index: -1; }
/* min-width:0 e width:100% porque .capa e flex: sem isso o item nao encolhe
   abaixo da largura minima do conteudo e o texto vaza pela direita no
   mobile — com .capa em overflow:hidden, vaza cortado e em silencio. */
.capa-conteudo, .cabecalho-pagina > .container { padding-block: 4rem; min-width: 0; width: 100%; }
.capa .regua, .cabecalho-pagina .regua { background: #fff; }

/* BOTAO VOLTAR — flutuante, canto inferior esquerdo (01/08/2026)
   Espelha o botao de WhatsApp: mesma altura, mesma distancia da borda,
   mesma sombra. Um no canto que a pessoa usa para sair da pagina, outro
   no canto que ela usa para falar com a casa.

   Nao e circulo como o WhatsApp porque carrega palavra, e nao icone: com
   texto dentro, o raio de 2px da marca e o que mantem a forma legivel.

   E um LINK de verdade, com destino real (a pagina pai), e nao um
   history.back() puro: quem chega de busca ou de link compartilhado nao
   tem historico interno, e um back cego jogaria a pessoa para fora do site.
   O JS so intercepta quando a navegacao anterior foi aqui dentro. */
.voltar-area { position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: var(--z-whatsapp); }
.voltar {
  display: inline-flex; align-items: center; gap: .5rem; height: 56px;
  font-size: 1rem; font-weight: 500; color: #fff;
  background: var(--azul-fundo); border-radius: var(--raio);
  padding: 0 1.25rem 0 1rem;
  box-shadow: 0 2px 12px rgba(28, 31, 33, .24);
  transition: transform var(--transicao), background var(--transicao);
}
.voltar:hover, .voltar:focus-visible { background: var(--azul); text-decoration: none; transform: translateY(-2px); }
.voltar:active { transform: translateY(1px); }
/* altura identica a do WhatsApp em qualquer largura: os dois formam um par
   na base da tela, e alturas diferentes quebrariam a leitura de par */
@media (max-width: 900px) {
  .voltar { font-size: .95rem; padding: 0 1.1rem 0 .9rem; }
}

.cabecalho-pagina .trilha, .cabecalho-pagina .trilha a,
.cabecalho-pagina .post-meta { color: rgba(255,255,255,.88); }
/* 16ch, e nao 12ch, porque a chamada tem duas frases e a 16ch a quebra cai
   exatamente no ponto final: uma frase por linha, o ritmo reforcado pela
   quebra em vez de brigar com ela. Se a chamada mudar, remedir. */
/* 12ch, remedido na capa full bleed: com a largura inteira disponivel, 16ch
   deixava as duas frases na mesma linha e o ritmo se perdia. A 12ch a quebra
   volta a cair no ponto final — uma frase por linha. */
.capa h1, .cabecalho-pagina h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); margin-bottom: 1.35rem; max-width: 12ch; color: #fff; }
.capa .hero-sub, .cabecalho-pagina .hero-sub {
  /* 1.5rem = 24px: sobre foto, esse e o tamanho a partir do qual o texto
     conta como grande e o criterio de contraste cai de 4.5 para 3. Com o veu
     a 52% o pior caso fica em 3.6, e a foto nao precisa ser apagada. */
  font-size: 1.5rem; color: #fff; max-width: 30ch;
  margin-bottom: 2rem; text-wrap: pretty; line-height: 1.45;
}

@media (max-width: 900px) {
  .capa, .cabecalho-pagina { min-height: clamp(460px, calc(100svh - var(--topo-h, 64px)), 680px); }
  .capa-conteudo, .cabecalho-pagina > .container { padding-block: 3rem; }
  .capa h1, .cabecalho-pagina h1 { max-width: none; }
}

/* ============================================================
   FICHA TÉCNICA — os números reais, em mono.
   O DNA define mono como "sinal de instrução prática", então a
   fonte tem função aqui, não é decoração.
   ============================================================ */
.ficha { border-block: 1px solid var(--linha); padding-block: 2rem; }
.ficha-embutida { border-top: 1px solid var(--linha); padding-top: 2rem; }
.ficha-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem 1.5rem; }
.ficha-item dt { font-family: var(--fonte-mono); font-size: 1.6rem; font-weight: 500; color: var(--azul-marca); line-height: 1; }
.ficha-item dd { font-size: .9rem; color: var(--cinza); margin-top: .5rem; }

/* ============================================================
   A ESCADA — assinatura da página.
   Três degraus que sobem de verdade. Não são três cards iguais
   (banido em §7): cada degrau tem altura própria e a régua
   vertical mostra a progressão.
   ============================================================ */
.escada { background: var(--azul-050); }
.escada-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; align-items: end; margin-top: 3.5rem; }
.degrau { position: relative; padding-left: 1.5rem; }
.degrau::before {
  content: ''; position: absolute; left: 0; top: .35rem; bottom: 0;
  width: 2px; background: var(--azul-marca); opacity: .28;
}
.degrau:last-child::before { opacity: 1; }
.degrau-n { font-family: var(--fonte-mono); font-size: .8rem; font-weight: 500; color: var(--azul-texto); display: block; margin-bottom: .75rem; }
.degrau h3 { font-size: 1.55rem; margin-bottom: .65rem; }
.degrau p { color: var(--grafite); font-size: .98rem; text-wrap: pretty; }
/* a progressão: cada degrau começa mais alto que o anterior */
.degrau-1 { padding-bottom: 0; }
.degrau-2 { padding-bottom: 2.25rem; }
.degrau-3 { padding-bottom: 4.5rem; }

@media (max-width: 860px) {
  .escada-grid { grid-template-columns: 1fr; gap: 0; margin-top: 2.5rem; }
  .degrau { padding-bottom: 2rem !important; padding-left: 1.75rem; }
  .degrau::before { top: 0; }
  .degrau:last-child { padding-bottom: 0 !important; }
}

/* ============================================================
   ROTINA — split texto + tabela de horários.
   O mono aqui tem função: é ficha técnica, na definição do DNA.
   ============================================================ */
.rotina-secao { background: var(--azul-050); }
.rotina-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.rotina-grid h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 1.25rem; }
.rotina-grid p { color: var(--cinza); margin-bottom: 1rem; text-wrap: pretty; }
.rotina-grid .botao { margin-top: 1rem; }
.tabela-rotina { width: 100%; border-collapse: collapse; }
.tabela-rotina tr { border-bottom: 1px solid var(--azul-300); }
.tabela-rotina tr:last-child { border-bottom: 0; }
.tabela-rotina th {
  text-align: left; font-family: var(--fonte); font-weight: 500; font-size: 1rem;
  color: var(--grafite); padding: .95rem 1rem .95rem 0;
}
.tabela-rotina td { font-family: var(--fonte-mono); font-size: .88rem; color: var(--azul-fundo); padding: .95rem 0; }
.tabela-rotina .hora { white-space: nowrap; padding-right: 1.25rem; }
.tabela-rotina .local { text-align: right; color: var(--cinza); }
@media (max-width: 860px) {
  .rotina-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ============================================================
   ESTRUTURA — grid de fotos com legenda
   ============================================================ */
.grade-estrutura { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }

/* ------------------------------------------------------------------
   MOLDURA DESLOCADA (31/07/2026, a pedido do cliente)
   Um fio de Cinza Claro do tamanho exato da foto, deslocado para cima e para
   a esquerda: aparece nas duas bordas de fora e some atrás da imagem nas
   outras duas. Recurso de diagramação, nao de fotografia.

   Sobre a regra do DNA: a secao 3.8 proibe "elemento grafico flutuante
   (sem selo, sem laco, sem faixa diagonal)" DENTRO do quadro fotografico,
   e a lista de anti-usos do LOGO proibe contorno no logotipo. Nenhuma das
   duas fala de moldura de layout. O DNA pede, na mesma lista, "assimetria
   calma", que e o que este recurso faz. Nao confundir de novo.
   ------------------------------------------------------------------ */
.item-estrutura { position: relative; }
.item-estrutura::before {
  content: ''; position: absolute; left: -14px; top: -14px;
  width: 100%; aspect-ratio: 3 / 2;
  border: 1px solid var(--linha); border-radius: var(--raio);
  pointer-events: none; z-index: 0;
}
.item-estrutura img { position: relative; z-index: 1; border-radius: var(--raio); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; margin-bottom: 1.1rem; }
.item-estrutura h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.item-estrutura p { font-size: .95rem; color: var(--cinza); text-wrap: pretty; }

/* escalonamento: a coluna do meio desce, quebrando a fileira de cards
   iguais que a skill de design proibe. So com 3 colunas de verdade. */
@media (min-width: 1000px) {
  .grade-estrutura .item-estrutura:nth-child(3n+2) { margin-top: 3.5rem; }
}
/* no mobile o deslocamento de 14px deixa a moldura a 10px da borda da
   tela. 8px devolve respiro sem perder o recurso. */
@media (max-width: 620px) {
  .item-estrutura::before, .card-acomodacao::before { left: -8px; top: -8px; }
}

/* ============================================================
   FAIXA DE FOTO — full bleed com véu azul (regra do DNA: texto
   sobre foto só com véu)
   ============================================================ */
.faixa-foto { position: relative; min-height: 30rem; display: grid; align-items: center; overflow: hidden; }
.faixa-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.faixa-foto::after { content: ''; position: absolute; inset: 0; background: var(--azul-fundo); opacity: .72; }
.faixa-foto-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 4rem 1.5rem; color: #fff; }
.faixa-foto-inner h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.75rem); max-width: 20ch; }
.faixa-foto-inner p { margin-top: 1.1rem; max-width: 46ch; color: rgba(255,255,255,.92); text-wrap: pretty; }
.faixa-foto-inner .botao { margin-top: 2rem; }
/* Sobre o veu de 72% o --azul-300 cai para 3.52:1 na foto mais clara.
   O --azul-200 sustenta 4.68:1 na pior faixa em uso. */
.faixa-foto-inner .rotulo { color: var(--azul-200); }

/* ============================================================
   PROGRAMAS — lista editorial com hairline. Não são cards:
   é uma lista de indicações clínicas, e a hierarquia é textual.
   ============================================================ */
.lista-programas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3.5rem; }
.programa-item { padding: 1.6rem 0; border-top: 1px solid var(--linha); }
.programa-item h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.programa-item h3 a { color: var(--grafite); }
.programa-item h3 a:hover { color: var(--azul); text-decoration: none; }
.programa-item p { font-size: .95rem; color: var(--cinza); text-wrap: pretty; }
@media (max-width: 780px) { .lista-programas { grid-template-columns: 1fr; gap: 0; } }

/* ============================================================
   FECHO — tinta azul, CTA final
   ============================================================ */
.fecho { background: var(--azul-fundo); color: #fff; }
.fecho .container { padding-block: 5rem; }
.fecho h2 { color: #fff; font-size: clamp(1.9rem, 3.8vw, 2.9rem); max-width: 18ch; }
.fecho p { margin-top: 1.25rem; max-width: 48ch; color: rgba(255,255,255,.92); text-wrap: pretty; }
.fecho .botao { margin-top: 2.25rem; }
.fecho-telefone { font-family: var(--fonte-mono); font-size: 1.05rem; color: var(--azul-200); margin-top: 1.5rem; }
.fecho-telefone a { color: #fff; }

.trilha { font-family: var(--fonte-mono); font-size: .78rem; color: var(--cinza); margin-bottom: 1rem; }
.trilha a { color: var(--cinza); }

/* ============================================================
   COMPONENTES DE PÁGINA INTERNA
   Sem eles, toda interna vira cabeçalho + bloco de markdown.
   ============================================================ */
.faixa-alt { background: var(--azul-050); }

/* texto principal + painel de apoio */
.duas-colunas { display: grid; grid-template-columns: 1.35fr .65fr; gap: 4rem; align-items: start; }
/* card e branco, um degrau acima do papel: e a superficie de leitura (v4.0) */
.painel-lateral { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.75rem; position: sticky; top: 6rem; }
.painel-lateral h2 { font-size: 1.15rem; margin-bottom: 1.25rem; }
.painel-nota { margin-top: 1.25rem; font-size: .88rem; color: var(--cinza); }
.passos { list-style: none; counter-reset: passo; display: grid; gap: 1rem; }
.passos li { counter-increment: passo; display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; }
.passos li::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--fonte-mono); font-size: .72rem; color: var(--azul);
  border: 1px solid var(--azul-300); border-radius: var(--raio);
  padding: .15rem .4rem; line-height: 1.3;
}
.passos span { font-size: .92rem; color: var(--grafite); }

/* cards de programa */
.grade-programas { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 1.5rem; }
.card-programa {
  background: var(--papel); border-radius: var(--raio); padding: 1.75rem;
  border-top: 3px solid var(--azul-marca); display: flex; flex-direction: column;
}
.card-programa-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.card-programa-n { font-family: var(--fonte-mono); font-size: 1.05rem; color: var(--azul); }
.card-programa-foco {
  font-family: var(--fonte-mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cinza); text-align: right;
}
/* min-height reserva 2 linhas em titulo e subtitulo, para que o selo e a
   divisoria de "O que entra" fiquem na mesma altura em todos os cards. */
.card-programa h3 { font-size: 1.35rem; margin-bottom: .6rem; min-height: calc(1.35rem * 1.12 * 2); }
.card-programa-quem {
  font-size: .95rem; color: var(--cinza); margin-bottom: 1.1rem;
  min-height: calc(.95rem * 1.65 * 2);
}
.selo-minimo {
  display: inline-block; font-family: var(--fonte-mono); font-size: .8rem; color: var(--azul-fundo);
  background: var(--azul-100); border-radius: var(--raio); padding: .3rem .7rem; margin-bottom: 1.25rem;
}
.selo-minimo span { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--azul); }
/* programa sem mínimo próprio: mantém o bloco, sem fingir destaque */
.selo-neutro { background: transparent; box-shadow: inset 0 0 0 1px var(--linha); color: var(--cinza); }
.selo-neutro span { color: var(--cinza); }
/* no indice, o card leva para a pagina do programa */
.card-programa h3 a { color: var(--grafite); }
.card-programa h3 a:hover { color: var(--azul); text-decoration: none; }
.card-programa-inclui { border-top: 1px solid var(--linha); padding-top: 1.1rem; margin-top: auto; }
.card-programa-inclui > a { font-weight: 500; font-size: .95rem; }

/* ficha do programa, no painel lateral da pagina individual */
.ficha-programa { display: grid; gap: 1.1rem; }
.ficha-programa dt {
  font-family: var(--fonte-mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--azul); margin-bottom: .3rem;
}
.ficha-programa dd { font-size: .94rem; color: var(--grafite); line-height: 1.55; }
.painel-lateral .botao { margin-top: 1.75rem; width: 100%; text-align: center; }

/* ressalvas do programa, dentro da nota-forte */
.lista-obs { list-style: none; display: grid; gap: .55rem; margin-top: .6rem; }
.lista-obs li { padding-left: 1rem; position: relative; font-size: .92rem; line-height: 1.5; }
.lista-obs li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 6px; height: 1px; background: var(--azul-texto);
}
.card-programa-inclui h4 {
  font-family: var(--fonte-mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cinza); margin-bottom: .7rem;
}
.card-programa-inclui ul { list-style: none; display: grid; gap: .5rem; }
.card-programa-inclui li { font-size: .9rem; padding-left: 1rem; position: relative; line-height: 1.45; }
.card-programa-inclui li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; background: var(--azul-marca); border-radius: 50%;
}

/* base comum: grade de hairlines, não cards */
.grade-base { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 2.5rem; }
.item-base { border-top: 1px solid var(--linha); padding: 1.4rem 0; }
.item-base h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.item-base p { font-size: .92rem; color: var(--cinza); }
/* mesma linguagem de traco de .lista-inclusa e .coluna-comp */
.item-base ul { list-style: none; display: grid; gap: .45rem; }
.item-base li { font-size: .92rem; color: var(--cinza); line-height: 1.5; padding-left: .9rem; position: relative; }
.item-base li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 6px; height: 1px; background: var(--azul-texto);
}

/* lista de definições */
.lista-definicoes { display: grid; gap: 0; }
.lista-definicoes > div {
  display: grid; grid-template-columns: minmax(0, 18rem) 1fr; gap: 1.5rem;
  padding: 1.25rem 0; border-top: 1px solid var(--linha);
}
.lista-definicoes dt { font-family: var(--fonte); font-weight: 600; font-size: 1rem; color: var(--grafite); }
.lista-definicoes dd { font-size: .95rem; color: var(--cinza); }

@media (max-width: 900px) {
  .duas-colunas { grid-template-columns: 1fr; gap: 2.5rem; }
  .card-programa h3, .card-programa-quem { min-height: 0; }
  .painel-lateral { position: static; }
  .lista-definicoes > div { grid-template-columns: 1fr; gap: .35rem; }
}

/* lista de itens inclusos, com enfase no nome */
.lista-inclusa { list-style: none; display: grid; gap: .8rem; }
.lista-inclusa li { font-size: .98rem; color: var(--cinza); padding-left: 1.2rem; position: relative; }
.lista-inclusa li::before {
  content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 1px; background: var(--azul-marca);
}
.lista-inclusa strong { color: var(--grafite); font-weight: 500; }
/* em largura inteira a lista respira melhor em duas colunas */
.lista-duas { grid-template-columns: 1fr 1fr; gap: .8rem 3rem; }
@media (max-width: 780px) { .lista-duas { grid-template-columns: 1fr; } }
.nota-forte {
  margin-top: 1.75rem; padding: 1rem 1.25rem; background: var(--azul-050);
  border-left: 2px solid var(--azul-marca); font-size: .94rem; color: var(--grafite); max-width: 60ch;
}

/* chips: listas longas que nao merecem virar <ul> com hairline */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  font-size: .88rem; color: var(--azul-fundo); background: #fff;
  border: 1px solid var(--linha); border-radius: var(--raio); padding: .45rem .85rem;
}
.chip-mono { font-family: var(--fonte-mono); font-size: .82rem; }
.chips-claro .chip { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }

/* linha do tempo vertical: sequencia real, nao decoracao */
.linha-tempo { display: grid; gap: 0; max-width: 46rem; }
.linha-tempo > div {
  display: grid; grid-template-columns: minmax(0, 8rem) 1fr; gap: 2rem;
  padding: 1.5rem 0; border-top: 1px solid var(--linha); align-items: start;
}
.linha-tempo dt { font-family: var(--fonte-mono); font-size: .95rem; color: var(--azul-texto); }
.linha-tempo dd { font-size: 1rem; color: var(--grafite); text-wrap: pretty; }

/* roteiro em etapas, com marcador ligado por regua */
.roteiro { display: grid; gap: 0; }
.etapa {
  display: grid; grid-template-columns: minmax(0, 9rem) 1fr; gap: 2.5rem;
  padding: 1.75rem 0; border-top: 1px solid var(--linha);
}
.etapa-quando {
  font-family: var(--fonte-mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--azul-texto); padding-top: .3rem;
}
.etapa h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.etapa p { font-size: .96rem; color: var(--cinza); text-wrap: pretty; }

/* tabela de horarios por setor.
   O wrapper .tabela-scroll era usado em dois templates sem existir no
   CSS: no mobile a tabela espremia 4 colunas em ~70px cada, com linhas
   de 90px de altura. tabindex torna a area rolavel alcancavel pelo
   teclado, que e o par obrigatorio de overflow com scroll. */
.tabela-scroll { overflow-x: auto; }
.tabela-horarios { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela-horarios th, .tabela-horarios td { padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--linha); text-align: left; }
.tabela-horarios thead th {
  font-family: var(--fonte-mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cinza); font-weight: 400;
}
.tabela-horarios tbody th { font-weight: 500; color: var(--grafite); }
.tabela-horarios td { font-family: var(--fonte-mono); font-size: .85rem; color: var(--azul-fundo); }

/* comparativo: o que entra x o que e a parte */
.comparativo { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.coluna-comp { border-top: 3px solid var(--azul-marca); padding-top: 1.5rem; }
/* o mesmo azul, diluido: hierarquia dentro da marca, sem cor de fora */
.coluna-comp.secundaria { border-top-color: var(--azul-300); }
.coluna-comp h3 { font-size: 1.25rem; margin-bottom: 1.25rem; }
.coluna-comp ul { list-style: none; display: grid; gap: .7rem; }
.coluna-comp li { font-size: .94rem; padding-left: 1.1rem; position: relative; line-height: 1.5; }
.coluna-comp li::before {
  content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 1px; background: var(--azul-marca);
}
.coluna-comp.secundaria li::before { background: var(--cinza); }

/* cards de periodo */
.grade-periodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; }
.card-periodo { background: var(--papel); border-radius: var(--raio); padding: 1.5rem; border-top: 3px solid var(--azul-marca); }
.card-periodo .dias { font-family: var(--fonte-mono); font-size: 2rem; color: var(--azul-marca); line-height: 1; }
.card-periodo .dias small { font-size: .9rem; margin-left: .2rem; }
.card-periodo p { font-size: .88rem; color: var(--cinza); margin-top: .85rem; text-wrap: pretty; }

/* cards de acomodacao com placeholder */
.grade-acomodacoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
/* mesma moldura deslocada da .item-estrutura, para o recurso ser do site
   e nao de uma pagina so. Ver o bloco comentado la em cima. */
.card-acomodacao { display: flex; flex-direction: column; position: relative; }
.card-acomodacao::before {
  content: ''; position: absolute; left: -14px; top: -14px;
  width: 100%; aspect-ratio: 3 / 2;
  border: 1px solid var(--linha); border-radius: var(--raio);
  pointer-events: none; z-index: 0;
}
.card-acomodacao .ph, .card-acomodacao img { margin-bottom: 1.1rem; }
.card-acomodacao img { position: relative; z-index: 1; border-radius: var(--raio); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.card-acomodacao h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.card-acomodacao .capacidade {
  font-family: var(--fonte-mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--azul-texto); margin-bottom: .7rem;
}
.card-acomodacao p { font-size: .93rem; color: var(--cinza); text-wrap: pretty; }

@media (max-width: 820px) {
  .comparativo { grid-template-columns: 1fr; gap: 2rem; }
  .etapa, .linha-tempo > div { grid-template-columns: 1fr; gap: .5rem; }
  .tabela-horarios { font-size: .85rem; }
  .tabela-horarios th, .tabela-horarios td { padding: .7rem .5rem .7rem 0; }
  .tabela-scroll .tabela-horarios { min-width: 34rem; }
}

.faixa-abertura { margin-top: 2.5rem; }
.faixa-abertura img { border-radius: var(--raio); aspect-ratio: 21 / 9; object-fit: cover; width: 100%; }

/* ---------- Conteúdo Markdown ---------- */
.conteudo-md { max-width: 42rem; }
.conteudo-md h2 { font-size: 1.7rem; margin: 3rem 0 1rem; }
.conteudo-md h2:first-child { margin-top: 0; }
.conteudo-md h3 { font-size: 1.25rem; margin: 2rem 0 .6rem; }
.conteudo-md p, .conteudo-md ul, .conteudo-md ol { margin-bottom: 1.15rem; max-width: 68ch; }
.conteudo-md p { text-wrap: pretty; }
.conteudo-md ul, .conteudo-md ol { padding-left: 1.3rem; }
.conteudo-md li { margin-bottom: .4rem; }
.conteudo-md strong { font-weight: 600; }
.conteudo-md img { border-radius: var(--raio); margin: 2rem 0; }
/* DNA v2.5: bloco de citacao e Azul Profundo com texto branco. O
   --azul-050 e apoio (faixa alternada, card), nao enfase — frase que
   sustenta a marca nao fica em fundo quase branco. */
.conteudo-md blockquote {
  background: var(--azul-fundo); color: #fff;
  padding: 1.4rem 1.75rem; margin-bottom: 1.15rem; max-width: 68ch;
  border-radius: var(--raio);
}
.conteudo-md blockquote p:last-child { margin-bottom: 0; }
.conteudo-md blockquote a { color: #fff; text-decoration: underline; }
.conteudo-md table { width: 100%; border-collapse: collapse; margin-bottom: 1.15rem; font-size: .95rem; }
.conteudo-md th, .conteudo-md td { border-bottom: 1px solid var(--linha); padding: .7rem .9rem; text-align: left; }
.conteudo-md th { font-weight: 600; font-family: var(--fonte-mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cinza); }

/* ---------- Blog ---------- */
.grade-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2.25rem; }
.card-post { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.card-post > a img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.card-corpo { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.card-categoria { font-family: var(--fonte-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.card-corpo h2, .card-corpo h3 { font-size: 1.2rem; line-height: 1.25; }
.card-corpo h2 a, .card-corpo h3 a { color: var(--grafite); }
.card-corpo h2 a:hover, .card-corpo h3 a:hover { color: var(--azul); text-decoration: none; }
.card-corpo p { font-size: .94rem; color: var(--cinza); }
.card-corpo time { font-family: var(--fonte-mono); font-size: .76rem; color: var(--cinza); margin-top: auto; padding-top: .5rem; }

.post-destaque { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.post-destaque > a img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; height: 100%; }
.post-destaque .card-corpo { padding: 2.25rem; justify-content: center; }
.post-destaque .card-corpo h2 { font-size: 1.75rem; }
@media (max-width: 860px) { .post-destaque { grid-template-columns: 1fr; } .post-destaque .card-corpo { padding: 1.5rem; } }

.post-capa { border-radius: var(--raio); margin: 2.25rem auto 0; aspect-ratio: 21 / 9; object-fit: cover; width: 100%; }
.post-meta { font-family: var(--fonte-mono); font-size: .82rem; color: var(--cinza); margin-top: .85rem; }
.post-corpo { padding-top: 3rem; }
.post-tags { padding-bottom: 2.5rem; }
.tag { display: inline-block; background: var(--azul-050); border: 1px solid var(--linha); border-radius: var(--raio); padding: .3rem .9rem; font-size: .84rem; color: var(--grafite); margin: 0 .35rem .5rem 0; }
.tag:hover { text-decoration: none; border-color: var(--azul); color: var(--azul); }

.paginacao { display: flex; align-items: center; justify-content: space-between; margin-top: 3rem; }
.paginacao-info { font-family: var(--fonte-mono); font-size: .84rem; color: var(--cinza); }
.filtro-aviso { margin-bottom: 2rem; }

/* ---------- FAQ ---------- */
.faq-lista { max-width: 46rem; }
.faq-item { border-bottom: 1px solid var(--linha); }
.faq-item summary {
  cursor: pointer; font-family: var(--display); font-weight: 400; color: var(--grafite);
  font-size: 1.1rem; padding: 1.4rem 2.5rem 1.4rem 0; list-style: none; position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  font-family: var(--fonte); font-size: 1.5rem; font-weight: 400; color: var(--azul);
  transition: transform var(--transicao);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-resposta { padding: 0 0 1.5rem; max-width: 62ch; }
.faq-resposta p { margin-bottom: .8rem; color: var(--cinza); }

/* ============================================================
   PLACEHOLDER DE IMAGEM
   Bloco temporario com a proporcao final da foto, rotulado com o
   que vai ali. Existe para o design ser avaliado sem depender de
   foto pronta. Sai quando site.json > placeholders vira false.
   ============================================================ */
.ph {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: var(--ar, 3 / 2); width: 100%;
  background: var(--azul-050); border: 1px dashed var(--azul-300); border-radius: var(--raio);
  padding: 1.25rem; text-align: center;
}
.ph span {
  font-family: var(--fonte-mono); font-size: .74rem; line-height: 1.5;
  letter-spacing: .04em; color: var(--azul-fundo); max-width: 26ch;
}
.ph::after {
  content: 'placeholder'; position: absolute; top: .5rem; left: .5rem;
  font-family: var(--fonte-mono); font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--azul); opacity: .7;
}
/* placeholder da faixa full bleed: ocupa o lugar da foto de fundo */
.faixa-ph { background: var(--azul-050); }
.faixa-ph::after { opacity: .82; }
.faixa-ph-rotulo {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 1.25rem; border: 1px dashed var(--azul-300);
}
.faixa-ph-rotulo span {
  font-family: var(--fonte-mono); font-size: .72rem; line-height: 1.5; text-align: right;
  color: var(--azul-fundo); background: var(--azul-050); padding: .5rem .7rem; max-width: 34ch;
}

/* ============================================================
   FORMULARIO DE ORCAMENTO — fecha toda pagina, como no site atual
   ============================================================ */
.orcamento { background: var(--azul-fundo); color: #fff; }
.orcamento-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4rem; align-items: start; }
.orcamento h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.orcamento-intro p { margin-top: 1.1rem; color: rgba(255,255,255,.92); max-width: 40ch; text-wrap: pretty; }
.orcamento-contato { margin-top: 2.25rem; display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.25rem; }
.orcamento-contato dt {
  font-family: var(--fonte-mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--azul-200); padding-top: .15rem;
}
.orcamento-contato dd { font-size: .98rem; }
.orcamento-contato a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); }
.orcamento-contato a:hover { text-decoration: none; border-bottom-color: #fff; }

.form-orcamento { background: var(--papel); border-radius: var(--raio); padding: 2.25rem; }
.form-orcamento .campo { margin-bottom: 1.1rem; }
.form-orcamento label, .form-orcamento legend {
  display: block; font-size: .82rem; font-weight: 500; color: var(--grafite); margin-bottom: .4rem;
}
.form-orcamento input[type=text],
.form-orcamento input[type=email],
.form-orcamento input[type=tel],
.form-orcamento select,
.form-orcamento textarea {
  width: 100%; font-family: var(--fonte); font-size: 1rem; color: var(--grafite);
  background: #fff; border: 1px solid var(--cinza); border-radius: var(--raio);
  padding: .7rem .85rem;
}
.form-orcamento textarea { resize: vertical; min-height: 5rem; }
.form-orcamento input:focus-visible,
.form-orcamento select:focus-visible,
.form-orcamento textarea:focus-visible { border-color: var(--azul-marca); }
.campo-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
.campo-radio { border: 0; padding: 0; margin-bottom: 1.5rem; }
.campo-radio label {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0 1.25rem 0 0;
  font-weight: 400; font-size: .95rem;
}
.campo-radio input { accent-color: var(--azul-marca); }
.form-orcamento .botao { width: 100%; text-align: center; border: 0; cursor: pointer; }
.form-nota { margin-top: .9rem; font-size: .8rem; color: var(--cinza); text-align: center; }

@media (max-width: 900px) {
  .orcamento-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .form-orcamento { padding: 1.5rem; }
  .campo-duplo { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Rodapé ---------- */
.rodape { background: var(--grafite); color: rgba(244,241,236,.76); margin-top: 0; padding: 4rem 0 1.75rem; }
.rodape a { color: var(--papel); }
.rodape .regua { margin-bottom: 2.25rem; background: var(--azul-300); }
.rodape-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2.5rem; padding-bottom: 2.5rem; }
.rodape-col strong { display: block; color: var(--papel); margin-bottom: .9rem; font-family: var(--fonte); font-size: .95rem; font-weight: 600; letter-spacing: .01em; }
.rodape-col p { margin-bottom: .5rem; font-size: .92rem; }
.versao-site { font-family: var(--fonte-mono); font-size: .74rem; opacity: .6; }
.rodape-base { border-top: 1px solid rgba(244,241,236,.16); padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem; font-size: .85rem; }
.rodape a.hl-assinatura { color: rgba(244,241,236,.55); font-size: .82rem; }
.rodape a.hl-assinatura:hover { color: var(--papel); text-decoration: none; }
.rodape a.hl-assinatura b { color: var(--papel); font-weight: 600; }

/* ---------- WhatsApp ----------
   Era verde #1faa53 com rotulo de texto: reprovava AA (3,03:1) e o DNA proibe
   verde no layout ("verde e turquesa entram exclusivamente pela fotografia").
   Agora e Azul Profundo com o icone, decidido pelo cliente em 31/07/2026.

   EXCECAO DE FORMA, deliberada e unica no site: o raio e 50%, nao os 2px que o
   DNA trava para todo o resto. Botao flutuante de contato e convencao de
   plataforma, e um retangulo de 2px aqui leria como erro. A trava de forma
   segue valendo em todo o resto do tema.
   ------------------------------------------------------------------ */
.whatsapp-flutuante {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--azul-fundo); color: #fff;
  display: grid; place-items: center;
  z-index: var(--z-whatsapp);
  box-shadow: 0 2px 12px rgba(28, 31, 33, .24);
  transition: transform var(--transicao), background var(--transicao);
}
.whatsapp-flutuante svg { display: block; }
.whatsapp-flutuante:hover { background: var(--azul); text-decoration: none; transform: translateY(-2px); }
.whatsapp-flutuante:active { transform: translateY(1px); }

/* ---------- Revelação sutil (MOVIMENTO 2: só onde há suporte) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .card-post, .item-estrutura, .degrau {
      animation: entrar linear both; animation-timeline: view(); animation-range: entry 0% entry 35%;
    }
  }
}
@keyframes entrar {
  from { opacity: .3; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------
   GALERIA COMPLETA DA ESTRUTURA (01/08/2026, a pedido do cliente)
   As 112 fotos do site atual, agrupadas por onde ficam no terreno. Pedido
   textual: "quero mostrar tudo do spa, todos predios, ambientes, opcoes de
   esporte, lazer".

   Por que a legenda fica FORA do quadro: o DNA 3.8 so admite texto sobre
   foto com veu, e veu em 112 miniaturas mataria a leitura das fotos. A
   legenda embaixo mantem a foto limpa e continua sendo a regra da casa.

   Nenhuma foto e recortada pelo CSS: o recorte 3:2 ja veio do arquivo, e o
   object-fit aqui e so uma trava contra arquivo fora de proporcao.
   ------------------------------------------------------------------ */
.galeria-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 3rem; }
.galeria-nav a {
  font-family: var(--fonte); font-size: .82rem; letter-spacing: .02em;
  padding: .45rem .9rem; border: 1px solid var(--linha); border-radius: var(--raio);
  color: var(--azul-fundo); text-decoration: none; background: #fff;
  transition: border-color var(--transicao), color var(--transicao);
}
.galeria-nav a:hover, .galeria-nav a:focus-visible { border-color: var(--azul-400); color: var(--azul-marca); }

.galeria-grupo + .galeria-grupo { margin-top: 4rem; }
.galeria-grupo { scroll-margin-top: calc(var(--topo-h) + 1rem); }
.galeria-cabeca { margin-bottom: 1.5rem; border-top: 1px solid var(--linha); padding-top: 1rem; }
.galeria-cabeca h3 { font-family: var(--display); font-size: 1.5rem; color: var(--azul-900); margin: 0 0 .35rem; }
.galeria-cabeca p { margin: 0; color: var(--azul-fundo); font-size: .95rem; }
.galeria-conta {
  display: inline-block; margin-top: .5rem;
  font-family: var(--fonte-mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--azul-fundo);
}

.galeria-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.galeria-item { margin: 0; }
.galeria-item img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; border-radius: var(--raio); background: var(--azul-050);
}
.galeria-item figcaption {
  margin-top: .5rem; font-family: var(--fonte); font-size: .82rem;
  line-height: 1.35; color: var(--azul-fundo);
}

@media (max-width: 900px) {
  .galeria-grade { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
@media (max-width: 640px) {
  .galeria-grade { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .galeria-grupo + .galeria-grupo { margin-top: 2.5rem; }
  .galeria-item figcaption { font-size: .76rem; }
  .galeria-nav { gap: .4rem; margin-bottom: 2rem; }
  .galeria-nav a { font-size: .76rem; padding: .38rem .7rem; }
}

/* ============================================================
   HOME — "A semana"  (04/08/2026)
   A home percorre um dia dentro do Spa Med: cada momento e uma dobra
   fotografica com uma frase, e o papel entra como pausa factual entre
   elas. A ordem das dobras e a escada de conviccao do PRODUCT.md.
   Prefixo .h- para nao colidir com os componentes das demais paginas.
   ============================================================ */

.h-capa { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; }
.h-capa-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* o escurecimento vem do brilho da foto com saturacao compensada, nunca de
     veu forte nem de gradiente — regra da secao 3.6 do DNA */
  filter: brightness(.58) saturate(1.2); }
.h-capa::after { content: ""; position: absolute; inset: 0; background: var(--azul-900); opacity: .03; }
.h-capa-in { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(3rem, 8vh, 6rem); }
.h-capa h1 { font-family: var(--display); font-weight: 400; color: #fff;
  font-size: clamp(2.5rem, 7.4vw, 5.2rem); line-height: 1.03; margin: 0 0 1.5rem; max-width: 15ch; text-wrap: balance; }
.h-capa p { color: #fff; font-size: clamp(1.05rem, 2.1vw, 1.3rem); line-height: 1.5; max-width: 36ch; margin: 0 0 2.25rem; }
.h-acoes { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Sobre foto o .botao-borda do tema usa o azul de trabalho e desaparece.
   Sobre imagem ele vira contorno branco. */
.h-borda-foto { color: #fff; background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.72); }
.h-borda-foto:hover, .h-borda-foto:focus-visible { background: #fff; color: var(--azul-fundo); box-shadow: inset 0 0 0 1px #fff; }

/* o relogio costura a pagina inteira */
.h-hora { font-family: var(--fonte-mono); font-size: .82rem; letter-spacing: .1em;
  color: var(--azul-200); display: block; margin-bottom: 1.1rem; }
.h-papel .h-hora { color: var(--azul); }

/* ---------- o dia tem hora: horário com foto limpa (10/09/2026) ----------
   Substitui .h-momento (tres telas inteiras com foto escurecida e texto branco
   por cima, que liam como slideshow). Foto sem filtro nenhum: o calor da marca
   entra pela imagem, e a comida volta a parecer comida. Texto no papel, sempre
   do mesmo lado. A coluna da hora e o relogio que costura a home. Foto 1:1
   porque a pista so fica sem a placa de metragem no corte quadrado, e o DNA ja
   preve 1:1 para mesa e preparo. */
.h-dia { background: var(--papel); padding-block: clamp(4rem, 9vw, 7.5rem); }
.h-dia-cabeca { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.h-dia-cabeca h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.1; margin: 0 0 1rem; max-width: 20ch; }
.h-dia-cabeca p { font-size: 1.08rem; line-height: 1.68; max-width: 58ch; margin: 0; }
.h-dia-item { display: grid; grid-template-columns: 7rem minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center; padding-block: clamp(2rem, 4vw, 3.25rem); border-top: 1px solid var(--linha); }
.h-dia-item:last-child { border-bottom: 1px solid var(--linha); }
.h-dia-hora { font-family: var(--fonte-mono); font-size: .95rem; letter-spacing: .08em; color: var(--azul); align-self: start; padding-top: .35rem; }
.h-dia-foto { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--raio); }
.h-dia-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h-dia-texto h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; margin: 0 0 1rem; max-width: 18ch; text-wrap: balance; }
.h-dia-texto p { font-size: 1.05rem; line-height: 1.66; max-width: 46ch; margin: 0 0 1rem; }
.h-dia-texto p:last-child { margin-bottom: 0; }
/* link em texto corrido: sublinhado a ~38% da propria cor (WCAG 1.4.1) */
.h-dia-texto a { color: var(--azul-700, #2E5A80); text-decoration: underline; text-decoration-color: rgba(46,90,128,.38); text-underline-offset: .18em; padding-block: .2rem; }
.h-dia-texto a:hover, .h-dia-texto a:focus-visible { text-decoration-color: currentColor; }
@media (max-width: 900px) { .h-dia-item { grid-template-columns: 1fr; gap: 1rem; } .h-dia-hora { padding-top: 0; } }

/* ============================================================
   A SEMANA — mosaico de praticas, roteiro com foto, cafe da manha (10/09/2026)
   A pagina tinha duas fotos em 6.600px, uma delas sob veu de 72%. Agora a
   secao dominante e um mosaico de oito praticas, sem veu e sem texto por cima:
   legenda fora do quadro, como na galeria da /estrutura/. Uma celula grande,
   uma alta e seis quadradas; as quadradas definem a altura da linha, as duas
   maiores esticam para a area que ocupam. Raio de 2px, como tudo no tema.
   ============================================================ */
.semana-mosaico { background: var(--papel); }
.mosaico { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: .75rem; }
.mosaico-item { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.mosaico-item img { width: 100%; flex: 1 1 auto; min-height: 0; object-fit: cover; display: block; border-radius: var(--raio); aspect-ratio: 1 / 1; }
.mosaico-item figcaption { font-family: var(--fonte-mono); font-size: .72rem; letter-spacing: .04em; color: var(--cinza); padding: .55rem 0 .25rem; line-height: 1.35; }
.mosaico-item--grande { grid-column: span 2; grid-row: span 2; }
.mosaico-item--grande img { aspect-ratio: auto; height: 100%; }
.mosaico-item--alto { grid-row: span 2; }
.mosaico-item--alto img { aspect-ratio: auto; height: 100%; }
.mosaico-nota { margin-top: 1.5rem; font-size: .94rem; color: var(--cinza); max-width: 62ch; }
@media (max-width: 700px) {
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .mosaico-item--grande { grid-column: span 2; grid-row: auto; }
  .mosaico-item--grande img { aspect-ratio: 3 / 2; height: auto; }
  .mosaico-item--alto { grid-row: auto; }
  .mosaico-item--alto img { aspect-ratio: 1 / 1; height: auto; object-position: 50% 30%; }
  /* oito itens em duas colunas com a grande ocupando as duas: sobraria um
     orfao na ultima linha. O ultimo tambem ocupa as duas, em 3:2. */
  .mosaico-item:last-child { grid-column: span 2; }
  .mosaico-item:last-child img { aspect-ratio: 3 / 2; }
  .mosaico-item figcaption { font-size: .66rem; }
}

/* roteiro clinico com a foto da bioimpedancia fixa ao lado */
.roteiro-com-foto { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.roteiro-foto { margin: 0; position: sticky; top: 6rem; }
.roteiro-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: var(--raio); }
.roteiro-foto figcaption { font-size: .92rem; color: var(--cinza); line-height: 1.5; padding-top: .75rem; max-width: 40ch; }
@media (max-width: 900px) {
  .roteiro-com-foto { grid-template-columns: 1fr; }
  .roteiro-foto { position: static; order: -1; }
}

/* variante paisagem da foto fixa: pagina de programa, ao lado da lista do que oferece */
.roteiro-foto--paisagem img { aspect-ratio: 3 / 2; }
/* capa nos cards "outros programas" da pagina de programa */
.item-base-foto { display: block; margin-bottom: .9rem; }
.item-base-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: var(--raio); }

/* cafe da manha ao lado da tabela das seis refeicoes */
.rotina-foto { margin: 1.5rem 0 0; }
.rotina-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: var(--raio); }
.rotina-foto figcaption { font-family: var(--fonte-mono); font-size: .72rem; letter-spacing: .04em; color: var(--cinza); padding-top: .55rem; }
.rotina-grid--foto .botao { margin-top: 1.5rem; }

/* botao dentro da ancora escura */
.ancora-botao { margin-top: 1.75rem; }

/* ============================================================
   TIRA DE FOTOS e FOTO + TEXTO (10/09/2026)
   Dois componentes reutilizaveis para as internas, nascidos da regra desta
   sessao: texto sobre foto escurecida so na abertura. No corpo, a foto e limpa
   e o texto fica no papel.
   .tira-fotos  — 3 ou 4 fotos lado a lado, legenda em mono fora do quadro
   .foto-texto  — uma foto 3:2 limpa e um bloco de texto ao lado; substitui a
                  .faixa-foto (veu de 72%) nas paginas de acomodacoes, estrutura
                  e atividades
   ============================================================ */
.tira-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.tira-fotos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tira-fotos figure { margin: 0; min-width: 0; }
.tira-fotos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: var(--raio); }
.tira-fotos--4 img { aspect-ratio: 1 / 1; }
.tira-fotos figcaption { font-family: var(--fonte-mono); font-size: .72rem; letter-spacing: .04em; color: var(--cinza); padding: .55rem 0 .25rem; line-height: 1.35; }
.tira-fotos + .chips, .tira-fotos + .secao-cabeca, .tira-fotos + .grade-base { margin-top: 2.5rem; }
@media (max-width: 700px) {
  .tira-fotos, .tira-fotos--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .tira-fotos figure:last-child:nth-child(odd) { grid-column: span 2; }
  .tira-fotos figcaption { font-size: .66rem; }
}

.foto-texto { background: var(--azul-050); }
.foto-texto .container { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: var(--secao-padrao); }
.foto-texto figure { margin: 0; }
.foto-texto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: var(--raio); }
.foto-texto figcaption { font-family: var(--fonte-mono); font-size: .72rem; letter-spacing: .04em; color: var(--cinza); padding-top: .55rem; }
.foto-texto h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 1rem; max-width: 18ch; text-wrap: balance; }
.foto-texto p { color: var(--cinza); font-size: 1.05rem; line-height: 1.66; max-width: 46ch; text-wrap: pretty; }
.foto-texto .botao { margin-top: 1.5rem; }
@media (max-width: 860px) { .foto-texto .container { grid-template-columns: 1fr; gap: 1.5rem; } }
/* variante retrato: foto 4:5 numa coluna mais estreita (a equipe, na /sobre/) */
.foto-texto--retrato .container { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.foto-texto--retrato img { aspect-ratio: 4 / 5; }

/* foto de capa no card de programa: a mesma da abertura da pagina do programa.
   Sangra ate a borda do card (compensa o padding) e fica abaixo da regua azul. */
.card-programa-foto { display: block; margin: -1.75rem -1.75rem 1.25rem; }
.card-programa-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }

/* ---------- papel: a pausa factual ---------- */
.h-papel { background: var(--papel); padding-block: clamp(4rem, 9vw, 7.5rem); }
.h-papel--alt { background: var(--azul-050); }
.h-papel--claro { background: #fff; }
.h-papel h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.1; margin: 0 0 1.5rem; max-width: 20ch; text-wrap: balance; }
.h-titulo-largo { max-width: 26ch; }
.h-papel p { font-size: 1.08rem; line-height: 1.68; max-width: 62ch; margin: 0 0 1.15rem; }
.h-duas { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 900px) { .h-duas { grid-template-columns: 1fr; } }
.h-foto-apoio { width: 100%; height: auto; border-radius: var(--raio); }

/* ficha: fato dentro de linha regrada, nunca painel de metrica */
.h-ficha { margin-top: 2rem; border-top: 1px solid var(--linha); }
.h-ficha--solta { margin-top: 0; border-top: 0; }
.h-ficha > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1.25rem;
  padding: .95rem 0; border-bottom: 1px solid var(--linha); align-items: baseline; }
.h-ficha dt { font-family: var(--fonte-mono); font-size: .95rem; color: var(--azul); }
.h-ficha dd { margin: 0; font-size: 1rem; line-height: 1.55; }
.h-ficha--links dt { font-family: var(--display); font-size: 1.25rem; }
.h-ficha--links dt a { color: var(--grafite); }
.h-ficha--links dt a:hover { color: var(--azul); }
@media (max-width: 560px) { .h-ficha > div { grid-template-columns: 1fr; gap: .2rem; } }

/* ---------- ancora escura ---------- */
.h-ancora { background: var(--azul-fundo); color: #fff; padding-block: clamp(4rem, 9vw, 7rem); }
.h-ancora h2 { font-family: var(--display); font-weight: 400; color: #fff;
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; margin: 0 0 1.5rem; max-width: 20ch; }
.h-ancora p { color: var(--azul-200); font-size: 1.05rem; line-height: 1.68; max-width: 54ch; margin: 0; }

/* ---------- prova social: vazio honesto ate chegar material real ---------- */
.h-vazio { border: 1px dashed var(--linha); border-radius: var(--raio);
  padding: clamp(1.5rem, 4vw, 2.5rem); max-width: 62ch; }
.h-vazio p { margin: 0; color: var(--cinza); font-size: .98rem; line-height: 1.6; }
.h-vazio strong { color: var(--grafite); }

/* ---------- fecho ---------- */
.h-fecho { background: var(--azul-900); color: #fff; padding-block: clamp(4.5rem, 10vw, 8rem); }
.h-fecho h2 { font-family: var(--display); font-weight: 400; color: #fff;
  font-size: clamp(2.1rem, 5.2vw, 3.5rem); line-height: 1.08; margin: 0 0 1.25rem; max-width: 18ch; }
.h-fecho p { color: var(--azul-200); font-size: 1.05rem; line-height: 1.6; max-width: 46ch; margin: 0 0 2rem; }
.h-fecho-tel { font-family: var(--fonte-mono); margin-top: 1.75rem !important; }
.h-fecho-tel a { color: #fff; }

/* Motion: uma entrada por dobra. O conteudo ja nasce visivel — a animacao
   enriquece, nunca decide se a secao aparece. */
@media (prefers-reduced-motion: no-preference) {
  .h-dia-item, .h-papel .container > * { animation: h-sobe .7s cubic-bezier(.16,1,.3,1) both; }
  @keyframes h-sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ── Área de toque mínima (WCAG 2.2 AA · 2.5.8) ──────────────────
   Medido a 412px: 20 links entre 20 e 22px de altura — colunas do rodapé,
   redes, telefone do fecho e assinatura. A caixa de um <a> inline segue só a
   altura da fonte e ignora o line-height do parágrafo.
   Padding vertical no próprio <a>: em inline entra no hit-test sem empurrar a
   linha de baixo, então o rodapé não muda de altura. */
.rodape-col a,
.redes a,
.h-fecho-tel a,
.rodape a.hl-assinatura { padding-block: .2rem; }

/* ── Segunda leva: varredura ampla em 16 páginas ─────────────────
   A primeira rodada mediu só a home e o tarifário, e por isso viu apenas o
   rodapé. Estes ficavam entre 15 e 22px: nota de painel, link do card de
   programa, trilha, título h3 de card, telefone/e-mail da lista de contato e
   rótulo de categoria do blog. Todos inline — o padding entra no hit-test sem
   mexer no layout. Valores escolhidos para passar com folga: .15rem levaria a
   23,8px, que arredonda para 24 no relatório e reprova de verdade. */
.painel-nota a,
.card-programa-inclui a,
.dados a { padding-block: .25rem; }
.trilha a { padding-block: .3rem; }
.card-categoria a { padding-block: .35rem; }
h3 > a,
dd > a { padding-block: .2rem; }

/* ── Link dentro de texto corrido (WCAG 1.4.1) ───────────────────
   Cinco links de prosa saíam sem sublinhado e com cor quase igual à do texto
   ao redor: sem os 3:1 de diferença que o critério exige, e sem outra pista.
   Escopo por "dentro do <main>, menos a navegação", com as exclusões na
   própria regra — reset separado perde por especificidade. */
main p:not(.trilha) > a:not(.botao),
main li > a:not(.botao) {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
main p:not(.trilha) > a:not(.botao):hover,
main li > a:not(.botao):hover { text-decoration-color: currentColor; }

/* ==================================================================
   ACESSIBILIDADE — os dois sinais que faltavam (§14)
   Ficam no FIM do arquivo de proposito: precisam vencer a regra base de
   .topo pela ORDEM da cascata, ja que tem a mesma especificidade. Colocados
   junto do bloco de prefers-reduced-motion la em cima, eles eram anulados
   em silencio — nenhum erro no console, so nao funcionava.
   ================================================================== */

/* Translucidez reduzida: a camada de vidro vira superficie solida. O desfoque
   sai por inteiro, porque blur atras de fundo opaco so custa GPU sem efeito. */
@media (prefers-reduced-transparency: reduce) {
  .topo {
    background: #fff;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--linha);
  }
  .topo::after { display: none; }
}

/* Mais contraste: fundo solido e borda definida em tudo que separa regiao. */
@media (prefers-contrast: more) {
  .topo {
    background: #fff;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--grafite);
  }
  .topo::after { display: none; }
  .cartao, .card-programa, .card-post, .painel-lateral, .item-estrutura,
  .galeria-item img { border-color: var(--grafite); }
}