/* ==========================================================================
   HAND CARE — Assessoria em Saúde
   secoes.css

   Ajustes ESPECÍFICOS de cada SLIDE, na ordem em que aparecem no deck.
   O que for reutilizável mora em components.css — aqui só entra o que
   pertence a um slide e a mais nenhum.

   Este arquivo descreve o DESKTOP. A reorganização para telas pequenas
   vive em responsive.css, que carrega depois.

   Nenhum HEX: só tokens. Ver SKILL.md, seções 10 e 13.
   ========================================================================== */


/* ==========================================================================
   01 · CAPA

   Capa de deck, não hero de site. A fotografia é um PAINEL SANGRADO na
   metade direita — encosta no topo, na direita e na base — com o lado
   esquerdo em arco. É a fita do cartão virada noventa graus.
   ========================================================================== */

/* A capa usa o painel na largura padrão do componente (46%). Tudo o que
   define a forma — posição, curva e fio dourado — vem de .hc-painel. */
.hc-capa__interna {
    max-width: calc(var(--largura-larga) + var(--esp-secao-x) * 2);
}

/* O conteúdo nunca invade o painel: 46% de foto + folga. */
.hc-capa__texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(var(--esp-sm), 1.7vw, var(--esp-md));
    max-width: min(50%, 44ch);
}

/* O símbolo oficial abre a leitura. É a primeira vez que ele aparece —
   e a única em tamanho médio: no resto do deck vive pequeno, no canto. */
.hc-capa__simbolo {
    height: clamp(56px, 5.6vw, 88px);
    width: auto;
}

.hc-capa__marca {
    margin-top: calc(var(--esp-2xs) * -1);
}

/* Escala PRÓPRIA, um degrau abaixo do topo de --fs-display.
   Motivo concreto: a capa é a única tela em que a frase divide a altura
   com o símbolo, a marca, o apoio e a indicação de rolagem. No topo da
   escala (120px) a frase sozinha ocupava quatro linhas e empurrava o pé
   do slide para fora da viewport de 1000px.
   Com 18ch a frase quebra em três linhas — que é o desenho de coluna
   que a capa pede. */
.hc-capa__titulo {
    max-width: 18ch;
    font-size: clamp(2.35rem, 1.15rem + 5.0vw, 5.25rem);
}

.hc-capa__lead {
    max-width: 34ch;
}

/* Fica no fluxo, e não colada na base: a numeração do slide já ocupa o
   canto inferior esquerdo, e dois elementos ali brigariam. */
/* O respiro antes do pé é medido em vh, não em px fixo: numa tela de
   900px de altura ele encolhe sozinho e a capa continua cabendo. */
.hc-capa__pe {
    display: flex;
    align-items: center;
    gap: clamp(var(--esp-md), 3vw, var(--esp-xl));
    margin-top: clamp(var(--esp-md), 3.4vh, var(--esp-2xl));
}

.hc-capa__local {
    font-size: var(--fs-rotulo);
    font-weight: var(--peso-medio);
    letter-spacing: var(--ls-rotulo);
    text-transform: uppercase;
    color: var(--t-suave);
}

.hc-capa__halo {
    top: -14%;
    left: -12%;
}

.hc-capa__botanico {
    top: -8%;
    right: 42%;
    width: clamp(200px, 22vw, 360px);
    opacity: 0.18;
}


/* ==========================================================================
   02 · MANIFESTO — CUIDAR VAI ALÉM DA ASSISTÊNCIA          .hc-secao--alem

   O "problema" do pitch, logo depois da capa. Slide de TIPOGRAFIA PURA:
   nenhuma fotografia, nenhum ícone, nenhuma moldura. É o contraste
   deliberado com o painel sangrado da capa (01) e com a fotografia em
   coluna do slide seguinte (03) — duas telas vizinhas não repetem o mesmo
   mecanismo.

   Composição:
     · rótulo dourado no alto, à esquerda;
     · A FRASE domina a tela, em escala de display, na coluna larga;
     · o antigo lead encolhe e vira NOTA DE MARGEM, ancorada na base da
       frase: ocupa o vazio à direita em vez de virar segundo parágrafo;
     · o manuscrito assina a tela, precedido de um filete dourado;
     · os quatro conceitos descem para uma LINHA na base, separados por
       pontos dourados — rodapé de slide executivo, não lista de itens.

   ORÇAMENTO DE ALTURA (1600×900): sobram ~596px úteis (120px de padding no
   topo + 184px embaixo, já contando o respiro que livra a fita da base). A
   pilha soma ~492px. Os respiros grandes são medidos em vh de propósito:
   num notebook de 768px eles encolhem sozinhos e o slide continua cabendo.
   ========================================================================== */

/* A fita da base sobe até ~145px (o topo dos fios dourados) numa tela de
   1600px. Sem este respiro extra a linha de conceitos entraria por baixo
   dela e o texto creme cairia sobre a massa creme da curva. */
.hc-secao--alem .hc-secao__interna {
    padding-bottom: calc(var(--esp-secao-y) + var(--esp-2xl));
}

/* Um bloco só, ancorado à esquerda: a margem esquerda da frase é o eixo
   vertical do slide, e dela pendem rótulo, assinatura e linha de base. */
.hc-secao--alem .hc-alem__bloco {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

/* Sobretítulo: fica colado à frase, não a um passo dela. O respiro em vh
   (e não em vw) é o que impede o slide de crescer em tela baixa. */
.hc-secao--alem .hc-alem__rotulo {
    margin-bottom: clamp(var(--esp-sm), 2.6vh, var(--esp-lg));
}

/* --------------------------------------------------------------------------
   A frase e a nota de margem
   -------------------------------------------------------------------------- */

/* 1,55fr / 1fr: a frase fica com ~61% da linha — medida suficiente para
   quebrar em TRÊS linhas cheias — e a nota herda o vazio que sobra.
   align-items: end assenta a nota na BASE da frase: é isso que a faz ler
   como legenda de revista, e não como uma segunda coluna de texto. */
.hc-secao--alem .hc-alem__topo {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(var(--esp-lg), 4vw, var(--esp-2xl));
    width: 100%;
}

/* Escala PRÓPRIA, entre --fs-h1 e --fs-display.
   Motivo concreto: a frase tem 55 caracteres. No topo da escala de display
   (120px) ela ocuparia cinco linhas e empurraria a linha de base para fora
   da viewport. Com teto de 72px são três linhas em qualquer tela larga —
   ~230px, pouco mais de um terço da altura útil, que é o peso certo para o
   elemento que domina a tela.
   max-width: 100% porque quem controla a medida aqui é a coluna do grid; o
   limite de 20ch de .hc-display brigaria com ela. */
.hc-secao--alem .hc-alem__frase {
    max-width: 100%;
    font-size: clamp(2.1rem, 1.05rem + 3.4vw, 4.5rem);
    line-height: 1.08;
}

/* A nota de margem — o antigo lead, reduzido a apoio.
   Medida curta (34ch) de propósito: em coluna estreita ela lê como legenda.
   O padding-bottom levanta a última linha da nota um degrau acima da linha
   de base da frase, para que não pareça colada no ombro dela. */
.hc-secao--alem .hc-alem__apoio {
    max-width: 34ch;
    padding-bottom: 0.6em;
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   A assinatura manuscrita
   -------------------------------------------------------------------------- */

/* Filete e manuscrito na MESMA linha: o fio funciona como a régua de uma
   assinatura e, de quebra, separa o gesto do bloco de display logo acima
   sem precisar de mais um vazio vertical. */
.hc-secao--alem .hc-alem__assinatura {
    display: flex;
    align-items: center;
    gap: clamp(var(--esp-md), 2vw, var(--esp-lg));
    width: 100%;
    margin-top: clamp(var(--esp-lg), 5vh, var(--esp-2xl));
}

/* O fio é ornamento de largura fixa: não estica nem encolhe com o flex. */
.hc-secao--alem .hc-alem__fio {
    flex: 0 0 auto;
}

/* Um dos três únicos manuscritos da apresentação inteira.
   COR: var(--t-dourado). No tema escuro esse token é o dourado da marca e
   rende 6,5:1 sobre o verde fechado — pode carregar texto sem ressalva — e
   é ele que devolve à frase o gesto de assinatura do cartão.
   TAMANHO: bem abaixo do teto de --fs-script (72px). A frase tem 41
   caracteres: no topo da escala viraria uma segunda manchete e disputaria a
   tela com o <h2>. Aqui ela assina, não anuncia. O limite em em (e não em
   px) acompanha o próprio tamanho da fonte e segura a frase em uma linha
   nas telas largas. */
.hc-secao--alem .hc-alem__script {
    max-width: 20em;
    font-size: clamp(1.5rem, 0.95rem + 1.9vw, 2.75rem);
    line-height: 1.2;
    color: var(--t-dourado);
}

/* --------------------------------------------------------------------------
   A linha de base — os quatro conceitos
   -------------------------------------------------------------------------- */

/* Não é uma lista de itens: é a linha de rodapé de um slide executivo. Um
   filete no alto, os quatro nomes seguidos, e nada mais — as frases de
   apoio de cada conceito foram cortadas no PHP. O maior vazio do slide fica
   aqui, ANTES da linha: é a pausa entre a mensagem e o resumo dela. */
.hc-secao--alem .hc-alem__conceitos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(var(--esp-md), 2.4vw, var(--esp-xl));
    width: 100%;
    margin-top: clamp(var(--esp-xl), 9vh, var(--esp-3xl));
    padding-top: clamp(var(--esp-md), 2.2vh, var(--esp-lg));
    border-top: 1px solid var(--t-borda);
}

/* Caixa alta espaçada e tamanho pequeno: o nome é a informação, mas a linha
   inteira precisa pesar menos que a frase. Cor --t-texto (creme, 11,6:1):
   em corpo pequeno o apoio ficaria apagado sobre o verde fechado. */
.hc-secao--alem .hc-alem__conceitos > li {
    display: flex;
    align-items: center;
    gap: clamp(var(--esp-md), 2.4vw, var(--esp-xl));
    font-size: clamp(0.75rem, 0.70rem + 0.20vw, 0.9375rem);
    font-weight: var(--peso-medio);
    line-height: 1.3;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--t-texto);
}

