/* =======================================================================
   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, #0645C0 0%, #1688F5 50%, #20C997 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. Tarjetas de servicio: fondo azul de marca (paleta oficial InnPay) ---------- */
.application-setup .single-column:nth-of-type(1) .single-item { background: #0645C0; }
.application-setup .single-column:nth-of-type(2) .single-item { background: #1688F5; }
.application-setup .single-column:nth-of-type(3) .single-item { background: #0645C0; }
.application-setup .single-column:nth-of-type(4) .single-item { background: #20C997; }

/* texto blanco sobre fondo de color */
.application-setup .single-column .inner-box h3,
.application-setup .single-column .inner-box h3 a,
.application-setup .single-column .inner-box .text {
    color: #ffffff !important;
}
.application-setup .single-column .count-box {
    background-image: linear-gradient(-45deg, #0645C0 0%, #1688F5 100%) !important;
    color: #fff !important;
}

/* redondear y dar padding para que el color se vea limpio */
.application-setup .single-item {
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    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; }

/* El texto va sobre el fondo de color (sin caja blanca) */
.application-setup .single-item .inner-box {
    background: transparent !important;
    box-shadow: none !important;
    padding: 28px 30px 36px 30px;
}
.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: #0645C0 !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: #20C997 !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;
    }
}

/* =======================================================================
   19. HERO RESPONSIVE — forzar la presencia gráfica en móvil y tablet
   El tema (responsive.css) oculta image-layer, pattern-layer, image-2,
   icon-box y :before por debajo de 991px/1200px. Aquí los reactivamos para
   que el hero no se vea "pelón" en pantallas chicas.
   NOTA: respetamos el padding-top del tema (200/170/120px) para que el
   contenido NO quede debajo del header fijo. Solo restauramos los gráficos.
   ======================================================================= */

/* ---- Tablet (≤1200px): restaurar grid + imagen de producto ---- */
@media only screen and (max-width: 1200px) {
    .banner-style-five:before {
        display: block !important;
    }
    .banner-style-five .image-box .image-2 {
        display: block !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        text-align: center;
    }
    .banner-style-five .image-box .image-2 img {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }
    .banner-style-five .image-box {
        margin-left: 0 !important;
        margin-right: 0 !important;
        min-height: auto !important;
    }
}

/* ---- Tablet vertical / móvil (≤991px): restaurar fondo + patrón ---- */
@media only screen and (max-width: 991px) {
    .banner-style-five .image-layer {
        display: block !important;
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        height: 100%;
        opacity: .45;                 /* tenue, no compite con texto */
        z-index: 0;
        /* fondo (nube): evitar que 'cover' la recorte lateralmente.
           con 100% auto se escala al ancho completo y se ancla a la
           derecha para que la nube (que nace a la derecha) quede completa.
           aplica a tablet vertical y móvil, donde el hero es vertical. */
        background-size: 100% auto !important;
        background-position: right top !important;
    }
    .banner-style-five .pattern-layer {
        display: block !important;
        opacity: .5;
        z-index: 0;
    }
    /* apilar: texto arriba, gráficos abajo */
    .banner-style-five .row {
        flex-direction: column;
    }
    .banner-style-five .content-column,
    .banner-style-five .image-column {
        max-width: 100%;
        flex: 0 0 100%;
    }
    .banner-style-five .content-box {
        padding-top: 0 !important;
        text-align: center;
        position: relative;
        z-index: 5;
    }
    .banner-style-five .content-box h1 {
        font-size: 34px !important;
        line-height: 46px !important;
        margin-bottom: 20px !important;
    }
    .banner-style-five .content-box .text {
        margin-bottom: 24px !important;
    }
}

/* ---- Móvil (≤767px): restaurar iconos flotantes ---- */
@media only screen and (max-width: 767px) {
    .banner-style-five .image-box .icon-box {
        display: block !important;
    }
    .banner-style-five .image-box .icon-box .icon {
        position: absolute !important;
    }
    .banner-style-five .image-box .icon-box .icon-2 { left: 6%; bottom: 20px; }
    .banner-style-five .image-box .icon-box .icon-3 { top: -10px; right: 10%; }
    .banner-style-five .image-box .icon-box .icon-4 { top: 10px; right: 0; }
    .banner-style-five .image-box .icon-box .icon-5 { bottom: 10px; right: 8%; }
    .banner-style-five .image-box {
        position: relative;
    }
    .banner-style-five .image-box .image-2 {
        text-align: center;
    }
    .banner-style-five .image-box .image-2 img {
        max-width: 92%;
        height: auto;
        margin: 0 auto;
    }
    .banner-style-five .content-box h1 {
        font-size: 28px !important;
        line-height: 38px !important;
    }
    .banner-style-five .content-box .text {
        font-size: 15px;
    }
    .banner-style-five .image-layer {
        opacity: .3;
    }
}

/* ---- Móvil pequeño (≤599px) ---- */
@media only screen and (max-width: 599px) {
    .banner-style-five .content-box h1 {
        font-size: 24px !important;
        line-height: 32px !important;
    }
    .banner-style-five .image-box .image-2 img {
        max-width: 100%;
    }
}

/* =======================================================================
   20. FONT AWESOME — iconos en lista de confianza
   Añade iconos coherentes en color de marca (#20C997) solo donde el theme
   no colocaba ninguno (banda "Por qué puedes confiar"). El footer y las
   listas de #content_block_17 ya traen sus propios iconos vía :before.
   ======================================================================= */

/* Banda de confianza ("Por qué puedes confiar en nosotros") */
.respaldo-section .list-item li {
    display: flex;
    align-items: flex-start;
    font-size: 17px;
    font-weight: 500;
    color: #2b2b3a;
    margin-bottom: 12px;
}
.respaldo-section .list-item li i {
    color: #1688F5;
    font-size: 18px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    margin-right: 16px;
    line-height: 1.6;
    transition: transform .25s ease;
}
.respaldo-section .list-item li:hover i {
    transform: scale(1.15);
}

/* =======================================================================
   21. HERO SLIDER — 3 slides que agregan valor (servicios/productos)
   Reemplaza el hero estático por un carrusel moderno. Usa Owl Carousel
   (ya cargado en el tema). Cada slide enlaza a un servicio.
   ======================================================================= */

.innpay-hero-slider {
    position: relative;
    overflow: hidden;
}
.innpay-hero-slider .hero-carousel { display: block; }
.innpay-hero-slider .hero-slide {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
}
.innpay-hero-slider .hero-slide-inner {
    width: 100%;
    padding: 220px 0 120px;
}

/* Fondos por slide (degradados de marca InnPay) */
.hero-slide-1 { background: linear-gradient(130deg, #0645C0 0%, #1688F5 60%, #1688F5 100%); }
.hero-slide-2 { background: linear-gradient(130deg, #0645C0 0%, #1688F5 50%, #0645C0 100%); }
.hero-slide-3 { background: linear-gradient(130deg, #0645C0 0%, #20C997 90%, #1688F5 100%); }

/* El header style-two trae una capa decorativa blanca (:before) detrás de la
   píldora navy. Sobre el fondo oscuro del slider desentona; la camuflamos. */
.main-header.style-two .outer-container .main-box:before {
    background: transparent !important;
    box-shadow: none !important;
}

/* partículas decorativas sutiles */
.hero-slide::before {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(236, 95, 13, .18);
    filter: blur(60px);
}
.hero-slide::after {
    content: "";
    position: absolute;
    left: -60px;
    bottom: -100px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(37, 99, 235, .25);
    filter: blur(70px);
}

.innpay-hero-slider .content-column,
.innpay-hero-slider .image-column { position: relative; z-index: 2; }

.innpay-hero-slider .content-box {
    padding: 0;
    color: #fff;
}
.innpay-hero-slider .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #e8f2ff;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 50px;
    margin-bottom: 22px;
    letter-spacing: .4px;
}
.innpay-hero-slider .content-box h1 {
    font-size: clamp(32px, 4.6vw, 56px);
    line-height: 1.15;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    letter-spacing: -.02em;
}
.innpay-hero-slider .content-box .text {
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .85);
    max-width: 560px;
    margin-bottom: 30px;
}
.innpay-hero-slider .content-box .btn-box a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* el .theme-btn-two ya aporta estilo base */
    font-weight: 700;
}

/* imagen ilustrativa del hero (reemplaza los iconos Font Awesome) */
.innpay-hero-slider .hero-icon-wrap {
    position: relative;
    text-align: center;
}
.innpay-hero-slider .hero-icon-wrap img {
    width: 100%;
    max-width: clamp(300px, 36vw, 520px);
    height: auto;
    display: inline-block;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .35));
    animation: heroFloat 5s ease-in-out infinite;
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-24px); }
}

/* AOS-like: entrada escalonada de cada elemento del slide activo.
   Solo animamos el slide activo (.owl-item.active); el resto queda oculto. */
.innpay-hero-slider .owl-item .hero-slide .hero-tag,
.innpay-hero-slider .owl-item .hero-slide h1,
.innpay-hero-slider .owl-item .hero-slide .text,
.innpay-hero-slider .owl-item .hero-slide .btn-box,
.innpay-hero-slider .owl-item .hero-slide .hero-icon-wrap {
    opacity: 0;
}
.innpay-hero-slider .owl-item.active .hero-slide .hero-tag,
.innpay-hero-slider .owl-item.active .hero-slide h1,
.innpay-hero-slider .owl-item.active .hero-slide .text,
.innpay-hero-slider .owl-item.active .hero-slide .btn-box,
.innpay-hero-slider .owl-item.active .hero-slide .hero-icon-wrap {
    animation: aosFadeUp .7s cubic-bezier(.22,.61,.36,1) forwards;
}
.innpay-hero-slider .owl-item.active .hero-slide .hero-tag { animation-delay: .05s; }
.innpay-hero-slider .owl-item.active .hero-slide h1 { animation-delay: .15s; }
.innpay-hero-slider .owl-item.active .hero-slide .text { animation-delay: .28s; }
.innpay-hero-slider .owl-item.active .hero-slide .btn-box { animation-delay: .42s; }
.innpay-hero-slider .owl-item.active .hero-slide .hero-icon-wrap { animation-delay: .55s; }
@keyframes aosFadeUp {
    0%   { opacity: 0; transform: translateY(28px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Parallax sutil: los elementos internos se desplazan a distinta velocidad.
   Usa paroller (ya cargado) sobre .hero-icon-wrap y el glow. */
.innpay-hero-slider .hero-slide .hero-icon-wrap[data-paroller-factor] {
    will-change: transform;
}

/* Dots / nav personalizados */
.innpay-hero-slider .owl-dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 10px;
    margin: 0;
}
.innpay-hero-slider .owl-dots .owl-dot span {
    display: block;
    width: 34px;
    height: 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .3);
    transition: all .3s ease;
}
.innpay-hero-slider .owl-dots .owl-dot.active span {
    width: 48px;
    background: #1688F5;
}
.innpay-hero-slider .owl-dots .owl-dot:hover span {
    background: rgba(255, 255, 255, .55);
}

/* Nav flechas */
.innpay-hero-slider .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 5;
    pointer-events: none;
    margin: 0;
}
.innpay-hero-slider .owl-nav .owl-prev,
.innpay-hero-slider .owl-nav .owl-next {
    position: absolute;
    pointer-events: auto;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    color: #fff !important;
    font-size: 22px !important;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .3s ease;
    padding: 0;
    line-height: 1;
}
.innpay-hero-slider .owl-nav .owl-prev i,
.innpay-hero-slider .owl-nav .owl-next i {
    color: #fff;
    font-size: 20px;
    line-height: 1;
}
.innpay-hero-slider .owl-nav .owl-prev:hover,
.innpay-hero-slider .owl-nav .owl-next:hover {
    background: #1688F5 !important;
}
.innpay-hero-slider .owl-nav .owl-prev { left: 20px; }
.innpay-hero-slider .owl-nav .owl-next { right: 20px; }

/* ================= RESPONSIVE ================= */
@media only screen and (max-width: 991px) {
    .innpay-hero-slider .hero-slide { min-height: 540px; }
    .innpay-hero-slider .hero-slide-inner { padding: 110px 0 80px; }
    .innpay-hero-slider .hero-icon-wrap { margin-top: 40px; }
    .innpay-hero-slider .content-box { text-align: center; }
    .innpay-hero-slider .content-box .text { margin-left: auto; margin-right: auto; }
}
@media only screen and (max-width: 599px) {
    .innpay-hero-slider .hero-slide { min-height: 500px; }
    .innpay-hero-slider .owl-nav button { display: none; }
    .innpay-hero-slider .owl-dots { bottom: 18px; }
}

/* =======================================================================
   22. IMÁGENES EN TARJETAS DE SERVICIOS (application-setup)
   Ilustraciones dentro de cada tarjeta, con prioridad mobile.
   ======================================================================= */

.application-setup .single-item .card-image {
    position: relative;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border-top-left-radius: 50px;
    overflow: hidden;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
}
.application-setup .single-item .card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 12px;
    transition: transform .4s ease;
    box-shadow: none !important;
    background: transparent !important;
}
.application-setup .single-item:hover .card-image img {
    transform: scale(1.06);
}

/* El count-box (número) pasa a ser badge sobre la esquina de la imagen. */
.application-setup .single-item .count-box {
    top: 18px;
    left: 18px;
    width: 56px;
    height: 56px;
    line-height: 56px;
    font-size: 20px;
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .35);
}

