/* =========================================
   CARMANO MOTORS - MOBILE OPTIMIZATION
   Arquivo: media.css
========================================= */

/* -----------------------------------------
   DISPOSITIVOS MÓVEIS (Tablets e Celulares até 768px)
----------------------------------------- */
@media (max-width: 768px) {
    /* 1. Tipografia (Ajuste fino para não quebrar palavras) */
    h1 {
        font-size: 2.5rem !important;
        line-height: 1.15 !important;
        word-break: break-word; /* Evita que palavras grandes vazem da tela */
    }

    h2 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    /* 2. Otimização de Performance no Hero */
    .hero-bg {
        /* No mobile, fundos "fixed" (parallax) causam travamentos ao rolar a tela.
           Isso força a imagem a rolar junto com a página, ficando fluido. */
        background-attachment: scroll !important;
        background-position: center 20% !important; /* Foca um pouco mais na parte superior do motor */
    }

    /* 3. Redução de Margens Internas (Paddings) */
    /* No celular, não precisamos de tanto espaço vazio entre as seções */
    section {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    /* 4. Ajustes nos Cards de Serviços e FAQ */
    .grid > div {
        padding: 1.5rem !important; /* Reduz o padding interno dos cards */
    }

    .faq-item {
        padding: 1.2rem 1rem !important; /* Aumenta a área de toque para o dedo */
    }

    .faq-item h3 {
        font-size: 1.1rem !important;
        padding-right: 1rem; /* Evita que o texto encoste na setinha */
    }

    /* 5. Alinhamento Centralizado no Rodapé */
    footer > .container > .grid > div {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    footer ul li {
        justify-content: center !important;
    }
}

/* -----------------------------------------
   CELULARES PEQUENOS (Até 480px - Ex: iPhone SE)
----------------------------------------- */
@media (max-width: 480px) {
    h1 {
        font-size: 2.2rem !important;
    }

    /* 6. Correção do Botão Flutuante (FAB) do WhatsApp */
    /* Evita que o botão fique em cima das barras de navegação do iOS/Android */
    a[href*="wa.me"].fixed {
        bottom: 1.5rem !important;
        right: 1rem !important;
        padding: 1rem !important;
    }

    /* No celular não existe "hover" (passar o mouse), então escondemos a tooltip
       "Fale com Especialista" para ela não ficar travada aberta na tela. */
    .FABtooltip {
        display: none !important;
    }
}

/* -----------------------------------------
   OTIMIZAÇÃO PARA TELAS DE TOQUE (TOUCH)
----------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    /* Desativa os efeitos de "pulo" (-translate-y) nos cards quando o usuário
       estiver apenas rolando a tela com o dedo, o que melhora a fluidez. */
    .hover\:-translate-y-2:hover {
        transform: none !important;
    }

    .hover\:shadow-2xl:hover {
        box-shadow: 0 8px 30px rgb(0 0 0 / 0.04) !important; /* Mantém a sombra original */
    }

    /* Garante que o botão do WhatsApp flutuante não fique pulsando infinitamente no dedo */
    .group-hover\:animate-pulse:hover {
        animation: none !important;
    }
}