/* Ponto dourado no lugar de separador. Ele mora DENTRO do item seguinte e
   usa o mesmo gap do contêiner: assim o espaço dos dois lados do ponto é
   idêntico, sem precisar de margem calculada. */
.hc-secao--alem .hc-alem__conceitos > li + li::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--t-dourado-orn);
}

/* --------------------------------------------------------------------------
   Decoração
   -------------------------------------------------------------------------- */

/* O ramo desce pelo canto superior direito — a única área realmente vazia
   da composição, já que a nota de margem se ancora lá embaixo, na base da
   frase. Sai um pouco mais para fora que o padrão de .hc-botanico--sup-dir
   para que só a ponta da folhagem entre na tela. */
.hc-secao--alem .hc-alem__botanico {
    top: -12%;
    right: -6%;
    width: clamp(200px, 26vw, 420px);
}


/* ==========================================================================
   03 · QUEM SOMOS                                          .hc-secao--sobre

   Slide de fotografia + texto. A fotografia é PLACA, não ilustração: um
   painel sangrado pela borda ESQUERDA, com ~40% da largura do slide. O
   texto ocupa a coluna da direita, encostado na margem, e o vão entre os
   dois é o espaço negativo da tela.

   POR QUE NÃO É O PAINEL DO SLIDE 07: lá a fotografia encosta no topo e na
   base e ocupa 47% — ela É a tela. Aqui é mais estreita e tem MARGEM
   VERTICAL assimétrica: uma coluna de revista presa à borda da página.
   Duas telas do deck sangram pela esquerda; nenhuma repete a silhueta.

   Consequência bem-vinda dessa margem: com o pé do painel livre, o canto
   inferior esquerdo continua sendo da numeração do slide — esta tela não
   precisa trocar o número de lado, como o 07 precisou.

   Nada aqui redefine componente global: tudo escopado em .hc-secao--sobre.
   ========================================================================== */

/* Escala local das frentes. Vive num token porque o marcador de filete
   precisa ter EXATAMENTE a altura da linha do texto ao lado, para cair no
   meio da primeira linha e não no topo da caixa. Um valor só, dois usos. */
.hc-secao--sobre {
    --sobre-frente: clamp(1rem, 0.94rem + 0.34vw, 1.25rem);
}

/* --------------------------------------------------------------------------
   A PLACA
   -------------------------------------------------------------------------- */

.hc-secao--sobre .hc-sobre__painel {
    position: absolute;
    left: 0;
    /* Margem vertical ASSIMÉTRICA — é o que diferencia esta tela do slide
       07. Nasce mais perto do topo e termina bem acima da base: levanta a
       composição e libera o rodapé para a fita e para a numeração. */
    top: clamp(40px, 8vh, 96px);
    bottom: clamp(64px, 12vh, 140px);
    z-index: var(--z-decor);
    /* min() e não 40% puro: numa tela de 2560px a placa viraria um mural de
       mil pixels e a coluna de texto sobraria solta do outro lado. */
    width: min(40%, 720px);
    overflow: hidden;
    /* Cantos esquerdos RETOS: a placa é cortada pela borda do slide, não
       flutua. O arco fica só do lado interno e é mais fundo que o do slide
       07 (26% contra 16% de raio vertical), para que as duas telas não
       tenham o mesmo contorno. */
    border-radius: 0 34% 34% 0 / 0 26% 26% 0;
}

/* A numeração sobe o suficiente para escapar da fita da base (ver
   components.css) e, com isso, acaba caindo dentro da placa — que termina
   a 108px do rodapé. Sobre o creme da fotografia o dourado ficaria
   ilegível. Neste slide ela troca de lado: à direita, sob a coluna de
   texto, onde o fundo é o creme do próprio slide. */
.hc-secao--sobre .hc-secao__num {
    left: auto;
    right: var(--esp-secao-x);
}

/* O fio dourado acompanha a curva — mesma função do filete que contorna a
   fita no cartão. Sem borda à esquerda: ali não há aresta, há corte. */
.hc-secao--sobre .hc-sobre__painel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid var(--t-dourado-orn);
    border-left: 0;
    opacity: 0.45;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   A COLUNA DE TEXTO
   -------------------------------------------------------------------------- */

.hc-secao--sobre .hc-sobre__interna {
    display: flex;
    /* O texto é empurrado para a margem direita. Não há grade: a placa é
       absoluta e o vão entre os dois nasce da diferença de larguras. */
    justify-content: flex-end;
    max-width: calc(var(--largura-larga) + var(--esp-secao-x) * 2);
    /* A fita da base chega a 176px. Sem este respiro a última linha das
       frentes encostaria nos fios dourados que atravessam o rodapé. */
    padding-bottom: calc(var(--esp-secao-y) + var(--esp-lg));
}

.hc-secao--sobre .hc-sobre__texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 48% da faixa útil, com teto de medida: a 1600px dá ~676px, o texto
       para a ~130px da borda direita e sobram ~190px de vão entre a placa
       e a primeira letra. Esse vão é composição, não sobra. */
    width: min(48%, 62ch);
}

/* O rótulo é sobretítulo: cola no h2, mais perto que o esp-md padrão. */
.hc-secao--sobre .hc-sobre__titulo {
    margin-top: var(--esp-sm);
    /* Escala PRÓPRIA, entre --fs-h2 e --fs-h1. Motivo concreto: o topo da
       escala (56px) somado a três linhas comeria o orçamento de altura do
       slide; 54,4px mantém o título dominante e cabe em 900px de viewport.
       15ch força a quebra editorial em três linhas e deixa "presença."
       sozinha na terceira — que é onde o itálico dourado precisa cair. */
    font-size: clamp(2rem, 1.2rem + 2.7vw, 3.4rem);
    max-width: 15ch;
}

/* Um degrau acima do corpo padrão: um deck é lido a dois metros, não a
   cinquenta centímetros. A medida vem da coluna, não do ch. */
.hc-secao--sobre .hc-sobre__resumo {
    margin-top: clamp(var(--esp-md), 3.5vh, var(--esp-lg));
    font-size: var(--sobre-frente);
    line-height: 1.6;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   AS TRÊS FRENTES
   Fio de abertura no lugar de caixa: nenhum card nesta tela. O filete usa
   --t-fio (dourado translúcido) e não --t-borda, para rimar com o marcador.
   Os espaços em vh encolhem junto com a tela e seguram o slide em uma
   viewport só sem precisar de outra escala.
   -------------------------------------------------------------------------- */

.hc-secao--sobre .hc-sobre__frentes {
    width: 100%;
    margin-top: clamp(var(--esp-md), 4vh, var(--esp-xl));
    padding-top: clamp(var(--esp-sm), 3vh, var(--esp-lg));
    border-top: 1px solid var(--t-fio);
}

/* Linha tipográfica: marcador na primeira coluna, nome na segunda.
   minmax(0, 1fr) protege contra estouro se o nome crescer. */
.hc-secao--sobre .hc-sobre__frentes > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--esp-md);
}

.hc-secao--sobre .hc-sobre__frentes > li + li {
    margin-top: clamp(10px, 1.6vh, 16px);
}

/* MARCADOR — filete dourado curto no lugar de bullet, ícone ou caractere.
   O <span> só reserva a caixa; o traço é desenhado no ::before. A altura
   copia a linha do texto ao lado, de modo que o filete caia no meio da
   PRIMEIRA linha do item e não no topo da caixa. */
.hc-secao--sobre .hc-sobre__marca {
    position: relative;
    display: block;
    width: clamp(20px, 2.4vw, 34px);
    height: calc(var(--sobre-frente) * 1.6);
}

.hc-secao--sobre .hc-sobre__marca::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--t-dourado-orn);
    opacity: 0.85;
}

/* Nome da frente: texto de leitura, não rótulo. Cor principal e peso médio
   para se destacar do parágrafo, que corre em --t-apoio. Nada de caixa alta
   nem de dourado como cor de texto no tema claro (2,19:1). */
.hc-secao--sobre .hc-sobre__frente {
    font-size: var(--sobre-frente);
    font-weight: var(--peso-medio);
    line-height: 1.6;
    color: var(--t-texto);
}

/* --------------------------------------------------------------------------
   DECORAÇÃO
   -------------------------------------------------------------------------- */

/* O halo não fica mais atrás da fotografia: ele agora AQUECE O VÃO entre a
   placa e o texto, que é a maior área vazia da tela. Sem ele o espaço
   negativo lê como buraco; com ele, como respiro. */
.hc-secao--sobre .hc-sobre__halo {
    top: -22%;
    left: 30%;
}

/* --------------------------------------------------------------------------
   TELAS BAIXAS — o slide continua sendo UM slide

   Um notebook de 1366×768 tem ~130px a menos de altura útil que a viewport
   de referência (1600×900). Em vez de deixar o conteúdo estourar a tela, a
   escala local encolhe: título um degrau abaixo, placa mais próxima das
   bordas e menos respiro no rodapé. Nada é cortado.

   O recorte por LARGURA (min-width: 821px) mantém isto fora do modo
   compacto de responsive.css, onde a leitura já é contínua.
   -------------------------------------------------------------------------- */

@media (min-width: 821px) and (max-height: 880px) {

    .hc-secao--sobre .hc-sobre__painel {
        top: clamp(28px, 6vh, 64px);
        bottom: clamp(44px, 9vh, 96px);
    }

    .hc-secao--sobre .hc-sobre__titulo {
        font-size: clamp(1.9rem, 1.1rem + 2.4vw, 2.9rem);
    }

    /* A fita também encolhe em telas menores: 16px de folga bastam para o
       texto não encostar nos fios, e devolvem altura útil ao conteúdo. */
    .hc-secao--sobre .hc-sobre__interna {
        padding-bottom: calc(var(--esp-secao-y) + var(--esp-sm));
    }
}


