/* ==========================================================
   calidad.css - ESTILOS PARA LA PÁGINA DE CALIDAD
   ========================================================== */

@font-face {
    font-family: 'Carnac';
    src: url('../fonts/carnac-bold.otf') format('opentype'),
         url('../fonts/carnac-bold.ttf') format('truetype');
    font-weight: 800; 
    font-style: normal;
}

.font-headingBold, h1, h2, h3, h4 { 
    font-family: 'Carnac', Arial, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.quality-card {
    transition: all 0.3s ease;
    border-bottom: 4px solid transparent;
    background-color: #ffffff;
}

.quality-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-bottom: 4px solid #C9EC51;
}

.ifac-quote {
    border-left: 6px solid #00BAB3;
    background: linear-gradient(90deg, #f5f5f6 0%, rgba(245, 245, 246, 0) 100%);
}

.registro-logo {
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: grayscale(100%) opacity(0.7);
}

.registro-logo:hover {
    transform: scale(1.1);
    filter: grayscale(0%) opacity(1);
}

/* ==========================================================
   ANIMACIONES ON-SCROLL (MODIFICADO PARA FUNCIONAR CON JS)
   ========================================================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Estado inicial: oculto y desplazado hacia abajo */
.animate-fade-in {
    opacity: 0; 
    transform: translateY(30px);
    visibility: hidden;
}

/* Clase que inyectará Javascript al hacer scroll */
.animate-fade-in.reveal-visible {
    visibility: visible;
    animation: fadeInUp 0.8s ease-out 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; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }