/* ------------------------------------------------------------------
   Ajustes de layout para telas pequenas.

   Fica em arquivo separado (e não em css/style.css) porque o site serve
   css/style.min.css: editar o fonte não teria efeito sem regenerar o .min.
   Este arquivo é carregado por último no header.php, então vence por ordem
   de cascata sem precisar de !important — exceto onde indicado.
   ------------------------------------------------------------------ */

/* ==================================================================
   Botão flutuante do WhatsApp x modais
   ==================================================================
   O FAB do footer e os modais de contato têm os dois z-index:9999. Em
   empate quem pinta por cima é o último do HTML, e o FAB fica no footer,
   depois dos modais — resultado: ele cobria o canto do botão CANCELAR.
   O JS dos modais já põe .modal-open no body ao abrir, então basta usar
   esse gancho. Fora do media query de propósito: o empate de z-index não
   depende da largura da tela.
   ------------------------------------------------------------------ */
body.modal-open .wa-btn-wrap {
    display: none;
}

/* ==================================================================
   Botões dos modais de contato em telas estreitas
   ==================================================================
   ENVIAR e CANCELAR ficam em .col-6 lado a lado. Em 360px (largura real
   de um aparelho de 720px com DPR 2) o par CANCELAR + ícone precisava de
   ~108px e só sobravam ~107: o texto quebrava em duas linhas e o botão
   ficava com 114px de altura contra 64px do vizinho. Em 393px passava
   raspando, e era por isso que só aparecia no celular de verdade.

   Zerar o letter-spacing devolve os ~8px que faltavam. Medido em 360px,
   CANCELAR passa a ocupar 98px dos 107 úteis — e ele é o pior caso: os
   outros rótulos dos modais do site são ENVIAR (76px) e SOLICITAR (95px,
   mais estreito que CANCELAR porque "I" e "L" são glifos finos).

   Não mexo no padding: quem manda nele é .modal.fade .modal-content
   .btn-sm, do próprio tema, com especificidade (0,4,0) contra (0,2,0)
   daqui. Como a folga do letter-spacing já resolve, não vale subir a
   especificidade só para ganhar essa briga.

   O nowrap fixa o resultado: a fonte é self-hosted e vem com preload, então
   o risco de um fallback mais largo é baixo, e assim os dois botões ficam
   garantidamente da mesma altura. O line-height uniforme completa isso e
   mantém o alvo de toque em 44px. O border:0 iguala os últimos 2px — o
   .btn-secondary tem borda de 0,8px e o .btn-primary tem border:0, o que
   deixava CANCELAR 2px mais alto que ENVIAR mesmo sem a quebra. */
@media only screen and (max-width: 767px) {
    .modal .btn {
        letter-spacing: 0;
        white-space: nowrap;
        line-height: 44px;
        border: 0;
    }
}

/* ==================================================================
   Cards de serviço da home: de "cartão" para "linha"
   ==================================================================
   No desktop cada item é um cartão de 333px que revela a descrição no
   hover. No celular isso dava dois problemas: 12 cartões × 333px = quase
   4.000px de rolagem com o ícone e o título boiando no meio do vazio, e
   a descrição — que só existe atrás do :hover — nunca aparecia, porque
   em tela de toque não há hover e tocar no cartão navega para a página.

   Abaixo de 768px o item vira uma linha: ícone à esquerda, título ao
   lado e a descrição logo abaixo, limitada a 2 linhas. O verso deixa de
   ser um overlay absoluto e passa a fazer parte do fluxo. Nada disso
   muda o HTML nem o comportamento do desktop.
   ------------------------------------------------------------------ */
@media only screen and (max-width: 767px) {

    /* As duas metades perdem a altura fixa e o padding de cartão. */
    .dc-features-group > .dc-features-item .dc-features-item-front,
    .dc-features-group > .dc-features-item .dc-features-item-hover {
        min-height: 0;
        height: auto;
        padding: 0;
        display: block;
        -webkit-transition: none;
        transition: none;
    }

    /* Frente: ícone + título lado a lado. */
    .dc-features-group > .dc-features-item .dc-features-item-front {
        padding: 18px 16px 0;
    }
    .dc-features-item-front .inner-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        text-align: left;
    }
    .dc-features-group .icon {
        -ms-flex: 0 0 48px;
        flex: 0 0 48px;
        margin-bottom: 0;
        margin-right: 14px;
        line-height: 0;
    }
    /* O transition:all do tema existe para o efeito de hover do cartão.
       Sem hover no toque ele não serve para nada — e, por pegar "all",
       faria o max-width animar em qualquer recálculo de estilo. */
    /* Nem todo ícone é quadrado: o da LGPD é 326x512 e, limitado só na
       largura, ficava 48x75 e deixava a linha mais alta que as outras.
       Limitar a altura junto resolve o alinhamento, mas sozinho distorce:
       os atributos width/height do HTML valem como estilo de apresentação,
       então a imagem esticaria para 48x48. O object-fit desenha o ícone
       na proporção certa dentro da caixa de 48x48. */
    .dc-features-group .icon img {
        max-width: 48px;
        max-height: 48px;
        object-fit: contain;
        -webkit-transition: none;
        transition: none;
    }
    .dc-features-group .dc-features-title {
        font-size: 17px;
        line-height: 1.35;
    }

    /* Verso: sai do overlay absoluto e vira o texto da linha. O recuo à
       esquerda (78px = 16 do padding + 48 do ícone + 14 do respiro)
       alinha a descrição com o título. */
    .dc-features-group > .dc-features-item .dc-features-item-hover {
        position: static;
        top: auto;
        left: auto;
        width: auto;
        opacity: 1;
        visibility: visible;
        background: none;
        padding: 6px 16px 18px 78px;
    }
    /* A camada escura de multiply só fazia sentido sobre o overlay. */
    .dc-features-group > .dc-features-item .dc-features-item-hover::before {
        display: none;
    }
    .dc-features-item-hover .inner-box {
        text-align: left;
    }
    /* O verso repete o título (às vezes numa variação mais longa, como no
       card de LGPD). Na linha basta o título da frente. */
    .dc-features-item-hover .dc-features-title {
        display: none;
    }
    .dc-features-item-hover p {
        color: var(--body-text-color);
        font-size: 14px;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Tela de toque dispara :hover em alguns navegadores no primeiro
       toque. Sem isto a frente subiria 100% e a linha "piscaria". */
    .dc-features-group a:hover .dc-features-item-front {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
    .dc-features-group a:hover .dc-features-item-hover {
        top: auto;
        opacity: 1;
        visibility: visible;
    }

    /* Separador entre as linhas. O !important é necessário: abaixo de
       991px o tema zera as bordas com seletores :nth-child, de
       especificidade maior que a daqui. O margin-bottom negativo do tema
       (que sobrepunha as bordas na grade) comeria o separador. */
    .dc-features-group > .dc-features-item,
    .dc-features-group > .dc-features-item:nth-child(n),
    .dc-features-group > .dc-features-item:nth-child(2n),
    .dc-features-group > .dc-features-item:nth-child(3n) {
        margin-bottom: 0;
        border-bottom: 1px solid var(--light-gray) !important;
    }
    .dc-features-group > .dc-features-item:last-child {
        border-bottom: 0 !important;
    }
}