/* css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');

:root {
    --denki-orange: #FF8235;
    --denki-green: #84CC16;
    --denki-dark: #1e293b;
    --denki-slate: #64748b;
    --denki-bg: #fdfdfd;
}

body { font-family: 'Outfit', sans-serif; background-color: var(--denki-bg); color: var(--denki-dark); margin: 0; }

.no-scrollbar::-webkit-scrollbar { display: none; }

/* Hero con desvanecimiento (Efecto Buenavista/Betterware) */
.hero-split {
    background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}


/* Tarjetas Escenarios Horizontales */
.card-setup-horizontal {
    background: white;
    border-radius: 1.5rem;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 4px 25px rgba(0,0,0,0.03);
    transition: 0.3s ease;
}
.card-setup-horizontal:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); }

/* Grid de Productos Destacados */
.product-card {
    background: white;
    border-radius: 2.5rem;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    position: relative;
    transition: 0.3s;
    border: 1px solid #f1f5f9;
}
.product-card .tag {
    position: absolute;
    top: 1.5rem; left: 1.5rem;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 10px; font-weight: bold; color: white;
}

.btn-add {
    background: var(--denki-orange);
    color: white;
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 11px; font-weight: bold;
    box-shadow: 0 4px 15px rgba(255, 130, 53, 0.3);
}

/* Footer Promo */
.footer-promo {
    background: #f8fafc;
    border-radius: 4rem;
    padding: 5rem;
}

/* Botón Denki del Navbar */
.btn-denki {
    background: var(--denki-orange);
    border-radius: 50px;
    transition: 0.3s;
    box-shadow: 0 10px 20px -5px rgba(255, 130, 53, 0.3);
}