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

   REGRA CENTRAL DO PROJETO:
   responsividade aqui é REORGANIZAÇÃO, nunca redução proporcional.

   No desktop a apresentação é editorial: composições assimétricas, duas
   colunas, fotografia grande, muito espaço negativo.
   No celular ela vira outra coisa — uma leitura vertical contínua, com
   hierarquia própria, alvos de toque grandes e uma barra de ação fixa.
   Não é a versão de desktop espremida.

   NOTA DE ESPECIFICIDADE — leia antes de editar:
   secoes.css escopa quase tudo como `.hc-secao--<id> .hc-<id>__x`, ou seja
   duas classes (0,2,0). Um seletor de uma classe só aqui PERDE a disputa,
   mesmo carregando depois. Por isso as regras abaixo repetem o escopo da
   seção sempre que sobrepõem algo de secoes.css. Se uma sobreposição sua
   "não funcionar", conte as classes antes de recorrer a !important.

   Faixas:
     ≥ 1280px   desktop pleno
     1024–1279  desktop compacto (folgas menores)
      821–1023  tablet — grades largas se reorganizam
     ≤  820px   MODO COMPACTO (celular)
   ========================================================================== */


/* ==========================================================================
   1. DESKTOP COMPACTO — 1024 a 1279
   ========================================================================== */

@media (max-width: 1279px) {

    .hc-grid--folga-lg {
        gap: clamp(var(--esp-lg), 4vw, var(--esp-2xl));
    }

    .hc-capa__visual { max-width: 400px; }
    .hc-cartao       { max-width: 420px; }
}


/* ==========================================================================
   2. TABLET — 821 a 1023
   As grades largas quebram, mas a leitura continua em duas colunas.
   ========================================================================== */

