:root {
    --honor-black: #050505;
    --honor-dark: #121212;
    --text-accent: #85B200; /* Tu color secundario */
    --brand-blue: #000C48;  /* Tu color principal */
    --glass: rgba(255, 255, 255, 0.1);
}

body {
    background-color: var(--honor-black);
    font-family: 'Inter', sans-serif;
}

.text-accent { color: var(--text-accent) !important; }

/* HERO SECTION */
.honor-landing-hero {
    height: 100vh;
    background-image: url('https://www.honor.com/content/dam/honor/global/blog/2024/honor-magic6-pro-camera-test/blog-list-image.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.9) 20%, transparent 100%);
}

/* BOTONES ESTILO HONOR */
.btn-honor-fill {
    background: #fff;
    color: #000;
    border-radius: 50px;
    padding: 12px 35px;
    font-weight: 600;
    border: none;
    transition: 0.3s;
}

.btn-honor-fill:hover {
    background: var(--text-accent);
    transform: translateY(-3px);
}

.btn-honor-glass {
    background: var(--glass);
    backdrop-filter: blur(10px);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50px;
    padding: 12px 35px;
}

/* CARDS */
.honor-card {
    background: var(--honor-dark);
    border: 1px solid #222;
    border-radius: 24px;
    overflow: hidden;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.honor-card:hover {
    transform: scale(1.03);
    border-color: var(--text-accent);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.honor-card-img {
    padding: 40px;
    text-align: center;
    background: radial-gradient(circle, #1a1a1a 0%, #050505 100%);
}

.honor-card-img img {
    max-height: 250px;
    transition: 0.5s;
}

.honor-card:hover img {
    transform: translateY(-10px);
}

.honor-card-body { padding: 25px; }

/* ANIMACIONES */
.floating-phone {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}

.py-huge { padding: 120px 0; }
.bg-dark-gradient {
    background: linear-gradient(180deg, #050505 0%, var(--brand-blue) 100%);
}