/* 
 * ==========================================
 * VARIÁVEIS E ESTILOS GLOBAIS
 * ==========================================
 */
:root {
    --honda-red: #e60000;
    --honda-red-hover: #cc0000;
    --bg-light: #f4f7fb;
    --card-bg: #ffffff;
    --card-border: #e2e8f0;
    --modal-bg: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --whatsapp-green: #10b981;
    --whatsapp-hover: #059669;
    --repasse-orange: #f59e0b;
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.15s ease-out;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    -webkit-tap-highlight-color: transparent; 
}

::-webkit-scrollbar { width: 8px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-light); }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

body { 
    background-color: var(--bg-light); 
    color: var(--text-main); 
    padding-bottom: 100px; 
    overflow-x: hidden; 
    width: 100%; 
}
body.modal-open { overflow: hidden; touch-action: none; }

/* Animações Globais */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUpFade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn { 0% { transform: scale(0.95); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); } 70% { box-shadow: 0 0 0 15px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }

/* Botões Globais */
.btn-base { border: none; text-decoration: none; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; transition: var(--transition-smooth); cursor: pointer; text-align: center; will-change: transform; }
.btn-header-wa, .btn-modal-cta, .btn-card, .btn-how-it-works { border-radius: 50px; }
.btn-consortium-wa, .btn-consortium-repasse { border-radius: 14px; padding: 16px; font-size: 1rem; color: white; transition: var(--transition-fast); }
.btn-card { width: 100%; padding: 12px; font-size: 0.9rem; transition: var(--transition-fast); }
.btn-modal-cta { padding: 14px; font-size: 0.9rem; color: white; transition: var(--transition-fast); }
.btn-base:active { transform: scale(0.96); }

.btn-header-wa, .btn-modal-red, .btn-card-red { background-color: var(--honda-red); color: white; box-shadow: 0 4px 10px rgba(230,0,0,0.2); }
.btn-header-wa { padding: 14px 32px; font-size: 0.95rem; white-space: nowrap; box-shadow: 0 6px 16px rgba(230, 0, 0, 0.25); }
.btn-modal-green, .btn-consortium-wa { background-color: var(--whatsapp-green); box-shadow: 0 4px 10px rgba(16,185,129,0.2); color: white;}
.btn-modal-orange { background-color: var(--repasse-orange); color: white; box-shadow: 0 4px 10px rgba(245, 158, 11, 0.25); }
.btn-consortium-wa { box-shadow: 0 6px 15px rgba(16, 185, 129, 0.25); }
.btn-consortium-repasse { background-color: var(--repasse-orange); box-shadow: 0 6px 15px rgba(245, 158, 11, 0.25); }
.btn-card-outline { background-color: #f8fafc; color: var(--text-main); border: 1px solid var(--card-border); }

@media (hover: hover) {
    .btn-header-wa:hover, .btn-modal-red:hover, .btn-card-red:hover { background-color: var(--honda-red-hover); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(230,0,0,0.3); }
    .btn-header-wa:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(230, 0, 0, 0.35); }
    .btn-modal-green:hover, .btn-consortium-wa:hover { background-color: var(--whatsapp-hover); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(16,185,129,0.3); }
    .btn-modal-orange:hover, .btn-consortium-repasse:hover { background-color: #d97706; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35); }
    .btn-card-outline:hover { background-color: #f1f5f9; border-color: #cbd5e1; transform: translateY(-2px); }
}

/* Widget Flutuante WhatsApp */
.floating-widget { position: fixed; bottom: 30px; right: 30px; background-color: var(--whatsapp-green); color: white; padding: 12px 24px; border-radius: 50px; display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4); cursor: pointer; z-index: 100; text-decoration: none; font-weight: 800; font-size: 0.95rem; animation: pulse 2.5s infinite cubic-bezier(0.4, 0, 0.2, 1); transition: var(--transition-smooth); }
@media (hover: hover) { .floating-widget:hover { transform: translateY(-4px) scale(1.02); animation: none; background-color: var(--whatsapp-hover); } }
.floating-widget img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid white; object-fit: cover; }

body.loading{
opacity:0;
visibility:hidden;
overflow:hidden;
}
body.loaded{
opacity:1;
visibility:visible;
transition:opacity .25s ease;
}