@media (max-width: 1023px) {

    /* O trilho lateral disputa espaço com o conteúdo em telas estreitas.
       A navegação continua existindo pela rolagem, pelo teclado e pelos
       botões internos. */
    .hc-trilho { display: none; }

    .hc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Cinco retratos lado a lado dariam ~150px cada: rosto ilegível. */
    .hc-secao--equipe .hc-equipe__lista {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hc-servicos__lista { grid-template-columns: minmax(0, 1fr); }
    .hc-servicos__lista .hc-servico:last-child {
        border-bottom: 1px solid var(--t-borda);
    }

    /* Com uma coluna só, o fio contínuo da jornada perde o sentido:
       cada passo volta a carregar o próprio filete. */
    .hc-jornada__passos::before { display: none; }
    .hc-secao--jornada .hc-passo::before { display: block; }

    .hc-botanico { opacity: 0.16; }
}


/* ==========================================================================
   3. MODO COMPACTO — celular (≤ 820px) e retrato estreito
   ========================================================================== */

@media (max-width: 820px), (orientation: portrait) and (max-width: 900px) {

    /* ----------------------------------------------------------------
       3.1 Tokens de espaço e chrome
       Medidas em px REAIS de tela — não são conversões do desktop.
       ---------------------------------------------------------------- */
    :root {
        --esp-secao-y: clamp(56px, 11vw, 84px);
        --esp-secao-x: 20px;
        --moldura: 14px;
        --altura-selo: 28px;
    }

    /* ----------------------------------------------------------------
       3.2 Altura das seções

       No desktop cada seção é uma tela. No celular isso produziria
       buracos verticais: a altura útil real de um aparelho é muito
       menor que a nominal (as barras do navegador comem ~200px), e o
       conteúdo de várias seções simplesmente não cabe em 630px.

       Solução: a leitura passa a ser contínua. Só as três telas de
       "momento" — abertura, família e chamada final — continuam
       ocupando a tela inteira, porque nelas a imagem e a frase SÃO
       o conteúdo.
       ---------------------------------------------------------------- */
    .hc-secao--tela {
        min-height: 0;
        display: block;
    }

    .hc-secao--capa,
    .hc-secao--familia,
    .hc-secao--chamada {
        display: flex;
        align-items: center;
        min-height: 100svh;
    }

    /* ----------------------------------------------------------------
       3.3 Composição: tudo em coluna única
       ---------------------------------------------------------------- */
    .hc-grid--2,
    .hc-grid--3,
    .hc-grid--4,
    .hc-grid--split,
    .hc-grid--split-inv,
    .hc-grid--split-eq {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(var(--esp-lg), 7vw, var(--esp-2xl));
    }

    /* Largura de leitura: no celular o limite é a tela, não o ch. */
    .hc-lead,
    .hc-texto,
    .hc-display,
    .hc-h1,
    .hc-h2,
    .hc-h3,
    .hc-citacao,
    .hc-cabecalho,
    .hc-item__texto,
    .hc-passo__texto,
    .hc-pilar__texto,
    .hc-perfil__texto {
        max-width: 100%;
    }

    /* ----------------------------------------------------------------
       3.4 Movimento

       A entrada lateral (±24px) foi desenhada para composições de duas
       colunas. Em coluna única ela empurra o bloco para fora da tela
       enquanto a animação corre — o recorte da seção esconde, mas o
       movimento fica torto. No celular todo mundo entra subindo.
       ---------------------------------------------------------------- */
    .js .hc-anim--esq,
    .js .hc-anim--dir {
        transform: translateY(18px);
    }

    /* ----------------------------------------------------------------
       3.5 Painel sangrado

       No desktop o painel é metade da tela, na vertical. Num celular de
       390px não existe "metade lateral": meia largura deixaria oito
       caracteres por linha no texto e uma tira de foto inútil ao lado.

       Vira uma FAIXA HORIZONTAL no topo do slide, com a curva embaixo —
       a mesma forma, girada. A fotografia continua sendo a primeira
       coisa que o olho encontra, que é o papel dela aqui.
       ---------------------------------------------------------------- */
    .hc-painel {
        position: relative;
        inset: auto;
        width: 100%;
        height: 38svh;
        min-height: 220px;
        flex: 0 0 auto;
        border-radius: 0 0 var(--raio-xl) var(--raio-xl);
    }

    .hc-painel--dir,
    .hc-painel--esq {
        border-radius: 0 0 30% 30% / 0 0 10% 10%;
    }

    .hc-painel--dir::after,
    .hc-painel--esq::after {
        border: 1px solid var(--t-dourado-orn);
        border-top: 0;
    }

    /* Os slides com painel empilham: faixa em cima, conteúdo embaixo. */
    .hc-secao--capa,
    .hc-secao--socias {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    /* ----------------------------------------------------------------
       3.6 Capa
       ---------------------------------------------------------------- */
    .hc-capa__texto {
        max-width: 100%;
        align-items: flex-start;
    }

    .hc-capa__titulo,
    .hc-capa__lead { max-width: 100%; }

    /* Numa tela de 390px o pé vira duas linhas se ficar lado a lado */
    .hc-capa__pe {
        flex-wrap: wrap;
        gap: var(--esp-md);
        margin-top: var(--esp-lg);
    }

    .hc-capa__botanico { display: none; }

    /* ----------------------------------------------------------------
       3.7 À frente da Hand Care
       ---------------------------------------------------------------- */
    .hc-socias__interna { display: block; }

    .hc-socias__texto,
    .hc-socias__titulo,
    .hc-socias__lead,
    .hc-socias__citacao { width: 100%; max-width: 100%; }

    /* Volta ao canto padrão: no celular a fotografia vira faixa no topo e
       o canto inferior esquerdo fica livre de novo. */
    .hc-secao--socias .hc-secao__num,
    .hc-secao--sobre .hc-secao__num {
        left: var(--esp-secao-x);
        right: auto;
    }

    /* ----------------------------------------------------------------
       3.8 Contato
       ---------------------------------------------------------------- */
    .hc-contato__marca .hc-marca__img { height: clamp(88px, 26vw, 132px); }
    .hc-contato__titulo,
    .hc-contato__lead { max-width: 100%; }

    /* ----------------------------------------------------------------
       3.6 Moldura
       ---------------------------------------------------------------- */
    /* O selo recua para o canto e o símbolo diminui — mas o ALVO DE TOQUE
       não: 44px é o piso, independentemente de media query de ponteiro
       (que emuladores e alguns navegadores não reportam direito). */
    .hc-selo {
        min-width: 44px;
        min-height: 44px;
    }

    /* A numeração acompanha a margem lateral do slide e some do caminho
       do polegar. O recuo continua sendo calculado para passar por cima
       da fita — ver o comentário em components.css. */
    .hc-secao__num {
        font-size: 0.75rem;
    }

    /* ----------------------------------------------------------------
       3.7 Ornamento
       A fita continua: é ela que sustenta a identidade no celular.
       A folhagem, desenhada para composições largas, recua.
       ---------------------------------------------------------------- */
    .hc-curva     { height: clamp(56px, 16vw, 96px); min-width: 620px; }
    .hc-botanico  { opacity: 0.12; width: clamp(150px, 46vw, 240px); }
    .hc-halo      { width: clamp(260px, 80vw, 420px); }

    /* ----------------------------------------------------------------
       3.8 Sobre
       ---------------------------------------------------------------- */
    /* Em coluna única a fotografia ocupa a largura toda: o teto de 260px
       do desktop a deixaria como uma miniatura centralizada. */
    .hc-secao--sobre .hc-sobre__visual {
        max-width: 100%;
        margin-inline: 0;
    }

    .hc-secao--sobre .hc-sobre__texto,
    .hc-secao--sobre .hc-sobre__titulo { max-width: 100%; }

    .hc-secao--sobre .hc-sobre__frentes {
        margin-top: var(--esp-lg);
        padding-top: var(--esp-md);
    }

    /* ----------------------------------------------------------------
       3.9 Cuidar vai além
       ---------------------------------------------------------------- */
    .hc-secao--alem .hc-alem__citacao,
    .hc-secao--alem .hc-alem__lead   { max-width: 100%; }
    .hc-secao--alem .hc-alem__script { max-width: 100%; }

    /* Em coluna única o primeiro filete dos conceitos encostaria no
       manuscrito logo acima. */
    .hc-secao--alem .hc-alem__conceitos { margin-top: var(--esp-sm); }

    /* ----------------------------------------------------------------
       3.10 Serviços
       ---------------------------------------------------------------- */
    .hc-servicos__lista { grid-template-columns: minmax(0, 1fr); }

    .hc-servico {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--esp-sm);
    }

    /* O número deixa de ser coluna e vira rótulo, acima do conteúdo. */
    .hc-servico__num {
        font-size: var(--fs-corpo-sm);
        letter-spacing: 0.12em;
    }

    .hc-servico__corpo { gap: var(--esp-sm); }

    .hc-nota {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--esp-sm);
        padding: var(--esp-md);
    }

    /* ----------------------------------------------------------------
       3.11 Home Care
       ---------------------------------------------------------------- */
    .hc-homecare__visual { max-width: 100%; }
    .hc-homecare__foto   { max-height: none; }
    .hc-homecare__lead   { max-width: 100%; }

    /* Os quatro pontos deixam de ser 2x2 e viram lista. O filete que no
       desktop separava as duas LINHAS passa a separar cada item do
       anterior — por isso as duas regras de nth-child do desktop são
       zeradas e substituídas por uma só. */
    .hc-homecare__pontos { grid-template-columns: minmax(0, 1fr); }

    .hc-homecare__ponto:nth-child(-n + 2) { padding-bottom: 0; }

    .hc-homecare__ponto:nth-child(n + 2) {
        padding-top: var(--esp-md);
        border-top: 1px solid var(--t-borda);
    }

    .hc-homecare__ponto .hc-item__texto { max-width: 100%; }

    /* ----------------------------------------------------------------
       3.12 Pilares
       ---------------------------------------------------------------- */
    /* Os filetes verticais viram horizontais: em coluna, uma borda à
       esquerda leria como citação, não como separação. O escopo repete
       o de secoes.css porque lá o seletor tem três classes. */
    .hc-secao--personalizado .hc-pilar {
        padding-inline: 0;
        padding-block: var(--esp-lg);
    }

    .hc-secao--personalizado .hc-pilar + .hc-pilar {
        border-left: 0;
        border-top: 1px solid var(--t-borda);
    }

    /* ----------------------------------------------------------------
       3.13 Equipe
       Dois retratos por linha: com um só, a seção viraria um rolo
       interminável; com três, o rosto fica pequeno demais.
       ---------------------------------------------------------------- */
    .hc-secao--equipe .hc-equipe__lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--esp-md) var(--esp-md);
    }

    .hc-secao--equipe .hc-equipe__titulo .hc-h2 { max-width: 100%; }

    /* A correção ótica de alinhamento pela base só faz sentido quando os
       dois blocos estão lado a lado. */
    .hc-secao--equipe .hc-equipe__apoio { padding-bottom: 0; }

    .hc-secao--equipe .hc-perfil__texto { max-width: 100%; }

    /* ----------------------------------------------------------------
       3.14 Momentos
       A linha de duas colunas vira bloco: situação em cima, apoio embaixo.
       ---------------------------------------------------------------- */
    .hc-secao--momentos .hc-momento {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--esp-2xs);
        padding-left: var(--esp-md);
    }

    .hc-secao--momentos .hc-momento__situacao,
    .hc-secao--momentos .hc-momento__apoio { max-width: 100%; }

    .hc-secao--momentos .hc-secao__interna {
        padding-bottom: calc(var(--esp-secao-y) + var(--esp-xl));
    }

    /* ----------------------------------------------------------------
       3.15 Jornada
       De quatro colunas para uma lista vertical, cada passo com o seu
       próprio filete e marcador.
       ---------------------------------------------------------------- */
    .hc-jornada__passos::before { display: none; }
    .hc-secao--jornada .hc-passo::before { display: block; }

    .hc-passo {
        padding-top: var(--esp-md);
        gap: var(--esp-2xs);
    }

    .hc-passo__num { font-size: 1.5rem; }

    /* ----------------------------------------------------------------
       3.16 Para quem cuida
       ---------------------------------------------------------------- */
    /* A coluna de 52% existe para deixar a metade direita livre para a
       fotografia. Num celular não há "metade direita": o texto ocupa a
       largura toda e a foto respira ATRÁS dele. */
    .hc-familia__coluna {
        max-width: 100%;
        min-width: 0;
    }

    .hc-familia__titulo,
    .hc-familia__lead,
    .hc-familia__script { max-width: 100%; }

    /* O reforço horizontal foi calculado para escurecer só o terço
       esquerdo. Com o texto ocupando a tela inteira, ele precisa cobrir
       tudo — vira um véu uniforme, um pouco mais leve. */
    .hc-familia__veu {
        background-image: linear-gradient(
            180deg,
            var(--verde-noite) 0%,
            transparent 55%,
            var(--verde-noite) 100%
        );
        opacity: 0.45;
    }

    /* ----------------------------------------------------------------
       3.17 Chamada final
       ---------------------------------------------------------------- */
    .hc-secao--chamada .hc-chamada__frase  { max-width: 100%; }
    .hc-secao--chamada .hc-chamada__slogan { max-width: 100%; }
    .hc-secao--chamada .hc-chamada__acao   { width: 100%; }
    .hc-secao--chamada .hc-chamada__acao .hc-btn { width: 100%; }

    /* ----------------------------------------------------------------
       3.18 Contato
       ---------------------------------------------------------------- */
    .hc-contato__lista { grid-template-columns: minmax(0, 1fr); }

    .hc-cartao {
        max-width: 100%;
        padding: var(--esp-xl) var(--esp-lg);
    }

    /* ----------------------------------------------------------------
       3.19 Fotografia
       ---------------------------------------------------------------- */
    /* O arco precisa de área para ser lido como arco. Em telas estreitas
       ele viraria uma cúpula desproporcional sobre um retrato pequeno:
       vira um raio generoso — mesma família de formas, sem exagero.
       A moldura tracejada do placeholder acompanha, senão descola do
       canto arredondado. */
    .hc-foto--organico { border-radius: var(--raio-xl); }

    .hc-foto--organico .hc-foto__ph::before {
        border-radius: calc(var(--raio-xl) - var(--esp-sm));
    }

    .hc-foto__rotulo { font-size: 0.6875rem; letter-spacing: 0.1em; }

    /* ----------------------------------------------------------------
       3.99 Regras de celular específicas de cada slide

       Ficam no fim do bloco de propósito: carregam depois das regras
       gerais acima e podem sobrepô-las sem precisar de especificidade
       extra. Cada uma repete o escopo .hc-secao--<id> do desktop —
       secoes.css escopa em duas classes, e um seletor de uma classe só
       aqui perderia a disputa mesmo vindo depois.
       ---------------------------------------------------------------- */
    /* @@SLIDES-MOBILE@@ */

    /* --- alem --- */
    /* ----------------------------------------------------------------
           3.9 Manifesto (02)
           Coluna única. A frase continua sendo a tela; a nota de margem
           desce para baixo dela e a linha de base vira pilha.
           ---------------------------------------------------------------- */

        /* Na vertical a fita da base é bem mais baixa (≈96px): o respiro de
           esp-2xl do desktop viraria um buraco no fim do slide. */
        .hc-secao--alem .hc-secao__interna {
            padding-bottom: calc(var(--esp-secao-y) + var(--esp-lg));
        }

        .hc-secao--alem .hc-alem__topo {
            grid-template-columns: minmax(0, 1fr);
            align-items: start;
            gap: var(--esp-lg);
        }

        /* Teto próprio: o clamp do desktop entrega ~35px aqui, e a frase — que
           é o assunto da tela — precisa continuar sendo a maior coisa do
           aparelho sem quebrar em sete linhas. */
        .hc-secao--alem .hc-alem__frase {
            max-width: 100%;
            font-size: clamp(1.95rem, 1.15rem + 4.2vw, 2.75rem);
            line-height: 1.12;
        }

        /* Sem coluna à direita, a nota volta a ocupar a largura da tela e não
           precisa mais do degrau que a levantava da linha de base da frase. */
        .hc-secao--alem .hc-alem__apoio {
            max-width: 100%;
            padding-bottom: 0;
        }

        /* Filete e manuscrito empilhados: lado a lado, o fio comeria a largura
           de que a frase manuscrita precisa para caber em duas linhas. */
        .hc-secao--alem .hc-alem__assinatura {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--esp-sm);
            margin-top: var(--esp-xl);
        }

        .hc-secao--alem .hc-alem__script {
            max-width: 100%;
            font-size: clamp(1.5rem, 1.05rem + 2.4vw, 2.125rem);
        }

        /* A linha de base não cabe em uma linha num aparelho: vira pilha. */
        .hc-secao--alem .hc-alem__conceitos {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--esp-sm);
            margin-top: var(--esp-2xl);
            padding-top: var(--esp-md);
        }

        .hc-secao--alem .hc-alem__conceitos > li {
            gap: var(--esp-sm);
            font-size: 0.8125rem;
        }

        /* Empilhado, o ponto deixa de ser separador e vira marcador: por isso
           passa a valer para TODOS os itens, inclusive o primeiro. Mesma
           especificidade (0,2,0) da regra de desktop, e este arquivo carrega
           depois — vence a disputa sem !important. */
        .hc-secao--alem .hc-alem__conceitos > li::before {
            content: "";
            flex: 0 0 auto;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: var(--t-dourado-orn);
        }

    /* --- sobre --- */
    /* ----------------------------------------------------------------
           3.8 Sobre — a placa vira FAIXA no topo

           Em coluna única não existe "sangrar pela esquerda": a placa passa
           para o fluxo, encosta nas duas laterais e vira a faixa de abertura
           do slide. O arco muda de lado junto — sai da direita e vai para a
           base, que é onde agora fica a borda interna.

           ATENÇÃO: as regras antigas de .hc-sobre__visual não têm mais
           elemento correspondente e devem sair junto com este bloco.
           ---------------------------------------------------------------- */
        .hc-secao--sobre .hc-sobre__painel {
            position: relative;
            inset: auto;
            width: 100%;
            /* Altura em vw: a faixa cresce com a tela sem virar um bloco
               quadrado no tablet nem uma tarja fina no celular pequeno. */
            height: clamp(220px, 54vw, 340px);
            border-radius: 0 0 20% 20% / 0 0 14% 14%;
        }

        /* O fio acompanha a nova borda: some no topo, volta na esquerda. */
        .hc-secao--sobre .hc-sobre__painel::after {
            border-left: 1px solid var(--t-dourado-orn);
            border-top: 0;
        }

        .hc-secao--sobre .hc-sobre__interna {
            display: block;
            padding-bottom: calc(var(--esp-secao-y) + var(--esp-md));
        }

        /* A coluna volta a ser a tela inteira. As três regras abaixo repetem
           o escopo de secoes.css (duas classes): um seletor de uma classe só
           perderia a disputa mesmo carregando depois. */
        .hc-secao--sobre .hc-sobre__texto {
            width: 100%;
        }

        .hc-secao--sobre .hc-sobre__titulo,
        .hc-secao--sobre .hc-sobre__resumo {
            max-width: 100%;
        }

        /* Um marcador de 34px ao lado de um nome de 16px desequilibra a linha
           no celular: o filete encolhe e o vão diminui junto. */
        .hc-secao--sobre .hc-sobre__marca {
            width: clamp(16px, 4.5vw, 22px);
        }

        .hc-secao--sobre .hc-sobre__frentes > li {
            gap: var(--esp-sm);
        }

        /* Sem vh: no celular a altura da tela não é a altura do slide. */
        .hc-secao--sobre .hc-sobre__frentes {
            margin-top: var(--esp-lg);
            padding-top: var(--esp-md);
        }

        /* O halo desce para trás do texto — na faixa do topo ele brigaria com
           a fotografia. */
        .hc-secao--sobre .hc-sobre__halo {
            top: 30%;
            left: -20%;
        }

    /* --- servicos --- */
    /* ----------------------------------------------------------------
           3.10 Serviços
           A grade 3x2 vira coluna única e a tela volta ao ritmo de leitura
           contínua. Duas mudanças de composição, não de escala:
             · o número sai de cima do nome e vai para o LADO dele — seis
               blocos empilhados de 160px transformariam o slide em uma
               lista de rolagem longa;
             · cada item volta a carregar o próprio filete, porque em uma
               coluna só não há três bordas para formar a régua contínua.
           ---------------------------------------------------------------- */
        .hc-secao--servicos .hc-secao__interna {
            padding-top: var(--esp-secao-y);
            /* O pé continua maior que o topo: a fita da base ainda sobe por
               ali, só que agora com 88px de altura em vez de 176px. */
            padding-bottom: calc(var(--esp-secao-y) + var(--esp-lg));
        }

        .hc-secao--servicos .hc-servicos__cabecalho {
            margin-bottom: var(--esp-xl);
        }

        .hc-secao--servicos .hc-servicos__titulo {
            font-size: clamp(1.75rem, 9vw, 2.50rem);
        }

        .hc-secao--servicos .hc-servicos__apoio {
            max-width: 100%;
        }

        .hc-secao--servicos .hc-servicos__grade {
            grid-template-columns: minmax(0, 1fr);
            /* Sem vão entre linhas: o filete de cada item já faz a separação,
               e a pilha lê como índice. */
            row-gap: 0;
        }

        /* Número na primeira coluna, atravessando as duas linhas do item;
           nome e frase na segunda. O alinhamento por baseline faz o número
           nascer acima da linha do nome, como fólio de página. */
        .hc-secao--servicos .hc-servicos__item {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: baseline;
            column-gap: var(--esp-md);
            padding-top: var(--esp-md);
            padding-right: 0;
            padding-bottom: var(--esp-md);
        }

        .hc-secao--servicos .hc-servicos__item:last-child {
            border-bottom: 1px solid var(--t-borda);
        }

        .hc-secao--servicos .hc-servicos__num {
            grid-row: 1 / span 2;
            margin-bottom: 0;
            font-size: clamp(1.50rem, 7vw, 2.00rem);
        }

        .hc-secao--servicos .hc-servicos__nome,
        .hc-secao--servicos .hc-servicos__linha {
            grid-column: 2;
        }

        /* Sem a fita alta do desktop, o rodapé volta a ocupar a coluna toda;
           rótulo e lista empilham sozinhos pelo flex-wrap. */
        .hc-secao--servicos .hc-servicos__pe {
            max-width: 100%;
            margin-top: var(--esp-xl);
        }

    /* --- homecare --- */
    /* ----------------------------------------------------------------
           3.11 Home Care
           ---------------------------------------------------------------- */
        /* O arco sai da lateral e vira FAIXA horizontal no topo do slide — a
           mesma forma girada, como acontece com o painel sangrado dos slides
           01 e 07. Em 390px de largura não existe "canto inferior esquerdo":
           o corte precisa virar borda de baixo. */
        .hc-secao--homecare .hc-homecare__arco {
            position: relative;
            top: auto;
            right: auto;
            width: 100%;
            max-width: none;
            height: 34svh;
            min-height: 200px;
            border-radius: 0 0 30% 30% / 0 0 10% 10%;
        }

        /* Agora quem sangra são o topo e as duas laterais: o fio dourado fica
           só na curva de baixo. */
        .hc-secao--homecare .hc-homecare__arco::after {
            border: 1px solid var(--t-dourado-orn);
            border-top: 0;
        }

        /* A fita do celular tem no máximo 96px: o respiro extra do desktop
           (64px) vira um degrau menor. */
        .hc-secao--homecare .hc-secao__interna {
            padding-bottom: calc(var(--esp-secao-y) + var(--esp-lg));
        }

        .hc-secao--homecare .hc-homecare__texto,
        .hc-secao--homecare .hc-homecare__titulo,
        .hc-secao--homecare .hc-homecare__lead {
            max-width: 100%;
        }

        /* Os quatro termos não cabem em uma linha de 390px. A faixa vira lista
           e o tique vertical dá lugar a um filete horizontal entre itens — o
           fio dourado de abertura continua marcando o início do bloco. */
        .hc-secao--homecare .hc-homecare__pontos {
            display: block;
            margin-top: var(--esp-xl);
        }

        .hc-secao--homecare .hc-homecare__ponto {
            padding-inline: 0;
            padding-block: var(--esp-sm);
        }

        .hc-secao--homecare .hc-homecare__ponto + .hc-homecare__ponto {
            border-top: 1px solid var(--t-borda);
        }

        .hc-secao--homecare .hc-homecare__ponto + .hc-homecare__ponto::before {
            display: none;
        }

    /* --- personalizado --- */
    /* ----------------------------------------------------------------
       3.12 Cuidado personalizado (06)

       Em coluna única o slide vira leitura vertical: primeiro o argumento,
       depois os três tempos. A régua do capítulo continua sendo o separador
       — nenhuma borda extra entra aqui.

       ATENÇÃO À ESPECIFICIDADE: as regras de secoes.css deste slide são
       `.hc-secao--personalizado .hc-x` (0,2,0) e vencem as regras de uma
       classe só do bloco 3.3. Por isso os limites de medida precisam ser
       soltos AQUI, com o mesmo escopo.
       ---------------------------------------------------------------- */

    .hc-secao--personalizado .hc-personalizado__cabecalho {
        gap: var(--esp-sm);
    }

    /* No celular o limite é a tela, não o ch — e a escala volta ao chão da
       régua tipográfica: 13ch com 64px de topo daria duas palavras por linha. */
    .hc-secao--personalizado .hc-personalizado__titulo {
        max-width: 100%;
        font-size: clamp(1.95rem, 1.30rem + 3.4vw, 2.60rem);
    }

    .hc-secao--personalizado .hc-personalizado__lead {
        max-width: 100%;
    }

    /* O respiro em vh não faz sentido aqui: a seção deixou de ocupar a tela
       (bloco 3.2) e a rolagem é contínua. Volta a ser espaçamento fixo. */
    .hc-secao--personalizado .hc-personalizado__pilares {
        gap: var(--esp-xl);
    }

    .hc-secao--personalizado .hc-personalizado__pilar {
        padding: 0;
        gap: var(--esp-xs);
    }

    /* Defensiva: se a borda horizontal da versão anterior dos pilares
       sobreviver em algum lugar, ela some. A régua do capítulo já separa —
       duas linhas por pilar leriam como card de novo. */
    .hc-secao--personalizado .hc-pilar + .hc-pilar {
        border-top: 0;
        border-left: 0;
    }

    .hc-secao--personalizado .hc-personalizado__ordem {
        font-size: 1rem;
    }

    .hc-secao--personalizado .hc-pilar__texto {
        max-width: 100%;
    }

    /* Menor e mais para dentro do canto: numa tela de 390px a folhagem no
       tamanho de desktop cobriria metade da largura do texto. */
    .hc-secao--personalizado .hc-personalizado__botanico {
        bottom: -3%;
        left: -12%;
        width: clamp(170px, 46vw, 240px);
    }

    /* --- equipe --- */
    /* ----------------------------------------------------------------
       3.13 Equipe

       A lâmina vertical vira FAIXA horizontal no topo (regra geral de
       .hc-painel, em 3.5) e as duas colunas viram uma só: mensagem em
       cima, formações embaixo. O fio vertical continua — em coluna
       única ele é justamente o que impede a lista de virar bloco de
       texto corrido.

       O escopo repete .hc-secao--equipe porque as regras de desktop
       têm duas classes: especificidade vence ordem entre media
       queries, e sem o mesmo peso a regra de celular perde a disputa.
       ---------------------------------------------------------------- */
    .hc-secao--equipe {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    /* Desfaz os 19% e o arco lateral do desktop. A faixa é mais rasa que
       a padrão (38svh): aqui a fotografia apoia, não é o assunto da tela. */
    .hc-secao--equipe .hc-equipe__painel {
        width: 100%;
        height: 32svh;
        min-height: 200px;
        border-radius: 0 0 30% 30% / 0 0 10% 10%;
    }

    /* Coluna única e fim da reserva lateral da lâmina. */
    .hc-secao--equipe .hc-equipe__interna {
        display: block;
        padding-right: var(--esp-secao-x);
    }

    .hc-secao--equipe .hc-equipe__titulo,
    .hc-secao--equipe .hc-equipe__lead,
    .hc-secao--equipe .hc-equipe__linha {
        max-width: 100%;
    }

    /* Empilhadas, mensagem e lista precisam de uma virada de bloco
       visível — no desktop quem separava as duas era a coluna. */
    .hc-secao--equipe .hc-equipe__formacoes {
        margin-top: clamp(var(--esp-xl), 9vw, var(--esp-2xl));
        gap: var(--esp-lg);
        padding-left: var(--esp-md);
    }

    /* --- momentos --- */
    /* ----------------------------------------------------------------
           3.14 Momentos
           O sumário de duas colunas vira uma coluna só. A linha não precisa
           ser redesenhada: ela já é número + situação, e continua sendo.
           ---------------------------------------------------------------- */

        /* No celular a leitura é contínua — a tela deixa de ter altura fixa e
           o respiro pode voltar a ser medido em VW, como o resto do modo
           compacto. A escala da situação cai para caber em 390px sem
           hifenizar. */
        .hc-secao--momentos {
            --momento-fs: clamp(1.15rem, 1.00rem + 1.15vw, 1.55rem);
            --momento-y:  clamp(var(--esp-sm), 2.6vw, var(--esp-md));
        }

        .hc-secao--momentos .hc-momentos__indice {
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: auto;
            grid-auto-flow: row;
        }

        /* Em coluna única o filete embaixo do 4º item encostaria no filete de
           cima do 5º e viraria um traço duplo. Só a última linha fecha. */
        .hc-secao--momentos .hc-momento:nth-child(4),
        .hc-secao--momentos .hc-momento:nth-child(7) {
            border-bottom: 0;
        }

        .hc-secao--momentos .hc-momento:last-child {
            border-bottom: 1px solid var(--t-borda);
        }

        .hc-secao--momentos .hc-momento {
            column-gap: var(--esp-sm);
        }

        .hc-secao--momentos .hc-momentos__titulo {
            max-width: 100%;
        }

        .hc-secao--momentos .hc-momentos__cabecalho {
            margin-bottom: clamp(var(--esp-lg), 7vw, var(--esp-2xl));
        }

        /* Sem altura de tela, o recuo do pé volta a ser só a folga da fita. */
        .hc-secao--momentos .hc-momentos__interna {
            padding-bottom: calc(var(--esp-secao-y) + var(--esp-xl));
        }

    /* --- jornada --- */
    /* ----------------------------------------------------------------
           3.15 Jornada

           O cabeçalho de duas colunas vira uma coluna só e os quatro passos
           viram uma lista vertical. O fio contínuo SAI DE CENA: numa coluna
           única ele não liga nada — cada passo volta a carregar o próprio
           filete e o próprio marcador.

           Todas as regras repetem o escopo .hc-secao--jornada porque o bloco
           de desktop escopa assim: um seletor de uma classe só perderia a
           disputa mesmo carregando depois.
           ---------------------------------------------------------------- */
        .hc-secao--jornada .hc-jornada__cabecalho {
            grid-template-columns: minmax(0, 1fr);
            row-gap: var(--esp-md);
            align-items: start;
            margin-bottom: var(--esp-xl);
        }

        .hc-secao--jornada .hc-jornada__titulo,
        .hc-secao--jornada .hc-jornada__lead {
            max-width: 100%;
        }

        /* A compensação ótica só existe enquanto há duas colunas alinhadas
           pela base. */
        .hc-secao--jornada .hc-jornada__lead {
            padding-bottom: 0;
        }

        .hc-secao--jornada .hc-jornada__fio {
            display: none;
        }

        .hc-secao--jornada .hc-passo::before {
            display: block;
        }

        .hc-secao--jornada .hc-jornada__passos {
            column-gap: 0;
            row-gap: clamp(var(--esp-lg), 7vw, var(--esp-2xl));
        }

        .hc-secao--jornada .hc-passo {
            padding-top: var(--esp-md);
            gap: var(--esp-2xs);
        }

        /* No celular o número não pode dominar: numa coluna de 350px um
           algarismo de 76px vira o assunto da tela. Ele volta ao papel de
           marcador e quem lidera é o título do passo. */
        .hc-secao--jornada .hc-passo__num {
            font-size: 1.75rem;
            line-height: 1;
            letter-spacing: 0;
            margin-left: 0;
        }

        .hc-secao--jornada .hc-passo__titulo {
            font-size: 1.1875rem;
        }

        .hc-secao--jornada .hc-passo__texto {
            max-width: 100%;
        }

        /* O marcador volta ao tamanho do componente: sem o número grande ao
           lado, 11px pesa demais. */
        .hc-secao--jornada .hc-passo::after {
            top: -4px;
            width: 9px;
            height: 9px;
        }

        /* A fita da base é bem mais baixa aqui (88px): a folga acompanha. */
        .hc-secao--jornada .hc-secao__interna {
            padding-bottom: calc(var(--esp-secao-y) + var(--esp-2xl));
        }

    /* --- familia --- */
    /* ----------------------------------------------------------------
           11 · Para quem cuida — o respiro

           O escopo repete .hc-secao--familia do desktop de propósito: as
           regras da seção 3.16 deste arquivo têm uma classe só e perderiam
           a disputa mesmo vindo depois.
           ---------------------------------------------------------------- */
        /* Coluna única. O reset de grid-column é OBRIGATÓRIO: "2 / -1" num
           grid de uma coluna criaria uma segunda coluna implícita e jogaria o
           manuscrito para fora da tela. */
        .hc-secao--familia .hc-familia__interna {
            grid-template-columns: minmax(0, 1fr);
            row-gap: clamp(var(--esp-lg), 5vh, var(--esp-2xl));
        }

        /* A largura de 64% existe para deixar a metade direita livre para a
           fotografia. Num celular não há "metade direita": os dois blocos
           ocupam a tela toda e a foto respira ATRÁS deles. */
        .hc-secao--familia .hc-familia__frase,
        .hc-secao--familia .hc-familia__assinatura {
            grid-column: 1 / -1;
            max-width: 100%;
        }

        /* O reforço quase horizontal foi calculado para escurecer só o terço
           esquerdo de uma tela larga. Com o texto ocupando a largura toda ele
           precisa cobrir tudo: vira um véu vertical uniforme e mais leve, que
           escurece topo e base e deixa o miolo da fotografia visível. */
        .hc-secao--familia .hc-familia__veu {
            background-image: linear-gradient(
                180deg,
                var(--verde-noite) 0%,
                transparent 55%,
                var(--verde-noite) 100%
            );
            opacity: 0.45;
        }

    /* --- chamada --- */
    /* ----------------------------------------------------------------
           3.17 Chamada final — fechamento emocional

           Coluna única. Não há botão nem ação: as regras antigas de
           .hc-chamada__acao saíram junto com ele.
           ---------------------------------------------------------------- */

        /* Num celular 20ch é mais largo que a tela: o limite passa a ser a
           própria largura útil. O teto de 3,1rem encontra EXATAMENTE o valor
           que a regra de desktop entrega a 821px (17,6 + 3,9vw = 49,6px) —
           a passagem entre os dois blocos não tem degrau. */
        .hc-secao--chamada .hc-chamada__frase {
            max-width: 100%;
            font-size: clamp(2.25rem, 1.15rem + 4.4vw, 3.1rem);
        }

        /* O vazio encolhe: numa tela alta e estreita a frase quebra em cinco
           linhas, e 11vh depois disso empurrariam o slogan para longe. */
        .hc-secao--chamada .hc-chamada__selo {
            margin-top: clamp(var(--esp-xl), 7vh, var(--esp-3xl));
        }

        /* O selo acompanha a redução: com 340px de largura os dois filetes
           tomariam quase toda a tela e o símbolo viraria um detalhe no meio
           de uma régua. */
        .hc-secao--chamada .hc-chamada__selo--orn {
            width: min(100%, 260px);
        }

        .hc-secao--chamada .hc-chamada__simbolo {
            height: clamp(34px, 9vw, 46px);
        }

        .hc-secao--chamada .hc-chamada__slogan {
            max-width: 100%;
            font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
        }

        /* O halo é atmosfera, não mancha: em 70vw de celular ele viraria um
           borrão atrás da frase inteira. Recua e sobe um pouco menos. */
        .hc-secao--chamada .hc-chamada__halo {
            width: clamp(280px, 92vw, 520px);
            transform: translate(-50%, -58%);
        }

        /* As folhagens recuam para não encostar na frase, que agora ocupa a
           largura toda. A moldura continua assimétrica. */
        .hc-secao--chamada .hc-chamada__botanico {
            width: clamp(150px, 40vw, 230px);
        }

        .hc-secao--chamada .hc-chamada__botanico--2 {
            width: clamp(130px, 34vw, 200px);
        }
}


