/* ============================================
   Hero - Sección principal de pantalla completa
   Banner con imagen de fondo con zoom animado,
   overlay oscuro, contenido centrado con título,
   subtítulo, texto descriptivo y botones de acción.
   ============================================ */

.hero {
    position: relative; min-height: 100vh; display: flex;
    align-items: center; justify-content: center; overflow: hidden;
}
.hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    animation: heroZoom 20s ease-in-out infinite;
}
.hero-slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0; animation: heroFade 21s ease-in-out infinite;
}
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 7s; }
.hero-slide:nth-child(3) { animation-delay: 14s; }
@keyframes heroFade {
    0% { opacity: 0; }
    4% { opacity: 1; }
    30% { opacity: 1; }
    33% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes heroZoom {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%);
}
.hero-content {
    position: relative; z-index: 1; text-align: center;
    max-width: 800px; padding: 0 20px;
}
.hero-subtitle {
    color: var(--primary); font-size: 16px; letter-spacing: 4px;
    text-transform: uppercase; margin-bottom: 16px; font-weight: 700;
}
.hero-title {
    color: var(--white); font-size: clamp(36px, 6vw, 72px);
    margin-bottom: 24px; line-height: 1.1;
}
.hero-text {
    color: rgba(255,255,255,0.85); font-size: 18px; margin-bottom: 40px;
    line-height: 1.8;
}
.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }