/* --- RESET CORPORATIVO --- */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Open Sans', sans-serif; }
body { background-color: #f8fafc; color: #1e293b; overflow-x: hidden; line-height: 1.5; }

/* ANIMACIÓN DE FLOTACIÓN (ÚNICA Y GLOBAL) */
@keyframes floatVaca {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* NAV PC */
#vaca-nav-pc { background: #001e3c; height: 85px; width: 100%; position: fixed; top: 0; z-index: 9999; border-bottom: 3px solid #FFCC00; display: flex; align-items: center; }
.container-vaca { max-width: 1200px; margin: 0 auto; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
.logo-vaca img { height: 45px; }
.menu-links-vaca { display: flex; list-style: none; gap: 15px; align-items: center; }
.menu-links-vaca > li { position: relative; padding: 32px 0; }
.menu-links-vaca > li > a { color: #fff; text-decoration: none; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.menu-links-vaca > li > a:hover { color: #FFCC00; }

/* MEGAMENU */
.mega-menu { position: absolute; top: 85px; left: 50%; transform: translateX(-50%); background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,0.2); display: none; border-top: 4px solid #FFCC00; z-index: 10001; padding: 15px; border-radius: 0 0 10px 10px; }
.menu-links-vaca > li:hover .mega-menu { display: block; }
.mega-col ul { list-style: none; }
.mega-col ul li a { display: block; padding: 12px 18px; color: #334155; text-decoration: none; font-size: 14px; font-weight: 700; transition: 0.2s; white-space: nowrap; }
.mega-col ul li a:hover { background: #f1f5f9; color: #001e3c; padding-left: 22px; }

/* HERO */
.hero { padding: 190px 0 120px 0; background: radial-gradient(circle at 10% 50%, #003366 0%, #001e3c 100%); color: #fff; }
.hero-image img { filter: drop-shadow(0 25px 50px rgba(0,0,0,0.5)); animation: floatVaca 4s ease-in-out infinite; }

@media (min-width: 1025px) {
    .hero .container-vaca { max-width: 1350px !important; width: 95%; position: relative; display: flex; align-items: center; }
    .hero-text { flex: 0 0 65%; text-align: left; }
    .hero-text h1 { font-size: 3.8rem; font-weight: 900; line-height: 1.1; margin-bottom: 25px; }
    .mobile-yellow { color: #FFCC00; }
    .hero-text p { font-size: 1.4rem; max-width: 800px; margin-bottom: 40px; }
    .hero-image { flex: 0 0 35%; display: flex; justify-content: flex-end; }
    .hero-image img { width: 100%; max-width: 480px; }
}

/* MÓVIL RESTRUCTURADO */
@media (max-width: 1024px) {
    #vaca-nav-pc { display: none; }
    #mobile-header-vaca { display: flex; background: #001e3c; height: 75px; position: fixed; top: 0; width: 100%; z-index: 10000; justify-content: space-between; align-items: center; padding: 0 20px; border-bottom: 2px solid #FFCC00; }
    #mobile-header-vaca i { color: #FFCC00; font-size: 30px; }
    
    .hero { padding: 140px 20px 60px; text-align: center; }
    .hero-flex { display: flex; flex-direction: column; align-items: center; }
    .hero-text h1 { font-size: 2.8rem !important; }
    .mobile-yellow { color: #FFCC00 !important; display: block; margin-top: 8px; }
    
    /* VAQUITA ANIMADA EN MÓVIL */
    .hero-image { display: flex !important; width: 100% !important; justify-content: center !important; margin-top: 30px; }
    .hero-image img { max-width: 250px !important; }
}

/* OVERLAY MENÚ MÓVIL (SCROLLABLE) */
#vaca-overlay-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #001e3c; z-index: 20001; display: none; flex-direction: column; }
.overlay-scroll { width: 100%; height: 100%; overflow-y: auto; padding: 80px 40px; }
.close-vaca { position: absolute; top: 25px; right: 25px; color: #fff; font-size: 35px; z-index: 20002; }
.mobile-links { list-style: none; text-align: left; }
.mobile-links li { margin: 15px 0; }
.mobile-links a { color: #fff; text-decoration: none; font-size: 18px; font-weight: 700; }
.mobile-cat { color: #FFCC00; font-size: 13px; font-weight: 800; text-transform: uppercase; margin-top: 30px !important; border-bottom: 1px solid rgba(255,255,0,0.2); padding-bottom: 5px; }

/* BOTÓN CLIENTES PC */
.btn-client-vaca { background: #FFCC00; color: #001e3c !important; padding: 10px 16px; border-radius: 5px; font-weight: 800; text-decoration: none; }
.btn-plan { display: inline-block; background: #FFCC00; color: #001e3c; padding: 18px 50px; text-decoration: none; font-weight: 800; border-radius: 50px; transition: 0.3s; }