/* ==========================================================================
   04 · NOSSOS SERVIÇOS                                .hc-secao--servicos

   O SLIDE DE PORTFÓLIO. Seis serviços, uma tela, uma mensagem.

   COMPOSIÇÃO: cartão de título em cima (rótulo, manuscrito ladeado por
   filetes e UMA linha de apoio) e, embaixo, os seis serviços em grade
   editorial 3x2 — 01 02 03 / 04 05 06 — cada um aberto por uma numeração
   serifada de 64px. O número É o elemento visual da tela.

   SÓ TIPOGRAFIA. Os vizinhos imediatos (03 e 05) são os dois slides de
   fotografia em placa lateral. Aqui não há imagem, não há card e não há
   ícone: nenhum mecanismo se repete entre telas vizinhas.

   O QUE SAIU: os seis medalhões (seis discos idênticos são exatamente
   "várias caixas iguais" — o número assumiu a função de marcador, e o
   ícone não voltou nem solto, para não haver dois marcadores no mesmo
   item); as descrições longas (viraram uma frase curta de uma linha); e a
   caixa da nota de profissionais, que virou linha de rodapé com filete.
   O medalhão continua vivo nos slides 08 e 13.
   ========================================================================== */

/* Padding vertical PRÓPRIO, e assimétrico de propósito.
   A fita da base entra pelo canto inferior e, do lado DIREITO, sua massa
   — pintada com o verde do slide 05 — sobe a cerca de 75% da altura da
   própria fita (130px de 176px, a 1600px de largura). A linha de rodapé
   deste slide tem de passar acima disso. Como a seção centraliza o bloco,
   é o pé maior que empurra a composição para cima; o topo devolve em
   compensação o que o pé tomou, e o conjunto continua cabendo em 900px
   (a 1600x900: 88 + 621 + 160 = 869px de caixa). */
.hc-secao--servicos .hc-secao__interna {
    padding-top: clamp(56px, 5.5vw, 88px);
    padding-bottom: clamp(88px, 10vw, 160px);
}

/* --------------------------------------------------------------------------
   Cabeçalho — o cartão de título do slide
   -------------------------------------------------------------------------- */

.hc-secao--servicos .hc-servicos__cabecalho {
    /* .hc-cabecalho limita a 62ch medidos no corpo do texto (~590px):
       estreito demais para o par de filetes do ornamento respirar. Solto,
       cada filete vai ao seu teto de 190px e a faixa do título ganha a
       largura de um selo de abertura. */
    max-width: 100%;
    gap: var(--esp-sm);
    margin-bottom: clamp(var(--esp-lg), 4.4vh, var(--esp-2xl));
}

/* O manuscrito é citação direta do verso do cartão e um dos três únicos
   usos de script na apresentação inteira — fica.
   Escala PRÓPRIA, abaixo do topo de --fs-script (72px): esta tela empilha
   título, apoio, duas fileiras de número grande e o rodapé; em 72px o
   manuscrito sozinho comia 100px da altura útil. */
.hc-secao--servicos .hc-servicos__titulo {
    font-size: clamp(1.85rem, 1.00rem + 2.80vw, 3.50rem);   /*  30 → 56  */
    line-height: 1.15;
    /* O Dancing Script tem descendentes longos: sem o respiro o "ç"
       encosta na linha de apoio. */
    padding-bottom: 0.1em;
}

/* Uma linha só. Nos 46ch de .hc-lead a frase quebrava em duas e o
   cabeçalho ganhava 37px de altura sem ganhar nada de leitura. */
.hc-secao--servicos .hc-servicos__apoio {
    max-width: 62ch;
}

/* --------------------------------------------------------------------------
   A grade — 01 02 03 em cima, 04 05 06 embaixo
   -------------------------------------------------------------------------- */

/* SEM column-gap, de propósito: é o encontro das três bordas de topo que
   forma UMA régua contínua atravessando a tela. Com vão entre colunas a
   mesma régua viraria seis traços soltos — ou seja, seis caixas. O
   respiro lateral vem do padding do item, não da grade. */
.hc-secao--servicos .hc-servicos__grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0;
    row-gap: clamp(var(--esp-md), 3vh, var(--esp-xl));
}

.hc-secao--servicos .hc-servicos__item {
    padding-top: clamp(var(--esp-sm), 1.8vh, var(--esp-md));
    /* O vão entre colunas. O último item da fileira também recebe: a
       régua vai até a margem, o texto não. */
    padding-right: clamp(var(--esp-md), 3vw, var(--esp-xl));
    border-top: 1px solid var(--t-borda);
}

/* O NÚMERO no topo da escala editorial (--fs-numero vai a 64px). Dourado:
   --t-dourado resolve para o dourado-profundo no tema claro (4,5:1 sobre
   o creme-alt) — nunca o --dourado do cartão, que aqui renderia 2,19:1. */
.hc-secao--servicos .hc-servicos__num {
    display: block;
    margin-bottom: var(--esp-2xs);
    font-family: var(--fonte-serif);
    font-size: var(--fs-numero);
    font-weight: var(--peso-normal);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--t-dourado);
    font-variant-numeric: tabular-nums;
}

/* Nome: o componente .hc-item__titulo, com um teto de escala PRÓPRIO.
   Motivo concreto: na coluna de ~378px, "Cuidado Integral e Humanizado"
   em 26px quebra em duas linhas e as duas fileiras crescem 62px — o
   bastante para estourar os 900px. Em 24px os seis nomes cabem em uma
   linha, e a hierarquia contra o número de 64px fica ainda mais clara. */
.hc-secao--servicos .hc-servicos__nome {
    font-size: clamp(1.15rem, 0.95rem + 0.50vw, 1.50rem);   /*  18 → 24  */
    text-wrap: balance;
}

/* O complemento oficial ("Home Care", "Recém-nascido") entra na FRENTE da
   frase curta, em caixa alta, separado por ponto médio. Não vira segunda
   linha nem etiqueta: assim os seis blocos têm a mesma altura e a grade
   continua alinhada. */
.hc-secao--servicos .hc-servicos__compl {
    font-size: var(--fs-rotulo);
    font-weight: var(--peso-semi);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--t-dourado);
}

.hc-secao--servicos .hc-servicos__compl::after {
    content: "·";
    margin-inline: 0.5em 0.4em;
    letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Rodapé do slide — a nota de profissionais, sem caixa
   -------------------------------------------------------------------------- */

/* Informação oficial do cartão: fica. Mas perdeu a borda e o fundo de
   .hc-nota — um filete em cima já separa o bloco.
   A largura para em 78%: o canto inferior direito é por onde a massa da
   fita sobe mais alto, e nem o filete nem o texto podem cair sobre o
   verde do slide seguinte. Assimetria com motivo. */
.hc-secao--servicos .hc-servicos__pe {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--esp-2xs) var(--esp-md);
    max-width: 78%;
    margin-top: clamp(var(--esp-lg), 4vh, var(--esp-2xl));
    padding-top: var(--esp-md);
    border-top: 1px solid var(--t-borda);
}

.hc-secao--servicos .hc-servicos__pe-rotulo {
    flex: 0 0 auto;
    font-size: var(--fs-rotulo);
    font-weight: var(--peso-semi);
    letter-spacing: var(--ls-rotulo);
    text-transform: uppercase;
    color: var(--t-dourado);
}

.hc-secao--servicos .hc-servicos__pe-lista {
    font-size: var(--fs-corpo-sm);
    line-height: 1.6;
    color: var(--t-apoio);
}

/* --------------------------------------------------------------------------
   Decoração
   -------------------------------------------------------------------------- */

/* A folhagem passa por trás da linha de rodapé, no canto de onde a fita
   nasce. Mais alta e menor que o padrão de .hc-botanico--inf-esq: ali
   embaixo ela divide o espaço com a numeração do slide. */
.hc-secao--servicos .hc-servicos__botanico {
    bottom: 1%;
    left: -7%;
    width: clamp(190px, 20vw, 330px);
}


/* ==========================================================================
   05 · ASSISTÊNCIA DOMICILIAR (HOME CARE)

   O serviço que a empresa mais quer vender ocupa uma tela inteira: uma
   mensagem só, um elemento dominante, e o resto é ar.

   POR QUE NÃO É MAIS UM PAINEL LATERAL
   Os slides 03 e 07 já sangram fotografia pela lateral, de topo a base.
   Repetir o mecanismo aqui daria a três telas do deck a mesma silhueta.
   Nesta a fotografia entra pelo ALTO — presa às bordas SUPERIOR e DIREITA —
   e é o canto inferior esquerdo dela que se abre num ARCO largo, varrendo
   em direção ao título. A curva do cartão vira CORTE, não moldura.
   O arco também trabalha: devolve o espaço negativo à coluna de texto e
   esvazia o canto inferior direito, onde não há nada além de verde.

   A BASE tem mecanismo próprio: uma FAIXA com os quatro termos atravessando
   a largura inteira sobre um único fio dourado. Saíram o 2x2, os ícones e
   as frases de apoio — na altura de uma tela eles não cabem, e os nomes
   bastam.
   ========================================================================== */

/* A fita da base sobe até cerca de 130px do lado direito e é pintada com a
   cor da seção SEGUINTE (creme). Sem este respiro extra a faixa de termos
   cairia sobre o creme e o texto claro sumiria. Mesmo remédio do slide 02. */
.hc-secao--homecare .hc-secao__interna {
    padding-bottom: calc(var(--esp-secao-y) + var(--esp-2xl));
}

/* --------------------------------------------------------------------------
   O ARCO — a fotografia
   -------------------------------------------------------------------------- */

.hc-secao--homecare .hc-homecare__arco {
    position: absolute;
    top: 0;
    right: 0;
    z-index: var(--z-decor);
    /* 42% e não 46% (a largura do painel da capa): aqui a imagem não é a
       metade da tela, é a massa que pende do alto. O teto em px evita que
       em projeção ela engula o vão até o texto. */
    width: 42%;
    max-width: 780px;
    /* Altura em vh, não em porcentagem: a fotografia precisa terminar ACIMA
       da faixa de termos em QUALQUER altura de tela. Com 62vh sobram cerca
       de 70px de verde entre o corte da imagem e o fio da faixa a 900px. */
    height: clamp(300px, 62vh, 640px);
    overflow: hidden;
    /* O CORTE. Só o canto inferior esquerdo tem raio, e ele é enorme:
       58% da largura por 40% da altura é um quarto de elipse, não um canto
       arredondado. Os outros três cantos ficam retos porque encostam nas
       bordas do slide — um raio ali abriria fresta contra a moldura. */
    border-radius: 0 0 0 58% / 0 0 0 40%;
}

