/* ============================================
   PAY2B - STYLESHEET UNIFICADO
   Mobile-First | Responsivo | Otimizado
   ============================================ */

/* ============================================
   1. RESET E BASE
   ============================================ */
body {
    font-family: 'Poppins', sans-serif;
}

/* ============================================
   2. CARROSSEL DE CLIENTES
   ============================================ */
.marquee {
    --gap: 2rem; /* Reduzido de 5rem para logos mais próximos */
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
    mask-image: linear-gradient(to right,
            transparent,
            rgba(0, 0, 0, 1) 10%,
            rgba(0, 0, 0, 1) 90%,
            transparent);
}

.marquee__group {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--gap);
    min-width: 100%;
    animation: scroll-x 25s linear infinite; /* Reduzido de 35s para mais dinamismo */
}

@keyframes scroll-x {
    from {
        transform: translateX(calc(-100% - var(--gap)));
    }

    to {
        transform: translateX(0);
    }
}

.client-logo {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    flex-shrink: 0; /* Evita que logos encolham */
}

/* Mobile: logos menores e mais visíveis */
@media (max-width: 768px) {
    .marquee {
        --gap: 1.5rem; /* Gap ainda menor no mobile */
    }

    .marquee__group {
        animation: scroll-x 20s linear infinite; /* Mais rápido no mobile */
    }
}

/* ============================================
   3. FORMULÁRIO DE CONTATO
   ============================================ */
#contato {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#contato.hidden {
    opacity: 0;
    visibility: hidden;
}

#contato:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

.form-container {
    max-height: 90vh;
    overflow-y: auto;
}

.form-input {
    transition: all 0.3s ease;
}

.form-input:focus {
    box-shadow: 0 0 0 2px rgba(127, 204, 40, 0.5);
}

.form-input.error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.form-input.success {
    border-color: #7FCC28;
}

/* Scrollbar customizada do formulário */
.form-container::-webkit-scrollbar {
    width: 8px;
}

.form-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.form-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.form-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Scrollbar customizada geral */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #7FCC28;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #0E9344;
}

/* ============================================
   4. ANIMAÇÕES DA HERO (SVG INTEGRAÇÃO)
   ============================================ */

/* Animação de Flutuação da Caixa */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
}

.float-animation {
    animation: float 6s ease-in-out infinite;
}

/* Animação de Movimento Circular Sutil para Logo Central */
@keyframes orbit {
    0% {
        transform: translate(0px, -7px);
    }
    12.5% {
        transform: translate(5px, -5px);
    }
    25% {
        transform: translate(7px, 0px);
    }
    37.5% {
        transform: translate(5px, 5px);
    }
    50% {
        transform: translate(0px, 7px);
    }
    62.5% {
        transform: translate(-5px, 5px);
    }
    75% {
        transform: translate(-7px, 0px);
    }
    87.5% {
        transform: translate(-5px, -5px);
    }
    100% {
        transform: translate(0px, -7px);
    }
}

.orbit-animation {
    animation: orbit 8s linear infinite;
    transform-origin: center;
}

.pulse-ring {
    animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
    0% {
        r: 40;
        opacity: 0.3;
    }

    50% {
        r: 60;
        opacity: 0.1;
    }

    100% {
        r: 40;
        opacity: 0.3;
    }
}

.node-bg {
    animation: nodePulse 3s ease-in-out infinite;
}

@keyframes nodePulse {
    0%,
    100% {
        opacity: 0.2;
        r: 30;
    }

    50% {
        opacity: 0.4;
        r: 32;
    }
}

.light-particle {
    opacity: 0.8;
}

.connection-line {
    transition: opacity 0.3s ease;
}

.node-group:hover .connection-line {
    opacity: 0.6 !important;
}

.pay-button {
    animation: payPulse 2s ease-in-out infinite;
}

@keyframes payPulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.payment-provider {
    animation: providerAppear 0.6s ease-out forwards;
    opacity: 0;
}

.payment-provider:nth-child(1) {
    animation-delay: 0.1s;
}

.payment-provider:nth-child(2) {
    animation-delay: 0.2s;
}

.payment-provider:nth-child(3) {
    animation-delay: 0.3s;
}

.payment-provider:nth-child(4) {
    animation-delay: 0.4s;
}

.payment-provider:nth-child(5) {
    animation-delay: 0.5s;
}

.payment-provider:nth-child(6) {
    animation-delay: 0.6s;
}

@keyframes providerAppear {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   5. RESPONSIVIDADE MOBILE-FIRST
   ============================================ */

/* Ajustes de Tipografia para Mobile */
@media (max-width: 767px) {
    /* Hero 1 - Títulos */
    #hero h1 {
        font-size: 1.75rem !important; /* 28px - antes era 48px (text-3xl) */
        line-height: 1.3 !important;
    }

    /* Hero 2 - Título Principal */
    section h2 {
        font-size: 1.5rem !important; /* 24px - antes era 48px (text-3xl) */
        line-height: 1.4 !important;
    }

    /* Cards e Subtítulos */
    h3 {
        font-size: 1.125rem !important; /* 18px - antes era 20px (text-lg) */
        line-height: 1.4 !important;
    }

    /* Parágrafos - reduzir um pouco */
    section p {
        font-size: 0.9375rem !important; /* 15px - antes era 16px */
        line-height: 1.6 !important;
    }

    /* Quote Forbes */
    blockquote {
        font-size: 0.9375rem !important; /* 15px */
        line-height: 1.5 !important;
    }

    /* Seção Clientes - Título */
    section h2.text-xl {
        font-size: 1.25rem !important; /* 20px */
    }
}

/* Mobile Extra Small (< 375px) */
@media (max-width: 374px) {
    .client-logo {
        height: 4rem !important; /* 64px - logos menores */
    }

    /* Títulos ainda menores para telas muito pequenas */
    #hero h1 {
        font-size: 1.5rem !important; /* 24px */
    }

    section h2 {
        font-size: 1.375rem !important; /* 22px */
    }
}

/* Mobile Small (375px - 639px) */
@media (min-width: 375px) and (max-width: 639px) {
    .client-logo {
        height: 5rem !important; /* 80px */
    }
}

/* Tablet (640px - 1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
    .client-logo {
        height: 6rem !important; /* 96px */
    }

    /* Tablet - tamanhos intermediários */
    #hero h1 {
        font-size: 2.25rem !important; /* 36px */
    }

    section h2 {
        font-size: 2rem !important; /* 32px */
    }
}

/* Desktop (>= 1024px) - Padrão do Tailwind */
/* Mantém os tamanhos originais do HTML */

/* ============================================
   6. ANIMAÇÕES DE SCROLL
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Delays progressivos para elementos dentro de uma seção */
.animate-fade-in-up:nth-child(1) {
    animation-delay: 0s;
}

.animate-fade-in-up:nth-child(2) {
    animation-delay: 0.1s;
}

.animate-fade-in-up:nth-child(3) {
    animation-delay: 0.2s;
}

.animate-fade-in-up:nth-child(4) {
    animation-delay: 0.3s;
}