/* ==========================================================================
   4. CELULAR ESTREITO — 400px e abaixo
   Referência de teste: 375 · 390 · 430.
   ========================================================================== */

@media (max-width: 400px) {

    :root { --esp-secao-x: 18px; }

    .hc-marca__nome    { letter-spacing: 0.16em; text-indent: 0.16em; }
    .hc-btn            { padding-inline: var(--esp-md); }
    .hc-btn--contato   { min-height: 68px; }

    /* Duas colunas de retrato a 375px dão ~160px cada: ainda legível,
       mas o texto de apoio embaixo fica apertado. Reduz-se o corpo, não
       o número de colunas — o rosto é o que importa aqui. */
    .hc-secao--equipe .hc-perfil__texto { font-size: 0.8125rem; }
}


/* ==========================================================================
   5. CELULAR DEITADO — pouca altura
   ========================================================================== */

@media (max-height: 560px) and (orientation: landscape) {

    .hc-secao--capa,
    .hc-secao--familia,
    .hc-secao--chamada {
        min-height: 0;
        display: block;
    }

    :root { --esp-secao-y: 48px; }

    .hc-capa__rolagem { display: none; }
}


/* ==========================================================================
   6. TELAS MUITO LARGAS
   ========================================================================== */

@media (min-width: 1800px) {

    .hc-secao__interna {
        max-width: calc(var(--largura-max) + 120px + var(--esp-secao-x) * 2);
    }

    .hc-capa__visual { max-width: 520px; }
}


