/* Celular (26/10/2026): acabamento de uso no telefone, carregado por último em todas as páginas.
   Regra: o computador não muda. Aqui entra só o que confundia no toque: coisa que parece botão e não é,
   navegação repetida, listas longas demais, campos que dão zoom e o rodapé por baixo do WhatsApp. */

/* —— Toque: sem o clarão cinza do navegador, com resposta própria ao apertar —— */
html {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}
a, button, [role="button"], label, summary { touch-action: manipulation; }
@media (hover: none) {
    .btn-primary:active, .btn-secondary:active, .btn-outline:active, .cta-final__btn-outline:active,
    .hx-btn:active, .footer-v2__contact-btn:active, .nav-drawer__cta:active, .nav-drawer__whatsapp:active {
        transform: scale(.98);
    }
    .footer-links a:active, .hx-toc__row:active, .nav-drawer__link:active, .svc-mod-card:active,
    .ct-quick-nav__card:active, .blog-hub-card__link:active, .btn-link:active, .hx-link:active {
        opacity: .7;
    }
}

@media (max-width: 767px) {
    /* A logo (volta para a home) tinha 26px de altura para o dedo */
    .site-header__brand { min-height: 2.75rem; }

    /* Campos com 16px: abaixo disso o iPhone dá zoom ao tocar e não volta */
    input[type="email"], input[type="text"], input[type="tel"], input[type="search"], select, textarea {
        font-size: 16px;
    }

    /* —— Aviso de cookies mais baixo: título e texto na mesma linha —— */
    .cookie-banner__inner { gap: .75rem; padding: .9rem 1rem; }
    .cookie-banner__title, .cookie-banner__text { display: inline; font-size: .8125rem; line-height: 1.45; }
    .cookie-banner__title { margin: 0 .3rem 0 0; }
    .cookie-banner__btn { min-height: 2.6rem; padding-inline: .6rem; font-size: .8125rem; white-space: nowrap; }

    /* —— Rodapé: links em duas colunas e o fim da página livre do botão do WhatsApp —— */
    .footer-v2__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
    .footer-links li { margin-bottom: 0; }
    .footer-v2__legal { padding-bottom: 1rem; }
    .footer-v2__inner { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }

    /* —— Topo das páginas internas: menos vão entre o menu e o título —— */
    .ct-page-band--light, .sm-page-band--light, .blog-page-band--light, .blog-article-page__main {
        padding-top: calc(var(--site-header-clearance, 4.5rem) + 1.75rem);
    }
    /* Saúde Mental: o topo ocupava 92% da tela mesmo com pouco texto (sobrava um vão embaixo) */
    .page-saude-mental .sm-page-band--light.home-band--light {
        min-height: 0;
        padding-top: calc(var(--site-header-clearance, 4.5rem) + 1.75rem);
        padding-bottom: 3.5rem;
    }
    /* Artigo do blog: o cabeçalho era uma caixa branca com um vão vazio em cima */
    body .site-header--inner ~ main#conteudo .blog-article-page__header {
        padding-top: 3.75rem;
        background: transparent;
    }

    /* —— Destaques do topo eram pílulas com borda, iguais a botões: viram uma lista simples —— */
    .ct-page-header__meta, .sm-page-header__meta { display: grid; gap: .55rem; margin-top: 1.25rem; }
    .ct-page-header__meta li, .sm-page-header__meta li {
        flex: none;
        justify-content: flex-start;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        font-size: .9375rem;
        font-weight: 500;
    }

    /* —— Ilustrações do topo que repetiam o conteúdo logo abaixo (e pareciam botões) —— */
    .page-como-funciona .flow-hero__visual,
    .page-sobre .about-hero__visual,
    .page-solucoes .sol-hero__visual { display: none; }

    /* —— Home —— */
    /* A faixa "Tecnologia que opera projetos em…" repetia os públicos do subtítulo e do Mercados */
    .page-home .hero-trust__label, .page-home .hero-trust__segments { display: none; }
    .page-home .hero-trust { width: auto; margin-inline: 0; padding-inline: max(.875rem, env(safe-area-inset-left)); }
    .page-home .hero-trust__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* —— Serviços —— */
    /* Selo verde com brilho parecia um botão e repetia o texto logo acima */
    .page-servicos .svc-hero__wait { display: none; }
    /* A seta sozinha não dizia para onde o cartão leva (ao formulário, com o módulo escolhido) */
    .svc-mod-card__action-label { font-size: .875rem; font-weight: 600; white-space: nowrap; }
    .svc-mod-card__action,
    .svc-mod-card--featured .svc-mod-card__action {
        width: auto;
        min-width: 2.5rem;
        height: 2.5rem;
        padding: 0 .9rem;
        gap: .4rem;
    }
    .svc-mod-card--linked .svc-mod-card__action { position: static; align-self: flex-start; order: 10; }

    /* —— Soluções: um só seletor de mercado, com os quatro à vista —— */
    .page-solucoes .sol-hero__specs { display: none; }
    .page-solucoes #jornadas { margin-top: 0; } /* sobrava uma faixa branca entre o topo e as jornadas */
    .page-solucoes .sol-chooser {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
        overflow: visible;
        margin: 0 0 1.5rem;
        padding: 0;
    }
    .page-solucoes .sol-chooser__btn {
        justify-content: center;
        min-height: 3rem;
        padding: .55rem .5rem;
        white-space: normal;
        text-align: center;
        line-height: 1.2;
        font-size: .875rem;
    }
    /* As abas não escolhidas eram só texto: ganham contorno para parecerem tocáveis */
    .page-solucoes .sol-chooser__btn:not(.is-active) { border-color: rgba(242, 246, 249, .16); }
    /* Comparativo: tabela compacta (antes eram 8 cartões com 4 linhas cada, quase quatro telas) */
    .page-solucoes .compare-table-wrap {
        overflow: visible;
        border: 1px solid var(--stroke, #E3EAF3);
        border-radius: .75rem;
        background: #fff;
    }
    .page-solucoes .compare-table { display: table; width: 100%; table-layout: fixed; font-size: .8125rem; }
    .page-solucoes .compare-table thead { display: table-header-group; }
    .page-solucoes .compare-table tbody { display: table-row-group; }
    .page-solucoes .compare-table tbody tr { display: table-row; border: 0; border-radius: 0; background: none; box-shadow: none; }
    .page-solucoes .compare-table th,
    .page-solucoes .compare-table td {
        display: table-cell;
        padding: .7rem .2rem;
        border-bottom: 1px solid var(--stroke, #E3EAF3);
        vertical-align: middle;
        text-align: center;
    }
    .page-solucoes .compare-table tbody tr td:last-child { border-bottom: 1px solid var(--stroke, #E3EAF3); }
    .page-solucoes .compare-table tbody tr:last-child th,
    .page-solucoes .compare-table tbody tr:last-child td { border-bottom: 0; }
    /* Cabeçalho sem caixa-alta (mais estreito); palavra longa hifeniza, com respiro entre as colunas */
    .page-solucoes .compare-table thead th {
        padding: .75rem .2rem .6rem;
        font-size: .625rem;
        line-height: 1.25;
        letter-spacing: -.005em;
        text-transform: none;
        vertical-align: bottom;
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
    .page-solucoes .compare-table thead th:first-child,
    .page-solucoes .compare-table tbody th[scope="row"] {
        width: 33%;
        padding-left: .8rem;
        text-align: left;
    }
    .page-solucoes .compare-table tbody th[scope="row"] {
        display: table-cell;
        padding: .7rem .4rem .7rem .8rem;
        font-size: .8125rem;
        font-weight: 600;
        line-height: 1.3;
        background: none;
    }
    .page-solucoes .compare-table tbody td::before { content: none; }

    /* —— Sobre —— */
    /* 12 diferenciais em caixas (pareciam botões, quase duas telas): viram uma lista com fio */
    .page-sobre .about-diferenciais { gap: 0; }
    /* (os !important vencem os da camada site-elegancia.css, que pinta os cartões) */
    body.page-sobre .about-diferenciais .about-diferencial {
        align-items: center;
        min-height: 0;
        padding: .7rem 0 .7rem 2.1rem;
        background: none !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(138, 154, 176, .16) !important;
        border-radius: 0 !important;
    }
    .page-sobre .about-diferencial__index { left: 0; top: 50%; transform: translateY(-50%); }
    .page-sobre .about-diferencial__icon { width: 2rem; height: 2rem; flex: none; }
    .page-sobre .about-diferencial__title { margin: 0; }
    /* Os dois links juntos numa linha centralizada pareciam um só */
    .page-sobre .about-diferenciais__note { display: grid; gap: .35rem; justify-items: start; font-size: 0; }
    .page-sobre .about-diferenciais__note a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .9375rem; }
    .page-sobre .about-diferenciais__note a::after { content: "→"; margin-left: .4rem; }

    /* —— Saúde Mental: 10 entregas em cartões grandes (duas telas e meia): viram lista com ícone ao lado —— */
    .page-saude-mental .sm-solutions-grid { gap: 0; }
    body.page-saude-mental .sm-solutions-grid .sm-solution-card {
        display: grid;
        grid-template-columns: 2.25rem minmax(0, 1fr);
        align-items: start;
        gap: .9rem;
        padding: 1rem 0;
        background: none !important;
        border: 0 !important;
        border-bottom: 1px solid var(--e-line, #DCE3E8) !important;
        border-radius: 0 !important;
    }
    .page-saude-mental .sm-solution-card__icon { width: 2.25rem; height: 2.25rem; margin: 0; }
    .page-saude-mental .sm-solution-card__title { margin-top: .15rem; }

    /* —— Contato: o formulário vem logo depois do topo; atalhos e links úteis, depois —— */
    .page-contato .ct-page-band__inner { display: flex; flex-direction: column; }
    .page-contato .ct-layout { order: 1; }
    .page-contato .ct-quick-nav-wrap { order: 2; margin-top: 2.5rem; }
    .page-contato .ct-links { display: none; }
    /* "Sou" em três colunas, como um seletor */
    .contato-tipo-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
    .contato-tipo-pill { flex: none; min-width: 0; }
    .contato-tipo-pill__inner {
        flex-direction: column;
        justify-content: center;
        gap: .25rem;
        min-height: 3.75rem;
        padding: .5rem .25rem;
        font-size: .8125rem;
        line-height: 1.2;
        text-align: center;
    }
    /* Caixa do aceite: o campo esticava para 46px e a caixinha ficava longe do texto */
    .ct-form-panel input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
        min-height: 0;
        margin: .05rem 0 0;
    }
    .ct-privacy--check { gap: .7rem; font-size: .875rem; line-height: 1.45; }

    /* —— Blog: os quadros "3 artigos / 4 categorias" ocupavam meia tela —— */
    .blog-page-header__stats { display: none; }

    /* —— NR-1 (cabeçalho da landing): telefone e botão não cabiam juntos —— */
    .site-header--lp .site-header__phone { display: none; }
    .site-header--lp .site-header__cta-text--full { display: none; }
    .site-header--lp .site-header__cta-text--short { display: inline; }
    .site-header--lp .site-header__cta-btn { padding: 0 1rem; }
}

/* Depoimentos: o texto era cortado com "…" e não havia como ler o resto */
.depoimentos-section .blog-hub-card__excerpt {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

/* Fora do celular, o texto das setas e o atalho entre mercados não aparecem */
.svc-mod-card__action-label { display: none; }
.sol-panel__switch { display: none; }
@media (max-width: 767px) {
    .svc-mod-card__action-label { display: inline; }
    .sol-panel__switch { display: inline-flex; }
}

/* ═══ Desempenho no celular (13/11/2026) ═══
   O computador não muda. No celular: título do topo visível desde o início (o LCP era o aviso de cookies),
   vidro vira cor sólida, animações infinitas grandes param e o aviso de cookies fica mais baixo. */
@media (max-width: 767px), (hover: none) {
    .hero-v2--photo .hero-v2__title, .hero-v2--photo .hero-v2__subtitle { animation-name: heroRiseOnly; }
    .btn-secondary--hero, .site-header__bar--inner, .nav-pill, .nav-drawer-backdrop, .cookie-banner__inner, .sm-intro-pillar__inner,
    #site-header.site-header--hero.site-header--scrolled, #site-header.site-header--plantao.site-header--scrolled {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    #site-header.site-header--hero.site-header--scrolled, #site-header.site-header--plantao.site-header--scrolled { background-color: rgba(10, 20, 34, .97) !important; }
    .nav-pill { background: rgba(15, 27, 45, .92); }
    .btn-secondary--hero { background: rgba(10, 20, 34, .35); }
    .cookie-banner__inner { background: rgb(10, 18, 32); }
    .page-home .hero-v2--telemed .hero-v2__bg, .tech-platform-mockup--3d .mockup-stack,
    .sm-intro__aurora, .sm-intro__orb, .sm-intro-pillar__inner { animation: none !important; }
}
@keyframes heroRiseOnly {
    from { transform: translate3d(0, 28px, 0); }
    to { transform: translate3d(0, 0, 0); }
}
@media (max-width: 767px) {
    /* aviso de cookies: menor que o título do topo (texto curto em 2 linhas, botões lado a lado) */
    .cookie-banner__inner { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .7rem .85rem; }
    .cookie-banner__copy { flex: 1 1 100%; }
    .cookie-banner__copy { font-size: .75rem; line-height: 1.4; }
    .cookie-banner__title, .cookie-banner__text { font-size: .75rem; line-height: 1.4; }
    .cookie-banner__actions { flex: 1 1 100%; }
    .cookie-banner__btn { min-height: 2.4rem; }
}

/* O aviso de cookies entra com um fade curto: é moldura, não conteúdo, e assim não passa à frente do título
   na medida de "maior conteúdo da tela" (LCP). Sem movimento: aparece direto. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    .cookie-banner { animation: cookieEntra .35s ease-out .5s both; }
}
@keyframes cookieEntra { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }

/* Seções de baixo da home só calculam quando chegam perto da tela (13/11/2026). html.cv-off desliga no pulo por âncora.
   Seções escuras ficam de fora: com content-visibility o teste de acessibilidade acusa contraste falso. */
html:not(.cv-off) .page-home :is(#publico, #tecnologias, #confianca, #explore) {
    content-visibility: auto;
    contain-intrinsic-size: auto 1100px;
}