/* VARIABLES DE COLOR - Optimizadas para Accesibilidad */
:root { 
    --sky: #015a8a; 
    --sky-light: #0284c7;
    --emerald: #065f46; 
    --slate-900: #0f172a; 
    --slate-700: #1e293b; 
    --slate-500: #475569;
}

/* BASE */
body { 
    font-family: 'Inter', sans-serif; 
    margin: 0; 
    background-color: #f8fafc; 
    color: var(--slate-900); 
    line-height: 1.5; 
    -webkit-font-smoothing: antialiased; 
}
.max-w-7xl { max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.bg-pattern { 
    background-image: radial-gradient(#cbd5e1 0.5px, transparent 0.5px); 
    background-size: 24px 24px; 
}

/* NAVEGACIÓN */
nav { 
    position: sticky; top: 0; z-index: 50; 
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    border-bottom: 1px solid #e2e8f0; 
    height: 80px; 
}
.brand-name { font-size: 1.5rem; font-weight: 800; color: var(--slate-900); }
.btn-nav { 
    color: white; background: var(--sky); 
    padding: 0.75rem 1.5rem; border-radius: 9999px; 
    text-decoration: none; font-weight: 700; font-size: 0.9rem; 
}

/* HERO */
header { padding: 3rem 0; }
h1 { font-size: 2.5rem; font-weight: 800; color: var(--slate-900); line-height: 1.1; margin-bottom: 1.5rem; letter-spacing: -0.02em; }
.text-sky { color: var(--sky-light); }
.badge { 
    background: #f1f5f9; color: var(--slate-700); 
    padding: 0.5rem 1rem; border-radius: 9999px; 
    font-size: 0.875rem; font-weight: 700; border: 1px solid #cbd5e1; 
    display: inline-block; margin-bottom: 1rem;
}
.hero-text { font-size: 1.25rem; color: var(--slate-700); margin-bottom: 2.5rem; max-width: 500px; }
.hero-btns { gap: 1rem; flex-wrap: wrap; }

/* BOTONES */
.btn-wa { 
    background-color: var(--emerald); color: white; 
    padding: 1.25rem 2rem; border-radius: 1rem; 
    text-decoration: none; font-weight: 700; 
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); transition: 0.3s; 
}
.btn-wa:hover { background-color: #046c4e; transform: translateY(-2px); }
.btn-outline { 
    padding: 1.25rem 2rem; border: 2px solid var(--slate-500); 
    border-radius: 1rem; text-decoration: none; color: var(--slate-700); 
    font-weight: 700; transition: 0.3s; 
}

.hero-img { 
    border-radius: 2rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2); 
    width: 100%; max-width: 320px; height: auto; border: 4px solid white; 
}

/* SECCIONES */
.section-white { background: white; padding: 4rem 0; }
.section-title { text-align: center; font-size: 2.25rem; font-weight: 800; margin-bottom: 3rem; color: var(--slate-900); }
.grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card { background: #f8fafc; padding: 2.5rem; border-radius: 2rem; border: 1px solid #e2e8f0; transition: 0.3s; }
.card h3 { color: var(--slate-900); margin-top: 0; font-size: 1.5rem; }
.card p { color: var(--slate-700); }

/* MARCAS - CON ENLACES SEO */
.section-brands { padding: 3rem 0; background: #f1f5f9; }
.brands-flex { display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem; align-items: center; }
.brand-item { 
    font-weight: 900; font-size: 1.5rem; color: var(--slate-500); 
    text-decoration: none; transition: 0.3s; 
}
.brand-item:hover { color: var(--sky-light); transform: scale(1.1); }

/* FOOTER */
footer { padding: 4rem 0; text-align: center; border-top: 1px solid #e2e8f0; background: white; }
.footer-logo { font-weight: 800; color: var(--slate-900); margin-bottom: 0.5rem; font-size: 1.25rem; }
.footer-text { color: var(--slate-700); margin-bottom: 0.25rem; }
.footer-subtext { color: var(--slate-500); font-size: 0.9rem; }
.footer-copy { font-size: 0.8rem; margin-top: 3rem; color: var(--slate-500); }

/* WHATSAPP FLOTANTE */
.wa-float { 
    position: fixed; bottom: 20px; right: 20px; 
    background: var(--emerald); color: white; 
    width: 60px; height: 60px; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.3); z-index: 100; text-decoration: none; 
}

@media (min-width: 1024px) {
    h1 { font-size: 3.5rem; }
    .hero-container { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 4rem; align-items: center; }
}