/* El inner-box (texto) pierde su borde superior de radio cuando va debajo
   de la imagen, para que ambas se fundan en una sola tarjeta. */
.application-setup .single-item:has(.card-image) .inner-box {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-top: 30px;
}
/* Quitar el escalonado decorativo del 2º col para que las 4 tarjetas alineen. */
.application-setup .single-column:nth-child(2) {
    padding-top: 0;
}

/* ============================ MOBILE-FIRST ============================ */
@media only screen and (max-width: 991px) {
    .application-setup .single-item .card-image { height: 150px; }
}
@media only screen and (max-width: 599px) {
    .application-setup .single-column { padding-top: 0 !important; }
    .application-setup .single-item { margin-bottom: 30px; }
    .application-setup .single-item .card-image { height: 160px; }
    .application-setup .single-item .card-image img { padding: 10px; }
}

/* =======================================================================
   23. SECCIÓN "Si tú creces, nosotros crecemos" — alineación UX/UI
   La imagen del celular (izq) y el texto (der) estaban desbalanceados.
   Se centra verticalmente y se refuerza jerarquía visual.
   ======================================================================= */

/* Centrar verticalmente ambas columnas 50/50 */
.elementor-section[data-id="44f46dca"] .elementor-column {
    display: flex;
    align-items: center;
}
.elementor-section[data-id="44f46dca"] .elementor-widget-wrap {
    width: 100%;
}

