/* =======================================================================
   InnPay Upgrade — capa de sofisticación (sobre el tema Appway)
   Añade micro-interacciones, hover, transiciones y detalles "tecno-premium"
   sin modificar la estructura ni los colores base del tema.
   ======================================================================= */

/* ---------- 1. Botones CTA: lift + glow morado ---------- */
.theme-btn,
.btn-style-one,
.btn-style-two,
.subscribe-section .subscribe-form button,
a.theme-btn,
.elementor-button-link,
.elementor-widget-button .elementor-button {
    transition: transform .3s cubic-bezier(.22,.61,.36,1),
                box-shadow .3s ease,
                background-color .3s ease,
                color .3s ease !important;
    will-change: transform;
}
.theme-btn:hover,
.btn-style-one:hover,
.btn-style-two:hover,
.elementor-button-link:hover,
.elementor-widget-button .elementor-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 28px -8px rgba(90, 14, 234, .45) !important;
}

/* ---------- 2. Tarjetas de servicio: hover elevation + sombra ---------- */
.application-setup .single-item {
    transition: transform .35s cubic-bezier(.22,.61,.36,1),
                box-shadow .35s ease,
                border-color .35s ease;
    will-change: transform;
    border-radius: 12px;
}
.application-setup .single-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px -12px rgba(90, 14, 234, .28);
}

/* ---------- 3. Tarjetas de beneficios (image-box): hover sutil ---------- */
.elementor-widget-image-box .elementor-image-box-wrapper {
    transition: transform .3s ease;
}
.elementor-widget-image-box:hover .elementor-image-box-wrapper {
    transform: translateY(-5px);
}
.elementor-widget-image-box .elementor-image-box-img img {
    transition: transform .4s ease, filter .4s ease;
}
.elementor-widget-image-box:hover .elementor-image-box-img img {
    transform: scale(1.05);
    filter: drop-shadow(0 8px 16px rgba(90, 14, 234, .18));
}

/* ---------- 4. Títulos con sweep/shine animado (tecno sutil) ---------- */
.main-footer .footer-top .widget-title:before {
    animation: innpay-shine 3s ease infinite;
}
@keyframes innpay-shine {
    0%   { background-position: 200% 0; }
    60%  { background-position: -100% 0; }
    100% { background-position: -100% 0; }
}

/* ---------- 5. Smooth scroll global ---------- */
html {
    scroll-behavior: smooth;
}

/* ---------- 6. Transición base para enlaces y elementos interactivos ---------- */
a {
    transition: color .25s ease;
}

/* ---------- 7. Respaldo (banda de confianza): hover de bullets ---------- */
.respaldo-section li {
    transition: transform .25s ease;
}
.respaldo-section li:hover {
    transform: translateX(6px);
}

/* ---------- 8. Reveal base para elementos con .wow (evita parpadeo) ---------- */
.wow {
    visibility: hidden;
}
.wow.animated {
    visibility: visible;
}

/* ---------- 9. Header: sombra sutil al hacer scroll (dinamismo) ---------- */
.main-header.scrolled {
    box-shadow: 0 6px 24px -8px rgba(20, 10, 60, .18);
}
.main-header {
    transition: box-shadow .35s ease;
}

/* ---------- 10. Imagen hero / feature: leve zoom-in animado ---------- */
.image-column .image,
.image_block_14 .image,
.about-section .image-column img {
    transition: transform .6s ease;
}
.image-column:hover .image,
.about-section .image-column:hover img {
    transform: scale(1.03);
}

