/* ===== MOBILE FIXES - VERSÃO FINAL LIMPA ===== */

@media (max-width: 768px) {

    /* ========== CORREÇÕES GLOBAIS ========== */
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .container {
        max-width: 100% !important;
        padding: 0 15px !important;
        overflow: visible !important;
        /* Libera brilho dos botões e cards */
    }

    section {
        overflow: visible !important;
        /* Libera sombras que transbordam a seção */
    }

    /* ========== CARD AZUL + BADGE VERMELHO ========== */
    /* ========== CARD AZUL + BADGE VERMELHO ========== */
    .pain-conclusion {
        padding: 25px 0 !important;
        max-width: 100% !important;
        /* Mesma largura dos cards vermelhos */
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
        border-radius: 15px !important;
    }

    .pain-conclusion p,
    .pain-conclusion .big-text {
        font-size: 1.3rem !important;
        /* Aumentado significativamente */
        line-height: 1.35 !important;
        padding: 0 10px !important;
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
        display: block !important;
        box-sizing: border-box !important;
        position: static !important;
    }


    /* BADGE VERMELHO - CENTRALIZADO */
    .stat-highlight {
        font-size: 1.45rem !important;
        /* Aumentado para manter destaque */
        font-weight: 800 !important;
        padding: 12px 10px !important;
        white-space: nowrap !important;
        display: block !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 10px 0 !important;
        text-align: center !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .big-text {
        text-align: left !important;
        padding: 0 !important;
    }

    /* ========== BOTÕES CTA ========== */
    .btn-cta-section,
    .btn-final-cta {
        background: var(--petlify-turquoise) !important;
        background-image: none !important;
        font-size: 1.05rem !important;
        padding: 18px 25px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
    }

    /* Esconder ícones dos botões */
    .btn-cta-section i,
    .btn-final-cta i,
    .ph-rocket-launch,
    i.ph-fill.ph-rocket-launch {
        display: none !important;
        visibility: hidden !important;
    }

    .btn-cta-section,
    .btn-final-cta {
        gap: 0 !important;
        justify-content: center !important;
    }

    /* ========== CARD WHATSAPP VERMELHO ========== */
    .whatsapp-section {
        padding: 30px 15px !important;
    }

    /* ========== CARD WHATSAPP VERMELHO ========== */
    .whatsapp-section {
        padding: 30px 15px !important;
    }

    .whatsapp-red-card {
        padding: 25px !important;
        background: #dc3545 !important;
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
        border-radius: 20px !important;
        border: 2px solid #a71d2a !important;
        box-shadow: 0 15px 40px rgba(220, 53, 69, 0.4) !important;
        /* Sombra mais profunda */
        width: 100% !important;
        margin: 0 auto !important;
        overflow: visible !important;
        /* Libera sombra do card */
    }

    .whatsapp-image {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto 20px auto !important;
        overflow: visible !important;
        /* Libera sombra do vídeo */
        padding: 10px !important;
        /* Respiro lateral para a sombra */
    }

    .whatsapp-video {
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4) !important;
        border-radius: 15px !important;
    }

    /* Removendo TOTALMENTE qualquer caixa ou fundo que prenda o texto */
    .whatsapp-text,
    .whatsapp-problem {
        background: transparent !important;
        background-color: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
    }

    .whatsapp-text p,
    .whatsapp-text .lead-text,
    .whatsapp-text strong,
    .whatsapp-text span,
    .whatsapp-text .big-text {
        color: white !important;
        /* Branco puro no fundo vermelho */
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
        text-align: left !important;
        background: transparent !important;
    }

    /* Ajustando a frase de impacto (ênfase) para não parecer um card separado */
    .whatsapp-text .emphasis-orange,
    .emphasis-orange {
        background: rgba(0, 0, 0, 0.2) !important;
        /* Levíssimo escurecimento apenas para dar profundidade */
        border-left: 4px solid #FFD700 !important;
        padding: 15px !important;
        margin-top: 25px !important;
        border-radius: 8px !important;
        color: white !important;
        display: block !important;
        white-space: normal !important;
        /* Retorna ao comportamento padrão para evitar quebra de layout */
        font-size: 0.95rem !important;
        /* Reduz fonte para tentar manter em uma linha sem forçar */
    }

    /* ========== CARDS FARO (ALINHADOS COM O VÍDEO) ========== */
    .robot-image img,
    .robot-image spline-viewer,
    .ai-cards-container .ai-card,
    .ai-card,
    div.ai-card,
    .faro-highlight-box,
    div.faro-highlight-box {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* Card laranja destaque - COMPACTADO E COM SOMBRA LIVRE */
    .faro-highlight-box {
        background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%) !important;
        border: 3px solid #FFD700 !important;
        box-shadow: 0 8px 30px rgba(255, 107, 53, 0.5) !important;
        padding: 25px !important;
        margin-bottom: 20px !important;
        /* Espaço para a sombra respirar */
    }

    .faro-text,
    .faro-text strong {
        color: white !important;
    }

    /* ========== CARDS BENEFÍCIOS (PROFISSIONALIZAÇÃO) ========== */
    .benefit-card,
    .professionalization-card-feature {
        overflow: visible !important;
        padding: 35px 18px !important;
    }

    .professionalization-card-feature h3 {
        font-size: 1.4rem !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
        overflow: visible !important;
    }

    /* Logos não cortadas */
    .benefit-card img,
    .professionalization-card-feature img {
        max-width: 95% !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 auto 15px auto !important;
        display: block !important;
    }

    .benefits-grid {
        overflow: visible !important;
    }

    /* ALINHAR E COMPACTAR CARDS COM O VÍDEO DO FARO */
    .faro-feature,
    .ai-demo,
    .solution-cta {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
    }

    .ai-demo {
        margin-bottom: 20px !important;
        /* Aproxima os cards de IA do card laranja */
    }

    .solution-cta {
        padding-top: 5px !important;
        padding-bottom: 30px !important;
        /* Espaço para a sombra do card pulsar */
        margin-bottom: 0 !important;
        overflow: visible !important;
    }

    .solution-section {
        background: linear-gradient(to bottom, #FFFFFF 0%, #F9FAFB 100%) !important;
        padding-bottom: 20px !important;
        /* Espaço para a sombra inferior */
        overflow: visible !important;
    }

    .solution-image {
        overflow: visible !important;
        padding: 10px !important;
        margin-bottom: 25px !important;
    }

    .solution-video {
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
        border-radius: 15px !important;
    }

    .ai-card {
        padding: 20px !important;
        margin-bottom: 20px !important;
    }

    /* Remover animações e atrasos do Robô IA */
    .robot-card-feature,
    .robot-visual,
    .spline-robot {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .spline-robot {
        transform: scale(1.4) !important;
    }

    /* ========== FORMULÁRIO ========== */
    .form-section {
        padding: 40px 15px !important;
    }

    .signup-form-wrapper {
        max-width: 90% !important;
        width: 90% !important;
        margin: 0 auto !important;
        padding: 30px 20px !important;
        box-sizing: border-box !important;
    }

    .form-group {
        width: 100% !important;
    }

    /* ========== FOOTER ========== */

    .footer-middle-row {
        flex-direction: column !important;
        gap: 15px !important;
        margin-top: 15px !important;
    }

    .footer-brand-section {
        width: 100% !important;
    }

    /* Logo da mesma largura do texto da tagline - LINHA ÚNICA */
    .footer-logo-img {
        max-width: 290px !important;
        /* Aumentado para acomodar texto em linha única */
        width: 100% !important;
        display: block !important;
        margin: 0 auto 12px auto !important;
    }

    .footer-tagline {
        width: 290px !important;
        white-space: nowrap !important;
        /* Força linha única */
        margin: 0 auto 20px auto !important;
        text-align: center !important;
        font-size: 0.9rem !important;
        /* Levíssimo toque para garantir que cabe em telas menores */
    }

    .faro-logo-tiny,
    img.faro-logo-tiny,
    .footer-faro img {
        max-width: 120px !important;
        width: 120px !important;
        height: auto !important;
        display: inline-block !important;
    }

    .footer-address {
        font-size: 0.7rem !important;
        line-height: 1.6 !important;
    }

    .footer-social {
        justify-content: center !important;
        gap: 25px !important;
        margin-top: 15px !important;
    }

    /* ========== ESPAÇAMENTOS AGRESSIVOS ========== */
    .pain-section {
        padding-bottom: 0 !important;
    }

    .section-cta-container {
        margin-top: 35px !important;
        margin-bottom: 30px !important;
        /* Espaço para a sombra do botão respirar */
        padding: 10px 0 !important;
        overflow: visible !important;
    }

    .chat-section {
        padding-top: 40px !important;
        padding-bottom: 10px !important;
    }

    .solution-section {
        padding-top: 15px !important;
        /* Sobe o conteúdo da solução */
    }

    .chat-header {
        margin-bottom: 20px !important;
    }

    .cta-section {
        padding-top: 20px !important;
    }

    /* ========== AJUSTES GERAIS ========== */
    h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
    }

    p {
        line-height: 1.6 !important;
    }

    video,
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Badge atenção branco no mobile */
@media (max-width: 768px) {

    .alert-badge,
    .urgency-badge {
        background: white !important;
        color: #1a1a1a !important;
        border: 2px solid #FFD700 !important;
    }
}

/* Badge Membro Fundador BRANCO no mobile */
@media (max-width: 768px) {
    .highlight-founder {
        background: white !important;
        color: #1a1a1a !important;
        padding: 4px 10px !important;
        border-radius: 4px !important;
        font-weight: bold !important;
        white-space: nowrap !important;
        /* Mantém palavras juntas */
        display: inline-block !important;
    }
}

/* Botão CTA BRANCO no card vermelho */
@media (max-width: 768px) {

    .urgency-box .btn-final-cta,
    .btn-final-cta {
        background: white !important;
        color: #dc3545 !important;
        /* Vermelho alerta */
        border: 3px solid #FFD700 !important;
    }
}

/* Animação pulsante no botão CTA */
@keyframes pulse-cta-yellow {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 5px 25px rgba(255, 215, 0, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 8px 35px rgba(255, 215, 0, 0.7);
    }
}

@media (max-width: 768px) {

    .btn-final-cta,
    .btn-cta-section {
        animation: pulse-cta-yellow 2s ease-in-out infinite !important;
        box-shadow: 0 5px 25px rgba(255, 215, 0, 0.4) !important;
    }

    .hero-image {
        overflow: visible !important;
        padding: 15px !important;
        margin-top: 25px !important;
    }

    .chaos-video {
        box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4) !important;
        border-radius: 20px !important;
        border: 4px solid var(--petlify-orange) !important;
    }
}

/* Esconder linha decorativa amarela no mobile */
@media (max-width: 768px) {

    .urgency-box::before,
    .urgency-box::after,
    .urgency-section::before,
    .urgency-section::after {
        display: none !important;
    }
}

/* Remover TODOS elementos decorativos no mobile */
@media (max-width: 768px) {

    .final-urgency::before,
    .final-urgency::after,
    section::before,
    section::after {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .urgency-box {
        position: relative !important;
        z-index: 10 !important;
    }
}

/* FIX DEFINITIVO: Logo Petlify não cortar no card preto */
@media (max-width: 768px) {

    .professionalization-card-feature,
    .benefit-card {
        overflow: visible !important;
        padding-top: 45px !important;
        padding-bottom: 35px !important;
    }

    .professionalization-card-feature img,
    .benefit-card img {
        max-width: 90% !important;
        margin: 0 auto 20px auto !important;
        display: block !important;
        overflow: visible !important;
    }

    .benefits-grid,
    .benefits-section {
        overflow: visible !important;
    }
}

/* Aproximar ícone do título */
@media (max-width: 768px) {

    .professionalization-card-feature img,
    .benefit-card img {
        margin-bottom: 10px !important;
    }

    .professionalization-card-feature h3,
    .benefit-card h3 {
        margin-top: 0 !important;
    }
}

/* FORÇAR logo não cortar - padding MAIOR */
@media (max-width: 768px) {

    .professionalization-card-feature,
    .benefit-card {
        padding-top: 60px !important;
        clip-path: none !important;
    }

    .professionalization-card-feature img,
    .benefit-card img {
        clip-path: none !important;
        transform: none !important;
    }

    /* COMPACTAÇÃO FINAL AGRESSIVA: FORM -> FAQ (MOBILE) */
    .form-section {
        padding-bottom: 5px !important;
    }

    .faq-section {
        padding-top: 5px !important;
    }

    .faq-header {
        margin-bottom: 10px !important;
    }

    /* AJUSTE DE TAMANHO DA FOTO NO CARD PROFISSIONALIZAÇÃO (MOBILE) */
    .professionalization-bg {
        background-size: auto 70% !important;
        background-position: center 5% !important;
    }

    /* ELIMINAR QUINAS NO CARD DE PROFISSIONALIZAÇÃO */
    .professionalization-bg,
    .professionalization-overlay {
        border-radius: 20px !important;
    }

    /* EXPANDIR GRÁFICO ATÉ A LARGURA TOTAL NO MOBILE */
    .analytics-card-feature {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
        /* Permite que o brilho respire */
    }

    .analytics-content {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .analytics-visual {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        /* REMOVIDO HIDDEN PARA NÃO CORTAR SOMBRA */
    }

    .analytics-img {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: block !important;
    }
}

/* REDUZIR ESPAÇAMENTO NA SEÇÃO DE BENEFÍCIOS IA (MOBILE) */
@media (max-width: 768px) {
    .benefits-section {
        background: #F9FAFB !important;
        /* Garante continuidade da cor da fusão */
        padding-top: 20px !important;
        /* Respiro após a fusão */
        padding-bottom: 30px !important;
        margin-top: -1px !important;
        /* Remove qualquer friso branco residual */
    }

    .benefits-section .section-title {
        margin-top: 0 !important;
        margin-bottom: 15px !important;
    }
}

/* COMPACTAÇÃO ENTRE SEÇÕES (FORM -> FAQ) - SEM GRUDAR ELEMENTOS INTERNOS */
@media (max-width: 768px) {

    /* Externo: Aproxima o FAQ do fim do formulário (Signup Section) */
    .signup-section {
        padding-bottom: 0 !important;
    }

    .faq-section {
        padding-top: 0 !important;
    }

    .faq-header {
        margin-top: 0 !important;
        margin-bottom: 15px !important;
    }

    /* Interno: Mantém espaços necessários entre os campos do formulário */
    .form-section {
        margin-bottom: 25px !important;
        padding-bottom: 20px !important;
    }

    .signup-form {
        padding-bottom: 40px !important;
    }

    .form-disclaimer {
        margin-top: 15px !important;
        margin-bottom: 0 !important;
    }

    /* CORREÇÃO ESTREITAMENTO FORMULÁRIO MOBILE */
    .signup-form {
        padding: 25px 15px !important;
        /* Reduzido de 40px para 15px lat. */
        width: 100% !important;
    }

    .signup-form-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .btn-submit {
        padding: 15px 10px !important;
        /* Mais compacto */
        font-size: 1rem !important;
        /* Fonte levemente menor para não quebrar */
        white-space: normal !important;
        /* Permite quebra se necessário mas tenta evitar */
    }
}

/* CSS para controle do rodapé responsivo */
.mobile-break {
    display: none;
}

@media (max-width: 768px) {
    .desktop-separator {
        display: none !important;
    }

    .mobile-break {
        display: block !important;
    }

    .footer-address {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        padding: 0 10px;
    }

    .footer-address .contact-text {
        display: block;
        /* Força nova linha */
        margin-top: 5px;
        font-size: 0.8rem;
    }
}


.footer-address .contact-text {
    white-space: nowrap;
    /* Tentar forçar linha única se couber */
    font-size: 0.75rem;
    /* Contatos menores para tentar caber numa linha */
    display: inline-block;
    margin-top: 5px;
}
}
}