/* O fio dourado existe só nas bordas INTERNAS. Em cima e à direita a imagem
   sangra: um filete ali viraria contorno de caixa. Como as duas bordas
   removidas se encontram num canto de raio zero, e as duas mantidas
   desenham juntas o arco, não há emenda meio-desenhada. */
.hc-secao--homecare .hc-homecare__arco::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--t-dourado-orn);
    border-top: 0;
    border-right: 0;
    border-radius: inherit;
    opacity: 0.45;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   A COLUNA DE TEXTO
   -------------------------------------------------------------------------- */

.hc-secao--homecare .hc-homecare__texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* A fotografia começa em 58% da largura do slide. O teto de 52% da
       coluna de conteúdo garante o vão de ar entre texto e imagem em
       qualquer largura; o teto em rem impede a linha de esticar em
       projeção, onde 52% passariam de 800px. */
    max-width: min(52%, 38rem);
}

/* Escala PRÓPRIA, um degrau abaixo do topo de --fs-h1 (80px). Motivo
   concreto: no topo da escala a frase em três linhas somava 273px e, com
   rótulo, lead e faixa, o slide passava de 900px. A medida curta é
   deliberada — a quebra em três linhas é o desenho da coluna, e deixa
   "casa" sozinha na última, que é onde o itálico dourado precisa cair. */
.hc-secao--homecare .hc-homecare__titulo {
    margin-top: var(--esp-md);
    max-width: 13ch;
    font-size: clamp(2.05rem, 1.15rem + 3.0vw, 4.5rem);
}

.hc-secao--homecare .hc-homecare__lead {
    margin-top: clamp(var(--esp-md), 2.6vh, var(--esp-lg));
    /* A coluna já limita a linha em telas largas; o teto em ch é a rede
       para as intermediárias, onde 52% ainda dariam uma linha longa. */
    max-width: 44ch;
}

/* --------------------------------------------------------------------------
   A FAIXA DE TERMOS — atravessa a largura inteira do conteúdo
   -------------------------------------------------------------------------- */

.hc-secao--homecare .hc-homecare__pontos {
    display: flex;
    /* Rede de segurança: em nenhuma largura prevista os quatro termos
       quebram, mas se quebrarem descem em vez de estourar na horizontal. */
    flex-wrap: wrap;
    align-items: baseline;
    width: 100%;
    margin-top: clamp(var(--esp-lg), 5vh, var(--esp-3xl));
    padding-top: clamp(var(--esp-md), 2.4vh, var(--esp-lg));
    /* Um fio dourado só. É ele que ancora a base da composição e substitui
       as quatro caixas da versão anterior. */
    border-top: 1px solid var(--t-fio);
}

/* O respiro entre termos é PADDING do próprio item, não gap: assim o tique
   vertical do ::before cai exatamente no meio do vão, e não colado a um
   dos lados. */
.hc-secao--homecare .hc-homecare__ponto {
    position: relative;
    padding-inline: clamp(var(--esp-md), 2vw, var(--esp-xl));
    font-size: var(--fs-corpo);
    font-weight: var(--peso-medio);
    line-height: 1.35;
    color: var(--t-texto);
}

.hc-secao--homecare .hc-homecare__ponto:first-child { padding-left: 0; }
.hc-secao--homecare .hc-homecare__ponto:last-child  { padding-right: 0; }

/* Tique VERTICAL com a altura de uma linha — separador tipográfico, não
   divisor de coluna. É o que o diferencia do filete do slide 06, que corta
   a faixa inteira para separar blocos: aqui ele separa palavras. */
.hc-secao--homecare .hc-homecare__ponto + .hc-homecare__ponto::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.22em;
    width: 1px;
    height: 1em;
    background-color: var(--t-dourado-orn);
    opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Decoração
   -------------------------------------------------------------------------- */

/* O halo nasce no vão entre o título e o arco: é o que impede que a área
   esvaziada pelo corte da fotografia leia como buraco. Fica na camada
   decorativa, portanto passa por trás da imagem. */
.hc-secao--homecare .hc-homecare__halo {
    top: -12%;
    right: 18%;
}


/* ==========================================================================
   06 · CUIDADO PERSONALIZADO

   O MÉTODO, em três tempos. Slide de TIPOGRAFIA PURA: nenhuma fotografia,
   nenhum medalhão, nenhuma caixa.

   RITMO — é a razão de ser da composição: a 05 abre com foto em coluna
   sobre verde e a 07 sangra um painel inteiro pela esquerda. Entre as
   duas, esta tela precisa ser o oposto — creme, ar e letra.

   Duas colunas assimétricas (.hc-grid--split-inv, 5fr/7fr):
     ESQUERDA  o argumento, em escala de capa. É o elemento que domina.
     DIREITA   os três pilares empilhados como capítulos de um sumário —
               número, nome dourado em caixa alta e um filete que corre
               até a margem.

   O filete VERTICAL que antes dividia os pilares virou a RÉGUA HORIZONTAL
   do capítulo: separa sem fechar caixa, e é ela que dá à pilha a leitura
   de índice de deck em vez de três cards.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Coluna esquerda — o argumento
   -------------------------------------------------------------------------- */

/* Um degrau abaixo do --esp-md do componente: rótulo, título e lead têm
   que ler como um bloco só, e não como três parágrafos soltos. A medida em
   vh encolhe sozinha em notebook baixo (768–800px de altura). */
.hc-secao--personalizado .hc-personalizado__cabecalho {
    gap: clamp(var(--esp-sm), 1.8vh, var(--esp-md));
}

/* O título usa .hc-h1 mesmo sendo <h2> — é o elemento que domina o slide.
   ESCALA PRÓPRIA, um degrau abaixo do topo do token (80px): aqui a frase
   vive numa coluna de 5fr e, no tamanho cheio, ela sozinha comeria 400px
   dos ~660px de altura útil de uma viewport de 900px.
   A medida curta (13ch) é o que garante a quebra editorial em três ou
   quatro linhas curtas; o text-wrap: balance de .hc-h1 fecha o desenho. */
.hc-secao--personalizado .hc-personalizado__titulo {
    max-width: 13ch;
    font-size: clamp(2.05rem, 1.15rem + 3.15vw, 4rem);
}

/* Mais estreito que os 46ch padrão do .hc-lead: numa coluna de 5fr a
   medida cheia deixaria o apoio quase tão largo quanto o título e as duas
   massas de texto competiriam. */
.hc-secao--personalizado .hc-personalizado__lead {
    max-width: 34ch;
}

/* --------------------------------------------------------------------------
   Coluna direita — os três tempos
   -------------------------------------------------------------------------- */

/* Pilha, não grade: a leitura é vertical e o vão entre os pilares é o
   próprio espaço negativo do slide.
   O respiro é medido em vh, e não em vw: quem aperta esta coluna é a
   ALTURA da tela, não a largura. Em 900px de viewport ele abre para ~38px;
   em 800px encolhe sozinho e os três tempos continuam cabendo. */
.hc-secao--personalizado .hc-personalizado__pilares {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--esp-md), 4.2vh, var(--esp-2xl));
}

/* O componente .hc-pilar é centralizado e acolchoado — era o desenho de
   card da versão anterior. Aqui ele vira bloco de sumário: alinhado à
   esquerda, esticado na largura (o filete do capítulo precisa alcançar a
   margem) e sem padding nenhum. Nada disso vaza do escopo da seção. */
.hc-secao--personalizado .hc-personalizado__pilar {
    align-items: stretch;
    text-align: left;
    padding: 0;
    gap: var(--esp-sm);
}

/* A RÉGUA DO CAPÍTULO: número, nome e filete na mesma linha. */
.hc-secao--personalizado .hc-personalizado__capitulo {
    display: flex;
    align-items: center;
    gap: var(--esp-sm);
    width: 100%;
}

/* Paginação, não título: serifada e discreta, em --t-suave (4,58:1 sobre
   creme). Fica fora do dourado de propósito — o único dourado da linha
   precisa ser o nome do pilar, ou os dois disputam a mesma função.
   tabular-nums alinha 01/02/03 na vertical sem grid. */
.hc-secao--personalizado .hc-personalizado__ordem {
    flex: 0 0 auto;
    font-family: var(--fonte-serif);
    font-size: clamp(1rem, 0.9rem + 0.45vw, 1.35rem);
    font-weight: var(--peso-normal);
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--t-suave);
    font-variant-numeric: tabular-nums;
}

/* O nome do pilar é o "capítulo": caixa alta dourada, sem quebra. Em
   .hc-secao--claro o token --t-dourado resolve para o dourado profundo
   (4,86:1) — o #C9A86A jamais carregaria texto aqui. */
.hc-secao--personalizado .hc-personalizado__pilar .hc-pilar__nome {
    flex: 0 0 auto;
    line-height: 1;
    white-space: nowrap;
}

/* O .hc-filete do catálogo tem largura fixa (até 92px). Aqui ele deixa de
   ser um traço curto e vira a régua que corre do nome até a margem
   direita da coluna: flex-grow assume a largura, e o min-width: 0 impede
   que o item de flex se recuse a encolher em telas estreitas.
   Opacidade um pouco menor que a do componente — são três réguas na mesma
   tela, e no valor cheio elas pesariam mais que os títulos. */
.hc-secao--personalizado .hc-personalizado__fio {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    opacity: 0.55;
}

/* Um degrau abaixo do teto do componente (36px): a coluna divide a altura
   com três pilares, e cada título precisa caber em UMA linha — duas
   linhas aqui empurrariam o terceiro tempo para fora da viewport. */
.hc-secao--personalizado .hc-pilar__titulo {
    font-size: clamp(1.4rem, 1.05rem + 1.25vw, 2rem);
}

/* 42ch em vez dos 32ch do catálogo: com a coluna de 7fr, a medida curta
   quebrava as frases em quatro linhas e cada pilar virava um parágrafo.
   Em 42ch as três frases fecham em duas linhas. */
