/* ==========================================================
   index.css - ESTILOS PARA LA PÁGINA DE INICIO (COMPLETA)
   ========================================================== */

@font-face { font-family: 'Carnac'; src: url('../fonts/carnac-regular.otf'); font-weight: normal; }
@font-face { font-family: 'Carnac'; src: url('../fonts/carnac-bold.otf'); font-weight: 700; }
@font-face { font-family: 'Carnac'; src: url('../fonts/carnac-extrabold.otf'); font-weight: 800; }

html { scroll-behavior: smooth; }

body { font-family: 'Roboto', sans-serif; color: #2B303A; }

.font-headingBold, h1, h2, h3, h4 { 
    font-family: 'Carnac', sans-serif !important; 
    font-weight: 700 !important; 
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* OVERLAY HERO */
.hero-overlay {
    background: linear-gradient(to right, rgba(43,48,58,0.95) 0%, rgba(43,48,58,0.6) 50%, rgba(43,48,58,0.2) 100%);
}

/* BOTONES */
.btn-glow {
    background-color: #C9EC51; color: #2B303A; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.05em; padding: 1rem 2.5rem; border-radius: 9999px; display: inline-block; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 15px rgba(201, 236, 81, 0.3);
}
.btn-glow:hover { background-color: #ffffff; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3); }

.btn-outline {
    border: 2px solid #C9EC51; color: #C9EC51; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.05em; padding: 1rem 2.5rem; border-radius: 9999px; display: inline-block; transition: all 0.3s ease;
}
.btn-outline:hover { background-color: #C9EC51; color: #2B303A; }

/* TARJETAS DE SERVICIOS */
.service-card {
    background-color: #ffffff; border: 1px solid #f3f4f6; border-radius: 8px; padding: 2.5rem 2rem;
    transition: all 0.4s ease; display: flex; flex-direction: column; height: 100%; position: relative; overflow: hidden;
}
.service-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background-color: #dfe0e2; transition: all 0.4s ease;
}
.service-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1); border-color: transparent; }
.service-card:hover::before { background-color: #00BAB3; }
.service-card.growth-hover:hover::before { background-color: #C9EC51; }

.service-icon {
    width: 60px; height: 60px; background-color: #f5f5f6; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; margin-bottom: 1.5rem; color: #2B303A; transition: all 0.4s ease;
}
.service-card:hover .service-icon { background-color: #2B303A; color: #C9EC51; }
.service-card.growth-hover:hover .service-icon { background-color: #2B303A; color: #00BAB3; }

/* INDUSTRIAS HOVER */
.industry-item { border-left: 3px solid #dfe0e2; padding-left: 1rem; transition: all 0.3s ease; }
.industry-item:hover { border-left-color: #00BAB3; transform: translateX(5px); }

/* INSIGHTS / NOTICIAS */
.insight-card { border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid #f3f4f6; transition: all 0.4s ease; }
.insight-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1); }
.insight-img-wrapper { overflow: hidden; height: 220px; }
.insight-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.insight-card:hover .insight-img { transform: scale(1.05); }

/* ==========================================================
   ANIMACIONES ON-SCROLL (SUAVES Y ELEGANTES)
   ========================================================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { opacity: 0; transform: translateY(15px); visibility: hidden; }
.animate-fade-in.reveal-visible { visibility: visible; animation: fadeInUp 1.2s ease forwards; }

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }