.hero-slider {position: relative; width: 100%; height: 85vh; overflow: hidden;}
.slide {position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transform: scale(1.1); transition: opacity 1.2s ease-in-out, transform 6s ease-in-out;}
.slide.active {opacity: 1; transform: scale(1); z-index: 2;}
.slide { z-index: 1; }
.overlay {position: absolute; bottom: 15%; left: 10%; color: white; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); max-width: 500px; animation: fadeInUp 1.5s ease;}
.overlay h1 {font-size: 2.8em; margin-bottom: 0.3em;}
.overlay p {font-size: 1.3em; margin-bottom: 1em;}
.btn-hero {background: linear-gradient(90deg, #0078B7, #37C7E3); padding: 12px 25px; color: white; text-decoration: none; border-radius: 6px; font-weight: bold; box-shadow: 0 6px 18px rgba(55, 199, 227, 0.3); transition: background 0.3s, transform 0.3s;}
.btn-hero:hover {background: linear-gradient(90deg, #37C7E3, #49E3C6); transform: translateY(-2px);}
.btn-whatsapp {position: fixed; left: 25px; bottom: 25px; width: 60px; height: 60px; z-index: 9999; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); transition: transform 0.18s ease, box-shadow 0.18s ease; text-decoration: none;}
.btn-whatsapp i {color: #fff; font-size: 26px; line-height: 1;}
.btn-whatsapp:hover {transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);}

@keyframes fadeInUp {from { opacity: 0; transform: translateY(30px);} to { opacity: 1; transform: translateY(0); }}
@keyframes slideUp {from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; }}
#contenedor-productos > .col-lg-3 {flex: 0 0 33.3333%; max-width: 33.3333%;}
@media (max-width: 992px) {#contenedor-productos > .col-lg-3 {flex: 0 0 50%; max-width: 50%;}}
@media (max-width: 576px) {#contenedor-productos > .col-lg-3 {flex: 0 0 100%; max-width: 100%;}}