.hc-secao--personalizado .hc-pilar__texto {
    margin-top: var(--esp-3xs);
    max-width: 42ch;
}

/* --------------------------------------------------------------------------
   Decoração
   -------------------------------------------------------------------------- */

/* A folhagem entra pelo canto inferior esquerdo, por trás da coluna de
   texto. Sangra para fora de propósito: o clip da própria seção corta.
   Em --suave (0,16) ela nunca disputa leitura com o título. */
.hc-secao--personalizado .hc-personalizado__botanico {
    bottom: -8%;
    left: -7%;
    width: clamp(190px, 21vw, 340px);
}


/* ==========================================================================
   07 · À FRENTE DA HAND CARE (sócias-administradoras)

   Espelho da capa: o painel de fotografia sangra pela ESQUERDA e o texto
   ocupa a direita. A rima entre as duas telas amarra o deck.
   ========================================================================== */

/* Um ponto mais largo que a capa: a fotografia é o argumento da tela,
   e a diferença de largura evita que os dois slides de painel leiam
   como a mesma composição espelhada. */
.hc-socias__painel {
    width: 47%;
}

/* A fotografia real já traz a linguagem da marca no fundo — curvas
   douradas, folhagem em linha fina, verde e creme. Entra sem filtro:
   qualquer tratamento brigaria com o que já está certo na imagem.
   O foco alto (22%) mantém os rostos no terço superior do painel,
   onde o olho chega primeiro. */
.hc-socias__foto {
    --foco: 50% 22%;
}

/* O texto começa depois do painel, com folga. */
.hc-socias__interna {
    display: flex;
    justify-content: flex-end;
    max-width: calc(var(--largura-larga) + var(--esp-secao-x) * 2);
}

.hc-socias__texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(var(--esp-sm), 1.8vw, var(--esp-md));
    width: min(47%, 48ch);
}

.hc-socias__titulo {
    max-width: 12ch;
    margin-top: var(--esp-2xs);
}

.hc-socias__lead {
    max-width: 32ch;
}

/* A frase é o argumento da tela: sobe de escala e ganha o itálico
   serifado da assinatura do cartão. */
.hc-socias__citacao {
    margin-top: var(--esp-2xs);
    font-size: clamp(1.35rem, 1.0rem + 1.6vw, 2.25rem);
    line-height: 1.3;
    max-width: 20ch;
    color: var(--t-texto);
}

/* Crédito institucional: os nomes (informados pelo usuário em 03/09/2026,
   vindos de config.php) e a função. Os nomes aparecem JUNTOS — não sabemos
   quem é quem na fotografia, então nada aqui pode sugerir "à esquerda /
   à direita". Formação, titulação e registro seguem não informados e fora
   da tela. */
.hc-socias__credito {
    display: flex;
    align-items: center;
    gap: var(--esp-sm);
    margin-top: clamp(var(--esp-md), 3vh, var(--esp-xl));
    padding-top: var(--esp-md);
    border-top: 1px solid var(--t-borda);
    width: 100%;
}

.hc-socias__selo {
    height: 34px;
    width: auto;
    flex: 0 0 auto;
}

.hc-socias__assinaturas {
    display: flex;
    flex-direction: column;
    gap: var(--esp-3xs);
    min-width: 0;
}

/* Os nomes assinam a tela: serifada, na cor principal, um degrau acima do
   corpo. É a informação nova — a função vira apoio embaixo. */
.hc-socias__nomes {
    font-family: var(--fonte-serif);
    font-size: clamp(1.1rem, 1rem + 0.55vw, 1.5rem);
    font-weight: var(--peso-semi);
    line-height: 1.25;
    color: var(--t-texto);
}

.hc-socias__funcao {
    font-size: var(--fs-rotulo);
    font-weight: var(--peso-medio);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--t-apoio);
}

.hc-socias__halo {
    top: 8%;
    right: -14%;
}

/* A numeração vive no canto inferior ESQUERDO em todo o deck. Aqui o
   canto esquerdo é fotografia: sobre a área clara da imagem o dourado
   ficaria ilegível. Neste slide — e só neste — ela troca de lado. */
.hc-secao--socias .hc-secao__num {
    left: auto;
    right: var(--esp-secao-x);
}


/* ==========================================================================
   08 · EQUIPE MULTIDISCIPLINAR

   Slide TIPOGRÁFICO. A tela era cinco retratos iguais lado a lado — e os
   cinco vazios, porque as fotografias dos profissionais não existem.

   Agora a mensagem ocupa a coluna larga da esquerda em serifada grande
   (é o único elemento grande da tela e domina sozinho) e as cinco
   formações descem numa coluna estreita à direita, penduradas em UM
   único fio vertical. Um fio para a lista inteira, e não um filete por
   item: o slide 09 já é um índice de linhas separadas por filete, e duas
   telas vizinhas não repetem o mesmo gesto. Nenhum item é card.

   A fotografia continua reservada, numa LÂMINA vertical sangrada à
   direita. O slide 07 usa meia tela de imagem à esquerda, no escuro;
   aqui é uma margem de imagem estreita, do lado oposto, no creme.
   ========================================================================== */

.hc-secao--equipe {
    /* Largura da lâmina, em porcentagem da TELA. Mora num token porque a
       coluna de texto reserva exatamente esta medida como padding: se a
       lâmina engordar, o texto recua junto e nada se sobrepõe. */
    --equipe-lamina: 19%;
    /* Ar entre a última letra da composição e o arco da fotografia */
    --equipe-folga: clamp(var(--esp-xl), 4.5vw, var(--esp-3xl));
}

/* --- A lâmina de fotografia -----------------------------------------------
   Posição, sangria e fio dourado vêm de .hc-painel--dir; aqui só se muda a
   PROPORÇÃO. É a proporção — 19% contra os 47% do slide 07 — mais o lado
   oposto e o tema claro que impedem as duas telas de lerem como a mesma
   composição espelhada.

   Sem min-width de propósito: a reserva de espaço do texto é a mesma
   porcentagem, e um mínimo em px descasaria as duas medidas e deixaria o
   texto passar por baixo da imagem em larguras intermediárias.
   -------------------------------------------------------------------------- */

.hc-secao--equipe .hc-equipe__painel {
    width: var(--equipe-lamina);
    /* Arco próprio: numa faixa estreita o raio padrão do componente
       (30%/16%) fecha o canto rápido demais e a lâmina parece uma pétala.
       Menos pinça horizontal, distribuída numa curva mais alta — o efeito
       é um afunilamento longo, não um canto arredondado. */
    border-radius: 34% 0 0 34% / 22% 0 0 22%;
}

/* --- A composição ---------------------------------------------------------
   Duas colunas assimétricas: a mensagem manda (6fr), as formações apoiam
   (5fr). O padding da direita RESERVA a lâmina — é ele que garante, em
   qualquer largura, que o texto nunca corra por baixo da fotografia.
   -------------------------------------------------------------------------- */

.hc-secao--equipe .hc-equipe__interna {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
    column-gap: clamp(var(--esp-xl), 6vw, var(--esp-3xl));
    max-width: calc(var(--largura-larga) + var(--esp-secao-x) * 2);
    padding-right: calc(var(--equipe-lamina) + var(--equipe-folga));
}

/* --- A mensagem ----------------------------------------------------------- */

.hc-secao--equipe .hc-equipe__mensagem {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Respiro medido em vh: numa tela de 900px de altura ele encolhe
       sozinho e a coluna continua cabendo. */
    gap: clamp(var(--esp-sm), 2.4vh, var(--esp-lg));
}

/* Escala PRÓPRIA, acima do teto de --fs-h2 (56px): esta é a única massa
   grande do slide e precisa carregar a tela sem fotografia grande para
   dividir o peso com ela.

   O coeficiente de vw é baixo de propósito. É ele que garante que
   "multidisciplinar" — a palavra mais longa da frase, 16 caracteres —
   caiba em UMA linha da coluna de 6fr desde 1024px até 1920px. Com um
   coeficiente maior, a palavra estoura a coluna em telas de 1024/1280. */
.hc-secao--equipe .hc-equipe__titulo {
    max-width: 100%;
    font-size: clamp(1.85rem, 0.45rem + 3.35vw, 4rem);
    line-height: 1.1;
}

.hc-secao--equipe .hc-equipe__lead {
    max-width: 34ch;
}

/* --- As cinco formações ---------------------------------------------------
   Um ÚNICO fio vertical sustenta a coluna inteira. É a diferença
   deliberada em relação ao slide seguinte, onde cada linha carrega o
   próprio filete: aqui o fio é um só e o que separa os itens é o ar.
   -------------------------------------------------------------------------- */

.hc-secao--equipe .hc-equipe__formacoes {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(var(--esp-sm), 2.4vh, var(--esp-lg));
    padding-left: clamp(var(--esp-md), 2.2vw, var(--esp-xl));
}

.hc-secao--equipe .hc-equipe__formacoes::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    /* Esmaece nas pontas: um fio que encosta nas bordas do bloco lê como
       moldura; esmaecido, lê como margem de página impressa. */
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--t-fio) 9%,
        var(--t-fio) 91%,
        transparent 100%
    );
}

/* A formação é o que se lê primeiro na coluna. Um degrau abaixo do
   --fs-h3 padrão de .hc-perfil__funcao: a coluna é estreita e o nome
   precisa caber em uma linha até em 1024px. */
.hc-secao--equipe .hc-equipe__nome {
    font-size: clamp(1.05rem, 0.78rem + 0.72vw, 1.45rem);
    line-height: 1.22;
}

/* Linha de apoio: dois passos abaixo do nome, e curta. O limite em ch
   mantém o bloco em duas linhas na maioria das larguras — é o que dá
   ritmo regular à coluna sem precisar de caixa nem de filete. */
.hc-secao--equipe .hc-equipe__linha {
    margin-top: var(--esp-2xs);
    max-width: 34ch;
}


/* ==========================================================================
   09 · EM QUAIS MOMENTOS PODEMOS AJUDAR

   SUMÁRIO DE REVISTA. Cabeçalho curto no alto à esquerda — rótulo e
   pergunta, nada mais — e, embaixo, as sete situações em DUAS COLUNAS
   (4 + 3), numeradas e separadas apenas por filete. Sem card, sem ícone,
   sem frase de apoio: a lista É a tela.

   A versão anterior somava ~1496px de altura: sete linhas de largura
   inteira, cada uma com situação e comentário. Aqui a conta fecha numa
   viewport de 1600×900 — cabeçalho ≈ 200px, quatro linhas de índice
   ≈ 350px, e ainda sobra ar antes da fita da base.

   Todo o respiro vertical desta tela é medido em VH, e não em VW: o que
   estoura um slide é a altura da janela, não a largura.

   RITMO — nenhuma vizinha faz isto: a 08 pendura uma coluna estreita num
   fio vertical ao lado de uma mensagem grande; a 10 alinha quatro colunas
   com numerais serifados grandes sobre um fio horizontal. Aqui o que
   organiza a tela é a pauta de filetes de um sumário impresso.
   ========================================================================== */

.hc-secao--momentos {
    /* Escala PRÓPRIA da situação: acima do --fs-h3, abaixo do --fs-h2.
       O teto de 34px não é gosto — é medida: acima disso a situação mais
       longa ("Necessidade de cuidados domiciliares") quebra em duas linhas
       já em telas largas, e a quarta linha do índice sai da viewport. */
    --momento-fs: clamp(1.20rem, 0.80rem + 1.50vw, 2.125rem);

    /* Respiro vertical de cada linha do índice. Em VH: num notebook de
       768px de altura ele encolhe sozinho e o slide continua cabendo. */
    --momento-y: clamp(var(--esp-xs), 1.9vh, 30px);
}

/* A fita da base sangra até 176px de altura. Este recuo maior no pé faz
   dois serviços ao mesmo tempo: mantém o último filete do índice acima do
   fio dourado da fita e acima da numeração do slide, que vive no canto
   inferior esquerdo — logo abaixo da primeira coluna da lista. Também em
   VH, pelo mesmo motivo do respiro das linhas. */
.hc-secao--momentos .hc-momentos__interna {
    padding-bottom: clamp(var(--esp-3xl), 16vh, 176px);
}

/* --- Cabeçalho ------------------------------------------------------------
   Duas linhas apenas. O lead saiu: com sete situações logo abaixo, ele
   repetia em prosa o que a lista já diz — e custava ~90px de altura.
   -------------------------------------------------------------------------- */

.hc-secao--momentos .hc-momentos__cabecalho {
    /* Um degrau abaixo do --esp-md padrão do .hc-cabecalho: com só dois
       elementos, o rótulo precisa ficar colado no título, e não flutuando. */
    gap: var(--esp-sm);
    margin-bottom: clamp(var(--esp-lg), 4.8vh, var(--esp-3xl));
}

/* 17ch obriga o título a DUAS linhas em qualquer largura de desktop.
   Em três linhas o cabeçalho comeria a quarta linha do índice; em uma só
   ele atravessaria a tela e desmontaria a coluna do lado esquerdo. */
.hc-secao--momentos .hc-momentos__titulo {
    max-width: 17ch;
    font-size: clamp(1.90rem, 1.15rem + 2.55vw, 3.50rem);
}

/* A folhagem ocupa a metade direita do alto — a metade que o cabeçalho
   deixou vazia de propósito. */
.hc-secao--momentos .hc-momentos__botanico {
    top: -6%;
    right: -6%;
    width: clamp(190px, 22vw, 380px);
}

/* --- O índice -------------------------------------------------------------
   Quatro linhas explícitas com fluxo por COLUNA: os itens 01-04 descem a
   primeira coluna e os 05-07 a segunda, sobrando uma célula vazia no pé da
   direita — é essa assimetria que impede o bloco de virar tabela.

   As linhas pertencem ao GRID, e não a cada coluna: com isso os filetes
   das duas colunas nascem sempre na mesma altura, mesmo quando uma
   situação quebra em duas linhas e cresce a linha inteira.
   -------------------------------------------------------------------------- */

.hc-secao--momentos .hc-momentos__indice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    column-gap: clamp(var(--esp-lg), 5vw, var(--esp-2xl));
}

.hc-secao--momentos .hc-momento {
    display: grid;
    /* minmax(0, 1fr) na coluna do texto: sem isso uma palavra longa
       empurraria a coluna e estouraria a seção na horizontal. */
    grid-template-columns: auto minmax(0, 1fr);
    /* Pela BASE, não pelo topo: o número, muito menor, assenta na mesma
       linha de base da serifada ao lado — é assim que um sumário impresso
       ancora a numeração. */
    align-items: baseline;
    column-gap: clamp(var(--esp-sm), 1.6vw, var(--esp-md));
    padding-block: var(--momento-y);
    border-top: 1px solid var(--t-borda);
    transition: border-color var(--trans-normal) var(--ease-suave);
}

/* Fecha o pé de CADA coluna: o 4º item termina a esquerda, o 7º a direita.
   Não existe :last-child que resolva as duas — em fluxo por coluna, o
   último item do DOM fecha só a coluna da direita. */
.hc-secao--momentos .hc-momento:nth-child(4),
.hc-secao--momentos .hc-momento:nth-child(7) {
    border-bottom: 1px solid var(--t-borda);
}

/* Numeração discreta, em sans: os numerais serifados grandes são o gesto
   da 10 (jornada), e duas telas próximas não repetem o mesmo recurso.
   Aqui o número é marcação de índice, não dado — por isso pequeno,
   tabular e um passo abaixo da opacidade cheia. */
.hc-secao--momentos .hc-momento__num {
    font-family: var(--fonte-sans);
    font-size: var(--fs-rotulo);
    font-weight: var(--peso-semi);
    line-height: 1;
    letter-spacing: 0.12em;
    color: var(--t-dourado);
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
    transition: opacity var(--trans-normal) var(--ease-suave);
}

.hc-secao--momentos .hc-momento__situacao {
    display: block;
    font-family: var(--fonte-serif);
    font-size: var(--momento-fs);
    font-weight: var(--peso-medio);
    line-height: 1.22;
    letter-spacing: var(--ls-titulo);
    color: var(--t-texto);
    /* Quando uma situação quebra, as duas linhas saem parelhas em vez de
       deixar uma palavra órfã embaixo. */
    text-wrap: balance;
}

/* --- Microinteração -------------------------------------------------------
   Só luz: filete e número. Nada se desloca — num sumário, qualquer
   deslocamento tira o olho da linha que ele estava lendo. Restrita a
   (hover: hover) para não ficar presa depois do toque no celular.
   -------------------------------------------------------------------------- */

@media (hover: hover) {

    .hc-secao--momentos .hc-momento:hover {
        border-color: var(--t-borda-forte);
    }

    /* O filete de baixo de uma linha é o filete de cima da linha seguinte —
       menos na virada de coluna: o item 05 abre a coluna da direita, lá em
       cima, e acender o filete dele ao passar pelo 04 iluminaria a linha
       errada, do outro lado da tela. */
    .hc-secao--momentos .hc-momento:hover + .hc-momento:not(:nth-child(5)) {
        border-top-color: var(--t-borda-forte);
    }

    .hc-secao--momentos .hc-momento:hover .hc-momento__num {
        opacity: 1;
    }
}


/* ==========================================================================
   10 · NOSSO JEITO DE CUIDAR

   O slide de MÉTODO. Já era o mais "apresentação" do deck: aqui a evolução
   é de PROPORÇÃO e RITMO, não de estrutura.

   Composição em duas faixas separadas por muito ar:

     1. CABEÇALHO ASSIMÉTRICO — rótulo e título grandes à esquerda (7fr), a
        linha de apoio recuada à direita (5fr) e assentada pela BASE do
        título. O canto superior direito fica vazio de propósito: só o halo.

     2. OS QUATRO PASSOS ocupando a LARGURA INTEIRA, sobre um único fio que
        SANGRA para fora da coluna de texto e cresce da esquerda para a
        direita quando o slide entra.

   O que dá a leitura de deck é a ESCALA DO NÚMERO: 76px, um degrau acima do
   topo de --fs-numero. Ele é o elemento dominante da tela — e é por isso que
   o título do passo desce um degrau ABAIXO de --fs-h3.

   ORÇAMENTO DE ALTURA a 1600 × 900 (viewport útil ≈ 596px depois dos
   120px de topo e dos 184px de pé):
     cabeçalho 159 + ar 117 + faixa dos passos 216 = ~492px. Sobra folga.

   NOTA DE GRADE: esta seção NÃO declara grid-template-columns. A grade vem
   de .hc-grid--4, e é isso que deixa as quebras de responsive.css (duas
   colunas no tablet, uma no celular) continuarem valendo — um seletor de
   duas classes aqui venceria a disputa e travaria o slide em quatro colunas.
   ========================================================================== */

.hc-secao--jornada {
    /* Escala PRÓPRIA do número, um degrau acima do topo de --fs-numero
       (64px). Mora num token porque o respiro entre o fio e o número é
       lido em relação a ele. */
    --jornada-num: clamp(2.25rem, 1.30rem + 3.60vw, 4.75rem);   /*  36 → 76 */
}

/* A fita da base sangra até 176px de altura e SOBE no lado direito — que é
   exatamente onde fica a coluna do passo 04. Sem esta folga a última linha
   de apoio encostaria no fio dourado da curva. */
.hc-secao--jornada .hc-secao__interna {
    padding-bottom: clamp(var(--esp-3xl), 11.5vw, 184px);
}

/* --- 1. Cabeçalho assimétrico --------------------------------------------
   Não reusa .hc-cabecalho de propósito: aquele componente é uma coluna
   única de 62ch, e aqui a assimetria É a composição.
   -------------------------------------------------------------------------- */

.hc-secao--jornada .hc-jornada__cabecalho {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(var(--esp-xl), 6vw, var(--esp-3xl));
    row-gap: var(--esp-md);
    /* O apoio assenta pela BASE do título: é o que transforma duas colunas
       soltas numa linha de abertura de revista. */
    align-items: end;
    /* O maior respiro do slide, medido em vh: numa tela de 900px ele dá
       117px; numa de 700px encolhe sozinho e a composição continua cabendo. */
    margin-bottom: clamp(var(--esp-xl), 13vh, 184px);
}

.hc-secao--jornada .hc-jornada__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--esp-sm);
}

/* 14ch força a quebra em DUAS linhas. Uma linha só de 56px numa coluna de
   690px lê como manchete de site; duas linhas fecham um bloco de título. */
.hc-secao--jornada .hc-jornada__titulo {
    max-width: 14ch;
}

.hc-secao--jornada .hc-jornada__lead {
    max-width: 32ch;
    /* Compensação ótica: align-items: end alinha as CAIXAS, e a caixa da
       serifada em 56px tem muito descendente vazio embaixo. Este empurrão
       devolve o alinhamento à linha de base que o olho espera. */
    padding-bottom: 0.4em;
}

/* --- 2. A faixa dos quatro passos ---------------------------------------- */

.hc-secao--jornada .hc-jornada__trilho {
    position: relative;
}

/* UM fio para os quatro passos — sem ele cada .hc-passo desenharia o
   próprio traço e o gap da grade abriria buracos no meio da linha.
   Sangra até a borda do padding da seção: é o gesto que diz "slide" em vez
   de "lista dentro de um container". Puro ornamento — a lista se lê
   inteira sem ele. */
.hc-secao--jornada .hc-jornada__fio {
    position: absolute;
    top: 0;
    left: calc(var(--esp-secao-x) * -1);
    right: calc(var(--esp-secao-x) * -1);
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--t-borda) 6%,
        var(--t-borda) 88%,
        transparent 100%
    );
}

/* O fio CRESCE da esquerda para a direita quando o slide entra: a mesma
   ideia do .hc-tracado das curvas, resolvida em transform porque aqui o
   traço é um elemento e não um path com pathLength.
   Sobrepõe o deslocamento vertical padrão do .hc-anim de propósito — num
   filete de 1px aquele translateY só faria o fio "pular". */
.js .hc-secao--jornada .hc-jornada__fio {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1400ms var(--ease-organica);
}

.js .hc-secao--jornada .hc-jornada__fio.is-visivel {
    transform: scaleX(1);
}

/* Sem JavaScript o fio já nasce inteiro (as regras acima são todas .js).
   Com movimento reduzido ele também precisa nascer inteiro: a regra do
   base.css é de duas classes e perderia para as de cima. */
@media (prefers-reduced-motion: reduce) {

    .js .hc-secao--jornada .hc-jornada__fio {
        transform: none;
    }
}

/* Mais ar entre as colunas do que o padrão do .hc-grid: quatro passos com
   um número deste tamanho precisam de calha, senão voltam a ler como
   quatro cards sem borda. */
.hc-secao--jornada .hc-jornada__passos {
    column-gap: clamp(var(--esp-lg), 4vw, var(--esp-3xl));
    row-gap: clamp(var(--esp-lg), 4vw, var(--esp-2xl));
    align-items: start;
}

/* O filete próprio de cada passo sai de cena: quem desenha a linha é o fio
   contínuo. responsive.css o traz de volta quando a grade quebra. */
.hc-secao--jornada .hc-passo::before {
    display: none;
}

/* O marcador dourado é a única âncora do passo no fio. Sobe de 9px para
   11px para acompanhar o número maior; o topo negativo mantém o disco
   centrado no filete de 1px: -(11 - 1) / 2. */
.hc-secao--jornada .hc-passo::after {
    top: -5px;
    width: 11px;
    height: 11px;
}

.hc-secao--jornada .hc-passo {
    /* Respiro entre o fio e o número, proporcional à largura da tela */
    padding-top: clamp(var(--esp-md), 2.6vw, var(--esp-xl));
    gap: var(--esp-xs);
}

/* O NÚMERO é o elemento dominante da tela — vocabulário de deck, não de
   página. Entrelinha abaixo de 1 porque algarismos não têm descendente e
   a caixa cheia abriria um buraco entre o número e o título. */
.hc-secao--jornada .hc-passo__num {
    font-size: var(--jornada-num);
    line-height: 0.95;
    letter-spacing: -0.02em;
    /* Recuo ótico: a serifada tabular carrega sidebearing à esquerda e sem
       isto o "0" não alinha com o marcador nem com o título abaixo. */
    margin-left: -0.04em;
}

/* Um degrau ABAIXO de --fs-h3. Dois motivos concretos: com o número em
   76px um título em 26px disputaria a leitura; e "Organizamos o suporte",
   a linha mais longa do slide, quebraria em duas linhas na coluna de
   272px — quatro colunas com alturas diferentes desmontam a faixa. */
.hc-secao--jornada .hc-passo__titulo {
    font-size: clamp(1.05rem, 0.95rem + 0.42vw, 1.375rem);   /*  17 → 22 */
    line-height: 1.28;
}

/* Limite de leitura proporcional à coluna: com 30ch os quatro apoios caem
   em duas linhas cada, e a faixa fecha reta embaixo. */
.hc-secao--jornada .hc-passo__texto {
    max-width: 30ch;
    line-height: 1.6;
}

/* O halo ocupa o vazio do alto à direita, onde não entra texto nenhum. */
.hc-jornada__halo {
    top: -6%;
    right: -12%;
}


/* ==========================================================================
   11 · PARA QUEM CUIDA — o slide de RESPIRO

   Duas linhas de texto sobre uma fotografia sangrada. Mais nada.

   A composição é uma DIAGONAL, não uma pilha: a frase ocupa a coluna da
   esquerda, o manuscrito começa na metade da largura, um degrau abaixo. O
   quadrante SUPERIOR DIREITO fica vazio de propósito — é o pedaço da
   fotografia que o slide inteiro existe para mostrar.

   Nenhuma caixa, nenhuma borda, nenhum botão, nenhum filete.
   ========================================================================== */

/* --- Reforço de legibilidade (obrigatório, não é enfeite) ----------------
   JUSTIFICATIVA: --veu-foto é um gradiente VERTICAL. No meio da tela — onde
   .hc-secao--tela centraliza a interna, e portanto onde a frase mora — ele
   está no seu ponto médio, o mais claro dos três. Com um display de ~104px
   encostado à esquerda, uma janela ou uma parede clara na fotografia
   bastaria para comer a frase. Somamos uma segunda camada quase horizontal
   que escurece o terço esquerdo e se dissolve antes da direita.
   Efeito colateral desejado: a direita fica limpa, que é justamente onde a
   fotografia deve respirar. Os 96deg (e não 90) inclinam o véu no mesmo
   sentido da diagonal do texto — a inclinação é pequena de propósito, só o
   bastante para o véu não parecer uma faixa colada.
   Mora na camada decorativa (acima da foto de fundo, abaixo do conteúdo) e
   regula a intensidade por opacidade: nenhuma cor nova, só --verde-noite. */
.hc-secao--familia .hc-familia__veu {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        96deg,
        var(--verde-noite) 0%,
        var(--verde-noite) 26%,
        transparent 82%
    );
    opacity: 0.52;
}

/* --- A composição --------------------------------------------------------
   As duas colunas iguais servem só de RÉGUA: a frase atravessa as duas e o
   manuscrito começa na segunda. É o que produz o degrau da diagonal sem um
   único posicionamento absoluto — e sem risco de estouro, porque cada
   coluna é minmax(0, 1fr).
   Sem column-gap de propósito: assim a segunda coluna começa exatamente na
   metade da largura útil, e o degrau é uma medida legível, não um acaso.
   Largura "larga" porque o degrau precisa de percurso: num container de
   1280px os dois blocos ficariam quase alinhados e a diagonal sumiria. */
.hc-secao--familia .hc-familia__interna {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* O vazio entre a frase e a assinatura é o assunto da tela. Medido em
       vh, não em px fixo: numa tela de 800px de altura ele encolhe sozinho
       e o slide continua cabendo sem que nada precise ser cortado. */
    row-gap: clamp(var(--esp-lg), 8vh, var(--esp-3xl));
    max-width: calc(var(--largura-larga) + var(--esp-secao-x) * 2);
}

/* A frase É a tela.
   1) Escala PRÓPRIA, um degrau abaixo do topo de --fs-display (120px): a
      120px estes 45 caracteres pedem quatro linhas e, somados ao
      manuscrito, estouram os ~660px de altura útil de uma viewport de
      900px. A 104px a frase quebra em TRÊS linhas — que é o desenho de
      coluna que o slide pede, e três linhas curtas leem como uma frase
      dita devagar.
   2) O max-width é duplo por dois motivos diferentes: 64% impede que a
      frase invada a metade direita (onde a fotografia respira) e 15ch
      segura a medida em telas muito largas, onde 64% já daria linhas
      longas demais para um display. min() garante que vale o menor dos
      dois, então nunca há estouro. */
.hc-secao--familia .hc-familia__frase {
    grid-column: 1 / -1;
    max-width: min(64%, 15ch);
    font-size: clamp(2.60rem, 1.05rem + 6.0vw, 6.50rem);
    line-height: 1.04;
}

/* Terceiro e ÚLTIMO manuscrito da apresentação (os outros estão na 03 e na
   04). Começa na segunda coluna: é o degrau da diagonal.
   Corpo próprio, bem abaixo do topo de --fs-script (72px), porque esta
   frase tem 69 caracteres — no tamanho cheio ela viraria um parágrafo
   cursivo de quatro linhas, exatamente o que o uso estrito do script
   proíbe. A 44px, com 32ch de medida, cai em duas linhas curtas e lê como
   assinatura.
   Fica em --t-texto (creme) e não em --t-dourado: acima dele já há 104px de
   creme, e o dourado aqui criaria uma segunda voz numa tela que só tem
   lugar para uma. */
.hc-secao--familia .hc-familia__assinatura {
    grid-column: 2 / -1;
    justify-self: start;
    max-width: min(100%, 32ch);
    font-size: clamp(1.40rem, 0.85rem + 2.3vw, 2.75rem);
    /* Em duas linhas o 1.25 padrão embola os laços do Dancing Script */
    line-height: 1.36;
    color: var(--t-texto);
    /* Descendentes longos: sem o respiro o "g" de "segurança" encosta na
       linha de baixo */
    padding-bottom: 0.12em;
}


/* ==========================================================================
   12 · CHAMADA — FECHAMENTO EMOCIONAL

   O clímax do deck e, de propósito, a tela mais SILENCIOSA dele: uma
   frase, um selo e o slogan. Nada mais.

   O QUE MUDOU
     · o botão de WhatsApp saiu. O slide 13 inteiro é o CTA e vem logo em
       seguida — dois CTAs seguidos são vocabulário de landing page;
     · o filete solto deixou de ser uma linha da pilha e foi absorvido
       pelo selo, agora na horizontal (filete — símbolo — filete);
     · a frase subiu de escala: de 4,25rem para 5,25rem no topo.
   De cinco elementos empilhados restaram três.

   MECANISMO: tipografia pura, centrada. O slide 11 é fotografia sangrada
   e o 13 é a logo oficial completa — nenhum vizinho repete.

   ALTURA (1600 × 900): 240px de padding + frase de 4 linhas a 80px (339px)
   + vazio de 99px + selo de 56px + slogan de 58px = 792px. Sobram 108px.
   ========================================================================== */

/* A pilha central.
   Sem "gap": o ritmo NÃO é uniforme — entre a frase e o selo mora o maior
   vazio da apresentação, e entre o selo e o slogan quase nada. Por isso
   cada elemento declara o próprio margin-top, em vez de um gap único. */
.hc-secao--chamada .hc-chamada__bloco {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}

/* A FRASE é a tela; todo o resto é assinatura.
   1) Escala PRÓPRIA. A 1600px ela renderiza a 80px — tamanho de manchete
      de deck projetado — e para nos 84px do teto, um degrau abaixo do topo
      de --fs-display (120px). No topo cheio a frase preencheria a tela e
      mataria justamente o respiro que é o assunto desta tela.
   2) 20ch (o mesmo de --largura-titulo) dá quatro linhas de ~21 caracteres
      com o text-wrap: balance que .hc-display já traz. É o desenho de
      bloco que a tela pede: uma massa quase quadrada no centro óptico,
      com vazio generoso dos dois lados — a 1600px são 800px de frase
      dentro de 1280px de container. */
.hc-secao--chamada .hc-chamada__frase {
    max-width: 20ch;
    margin-inline: auto;
    font-size: clamp(2.4rem, 1.1rem + 3.9vw, 5.25rem);
}

/* A segunda metade da frase vira itálico serifado, no MESMO tamanho e na
   MESMA cor: a virada do problema para o alívio dita só pela forma da
   letra. O peso cai de 500 para 400 — o itálico "expira".
   Deliberadamente NÃO usa .hc-enfase: o dourado, em duas linhas de 80px,
   deixaria de ser acabamento e viraria o assunto da tela. Nesta seção o
   ouro fica só no ornamento. */
.hc-secao--chamada .hc-chamada__fecho {
    font-style: italic;
    font-weight: var(--peso-normal);
    color: inherit;
}

/* O MAIOR VAZIO da apresentação fica aqui, entre a frase e o selo.
   Medido em vh, não em px nem em vw: a seção ocupa a altura da tela, e num
   notebook de 768px um respiro fixo empurraria o slogan para fora do campo
   de visão logo depois de quatro linhas de display. Em vh ele encolhe
   sozinho na tela baixa e abre na tela alta. */
.hc-secao--chamada .hc-chamada__selo {
    margin-top: clamp(var(--esp-2xl), 11vh, var(--esp-4xl));
}

/* Filete — símbolo — filete: o ponto final do deck, na forma do fim de
   capítulo de um impresso. Reaproveita .hc-ornamento inteiro; aqui só se
   limita a LARGURA, senão os dois filetes atravessariam os 1280px do
   container e virariam uma régua no meio da tela. */
.hc-secao--chamada .hc-chamada__selo--orn {
    width: min(100%, 340px);
    margin-inline: auto;
}

/* Pequeno de propósito: é um selo, não uma marca. Fica abaixo do símbolo
   da capa (56–88px) — lá ele ABRE a apresentação, aqui apenas a assina.
   .hc-simbolo não declara altura de propósito: quem usa é que define. */
.hc-secao--chamada .hc-chamada__simbolo {
    height: clamp(38px, 3.6vw, 56px);
    width: auto;
}

/* Slogan: serifada itálica, como a assinatura do cartão. É a última linha
   da narrativa e sobe um degrau em relação à versão anterior (1,375rem →
   1,625rem). O respiro curto antes dele é o par com o selo: os dois leem
   como um bloco só.
   Cor = var(--t-apoio) (6,17:1 sobre o verde) e não var(--t-dourado)
   (5,29:1). Os dois passam em AA, mas logo acima já existem dois filetes
   dourados; um terceiro elemento em ouro faria o dourado competir com a
   frase. 34ch mantém o slogan em uma linha só. */
.hc-secao--chamada .hc-chamada__slogan {
    margin-top: clamp(var(--esp-sm), 2.2vh, var(--esp-lg));
    max-width: 34ch;
    font-family: var(--fonte-serif);
    font-style: italic;
    font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.625rem);
    line-height: 1.45;
    color: var(--t-apoio);
}

/* Halo: o único volume da tela. Centralizado e deslocado para cima — luz
   por trás do texto, não brilho de canto. O -60% não é arbitrário: com o
   selo e o slogan ocupando a parte de baixo do bloco, o centro óptico da
   frase fica cerca de 100px acima do centro da seção, e é atrás DELA que
   o halo precisa estar. Cresceu junto com a frase; o mínimo continua
   modesto para não criar largura fixa grande no celular. */
.hc-secao--chamada .hc-chamada__halo {
    top: 50%;
    left: 50%;
    width: clamp(340px, 70vw, 1120px);
    transform: translate(-50%, -60%);
}

/* As duas folhagens emolduram a tela como nos cantos do cartão: uma desce
   do canto superior direito, a outra sobe do inferior esquerdo. A classe
   --suave já derruba a opacidade; aqui só se ajusta a moldura. */
.hc-secao--chamada .hc-chamada__botanico {
    width: clamp(200px, 25vw, 400px);
}

/* A segunda é menor e sai mais para fora: moldura assimétrica, como no
   cartão, em vez de duas folhas espelhadas do mesmo tamanho.
   Não repetir transform aqui — .hc-botanico--inf-esq já espelha em
   scaleX(-1) — e só bottom/left são redefinidos, para não sobre-restringir
   o elemento (top + bottom com altura automática esticaria o SVG). */
.hc-secao--chamada .hc-chamada__botanico--2 {
    bottom: -8%;
    left: -7%;
    width: clamp(180px, 21vw, 340px);
}

/* A numeração do slide NÃO troca de lado nesta tela: o conteúdo é todo
   centrado e o canto inferior esquerdo fica vazio. Nada a fazer aqui —
   este comentário existe para que a ausência da regra seja deliberada. */


/* ==========================================================================
   13 · CONTATO

   O ÚLTIMO SLIDE, não um rodapé. Depois dele não há mais nada.

   Composição centrada e simétrica, de propósito: depois de doze telas
   assimétricas, a simetria fecha o deck como um ponto final.

   É a única tela com a LOGO OFICIAL COMPLETA em tamanho grande. Funciona
   porque o tema é claro — o wordmark oficial é verde escuro e sumiria em
   qualquer das seis telas verdes.
   ========================================================================== */

.hc-contato__interna {
    display: flex;
    justify-content: center;
}

.hc-contato__bloco {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 62ch;
}

/* A marca abre o slide e pede o maior respiro da tela: é o ponto final
   da apresentação, não um logotipo de cabeçalho.
   O teto de altura é PRÓPRIO, menor que o de .hc-marca--xl: este slide
   empilha marca, título, apoio, dois botões e o fecho — no tamanho cheio
   a última linha caía para fora dos 900px de viewport. */
.hc-contato__marca {
    margin-bottom: clamp(var(--esp-md), 3vh, var(--esp-xl));
}

.hc-contato__marca .hc-marca__img {
    height: clamp(104px, 12vw, 178px);
}

/* Escala própria pelo mesmo motivo: no topo de --fs-h1 (80px) o título
   sozinho comia 180px de altura. */
.hc-contato__titulo {
    max-width: 15ch;
    font-size: clamp(1.95rem, 1.2rem + 3.1vw, 3.75rem);
}

.hc-contato__lead {
    margin-top: var(--esp-sm);
    max-width: 46ch;
}

/* Dois números lado a lado. minmax(0, 1fr) impede que o número maior
   force a grade a estourar. */
.hc-contato__lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--esp-md);
    width: 100%;
    margin-top: clamp(var(--esp-md), 3.4vh, var(--esp-xl));
}

/* O botão é o único elemento não centrado do bloco: número e rótulo
   alinhados à esquerda leem melhor que centralizados. */
.hc-contato__lista .hc-btn--contato {
    justify-content: flex-start;
}

/* Fecho: local e assinatura na mesma linha, separados por um filete
   vertical fino. É a última linha do deck. */
.hc-contato__fecho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--esp-md);
    margin-top: clamp(var(--esp-md), 3.4vh, var(--esp-xl));
}

.hc-contato__local {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2xs);
    font-size: var(--fs-corpo-sm);
    color: var(--t-apoio);
}

.hc-contato__local .hc-icone { color: var(--t-dourado); }

.hc-contato__slogan {
    position: relative;
    padding-left: var(--esp-md);
    font-family: var(--fonte-serif);
    font-style: italic;
    font-size: clamp(1rem, 0.92rem + 0.42vw, 1.25rem);
    color: var(--t-apoio);
}

.hc-contato__slogan::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 1.1em;
    transform: translateY(-50%);
    background-color: var(--t-dourado-orn);
    opacity: 0.7;
}

/* As duas folhagens emolduram o fechamento, como nos cantos do cartão. */
.hc-contato__botanico {
    bottom: -9%;
    left: -8%;
    width: clamp(190px, 21vw, 340px);
}

.hc-contato__botanico--2 {
    top: -6%;
    right: -8%;
    bottom: auto;
    left: auto;
    width: clamp(170px, 19vw, 300px);
}