/* Imagen del celular: centrada, SIN sombra y expandida al 85% del contenedor */
.elementor-section[data-id="44f46dca"] #iamge_block_05 .image-box {
    text-align: center;
    padding: 20px 0;
    display: flex;
    justify-content: center;
}
.elementor-section[data-id="44f46dca"] #iamge_block_05 figure.image {
    display: block;
    width: 88%;
    max-width: none;
    margin: 0 auto;
}
.elementor-section[data-id="44f46dca"] #iamge_block_05 figure.image img {
    width: 100%;
    height: auto;
    box-shadow: none !important;
}

/* Texto: solo espacios (sin cambiar colores ni fuentes) */
.elementor-section[data-id="44f46dca"] #content_block_17 .content-box {
    padding: 10px 0;
}
.elementor-section[data-id="44f46dca"] #content_block_17 .content-box .sec-title h2 {
    line-height: 1.25;
    margin-bottom: 22px;
}
.elementor-section[data-id="44f46dca"] #content_block_17 .content-box .sec-title img {
    margin-bottom: 14px;
}
.elementor-section[data-id="44f46dca"] #content_block_17 .content-box h3 {
    margin-bottom: 22px;
    color: #59636E;
}
.elementor-section[data-id="44f46dca"] #content_block_17 .content-box .list-item {
    margin-bottom: 40px;
}

