/**
 * Efecto de texto con gradiente animado
 * Inspirado en el estilo SAFAA con letras anchas y colores dinámicos
 */

/* Fuente ancha para títulos principales */
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Bebas+Neue&family=Anton&display=swap');

/* Clase para títulos con efecto gradiente animado */
.gradient-text-effect {
    font-family: 'Anton', 'Bebas Neue', sans-serif;
    font-weight: 900;
    letter-spacing: 0.05em;
    background: linear-gradient(
        90deg,
        #000000 0%,
        #1a4d7a 15%,
        #2d7ab8 30%,
        #1977cc 45%,
        #000000 60%,
        #1a4d7a 75%,
        #2d7ab8 90%,
        #000000 100%
    );
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 4s ease-in-out infinite;
    text-transform: uppercase;
    text-shadow: none;
}

/* Animación de flujo del gradiente */
@keyframes gradient-flow {
    0% {
        background-position: 0% center;
    }
    50% {
        background-position: 100% center;
    }
    100% {
        background-position: 0% center;
    }
}

/* Variante con más énfasis */
.gradient-text-effect-strong {
    font-family: 'Black Ops One', 'Anton', sans-serif;
    font-weight: 900;
    letter-spacing: 0.08em;
    background: linear-gradient(
        45deg,
        #000000 0%,
        #0a2f52 10%,
        #1977cc 25%,
        #2d7ab8 40%,
        #000000 55%,
        #1a4d7a 70%,
        #1977cc 85%,
        #000000 100%
    );
    background-size: 300% 300%;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-wave 5s ease-in-out infinite;
    text-transform: uppercase;
}

/* Animación tipo ola */
@keyframes gradient-wave {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 100% 50%;
    }
    50% {
        background-position: 50% 100%;
    }
    75% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Aplicar a los títulos principales de secciones */
.section-title h2.gradient-effect {
    font-family: 'Anton', sans-serif;
    font-weight: 900;
    letter-spacing: 0.06em;
    background: linear-gradient(
        135deg,
        #000000 0%,
        #1977cc 20%,
        #2d7ab8 40%,
        #000000 60%,
        #1977cc 80%,
        #000000 100%
    );
    background-size: 200% 200%;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-diagonal 6s ease-in-out infinite;
}

@keyframes gradient-diagonal {
    0%, 100% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
}

/* Efecto para títulos del carousel/banner */
.carousel-3d-caption h2,
.banner-parallax-title {
    font-family: 'Bebas Neue', 'Anton', sans-serif;
    font-weight: 900;
    letter-spacing: 0.08em;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(25, 119, 204, 1) 20%,
        rgba(45, 122, 184, 1) 40%,
        rgba(255, 255, 255, 0.95) 60%,
        rgba(25, 119, 204, 1) 80%,
        rgba(255, 255, 255, 0.9) 100%
    );
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 4s ease-in-out infinite;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

/* Efecto sutil para títulos de cards/tarjetas */
.quality-card h4,
.card h4 {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: linear-gradient(
        180deg,
        #000000 0%,
        #1977cc 50%,
        #000000 100%
    );
    background-size: 100% 200%;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-vertical 3s ease-in-out infinite;
}

@keyframes gradient-vertical {
    0%, 100% {
        background-position: center 0%;
    }
    50% {
        background-position: center 100%;
    }
}

/* Efecto de brillo/resplandor adicional */
.gradient-text-glow {
    position: relative;
    font-family: 'Anton', sans-serif;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gradient-text-glow::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    background: linear-gradient(
        90deg,
        #1977cc,
        #2d7ab8,
        #1977cc
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: blur(10px);
    opacity: 0.7;
    animation: gradient-flow 3s ease-in-out infinite;
}

/* Responsive - reducir intensidad en móviles */
@media (max-width: 768px) {
    .gradient-text-effect,
    .gradient-text-effect-strong,
    .section-title h2.gradient-effect {
        letter-spacing: 0.03em;
        animation-duration: 8s;
    }
}

/* Clase utilitaria para aplicar rápidamente */
.text-gradient-blue-black {
    font-weight: 700;
    background: linear-gradient(90deg, #000 0%, #1977cc 50%, #000 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 4s ease-in-out infinite;
}

/* ============================================
   EFECTO DE BORDES ANIMADOS EN TARJETAS
   ============================================ */

/* Tarjetas con borde gradiente animado */
.card,
.quality-card {
    position: relative;
    border: none;
    background: #fff;
    overflow: visible;
}

.card::before,
.quality-card::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(
        90deg,
        #87CEFA 0%,
        #C0C0C0 25%,
        #87CEFA 50%,
        #C0C0C0 75%,
        #87CEFA 100%
    );
    background-size: 200% 200%;
    border-radius: inherit;
    z-index: -1;
    animation: border-gradient-flow 4s ease-in-out infinite;
    opacity: 0.8;
}

/* Animación del borde */
@keyframes border-gradient-flow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Efecto hover más intenso */
.card:hover::before,
.quality-card:hover::before {
    opacity: 1;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    animation: border-gradient-pulse 2s ease-in-out infinite;
}

@keyframes border-gradient-pulse {
    0%, 100% {
        background-position: 0% 50%;
        filter: brightness(1);
    }
    50% {
        background-position: 100% 50%;
        filter: brightness(1.3);
    }
}

/* Borde animado para tarjetas de servicios */
.services .card::before {
    background: linear-gradient(
        135deg,
        #87CEFA 0%,
        #C0C0C0 20%,
        #87CEFA 40%,
        #C0C0C0 60%,
        #87CEFA 80%,
        #C0C0C0 100%
    );
    background-size: 300% 300%;
    animation: border-gradient-diagonal 5s ease-in-out infinite;
}

@keyframes border-gradient-diagonal {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}


@keyframes border-gradient-rotate {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

/* Borde para quality cards (más sutil) */
.quality-card::before {
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
        90deg,
        #87CEFA 0%,
        #C0C0C0 50%,
        #87CEFA 100%
    );
    background-size: 200% auto;
    animation: border-gradient-flow 3s ease-in-out infinite;
    opacity: 0.6;
}

/* Borde para news cards - Celeste y Plateado */
.news .card::before {
    background: linear-gradient(
        180deg,
        #87CEFA 0%,
        #C0C0C0 33%,
        #87CEFA 66%,
        #C0C0C0 100%
    );
    background-size: 100% 200%;
    animation: border-gradient-vertical 4s ease-in-out infinite;
}

/* Borde para agreements cards - Celeste y Plateado */
.agreements .card::before {
    background: linear-gradient(
        90deg,
        #87CEFA 0%,
        #C0C0C0 25%,
        #87CEFA 50%,
        #C0C0C0 75%,
        #87CEFA 100%
    );
    background-size: 200% 200%;
    animation: border-gradient-flow 4s ease-in-out infinite;
    opacity: 0.8;
}

@keyframes border-gradient-vertical {
    0% {
        background-position: center 0%;
    }
    50% {
        background-position: center 100%;
    }
    100% {
        background-position: center 0%;
    }
}

/* Efecto de brillo en el borde */
.card.gradient-glow::before,
.quality-card.gradient-glow::before {
    filter: blur(2px) brightness(1.2);
    opacity: 0.9;
}

/* Responsive - reducir efecto en móviles */
@media (max-width: 768px) {
    .card::before,
    .quality-card::before {
        opacity: 0.5;
        animation-duration: 6s;
    }
    
    .card:hover::before,
    .quality-card:hover::before {
        opacity: 0.7;
    }
}