/* css/styles.css */

/* --- GLOBALES --- */
html, body { margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; width: 100% !important; }

/* --- NAVBAR GLASS --- */
.glass-nav{
    background: rgba(0,0,0,0.65); /* menos transparente para destacar el logo */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-bottom: 1px solid rgba(255,255,255,0.15);

    transition: all 0.4s ease;
}


/* NAVBAR CUANDO HACE SCROLL */

.glass-nav.scrolled{

    background: rgba(255,255,255,0.95);

    border-bottom: 1px solid rgba(0,0,0,0.05);

    box-shadow: 0 4px 30px rgba(0,0,0,0.08);

    padding-top: 10px;
    padding-bottom: 10px;
}

/* --- SCROLL REVEAL --- */
.reveal { opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.reveal.active { opacity: 1; transform: translateY(0); }
.delay-100 { transition-delay: 0.1s; } 
.delay-200 { transition-delay: 0.2s; } 
.delay-300 { transition-delay: 0.3s; }

/* --- HERO --- */
/* Cambiado a un verde oscuro acorde al nuevo banner para el overlay */
.hero-overlay { background: linear-gradient(to bottom, rgba(22, 90, 40, 0.85) 0%, rgba(22, 90, 40, 0.2) 50%, rgba(22, 90, 40, 0.9) 100%); }

/* --- MARQUESINA (SLIDER) --- */
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.slider { width: 100%; overflow: hidden; position: relative; }
.slide-track { display: flex; width: max-content; animation: scroll 40s linear infinite; }
.slide-track:hover { animation-play-state: paused; }
.slider::before, .slider::after { background: linear-gradient(to right, white 0%, rgba(255,255,255,0) 100%); content: ""; height: 100%; position: absolute; width: 100px; z-index: 2; pointer-events: none; }
.slider::after { right: 0; top: 0; transform: rotateZ(180deg); } .slider::before { left: 0; top: 0; }

/* --- IMAGE REVEAL --- */
/* Actualizado al nuevo verde claro #2A9D48 */
.image-reveal-container { position: relative; overflow: hidden; }
.image-reveal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #2A9D48; z-index: 10; transform: scaleX(1); transform-origin: right; transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1); }
.image-reveal-img { transform: scale(1.2); transition: transform 1.5s cubic-bezier(0, 0, 0.2, 1); }
.image-reveal-container.active .image-reveal-overlay { transform: scaleX(0); transform-origin: left; }
.image-reveal-container.active .image-reveal-img { transform: scale(1); }

/* --- CARDS (Servicios & Noticias) --- */
.service-card { transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; }
.service-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.4); border-color: rgba(253, 185, 19, 0.3); }
.service-card:hover .service-icon { background-color: #FDB913; color: #165A28; transform: rotate(360deg); } /* Actualizado color de icono */

.immersive-card { overflow: hidden; position: relative; }
.immersive-card img { transition: transform 0.8s ease; }
.immersive-card:hover img { transform: scale(1.1); }
.immersive-card .content-overlay { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%); transition: all 0.5s ease; transform: translateY(10px); }
/* Hover verde claro con opacidad */
.immersive-card:hover .content-overlay { transform: translateY(0); background: linear-gradient(to top, rgba(42, 157, 72, 0.9) 0%, rgba(0,0,0,0.2) 100%); }

/* --- TIMELINE (Proceso) --- */
.timeline-line { position: absolute; top: 0; bottom: 0; width: 2px; background: #E5E7EB; left: 24px; transform: translateX(-50%); transition: left 0.3s ease; }
/* Barra de progreso actualizada */
.timeline-progress { position: absolute; top: 0; width: 2px; background: #2A9D48; height: 0%; transition: height 0.1s linear; left: 24px; transform: translateX(-50%); }
@media (min-width: 768px) { .timeline-line, .timeline-progress { left: 50%; } }
.step-marker { transition: all 0.3s ease; border: 2px solid #E5E7EB; background: white; z-index: 20; }
.step-marker.active { background-color: #FDB913; border-color: #FDB913; color: #165A28; transform: scale(1.1); box-shadow: 0 0 15px rgba(253, 185, 19, 0.4); }

/* --- CONTACTO & FORMS --- */
.glass-form { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); }
.modern-input { background: transparent; border: none; border-bottom: 2px solid rgba(255, 255, 255, 0.2); color: white; padding: 15px 0; transition: all 0.3s; }
.modern-input:focus { outline: none; border-bottom-color: #FDB913; background: rgba(255,255,255,0.05); padding-left: 10px; }
.modern-input::placeholder { color: rgba(255, 255, 255, 0.4); }

/* --- WHATSAPP PREMIUM --- */
.wa-wrapper { position: fixed; bottom: 30px; right: 30px; z-index: 100; display: flex; align-items: center; gap: 10px; }
/* Gradiente ajustado al nuevo verde */
.wa-btn { width: 65px; height: 65px; border-radius: 50%; background: linear-gradient(135deg, #2A9D48 0%, #4ADE80 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 32px; box-shadow: 0 10px 25px -5px rgba(42, 157, 72, 0.6); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; cursor: pointer; border: 2px solid rgba(255,255,255,0.1); }
.wa-btn:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 15px 35px -5px rgba(42, 157, 72, 0.8); }
.wa-btn i { transition: transform 0.3s ease; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.wa-btn:hover i { transform: rotate(15deg) scale(1.1); }
.wa-status { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background-color: #FDB913; border: 2px solid #165A28; border-radius: 50%; z-index: 10; }
.wa-status::after { content: ''; position: absolute; top: -2px; left: -2px; width: 16px; height: 16px; border-radius: 50%; background-color: #FDB913; opacity: 0.7; z-index: -1; animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite; }
.wa-label { background: rgba(255, 255, 255, 0.95); color: #2A9D48; padding: 8px 16px; border-radius: 12px; font-weight: 700; font-size: 14px; box-shadow: 0 5px 20px rgba(0,0,0,0.15); opacity: 0; transform: translateX(20px); transition: all 0.4s ease; pointer-events: none; white-space: nowrap; font-family: 'Montserrat', sans-serif; }
.wa-wrapper:hover .wa-label { opacity: 1; transform: translateX(0); }