/* ================= RESPONSIVE ================= */
@media only screen and (max-width: 767px) {
    .elementor-section[data-id="44f46dca"] .elementor-col-50 {
        width: 100% !important;
    }
    .elementor-section[data-id="44f46dca"] #iamge_block_05 figure.image {
        width: 80%;
        margin: 0 auto;
    }
    .elementor-section[data-id="44f46dca"] .optimization-application {
        padding: 40px 0 60px;
    }
}

/* =======================================================================
   24. SECCIÓN "Beneficios" — fondo degradado del hero (azul → verde agua)
   Rey pide que Beneficios tenga el mismo background del hero, de azul
   fuerte (#0645C0) a verde agua (#20C997), y que los textos no se pierdan.
   ======================================================================= */

/* Fondo degradado aplicado UNA SOLA VEZ en el wrapper .beneficios-wrap */
.beneficios-wrap {
    background: linear-gradient(130deg, #0645C0 0%, #1688F5 45%, #20C997 110%) !important;
    padding: 60px 0;
}

/* Hijos transparentes: NO duplicar el degradado */
.elementor-element[data-id="b49a1ac"],
.elementor-element[data-id="b0f410c"] {
    background: transparent !important;
}
.elementor-element[data-id="b49a1ac"] {
    padding-top: 0;
    padding-bottom: 0;
}
.elementor-element[data-id="b0f410c"] {
    padding-top: 20px;
}

/* Título "Beneficios" en blanco para contraste */
.elementor-element[data-id="b49a1ac"] .make-difference .sec-title h2 {
    color: #ffffff !important;
}

/* Descripciones de las 8 tarjetas en blanco */
.elementor-element[data-id="b0f410c"] .elementor-image-box-description {
    color: #ffffff !important;
}
.elementor-element[data-id="b0f410c"] .elementor-image-box-wrapper {
    text-align: center;
}

/* Imágenes: asegurar que no hereden fondo blanco que rompa el degradado */
.elementor-element[data-id="b0f410c"] .elementor-image-box-img img {
    max-width: 130px;
    margin: 0 auto;
    display: block;
}

/* ================= RESPONSIVE ================= */
@media only screen and (max-width: 767px) {
    .beneficios-wrap {
        padding: 40px 0;
    }
}

/* =======================================================================
   25. SECCIÓN "Si tú creces, nosotros crecemos" — unificar + grillita
   Rey pide que no se vea dividida (celular izq vs texto der) y que tenga
   un fondo tipo grid sutil, con proporción correcta en desktop/tablet/móvil.
   ======================================================================= */

/* Fondo grillita (grid) tenue + base clara para integrar las dos columnas */
.elementor-section[data-id="44f46dca"] {
    position: relative;
    padding: 80px 0 90px !important;
    background-color: #ffffff;
    background-image:
        linear-gradient(rgba(6, 69, 192, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 69, 192, 0.045) 1px, transparent 1px);
    background-size: 44px 44px;
}

/* envolver ambas columnas en un solo bloque visual (tarjeta integrada) */
.elementor-section[data-id="44f46dca"] .elementor-container {
    max-width: 1140px;
}
.elementor-section[data-id="44f46dca"] .elementor-widget-wrap {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Columna izquierda (celular): centrar y dar aire */
.elementor-section[data-id="44f46dca"] .elementor-column[data-id="27c92443"] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Columna derecha (texto): alinear y dar aire simétrico */
.elementor-section[data-id="44f46dca"] .elementor-column[data-id="43702ada"] {
    display: flex;
    align-items: center;
}

/* Responsive tablet (≤991px): columnas se apilan limpias */
@media only screen and (max-width: 991px) {
    .elementor-section[data-id="44f46dca"] .elementor-col-50 {
        width: 100% !important;
        max-width: 100% !important;
    }
    .elementor-section[data-id="44f46dca"] {
        padding: 50px 0 60px !important;
    }
    .elementor-section[data-id="44f46dca"] .elementor-column[data-id="27c92443"],
    .elementor-section[data-id="44f46dca"] .elementor-column[data-id="43702ada"] {
        justify-content: center;
    }
}

/* Responsive móvil (≤599px): imagen acotada y texto centrado */
@media only screen and (max-width: 599px) {
    .elementor-section[data-id="44f46dca"] {
        padding: 40px 0 50px !important;
        background-size: 34px 34px;
    }
    .elementor-section[data-id="44f46dca"] #iamge_block_05 figure.image {
        width: 78%;
    }
    .elementor-section[data-id="44f46dca"] #content_block_17 .content-box {
        text-align: left;
        padding: 0 6px;
    }
}