/* ==========================================================================
   7. PONTEIRO GROSSO — toque
   Vale para celular e tablet, independentemente da largura.
   ========================================================================== */

@media (pointer: coarse) {

    /* Alvo de toque confortável em tudo que navega. */
    .hc-selo,
    .hc-rolagem,
    .hc-trilho__item,
    .hc-btn {
        min-height: 44px;
    }
}


/* ==========================================================================
   8. IMPRESSÃO / PDF — VERSÃO IDÊNTICA

   O PDF é o deck, página por página: mesma composição, mesmas cores,
   mesmas fotografias. Um slide = uma página 16:9.

   A página é declarada com o TAMANHO DO CANVAS DE VALIDAÇÃO — 1600 × 900
   (423,333 mm × 238,125 mm a 96 dpi). Assim o motor de impressão monta o
   layout exatamente na largura em que todos os slides foram medidos e
   aprovados, e 100vh vira a altura exata da página.

   Geração: tools/gerar-pdf.bat (ou Ctrl+P no Edge/Chrome com "gráficos
   de plano de fundo" ativado). O PDF é artefato DERIVADO — nunca editar
   o PDF, sempre regerar a partir do deck.
   ========================================================================== */

@media print {

    @page {
        size: 423.333mm 238.125mm;   /* 1600 × 900 px @ 96 dpi — 16:9 */
        margin: 0;
    }

    /* Sem isto, o motor de impressão descarta os fundos verdes e o deck
       viraria papel branco. */
    *,
    *::before,
    *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    html {
        scroll-snap-type: none;
    }

    /* Elementos FIXOS se repetem em todas as páginas na impressão — por
       isso o selo e o trilho saem. A numeração 04/13 fica: é absoluta
       dentro de cada slide e faz parte da identidade do deck. */
    .hc-pular,
    .hc-selo,
    .hc-trilho {
        display: none !important;
    }

    /* UM SLIDE = UMA PÁGINA.
       Altura exata da página (100vh = 238,125 mm), conteúdo centrado como
       na tela, e quebra obrigatória depois de cada seção. O overflow
       escondido é a rede de segurança contra meio-pixel de arredondamento
       empurrando uma página em branco. */
    .hc-secao,
    .hc-secao--tela {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 100vh !important;
        min-height: 0 !important;
        overflow: hidden !important;
        break-after: page;
        page-break-after: always;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .hc-secao:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    /* Tudo visível, nada animando: o PDF recebe o estado final. */
    .js .hc-anim,
    .js .hc-anim--esq,
    .js .hc-anim--dir,
    .js .hc-anim--suave,
    .js .hc-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .js .hc-tracado {
        stroke-dashoffset: 0 !important;
    }

    .hc-rolagem__traco::after {
        animation: none !important;
    }
}