/* Estado inicial: Invisible y desplazado a la izquierda */
.reveal-slide {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease-out;
    
}

/* Estado final: Visible y en su posición original */
.reveal-slide.active {
    opacity: 1;
    transform: translateX(0);
}

/* Estado inicial: invisible y un poco más abajo */
.reveal-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

/* Estado activo: visible y en su posición original */
.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}
/* Estado inicial de cada beneficio */
.benefit-item {
    opacity: 0;
    transform: translateX(-20px); /* Viene ligeramente desde la izquierda */
    transition: all 0.6s ease-out;
}

/* Estado cuando se activa */
.benefit-item.active {
    opacity: 1;
    transform: translateX(0);
}

/* Efecto sutil al pasar el mouse (opcional para interactividad) */
.benefit-item:hover {
    border-left: 3px solid #ff8c00; /* Línea naranja de la UNTELS */
    padding-left: 10px;
    transition: 0.3s;
}
/* Estado inicial: Invisible y desplazado a la izquierda */
.reveal-slide-right {
    opacity: 0;
    transform: translateX(-60px); /* Empieza fuera de su sitio a la izquierda */
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Suavidad Premium */
}

/* Estado activo: En su posición original */
.reveal-slide-right.active {
    opacity: 1;
    transform: translateX(0);
}
 

/* En móviles el mapa se verá debajo de la lista */
@media (max-width: 991px) {
    .sec-convenios-global { text-align: center; }
    .pais-item { justify-content: center; }
    .world-map-bg { max-height: 250px; }
}

  

/* Opcional: para evitar scroll horizontal en pantallas medias y grandes */
@media (max-width: 767px) {
    #facilidades-pago .cards-grid {
        grid-template-columns: 1fr; /* 1 tarjeta por fila en móviles */
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #facilidades-pago .cards-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 tarjetas en tablets */
    }
}

@media (min-width: 992px) {
    #facilidades-pago .cards-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 tarjetas en widescreens */
    }
}
 
  

  

.btn-solicitar:hover {
    background: var(--orange);
}

/* Patrón de puntos naranja */
.dot-pattern::before {
     color: var(--orange);
    font-size: 20px;
    line-height: 10px;
    letter-spacing: 5px;
}
   

/* Ajuste para móviles */
@media (max-width: 991px) {
    .card-destacada {
        border-radius: 20px;
    }
    .img-destacada-wrapper {
        height: 250px;
    }
}
 

    

.bg-dark-blue {
    background: linear-gradient(90deg, #002d5a 0%, #004e9b 100%);
}

.border-orange {
    border-color: #ff8c00 !important;
}


.fw-black {
    font-weight: 900;
}

/* Botón con brillo para que destaque */
.btn-orange-shiny {
    background-color: #ff8c00;
    color: white;
    font-weight: 800;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.4);
}

.btn-orange-shiny:hover {
    background-color: #e67e00;
    transform: scale(1.05);
    color: white;
}

/* --- ANIMACIÓN PAGO: REINICIO INMEDIATO --- */
@keyframes aparecerPago {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    /* Aparece rápido y se queda visible */
    10% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    /* Mantiene la visibilidad el 80% del tiempo */
    90% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    /* Se desvanece al final para reiniciar el ciclo */
    100% {
        opacity: 0;
        transform: scale(1.02);
    }
}

.anima-pago {
    opacity: 0;
    /* Ciclo de 3 segundos infinito */
    animation: aparecerPago 3s ease-in-out infinite;
    
    /* Calcula el retraso basado en la variable --delay del HTML */
    animation-delay: calc(var(--delay) * 0.15s);
    animation-fill-mode: both;
}

/* Efecto Hover para interactividad manual */
#facilidades-pago .card:hover {
    transform: translateY(-10px) !important;
    transition: transform 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    z-index: 10;
}


/* Estilo para el cursor parpadeante */
.cursor {
    font-weight: bold;
    color: white;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.prog-card-v2 {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

/* Cuando pasas el mouse: se eleva un poco y brilla */
.prog-card-v2:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* La imagen dentro se agranda suavemente */
.prog-img-wrapper img {
    transition: transform 0.5s ease;
}

.prog-card-v2:hover .prog-img-wrapper img {
    transform: scale(1.1);
}