/* reset básico */
        * { margin:0; padding:0; box-sizing:border-box; }
        html,body { height:100%; font-family: League spartan, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; background:#f5f5f5; color:#111; }

        /* layout geral container */
        .container { max-width:1200px; margin:0 auto; padding:20px 24px 40px; }

        /* header */
        header { position:fixed; width:100%; top:0; left:0; background:#837a79; z-index:1000; box-shadow:0 2px 10px rgba(0,0,0,0.05); }
        .header-content { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px; }
        .logo-container { display:flex; align-items:center; gap:12px; }
        .logo-img { height:44px; }
        .header-buttons { display:flex; gap:12px; align-items:center; }
        .btn-download {     
                background: #ffffff;
                color: #666;
                padding: 8px 12px;
                cursor: pointer;
                font-size: 14px;
                border-radius: 16px;
                border: none;
            
        }
        
        /* ========================================
           HOVER NO HERO - TÍTULOS ANIMADOS
           ======================================== */
        
        .hero h1 {
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                        letter-spacing 0.4s ease,
                        text-shadow 0.3s ease;
            cursor: default;
        }
        
        .hero h1:hover {
            transform: scale(1.05) translateY(-5px);
            letter-spacing: 0.02em;
            text-shadow: 0 10px 30px rgba(131, 122, 121, 0.3);
        }
        
        .hero h2 {
            transition: transform 0.4s ease,
                        color 0.3s ease,
                        letter-spacing 0.3s ease;
            cursor: default;
        }
        
        .hero h2:hover {
            transform: translateY(-3px);
            color: #837a79;
            letter-spacing: 0.01em;
        }
        
        /* Animação suave ao entrar na página */
        .hero h1,
        .hero h2 {
            animation: fadeInUp 0.8s ease-out;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .ia-content {
            font-family: League spartan, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        
        h3#ia-title {
            margin-bottom: 22px;
        }
        
        
        
        .registration h2 {
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                        color 0.3s ease,
                        letter-spacing 0.3s ease,
                        text-shadow 0.3s ease;
            cursor: default;
        }
        
        .registration h2:hover {
            transform: scale(1.03) translateY(-3px);
            color: #837a79;
            letter-spacing: 0.01em;
            text-shadow: 0 8px 20px rgba(131, 122, 121, 0.15);
        }
        
        .registration-subtitle {
            transition: transform 0.3s ease,
                        color 0.3s ease,
                        letter-spacing 0.2s ease;
            cursor: default;
            display: inline-block;
        }
        
        .registration-subtitle:hover {
            transform: translateY(-2px);
            color: #4a90e2;
            letter-spacing: 0.005em;
        }
        
        /* Animação de entrada para os títulos da registration */
        .registration h2,
        .registration-subtitle {
            animation: fadeInDown 0.7s ease-out;
        }
        
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ========================================
           ADICIONE ESTAS REGRAS NO SEU layout.css
           ======================================== */
        
        /* HERO ESTILO APPLE */
        .hero { 
            margin-top: 60px; 
            height: 216px; 
            background: white; 
            color: #1d1d1f; 
            background-size: cover; 
            position: relative; 
            overflow: hidden; 
            display: flex; 
            flex-direction: column;
            align-items: center; 
            justify-content: center; 
            gap: 8px;
            border-bottom-left-radius: 20px; 
            border-bottom-right-radius: 20px; 
        }
        
        .hero h1 { 
            font-size: 56px; 
            text-align: center; 
            line-height: 1.07143; 
            max-width: 920px; 
            margin: 0 20px; 
            font-weight: 600;
            letter-spacing: -0.005em;
            background: linear-gradient(135deg, #1d1d1f 0%, #837a79 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .hero h2 {
            font-size: 28px;
            text-align: center;
            line-height: 1.28577;
            max-width: 820px;
            margin: 0 20px;
            font-weight: 400;
            color: #6e6e73;
            letter-spacing: -0.003em;
        }
        
        /* HOVER IMAGEM IA_VISUAL */
        img.ia_visual {
            width: inherit;
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
                        box-shadow 0.4s ease,
                        filter 0.4s ease;
            border-radius: 20px;
            cursor: pointer;
        }
        
        img.ia_visual:hover {
            transform: scale(1.08) translateY(-8px) rotate(-2deg);
            box-shadow: 0 30px 60px rgba(74, 144, 226, 0.35);
            filter: brightness(1.1);
        }
        
        /* RESPONSIVO MOBILE */
        @media (max-width: 768px) {
            .hero {
                height: 280px;
                padding: 20px;
                gap: 6px;
            }
            
            .hero h1 {
                font-size: 32px;
                line-height: 1.125;
                letter-spacing: -0.003em;
            }
            
            .hero h2 {
                font-size: 19px;
                line-height: 1.4211;
            }
        }
        .btn-android { background:#00c853; color:#fff; border:none; padding:10px 18px; border-radius:20px; cursor:pointer; font-weight:600; }

        /* hero */
        .hero { margin-top:60px; height:360px; background: white; color: #837a79; background-size: cover; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; border-bottom-left-radius:20px; border-bottom-right-radius:20px; }
        .hero h1 { font-size:36px; text-align:center; line-height:1.1; max-width:920px; margin:0 20px; font-weight:400; text-shadow:2px 2px 12px rgba(0,0,0,0.2); }

        /* phone mockup & decorative */
        .phone-mockup { position:absolute; bottom:-40px; left:50%; transform:translateX(-50%); width:200px; height:380px; background:#111; border-radius:28px; padding:12px; box-shadow:0 30px 60px rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center; }
        .phone-screen { width:100%; height:100%; border-radius:18px; color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; }

        /* registration/cards */
        .registration { background:#f5f5f5;border-radius:12px;text-align: center;}
        .registration h2 { font-size:28px; margin-bottom:8px; color:#111; }
        .registration-subtitle { color:#666; margin-bottom:28px; }
        .cards-container { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
        .card { width:360px; height:360px; border-radius:18px; overflow:hidden; position:relative; cursor:pointer; transition:transform .28s, box-shadow .28s; background:#333; color:#fff; display:flex; align-items:flex-end; }
        .card-image { position:absolute; inset:0; object-fit:cover; filter:brightness(.90);width: inherit; }
        .card-content { position:relative; padding:24px; width:100%; text-align:left; }
        .card-title { font-size:20px; font-weight:700; margin-bottom:8px; }
        .card-link { font-size:13px; color:rgba(255,255,255,0.9); text-decoration:none; }
        .card:hover { transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,0.15); background:#ececec; }
        #newsContainer {
            scrollbar-width: none;
        }

        /* IA / news / footer basic styles (kept minimal) */
        .ia-section { display:flex; gap:28px; align-items:center; padding:48px 24px; margin-top:28px; background:#fafafa; border-radius:12px; }
        .ia-card { width:420px; height:220px; border-radius:14px; background:linear-gradient(135deg,#4a90e2,#357abd); box-shadow:0 20px 40px rgba(74,144,226,0.15); }
        .news-section { padding:28px 24px; margin-top:28px; background:#fff; border-radius:12px; }
        .news-container { display:flex; gap:16px; overflow-x:auto; padding-bottom:6px; }
        .news-card { min-width:280px; border-radius:10px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,0.06); background:#fff; }
        footer { background:#111; color:#fff; padding:28px 24px; margin-top:28px; border-radius:12px; }

        /* POPUP modal styles (essenciais) */
        .popup { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); align-items:center; justify-content:center; z-index:2000; padding:20px; }
        .popup-content { width:100%; max-width:760px; background:#fff; border-radius:12px; padding:22px; position:relative; box-shadow:0 30px 80px rgba(0,0,0,0.35); max-height:90vh; overflow:auto; }
        .popup .close { position:absolute; right:18px; top:14px; font-size:28px; cursor:pointer; color:#666; }
        .popup h2 { margin-bottom:12px; font-size:20px; }

        /* form basic */
        form { display:block; }
        .form-section { margin-bottom:18px; display:flex; gap:12px; flex-wrap:wrap; }
        .form-group { width:100%; display:flex; flex-direction:column; margin-bottom:8px; }
        .form-group > label.form-label, .form-group > label { font-size:13px; margin-bottom:6px; color:#333; }
        .form-input, .form-select, .form-textarea { padding:10px 12px; border:1px solid #e3e3e3; border-radius:8px; font-size:14px; outline:none; transition:box-shadow .15s, border-color .15s; width:100%; }
        .form-input:focus, .form-select:focus, .form-textarea:focus { border-color:#4a90e2; box-shadow:0 6px 18px rgba(74,144,226,0.08); }
        .form-textarea { min-height:90px; resize:vertical; }
        .helper-text { font-size:12px; color:#8a8a8a; margin-top:6px; }
        .file-upload-wrapper { display:flex; gap:12px; align-items:center; }
        .file-upload-label { background:#f4f6f8; padding:10px 14px; border-radius:8px; cursor:pointer; border:1px dashed #d7d7d7; font-size:14px; color:#444; }
        .file-upload-input { display:none; }
        .file-preview img { max-width:120px; border-radius:8px; display:block; margin-top:8px; }

        /* pricing */
        .pricing-section { background:linear-gradient(180deg,#fafafa,#fff); border-radius:8px; padding:14px; margin:12px 0; border:1px solid #f0f0f0; }
        .pricing-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
        .pricing-title { font-weight:700; color:#222; }
        .pricing-value { font-weight:800; color:#35c54f; }
        .benefits-list { margin-top:8px; list-style:disc; padding-left:18px; color:#666; font-size:13px; }

        .payment-info { font-size:13px; color:#444; margin:10px 0; }

        .submit-btn { display:inline-block; background:linear-gradient(45deg,#28a745,#20c997); color:#fff; padding:12px 18px; border-radius:10px; border:none; cursor:pointer; font-weight:700; width: 100%;}

        .footer-text { font-size:12px; color:#777; margin-top:12px; }
        
        /* ========= SCROLLBAR PERSONALIZADA ========== */
        /* Para Chrome, Edge, Safari */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
              background: #f5f5f5;
        }
        
        ::-webkit-scrollbar-track {
            background: #f5f5f5;
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 10px;
            transition: background 0.3s ease;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
        
        
        
        /* Para Firefox */
        * {
            scrollbar-width: thin;
            scrollbar-color: #c1c1c1 #f1f1f1;
        }
        
        /* ========= HOVER NOS NEWS CARDS ========== */
        .news-card {
            transition: transform 0.35s ease, box-shadow 0.35s ease;
            cursor: pointer;
        }
        
        img.ia_visual {
            width: inherit;
        }
        
        .news-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 28px rgba(0,0,0,0.12);
        }
        
        /* ========= HOVER NOS PARÁGRAFOS DENTRO DOS NEWS CARDS ========== */
        .news-card p {
            transition: transform 0.3s ease;
        }
        
        .news-card:hover p {
            transform: translateY(-2px);
        }
        
        /* ========= HOVER GLOBAL EM PARÁGRAFOS CLICÁVEIS ========== */
        p {
            transition: transform 0.25s ease;
        }
        
        p:hover {
            transform: translateY(-1px);
        }

        /* validation messages */
        .validation-message { font-size:12px; color:#777; margin-top:6px; display:none; }
        .validation-message.error { color:#c0392b; display:block; }
        .validation-message.success { color:#2ecc71; display:block; }

        /* responsive */
        @media (max-width:900px) {
            .cards-container { flex-direction:column; align-items:center; }
            .hero { height:260px; }
            .phone-mockup { display:none; }
            .popup-content { padding:18px; }
        }
        
        /* =========================
           RESPONSIVIDADE MOBILE
           ========================= */
        @media (max-width: 768px) {
        
          /* HERO */
          .hero {
              height: 200px;
              padding: 20px;
          }
          .hero h1 {
              font-size: 20px;
              line-height: 1.2;
          }
          .phone-mockup {
              display: none !important;
          }
        
          /* CONTAINER */
          .container {
              padding: 40px 16px;
          }
        
          /* CARDS */
          .cards-container {
              flex-direction: column;
              gap: 16px;
              align-items: center;
          }
          .card {
              width: 100%;
              max-width: 340px;
              height: 100%;
          }
        
          /* POPUPS */
          .popup {
              padding: 0 !important;
              justify-content: flex-end !important;
          }
          .popup-content {
              width: 100% !important;
              max-width: 100% !important;
              height: 90vh !important;
              border-radius: 14px 14px 0 0 !important;
              padding: 18px !important;
              overflow-y: auto;
          }
          .close {
              font-size: 32px;
              top: 8px;
              right: 16px;
          }
        
          /* FORM */
          .form-section {
              flex-direction: column;
              gap: 0 !important;
          }
          .form-group {
              width: 100% !important;
          }
          .form-input,
          .form-select,
          .form-textarea {
              width: 100% !important;
              font-size: 15px;
          }
          .submit-btn {
              width: 100% !important;
              font-size: 17px;
              padding: 14px;
          }
        
          /* HEADER */
          .header-content {
              flex-direction: column;
              gap: 6px;
              text-align: center;
          }
          .btn-android {
              padding: 8px 14px;
              border-radius: 16px;
              font-size: 14px;
          }
        
          /* FOOTER */
          footer {
              text-align: center;
              font-size: 14px;
          }
          footer div {
              flex-direction: column;
              gap: 10px;
          }
        }
        /* Correção da IA Section estourando na direita */
        .ia-section {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center; /* Centraliza */
            gap: 20px;
            width: 100%;
            overflow: hidden; /* Evita overflow horizontal */
        }
        
        .ia-visual {
            flex: 1 1 300px;
            display: flex;
            justify-content: center;
        }
        
        .ia-card {
            width: 100%;
            max-width: 320px;
            height: 200px;
            border-radius: 16px;
        }
        
        /* Mobile */
        @media (max-width: 768px) {
          .ia-section {
              padding: 30px 16px;
              text-align: center;
          }
        
          .ia-content {
              width: 100%;
          }
        
          .ia-visual {
              width: 100%;
              justify-content: center;
          }
        
          .ia-card {
              width: 100% !important;
              max-width: 280px; /* não deixa estourar */
              margin: 0 auto;
              transform: none !important; /* cancela qualquer deslocamento */
          }
        }
        
                    /* ========= HOVER NOS CARDS ========== */
            .card {
                transition: transform 0.35s ease, box-shadow 0.35s ease;
                cursor: pointer;
            }
            
            .card:hover {
                transform: translateY(-6px) scale(1.03);
                box-shadow: 0 14px 32px rgba(0,0,0,0.18);
            }
            
            /* Glow leve ao redor */
            .card::after {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: inherit;
                background: linear-gradient(45deg, #00eaff44, #6f00ff44);
                opacity: 0;
                transition: opacity .35s ease;
            }
            
            
            /* ========= HOVER NOS BOTÕES ========== */
            
            button,
            .submit-btn,
            .btn-ia,
            .btn-android {
                transition: 0.3s ease;
                cursor: pointer;
            }
            
            button:hover,
            .submit-btn:hover,
            .btn-ia:hover,
            .btn-android:hover {
                filter: brightness(1.16);
                transform: translateY(-2px);
            }
            
            /* Para deixar mais premium */
            button:active,
            .submit-btn:active,
            .btn-ia:active,
            .btn-android:active {
                transform: translateY(1px);
                filter: brightness(0.9);
            }
            
            
            /* ========= HOVER NOS INPUTS ========== */
            
            .form-input,
            .form-select,
            .form-textarea {
                transition: border 0.25s ease, box-shadow 0.25s ease;
            }
            
            .form-input:hover,
            .form-select:hover,
            .form-textarea:hover {
                border-color: #7a49ff;
                box-shadow: 0 0 0 3px rgba(122, 73, 255, 0.25);
            }
            
            
            /* ========= HOVER NO FECHAR POPUP (X) ========== */
            .close {
                transition: 0.3s ease;
            }
            
            .close:hover {
                color: #ff4a4a;
                transform: scale(1.2);
            }

               /* Footer */
/* ========================================
   FOOTER RESPONSIVO MOBILE
   ======================================== */

/* Desktop - mantém o layout atual */
footer {
    background: #1a1a1a;
    color: white;
    padding: 60px 0 30px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 40px;
    padding: 0 100px;
}

.footer-column h3 {
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 600;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 12px;
}

.footer-column ul li a {
    color: #999;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s, transform 0.3s ease;
    display: inline-block;
}

.footer-column ul li a:hover {
    color: white;
    transform: translateY(-3px);
    cursor: pointer;
}

.footer-bottom {
    border-top: 1px solid #333;
    padding: 30px 100px 0 100px;
    text-align: center;
}

/* ========================================
   RESPONSIVO TABLET (768px - 1024px)
   ======================================== */
@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        padding: 0 40px;
    }

    .footer-bottom {
        padding: 30px 40px 0 40px;
    }
}

/* ========================================
   RESPONSIVO MOBILE (até 768px)
   ======================================== */
@media (max-width: 768px) {
    footer {
        padding: 40px 0 20px;
        margin-top: 40px;
        border-radius: 0; /* Remove border-radius no mobile */
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 20px;
        margin-bottom: 30px;
    }

    .footer-column {
        text-align: center;
    }

    .footer-column h3 {
        font-size: 18px;
        margin-bottom: 15px;
        font-weight: 700;
    }

    .footer-column ul li {
        margin-bottom: 10px;
    }

    .footer-column ul li a {
        font-size: 15px;
        padding: 8px 0;
        display: block;
    }

    .footer-column ul li a:hover {
        font-size: 16px;
        transform: translateY(-2px);
    }

    .footer-bottom {
        padding: 20px 20px 0 20px;
        text-align: center;
    }

    .footer-bottom img {
        height: 35px !important;
        margin-bottom: 12px !important;
    }

    .footer-bottom p {
        font-size: 11px !important;
        line-height: 1.5;
        color: #999 !important;
    }
}

/* ========================================
   RESPONSIVO MOBILE PEQUENO (até 480px)
   ======================================== */
@media (max-width: 480px) {
    footer {
        padding: 30px 0 15px;
    }

    .footer-content {
        gap: 25px;
        padding: 0 16px;
    }

    .footer-column h3 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .footer-column ul li a {
        font-size: 14px;
    }

    .footer-bottom {
        padding: 15px 16px 0 16px;
    }
}

/* =========================
   PÁGINAS DE STATUS (sucesso/pendente/erro/obrigado)
   ========================= */
.status-wrapper {
    margin-top: 100px; /* compensa header fixo */
    padding: 24px;
    display: flex;
    justify-content: center;
}

.status-card {
    width: 100%;
    max-width: 760px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.06);
    text-align: center;
}

.status-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}
.status-icon.success { background: linear-gradient(45deg,#28a745,#20c997); }
.status-icon.pending { background: linear-gradient(45deg,#f59e0b,#fbbf24); }
.status-icon.error   { background: linear-gradient(45deg,#dc3545,#e74c3c); }

.status-title {
    font-size: 24px;
    font-weight: 700;
    color: #111;
    margin-bottom: 8px;
}

.status-message {
    color: #444;
    margin-bottom: 4px;
}

.status-hint {
    color: #777;
    font-size: 14px;
    margin-bottom: 18px;
}

.status-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-block;
    background: linear-gradient(45deg,#28a745,#20c997);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    text-decoration: none;
    font-weight: 700;
}

.btn-outline {
    display: inline-block;
    background: transparent;
    color: #111;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid #ddd;
    text-decoration: none;
    font-weight: 700;
}

.btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-outline:hover { border-color: #bbb; transform: translateY(-1px); }

@media (max-width: 768px) {
    .status-wrapper { margin-top: 80px; padding: 16px; }
    .status-card { padding: 22px 18px; }
    .status-title { font-size: 20px; }
}

/* ===========================
   POPUP MERCADO PAGO
   =========================== */

#popup-pagamento .popup-content{
    width:95vw;
    max-width:1200px;
    height:95vh;
    max-height:none;
    padding:10px;
    overflow:hidden;
}

#payment-frame{
    width:100% !important;
    height:calc(95vh - 70px) !important;
    border:none;
    border-radius:12px;
}

@media (max-width:768px){

    #popup-pagamento{
        padding:0;
    }

    #popup-pagamento .popup-content{
        width:100vw;
        height:100vh;
        border-radius:0;
        max-width:none;
    }

    #payment-frame{
        height:calc(100vh - 70px) !important;
    }
}