/* ---------- 11. Botones CTA: gradiente animado + glow pulsante (vibrante) ---------- */
.theme-btn,
.btn-style-one,
.btn-style-two,
.elementor-widget-button .elementor-button,
.subscribe-section .theme-btn {
    background-image: linear-gradient(120deg, #162673 0%, #270DFF 40%, #3743FF 70%, #162673 100%) !important;
    background-size: 250% auto !important;
    animation: innpay-gradient-shift 4s linear infinite !important;
}
@keyframes innpay-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.theme-btn,
.btn-style-one,
.btn-style-two,
.elementor-widget-button .elementor-button {
    animation: innpay-gradient-shift 4s linear infinite, innpay-pulse-glow 3s ease-in-out infinite !important;
}
@keyframes innpay-pulse-glow {
    0%, 100% { box-shadow: 0 6px 20px -6px rgba(90, 14, 234, .45); }
    50%      { box-shadow: 0 10px 32px -4px rgba(122, 63, 242, .65); }
}

/* ---------- 12. Logos de tarjetas (carousel): glow + float sutil ---------- */
.clients-style-two .image-box img {
    transition: transform .4s ease, filter .4s ease;
    filter: drop-shadow(0 4px 10px rgba(90, 14, 234, .12));
}
.clients-style-two .image-box:hover img {
    transform: translateY(-6px) scale(1.06);
    filter: drop-shadow(0 10px 22px rgba(90, 14, 234, .3));
}

/* ---------- 13. Gradiente de fondo animado sutil en el hero ---------- */
.elementor-section[data-settings*="stretch_section"] .elementor-widget-image,
.main-slider,
.feature-style-six {
    position: relative;
}

/* ---------- 14. count-box (01-04 de servicios): animación de entrada dinámica ---------- */
.application-setup .count-box {
    transition: transform .35s ease, background-color .35s ease, color .35s ease;
}
.application-setup .single-item:hover .count-box {
    transform: scale(1.15) rotate(-6deg);
}

/* ---------- 15. Fondo animado tecnológico gris tenue (partículas/circuitos) ---------- */
/* asegurar posicionamiento del hero para anclar los pseudo-elementos */
.banner-style-five {
    position: relative;
    overflow: hidden;
}
/* el contenido del hero debe quedar por encima del fondo animado */
.banner-style-five .container {
    position: relative;
    z-index: 5;
}
/* capa de red/grid sutil sobre el hero */
.banner-style-five::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(120, 120, 135, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 120, 135, 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 1;
    animation: innpay-grid-drift 16s linear infinite;
    opacity: .7;
}
@keyframes innpay-grid-drift {
    0%   { background-position: 0 0, 0 0; }
    100% { background-position: 48px 48px, 48px 48px; }
}

/* nodos de datos flotantes (puntos grises tenues) */
.banner-style-five::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle 3px at 18% 30%, rgba(140,140,155,.35), transparent 60%),
        radial-gradient(circle 2px at 75% 22%, rgba(140,140,155,.28), transparent 60%),
        radial-gradient(circle 3px at 62% 74%, rgba(140,140,155,.3), transparent 60%),
        radial-gradient(circle 2px at 30% 82%, rgba(140,140,155,.24), transparent 60%),
        radial-gradient(circle 2px at 88% 58%, rgba(140,140,155,.3), transparent 60%);
    background-size: 640px 640px;
    background-repeat: repeat;
    pointer-events: none;
    z-index: 2;
    animation: innpay-nodes-float 24s ease-in-out infinite;
    opacity: .8;
}
@keyframes innpay-nodes-float {
    0%, 100% { transform: translateY(0) translateX(0); }
    33%      { transform: translateY(-14px) translateX(10px); }
    66%      { transform: translateY(8px) translateX(-12px); }
}

/* barras de datos / señal tecnológica */
.banner-style-five .anim-icons {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}
.banner-style-five .anim-icons::before,
.banner-style-five .anim-icons::after {
    content: "";
    position: absolute;
    background: linear-gradient(180deg, transparent, rgba(140,140,155,.16), transparent);
    width: 1px;
    height: 40%;
    animation: innpay-signal 9s ease-in-out infinite;
    opacity: .5;
}
.banner-style-five .anim-icons::before { left: 12%; top: -20%; }
.banner-style-five .anim-icons::after  { right: 18%; top: -20%; animation-delay: -4.5s; }
@keyframes innpay-signal {
    0%   { transform: translateY(-30%); opacity: 0; }
    40%  { opacity: .5; }
    100% { transform: translateY(240%); opacity: 0; }
}

/* ---------- 16. Colores de tarjetas de servicio (secuencia de marca) ---------- */
.application-setup .single-column:nth-of-type(1) .single-item { background: #091B4B; }
.application-setup .single-column:nth-of-type(2) .single-item { background: #1566F3; }
.application-setup .single-column:nth-of-type(3) .single-item { background: #17D19F; }
.application-setup .single-column:nth-of-type(4) .single-item { background: #A2AEBE; }

/* texto legible sobre cada fondo */
.application-setup .single-column:nth-of-type(1) .inner-box h3,
.application-setup .single-column:nth-of-type(1) .inner-box h3 a,
.application-setup .single-column:nth-of-type(1) .inner-box .text,
.application-setup .single-column:nth-of-type(1) .count-box { color: #ffffff !important; }
.application-setup .single-column:nth-of-type(2) .inner-box h3,
.application-setup .single-column:nth-of-type(2) .inner-box h3 a,
.application-setup .single-column:nth-of-type(2) .inner-box .text,
.application-setup .single-column:nth-of-type(2) .count-box { color: #ffffff !important; }
.application-setup .single-column:nth-of-type(3) .inner-box h3,
.application-setup .single-column:nth-of-type(3) .inner-box h3 a,
.application-setup .single-column:nth-of-type(3) .inner-box .text,
.application-setup .single-column:nth-of-type(3) .count-box { color: #06251d !important; }
.application-setup .single-column:nth-of-type(4) .inner-box h3,
.application-setup .single-column:nth-of-type(4) .inner-box h3 a,
.application-setup .single-column:nth-of-type(4) .inner-box .text,
.application-setup .single-column:nth-of-type(4) .count-box { color: #1c2733 !important; }

/* redondear y dar padding para que el color se vea limpio */
.application-setup .single-item {
    border-radius: 14px;
    padding: 30px 28px;
    transition: transform .3s ease, box-shadow .3s ease;
}

/* alinear las tarjetas (quitar desfase de nth-child(2) padding-top) */
.application-setup .single-column:nth-child(2) { padding-top: 0 !important; }

/* quitar fondo blanco interno de las tarjetas de servicio */
.application-setup .single-item .inner-box {
    background: transparent !important;
    box-shadow: none !important;
}
.application-setup .single-item .inner-box:before {
    display: none !important;
}

/* ---------- CTA/botones: texto blanco sobre fondo azul ---------- */
.theme-btn-two,
.theme-btn-two i,
.theme-btn i,
.main-header .menu-area .btn-box a,
.main-header .menu-area .btn-box a:hover {
    color: #fff !important;
}
.theme-btn-two:hover,
.theme-btn-two:hover i,
.theme-btn:hover,
.theme-btn:hover i {
    color: #fff !important;
}

/* ---------- 17. Fondo del footer (azul marino de marca) ---------- */
.main-footer {
    background-color: #091B4B !important;
}
.main-footer .image-layer {
    opacity: 0 !important;
}

/* texto del footer en blanco sobre fondo azul marino */
.main-footer,
.main-footer p,
.main-footer li,
.main-footer a,
.main-footer .footer-top .widget-title,
.main-footer .footer-top .about-widget .text,
.main-footer .footer-bottom {
    color: #eaeaf5 !important;
}
.main-footer .footer-top .widget-title:before,
.main-footer .footer-top .widget-title:after {
    background: #17D19F !important;
}

/* ---------- .page-title: texto gris medio (ya no hay fondo oscuro en Nosotros) ---------- */
.page-title .content-box .title-box h1,
.page-title .content-box .title-box p,
.page-title .content-box .bread-crumb li,
.page-title .content-box .bread-crumb li a,
.page-title .content-box .bread-crumb li:before {
    color: #6f6f6f !important;
}
.page-title .content-box .title-box h1:before {
    background: #6f6f6f !important;
}
.page-title .content-box .title-box h1:after {
    background: #a9a9a9 !important;
}

/* ---------- 18. Respetar prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}